/* ============================================================
   Owner-builder landing page (v2) — standalone stylesheet.
   Brand tokens from the main site; deliberately self-contained
   so the page stays fast and iterates without touching styles.css.
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('fonts/space-grotesk-vf-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('fonts/inter-vf-latin.woff2') format('woff2');
}

:root {
  --ink: #2e1a32;
  --ink-soft: #4b3055;
  --accent: #ee371b;
  --accent-dark: #cf2c12;
  --purple: #60358f;
  --canvas: #f6f5f0;
  --surface: #ffffff;
  --border: #d8d0df;
  --border-soft: #e6e1ea;
  --muted: #5d4d64;
  --success: #1a7a42;
  --error: #c42b2b;
  --error-soft: #fdf1f1;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 24px 60px -24px rgba(46, 26, 50, 0.35), 0 6px 18px -8px rgba(46, 26, 50, 0.18);
  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4l3 3 6.6-7'/%3E%3C/svg%3E");
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 16px/1.6 var(--font-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: var(--purple); }

.lp-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.lp-container--narrow { max-width: 780px; }

.lp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  font: 700 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}

.lp-btn:active { transform: translateY(1px); }

.lp-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(238, 55, 27, 0.55);
}

.lp-btn--primary:hover,
.lp-btn--primary:focus-visible { background: var(--accent-dark); }

.lp-btn--light {
  background: #fff;
  color: var(--ink);
}

.lp-btn--light:hover { background: var(--canvas); }

.lp-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--border);
}

.lp-btn--ghost:hover { border-color: var(--ink-soft); }

.lp-btn--big { padding: 1rem 2rem; font-size: 1.05rem; }
.lp-btn--small { padding: 0.5rem 1rem; min-height: 40px; font-size: 0.9rem; }
.lp-btn--full { width: 100%; }

.lp-btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(238, 55, 27, 0.4);
  outline-offset: 2px;
}

/* ── Header ──────────────────────────────────────────────── */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.lp-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.lp-header__brand img {
  width: 148px;
  height: auto;
  display: block;
}

.lp-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lp-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.lp-header__phone svg { width: 18px; height: 18px; }

.lp-header__cta { padding: 0.6rem 1.2rem; min-height: 44px; font-size: 0.95rem; }

@media (max-width: 640px) {
  .lp-header__cta { display: none; }
  .lp-header__phone span { display: none; }
  .lp-header__phone svg { width: 22px; height: 22px; }
  .lp-header__phone {
    width: 44px; height: 44px;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: 999px;
  }
}

/* ── Hero ────────────────────────────────────────────────── */
.lp-hero {
  background: linear-gradient(160deg, var(--ink) 0%, #46256b 55%, var(--purple) 100%);
  color: #f6f5f0;
  padding: 3.5rem 0 4rem;
}

.lp-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: start;
}

.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 245, 240, 0.75);
}

.lp-eyebrow::before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}

.lp-eyebrow--dark {
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.lp-eyebrow--center {
  justify-content: center;
  margin-bottom: 0.8rem;
}

.lp-hero__copy h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.15rem);
  letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
}

.lp-hero__sub {
  margin: 0 0 1.5rem;
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(246, 245, 240, 0.92);
  max-width: 34rem;
}

.lp-proofs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.lp-proofs li {
  position: relative;
  padding-left: 2rem;
  font-weight: 600;
}

.lp-proofs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(238, 55, 27, 0.25);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ffb3a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.4l2.9 2.9 5.9-6.6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}

.lp-hero__mobile-cta { display: none; margin: 1.75rem 0 0; }

/* ── Form card ───────────────────────────────────────────── */
.lp-form-slot {
  position: sticky;
  top: 84px;
  scroll-margin-top: 90px;
}

.lp-form {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1.5rem 1.35rem;
}

.lp-gotcha {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.lp-form__head { margin-bottom: 1.1rem; }

.lp-form__progress {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.lp-form__steplabel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.lp-form__time {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.lp-form__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--canvas);
  overflow: hidden;
}

.lp-form__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--success), #2fa269);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.lp-step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.lp-step[hidden] { display: none; }
.lp-step > * { min-width: 0; }

/* ── Fields ──────────────────────────────────────────────── */
.lp-field { margin-bottom: 0.95rem; position: relative; }

.lp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.lp-field label,
.lp-toggle-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.lp-field input[type="text"],
.lp-field input[type="email"],
.lp-field input[type="tel"],
.lp-field input[type="number"],
.lp-field input[type="date"],
.lp-field input:not([type]),
.lp-field select,
.lp-field textarea,
.gc-yntable__row--stack textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font: 500 1rem/1.4 var(--font-body);
  color: var(--ink);
  appearance: none;
}

.lp-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%235d4d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.9rem;
  padding-right: 2.3rem;
}

.lp-field textarea,
.gc-yntable__row--stack textarea { min-height: 0; resize: vertical; }

