/* ==========================================================================
   Small Shift Parenting — opt-in landing
   Values extracted from Figma file ZBjsvCQVhMUsYQIcLK9oqH, frames
   "Phone Opt-in v1" (390), "Tablet v1" (768), "Desktop" (1920).

   The design is not linear across the three frames, so each fluid token is
   defined twice: once interpolating 390->768, then redefined at the 768
   breakpoint interpolating 768->1920. Every clamp therefore lands on the
   exact Figma value at 390, 768 and 1920, and stays fluid in between.
   Gap tokens are named for the two things they separate and are derived
   from the frame coordinates, not guessed.

   State changes are instant everywhere by design (SPEC §8): no CSS motion
   properties, no keyframes, no scroll effects. This is deliberate, not an
   oversight — the A13 grep for those property names must return nothing.
   ========================================================================== */

/* ------------------------------- fonts ---------------------------------- */

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------- tokens --------------------------------- */

:root {
  /* colours — from Figma node fills */
  --c-cream: #fff3e0;
  --c-brown-dark: #341f12;
  --c-brown-mid: #705747;
  --c-amber: #fbc672;
  --c-gold: #997024;
  --c-coral: #f3574f;
  --c-white: #ffffff;

  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --lh-title: 1.3;
  --lh-title-wide: 1.3;      /* the phone frame sets 1.3, wider frames 1.35 */
  --lh-body: 1.65;

  /* ---- type (390 -> 768) ---- */
  --fs-h1:         clamp(2.1875rem, 1.6071rem + 2.3810vw, 2.75rem);
  /* The hero subhead must hold its two sentences on two lines on every
     phone. At the 390 frame "Free audio for parents of kids 9-18." is 307.5px
     against 307.5px of room - no slack - so anything narrower wrapped to
     three or four lines. Below 390 the size now tracks the viewport (18px at
     390 down to 14.6px at 320, both sentences fitting with room to spare);
     from 390 up the original 18->24px ramp takes over. min() picks whichever
     of the two ramps is smaller, so each governs its own range. */
  --fs-hero-sub:   clamp(0.9125rem,
                     min(-0.0588rem + 4.8571vw, 0.7381rem + 1.5873vw),
                     1.5rem);
  --fs-section:    1.75rem;
  --fs-item-title: 1.25rem;
  --fs-body:       1rem;
  --fs-hear:       1rem;
  /* 12px at the 390 frame, easing to 10.8px at 320 so the three footer links
     hold one row on narrow phones (see --nav-gap-2) */
  --fs-footer:     clamp(0.675rem, 0.3319rem + 1.7143vw, 0.75rem);
  --fs-eyebrow:    0.8218rem;
  --fs-badge:      1.875rem;
  --fs-button:     clamp(1rem, 0.8710rem + 0.5291vw, 1.125rem);

  --ls-eyebrow: 0.06em;   /* Figma tracking 0.7889 / 13.148 */
  --ls-badge:   0.15em;   /* Figma tracking 4.5 / 30      */

  /* ---- layout ---- */
  --gutter: clamp(1.875rem, 0.8433rem + 4.2328vw, 2.875rem);
  --container-max: 120rem;                   /* 1920px frame; padding is inside it */
  --lh-hero-sub: 1.65;

  /* ---- hero rhythm ---- */
  --hero-pt:        clamp(5.625rem, 3.6905rem + 7.9365vw, 7.5rem);
  --gap-h1-sub:     clamp(5.5rem, 3.5013rem + 8.2011vw, 7.4375rem);
  --gap-sub-next:   clamp(3.8125rem, 0.3563rem + 14.1799vw, 7.1625rem);
  --gap-badge-form: 3.75rem;                 /* 60px, stacked layout only */
  --hero-pb:        clamp(3.875rem, 2.3919rem + 6.0847vw, 5.3125rem);

  /* ---- section rhythm ---- */
  --section-pt:       clamp(5.625rem, 3.6905rem + 7.9365vw, 7.5rem);
  --gap-title-list:   clamp(1.8125rem, -0.1606rem + 8.0952vw, 3.725rem);
  --gap-list-row:     clamp(1.825rem, 1.1286rem + 2.8571vw, 2.5rem);
  --gap-icon-text:    clamp(1.25rem, 1.8850rem + -1.3228vw, 1.5625rem);
  --gap-list-form:    clamp(2.4375rem, 2.1150rem + 1.3228vw, 2.75rem);
  --gap-form-photo:   clamp(5.625rem, 4.9800rem + 2.6455vw, 6.25rem);
  --gap-photo-title:  clamp(1.875rem, -1.4138rem + 13.4921vw, 5.0625rem);
  --gap-title-items:  clamp(1.8125rem, -0.1863rem + 8.2011vw, 3.75rem);
  --gap-item-title-text: clamp(0.9375rem, 0.6150rem + 1.3228vw, 1.25rem);
  --gap-item-text-rule:  clamp(1.8125rem, 0.7806rem + 4.2328vw, 2.8125rem);
  --gap-rule-item:       clamp(1.875rem, 0.9075rem + 3.9683vw, 2.8125rem);
  --gap-items-cta:       clamp(5.4375rem, 3.3094rem + 8.7302vw, 7.5rem);

  /* ---- final CTA ---- */
  --cta-pt:        clamp(3.75rem, -0.1188rem + 15.8730vw, 7.5rem);
  --gap-cta-form:  clamp(1.8125rem, -0.1863rem + 8.2011vw, 3.75rem);
  --gap-form-note: 1.875rem;                 /* 30px, stacked layout only */
  --cta-pb:        clamp(2.375rem, -0.2044rem + 10.5820vw, 4.875rem);

  /* ---- components ---- */
  --badge-size:  14.75rem;
  --icon-size:   2.5rem;
  --input-pb:    clamp(0.4125rem, 0.2188rem + 0.7937vw, 0.6rem);
  --gap-rule-btn: 1.5625rem;                 /* hairline -> button */
  --button-h:    clamp(2.75rem, 1.7181rem + 4.2328vw, 3.75rem);
  /* The phone frames run the form the full width of the column; 330px is
     simply what that measures at 390. Pinning the px value left wider
     phones (428/430) with up to 40px of dead space on one side. */
  --form-w:      100%;
  --logo-w:      10.3rem;
  --footer-pt:   clamp(1.25rem, 0.4119rem + 3.4392vw, 2.0625rem);
  --hairline: 1px;

  /* ---- measure caps that drive line breaks ---- */
  --w-h1:       clamp(20.0625rem, 4.1350rem + 65.3439vw, 35.5rem);
  --w-hero-sub: clamp(21.375rem, 0.6270rem + 89.1534vw, 42.4375rem);
  --w-hear-title: clamp(15.125rem, 4.6746rem + 42.8571vw, 25.25rem);
  --w-why-title:  clamp(20.625rem, 6.6931rem + 57.4074vw, 34.1875rem);
  --w-cta-title:  clamp(20.625rem, 12.2917rem + 34.1799vw, 28.6875rem);
  --w-cta-note:   clamp(14.75rem, 23.2581rem + -17.7249vw, 18.9375rem);

  /* The phone frame does not align every block to one gutter: the h1 sits
     4.5px left of centre, the sub 5px right of it, and the two forms start
     at x=24 and x=27 rather than the 30px gutter. These mirror that. */
  --nudge-h1: -0.28125rem;
  --nudge-sub: 0.3125rem;
  --nudge-hero-form: clamp(-0.375rem, -4.0313rem + 15vw, 0rem);
  --nudge-mid-form: clamp(-0.1875rem, -2.0156rem + 7.5vw, 0rem);
  --nudge-hear-title: 0rem;
  --nudge-cta-title: 0rem;
  --footer-gutter: var(--gutter);
  /* benefit body copy is capped narrower than its column so the reference
     line breaks reproduce (604px at 768, 756px at 1920) */
  --w-item-text: clamp(20.625rem, 2.9563rem + 72.4868vw, 37.75rem);
  /* the frames space the three footer links unequally (57.6 then 39.4 at
     390), so the wider first gap is carried as an extra margin */
  /* The frame's own spacing (57.1 + 38.4) fills the 390 column with 0.6px to
     spare, so nothing narrower can carry it. Below 390 both gaps close down
     with the viewport - 38.4 -> 16 and 18.7 -> 0 - which, with the footer
     type easing too, keeps all three links on one row down to 320. */
  --nav-gap-2: clamp(1rem, -5.4rem + 32vw, 2.4rem);
  --nav-extra-1: clamp(0rem, -5.3431rem + 26.7143vw, 1.16875rem);
  --nav-rise: 0rem;
  --hear-text-drop: 0rem;
  /* the phone frame sets the button label 5.7px right of the button centre */
  --btn-label-nudge: 0.35625rem;
  /* the phone frame runs the photo 333px wide from x=27, overhanging the
     30px gutter on the left; every other block respects the gutter */
  --photo-bleed: 0.1875rem;
}

