/* ==========================================================================
   LifePolicies-Help — Landing Page
   Implementation of "Landing Page.dc.html" from the Claude Design project
   8af5efcf-0389-4d15-8b74-fa0f070912a7.

   The design component computes every responsive value in JS from
   window.innerWidth:

       m    = props.forceMobile === true || w < 900     (mobile)
       wide = w >= 1150                                 (wide-only chrome)
       h1   = m ? 33px : (w < 1150 ? 54px : 64px)

   Those three tiers are transcribed below as custom properties on :root and
   two media queries, so the rendered values match the component exactly at
   every width without a resize listener. `html.dc-force-mobile` reproduces
   the forceMobile prop; `html.dc-no-sticky` reproduces showStickyCall=false.
   Note that `--wide-only` is deliberately NOT reset by force-mobile — in the
   component `wide` is independent of `m`.

   ONE DELIBERATE DEVIATION — the hero card.

   The component floats the card on the film above 900px: absolute, 392px wide,
   inset 32px from the film's bottom-left, on a 560px band. Below 900 it drops
   into the flow at full width and climbs 40px back over the film.

   That switch changes the SHAPE of the fold, not just its size, and the
   desktop half is the weaker of the two: the estimator is the only thing on
   this page a visitor can act on, and 392px of a 1280px band spends most of
   the fold on the photograph instead. Operator's call, 2026-07-28 — the
   stacked treatment now runs at every width: the card takes the full measure,
   and the film is trimmed from 560px to 360px so the question clears the fold
   on a 900px-tall screen. What the card does with that width is section 19b —
   the answers go side by side rather than stacking down a 1280px column.
   Everything else in the two tiers is the component's own.

   This stylesheet is self-contained and shares nothing with site.css.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/literata-var-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1. Tokens — mobile tier (w < 900)
   -------------------------------------------------------------------------- */

:root {
  --padX: 20px;
  --ticker-size: 9.5px;
  --header-h: 58px;
  --head-gap: 12px;
  --wide-only: none;
  --phone-pad: 9px 14px;
  --phone-size: 14px;
  --phone-label-m: inline;
  --phone-label-d: none;

  --hero-pad-y: 26px;
  --hero-pad-b: 40px;
  --hero-media-h: 300px;
  --card-pos: relative;
  --card-inset: auto;
  --card-w: 100%;
  --card-mt: -40px;
  --card-pad: 20px 18px;
  --lede-cols: 1fr;
  --lede-gap: 16px;
  --lede-margin: 18px 0 22px;

  --hero-gap: 28px;
  --hero-img-h: 220px;
  --h1-size: 33px;
  --h2-size: 28px;
  --lede-size: 17px;
  --chip-size: 15px;
  --q-size: 22px;
  --price-size: 42px;
  --stat-size: 38px;
  --sec-pad-y: 48px;
  --cta-pad-y: 40px;
  --cols3: 1fr;
  --cols2: 1fr;
  --review-head-cols: 1fr;
  --logo-cols: repeat(2, 1fr);
  --card-gap: 14px;
  --cols4: 1fr;
  --tile-cols: 1fr;
  --benefit-pad-y: 48px;
  --benefit-head-cols: 1fr;
  --benefit-cta-justify: start;
  --benefit-size: 22px;
  --spot-cols: 1fr;
  --spot-img-h: 280px;
  --spot-quote-size: 28px;
  --faq-size: 17px;
  --sticky-display: flex;
  --bottom-pad: 78px;
  --scroll-offset: 70px;
}

/* Desktop tier (w >= 900) */
@media (min-width: 900px) {
  :root {
    --padX: 48px;
    --ticker-size: 11px;
    --header-h: 72px;
    --head-gap: 24px;
    --phone-pad: 11px 18px;
    --phone-size: 15px;
    --phone-label-m: none;
    --phone-label-d: inline;

    --hero-pad-y: 48px;
    --hero-pad-b: 64px;
    /* See the header note: the design floats a 392px card on a 560px film
       here. This keeps the film full-bleed and puts the card under it, so the
       shape does not change at 900px — only its size.

       360 rather than the design's 560 is set by the fold, not by taste. The
       h1 and lede spend the first 400px, so at 560 the card began at 830 and a
       900px-tall laptop saw its top border and nothing to act on. At 360 the
       question and its hint clear the fold, the first answer appears on
       anything 950 or taller, and the film still reads at 3.5:1 across the
       1280px measure. */
    --hero-media-h: 360px;
    --card-pos: relative;
    --card-inset: auto;
    --card-w: 100%;
    --card-mt: -40px;
    --card-pad: 32px 34px;
    --lede-cols: 1.6fr auto;
    --lede-gap: 48px;
    --lede-margin: 26px 0 30px;

    --hero-gap: 56px;
    --hero-img-h: 300px;
    --h1-size: 54px;
    --h2-size: 44px;
    --lede-size: 19px;
    --chip-size: 15.5px;
    --q-size: 24px;
    --price-size: 50px;
    --stat-size: 48px;
    --sec-pad-y: 84px;
    --cta-pad-y: 64px;
    --cols3: repeat(3, 1fr);
    --cols2: 1fr 1fr;
    --review-head-cols: 1.2fr 0.8fr;
    --logo-cols: repeat(6, 1fr);
    --card-gap: 20px;
    --cols4: repeat(4, 1fr);
    --tile-cols: repeat(2, 1fr);
    --benefit-pad-y: 76px;
    --benefit-head-cols: 1.4fr auto;
    --benefit-cta-justify: end;
    --benefit-size: 24px;
    --spot-cols: 0.85fr 1.15fr;
    --spot-img-h: 420px;
    --spot-quote-size: 40px;
    --faq-size: 20px;
    --sticky-display: none;
    --bottom-pad: 0px;
    --scroll-offset: 84px;
  }
}

/* Wide tier (w >= 1150) */
@media (min-width: 1150px) {
  :root {
    --h1-size: 64px;
    --wide-only: flex;
  }
}

