/* ============================================================
   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('../assets/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('../assets/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 {
  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 { min-height: 0; resize: vertical; }

.lp-field input:focus,
.lp-field select:focus,
.lp-field 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"] {
  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;
}

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-items: center;
  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 Formspree 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;
}

/* 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); }

/* ── Lead magnet: the 2026 guide ───────────────────────────── */
.lp-guide {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 3rem;
  align-items: center;
  background: #fdf3ef;
  border: 1.5px solid rgba(238, 55, 27, 0.22);
  border-radius: var(--radius);
  padding: 2.75rem;
}
.lp-guide__art svg { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; }
.lp-guide__body h2 { margin-bottom: 0.7rem; }
.lp-guide__list { margin: 0 0 1.6rem; }
.lp-guideform { max-width: 34rem; }
.lp-guideform .lp-field-row { margin-bottom: 0.15rem; }
.lp-guideform .lp-help { margin-top: 0.6rem; }

@media (max-width: 980px) {
  .lp-guide { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.9rem 1.4rem; }
  .lp-guide__art { display: none; }
}
@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;
}

/* ── Guide overlay: small, dismissible, deliberately low-key ─ */
.lp-guidepop {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;                     /* under the sticky CTA (50) */
  width: min(19rem, calc(100vw - 2.5rem));
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(46, 26, 50, 0.16);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.lp-guidepop[hidden] { display: none; }
.lp-guidepop.is-in { opacity: 1; transform: translateY(0); }

.lp-guidepop__link {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 1.9rem 0.7rem 0.8rem;
  text-decoration: none;
  color: var(--ink-soft);
  border-radius: inherit;
}
.lp-guidepop__link:hover { background: var(--canvas); }
.lp-guidepop__icon svg { width: 19px; height: 19px; color: var(--purple); display: block; margin-top: 0.1rem; }
.lp-guidepop__body { display: block; font-size: 0.74rem; line-height: 1.4; }
.lp-guidepop__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.81rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.1rem;
}

.lp-guidepop__close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.lp-guidepop__close:hover { background: var(--canvas); color: var(--ink); }
.lp-guidepop__close svg { width: 13px; height: 13px; }

@media (max-width: 980px) {
  /* Share the bottom edge with the sticky CTA: full width, and the script
     hides this whenever that bar is showing. */
  .lp-guidepop { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-guidepop { transition: none; }
}

/* ── 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 overlay: desktop glow ────────────────────────────
   Layered box-shadow rather than a blurred pseudo-element: the card is its
   own stacking context, so a negative-z-index child would paint OVER its
   white background instead of behind it. ── */
@media (min-width: 981px) {
  .lp-guidepop {
    box-shadow:
      0 12px 34px rgba(46, 26, 50, 0.18),
      0 0 0 1px rgba(238, 55, 27, 0.12),
      0 0 32px -4px rgba(238, 55, 27, 0.42),
      0 0 68px -10px rgba(96, 53, 143, 0.38);
  }
  .lp-guidepop:hover {
    box-shadow:
      0 14px 38px rgba(46, 26, 50, 0.2),
      0 0 0 1px rgba(238, 55, 27, 0.18),
      0 0 38px -3px rgba(238, 55, 27, 0.52),
      0 0 78px -8px rgba(96, 53, 143, 0.44);
  }
}

/* A "read more" affordance so the card reads as clickable, not decorative. */
/* Description on its own line so the cue reads as a CTA, not sentence tail. */
.lp-guidepop__body > span:not(.lp-guidepop__cue) { display: block; }

.lp-guidepop__cue {
  display: inline-block;
  margin-top: 0.3rem;
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--accent-dark);
  border-bottom: 1.5px solid rgba(238, 55, 27, 0.35);
  padding-bottom: 1px;
}

/* Guide blurb reads as two beats, not two paragraphs. */
.lp-guide__lead { margin-bottom: 0.75rem; }

/* ── 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-guide--compact { grid-template-columns: 1fr; }
.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-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;
}

/* 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; }
}