@media (min-width: 768px) {
  :root {
    --fs-h1:         clamp(2.75rem, 2.1667rem + 1.2153vw, 3.625rem);
    --fs-hero-sub:   clamp(1.5rem, 0.8333rem + 1.3889vw, 2.5rem);
    --fs-section:    clamp(1.75rem, 1rem + 1.5625vw, 2.875rem);
    --fs-item-title: clamp(1.25rem, 0.75rem + 1.0417vw, 2rem);
    --fs-body:       clamp(1rem, 0.6667rem + 0.6944vw, 1.5rem);
    --fs-hear:       clamp(1rem, 0.3333rem + 1.3889vw, 2rem);
    --fs-footer:     clamp(0.75rem, 0.5rem + 0.5208vw, 1.125rem);
    --fs-eyebrow:    clamp(0.8218rem, 0.4113rem + 0.8552vw, 1.4375rem);
    --fs-badge:      clamp(1.875rem, 0.9583rem + 1.9097vw, 3.25rem);
    --fs-button:     clamp(1.125rem, 0.875rem + 0.5208vw, 1.5rem);

    --gutter:    clamp(2.875rem, -1.4583rem + 9.0278vw, 9.375rem);

    --hero-pt:      clamp(7.5rem, 4.1667rem + 6.9444vw, 12.5rem);
    --gap-h1-sub:   clamp(7.4375rem, 4.1044rem + 6.9444vw, 12.4375rem);
    --gap-sub-next: 7.1625rem;               /* 114.6px through the tablet band */
    --hero-pb:      clamp(5.3125rem, 0.5208rem + 9.9826vw, 12.5rem);
    /* the tablet frame sets the two sub lines as separate paragraphs 37px
       apart; as one wrapped block that is an effective 1.53 line-height */
    --lh-hero-sub:  1.53;
    --lh-title-wide: 1.35;

    --section-pt:       clamp(7.5rem, 3.9169rem + 7.4653vw, 12.875rem);
    --gap-title-list:   clamp(3.725rem, 1.875rem + 3.8542vw, 6.5rem);
    --gap-list-row:     clamp(2.5rem, 0.625rem + 3.9063vw, 5.3125rem);
    --gap-icon-text:    clamp(1.25rem, -0.375rem + 3.3854vw, 3.6875rem);
    --gap-list-form:    clamp(2.75rem, 0.0831rem + 5.5556vw, 6.75rem);
    --gap-form-photo:   7.5rem;              /* 120px on the tablet frame */
    --gap-photo-title:  3.75rem;             /* 60px  on the tablet frame */
    --gap-title-items:  clamp(3.75rem, -2rem + 11.9792vw, 12.375rem);
    --gap-item-title-text: clamp(1.25rem, 0.8333rem + 0.8681vw, 1.875rem);
    --gap-item-text-rule:  clamp(2.6875rem, 2.2294rem + 0.9549vw, 3.375rem);
    --gap-rule-item:       clamp(2.8125rem, 2.4794rem + 0.6944vw, 3.3125rem);
    --gap-items-cta:       clamp(7.5rem, 5rem + 5.2083vw, 11.25rem);

    --cta-pt:       clamp(7.5rem, 3.0419rem + 9.2882vw, 14.1875rem);
    --gap-cta-form: clamp(3.75rem, -0.5419rem + 8.9410vw, 10.1875rem);
    --cta-pb:       clamp(4.875rem, 0.6669rem + 8.7674vw, 11.1875rem);

    --badge-size:   clamp(14.75rem, 7.0833rem + 15.9722vw, 26.25rem);
    --icon-size:    clamp(2.5rem, 0.8333rem + 3.4722vw, 5rem);
    --input-pb:     clamp(0.6rem, 0.3169rem + 0.5903vw, 1.025rem);
    --gap-rule-btn: clamp(1.5625rem, 0.1044rem + 3.0382vw, 3.75rem);
    --button-h:     clamp(3.75rem, 3.0831rem + 1.3889vw, 4.75rem);
    --form-w:       clamp(20.25rem, 7.0440rem + 27.5174vw, 40.0625rem);
    --logo-w:       clamp(14.75rem, 13.3333rem + 2.9514vw, 16.875rem);
    --footer-pt:    clamp(1.8125rem, 2.2294rem + -0.3472vw, 2.0625rem);

    --w-h1:         clamp(35.5rem, -11.9125rem + 98.7847vw, 106.625rem);
    --w-hero-sub:   clamp(42.4375rem, 48.1042rem + -0.7378vw, 48.75rem);
    --w-hear-title: clamp(25.25rem, 6.9028rem + 38.2378vw, 55.8125rem);
    --w-why-title:  clamp(34.1875rem, 19.1701rem + 30.0347vw, 55.8125rem);
    --w-cta-title:  clamp(28.6875rem, 10.2292rem + 38.4549vw, 55.8125rem);
    --w-cta-note:   clamp(14.75rem, 1.25rem + 28.125vw, 35rem);

    /* the wider frames do align to their gutter */
    --nudge-h1: 0rem;
    --nudge-sub: 0rem;
    --nudge-hero-form: 0rem;
    --nudge-mid-form: 0rem;
    --nudge-hear-title: clamp(-1.35rem, -2.25rem + 1.875vw, 0rem);
    --nudge-cta-title: clamp(-0.769rem, -0.2688rem + -0.4167vw, -0.469rem);
    /* the footer keeps a 100px gutter on the desktop frame, not 150px */
    --footer-gutter: clamp(2.875rem, 0.625rem + 4.6875vw, 6.25rem);
    --w-item-text: clamp(37.75rem, 31.4169rem + 13.1944vw, 47.25rem);
    --nav-gap-2: clamp(2.275rem, 1.3956rem + 1.8316vw, 3.5938rem);
    --nav-extra-1: clamp(0rem, 1.8956rem + -1.5799vw, 1.1375rem);
    --btn-label-nudge: 0rem;
    --photo-bleed: 0rem;      /* the wider frames align it to the gutter */
    --cta-btn-extra: 0.3125rem;
  }
}