/* props.forceMobile === true. Class selectors outrank :root at every width. */
html.dc-force-mobile {
  --padX: 20px;
  --ticker-size: 9.5px;
  --header-h: 58px;
  --head-gap: 12px;
  --phone-pad: 9px 14px;
  --phone-size: 14px;
  --phone-label-m: inline;
  --phone-label-d: none;

  --hero-pad-y: 26px;
  --hero-pad-b: 40px;
  --hero-media-h: 300px;
  --card-pos: relative;
  --card-inset: auto;
  --card-w: 100%;
  --card-mt: -40px;
  --card-pad: 20px 18px;
  --lede-cols: 1fr;
  --lede-gap: 16px;
  --lede-margin: 18px 0 22px;

  --hero-gap: 28px;
  --hero-img-h: 220px;
  --h1-size: 33px;
  --h2-size: 28px;
  --lede-size: 17px;
  --chip-size: 15px;
  --q-size: 22px;
  --price-size: 42px;
  --stat-size: 38px;
  --sec-pad-y: 48px;
  --cta-pad-y: 40px;
  --cols3: 1fr;
  --cols2: 1fr;
  --review-head-cols: 1fr;
  --logo-cols: repeat(2, 1fr);
  --card-gap: 14px;
  --cols4: 1fr;
  --tile-cols: 1fr;
  --benefit-pad-y: 48px;
  --benefit-head-cols: 1fr;
  --benefit-cta-justify: start;
  --benefit-size: 22px;
  --spot-cols: 1fr;
  --spot-img-h: 280px;
  --spot-quote-size: 28px;
  --faq-size: 17px;
  --sticky-display: flex;
  --bottom-pad: 78px;
  --scroll-offset: 70px;
}

/* props.showStickyCall === false. Declared after .dc-force-mobile so it wins
   the specificity tie when both classes are present. */
html.dc-no-sticky {
  --sticky-display: none;
  --bottom-pad: 0px;
}

/* --------------------------------------------------------------------------
   2. Document — from the component's <helmet> block
   -------------------------------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  background: #e9eae2;
}

html {
  scroll-padding-top: var(--scroll-offset);
}

* {
  box-sizing: border-box;
}

a {
  color: #a6432b;
  text-decoration: none;
}

a:hover {
  color: #14140f;
}

::selection {
  background: #a6432b;
  color: #fcfcf9;
}

/* Both keyframes are identical by design. The component alternates the
   animation-name on every tick so the entrance re-triggers on a word that
   would otherwise be the same animation restarting mid-flight. */
@keyframes wIn1 {
  from { opacity: 0; transform: translateY(0.28em); }
  to   { opacity: 1; transform: none; }
}

