/* S263a M04: the home page in design D (docs/design/mockups/d, the plan's step 4). Linked from the
   home body only, at /assets/css/home-d.css (views/pages/home.ts), so no other page fetches it. Colours are the shared tokens
   (packages/ui/src/tokens.css); orange is a surface, never text. The rules it replaces in pages.css
   and scrollcraft.css leave in step 10. */
.hd-hero,
.hd-pk,
.hd-marq,
.hd-problem,
.hd-steps,
.hd-box,
.hd-cost,
.hd-record,
.hd-guar,
.hd-with,
.hd-time,
.hd-faq,
.hd-closing {
  --hd-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --hd-gut: clamp(16px, 4vw, 56px);
  --hd-sec: clamp(64px, 9vw, 128px);
  --hd-line: var(--tv-sage);
  font-family: var(--sc-font-text);
  color: var(--sc-ink);
}
.hd-wrap {
  /* S278 (S-28): the site's one content width, 1280, as a content box (shell.css, round 6) */
  box-sizing: content-box;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--hd-gut);
}
.hd-h1,
.hd-h2,
.hd-st__h,
.hd-st__num,
.hd-klist li,
.hd-face__v,
.hd-gbig,
.hd-tl h3,
.hd-marq span,
.hd-seg__n,
.hd-nlist li::before {
  font-family: var(--sc-font-display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.hd-h2 {
  font-size: var(--tv-fs-display);
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
}
.hd-h3 {
  font: 700 var(--tv-fs-14)/1.2 var(--sc-font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 48px 0 0;
}
.hd-kicker {
  font: 700 var(--tv-fs-14)/1.2 var(--sc-font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-accent-deep);
  margin: 0 0 16px;
}
.hd-lede {
  color: var(--sc-ink-soft);
  font-size: 18px;
  line-height: 1.55;
  max-width: 34em;
  margin: 22px 0 0;
}
.hd-small {
  color: var(--sc-ink-soft);
  font-size: var(--tv-fs-16);
  max-width: 36em;
  margin: 22px 0 0;
}
.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--sc-accent);
  color: var(--tv-cta-ink);
  font: 700 16px/1 var(--sc-font-text);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms var(--hd-ease),
    background-color 160ms var(--hd-ease);
}
.hd-btn svg {
  transition: transform 200ms var(--hd-ease);
}
.hd-btn:active {
  transform: scale(0.97);
  background: var(--tv-accent-hover);
}
.hd-lnk {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
@media (hover: hover) and (pointer: fine) {
  .hd-btn:hover {
    background: var(--tv-accent-hover);
  }
  .hd-btn:hover svg,
  .hd-lnk:hover svg {
    transform: translateX(3px);
  }
}
.hd-btn:focus-visible,
.hd-lnk:focus-visible,
.hd-wbtn:focus-visible,
.hd-wrow:focus-visible,
.hd-faq summary:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
}
.hd-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 30px;
}
.hd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--tv-green-tint);
  color: var(--tv-green-900);
  font-weight: 600;
  font-size: 14px;
}
.hd-pline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 22px 0 0;
  font-size: 14px;
}
.hd-pline span + span::before {
  /* the slash between the price and the bar is drawn here, so no unbacked glyph is content */
  content: '/';
  margin-inline-end: 14px;
  opacity: 0.5;
}
/* S266 (S265 staging QA): on a phone the two spans wrap onto two lines, and the slash then
   stood alone at the start of the second one. Stacked, the line break is the separator. */
@media (max-width: 600px) {
  .hd-pline span + span::before {
    content: none;
  }
}

/* Hero: the H1 over the photo frame. The frame is the D-HERO slot, stretched to the section so
   the box never moves when the file lands. */