/* the desktop grid reassigns what --gap-sub-next separates: at <1024 it is
   sub -> the form/badge row, at >=1024 sub and badge share a row so it
   becomes sub -> form (69px at the 1920 frame). */
@media (min-width: 1024px) {
  :root {
    --gap-sub-next: clamp(2.8125rem, 12.1338rem + -7.7679vw, 7.1625rem);
    /* the mid-page form now sits above the "why" heading rather than the photo */
    --gap-form-why: clamp(6.25rem, -0.8938rem + 11.1607vw, 12.5rem);
    /* the photo starts 98px above the benefit list on the desktop frame */
    --photo-rise: clamp(0rem, -7rem + 10.9375vw, 6.125rem);
    --footer-mt: clamp(0rem, -1.4286rem + 2.2321vw, 1.25rem);
    --lh-hero-sub: 1.5;
    /* the linear 768->1920 measure leaves the h1 one pixel short of fitting
       its first line at 1024, orphaning "easy."; widen through this band */
    --w-h1: clamp(56.25rem, -1.3213rem + 89.9554vw, 106.625rem);
    /* the desktop frame drops the list text below the icon centre line */
    --hear-text-drop: clamp(0rem, -1.0713rem + 1.6741vw, 0.9375rem);
    --nav-rise: -0.394rem;
    --cta-btn-extra: 0rem;
  }
}