@keyframes wIn2 {
  from { opacity: 0; transform: translateY(0.28em); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */

.dc-page {
  background: #e9eae2;
  color: #14140f;
  font-family: Archivo, Helvetica, sans-serif;
  min-height: 100vh;
  padding-bottom: var(--bottom-pad);
}

.dc-wrap {
  max-width: 1280px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. Ticker
   -------------------------------------------------------------------------- */

.dc-ticker {
  background: #14140f;
  color: #e9eae2;
}

.dc-ticker__inner {
  padding: 8px var(--padX);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--ticker-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.dc-ticker__dot {
  width: 6px;
  height: 6px;
  background: #a6432b;
  display: inline-block;
  flex: none;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.dc-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(233, 234, 226, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(20, 20, 15, 0.14);
}

.dc-header__inner {
  padding: 0 var(--padX);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dc-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

/* The lockup. The mark is set from the wordmark's cap height rather than its
   font-size — 19px Archivo at 700 caps at about 13.6px, and a mark matched to
   the full em box reads as undersized beside it. 22px is ~1.6 cap heights,
   which is where a monogram stops looking like a bullet and starts looking
   like a logo. The optical gap is 9px: the mark's right edge is the rust
   square, which sits higher than the baseline, so a 12px gap opened a hole. */
.dc-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.dc-brand__mark {
  display: block;
  width: auto;
  height: 22px;
  flex: none;
}

/* The header loses 14px of height below 900, and the wordmark is the thing
   that has to stay legible — so the mark gives up the difference. */
@media (max-width: 899px) {
  .dc-brand {
    gap: 8px;
  }

  .dc-brand__mark {
    height: 19px;
  }
}

.dc-header__right {
  display: flex;
  align-items: center;
  gap: var(--head-gap);
}

.dc-header__rating {
  display: var(--wide-only);
  align-items: center;
  gap: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6e6e62;
}

.dc-header__rating .dc-stars {
  color: #a6432b;
  letter-spacing: 0.05em;
}

.dc-header__lang {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #6e6e62;
  display: var(--wide-only);
}

.dc-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #a6432b;
  color: #fcfcf9;
  padding: var(--phone-pad);
  font-size: var(--phone-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
  white-space: nowrap;
}

.dc-phone:hover {
  background: #8c3521;
  color: #fcfcf9;
}

.dc-phone__dot {
  width: 6px;
  height: 6px;
  background: #fcfcf9;
  display: inline-block;
  border-radius: 50%;
}

.dc-phone__label--m { display: var(--phone-label-m); }
.dc-phone__label--d { display: var(--phone-label-d); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.dc-hero {
  padding: var(--hero-pad-y) var(--padX) var(--hero-pad-b);
}

.dc-h1 {
  margin: 0;
  font-size: var(--h1-size);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 700;
  max-width: 22ch;
}

.dc-h1__line {
  display: block;
  min-height: 2.08em;
}

.dc-rot {
  display: inline-block;
  color: #14140f;
  white-space: normal;
  border-bottom: 5px solid #a6432b;
  padding-bottom: 2px;
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

.dc-rot--a { animation-name: wIn1; }
.dc-rot--b { animation-name: wIn2; }

@media (min-width: 900px) {
  .dc-h1__line {
    min-height: 1.08em;
  }
}

.dc-lede {
  display: grid;
  grid-template-columns: var(--lede-cols);
  gap: var(--lede-gap);
  align-items: end;
  margin: var(--lede-margin);
}

.dc-lede__text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--lede-size);
  line-height: 1.5;
  color: #33332c;
  margin: 0;
  max-width: 52ch;
}

/* Pasted run inside the lede, reproduced verbatim from the design source. */
.dc-lede__pasted {
  color: rgb(19, 18, 18);
  font-family: 'Suisse Intl', system-ui, -apple-system, 'Segoe UI', roboto, 'helvetica neue', arial, sans-serif;
  font-size: 16px;
  text-align: center;
  background-color: rgb(255, 255, 255);
}

.dc-lede__cta {
  justify-self: var(--benefit-cta-justify);
  align-self: end;
  background: #a6432b;
  color: #fcfcf9;
  padding: 16px 30px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
  white-space: nowrap;
}

.dc-lede__cta:hover {
  background: #14140f;
  color: #fcfcf9;
}

.dc-hero__stage {
  position: relative;
  width: 100%;
}

.dc-hero__media {
  position: relative;
  width: 100%;
  height: var(--hero-media-h);
  background: #14140f;
  overflow: hidden;
}

/* The poster and the film occupy the same box; the film is layered over the
   poster once it can play, so there is no gap and no reflow when it arrives. */
.dc-hero__poster,
.dc-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Deliberately no z-index on the film. It is appended after the <picture>
   inside .dc-fill, so painting order alone puts it over the poster — while the
   rating badge, a later sibling of .dc-fill with an auto z-index, stays above
   the film. Giving the video a positive z-index lifts it over that badge. */

/* The absolutely-positioned wrapper each <image-slot> sat inside. */
.dc-fill {
  position: absolute;
  inset: 0;
}

.dc-hero__badge {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(252, 252, 249, 0.94);
  padding: 9px 14px;
  border-radius: 999px;
  pointer-events: none;
}

.dc-hero__badge-score {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dc-hero__badge-stars {
  font-size: 13px;
  color: #a6432b;
  letter-spacing: 0.06em;
}

.dc-hero__badge-count {
  font-size: 11.5px;
  color: #52524a;
  font-weight: 500;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Quote card
   -------------------------------------------------------------------------- */

.dc-card {
  position: var(--card-pos);
  left: var(--card-inset);
  bottom: var(--card-inset);
  width: var(--card-w);
  margin-top: var(--card-mt);
  z-index: 3;
  background: #fcfcf9;
  border: 1px solid rgba(20, 20, 15, 0.12);
  box-shadow: 0 26px 50px -28px rgba(20, 20, 15, 0.7);
  padding: var(--card-pad);
}

.dc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dc-card__step {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e6e62;
  white-space: nowrap;
}

.dc-card__back {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a6432b;
}

.dc-card__back:hover {
  color: #14140f;
}

.dc-progress {
  height: 3px;
  background: rgba(20, 20, 15, 0.12);
  margin-bottom: 18px;
}

.dc-progress__bar {
  height: 3px;
  background: #a6432b;
  transition: width 260ms ease;
}

.dc-q {
  font-size: var(--q-size);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin-bottom: 4px;
}

.dc-q__hint {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  color: #6e6e62;
  margin-bottom: 16px;
}

.dc-opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dc-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: Archivo, sans-serif;
  font-size: var(--chip-size);
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 14px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 2px;
  border: 1px solid rgba(20, 20, 15, 0.28);
  background: #fcfcf9;
  color: #14140f;
  transition: border-color 140ms ease;
}

.dc-opt__mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #a6432b;
}

.dc-opt--sel {
  background: #14140f;
  color: #fcfcf9;
  border-color: #14140f;
}

.dc-opt--sel .dc-opt__mark {
  color: #fcfcf9;
}

.dc-opt:hover {
  border-color: #a6432b;
}

.dc-card__foot {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a7c;
  margin-top: 16px;
  line-height: 1.6;
}

.dc-est__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6e6e62;
  margin-bottom: 8px;
}

.dc-est__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dc-est__price {
  font-size: var(--price-size);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.dc-est__per {
  font-size: 15px;
  font-weight: 600;
  color: #6e6e62;
}

.dc-est__note {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: #43433b;
  margin: 10px 0 14px;
}

.dc-est__rows {
  border-top: 1px solid rgba(20, 20, 15, 0.12);
  margin-bottom: 16px;
}

.dc-est__item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(20, 20, 15, 0.08);
}

.dc-est__k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a7c;
}

.dc-est__v {
  font-size: 13px;
  font-weight: 600;
}

.dc-est__cta {
  display: block;
  text-align: center;
  background: #14140f;
  color: #fcfcf9;
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
  margin-bottom: 8px;
}

.dc-est__cta:hover {
  background: #a6432b;
  color: #fcfcf9;
}

.dc-est__restart {
  width: 100%;
  background: none;
  border: 1px solid rgba(20, 20, 15, 0.24);
  padding: 12px;
  cursor: pointer;
  font-family: Archivo, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #4a4a42;
  border-radius: 2px;
}

.dc-est__restart:hover {
  border-color: #14140f;
  color: #14140f;
  background: #e9eae2;
}

/* --------------------------------------------------------------------------
   8. Trust row
   -------------------------------------------------------------------------- */

.dc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 24px;
}

.dc-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 32ch;
}

.dc-trust__dot {
  width: 7px;
  height: 7px;
  background: #a6432b;
  display: inline-block;
  margin-top: 6px;
  flex: none;
}

.dc-trust__text {
  font-size: 13.5px;
  line-height: 1.4;
  color: #52524a;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   9. Carriers
   -------------------------------------------------------------------------- */

.dc-carriers {
  border-top: 1px solid rgba(20, 20, 15, 0.14);
  border-bottom: 1px solid rgba(20, 20, 15, 0.14);
}

.dc-carriers__inner {
  padding: 26px var(--padX);
}

.dc-carriers__grid {
  display: grid;
  grid-template-columns: var(--logo-cols);
  gap: 10px;
}

/* The design shipped these six cells as dashed, hatched "Carrier logo"
   placeholders. With the real marks in, the placeholder chrome comes off and
   the cell becomes the same light plate the rest of the page uses for cards
   (#FCFCF9 on a 1px rule) — which is also what these marks need: every file is
   dark-on-transparent, so it wants a lit plate rather than a filtered mark.
   The design's 62px cell height, 10px gap and 6-up / 2-up grid are unchanged. */
.dc-carriers__cell {
  height: 62px;
  border: 1px solid rgba(20, 20, 15, 0.14);
  background: #fcfcf9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
}

/* Height-normalised, not width-normalised: these are marks of wildly different
   proportion — wordmarks up to 5.8:1 beside a square emblem — and fitting them
   to a common width prints the emblem at a fifth of the wordmarks' size.
   --mark-h lets the square mark take more height for the same optical weight;
   the five wordmarks sit at the 26px default.

   Greyed out per request: grayscale(1) drops each mark to its luminance and the
   opacity sits it back off the plate, so the row reads as a quiet proof band
   rather than six competing brand colours. Note this alters the marks as
   supplied — see the trademark note in the handover. */
.dc-carriers__cell img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--mark-h, 26px);
  filter: grayscale(1);
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   10. Benefits
   -------------------------------------------------------------------------- */

.dc-benefits {
  background: #14140f;
  color: #f2f2ea;
}

.dc-benefits__inner {
  padding: var(--benefit-pad-y) var(--padX);
}

.dc-benefits__head {
  display: grid;
  grid-template-columns: var(--benefit-head-cols);
  gap: var(--hero-gap);
  align-items: end;
  margin-bottom: 36px;
}

.dc-h2 {
  margin: 0;
  font-size: var(--h2-size);
  line-height: 1.05;
  letter-spacing: -0.033em;
  font-weight: 700;
  max-width: 20ch;
}

.dc-benefits__cta {
  justify-self: var(--benefit-cta-justify);
  background: #a6432b;
  color: #fcfcf9;
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
  white-space: nowrap;
}

.dc-benefits__cta:hover {
  background: #fcfcf9;
  color: #14140f;
}

.dc-benefits__grid {
  display: grid;
  grid-template-columns: var(--cols4);
  gap: var(--card-gap);
}

.dc-benefit {
  border-top: 1px solid rgba(242, 242, 234, 0.2);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-benefit__n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #c07a62;
}

.dc-benefit__t {
  font-size: var(--benefit-size);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.dc-benefit__d {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: #a8a89b;
}

/* --------------------------------------------------------------------------
   11. Spotlight
   -------------------------------------------------------------------------- */

.dc-spot {
  padding: var(--sec-pad-y) var(--padX);
}

.dc-spot__grid {
  display: grid;
  grid-template-columns: var(--spot-cols);
  gap: var(--hero-gap);
  align-items: center;
}

.dc-spot__media {
  position: relative;
  height: var(--spot-img-h);
  background: #14140f;
  overflow: hidden;
}

/* A portrait source in a landscape frame: `cover` has about 190px of vertical
   slack at the desktop size. Centred it sits her face low and keeps the empty
   patio; at 25% the crop lands her eyeline near the middle of the frame and
   spends the rest on the foliage above. */
#spotlight-portrait .dc-slot__img {
  object-position: 50% 25%;
}

/* Below 900 the design gives this frame the full measure at 280px tall. That is
   a band for a landscape photograph, and the one in it is a 448x501 portrait —
   `cover` had 265px of slack to throw away, so it cut the shoulders off and
   left her chin 14px from the bottom edge. It read as a mis-crop, because it
   was one.

   The fix is the frame, not the position: no object-position keeps a portrait
   inside a band that short. Holding the frame to 420px wide at 4:5 gives it
   almost exactly the source's own proportion, so there is no vertical slack
   left to crop with and the whole head-and-shoulders survives at every phone
   width. It aligns left with the kicker and the quote beneath it. */
@media (max-width: 899px) {
  .dc-spot__media {
    height: auto;
    max-width: 300px;
    aspect-ratio: 4 / 5;
  }

  /* The caption is a fixed size, so shrinking the frame under it turned a
     footnote into a banner — at 300px it was crossing 45% of the width. It has
     to stay legible, but it is a disclosure, not a label. */
  .dc-spot__credit {
    right: 8px;
    bottom: 8px;
    padding: 4px 7px;
    font-size: 8.5px;
    letter-spacing: 0.06em;
  }
}

/* The frame is a stock photograph and is labelled as one. The page never puts a
   name or a licence number under a stock face — see README → Imagery. */
.dc-spot__credit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  background: rgba(252, 252, 249, 0.92);
  color: #52524a;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.dc-spot__kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a6432b;
}

.dc-spot__quote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--spot-quote-size);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #14140f;
  margin: 18px 0 22px;
  max-width: 22ch;
}