.hd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tv-green-900);
  color: #fff;
  /* S276 S-03: never wider than about 1.92:1, so a 16:9 photograph loses at most 10% of its
     height at 1920 (it was 2.13:1 there, 17%) and none at 1440; still capped by the screen */
  min-height: max(clamp(600px, 92svh, 900px), min(52vw, 92svh));
  display: flex;
}
/* S278 (S-09): the hero runs up under the header, which home.js and shell.css paint over it with
   white ink. The pull is the header's own height (57 on a phone, 73 from 861px), set here and not
   read from a script, so nothing moves when the script runs; the hero grows by the same amount, so
   the H1 and everything below it stay where they were. With scripting off the header stays solid
   and covers only the top of the hero's 128px copy padding. */
.hd-hero {
  --hd-head: 57px;
  margin-top: calc(-1 * var(--hd-head));
  /* the same height back inside, for a phone, where the copy and not the min-height sets it */
  padding-top: var(--hd-head);
  min-height: calc(max(clamp(600px, 92svh, 900px), min(52vw, 92svh)) + var(--hd-head));
}
@media (min-width: 861px) {
  .hd-hero {
    --hd-head: 73px;
  }
}
.hd-hero .hd-hero__pic {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  aspect-ratio: auto;
}
/* the person stands on the right, the H1 on the dark left (s271 image spec, D-HERO safe zone) */
@media (min-width: 901px) {
  .hd-hero .hd-hero__pic img {
    object-position: 70% 50%;
  }
}
.hd-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(31 61 43 / 0.15) 30%, rgb(31 61 43 / 0.92) 100%);
}
.hd-hero__copy {
  width: 100%;
  align-self: flex-end;
  padding-block: 128px 156px;
}
.hd-hero .hd-kicker {
  color: var(--tv-sage);
}
.hd-h1 {
  font-size: var(--tv-fs-hero);
  max-width: 13ch;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.hd-hero__sub {
  color: var(--tv-sage);
  max-width: 31em;
  font-size: var(--tv-fs-body);
  line-height: 1.5;
  margin: 22px 0 0;
}
.hd-hero .hd-pline {
  color: var(--tv-sage);
}

/* D3: the pack chooser card, pulled up over the hero's foot. */
.hd-pk {
  position: relative;
  z-index: 3;
  margin-top: -104px;
}
.hd-packs {
  max-width: 780px;
  margin-inline-start: auto;
  background: var(--sc-canvas);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
}
.hd-packs h2 {
  font: 700 var(--tv-fs-14)/1 var(--sc-font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 12px;
}
.hd-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.hd-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hd-seg label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 84px;
  padding: 12px 10px;
  border: 1px solid var(--hd-line);
  border-radius: 12px;
  cursor: pointer;
  transition:
    color 200ms var(--hd-ease),
    background-color 200ms var(--hd-ease);
}
.hd-seg__n {
  font-size: 24px;
}
.hd-seg__p {
  font-size: var(--tv-fs-14);
  font-weight: 600;
  color: var(--sc-ink-soft);
}
.hd-seg__tag {
  font-style: normal;
  font-size: var(--tv-fs-12);
  font-weight: 700;
  color: var(--tv-accent-deep);
}
.hd-seg input:checked + label {
  background: var(--tv-green-900);
  color: #fff;
  border-color: transparent;
}
.hd-seg input:checked + label .hd-seg__p,
.hd-seg input:checked + label .hd-seg__tag {
  color: var(--tv-sage);
}
.hd-seg input:focus-visible + label {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}
.hd-seg__ind {
  display: none;
}
@supports selector(:has(*)) {
  @media (min-width: 601px) {
    .hd-seg__ind {
      display: block;
      position: absolute;
      inset-block: 0;
      left: 0;
      width: calc((100% - 18px) / 4);
      border-radius: 12px;
      background: var(--tv-green-900);
      transition: transform 240ms var(--hd-ease);
    }
    .hd-seg input:checked + label {
      background: transparent;
    }
    .hd-seg:has(#hd-p1:checked) .hd-seg__ind {
      transform: translateX(calc(100% + 6px));
    }
    .hd-seg:has(#hd-p2:checked) .hd-seg__ind {
      transform: translateX(calc(200% + 12px));
    }
    .hd-seg:has(#hd-p3:checked) .hd-seg__ind {
      transform: translateX(calc(300% + 18px));
    }
  }
}
.hd-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hd-line);
}
.hd-readout__scope {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 0;
  font-size: 14px;
  color: var(--sc-ink-soft);
  max-width: 30em;
}
.hd-readout__sub {
  display: none;
  margin: 0;
  font-size: 14px;
  color: var(--sc-ink-soft);
}
.hd-packs:has(#hd-p3:checked) .hd-readout__sub {
  display: block;
}