.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus,
.gc-yntable__row--stack textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(96, 53, 143, 0.18);
}

.lp-field input[aria-invalid="true"],
.lp-field select[aria-invalid="true"],
.lp-field textarea[aria-invalid="true"],
.gc-yntable__row--stack textarea[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-soft);
}

.lp-help {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.lp-error {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--error);
}

.lp-error--global {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: var(--error-soft);
  border: 1px solid rgba(196, 43, 43, 0.3);
  border-radius: var(--radius-sm);
}

/* Currency input */
.lp-currency {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.lp-currency span {
  padding: 0 0 0 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.lp-currency input {
  border: 0 !important;
  box-shadow: none !important;
  min-height: 45px;
}

.lp-currency:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(96, 53, 143, 0.18);
}

.lp-field input[aria-invalid="true"] ~ * .lp-currency,
.lp-currency.is-invalid { border-color: var(--error); background: var(--error-soft); }

/* Address suggestions */
.lp-field--addr { position: relative; }

.lp-addr-list {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  top: calc(100% - 0.2rem);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px -18px rgba(46, 26, 50, 0.4);
  max-height: 230px;
  overflow: auto;
}

.lp-addr-list li {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.92rem;
  cursor: pointer;
}

.lp-addr-list li:hover,
.lp-addr-list li[aria-selected="true"] { background: var(--canvas); }

/* Yes/No segmented toggle */
/* Border sits on each segment (not the wrapper) so the selected segment's
   border can match its own fill instead of keeping a pale outline. */
.lp-toggle {
  display: inline-flex;
  border-radius: 999px;
  background: #fff;
}

.lp-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lp-toggle label {
  position: relative;
  padding: 0.6rem 1.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
  margin: 0;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.lp-toggle label:first-of-type { border-radius: 999px 0 0 999px; }
.lp-toggle label:last-of-type { border-radius: 0 999px 999px 0; }

/* collapse the shared edge so the pair still reads as one control */
.lp-toggle label + input + label { margin-left: -1.5px; }

.lp-toggle input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  z-index: 1;
}

.lp-toggle input:focus-visible + label {
  outline: 3px solid rgba(238, 55, 27, 0.4);
  outline-offset: -3px;
}

.lp-toggle--small label {
  padding: 0.35rem 0.9rem;
  min-height: 36px;
  font-size: 0.84rem;
}

/* Pill radios (liability limit) */
.lp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lp-pills input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lp-pills label {
  padding: 0.55rem 1.05rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  margin: 0;
}

.lp-pills input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.lp-pills input:focus-visible + label {
  outline: 3px solid rgba(238, 55, 27, 0.4);
  outline-offset: 2px;
}

/* Sub-groups (existing structure, claims) */
.lp-subgroup {
  border: 1.5px solid var(--border-soft);
  background: #faf9fc;
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  margin-bottom: 0.95rem;
}

.lp-subgroup__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.lp-minitoggles { display: grid; gap: 0.45rem; }

.lp-minitoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Claims repeater */
.lp-claim {
  border: 1.5px solid var(--border-soft);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.7rem;
}

.lp-claim__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}

.lp-claim__title { font-weight: 700; font-size: 0.88rem; }

.lp-claim__remove {
  border: 0;
  background: none;
  color: var(--muted);
  font: 600 0.8rem var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}

/* Checkboxes / declarations */
.lp-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.5;
  cursor: pointer;
}

.lp-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* Consent (single tick: contact consent + FSG/Privacy + duty, links inline) */
.lp-consent {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
  margin: 1.1rem 0 0.4rem;
}

.lp-check__tag {
  font-style: normal;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.lp-dutylink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-decoration-color: rgba(96, 53, 143, 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lp-dutylink:hover { text-decoration-color: var(--purple); }

.lp-dutytext {
  margin: 0 0 0 1.8rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--border);
  background: #faf9fc;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.55;
}

.lp-dutytext p { margin: 0 0 0.55rem; }
.lp-dutytext p:last-child { margin-bottom: 0; }

/* Nav + submit */
.lp-form__nav { margin-top: auto; padding-top: 1.2rem; }

.lp-form__nav--split {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.lp-form__nav--split .lp-btn--primary { flex: 1 1 auto; }

.lp-reassure {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* ── Card-led step 1 ─────────────────────────────────────── */
.lp-cardgroup { margin-bottom: 1.1rem; }
.lp-cardgroup[hidden] { display: none; }

.lp-cardgroup__label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.lp-cardgroup__label em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}

.lp-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.lp-cards-grid--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lp-card-opt { display: block; cursor: pointer; }

.lp-card-opt[hidden] { display: none; }

.lp-card-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lp-card-opt__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 100%;
  min-height: 78px;
  padding: 0.6rem 0.35rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.lp-cards-grid--sm .lp-card-opt__inner { min-height: 70px; font-size: 0.7rem; }

.lp-card-opt__inner svg { width: 24px; height: 24px; color: var(--purple); flex: 0 0 auto; }

.lp-card-opt:hover .lp-card-opt__inner { border-color: var(--purple); }

.lp-card-opt input:checked + .lp-card-opt__inner {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.lp-card-opt input:checked + .lp-card-opt__inner svg { color: #fff; }

.lp-card-opt input:focus-visible + .lp-card-opt__inner {
  outline: 3px solid rgba(238, 55, 27, 0.4);
  outline-offset: 2px;
}

/* Live plain-English summary of the card selections */
.lp-sentence {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--accent);
  background: var(--canvas);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}

.lp-sentence[hidden] { display: none; }
.lp-sentence strong { font-weight: 700; }

/* Value slider */
.lp-field--slider { margin-top: 0.2rem; }

.lp-slider__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.lp-slider__head label { margin-bottom: 0; }

.lp-slider__readout {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  white-space: nowrap;
}

/* Untouched required slider: the readout is a prompt, not a value. */
.lp-slider__readout.is-req {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-dark);
}

input[type="range"].lp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  /* Embed hardening: styles.css sets padding + a border on every input, which
     inflates the track into a chunky bar on pages that load both sheets. */
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 8%), var(--border) var(--fill, 8%));
  outline: none;
  margin: 0.4rem 0 0.1rem;
  cursor: pointer;
}