.dc-spot__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.dc-spot__rule {
  width: 34px;
  height: 1px;
  background: rgba(20, 20, 15, 0.3);
  display: inline-block;
}

.dc-spot__name {
  font-size: 14px;
  font-weight: 600;
}

.dc-spot__meta {
  font-size: 13px;
  color: #6e6e62;
}

/* --------------------------------------------------------------------------
   12. Reviews
   -------------------------------------------------------------------------- */

.dc-reviews__inner {
  padding: var(--sec-pad-y) var(--padX);
}

.dc-reviews__head {
  display: grid;
  grid-template-columns: var(--review-head-cols);
  gap: var(--hero-gap);
  align-items: end;
  margin-bottom: 34px;
}

.dc-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6e6e62;
}

.dc-reviews__h2 {
  margin: 16px 0 0;
  font-size: var(--h2-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 20ch;
}

.dc-reviews__intro {
  margin: 0;
  max-width: 36ch;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  color: #52524a;
}

.dc-reviews__stats {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.dc-stat__n {
  font-size: var(--stat-size);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.dc-stat__stars {
  font-size: 17px;
  color: #a6432b;
  letter-spacing: 0.06em;
  margin-top: 6px;
}

.dc-stat__cap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a7c;
  margin-top: 6px;
}

.dc-stat__cap--wide {
  margin-top: 12px;
  max-width: 18ch;
  line-height: 1.6;
}

.dc-reviews__grid {
  display: grid;
  grid-template-columns: var(--cols3);
  gap: var(--card-gap);
}

.dc-review {
  background: #fcfcf9;
  border: 1px solid rgba(20, 20, 15, 0.14);
  margin: 0;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dc-review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dc-review__stars {
  font-size: 15px;
  color: #a6432b;
  letter-spacing: 0.06em;
}

.dc-review__date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a0a093;
}

.dc-review__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.dc-review__body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: #43433b;
  margin: 0;
  flex: 1;
}

blockquote.dc-review__body {
  quotes: none;
}

.dc-review__by {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(20, 20, 15, 0.1);
  padding-top: 14px;
}

.dc-review__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e9eae2;
  border: 1px solid rgba(20, 20, 15, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #52524a;
  flex: none;
}

.dc-review__name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #52524a;
}