/* The marquee: two approved facts, decorative and hidden from assistive tech. */
.hd-marq {
  background: var(--tv-accent-deep);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
  margin-top: 56px;
}
.hd-marq__t {
  display: inline-flex;
  animation: hd-mq 44s linear 3; /* D16: decorative loops run 3 times and rest */
}
.hd-marq span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-inline-end: 28px;
  font-size: var(--tv-fs-32);
}
.hd-marq span::after {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
}
@keyframes hd-mq {
  to {
    transform: translateX(-50%);
  }
}

/* D4: the problem, with the word reveal (home.js arms it). */
.hd-problem {
  padding-block: var(--hd-sec);
  background: var(--sc-canvas);
}
.hd-stmt {
  max-width: 22ch;
}
.hd-stmt em {
  font-style: normal;
  color: var(--tv-accent-deep);
}
/* S279 (S-25): the statement is set static in ink with its one word in brick (the em above).
   The reveal painted every unrevealed word at 15 percent, which read as grey and pale orange,
   outside the palette. home.js still adds its classes; they no longer change how a word looks. */
.hd-stmt.arm .w,
.hd-stmt.arm .w.on {
  opacity: 1;
}
.hd-pgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: end;
  margin: 56px 0 24px;
}
.hd-pgrid p {
  margin: 0;
  color: var(--sc-ink-soft);
  font-size: 18px;
  line-height: 1.6;
  max-width: 34em;
}
.hd-pgrid .hd-big {
  color: var(--sc-ink);
  font-size: var(--tv-fs-18);
  font-weight: 500;
}

/* D5: four steps, staggered. */
.hd-steps {
  background: var(--tv-green-900);
  color: #fff;
  padding-block: var(--hd-sec);
  overflow: hidden;
}
.hd-steps .hd-kicker,
.hd-steps .hd-h3 {
  color: var(--tv-sage);
}
.hd-sh {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px 40px;
}
.hd-sh > p {
  max-width: 30em;
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}
.hd-steps .hd-sh > p {
  color: var(--tv-sage);
}
.hd-strip {
  list-style: none;
  counter-reset: hd-st;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 64px 0 0;
  padding: 0;
  align-items: start;
}
.hd-st {
  position: relative;
  counter-increment: hd-st;
}
/* the step number is the list's own count (an <ol> already tells assistive tech 1 to 4) */
.hd-st__num::before {
  content: counter(hd-st);
}
.hd-st:nth-child(2) {
  margin-top: 48px;
}
.hd-st:nth-child(3) {
  margin-top: 96px;
}
.hd-st:nth-child(4) {
  margin-top: 144px;
}
.hd-st__num {
  position: absolute;
  z-index: 2;
  top: -36px;
  inset-inline-start: -4px;
  font-size: var(--tv-fs-72);
  line-height: 0.8;
  color: #fff;
  text-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
.hd-st .hd-st__pic {
  border-radius: 4px;
}
.hd-st__h {
  font-size: var(--tv-fs-section);
  margin: 20px 0 0;
}
.hd-st p {
  color: var(--tv-sage);
  font-size: var(--tv-fs-16);
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 24em;
}
.hd-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 56px 0 0;
}

