/* ============================================================
   Builders landing page — standalone stylesheet.
   Shares the owner-builder page's design system; kept as its own
   file so the two ad pages can be styled/tested independently.
   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; }

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

/* Pricing: let the modifiers list breathe before the CTA (both are margin:0). */
#pricing .lp-inline-cta { margin-top: 1.9rem; }

/* ── Rich callout: headline + supporting points ────────────── */
.lp-callout--rich { padding: 1.4rem 1.5rem; align-items: flex-start; }
.lp-callout__body { min-width: 0; }
.lp-callout__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.lp-callout--rich .lp-callout__body > p + p { margin-top: 0; }
.lp-callout--rich p:not(.lp-callout__head) {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.99rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.lp-callout__points {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.95rem 0 0;
  border-top: 1px solid rgba(238, 55, 27, 0.22);
  display: grid;
  gap: 0.45rem;
}
.lp-callout__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lp-callout__points li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 0.16rem;
  background-color: var(--success);
  -webkit-mask: var(--tick-mask) center / contain no-repeat;
  mask: var(--tick-mask) center / contain no-repeat;
}

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


/* Pills that carry many options (states, cover interests). */
.lp-pills--wrap { flex-wrap: wrap; }
.lp-pills--wrap label { flex: 0 0 auto; }

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

/* Category cards: icon left, title and hint stacked beside it.
   The base card centres its content; without pinning justify-content the
   left edge wanders between short and long cards and the grid looks
   jumbled — every rule here exists to keep all ten cards identical. */
.lp-card-opt--cat .lp-card-opt__inner {
  flex-direction: row;
  align-items: center;          /* icon vertically centred on the text block */
  justify-content: flex-start;  /* one consistent left edge on every card */
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
}
.lp-card-opt--cat .lp-card-opt__inner > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--purple);
}
.lp-card-opt--cat input:checked + .lp-card-opt__inner > svg { color: #fff; }
.lp-card-opt__txt { display: block; flex: 1; min-width: 0; }
.lp-card-opt__txt > span {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.3;
}
.lp-card-opt--cat .lp-card-opt__hint {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  line-height: 1.4;
}

@media (max-width: 460px) {
  .lp-cards-grid--two { grid-template-columns: 1fr; }
}

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

/* ── Get covered: page chrome ──────────────────────────────── */
.gc-hero {
  background: linear-gradient(135deg, #2e1a32, #4a2a63 60%, #60358f);
  color: #f6f5f0;
  padding: 3.25rem 0 4.5rem;
}
.gc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0.4rem 0 0.8rem;
  color: #fff;
}
.gc-hero__sub { margin: 0; max-width: 38rem; font-size: 1.04rem; line-height: 1.65; color: rgba(246,245,240,0.85); }

.gc-main { padding: 0 0 4rem; }
.gc-wrap {
  max-width: 44rem;
  margin: -2.25rem auto 0;
  padding: 0 1rem;
}
.gc-alt {
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--muted);
}
.gc-alt a { color: var(--purple); }

/* Skip sits beside Next, quieter. */
.gc-nav-right { display: flex; gap: 0.6rem; align-items: center; }
.gc-skip { color: var(--muted); border-color: transparent; }
.gc-skip:hover { color: var(--ink); }

@media (max-width: 640px) {
  .gc-hero { padding: 2.5rem 0 3.75rem; }
}

/* ── 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.4rem;
}
/* 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; }
}

/* ── "Not sure yet" escape: its own beat below the cover pills ── */
.gc-unsure {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
}
.gc-unsure__or {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.gc-unsure .lp-pills { flex: 1; }
.gc-unsure__pill {
  width: 100%;
  text-align: center;
  border-style: dashed !important;
}
/* Once chosen it is a commitment like any other — solid, not dashed. */
.gc-unsure input:checked + .gc-unsure__pill,
input:checked + .gc-unsure__pill { border-style: solid !important; }

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

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