.dc-review__meta {
  display: block;
  margin-top: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a0a093;
}

/* Retained while the note itself is commented out of the markup, so restoring
   it is a one-line change in landing.html. */
.dc-reviews__note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a0a093;
  margin-top: 16px;
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   13. Products
   -------------------------------------------------------------------------- */

.dc-products {
  border-top: 1px solid rgba(20, 20, 15, 0.14);
}

.dc-products__inner {
  padding: var(--sec-pad-y) var(--padX);
}

.dc-products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

.dc-products__h2 {
  margin: 0;
  font-size: var(--h2-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 18ch;
}

.dc-products__grid {
  display: grid;
  grid-template-columns: var(--cols3);
  gap: var(--card-gap);
}

.dc-product {
  background: #fcfcf9;
  border: 1px solid rgba(20, 20, 15, 0.14);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dc-product:hover {
  border-color: #a6432b;
}

.dc-product__kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a6432b;
}

.dc-product__name {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.1;
}

.dc-product__body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: #43433b;
  margin: 0;
}

/* `auto`, not a fixed margin. The three cards are grid items and so already
   share a height, but their prose does not: "Indexed universal life" is the one
   product name that wraps to two lines, which pushed its body down and its fact
   table with it, leaving three COST rules at three different heights.

   Pushing the table to the bottom of its card makes the comparison line up
   across all three regardless of how the name and body wrap — which is the
   whole point of a spec table sitting under three cards. It survives a fourth
   product, a longer name and a translation; matching the heights by hand does
   not. The rows themselves are a fixed 11px/11px with one-line values, so
   bottom-aligning the tables aligns them row for row. */
.dc-product__facts {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  border-top: 1px solid rgba(20, 20, 15, 0.12);
}

.dc-fact {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(20, 20, 15, 0.08);
}

.dc-fact__k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f5f55;
  flex: none;
}

.dc-fact__v {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   14. How it works
   -------------------------------------------------------------------------- */

.dc-how {
  background: #14140f;
  color: #f2f2ea;
}

.dc-how__inner {
  padding: var(--sec-pad-y) var(--padX);
  display: grid;
  grid-template-columns: var(--cols2);
  gap: var(--hero-gap);
}

.dc-eyebrow--warm {
  color: #c07a62;
}

.dc-how__h2 {
  margin: 16px 0 18px;
  font-size: var(--h2-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 16ch;
}

.dc-how__lede {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  color: #c9c9bc;
  margin: 0 0 24px;
  max-width: 42ch;
}

.dc-how__media {
  position: relative;
  height: var(--hero-img-h);
}

.dc-steps {
  display: flex;
  flex-direction: column;
}

.dc-step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(242, 242, 234, 0.18);
}

.dc-step__n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #c07a62;
  padding-top: 4px;
}

.dc-step__t {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.dc-step__d {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.5;
  color: #a8a89b;
}

.dc-how__cta {
  align-self: flex-start;
  margin-top: 22px;
  background: #a6432b;
  color: #fcfcf9;
  padding: 16px 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
}

.dc-how__cta:hover {
  background: #fcfcf9;
  color: #14140f;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.dc-faq {
  padding: var(--sec-pad-y) var(--padX);
  display: grid;
  grid-template-columns: var(--cols2);
  gap: var(--hero-gap);
}

.dc-faq__h2 {
  margin: 16px 0 26px;
  font-size: var(--h2-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 15ch;
}

.dc-tiles {
  display: grid;
  grid-template-columns: var(--tile-cols);
  gap: 8px;
  margin-bottom: 30px;
}

.dc-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fcfcf9;
  border: 1px solid rgba(20, 20, 15, 0.12);
  padding: 15px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #14140f;
}

.dc-tile:hover {
  border-color: #a6432b;
  color: #a6432b;
}

.dc-tile__mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #a6432b;
}

.dc-faq__list {
  border-top: 1px solid rgba(20, 20, 15, 0.16);
}

.dc-faq__item {
  border-bottom: 1px solid rgba(20, 20, 15, 0.16);
}

.dc-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: none;
  border: 0;
  padding: 20px 0;
  cursor: pointer;
  text-align: left;
  font-family: Archivo, sans-serif;
  font-size: var(--faq-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #14140f;
}

.dc-faq__q:hover {
  color: #a6432b;
}

.dc-faq__sign {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  color: #a6432b;
  flex: none;
}

.dc-faq__a {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16.5px;
  line-height: 1.55;
  color: #43433b;
  margin: 0 0 22px;
  max-width: 52ch;
}

.dc-faq__a[hidden] {
  display: none;
}

.dc-agent {
  align-self: start;
  background: #fcfcf9;
  border: 1px solid rgba(20, 20, 15, 0.14);
  padding: 28px 26px;
}

.dc-agent__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.dc-agent__avatar {
  width: 64px;
  height: 64px;
  flex: none;
}

.dc-agent__t {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dc-agent__lic {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e62;
  margin-top: 4px;
}

.dc-hours {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(20, 20, 15, 0.12);
  margin-bottom: 20px;
}

.dc-hours__row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 20, 15, 0.08);
  font-size: 13.5px;
}

.dc-hours__d {
  color: #6e6e62;
}

.dc-hours__t {
  font-weight: 600;
}