/* D6: the box. */
.hd-box {
  background: var(--tv-green-tint);
  padding-block: var(--hd-sec);
}
.hd-kit {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-top: 56px;
}
.hd-kit .hd-kit__pic {
  border-radius: 6px;
}
.hd-klist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hd-klist li {
  padding: 20px 0;
  border-top: 1.5px solid var(--tv-green-900);
  font-size: var(--tv-fs-24);
  line-height: 1;
}
.hd-klist li:last-child {
  border-bottom: 1.5px solid var(--tv-green-900);
}

/* D7 and D11: the cost as one card with two faces. */
.hd-cost {
  background: var(--sc-surface);
  padding-block: var(--hd-sec);
}
.hd-costcard {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0 6px;
  margin-top: 48px;
  max-width: 880px;
  padding: 24px;
  border: 1.5px solid var(--tv-green-900);
  border-radius: 18px;
}
.hd-costcard > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hd-costcard > label {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hd-line);
  font-weight: 600;
  font-size: var(--tv-fs-16);
  cursor: pointer;
  transition:
    background-color 200ms var(--hd-ease),
    color 200ms var(--hd-ease);
}
.hd-costcard > input:checked + label {
  background: var(--tv-green-900);
  color: #fff;
  border-color: transparent;
}
.hd-costcard > input:focus-visible + label {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}
.hd-face {
  grid-column: 1 / -1;
  margin-top: 28px;
}
#hd-m1:checked ~ .hd-face--2,
#hd-m2:checked ~ .hd-face--1 {
  display: none;
}
.hd-face p {
  margin: 0;
}
.hd-face__k {
  font: 700 var(--tv-fs-14)/1.2 var(--sc-font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-accent-deep);
}
.hd-face__v {
  font-size: var(--tv-fs-hero);
  line-height: 0.86;
  color: var(--tv-accent-deep);
  margin-top: 12px !important;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.hd-face__d {
  margin-top: 16px !important;
  color: var(--sc-ink-soft);
  font-size: 16px;
}
.hd-face__d b {
  color: var(--sc-ink);
}
.hd-face {
  animation: hd-face 260ms var(--hd-ease);
}
@keyframes hd-face {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.hd-cost__sub {
  display: grid;
  gap: 10px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hd-line);
  max-width: 880px;
}
.hd-cost__sub p {
  margin: 0;
  color: var(--sc-ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

/* D8: the photo record, with the film of six frames (home.js sweeps them). */
.hd-record {
  background: var(--sc-canvas);
  padding-block: var(--hd-sec);
}
.hd-rgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}
.hd-film {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.hd-fr {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  border: 1.5px dashed var(--tv-sage-dim);
  color: var(--tv-sage-dim);
  transition:
    background-color 320ms var(--hd-ease),
    color 240ms var(--hd-ease),
    border-color 240ms var(--hd-ease);
}
.hd-fr i {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 200ms ease,
    transform 300ms var(--hd-ease);
}
.hd-fr.on {
  background: var(--tv-green-900);
  border-color: transparent;
  color: var(--tv-sage);
}
.hd-fr.on i {
  opacity: 1;
  transform: none;
  color: var(--tv-green-tint);
}
.hd-fr--end {
  border-style: solid;
  border-color: var(--tv-accent-deep);
  color: var(--tv-accent-deep);
}
.hd-pgrid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 56px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--hd-line);
}
.hd-note {
  margin: 0 0 14px;
  color: var(--sc-ink-soft);
  font-size: 16px;
  line-height: 1.55;
  max-width: 34em;
}
.hd-nlist {
  list-style: none;
  counter-reset: hd;
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  max-width: 36em;
}
.hd-pgrid2 .hd-nlist {
  margin-top: 0;
}
.hd-nlist li {
  counter-increment: hd;
  display: grid;
  grid-template-columns: 36px 1fr;
  font-size: var(--tv-fs-16);
  line-height: 1.5;
}
.hd-nlist li::before {
  content: counter(hd);
  font-size: var(--tv-fs-24);
  color: var(--tv-accent-deep);
}

/* D9: the guarantee, in full, once (D06). */
.hd-guar {
  background: var(--sc-surface);
  padding-block: var(--hd-sec);
  border-top: 1px solid var(--hd-line);
}
.hd-ggrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}
.hd-gmark {
  position: relative;
}
.hd-gbig {
  margin: 0;
  font-size: clamp(8rem, 19vw, 18rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--tv-green-900);
}
.hd-gbig span {
  display: block;
  font-size: 0.34em;
  margin-top: 0.12em;
  color: var(--tv-accent-deep);
  -webkit-text-stroke: 0;
}
.hd-stamp {
  position: absolute;
  inset-inline-end: 4%;
  bottom: 4%;
  width: 34%;
  max-width: 200px;
  color: var(--tv-accent-deep);
  opacity: 0.94;
  transform: rotate(-12deg);
}
.hd-guar.arm .hd-stamp {
  opacity: 0;
  transform: scale(1.6) rotate(-4deg);
}
.hd-guar.arm .hd-stamp.slam {
  animation: hd-slam 460ms var(--hd-ease) forwards;
}
@keyframes hd-slam {
  55% {
    opacity: 1;
    transform: scale(0.95) rotate(-13deg);
  }
  100% {
    opacity: 0.94;
    transform: scale(1) rotate(-12deg);
  }
}