input[type="range"].lp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--accent);
  box-shadow: 0 2px 8px rgba(46, 26, 50, 0.3);
  cursor: grab;
}

input[type="range"].lp-range::-moz-range-thumb {
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: #fff;
  border: 2.5px solid var(--accent);
  box-shadow: 0 2px 8px rgba(46, 26, 50, 0.3);
  cursor: grab;
}

input[type="range"].lp-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
}

input[type="range"].lp-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

input[type="range"].lp-range:focus-visible {
  outline: 3px solid rgba(238, 55, 27, 0.4);
  outline-offset: 4px;
}

.lp-slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

/* Duration stepper */
.lp-stepper {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  min-height: 48px;
}

.lp-stepper__btn {
  width: 46px;
  border: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 700 1.25rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.lp-stepper__btn:hover { background: var(--border-soft); color: var(--purple); }

.lp-stepper__btn:focus-visible {
  outline: 3px solid rgba(238, 55, 27, 0.4);
  outline-offset: -3px;
}

.lp-stepper__val {
  flex: 1;
  display: flex;
  align-self: center;      /* size to the text, centred in the 48px bar */
  align-items: baseline;   /* the number and "months" share a baseline */
  justify-content: center;
  gap: 0.3rem;
}

.lp-field .lp-stepper__val input {
  width: 2.6ch;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-weight: 700;
  text-align: right;
  -moz-appearance: textfield;
}

.lp-field .lp-stepper__val input:focus { box-shadow: none; }

.lp-stepper__val input::-webkit-outer-spin-button,
.lp-stepper__val input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lp-stepper__val span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

/* Custom date field (DD/MM/YYYY typing + popover calendar) */
.lp-datewrap { position: relative; }

.lp-datewrap input { padding-right: 2.7rem; }

.lp-datebtn {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.lp-datebtn:hover,
.lp-datebtn[aria-expanded="true"] {
  background: var(--canvas);
  color: var(--purple);
}

.lp-datebtn svg { width: 19px; height: 19px; }

.lp-cal {
  position: absolute;
  z-index: 35;
  top: calc(100% + 6px);
  left: 0;
  width: 274px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(46, 26, 50, 0.4);
  padding: 0.7rem;
}

.lp-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.lp-cal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
}

.lp-cal__nav {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-soft);
  font: 700 0.9rem var(--font-body);
  cursor: pointer;
}

.lp-cal__nav:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.lp-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.lp-cal__dow {
  text-align: center;
  padding: 0.25rem 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.lp-cal__day {
  height: 33px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: 600 0.85rem var(--font-body);
  color: var(--ink);
  cursor: pointer;
}

.lp-cal__day:hover { background: var(--canvas); }

.lp-cal__day.is-out { color: rgba(93, 77, 100, 0.4); }

.lp-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--border); }

.lp-cal__day.is-selected {
  background: var(--accent);
  color: #fff;
}

/* Message us section (maps to the main contact form's inbox) */
.lp-msgcard {
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.1rem;
}

.lp-msgus__done {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--success);
}

/* Success state */
.lp-success { text-align: center; padding: 1.5rem 0.5rem 1rem; }

.lp-success__icon svg {
  width: 64px;
  height: 64px;
  color: var(--success);
  margin-bottom: 0.75rem;
}

.lp-success h3 {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}

.lp-success p { margin: 0 0 0.5rem; color: var(--ink-soft); }