.dc-agent__cta {
  display: block;
  text-align: center;
  background: #a6432b;
  color: #fcfcf9;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
}

.dc-agent__cta:hover {
  background: #8c3521;
  color: #fcfcf9;
}

.dc-agent__note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5f5f55;
  margin-top: 12px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   16. Closing CTA
   -------------------------------------------------------------------------- */

.dc-cta {
  background: #a6432b;
  color: #fdf7f4;
}

.dc-cta__inner {
  padding: var(--cta-pad-y) var(--padX);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.dc-cta__copy {
  max-width: 46ch;
}

.dc-cta__h2 {
  margin: 0 0 12px;
  font-size: var(--h2-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.dc-cta__p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(253, 247, 244, 0.88);
  margin: 0 0 12px;
}

.dc-cta__fine {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 247, 244, 0.75);
}

.dc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dc-cta__primary {
  background: #fcfcf9;
  color: #14140f;
  padding: 17px 28px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
}

.dc-cta__primary:hover {
  background: #14140f;
  color: #fcfcf9;
}

.dc-cta__ghost {
  border: 1px solid rgba(253, 247, 244, 0.6);
  color: #fdf7f4;
  padding: 17px 28px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 2px;
}

.dc-cta__ghost:hover {
  background: rgba(253, 247, 244, 0.12);
  color: #fdf7f4;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.dc-footer {
  border-top: 1px solid rgba(20, 20, 15, 0.14);
}

.dc-footer__inner {
  padding: 38px var(--padX) 48px;
  display: grid;
  grid-template-columns: var(--cols2);
  gap: 28px;
}

.dc-footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.dc-footer__mark {
  display: block;
  width: auto;
  height: 20px;
  flex: none;
}

.dc-footer__legal {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #52524a;
  margin: 0;
  max-width: 60ch;
}

.dc-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: flex-start;
}

.dc-footer__link {
  font-size: 13px;
  font-weight: 500;
  color: #52524a;
}

.dc-footer__link:hover {
  color: #a6432b;
}

/* --------------------------------------------------------------------------
   18. Sticky call bar
   -------------------------------------------------------------------------- */

.dc-sticky {
  display: var(--sticky-display);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(233, 234, 226, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(20, 20, 15, 0.16);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

/* The header already keeps Call visible while the intake is onscreen. Moving
   this second fixed control out of the way prevents it from covering option
   cards, validation messages, or the consent summary on a short phone. */
.dc-sticky.is-suppressed,
html:not(.tl-js) .dc-sticky {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
}

.dc-sticky__range {
  flex: 1;
  text-align: center;
  background: #14140f;
  color: #fcfcf9;
  padding: 15px 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 2px;
}

.dc-sticky__range:hover {
  background: #a6432b;
  color: #fcfcf9;
}

.dc-sticky__call {
  flex: 1;
  text-align: center;
  background: #a6432b;
  color: #fcfcf9;
  padding: 15px 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 2px;
}

.dc-sticky__call:hover {
  background: #8c3521;
  color: #fcfcf9;
}

/* --------------------------------------------------------------------------
   19. Image slots
   Transcribed from image-slot.js so a slot renders identically here without
   the design-tool runtime. Filled slots (.dc-slot--filled) carry the photo
   that was dropped into the design; empty slots keep the placeholder chrome,
   whose icon, dashed ring and caption are all currentColor — which is why the
   spotlight slot reads as a near-black rectangle exactly as it does in the
   design (dark ink on the wrapper's own #14140F ground).
   -------------------------------------------------------------------------- */

.dc-slot {
  display: block;
  position: relative;
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
}

.dc-slot__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(127, 127, 127, 0.08);
}

.dc-slot--circle .dc-slot__frame,
.dc-slot--circle .dc-slot__ring {
  border-radius: 50%;
}

.dc-slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

.dc-slot--contain .dc-slot__img {
  object-fit: contain;
}

.dc-slot__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
  box-sizing: border-box;
  user-select: none;
}

.dc-slot__empty svg {
  opacity: 0.45;
}

.dc-slot__cap {
  max-width: 90%;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.75;
}

.dc-slot__sub {
  font-size: 11px;
  opacity: 0.75;
}

.dc-slot__sub u {
  text-underline-offset: 2px;
}

.dc-slot__ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed currentColor;
  opacity: 0.35;
}

.dc-slot--filled .dc-slot__ring,
.dc-slot--filled .dc-slot__empty {
  display: none;
}

/* --------------------------------------------------------------------------
   20. Goal-first lead form
   The landing prototype originally held a three-button price estimator here.
   This is now the same semantic and delivery contract as the production intake:
   native radio groups, one question at a time, inline validation, explicit
   callback consent, and a direct-call path that never requires consent.
   -------------------------------------------------------------------------- */

[hidden] {
  display: none !important;
}