/* ------------------------------- reset ---------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-brown-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* keeps "9-18." intact if a device font-size override ever forces a wrap */
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The ring colour flips with the band it sits on: coral would drop to about
   1.8:1 against the muted-brown CTA band. Dark on the light sections, amber
   on the two dark ones — legible on all four (SPEC §8). */
:focus-visible {
  outline: 2px solid var(--focus-ring, var(--c-brown-dark));
  outline-offset: 3px;
}

.hero,
.cta { --focus-ring: var(--c-amber); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* line-break helpers — the frames break these headings differently */
.br-wide { display: none; }
.br-narrow { display: inline; }

@media (min-width: 768px) {
  .br-narrow { display: none; }
}
@media (min-width: 1024px) {
  .br-wide { display: inline; }
}

/* -------------------------------- hero ---------------------------------- */

.hero {
  background: var(--c-brown-dark);
  color: var(--c-white);
  padding-block: var(--hero-pt) var(--hero-pb);
}

.hero__title {
  position: relative;
  inset-inline-start: var(--nudge-h1);
  max-width: var(--w-h1);
  margin-inline: auto;
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-title-wide);
  text-align: center;
}

.hero__title-accent { color: var(--c-amber); }

.hero__body {
  display: grid;
  grid-template-areas:
    "sub"
    "badge"
    "form";
  justify-items: center;
  margin-block-start: var(--gap-h1-sub);
}