.lp-success__ref {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Trust bar ───────────────────────────────────────────── */
.lp-trustbar {
  background: var(--canvas);
  border-bottom: 1px solid var(--border-soft);
}

.lp-trustbar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.lp-trustbar__dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.lp-trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.lp-trustbar__icon {
  width: 15px;
  height: 15px;
  color: var(--success);
  flex: 0 0 auto;
}

/* ── Training hook strip ─────────────────────────────────── */
.lp-hookbar {
  background: #fdf3ef;
  border-bottom: 1px solid rgba(238, 55, 27, 0.18);
}

.lp-hookbar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

.lp-hookbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(238, 55, 27, 0.12);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-hookbar__icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Inline link polish: offset underlines in the brand purple */
main a:not(.lp-btn):not(.lp-finalcta__phone) {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(96, 53, 143, 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.12s ease;
}

main a:not(.lp-btn):not(.lp-finalcta__phone):hover {
  text-decoration-color: var(--purple);
}

.lp-finalcta__phone {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.lp-finalcta__phone:hover { text-decoration-color: #fff; }

.lp-faq summary:hover { color: var(--purple); }

.lp-footer a {
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.lp-footer a:hover { text-decoration-color: #fff; }

/* ── Sections ────────────────────────────────────────────── */
.lp-section { padding: 4.75rem 0; }

.lp-section--soft { background: var(--canvas); }

.lp-section h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  letter-spacing: -0.022em;
  margin-bottom: 1rem;
  max-width: 38rem;
}

.lp-section__body {
  margin: 0 0 2rem;
  max-width: 44rem;
  font-size: 1.06rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ── The gap: one statement, given room and scale ───────────── */
.lp-gap {
  padding: 3.75rem 0;
  background: var(--canvas);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.lp-gap__statement {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 20ch;
}

.lp-gap__statement em {
  font-style: normal;
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}

.lp-gap__statement em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.07em;
  height: 0.09em;
  border-radius: 2px;
  background: rgba(238, 55, 27, 0.28);
}

.lp-gap__sub {
  margin: 0;
  max-width: 46rem;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.lp-pricewhy {
  margin-bottom: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}

.lp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.lp-card {
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.lp-section--soft .lp-card { border-color: transparent; }

.lp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(26, 122, 66, 0.10);
  color: var(--success);
  margin-bottom: 1rem;
}

.lp-card__icon svg {
  width: 29px;
  height: 29px;
}

.lp-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.lp-card p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* How it works */
.lp-steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0;
}

.lp-steps li {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: 0 1.75rem;
  align-items: start;
  padding: 1.9rem 0;
  border-top: 1px solid var(--border);
}

.lp-steps li:last-child { border-bottom: 1px solid var(--border); }

/* Oversized numerals as the section's graphic system — one accent, used
   decisively three times, rather than a timid label. */
.lp-steps__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.5vw, 3.6rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.lp-steps h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin-bottom: 0.4rem;
}

.lp-steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 42rem;
}

.lp-inline-cta { margin: 0; }

/* Pricing section */
.lp-star { color: var(--accent); }

.lp-pricing__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 3rem;
  align-items: center;
}

.lp-pricing__art svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 0 0 auto;
}

.lp-pricenote {
  border-left: 3px solid var(--border);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 0 0 1.75rem;
  max-width: 44rem;
}

.lp-pricenote p {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

.lp-pricenote p:last-child { margin-bottom: 0; }

/* Founder block — set as a signed quote */
blockquote.lp-founder {
  position: relative;
  border-left: 3px solid var(--accent);
  padding-left: 1.6rem;
  margin: 0 0 1.25rem;
}

blockquote.lp-founder::before {
  content: "\201C";
  position: absolute;
  left: 0.55rem;
  top: -0.55rem;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(238, 55, 27, 0.18);
  pointer-events: none;
}

.lp-founder p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

.lp-founder p:first-of-type { position: relative; }

.lp-founder__sign {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.lp-chips {
  list-style: none;
  margin: 0 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lp-chips li {
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Standout callout — the insurer-access point, given its own weight */
.lp-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 1.75rem 0 0;
  padding: 1.15rem 1.35rem;
  border: 1.5px solid rgba(238, 55, 27, 0.28);
  border-radius: var(--radius);
  background: #fdf3ef;
}

.lp-callout svg {
  width: 26px;
  height: 26px;
  color: var(--accent);
  flex: 0 0 auto;
  margin-top: 0.15rem;
}

.lp-callout p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink);
}

.lp-callout strong { font-weight: 700; }

/* Why Arrange */
.lp-ticklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 44rem;
}

.lp-ticklist li {
  position: relative;
  padding-left: 2rem;
  font-weight: 600;
  color: var(--ink);
}

.lp-ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: rgba(26, 122, 66, 0.12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%231a7a42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.4l2.9 2.9 5.9-6.6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}

/* FAQ */
.lp-faq {
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 0.6rem;
}

.lp-faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.lp-faq[open] summary::after { transform: rotate(225deg); }

.lp-faq p {
  margin: 0;
  padding: 0 1.1rem 1rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* "What information do I need" answers a five-step questionnaire, so it reads
   as bullets rather than one run-on sentence. Spacing matches .lp-faq p. */
.lp-faq p.lp-faq__lead { padding-bottom: 0.55rem; }

.lp-faq ul {
  margin: 0;
  padding: 0 1.1rem 0.9rem 2.3rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}

.lp-faq ul li { margin: 0 0 0.4rem; }

.lp-faq ul li:last-child { margin-bottom: 0; }

.lp-faq ul + p { padding-top: 0; }

/* Final CTA */
.lp-finalcta {
  background: linear-gradient(150deg, var(--ink), var(--purple));
  color: #f6f5f0;
  border-radius: var(--radius);
  padding: 2.75rem 2.5rem;
  text-align: center;
}

.lp-finalcta h2 {
  margin: 0 auto 0.7rem;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  letter-spacing: -0.022em;
}

.lp-finalcta p {
  margin: 0 auto 1.5rem;
  max-width: 34rem;
  color: rgba(246, 245, 240, 0.9);
}

.lp-finalcta__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.lp-finalcta__phone {
  color: #fff;
  font-weight: 700;
}

/* ── Footer ──────────────────────────────────────────────── */
.lp-footer {
  background: var(--ink);
  color: rgba(246, 245, 240, 0.8);
  padding: 2.5rem 0 5.5rem;
  font-size: 0.82rem;
  line-height: 1.65;
}

.lp-footer a { color: #fff; }

.lp-footer__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 0.4rem;
}

.lp-footer__text { margin: 0 0 0.9rem; max-width: 62rem; }

.lp-footer__text--muted { color: rgba(246, 245, 240, 0.55); }

.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0 0 1.1rem;
  font-weight: 600;
}

/* ── Sticky mobile CTA ───────────────────────────────────── */
.lp-stickycta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-soft);
}