.dc-skip {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  background: #14140f;
  color: #fcfcf9;
  font-size: 15px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.dc-skip:focus {
  color: #fcfcf9;
  transform: translateY(0);
}

:where(a, button, input, select):focus-visible {
  outline: 3px solid #14140f;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fcfcf9;
}

:where(a, button, label, select) {
  touch-action: manipulation;
}

.dc-header__lang {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* The hero stage, the media band and the quote card are the design's own —
   sections 6 and 7 above hold them, and nothing here overrides their geometry.
   The card is the estimator again, at the design's 392px, absolutely placed
   32px in from the bottom-left of a 560px band. The eight-step intake is not
   in the stage at all; it opens as .dc-modal. */

/* Top right, opposite the rating badge. It used to sit bottom right, which was
   safe while the card was a 392px panel floating clear of it — now the card
   spans the full measure and climbs 40px back over the film at every width, so
   the bottom edge belongs to the card and nothing else can live there. */
.dc-hero__motion {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(20, 20, 15, 0.28);
  border-radius: 2px;
  background: rgba(252, 252, 249, 0.94);
  color: #14140f;
  font: 600 13px/1 Archivo, sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.dc-hero__motion:hover {
  background: #14140f;
  color: #fcfcf9;
}

@media (max-width: 899px) {
  .dc-hero__motion {
    top: 12px;
    right: 12px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* The estimator card needs an anchor offset: every "See my range" and "Start
   the questions" lands on it under a sticky header. */
.dc-card {
  scroll-margin-top: var(--scroll-offset);
}

/* --------------------------------------------------------------------------
   19b. The estimator at full measure

   The card spans the whole 1280 above 900. Stretching its contents to match
   would be the wrong read of "full width": three answer buttons stacked down a
   1280px column is a lot of white space holding very little, and a line of
   body copy that long is unreadable. So the width is spent rather than filled
   — the answers go side by side, the prose keeps a measure, and the result
   splits into the number and what to do about it.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  /* auto-fit, not a fixed 3: question three offers two answers, and collapsing
     the empty tracks lets those two share the row instead of leaving a gap
     where a third would have been. */
  .dc-opts {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
  }

  /* Prose keeps a measure even though its container no longer has one. */
  .dc-q,
  .dc-q__hint {
    max-width: 34ch;
  }

  .dc-est__note {
    max-width: 46ch;
  }

  .dc-est__figure {
    align-self: center;
  }

  [data-est-done] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    align-items: start;
  }

  /* The rule under the answer table is the divider between the two halves at
     this width, so it runs the full height of the column rather than sitting
     as a stray line above the button. */
  .dc-est__rows {
    margin-bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   20a. Intake dialog
   Not in the design. The eight-step intake is held out of the page until a
   "Check my price" asks for it, so this is a native <dialog>: the browser owns
   the top layer, the backdrop, the focus trap and Escape, and landing.js only
   calls showModal/close. The panel is the scroll container — fit-form.js finds
   it by walking up from the form and scrolls it instead of the window, so a
   step change inside the dialog does not scroll the page behind it.
   -------------------------------------------------------------------------- */

.dc-modal {
  width: min(620px, calc(100vw - 28px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: #14140f;
}

/* The panel is a fixed 620px at every viewport, so the goal cards cannot take
   their width cue from a viewport media query — at 2-up inside the panel each
   card is ~250px and every label wraps to three lines. One per row here. */
.dc-modal .tl-fit-options--goals {
  grid-template-columns: 1fr;
}

.dc-modal .tl-fit-options--goals .tl-fit-option {
  min-height: 0;
}

/* The focus target on open. It is a heading, not a control, so a ring would be
   noise — but it still has to take focus so the dialog is entered properly. */
.dc-modal h2[tabindex='-1']:focus {
  outline: none;
}

.dc-modal::backdrop {
  background: rgba(20, 20, 15, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dc-modal__panel {
  max-height: min(88vh, 940px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 34px);
  background: #fcfcf9;
  border: 1px solid rgba(20, 20, 15, 0.12);
  border-top: 4px solid #a6432b;
  box-shadow: 0 30px 64px -30px rgba(20, 20, 15, 0.85);
}

.dc-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #52524a;
  font: 400 26px/1 Archivo, sans-serif;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.dc-modal__close:hover {
  background: #e9eae2;
  color: #14140f;
}

/* The close control sits over the intro, which must not run under it. */
.dc-modal .dc-card__intro {
  padding-right: 44px;
}

/* The page behind a modal must not scroll with it — set by landing.js while
   the dialog is open, and removed on close. */
html.dc-modal-open,
html.dc-modal-open body {
  overflow: hidden;
}

@media (max-width: 560px) {
  .dc-modal {
    width: 100vw;
    max-height: 100vh;
    margin: 0;
  }

  .dc-modal__panel {
    max-height: 100vh;
    min-height: 100vh;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 4px solid #a6432b;
  }
}

.dc-card__intro {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(20, 20, 15, 0.14);
}

.dc-card__eyebrow,
.tl-micro {
  display: block;
  margin: 0;
  color: #5f5f55;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dc-card__intro h2 {
  max-width: 21ch;
  margin: 8px 0 6px;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.dc-card__intro p {
  max-width: 54ch;
  margin: 0;
  color: #4d4d45;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.55;
}

html:not(.tl-js) .tl-fit,
.tl-js-only,
.tl-no-js-hide {
  display: none;
}

.tl-js .tl-js-only {
  display: block;
}

.tl-js .tl-no-js-hide {
  display: inline-flex;
}

.tl-fit {
  width: 100%;
  min-width: 0;
}

.tl-fit-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
}

.tl-fit-nav {
  display: flex;
  align-items: center;
}

.tl-js .tl-fit-nav.tl-js-only {
  display: flex;
}

.tl-fit-nav::before {
  content: '·';
  margin-right: 2px;
  color: #77776c;
}

.tl-back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #8c3521;
  font: 700 12px/1 Archivo, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tl-back:hover {
  color: #14140f;
}

.tl-fit-progress {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  margin: 4px 0 24px;
  padding: 0;
  list-style: none;
}

.tl-js .tl-fit-progress.tl-js-only {
  display: grid;
}

.tl-fit-segment {
  position: relative;
  height: 4px;
  overflow: hidden;
  background: #c9c9bf;
}

.tl-fit-segment::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #a6432b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.tl-fit-segment.is-done::after,
.tl-fit-segment.is-current::after {
  transform: scaleX(1);
}

.tl-fit-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tl-js .tl-fit-step {
  display: none;
}

.tl-js .tl-fit-step.is-active {
  display: block;
}

@keyframes tl-step-forward {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes tl-step-back {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: none; }
}

.tl-js .tl-fit[data-step-dir='fwd'] .tl-fit-step.is-active {
  animation: tl-step-forward 220ms ease both;
}

.tl-js .tl-fit[data-step-dir='back'] .tl-fit-step.is-active {
  animation: tl-step-back 220ms ease both;
}

.tl-fit-question {
  max-width: 28ch;
  margin: 0 0 7px;
  color: #14140f;
  font-family: Archivo, sans-serif;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.tl-fit-question:focus {
  outline: none;
}

.tl-fit-question:focus-visible {
  border-radius: 2px;
  box-shadow: 0 0 0 3px #fcfcf9, 0 0 0 6px #14140f;
}

.tl-fit-help {
  max-width: 60ch;
  margin: 0 0 18px;
  color: #56564d;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.55;
}

.tl-fit-help--after {
  margin: 2px 0 0;
}

.tl-fit-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.tl-fit-options--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.tl-fit-option {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px 13px 18px;
  border: 1.5px solid #74746b;
  border-left: 4px solid transparent;
  border-radius: 3px;
  background: #fcfcf9;
  color: #14140f;
  box-shadow: 0 1px 0 rgba(20, 20, 15, 0.08);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

.tl-fit-option:hover {
  border-color: #a6432b;
  box-shadow: 0 8px 18px -15px rgba(20, 20, 15, 0.8);
  transform: translateY(-1px);
}

.tl-fit-option:active {
  transform: translateY(1px);
}

.tl-fit-radio:focus-visible + .tl-fit-option {
  outline: 3px solid #14140f;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fcfcf9;
}

.tl-fit-radio:checked + .tl-fit-option {
  border-color: #14140f;
  border-left-color: #a6432b;
  background: #f4f4ee;
}

.tl-fit-option b {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.tl-fit-option small {
  display: block;
  margin-top: 3px;
  color: #56564d;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14px;
  line-height: 1.42;
}

.tl-fit-option__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #e9eae2;
  color: #8c3521;
  transition: background-color 160ms ease, color 160ms ease;
}

.tl-fit-option__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-fit-radio:checked + .tl-fit-option .tl-fit-option__icon {
  background: #14140f;
  color: #fcfcf9;
}

.tl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.tl-label {
  color: #282821;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.tl-optional {
  color: #5f5f55;
  font-weight: 500;
}

.tl-field-well {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1.5px solid #74746b;
  border-left: 4px solid transparent;
  border-radius: 2px;
  background: #f4f4ee;
  color: #14140f;
  box-shadow: inset 0 1px 0 rgba(20, 20, 15, 0.09);
  font: 500 16px/1.35 Archivo, sans-serif;
}

.tl-field-well::placeholder {
  color: #6d6d63;
  opacity: 1;
}

select.tl-field-well {
  appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, #14140f 50%),
    linear-gradient(135deg, #14140f 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
}

.tl-field-well:focus-visible {
  border-color: #14140f;
  outline: 3px solid #14140f;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fcfcf9;
}

.tl-field-well[aria-invalid='true'] {
  border-color: #8e2f22;
  border-left-color: #8e2f22;
}

.tl-field-error {
  margin: 0;
  color: #73251c;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.tl-field-error:empty,
.tl-status:empty {
  display: none;
}

.tl-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1.5px solid #14140f;
  border-radius: 2px;
  font: 700 15.5px/1.25 Archivo, sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease;
}

.tl-btn--primary {
  border-color: #a6432b;
  background: #a6432b;
  color: #fcfcf9;
}

.tl-btn--primary:hover {
  border-color: #14140f;
  background: #14140f;
}

.tl-btn--secondary {
  background: transparent;
  color: #14140f;
}

.tl-btn--secondary:hover {
  background: #14140f;
  color: #fcfcf9;
}

.tl-btn--block {
  width: 100%;
}

.tl-btn:disabled {
  cursor: wait;
  opacity: 0.68;
}

.tl-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tl-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tl-consent-summary {
  margin: 12px 0 10px;
  color: #282821;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.tl-consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 8px 0 16px;
  padding: 14px;
  border: 1px solid #929287;
  border-left: 4px solid transparent;
  background: #f0f0e9;
}

.tl-consent-box {
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  appearance: none;
  border: 1.5px solid #14140f;
  background: #fcfcf9;
  cursor: pointer;
}

.tl-consent-box:checked {
  background: #14140f;
}

.tl-consent-box:checked::after {
  content: '';
  display: block;
  width: 11px;
  height: 6px;
  margin: 5px auto 0;
  border-bottom: 2px solid #fcfcf9;
  border-left: 2px solid #fcfcf9;
  transform: rotate(-45deg);
}

.tl-consent label {
  color: #45453e;
  font-family: Archivo, sans-serif;
  font-size: 12.5px;
  line-height: 1.52;
  cursor: pointer;
}

.tl-consent .tl-field-error {
  grid-column: 2;
}

.tl-consent[data-invalid='true'],
.tl-consent:has(.tl-consent-box[aria-invalid='true']) {
  border-color: #8e2f22;
  border-left-color: #8e2f22;
}

.tl-consent-state {
  margin: 0 0 9px;
  color: #5f5f55;
  font: 700 13px/1.4 Archivo, sans-serif;
}

.tl-consent-state[data-given='true'] {
  color: #14140f;
}

.tl-status {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 4px solid #8e2f22;
  background: #f4e7e3;
  color: #4f1a14;
  font: 600 14px/1.5 Archivo, sans-serif;
}

.tl-submit-note {
  margin: 9px 0 0;
  color: #5f5f55;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
}

.tl-link,
.tl-consent a,
.tl-consent-summary a,
.tl-status a {
  color: #842f20;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dc-card__call {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 20, 15, 0.14);
  color: #55554d;
  font-family: Archivo, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

.dc-card__call a {
  color: #842f20;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 1150px) {
  .tl-fit-options--goals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tl-fit-options--goals .tl-fit-option {
    min-height: 112px;
  }
}

@media (max-width: 899px) {
  .dc-card__intro h2 {
    font-size: 27px;
  }
}

@media (max-width: 560px) {
  .tl-contact-grid,
  .tl-fit-options--compact {
    grid-template-columns: 1fr;
  }

  .tl-fit-option {
    padding-inline: 14px;
  }

  .tl-consent {
    padding: 12px;
  }

  .dc-hero__badge {
    left: 12px;
    top: 12px;
  }
}

@media (max-width: 360px) {
  .dc-header__lang {
    display: none;
  }
}

@media (hover: none) {
  .tl-fit-option:hover:not(:active) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .dc-rot,
  .tl-js .tl-fit[data-step-dir] .tl-fit-step.is-active {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}