/* D10: with you. */
.hd-with {
  background: var(--tv-green-tint);
  padding-block: var(--hd-sec);
}
.hd-wgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: end;
}
.hd-wacts {
  display: grid;
  gap: 14px;
}
.hd-wbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--tv-wa);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.hd-wrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-block: 1.5px solid var(--tv-green-900);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--tv-fs-body);
  line-height: 1.3;
}

/* D11 (D13): the timeline; its line fills with scroll (home.js sets --fill), milestones only. */
.hd-time {
  background: var(--sc-canvas);
  padding-block: var(--hd-sec);
}
.hd-time .hd-sh > p {
  color: var(--sc-ink-soft);
}
.hd-tl {
  --fill: 1;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin: 56px 0 28px;
  padding: 0;
}
.hd-tl::before,
.hd-tl::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 2px;
  background: var(--hd-line);
}
.hd-tl::after {
  background: var(--tv-green-900);
  transform-origin: left;
  transform: scaleX(var(--fill));
}
.hd-tl li {
  position: relative;
  z-index: 1;
  padding-top: 34px;
}
.hd-tl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sc-canvas);
  border: 1.5px solid var(--tv-green-900);
  transition: background-color 200ms var(--hd-ease);
}
.hd-tl li.on::before,
.hd-tl:not(.arm) li.hd-tl__last::before {
  background: var(--tv-green-900);
}
.hd-tl h3 {
  margin: 0;
  font-size: 24px;
  color: var(--tv-accent-deep);
}
.hd-tl p {
  margin: 10px 0 0;
  color: var(--sc-ink-soft);
  font-size: var(--tv-fs-16);
  line-height: 1.5;
}

/* D12: questions. */
.hd-faq {
  background: var(--tv-green-tint);
  padding-block: var(--hd-sec);
}
.hd-fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 32px 56px;
}
.hd-faq details {
  border-top: 1.5px solid var(--tv-green-900);
}
.hd-faq details:last-of-type {
  border-bottom: 1.5px solid var(--tv-green-900);
}
.hd-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-size: var(--tv-fs-card);
  font-weight: 600;
  line-height: 1.3;
}
.hd-faq summary::-webkit-details-marker {
  display: none;
}
.hd-faq summary::after {
  content: '';
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--tv-green-900);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.8px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.8px 14px no-repeat;
  transition: transform 200ms var(--hd-ease);
}
.hd-faq details[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--tv-green-900);
  color: #fff;
}
.hd-faq details p {
  margin: 0;
  padding: 0 0 24px;
  padding-inline-end: 56px;
  color: var(--sc-ink-soft);
  line-height: 1.6;
  max-width: 40em;
}
.hd-faq .hd-fgrid > div > p {
  margin-top: 18px;
}