.lp-stickycta[hidden] { display: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .lp-pricing__grid { grid-template-columns: 1fr; gap: 2rem; }

  .lp-hero { padding: 2.5rem 0 3rem; }

  .lp-hero__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .lp-hero__mobile-cta { display: block; }

  .lp-form-slot { position: static; }

  .lp-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .lp-section { padding: 2.75rem 0; }

  .lp-field-row { grid-template-columns: 1fr; gap: 0; }

  .lp-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cards-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-founder { padding-left: 1rem; }
  .lp-gap { padding: 2.75rem 0; }
  .lp-pricing__art { display: none; }
  .lp-steps li { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; }
  .lp-steps__num { font-size: 2.4rem; }

  .lp-form { padding: 1.15rem 1rem 1rem; border-radius: 14px; }

  .lp-finalcta { padding: 2rem 1.25rem; }

  .lp-toggle label { flex: 1 1 auto; justify-content: center; }

  .lp-toggle { display: flex; width: 100%; }

  .lp-minitoggle { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-form__bar i { transition: none; }
}

/* ── Question eyebrow (hero): sentence case, human ─────────── */
.lp-eyebrow--question {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: rgba(246, 245, 240, 0.92);
}

/* ── Hero trust strip (condensed social proof) ─────────────── */
.lp-herotrust {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1.05rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  max-width: 34rem;
}
.lp-herotrust svg { width: 22px; height: 22px; color: #7ddca4; flex: 0 0 auto; margin-top: 0.1rem; }
.lp-herotrust p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: rgba(246, 245, 240, 0.85); }
.lp-herotrust strong { color: #fff; }
.lp-herotrust__stars { display: block; margin-top: 0.3rem; color: #ffb02e; font-size: 0.95rem; letter-spacing: 0.12em; }
.lp-herotrust__stars em { font-style: normal; letter-spacing: 0; color: rgba(246, 245, 240, 0.85); font-size: 0.8rem; }

/* ── Step filler: salesy line anchored in the locked-height gap ── */
.lp-stepfill {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}
.lp-stepfill svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 0.15rem; color: var(--success); }
@media (max-width: 640px) {
  .lp-herotrust { margin-top: 1.2rem; }
}


/* ── Tick chips: credential list with affirmative ticks ────── */
.lp-chips--tick li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-color: rgba(26, 122, 66, 0.28);
  background: rgba(26, 122, 66, 0.06);
}
.lp-chips--tick li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: var(--success);
  -webkit-mask: var(--tick-mask) center / contain no-repeat;
  mask: var(--tick-mask) center / contain no-repeat;
}