.hero__sub {
  grid-area: sub;
  position: relative;
  inset-inline-start: var(--nudge-sub);
  max-width: var(--w-hero-sub);
  margin-block-end: var(--gap-sub-next);
  font-size: var(--fs-hero-sub);
  line-height: var(--lh-hero-sub);
  text-align: center;
}

.badge { grid-area: badge; }

.hero .form {
  grid-area: form;
  position: relative;
  inset-inline-start: var(--nudge-hero-form);
}

.hear .form {
  position: relative;
  inset-inline-start: var(--nudge-mid-form);
}
.hero .badge { margin-block-end: var(--gap-badge-form); }

@media (min-width: 768px) {
  .hero__body {
    grid-template-areas:
      "sub   sub"
      "form  badge";
    grid-template-columns: 1fr auto;
    /* the tablet frame centres the form against the badge, it does not
       bottom-align them (badge 605-841, form 662-783, both centred on ~723) */
    align-items: center;
    column-gap: var(--gutter);
    justify-items: start;
  }
  .hero__sub { justify-self: center; }
  .hero .badge { margin-block-end: 0; }
}

@media (min-width: 1024px) {
  .hero__body {
    grid-template-areas:
      "sub  badge"
      "form badge";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .hero__sub {
    justify-self: start;
    text-align: start;
  }
  /* the desktop frame sets the h1 in SemiBold; the other two use Medium */
  .hero__title { font-weight: 600; }
}

/* -------------------------------- badge --------------------------------- */

.badge {
  position: relative;
  width: var(--badge-size);
  height: var(--badge-size);
  background: var(--c-amber);
  border-radius: 20.34%;          /* 48/236 == 85.424/420 */
  color: var(--c-brown-dark);
  text-align: center;
}

/* children sit at percentages of the badge box, so it scales as one unit */
.badge__eyebrow {
  position: absolute;
  inset-inline: 0;
  top: 5.93%;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-indent: var(--ls-eyebrow);
}

.badge__art {
  position: absolute;
  top: 10.8%;
  left: 10.8%;
  width: 78.4%;
  height: auto;
}

.badge__title {
  position: absolute;
  inset-inline: 0;
  top: 37.4%;
  font-size: var(--fs-badge);
  font-weight: 500;
  /* the frames set the two words almost solid (30.7px at 30px, 54px at 52px);
     1.8 opened the pair by 23px on the phone frame and 39px on the desktop */
  line-height: 1.03;
  letter-spacing: var(--ls-badge);
  text-indent: var(--ls-badge);   /* re-centre: tracking adds trailing space */
  text-transform: uppercase;
}

.badge__underline {
  position: absolute;
  top: 89.6%;
  left: 50%;
  translate: -50% 0;
  width: 33.3%;
  height: auto;
}

/* -------------------------------- forms --------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--form-w);
}

.form__input {
  width: 100%;
  padding: 0 0 var(--input-pb);
  border: 0;
  border-bottom: var(--hairline) solid currentColor;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.form__input::placeholder {
  color: inherit;
  opacity: 1;
}

.form__button {
  width: 100%;
  min-height: var(--button-h);
  margin-block-start: var(--gap-rule-btn);
  padding: 0.5em 1em;
  border: 0;
  border-radius: 0;
  background: var(--c-coral);
  color: var(--c-white);
  font: inherit;
  font-size: var(--fs-button);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-indent: var(--btn-label-nudge);
  cursor: pointer;
}

.form--on-dark { color: var(--c-white); }
.form--on-light { color: var(--c-brown-dark); }

/* submission feedback — copy comes from the MailerLite form's success body */
.form__success p { font-size: var(--fs-body); }

.form__success p + p { margin-block-start: var(--gap-item-title-text); }

.form__success-title {
  font-size: var(--fs-item-title);
  font-weight: 600;
  line-height: var(--lh-title);
}

.form__error {
  margin-block-start: var(--gap-item-title-text);
  font-size: var(--fs-body);
  font-weight: 500;
}

.form--on-light .form__error { color: var(--c-coral); }
.form--on-dark .form__error { color: var(--c-amber); }

[hidden] { display: none !important; }

@media (hover: hover) {
  .form__button:hover { background: #d94a43; }   /* coral, ~10% darker */
  .footer__link:hover { text-decoration: underline; }
}

/* --------------------------- what you'll hear --------------------------- */

.section-title {
  font-size: var(--fs-section);
  font-weight: 500;
  line-height: var(--lh-title);
  text-align: center;
}

.hear { padding-block-start: var(--section-pt); }

.hear__title {
  position: relative;
  inset-inline-start: var(--nudge-hear-title);
  max-width: var(--w-hear-title);
  margin-inline: auto;
  color: var(--c-gold);
}

.hear__list {
  display: grid;
  row-gap: var(--gap-list-row);
  margin-block-start: var(--gap-title-list);
}

.hear__item {
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  align-items: center;
  column-gap: var(--gap-icon-text);
}

.hear__icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.hear__text {
  margin-block-start: var(--hear-text-drop);
  font-size: var(--fs-hear);
  /* Four strings wrap one word later than the phone frame draws them, and no
     single measure fixes it: list item 1 needs a column >=257px while item 2
     must break below 211px. Balancing lands on the frame's own break points
     at 390 and, unlike a forced <br>, still reflows to one line as the
     column grows - so the 391-767 band stays clean without a new breakpoint. */
  text-wrap: balance;
}

.hear .form { margin-block-start: var(--gap-list-form); }

@media (min-width: 768px) {
  /* Icons sit at x=107 on the tablet frame and x=430 on the desktop one,
     i.e. 61px and 280px in from the container edge. */
  .hear__list { margin-inline-start: clamp(3.8125rem, -5.3125rem + 19.0104vw, 17.5rem); }

  /* The mid-page form is simply centred in both wide frames
     (x 222-546 at 768, x 640-1281 at 1920). */
  .hear .form { margin-inline: auto; }
}

/* --------------------------- why parents need --------------------------- */

.why__inner {
  display: grid;
  grid-template-areas:
    "photo"
    "title"
    "list";
  justify-items: center;
}

.photo {
  grid-area: photo;
  /* follow the container through the whole mobile/tablet band rather than
     stalling at the phone asset's intrinsic 333px */
  width: calc(100% + var(--photo-bleed));
  margin-inline-start: calc(0rem - var(--photo-bleed));
  margin-block-start: var(--gap-form-photo);
  margin-block-end: var(--gap-photo-title);
}

.photo__img { width: 100%; }

.why__title {
  grid-area: title;
  max-width: var(--w-why-title);
  margin-block-end: var(--gap-title-items);
  color: var(--c-gold);
}

.why__list {
  grid-area: list;
  width: 100%;
}

.why__item + .why__item {
  margin-block-start: var(--gap-rule-item);
  padding-block-start: var(--gap-item-text-rule);
  border-block-start: var(--hairline) solid currentColor;
}

.why__item-title {
  font-size: var(--fs-item-title);
  font-weight: 600;
  line-height: var(--lh-title);
  text-wrap: balance;          /* see .hear__text */
}

.why__item-text {
  max-width: var(--w-item-text);
  margin-block-start: var(--gap-item-title-text);
  font-size: var(--fs-body);
}

@media (min-width: 1024px) {
  .why__inner {
    grid-template-areas:
      "title title"
      "list  photo";
    /* Percentages of the container, not an auto track: an auto track keeps
       the desktop image's intrinsic 640px at every width, which starved the
       text column to 177px at 1024. On the desktop frame the benefit column
       runs 150->933 (783 of 1620 = 48.33%) and the photo is flush to the
       right edge, 1131->1771 (640 = 39.51%), leaving a 198px gutter. */
    grid-template-columns: 48.33% 39.51%;
    justify-content: space-between;
    align-items: start;
    justify-items: start;
  }
  .why__title {
    justify-self: center;
    margin-block-start: var(--gap-form-why);
  }
  .photo {
    grid-area: photo;
    width: 100%;
    margin-block: calc(0rem - var(--photo-rise)) 0;
    justify-self: stretch;
  }
  .why__list { width: 100%; }
}

/* ------------------------------ final CTA ------------------------------- */

.cta {
  margin-block-start: var(--gap-items-cta);
  background: var(--c-brown-mid);
  color: var(--c-white);
  padding-block: var(--cta-pt) var(--cta-pb);
}

.cta__inner {
  display: grid;
  justify-items: center;
}

.cta__title {
  position: relative;
  inset-inline-start: var(--nudge-cta-title);
  max-width: var(--w-cta-title);
  margin-block-end: var(--gap-cta-form);
  color: var(--c-amber);
}

.cta__form { margin-block-end: var(--gap-form-note); }

.cta__note {
  justify-self: start;          /* the phone frame runs it flush to the gutter */
  max-width: var(--w-cta-note);
  font-size: var(--fs-body);
}

@media (min-width: 768px) {
  .cta__inner {
    /* column 1 is the form at its own width; the note column starts 115px
       after it on the tablet frame and 339px after it on the desktop one */
    grid-template-columns: var(--form-w) minmax(0, 1fr);
    column-gap: clamp(7.1875rem, -2.1456rem + 19.4444vw, 21.1875rem);
    align-items: start;
    justify-items: start;
  }
  .cta__title { grid-column: 1 / -1; justify-self: center; }
  .cta__form { margin-block-end: 0; }
}

/* -------------------------------- footer -------------------------------- */

.footer {
  background: var(--c-white);
  color: var(--c-brown-dark);
  padding-block: var(--footer-pt);
  /* the desktop frame leaves a 20px cream band above the footer; the phone
     and tablet frames butt the footer straight onto the CTA band */
  margin-block-start: var(--footer-mt, 0);
}

.footer .container { padding-inline: var(--footer-gutter); }

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--footer-pt) var(--gutter);
}

.footer__logo {
  width: var(--logo-w);
  height: auto;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  inset-block-start: var(--nav-rise);
  gap: 0.5rem var(--nav-gap-2);
}

.footer__link:nth-child(2) { margin-inline-start: var(--nav-extra-1); }

.footer__link {
  color: inherit;
  font-size: var(--fs-footer);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;      /* "Terms & Conditions" never splits mid-label */
}

@media (min-width: 768px) {
  /* the CTA form alone carries a wider hairline->button gap on the tablet
     frame (31px) than the hero and mid forms (26px); the desktop frame does
     not, so --cta-btn-extra drops back to 0 at 1024 */
  .cta__form .form__button {
    margin-block-start: calc(var(--gap-rule-btn) + var(--cta-btn-extra, 0rem));
  }
}