/* D13: closing. */
.hd-closing {
  background: var(--tv-green-900);
  color: #fff;
  padding-block: var(--hd-sec);
}
.hd-closing .hd-lede {
  color: var(--tv-sage);
}
.hd-cgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hd-closing .hd-h2 {
  max-width: 13ch;
}
.hd-closing .hd-cpic {
  border-radius: 6px;
}

@media (max-width: 1000px) {
  .hd-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 20px;
  }
  .hd-st:nth-child(n) {
    margin-top: 0;
  }
  .hd-tl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hd-tl::before,
  .hd-tl::after {
    display: none;
  }
  .hd-film {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .hd-hero {
    /* 680 of hero below the header, plus the header it runs under (S278, S-09) */
    min-height: calc(680px + var(--hd-head));
  }
  .hd-hero__copy {
    padding-block: 120px 80px;
  }
  .hd-pk {
    margin-top: -40px;
  }
  .hd-pgrid,
  .hd-kit,
  .hd-rgrid,
  .hd-pgrid2,
  .hd-ggrid,
  .hd-wgrid,
  .hd-fgrid,
  .hd-cgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .hd-gbig {
    font-size: clamp(7rem, 34vw, 11rem);
  }
  .hd-faq details p {
    padding-inline-end: 0;
  }
}
@media (max-width: 600px) {
  .hd-packs {
    padding: 14px;
    border-radius: 16px;
  }
  .hd-seg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hd-seg label {
    min-height: 72px;
  }
  .hd-seg__n {
    /* S-36: 24 overflows the two column selector at 360, so the phone step is 18 */
    font-size: var(--tv-fs-18);
  }
  .hd-readout .hd-btn {
    width: 100%;
  }
  .hd-marq {
    margin-top: 40px;
  }
  .hd-marq span {
    font-size: 24px;
  }
  .hd-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .hd-st__num {
    font-size: var(--tv-fs-72);
    top: -24px;
  }
  .hd-tl {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-inline-start: 2px;
  }
  .hd-tl li {
    padding-top: 0;
    padding-inline-start: 34px;
  }
  .hd-costcard {
    padding: 18px;
  }
  .hd-costcard > label {
    padding: 10px 14px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hd-marq__t,
  .hd-face,
  .hd-guar .hd-stamp {
    animation: none !important;
  }
  .hd-seg__ind,
  .hd-fr,
  .hd-fr i,
  .hd-btn,
  .hd-btn svg,
  .hd-faq summary::after {
    transition: none;
  }
}

/* ===== S279 N04 and D14 (Designer lane). One block; nothing above is changed. ===== */
/* N04: the price line now sits above the buttons (home.ts); the price itself reads first. */
.hd-hero .hd-pline > span:first-child {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* D14: the kit drawn in sage lines on the green steps band. Shown complete by default. */
.hd-draw {
  margin: 48px 0 0;
  max-width: 412px;
}
.hd-draw svg {
  display: block;
  width: 100%;
  height: auto;
}
.hd-draw path {
  fill: none;
  stroke: var(--tv-sage);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
  /* armed by home.js only; one dash of length 1 (pathLength="1") drawn from full offset to 0 */
  .hd-draw.arm path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
  }
  .hd-draw.arm.on path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hd-draw.arm.on .hd-draw__g--2 path {
    transition-delay: 120ms;
  }
  .hd-draw.arm.on .hd-draw__g--3 path {
    transition-delay: 240ms;
  }
}
@media (max-width: 600px) {
  .hd-draw {
    margin-top: 36px;
  }
}