/* ── Step-1 reassurance panel (fills the locked card's spare room) ── */
.lp-stepfill--panel {
  display: block;
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  color: var(--ink-soft);
}
.lp-stepfill__head {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
.lp-stepfill--panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.lp-stepfill--panel li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.82rem; line-height: 1.5; }
.lp-stepfill--panel li svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 0.15rem; color: var(--success); }
.lp-stepfill__foot {
  margin: 0.75rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ── Claims examples: illustrative scenarios inside the FAQ ── */
.lp-claims {
  margin-top: 2.25rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--border-soft);
}
.lp-claims h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.lp-claims__lead { margin: 0 0 1.1rem; color: var(--ink-soft); }
.lp-claims ul {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.lp-claims li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.lp-claims li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.lp-claims li strong { color: var(--ink); }
.lp-claims__note {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Guide blurb reads as two beats, not two paragraphs. */

/* ── Typeform-style screens ─────────────────────────────────── */
.lp-q {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.lp-q em { font-style: normal; font-weight: 500; font-size: 0.82rem; color: var(--muted); margin-left: 0.35rem; }
.lp-cardgroup .lp-q { margin-bottom: 0.75rem; }
.lp-field--slider .lp-q { margin-bottom: 0; }

/* No entry animation on screens. The height measurer toggles [hidden] on
   every screen to read its natural height, and display:none restarts CSS
   animations — any animation here re-fires on each measure and reads as the
   card flashing. The locked height already makes the swap feel settled. */


/* Text-only option cards (no icon): tighter, centred label. */
.lp-card-opt--text .lp-card-opt__inner {
  padding: 0.85rem 0.9rem;
  min-height: 0;
  justify-content: center;
}
.lp-card-opt--text .lp-card-opt__inner span { font-size: 0.88rem; }

/* Head row when only the time chip remains. */
.lp-form__progress--right { justify-content: flex-end; }


/* Hint line under a text-only option card. */
.lp-card-opt__hint {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-weight: 400;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted);
}
.lp-card-opt input:checked + .lp-card-opt__inner .lp-card-opt__hint { color: rgba(255,255,255,0.75); }
.lp-card-opt--text .lp-card-opt__inner { text-align: left; align-items: flex-start; }

/* Grouped steps: separate the descriptor questions so they do not read as a wall. */
.lp-step .lp-field--toggle + .lp-field--toggle,
.lp-step .lp-field + .lp-field--toggle { margin-top: 0.15rem; }

/* Itemised subclass dropdown. */
select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: 10px;
}
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Card grids: full-width rows, and a strict two-per-row variant. */
.lp-cards-grid--full { grid-template-columns: 1fr; }
.lp-cards-grid--full .lp-card-opt__inner { flex-direction: row; align-items: center; gap: 0.7rem; justify-content: flex-start; text-align: left; }
.lp-cards-grid--full .lp-card-opt__inner svg { margin: 0; }
.lp-cards-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The step-1 guide link on its own, now the panel is gone. */
.lp-stepfill--link { margin-top: 1rem; }

/* Embedded (services-page) variants: no art column, page-light framing. */
.lp-embed { padding: 3.5rem 0; }
.lp-embed .lp-container { max-width: 1080px; }
.lp-embed--grid .lp-container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 980px) {
  .lp-embed--grid .lp-container { grid-template-columns: 1fr; }
}

/* Embed hardening: styles.css sets a global `input { width: 100% }`, which
   blows the visually-hidden option inputs up to viewport width on pages that
   load both sheets. Pin them tiny and contain them in their label. */
.lp-card-opt { position: relative; }
.lp-card-opt > input,
.lp-pills > input,
.lp-prefer__opts > input,
.lp-toggle > input {
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Embed guard: styles.css paints `main > section:nth-of-type(...)` bands;
   those selectors tie our class specificity, so on pages loading both sheets
   these embedded sections must restate their own backgrounds (this sheet
   loads later, so the tie breaks our way). */
main > section.lp-embed.lp-embed { background: #ffffff; }
main > section.lp-gap.lp-gap { background: var(--canvas); }

/* ── Quick yes/no matrix: one bordered card, a row per question ── */
.gc-yntable {
  border: 1.5px solid var(--border-soft);
  border-radius: 12px;
  margin-bottom: 0.95rem;
}
/* No overflow:hidden — it clipped the dropdown popup. Rows are transparent,
   so rounding the end rows keeps the card reading as one panel. */
.gc-yntable__row:first-child { border-radius: 11px 11px 0 0; }
.gc-yntable__row:last-child { border-radius: 0 0 11px 11px; }
.gc-yntable__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.95rem;
}
.gc-yntable__row[hidden] { display: none; }
.gc-yntable__row + .gc-yntable__row { border-top: 1px solid var(--border-soft); }
.gc-yntable__q {
  /* Basis 0, not auto: with flex-wrap on the row, line-breaking uses the
     hypothetical (content) size, so basis:auto wraps the control below long
     questions before shrinking is even considered. Basis 0 keeps the control
     pinned right and lets the question text wrap internally. */
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}
.gc-yntable .lp-toggle { flex: 0 0 auto; }
.gc-yntable .lp-toggle label {
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
}

@media (max-width: 430px) {
  /* Stacked: question on top, full-width control below with bigger targets. */
  .gc-yntable__row { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .gc-yntable__row .lp-toggle { display: flex; width: 100%; }
  .gc-yntable__row .lp-toggle label { flex: 1; text-align: center; }
}

.gc-yntable__hint {
  display: block;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* Stacked row: a conditional slider or note sitting full-width inside the
   card, immediately under its own Yes/No row. */
.gc-yntable__row--stack { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.gc-yntable__row--stack .lp-toggle { display: flex; width: 100%; }
.gc-yntable__row--stack .lp-toggle label { flex: 1; text-align: center; }

.lp-risklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
/* display:grid would defeat the hidden attribute (the basis toggle relies
   on it), so hide explicitly. */
.lp-risklist[hidden] { display: none; }
.lp-risklist li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.lp-risklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
}

/* An embedded band can be opted out of the canvas default by the host page
   (styles.css `.section-white`); this sheet loads later so it must honour it. */
main > section.lp-gap.section-white { background: #ffffff; }

/* Rows can carry a compact dropdown or an error line below the toggle. */
.gc-yntable__row { flex-wrap: wrap; }
.gc-yntable__row .lp-error { flex-basis: 100%; margin: 0.3rem 0 0; }

/* ── Custom dropdown (wr-select.js) ─────────────────────────
   Safari ignores most <select> styling and keeps its own chevron, so the
   native element is visually hidden and this chrome stands in for it. ── */
.wr-sel { position: relative; flex: 0 0 auto; }
.wr-sel > select {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wr-sel__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
  min-height: 44px;
  /* Symmetric padding keeps the value optically centred while the chevron
     sits at a fixed inset — with a flex gap it hugged short values. */
  padding: 0.5rem 2.4rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.wr-sel__btn:hover { border-color: var(--purple); }
.wr-sel__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wr-sel.is-open .wr-sel__btn { border-color: var(--purple); }
.wr-sel.is-placeholder .wr-sel__btn { color: var(--muted); font-weight: 500; }
.wr-sel > select[aria-invalid="true"] ~ .wr-sel__btn { border-color: var(--accent); }

.wr-sel__value { display: block; }
.wr-sel__chev {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--purple);
  transition: transform 0.16s ease;
}
.wr-sel__chev svg { width: 14px; height: 14px; display: block; }
.wr-sel.is-open .wr-sel__chev { transform: translateY(-50%) rotate(180deg); }

.wr-sel__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(46, 26, 50, 0.16);
}
.wr-sel__list[hidden] { display: none; }
.wr-sel.is-up .wr-sel__list { top: auto; bottom: calc(100% + 6px); }
.wr-sel__list:focus { outline: none; }

.wr-sel__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.wr-sel__opt.is-active { background: var(--canvas); color: var(--ink); }
.wr-sel__opt.is-selected { color: var(--ink); font-weight: 700; }
.wr-sel__tick { display: none; color: var(--success); }
.wr-sel__tick svg { width: 14px; height: 14px; display: block; }
.wr-sel__opt.is-selected .wr-sel__tick { display: block; }

/* Full-width field variant (itemised subclass dropdowns). */
.wr-sel--block { display: block; width: 100%; }
.wr-sel--block .wr-sel__btn {
  width: 100%;
  justify-content: flex-start;
  padding-left: 0.9rem;
  border-radius: 10px;
  border-color: var(--border-soft);
  font-weight: 500;
  font-size: 0.95rem;
}
.wr-sel--block .wr-sel__list { left: 0; right: auto; }
.wr-sel--block .wr-sel__opt { white-space: normal; }

@media (max-width: 430px) {
  .gc-yntable__row .wr-sel { width: 100%; }
  .gc-yntable__row .wr-sel__btn { width: 100%; }
  .gc-yntable__row .wr-sel__list { left: 0; right: 0; }
}

/* Services-page embed: a centred card that tucks into the bottom of the dark
   hero, the same move get-covered makes. The landing pages keep their
   beside-the-hero grid so their form stays above the fold. */
.lp-embed--stack {
  padding: 0 0 3rem;
  background: transparent;
}
.lp-embed--stack .lp-container {
  display: block;
  max-width: 44rem;
  margin-top: -2.5rem;      /* overlap the hero */
  position: relative;
  z-index: 2;
}
.lp-embed--stack .lp-form-slot {
  position: static;
  margin-top: 0;
}
.lp-embed--stack .lp-section__body,
.lp-embed--stack .lp-ticklist { max-width: none; }

/* Embed hardening: below 900px styles.css raises the hero to z-index 1003
   (mobile nav layering), which paints it over the overlapping form card.
   Matching that value wins on DOM order while staying under the nav drawer
   (1004) and the sticky topbar (1200), so both still cover the form. */
@media (max-width: 900px) {
  .lp-embed--stack .lp-container {
    z-index: 1003;
    margin-top: -1.5rem;    /* a lighter overlap reads better on a narrow card */
  }
  /* These selectors only bite on the services pages (the landing heroes use
     .lp-hero__mobile-cta), where the hero CTA now sits directly above an
     overlapping card: it was touching the card and looked stranded. */
  .hero-cta { margin-bottom: 2.25rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ── Contact preference ─────────────────────────────────────────────
   Two pills on one row, multi-select. It sits under the applicant details
   and gates which contact field appears below it, so the visitor never
   hands over a channel they did not ask us to use. Deliberately plain —
   this is a switch, not a pitch. */
.lp-prefer { margin: 1.1rem 0 0.9rem; }

.lp-prefer__q {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.lp-prefer__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.lp-prefer__opts input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lp-prefer__opts label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  margin: 0;
}

.lp-prefer__opts label svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.lp-prefer__opts input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.lp-prefer__opts input:focus-visible + label {
  outline: 3px solid rgba(238, 55, 27, 0.4);
  outline-offset: 2px;
}

.lp-prefer__foot {
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Channel fields only exist once their pill is on. */
.lp-channel[hidden] { display: none; }

.lp-success__pref { font-weight: 600; }
.lp-success__pref[hidden] { display: none; }


/* ============================================================
   HERO — "site slab" restyle (replaces the purple gradient)
   ------------------------------------------------------------
   Deliberately flat and heavy: the brand dark plum as one solid
   field (no gradient, no vignette), with an even hairline blueprint
   grid, a solid accent rule across the top edge, and solid accent
   tick discs. Reads like a site office / drawing set rather than a
   SaaS gradient. It also lands the hero on the same plum as the
   page footer, so the two dark blocks bookend the page cleanly.

   Written as a self-contained override so it can be pulled back
   out in one move: the original `.lp-hero` gradient rule (~line
   196) is untouched above — delete this whole block and the page
   returns to the purple hero exactly as it was.

   NOTE: no `overflow: hidden` on .lp-hero — it would turn the hero
   into a scroll container and kill `position: sticky` on the form
   slot. The layers are inset:0 so nothing overflows anyway.
   ============================================================ */
:root {
  /* The whole hero is this one colour. Swap this single value to
     retheme it: #34373d = dark neutral grey, #2e1a32 = brand plum. */
  --hero-slab: #2e1a32;        /* brand dark plum (--ink), used flat */
  --hero-grid: rgba(255, 255, 255, 0.055);
}

.lp-hero {
  position: relative;
  isolation: isolate;
  background: var(--hero-slab);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 4rem 0 4.5rem;
}

/* Blueprint grid, fading on the diagonal: full strength at the
   top-right, gone by the bottom-left, so the copy sits on clean
   plum and the texture lives behind the form card.

   The fade is a mask on this layer only — the lines keep their 1px
   weight and 56px pitch the whole way across, they just lose
   opacity. The slab colour is on .lp-hero itself so it stays flat. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom left, #000 5%, rgba(0, 0, 0, 0.4) 75%, transparent 100%);
  mask-image: linear-gradient(to bottom left, #000 5%, rgba(0, 0, 0, 0.4) 75%, transparent 100%);
}

/* Eyebrow becomes a solid status pill rather than caps-and-dash. */
.lp-hero .lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(246, 245, 240, 0.9);
}

.lp-hero .lp-eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(238, 55, 27, 0.18);
}

.lp-hero__copy h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 1.15rem;
  max-width: 15ch;
}

.lp-hero__sub {
  color: rgba(246, 245, 240, 0.82);
  max-width: 33rem;
}

/* Solid accent discs instead of the washed-out tint. */
.lp-hero .lp-proofs li::before {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.4l2.9 2.9 5.9-6.6'/></svg>");
  background-size: 0.72rem;
}

.lp-hero .lp-proofs li { color: rgba(246, 245, 240, 0.94); }

/* Trust strip: an evenly rounded panel, no accent edge — the red
   already has enough jobs in this hero (top rule, dot, ticks). */
.lp-hero .lp-herotrust {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
}

.lp-hero .lp-herotrust svg { color: #86d9a5; }

/* Lift the white form card off the darker slab. */
.lp-hero .lp-form {
  box-shadow:
    0 30px 68px -26px rgba(0, 0, 0, 0.62),
    0 8px 20px -10px rgba(0, 0, 0, 0.4);
}

/* Re-assert the responsive padding: this block sits after the
   media queries above, so it has to restate them. */
@media (max-width: 980px) {
  .lp-hero { padding: 2.75rem 0 3rem; }
  .lp-hero__copy h1 { max-width: 20ch; }
}

@media (max-width: 640px) {
  .lp-hero { padding: 2.25rem 0 2.5rem; }
  .lp-hero::before { background-size: 44px 44px, 44px 44px; }

  /* The pill wraps to two lines at phone widths and reads as a broken
     button, so below 640px it drops back to a flat dot-and-text label. */
  .lp-hero .lp-eyebrow {
    display: flex;
    align-items: flex-start;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 1rem;
  }
  .lp-hero .lp-eyebrow::before { margin-top: 0.42em; }
}