/* ==========================================================================
   Reach Your Kid — sales page /reach-your-kid/

   Sources, in order of precedence (brief Upgrading campiagn/pages/ui/
   prompt--code--sales-page.md §2):
   - words and the look of every section: the 390 frame 812:2 of Figma
     X7hyzMm0w9LAz6yEDrPTzX (values below are its px, written in rem);
   - layout and grid from 768 and 1024, only in the five sections the founder
     changed: hero, offer, Who's this for, What's inside, Can I actually do
     this? (tablet 973:499 at 820, desktop 973:3 at 1440);
   - everything else from 768 up is derived from the phone (register п. 17).
   Founder's answers of 16.10.2026: register "Відповіді засновника".

   Rules of the site: no motion of any kind, state changes are instant;
   media queries only at min-width 768px and 1024px; layout in relative
   units, px only for borders, radii, shadows and hairlines.
   Fluid values use two ranges (HANDOFF §3): 390 → 820 in the base rules,
   820 → 1440 from 768 up, so each lands on the frame value at 390, 820, 1440.
   ========================================================================== */

/* ------------------------------- fonts ---------------------------------- */
/* The three weights the page uses (Light is not loaded: "62%" is an SVG). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-semibold.woff2") format("woff2"); }

/* ------------------------------- tokens --------------------------------- */
:root {
  /* colours (Figma 812:2) */
  --c-cream: #fff3e0;
  --c-white: #fff;
  --c-ink: #341f12;
  --c-ink-68: rgb(52 31 18 / .68);   /* muted text; the lightest the brief allows */
  --c-ink-55: rgb(52 31 18 / .55);   /* chevrons */
  --c-ink-12: rgb(52 31 18 / .12);   /* dividers */
  --c-mid: #705747;                  /* chapter numbers */
  --c-sample: #6c5344;               /* sample card: #705747 a shade darker so amber text reaches 4.5:1 (register п. 16) */
  --c-amber: #fbc672;
  --c-gold: #997024;
  --c-coral: #f3574f;
  --c-btn-text: #21140d;             /* dark text on coral, 5.37:1 (founder 16.10) */
  --c-cream-94: rgb(255 243 224 / .94);
  --sh-sticky: 0 2px 10px rgb(52 31 18 / .08);
  --focus: var(--c-ink);

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

  /* type: phone values; the fluid ones grow toward the tablet frame */
  --fs-h2: clamp(1.625rem, 1.5233rem + 0.9302vw, 2rem);        /* 28 → 32 */
  --fs-title: clamp(1.625rem, 1.0698rem + 2.7907vw, 2.5rem);    /* 28 → 40 */
  --fs-lead: clamp(1.0625rem, 1.0683rem + 0.2326vw, 1.1875rem); /* 18 → 19 */
  --fs-body: 1rem;     /* 16 */
  --fs-label: .875rem; /* 14 */
  --fs-small: .8125rem;/* 13 */

  /* space */
  --gutter: clamp(1.5rem, -0.2143rem + 8.5714vw, 1.875rem);     /* 24 at 320 → 30 at 390 */
  --pad: 2.6875rem;    /* 43: every section's top and bottom */
  --gap-h2: 1.5625rem; /* 25: section title to its content */
  --gap-block: 2.1875rem; /* 35: between blocks inside a section */
  --container: 100%;
  --panel-h: 4.5625rem;   /* 73: the panel at full height (812:830) */
  --bar-h: 4.125rem;      /* 66: the phone's bottom bar (812:821) */
}
@media (min-width: 768px) {
  :root {
    --fs-h2: clamp(2rem, 1.6694rem + 0.6452vw, 2.25rem);        /* 32 → 36 */
    --fs-title: clamp(2.5rem, 1.5081rem + 1.9355vw, 3.25rem);   /* 40 → 52 */
    --fs-lead: clamp(1.1875rem, 1.1048rem + 0.1613vw, 1.25rem); /* 19 → 20 */
    --gutter: 2.5rem;    /* 40, tablet frame */
    --pad: clamp(3rem, 1.8425rem + 2.2581vw, 3.75rem); /* 48 at 820 → 60 at 1440 (frame-stack.txt) */
    --gap-h2: 2rem;
    --gap-block: 2.5rem;
    --panel-h: 4rem;     /* 64, 973:1293 */
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 3rem;
    --container: 66.5rem; /* 1064: the desktop frame's content, x 188–1252 */
    --panel-h: 4.25rem;   /* 68, 973:151 */
  }
}

/* -------------------------------- base ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* the checkout script and every toggle rely on it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--panel-h) + .5rem); }
body {
  margin: 0;
  padding-top: var(--panel-h);
  background: var(--c-cream);
  color: var(--c-ink);
  font: 400 var(--fs-body)/1.55 var(--font);
  overflow-wrap: break-word;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
strong { font-weight: 600; }
.nw { white-space: nowrap; }   /* a hyphenated compound kept whole, as Figma never breaks at a hyphen */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.band-dark { --focus: var(--c-amber); }
/* a line break that only exists on the phone, where the frame draws it */
@media (min-width: 768px) { .br-m { display: none; } }
/* … and one the tablet frame keeps too (973:887), gone from 1024 */
@media (min-width: 1024px) { .br-mt { display: none; } }
/* A line of the 390 frame. At 390 every .ln fits on its line (where the
   frame itself wraps a line, the markup splits it at the frame's break), so
   the page breaks exactly where Figma does; on a narrower phone a line that no
   longer fits wraps evenly instead of leaving one word alone before the
   frame's break (HANDOFF §3, review r1 item 4).
   .ln--m: a phone-only line that runs on from 768.
   .ln-t: a break only the tablet frame draws (973:614, 973:702, 973:719), 768–1023. */
.ln { display: block; text-wrap: balance; }
/* From 768 the frames end no paragraph on a lone word; the browser's "pretty"
   wrapping does the same where it can (review r2 m16). At 390 nothing changes:
   the frame's own wraps rule there. */
@media (min-width: 768px) { p, li { text-wrap: pretty; } }
/* … except where the frame itself ends on one word: 973:887 breaks
   "…repair after a / blow-up", which "pretty" would undo (review r3 n5) */
.wrap-plain { text-wrap: wrap; }
@media (min-width: 768px) { .ln--m { display: inline; } }
.ln-t { display: inline; }
@media (min-width: 768px) { .ln-t { display: block; } }
@media (min-width: 1024px) { .ln-t { display: inline; } }
/* .ln-nt: a break the phone and desktop frames draw and the tablet does not (812:247, 973:48 / 973:735) */
.ln-nt { display: block; text-wrap: balance; }
@media (min-width: 768px) { .ln-nt { display: inline; } }
@media (min-width: 1024px) { .ln-nt { display: block; } }

/* layout helpers */
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) {
  .wrap--text { max-width: calc(42.5rem + 2 * var(--gutter)); }   /* 680 text column (QA v5) */
}
@media (min-width: 1024px) {
  .wrap--inside { max-width: calc(53rem + 2 * var(--gutter)); }   /* 848: What's inside, 973:377 */
}
section { padding-block: var(--pad); }
/* The space between sections on the tablet and desktop frames, measured
   content to content in their overviews (review r2 M2, frame-stack.txt):
   about 48 per side at 820 and 60 at 1440 (--pad), with these departures.
   The offer and Can I keep theirs in their own blocks. */
@media (min-width: 768px) {
  .quotes { padding-top: 1.4375rem; padding-bottom: calc(var(--pad) + 1.5625rem); }   /* 28 under the hero, 72 to the band */
  .stat { padding-top: calc(var(--pad) + 1.125rem); padding-bottom: calc(var(--pad) + .875rem); }   /* 68 / 64 inside the band (review r3 n3) */
  .listen { padding-top: calc(var(--pad) + .625rem); }                               /* 67 under the band */
  .reviews { padding-top: calc(var(--pad) + 1.625rem); padding-bottom: calc(var(--pad) + 1.0625rem); }   /* 79 / 64 inside the band (review r3 n8) */
  .inside { padding-top: calc(var(--pad) + 2.25rem); }                               /* 90 under the band */
  .about { padding-top: calc(var(--pad) + 1.75rem); }                                /* 133 after Can I */
  /* the white band of "Start with" even inside, as the frame's own band
     (53 / 54); the rest of the 115 after Why now sits under Why now, and the
     box keeps its distance (.box, below) (review r3 n13) */
  .split--why { padding-bottom: calc(var(--pad) + .9375rem); }
  .next { padding-top: calc(var(--pad) - .125rem); padding-bottom: calc(var(--pad) + .3125rem); }
  .glimpse { padding-top: calc(var(--pad) - .4375rem); }                             /* 92 after the offer */
}
@media (min-width: 1024px) {
  .quotes { padding-block: var(--pad); }                                              /* 63 / 58 */
  .stat { padding-top: calc(var(--pad) + .3125rem); padding-bottom: var(--pad); }     /* 67 / 61 */
  .listen { padding-top: calc(var(--pad) + 1.5rem); }                                 /* 88 under the band: the frame's 59 plus half (founder 17.10) */
  .glimpse { padding-top: calc(var(--pad) + .1875rem); }                              /* 128 after the offer */
  .who { padding-top: calc(var(--pad) - .5rem); padding-bottom: calc(var(--pad) + 4.25rem); }   /* 117 after the glimpse, 128 to the band */
  .reviews { padding-top: calc(var(--pad) + 2.375rem); padding-bottom: calc(var(--pad) + 3.0625rem); }   /* the frame's 88 / 93, plus 16 (founder 17.10) */
  .inside { padding-top: calc(var(--pad) + 1.375rem); }                               /* 88 under the band */
  .about { padding-top: calc(var(--pad) - .3125rem); }                                /* 125 after Can I */
  .split--why { padding-bottom: calc(var(--pad) + 2.4375rem); }                       /* with the band's 71: 177 after Why now */
  .next { padding-top: calc(var(--pad) + .25rem); padding-bottom: calc(var(--pad) + .625rem); }   /* 71 / 70 inside the band */
  .faq { padding-top: calc(var(--pad) - 2.5rem); }                                    /* 90 after the box */
}

/* shared type */
.h2 {
  font-size: var(--fs-h2); font-weight: 500; line-height: 1.2;
  color: var(--c-gold); text-align: center; text-wrap: balance;
  margin-bottom: var(--gap-h2);
}
.h2--amber { color: var(--c-amber); }
#who .h2, #inside .h2, #about .h2 { line-height: 1.3; }   /* 812:101, 843:2180, 874:243 are 130 % */
.title { font-size: var(--fs-title); font-weight: 500; line-height: 1.2; color: var(--c-gold); }
.descriptor { font-size: var(--fs-lead); line-height: 1.3; }
.small { font-size: var(--fs-small); line-height: 1.65; color: var(--c-ink-68); }
.label { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.sub { font-size: var(--fs-lead); line-height: 1.3; text-align: center; margin-top: calc(.9375rem - var(--gap-h2)); margin-bottom: var(--gap-block); }

/* checks: gold tick, 24 indent (812:464) */
.checks li { position: relative; padding-left: 1.5rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .5625rem; width: .75rem; height: .625rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23997024' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* chevrons of the accordions (812:119: a 10 px square turned 45°, two sides drawn) */
.chev { width: .875rem; height: .875rem; flex: none; fill: none; stroke: var(--c-ink-55); stroke-width: 1.25; }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

/* ------------------------------- buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3.125rem; padding: 0 1.375rem; border-radius: 25px;
  background: var(--c-coral); color: var(--c-btn-text);
  font-size: 1rem; font-weight: 500; line-height: 1.3; text-decoration: none; text-align: center;
}
.btn--buy { width: 100%; }
.btn__arrow { width: 1.125rem; height: .9375rem; flex: none; }
.btn--sm {
  position: relative; min-height: 2.25rem; min-width: 5.8125rem; padding: 0 1rem;
  font-size: .875rem; line-height: 1;
}
.btn--sm::after { content: ""; position: absolute; inset: -.25rem 0; } /* 44 px target, 36 px look (QA v5) */

/* the quiet action "Listen to the free chapter" (812:518): as tall as its
   icon, as in the frame; the 44 px target is drawn around it */
.quiet {
  position: relative; display: flex; width: fit-content; align-items: center; gap: .5rem;
  font-weight: 600; line-height: 1.3; text-decoration: underline; text-underline-offset: .15em;
  text-wrap: balance;   /* "Listen to the / free chapter" at 320, not "…free / chapter" */
}
.quiet::after { content: ""; position: absolute; z-index: 1; inset: -.6875rem -.25rem; }   /* over the next chapter row it reaches into */
.quiet__icon { width: 1.375rem; height: 1.375rem; flex: none; }
.quiet--small { font-size: .875rem; gap: .9375rem; }
.quiet--small .quiet__icon { width: 1.75rem; height: 1.75rem; }

/* guarantee lines with an icon (812:511, 812:800) */
.assure { display: flex; gap: .8125rem; align-items: flex-start; }
.assure__icon { width: .75rem; height: .9375rem; flex: none; margin-top: .25rem; }
.assure strong { color: var(--c-ink); }
.assure--center { justify-content: center; text-align: center; }

/* -------------------------------- panel --------------------------------- */
/* Fixed, so showing, shrinking or hiding it never moves the page (no CLS). */
.panel {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  background: var(--c-white);
}
.panel[data-mode="compact"], .panel[data-mode="price"] { box-shadow: var(--sh-sticky); }
.panel__in {
  display: flex; align-items: center; gap: .5rem 1rem;
  min-height: var(--panel-h); padding: .5rem var(--gutter);
}
.panel__name { font-weight: 500; line-height: 1.3; }
.panel__desc { font-size: .75rem; line-height: 1.35; }
.panel__price { display: none; font-size: .8125rem; line-height: 1.3; }
.panel__price-l1 { font-weight: 500; }
.panel__nav { display: none; }
.panel .btn--sm { margin-left: auto; flex: none; }

/* phone: the name sits over the descriptor (812:836), then compact without it (812:815) */
/* Below 390 the descriptor, the gap and the button shrink with the viewport so the
   frame's two lines still fit at 320 (HANDOFF §3: no breakpoint under 390). */
.panel__in { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name btn" "desc btn"; column-gap: clamp(.75rem, -.3929rem + 5.7143vw, 1rem); row-gap: .1875rem; }
.panel__name { grid-area: name; }
.panel__desc { grid-area: desc; max-width: 12.5rem; font-size: clamp(.6875rem, .4018rem + 1.4286vw, .75rem); }   /* 11 at 320 → 12 at 390 */
.panel .btn--sm { grid-area: btn; min-width: clamp(5.125rem, 1.982rem + 15.7143vw, 5.8125rem); padding-inline: clamp(.625rem, -1.0893rem + 8.5714vw, 1rem); }   /* 82 → 93 */
/* compact (812:815): one row, the name centred on the button */
.panel[data-mode="compact"] .panel__in { min-height: 3.5rem; grid-template-areas: "name btn"; grid-template-rows: auto; }
.panel[data-mode="compact"] .panel__desc { display: none; }

@media (min-width: 768px) {
  .panel__in { display: flex; padding-block: 0; column-gap: clamp(.75rem, .254rem + .9677vw, 1.125rem); }   /* 973:1293 / 973:151: button 40 from the edge; descriptor 12 after the name at 820, 18 at 1440 */
  .panel__desc { max-width: none; font-size: .8125rem; }
  .panel .btn--sm { min-width: 5.8125rem; padding-inline: 1rem; }
  .panel[data-mode="price"] .panel__desc { display: none; }
  .panel[data-mode="price"] .panel__price { display: block; margin-left: auto; }
  .panel[data-mode="price"] .btn--sm { margin-left: 0; }
}
@media (min-width: 1024px) {
  .panel__in { padding-inline: 5rem; }
  .panel__nav { display: flex; gap: .5rem; margin-left: auto; }
  .panel__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding-inline: .5rem; font-size: .875rem; font-weight: 500; text-decoration: none; }
  .panel[data-mode="price"] .panel__price { margin-left: 2.5rem; }
  .panel .btn--sm { margin-left: 0; }   /* 973:151: "FAQ" ends 26 px before the button */
  .panel[data-mode="price"] .panel__nav { margin-left: auto; }
}

/* ---------------------------------- bar --------------------------------- */
.bar {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--bar-h); padding: .5rem var(--gutter);
  background: var(--c-white); box-shadow: var(--sh-sticky);
}
.bar__l1 { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.2; }
.bar__l2 { display: block; font-size: .75rem; line-height: 1.3; color: var(--c-ink-68); }
@media (min-width: 768px) { .bar { display: none !important; } }

/* --------------------------------- hero --------------------------------- */
/* The poster: one box per range, the title placed in % of it and sized in cqw,
   so within a range the composition only scales (brief §5.2). */
.hero {
  position: relative; padding: 0; overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 4 / 5;                       /* 390 × 487.5, 812:406 */
  background: var(--c-ink);
}
.hero picture, .hero__img { width: 100%; height: 100%; }
.hero__img { object-fit: cover; }
.hero__title {
  position: absolute; left: 0; right: 0; top: 10.9%;   /* 53 of 487 */
  margin: 0; padding: 0 1rem;
  font-size: clamp(1rem, 7.18cqw, 4rem);               /* 28 at 390 */
  font-weight: 500; line-height: 1.2; color: var(--c-amber); text-align: center;
  white-space: nowrap;
}
.hero__line { display: block; }
@media (min-width: 768px) {
  .hero { aspect-ratio: 41 / 26; }                     /* 820 × 520, 973:874 */
  .hero__title { top: 61.2%; font-size: clamp(1rem, 3.41cqw, 4rem); } /* 318 of 520; 28 at 820 */
  .hero__line { display: inline; }
}
@media (min-width: 1024px) {
  /* 1440 × 560, 973:143. Its "Gradient" layer (973:149) has its fill switched off. */
  .hero { aspect-ratio: 18 / 7; }
  .hero__title { top: 61.1%; font-size: clamp(1rem, 2.5cqw, 4rem); } /* 342 of 560; 36 at 1440 */
}

/* -------------------------------- quotes -------------------------------- */
/* Three lines on every phone (founder 19.10). Its longest line is 281 at 16 px, and the 282 box of
   the frame left an Android phone, which draws Poppins a little wider, a fourth line. So the box
   has room to spare, and below 356 the type steps down to 14.5 at 320, as "Start with" does, so the
   line keeps at least 7 % of room. */
.quotes__intro { max-width: 19rem; margin: 0 auto 1.5625rem; font-size: clamp(.90625rem, .0729rem + 4.1667vw, 1rem); text-align: center; line-height: 1.5; text-wrap: balance; }
.bubbles { display: grid; gap: .75rem; max-width: 30rem; margin-inline: auto; }
.bubble { display: flex; align-items: flex-end; gap: .4375rem; }
.bubble__avatar { width: 2rem; height: 2rem; flex: none; }
.bubble p {
  max-width: 18.5rem;                               /* the text box of 874:45 (259) plus padding */
  background: var(--c-white); border-radius: 16px;
  padding: .875rem 1rem .8125rem;
  letter-spacing: -.01em; line-height: 1.55;
}
@media (min-width: 768px) {
  /* 973:501 / 973:85 (founder 17.10): two columns of bubbles, all one size,
     read row by row; the phone's line breaks run on. The frames' eighth quote
     is not on the phone frame, so the seventh sits alone, centred. */
  .quotes__intro { max-width: 29.3125rem; margin-bottom: 2rem; }            /* 973:142: 469 wide, 32 above */
  .bubbles { max-width: 53rem; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1rem; }   /* 973:85: 848, 16 apart */
  /* 768–797: the grid takes up to 15 of each gutter's 40, so the sixth quote
     keeps the two lines it has from 798, instead of a third line that every
     bubble then carried; from 928 the 848 grid sits centred (review r3 n1) */
  .bubbles { margin-inline: max(clamp(-.9375rem, (100vw - 49.875rem) / 2, 0rem), (100% - 53rem) / 2); }
  .bubble p { flex: 1; align-self: stretch; max-width: none; }
  .bubble .ln { display: inline; }
  /* the seventh, alone: centred on its white bubble, not with its avatar, so
     half the avatar and its gap to the left (review r3 n2) */
  .bubble:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); position: relative; left: -1.21875rem; }
}

/* --------------------------------- stat --------------------------------- */
.band-dark { background: var(--c-ink); color: var(--c-cream); }
.stat { text-align: center; }
.stat__title { font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.stat__number { margin-top: 3.375rem; }                         /* title end → glyph top, 812:434 */
.stat__number svg { width: 13.5rem; height: auto; aspect-ratio: 216 / 90; margin-inline: auto; color: var(--c-amber); }
.stat__lead { margin-top: 1.9375rem; font-size: 1.125rem; line-height: 1.5; color: var(--c-cream-94); }
.stat__note { margin-top: 3.125rem; font-size: .8125rem; line-height: 1.65; }
.stat__source { position: relative; text-decoration: underline; text-underline-offset: .15em; }
.stat__source::after { content: ""; position: absolute; inset: -.75rem -.5rem; }   /* 44 px target */
.stat__full { max-width: 22rem; margin: .5rem auto 0; font-size: .8125rem; line-height: 1.65; color: var(--c-cream-94); }
@media (min-width: 768px) { .stat__number svg { width: 15.5rem; } }
@media (min-width: 1024px) { .stat__number svg { width: 17.5rem; } }

/* -------------------------------- listen -------------------------------- */
.pull { font-size: 1.25rem; font-weight: 600; line-height: 1.3; text-align: center; text-wrap: balance; margin-bottom: 1.5625rem; }
@media (min-width: 768px) { .pull { margin-bottom: 2.25rem; } }   /* 36, 44 % more than the phone's 25 (founder 17.10) */
.prose p + p { margin-top: 1.53125rem; }                        /* 812:90: paragraphs 24.5 apart as drawn (spacing 24 plus Figma's rounding) */

/* --------------------------------- offer -------------------------------- */
.offer { padding-top: 0; }
.offer__visual img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.offer__head { padding: var(--pad) var(--gutter) 0; text-align: center; }
.offer__head .descriptor { margin-top: .9375rem; }
.tagline { margin-top: .25rem; font-size: .8125rem; line-height: 1.65; color: var(--c-ink-68); }
.offer__body { padding: var(--gap-block) var(--gutter) 0; }
.offer__body .label { margin-bottom: .9375rem; line-height: 1.3125rem; }
.offer__body .checks li + li { margin-top: .5rem; }
.price-card {
  margin-top: var(--gap-block); padding: 1.25rem; border-radius: 16px; background: var(--c-white);
}
.price-card__big { font-size: clamp(1.5rem, .3571rem + 5.7143vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; }   /* 28 at 390; 24 at 320, so it stays one line */
/* The frame's text boxes (812:495 240, 812:497 240, 812:511 230 wide) set its
   line breaks at 390; past 390 they grow with the card, and from 768 the card
   text takes the card's whole width (973:941, 973:176). */
.price-card__terms { max-width: max(15rem, calc(15rem + 100vw - 24.375rem)); margin-top: .9375rem; line-height: 1.65; }
.price-card__early { max-width: max(15rem, calc(15rem + 100vw - 24.375rem)); margin-top: .25rem; }
.price-card .btn { margin-top: 1.5625rem; }
.price-card .assure { margin-top: .75rem; padding-inline: .3125rem 0; }
.price-card .assure span { max-width: max(14.375rem, calc(14.375rem + 100vw - 24.375rem)); }
.price-card .quiet { margin-top: 1.1875rem; }
.offer__head, .offer__body { max-width: calc(30rem + 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 768px) {
  /* 973:887: visual 300 | text 404, gap 36, in the 740 column */
  .offer { padding-top: var(--pad); }
  .offer__in {
    max-width: calc(46.25rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: 37.5fr 50.5fr; column-gap: 4.5%;
    grid-template-areas: "visual head" "visual body"; align-items: start;
  }
  .offer__visual { grid-area: visual; }
  .offer__visual img { aspect-ratio: 4 / 5; border-radius: 20px; }
  .offer__head { grid-area: head; max-width: none; margin-inline: 0; padding: 0; text-align: left; }
  .offer__body { grid-area: body; max-width: none; margin-inline: 0; padding: 1.625rem 0 0; }
  /* the card copy in the frame's sizes (973:943–973:968): terms 16/24, the small lines 14/21 */
  .offer__body .label { margin-bottom: .5rem; }                                       /* 31 from the label to the first item */
  /* 973:941: the card 10 under the list, "Founding price" 46 under its top and
     the terms right under the price, as from 1024 (review r3 n4) */
  .price-card { margin-top: .375rem; padding-top: 2.625rem; }
  .price-card__terms { margin-top: .125rem; }
  .price-card .btn { margin-top: 1rem; }                                               /* 32 under the last early line */
  .price-card__terms, .price-card__early, .price-card .assure span { max-width: none; }
  .price-card__terms { line-height: 1.5; }
  .price-card .small { font-size: .875rem; line-height: 1.5; }
  .price-card .assure { padding-bottom: .875rem; border-bottom: 1px solid var(--c-ink-12); }   /* 973:961: the hairline above "Listen…" */
  .price-card .quiet { margin-top: .5625rem; gap: .625rem; font-size: .9375rem; }               /* 973:964: a 28 circle under the hairline */
  .price-card .quiet__icon { width: 1.75rem; height: 1.75rem; }
}
@media (min-width: 1024px) {
  /* 973:159: the title centred over two columns, visual 432 | 523, gap 108 */
  .offer { padding-top: calc(var(--pad) - .4375rem); }                                /* 125 after the listen section */
  .offer__body .label { margin-bottom: .5625rem; }                                     /* 32 */
  .offer__in {
    max-width: calc(var(--container) + 2 * var(--gutter));
    grid-template-columns: 432fr 523fr; column-gap: 10.15%;
    grid-template-areas: "head head" "visual body";
  }
  .offer__head { text-align: center; padding-bottom: 3.25rem; }
  .offer__head .descriptor { margin-top: .5625rem; }
  .offer__head .tagline { margin-top: .125rem; }
  .offer__body { padding-top: 0; }
  .offer__visual img { border-radius: 22px; }
  .price-card { margin-top: 2rem; padding-top: 1.25rem; }
  .price-card__terms { margin-top: .125rem; }                                          /* 973:177: right under the price */
  .price-card .assure { padding-bottom: 0; border-bottom: 0; }   /* no hairline at 1440 */
  .price-card .quiet { margin-top: 2.4375rem; }                  /* 973:164: the circle under the guarantee */
}

/* -------------------------------- glimpse ------------------------------- */
.sample {
  width: min(20.75rem, calc(100% + .125rem));                   /* 332 at x 28 (897:22): 2 px past the gutter on the left */
  margin-left: calc((100% - min(20.75rem, 100% + .125rem)) / 2 - .0625rem);
  padding: 1.8125rem 1.125rem 1.5625rem; border-radius: 16px;
  background: var(--c-sample); color: var(--c-cream); text-align: center;
  --focus: var(--c-amber);
}
.sample__title { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--c-amber); }
.sample__lead { margin-top: 1.875rem; font-size: .8125rem; line-height: 1.65; }
.player {
  display: flex; align-items: center; gap: .625rem;
  margin-top: 1rem; padding: 0 1.0625rem; min-height: 3.125rem;
  border-radius: 999px; background: var(--c-white); color: var(--c-ink);
}
.player__play { position: relative; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; }
.player__play::after { content: ""; position: absolute; inset: -.4375rem; }   /* 44 px target */
.player__play svg { width: 100%; height: 100%; }
.player__track { position: relative; flex: 1; height: 2.75rem; display: flex; align-items: center; }
.player__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px;
  /* the dark part ends under the dot's centre, which runs 5 px in from each end (a 10 px thumb) */
  background: linear-gradient(to right, var(--c-ink) calc(.3125rem + var(--p) * (100% - .625rem)), rgb(0 0 0 / .35) 0);
}
.player__scrub { position: relative; width: 100%; height: 2.75rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.player__scrub::-webkit-slider-runnable-track { height: 2.75rem; background: transparent; }
.player__scrub::-moz-range-track { height: 2.75rem; background: transparent; }
.player__scrub::-webkit-slider-thumb { -webkit-appearance: none; width: .625rem; height: .625rem; margin-top: 1.0625rem; border-radius: 50%; background: var(--c-ink); }
.player__scrub::-moz-range-thumb { width: .625rem; height: .625rem; border: 0; border-radius: 50%; background: var(--c-ink); }
/* a bare line until the sample is started, as 844:2506 draws it (main.js adds .is-started):
   no dot, and no 5 px of dark line under where the dot will sit */
.player:not(.is-started) .player__scrub::-webkit-slider-thumb { visibility: hidden; }
.player:not(.is-started) .player__scrub::-moz-range-thumb { visibility: hidden; }
.player:not(.is-started) .player__track::before { background: rgb(0 0 0 / .35); }
/* One fixed width for every time it shows: Poppins has no tabular figures, so
   "1:11" is 11.7 px and "0:58" 21, and the line beside it grew and shrank by
   up to 9 px as the countdown ran, jogging the dot (founder 17.10). 22 px
   holds the widest, right-aligned as 844:2511. */
.player__time { flex: none; width: 1.375rem; text-align: right; font-size: .625rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sample__read {
  position: relative; margin-top: 1rem; font-size: .8125rem; line-height: 1.65;
  text-decoration: underline; text-underline-offset: .15em;
}
.sample__read::after { content: ""; position: absolute; inset: -.75rem -.5rem; }
.sample__text { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(255 243 224 / .3); text-align: left; font-size: .875rem; line-height: 1.6; }
.sample__text p + p { margin-top: .75rem; }
@media (min-width: 768px) { .sample { width: auto; max-width: 32.5rem; margin-inline: auto; } }

/* ----------------------------- Who's this for --------------------------- */
.who__grid { display: grid; gap: .625rem; }                       /* 897:28 → 897:30 …: 10 */
.who-card:first-child { margin-bottom: .125rem; }                  /* 897:25 → 897:28: 12 */
/* no clipping: the open card's picture keeps its square corners (983:13) */
.who-card { background: var(--c-white); border-radius: 16px; }
.who-card__h { font: inherit; }
.who-card__head {
  display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; align-items: start;
  width: 100%; padding: .625rem .9375rem .8rem;                  /* labels 10 under the card top, 127 tall closed (897:28) */
}
.who-card__label { grid-column: 1; font-weight: 600; line-height: 1.65; }
.who-card__head .chev { grid-column: 2; grid-row: 1; margin: .5rem .25rem 0 0; }   /* 812:119 / 812:198 */
.who-card__quote {
  grid-column: 1 / -1; position: relative; display: block;
  margin-top: .475rem; padding-left: 2rem;
  font-size: 1.125rem; line-height: 1.3;
}
/* Each quote's Figma box (812:117 258, 812:196 250, 812:213 245, 812:230 250,
   812:247 240, plus the 32 indent) sets its breaks at 390; past 390 it grows
   with the card. */
.who-card__quote { --qw: 18.125rem; max-width: max(var(--qw), calc(var(--qw) + 100vw - 24.375rem)); }
.who-card:nth-child(2) .who-card__quote, .who-card:nth-child(4) .who-card__quote { --qw: 17.625rem; }
.who-card:nth-child(3) .who-card__quote { --qw: 17.3125rem; }
.who-card:nth-child(5) .who-card__quote { --qw: 17rem; }
@media (min-width: 768px) { .who-card__quote { max-width: none; } }
.who-card__qmark { position: absolute; left: 0; top: .1875rem; width: 1.1875rem; height: 1rem; }
.who-card__body { padding-top: .375rem; }
.who-card__helps { padding: 0 .9375rem 1rem; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.who-card__media { position: relative; }
.who-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0 0 16px 16px; }   /* the open card's bottom corners, as its top (983:13, founder 19.10) */
/* a link over each tile drawn into the picture, positioned in % of it */
.tile {
  position: absolute; border-radius: 12px;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  min-height: 2.75rem;
}
@media (min-width: 768px) {
  /* 973:596: a 680 column, the picture centred in the open card */
  .who__grid { max-width: 42.5rem; margin-inline: auto; }
  .who-card { border-radius: 14px; }
  .who-card__head { padding: .875rem 1rem; }
  .who-card__label { font-size: .8125rem; line-height: 1.3; }   /* 973:604: 13 / 16.9 */
  /* the quote 10 under the label's ink, as 973:614; the chevron no longer
     sets the label row's height (review r3 n7) */
  .who-card__head .chev { margin-top: .125rem; }
  .who-card__quote { margin-top: .25rem; font-size: 1rem; line-height: 1.45; }   /* 973:614: 16 / 23.2 */
  .who-card__media { max-width: 25rem; margin-inline: auto; }
  .who-card.is-open .who-card__media::before {                  /* 973:596: the picture on a cream panel */
    content: ""; position: absolute; z-index: -1; inset: -.8125rem calc((25rem - 40.5rem) / 2); border-radius: 12px; background: var(--c-cream);
  }
  .who-card__media { isolation: isolate; }
  .who-card__media img { border-radius: 12px; }
  .who-card__body { padding: 0 1rem 1rem; }
  .who-card__helps { padding-inline: 0; }
}
@media (min-width: 1024px) {
  /* 973:4: one panel. The five situations (a 637 column, rows 107 apart, the
     dividers 544 long) join the open one's 535 picture; at 1440 the panel runs
     188–1360, 108 past the content column, an overhang that shrinks to none at
     1024. "What helps:" sits over the picture, in the gap under the heading. */
  #who .h2 { margin-bottom: .8rem; }
  .who__grid {
    max-width: none; gap: 0;
    grid-template-columns: minmax(0, 637fr) minmax(0, 535fr);
    margin-right: calc(-1 * clamp(0rem, -16.6154rem + 25.9615vw, 6.75rem));
  }
  .who-card, .who-card__body { display: contents; }
  /* one white panel under the list and the picture, so below 1440, where the square picture is shorter
     than the five rows, the panel stays a rectangle with white under the picture (review r2 M1) */
  .who__grid::before { content: ""; grid-column: 1 / -1; grid-row: 2 / span 5; border-radius: 16px; background: var(--c-white); }
  .who-card__h { grid-column: 1; position: relative; }
  .who-card:nth-child(1) .who-card__h { grid-row: 2; }
  .who-card:nth-child(2) .who-card__h { grid-row: 3; }
  .who-card:nth-child(3) .who-card__h { grid-row: 4; }
  .who-card:nth-child(4) .who-card__h { grid-row: 5; }
  .who-card:nth-child(5) .who-card__h { grid-row: 6; }
  .who-card:not(:first-child) .who-card__h::before {
    content: ""; position: absolute; left: 0; top: 0; width: 85.4%; height: 1px; background: var(--c-ink-12);
  }
  .who-card__head { position: relative; padding: 1rem 1.25rem .95rem; }
  .who-card__label { font-size: 1rem; line-height: 1; }               /* 973:17: 16 / 100 % */
  .who-card__quote { margin-top: .8125rem; max-width: 27.1875rem; font-size: 1.125rem; line-height: 1.3; }   /* 973:16: 18 / 130 %, 403 wide at x 240 */
  .who-card:nth-child(3) .who-card__quote { max-width: 28.6875rem; }   /* 973:32: 427 */
  .who-card__head .chev { display: none; }
  .who-card:not(.is-open) .who-card__head { color: var(--c-ink-68); }   /* muted as in 973:4, at the lightest the brief allows */
  .who-card.is-open .who-card__head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c-amber); }
  .who-card__helps { grid-column: 2; grid-row: 1; padding: 0 0 .5rem; }
  .who-card__media { grid-column: 2; grid-row: 2 / span 5; align-self: start; max-width: none; border-radius: 0 16px 16px 0; overflow: hidden; }
  .who-card__media img { border-radius: 0; }
  .who-card.is-open .who-card__media::before { content: none; }
}

/* -------------------------------- reviews ------------------------------- */
.reviews__grid { display: grid; gap: .75rem; max-width: 20.125rem; margin-inline: auto; }  /* 322 */
.reviews__grid img { width: 100%; }
@media (min-width: 768px) {
  .reviews__grid { max-width: none; grid-template-columns: 1fr 1fr; column-gap: 2.25rem; row-gap: 1.25rem; align-items: start; }
}
@media (min-width: 1024px) {
  /* founder 17.10: the screenshots a fifth smaller than the frame's 409, more
     room in the band and under its heading */
  .reviews__grid { max-width: 42rem; margin-inline: auto; column-gap: 1.5rem; }   /* 2 × 324 */
  #reviews .h2 { margin-bottom: 3rem; }
}

/* ----------------------------- What's inside ---------------------------- */
.part { background: var(--c-white); border-radius: 16px; }
.part + .part { margin-top: .75rem; }
.part__h { font: inherit; }
.part__head {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: .875rem; align-items: center;
  width: 100%; padding: .85rem 1rem .85rem 1.125rem;                /* 917:38: 76 tall, the icon 18 in and 16 down */
}
.part__icon { grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; }
.part__icon--cards { display: grid; place-items: center; border-radius: 50%; background: var(--c-amber); }
.part__icon--cards svg { width: 1.1875rem; height: 1.3125rem; }
.part__name { grid-column: 2; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }   /* 843:2114: 135 % */
.part__meta { grid-column: 2; margin-top: .1875rem; font-size: .8125rem; line-height: 1.65; color: var(--c-ink-68); text-wrap: balance; }   /* 843:2113: 27 under the name top */
.part__meta--m { font-weight: 500; }
.part__head .chev { grid-column: 3; grid-row: 1 / span 2; margin-right: .25rem; }
/* the open guide (917:32): icon, name and chevron on the top line, the meta 8.8 under the two-line name */
#part-guide .part__head { align-items: start; padding: .8125rem 1rem; }
#part-guide .part__name { line-height: 1.2; }
#part-guide .part__meta { margin-top: .55rem; }
#part-guide .part__head .chev { margin-top: .96875rem; }
.part__body { padding: .6875rem 1rem 1.25rem; }
#part-guide .part__body { padding-top: .875rem; padding-bottom: .46875rem; }   /* 843:2205: the cover 111 under the card top; 917:32: the card ends 18 under the last description */
#part-fights .part__body, #part-ba .part__body { padding-bottom: .46875rem; }   /* their lists end as the chapters do (founder 19.10) */
.part__cover { width: 12.5rem; height: auto; margin: 0 auto 1.5625rem; border-radius: 18%; }
.part__text > p + .label, .part__text > ol + .label { margin-top: 1.5625rem; }
.part__text > ul + .label { margin-top: 1.25rem; }                  /* 843:2149: 20 after the list */
.part__text .label { margin-bottom: .5625rem; }
.part__text .checks { padding-left: .25rem; }                       /* 843:2156: ticks 20 in, text 44 in */
.part__text .checks li + li { margin-top: .375rem; }
.part__text > p:last-child:not(:first-child) { margin-top: 1.25rem; }
/* 843:2170–2178: from x 48; no divider over chapter 1; rows 95 and 74 apart.
   (The frame's dividers stop at 340, but its titles run to 342, so the list
   keeps the card's right edge.) */
.chapters { counter-reset: ch; margin-left: .125rem; }   /* no line under the last row (founder 19.10) */
.chapters li {
  counter-increment: ch; position: relative;
  padding: .75rem 0 .65625rem 1.4375rem; border-top: 1px solid var(--c-ink-12);
}
.chapters li:first-child { padding-top: .0625rem; border-top: 0; }
.chapters li::before {
  content: counter(ch); position: absolute; left: 0; top: .875rem;
  font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--c-mid);
}
.chapters li:first-child::before { top: .1875rem; }
.chapters__t { display: block; font-weight: 600; line-height: 1.3; }
.chapters__d { display: block; margin-top: .5rem; font-size: .8125rem; line-height: 1.65; color: var(--c-ink-68); }
.chapters .quiet { margin: .625rem 0 .09375rem; }                   /* 843:2144: 10 under the text, 12 over the next divider (founder 19.10) */
.tag {
  position: relative; display: inline-block; margin-left: .75rem; padding: .1875rem .5rem;
  border-radius: 16px; background: var(--c-amber); vertical-align: .1em;
  font-size: .6875rem; font-weight: 500; line-height: 1.1; text-decoration: none;
}
.tag::after { content: ""; position: absolute; inset: -.8125rem -.25rem; }  /* 44 px target */
.steps { counter-reset: st; }
.steps li { counter-increment: st; position: relative; padding-left: 1.5rem; }
.steps li + li { margin-top: .5rem; }
.steps li::before { content: counter(st) "."; position: absolute; left: 0; font-weight: 500; color: var(--c-mid); }
.cta { margin-top: .6875rem; text-align: center; }
.cta .assure { margin-top: .75rem; }
.assure--center { padding-right: 1.5625rem; }   /* 844:2595: the text block centred, the shield beside it */
@media (min-width: 768px) {
  /* 973:1003 … 973:1122 and 973:399 … 973:483: the tablet and desktop frames
     draw this section smaller than the phone: 32 icons, 18 / 22.5 names,
     15 px lists, chapter rows 61 apart under a divider each, the cover as
     wide as its column (180 at 820, 213 at 1440) */
  .part__head, #part-guide .part__head { align-items: center; column-gap: 1.125rem; padding: 1.03125rem 1.125rem 1.03125rem 1.5rem; }   /* closed parts as 973:1003 / 973:399 (review r3 n10) */
  .part + .part { margin-top: .8125rem; }                                              /* 13 apart */
  .part__icon { width: 2rem; height: 2rem; }
  .part__icon--cards svg { width: .875rem; height: .9375rem; }
  .part__name, #part-guide .part__name { line-height: 1.25; }
  .part__meta { line-height: 1.3; }
  .part__meta, #part-guide .part__meta { margin-top: .15625rem; }
  #part-guide .part__head .chev { margin-top: 0; }
  .part__body, #part-guide .part__body, #part-fights .part__body, #part-ba .part__body { padding: .125rem 1.125rem .6875rem; }       /* 973:1022: the intro 17 under the meta; 973:1111: part 1 936 tall */
  .part__text > p + .label { margin-top: .875rem; }                                     /* 973:1024: 14 after the intro */
  .part__body--cover { display: grid; grid-template-columns: 11.25rem 1fr; column-gap: 1.75rem; align-items: start; }   /* 180 | 28; the posters of parts 2 and 3 sit as part 1's cover */
  .part__cover { width: 100%; margin: 0; }
  .part__text .label { font-size: .9375rem; line-height: 1.4; }
  .part__text .checks { padding-left: 0; }
  .part__text .checks li { font-size: .9375rem; line-height: 1.4533; }
  .part__text .checks li + li { margin-top: .45rem; }
  .chapters { margin-inline: 0; border-bottom: 0; }
  .chapters li, .chapters li:first-child { padding: .625rem 0 .625rem 1.75rem; border-top: 1px solid var(--c-ink-12); }
  .chapters li::before, .chapters li:first-child::before { top: .4375rem; }
  .chapters__t { font-size: .9375rem; line-height: 1.3; }
  .chapters__d { margin-top: .21875rem; line-height: 1.3; }
  .chapters .quiet { margin: 1.25rem 0 .3125rem; }
  .quiet--small { font-size: .9375rem; gap: .6875rem; }
  .quiet--small .quiet__icon { width: 1.375rem; height: 1.375rem; }
  .cta { max-width: 26.25rem; margin: 1.5rem auto 0; }                       /* 420, 973:993 */
}
@media (min-width: 1024px) {
  .part__body, #part-guide .part__body, #part-fights .part__body, #part-ba .part__body { padding-top: .375rem; padding-bottom: .8125rem; }   /* 973:470: the intro 52 under the name's ink; part 1 908 tall */
  .part__body--cover { grid-template-columns: 13.3125rem 1fr; column-gap: 4.1875rem; }  /* 213 | 531 */
  #part-guide .part__text > p:first-child { max-width: 31.75rem; }   /* 973:470: the intro's box, so it breaks after "language," */
  .part__text > p + .label { margin-top: 1.9375rem; }                /* 973:469: 31 after the intro */
  .part__text > ul + .label { margin-top: 2rem; }                    /* 973:456: 32 after the ticks */
  /* 973:467 … 973:458: two columns read down, 281 apart, rows 29 apart */
  .checks--two { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 2rem; row-gap: .45rem; }
  .part__text .checks--two li + li { margin-top: 0; }
}

/* ------------------- Can I actually do this? and Why now ---------------- */
.split__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.split__text { margin-top: var(--gap-block); }
.objection + .objection { margin-top: 1.25rem; }
.objection__q {
  display: flex; gap: .9375rem; align-items: flex-start;
  padding: .75rem .5625rem .75rem 1.125rem;          /* 958:12–14: icon 18 in, text at 52, 9 px from the edge */
  border-radius: 16px; background: var(--c-amber);
  font-weight: 600; line-height: 1.3;
}
.objection__icon { width: 1.2rem; height: 1.0625rem; flex: none; margin-top: .1875rem; }
.objection__a { margin-top: .75rem; }
@media (min-width: 768px) {
  .objection + .objection { margin-top: 2.3125rem; }   /* 973:1257 → 973:1260: 37 from an answer to the next card */
  .objection__q { padding-block: .8125rem; font-size: .9375rem; }   /* 973:1255: 15 / 130 %, the card 65 tall (review r3 n11) */
  .objection__a { margin-top: 1rem; font-size: .9375rem; }          /* 973:1257: 15 / 155 %, 16 under the card */
  #can .sub { margin-top: calc(.625rem - var(--gap-h2)); margin-bottom: calc(var(--gap-block) - .4375rem); }   /* heading → sub 46, sub → grid 34 */
  /* 973:1249: text 360 | photo 360, the photo square on the tablet */
  .split__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; align-items: start; }
  .split__photo { grid-column: 2; grid-row: 1; }
  .split__photo img { aspect-ratio: 1; border-radius: 10px; }
  .split__text { grid-column: 1; grid-row: 1; margin-top: 0; }
}
@media (min-width: 1024px) {
  /* 973:485: text 414 | photo 524 × 349, gap 125 */
  .split__grid { grid-template-columns: 414fr 524fr; column-gap: 11.75%; }
  .split__photo img { aspect-ratio: 3 / 2; }
  /* 973:485: the heading 10 higher and the subtitle 4 nearer it than the
     shared rhythm puts them; the grid stays where it is */
  #can { padding-top: calc(var(--pad) - .3125rem); }                                  /* 123 after What's inside */
  .objection + .objection { margin-top: 2.9375rem; }   /* 973:492 → 973:495: 47 */
  .objection__q { padding-block: .75rem; font-size: 1rem; }   /* 973:490: 16 / 130 % */
  .objection__a { font-size: 1.125rem; }                /* 973:492: 18 / 155 % */
  #can .objection:first-child .objection__a { max-width: 25.625rem; }   /* 973:492's box, 410: it breaks before "No long PDFs" */
  #can .sub { margin-top: calc(.6875rem - var(--gap-h2)); margin-bottom: calc(var(--gap-block) + .875rem); }
}

/* ----------------------------- Who made this ---------------------------- */
#about .h2 { margin-bottom: .975rem; }                   /* 874:243 → 874:242: 15.6 */
.about__board { margin-top: var(--gap-block); }
.about__board img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about__text { margin-top: var(--gap-block); }
/* 874:240 … 874:221: "Based on:" 8 above the first pillar, pills 3.4 under
   the first pillar's text and 8.5 under the others, pillars 12 apart */
.based { margin-top: .5rem; }
.based > li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .9375rem; }
.based > li + li { margin-top: .75rem; }
.based__icon { width: 2.5rem; height: 2.5rem; margin-top: .1875rem; }
.based > li:nth-child(2) .based__icon { width: 2.2rem; height: 2.2rem; margin: .4375rem 0 0 .125rem; }   /* 874:257: the magnifier is drawn 35.3 */
.pills { display: flex; flex-wrap: wrap; gap: .375rem .5rem; margin-top: .53125rem; }
.based > li:first-child .pills { margin-top: .2125rem; }
.pills li { padding: .375rem .625rem; border-radius: 16px; background: var(--c-white); font-size: .75rem; font-weight: 500; line-height: 1.35; }
.about__line { margin-top: 1.5625rem; }
.about__line a { position: relative; text-decoration: underline; text-underline-offset: .15em; }
.about__line a::after { content: ""; position: absolute; inset: -.75rem -.25rem; }   /* 44 px target */
.inline-link { position: relative; display: inline; text-decoration: underline; text-underline-offset: .15em; }
.inline-link::after { content: ""; position: absolute; inset: -.75rem -.25rem; }
.melissa { margin-top: .75rem; padding-left: 1rem; border-left: 3px solid var(--c-amber); font-style: normal; }
.team { display: flex; gap: .625rem; align-items: flex-start; margin-top: 1.5625rem; }
.team__icon { width: 1.625rem; height: 1.625rem; flex: none; margin-top: .375rem; }
.note {
  position: relative; margin-top: 1rem; padding: 0 1.25rem 1.5rem; border-radius: 16px;
  background: var(--c-white);
}
.note p + p { margin-top: 1rem; }
/* The letter's title and its × share one row that stays at the top of the
   screen while the letter scrolls, so it can be closed at any point (founder
   17.10). White behind it, so the text passes under. */
.note__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 -1.25rem 1rem; padding: .5rem .25rem .5rem 1.25rem;
  border-radius: 16px 16px 0 0; background: var(--c-white);
}
.note__title { font-size: 1rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }   /* 16 SemiBold, level with the ×; two even lines below 331 (review r3 n12) */
.note__close { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.note__close svg { width: .875rem; height: .875rem; fill: none; stroke: var(--c-ink); stroke-width: 1.5; }
@media (min-width: 768px) { .note__head { top: var(--panel-h); } }   /* under the top panel, which shows there */
@media (min-width: 768px) {
  /* board 4:5 on the left (973:759 / 973:352), the text on the right */
  .about__grid { display: grid; grid-template-columns: 35fr 65fr; column-gap: 2.5rem; align-items: start;
    grid-template-areas: "board intro" "board text"; grid-template-rows: auto 1fr; }
  .about__intro { grid-area: intro; }
  .about__board { grid-area: board; margin-top: 0; }
  .about__board img { aspect-ratio: 4 / 5; border-radius: 16px; }
  .about__text { grid-area: text; }
}
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: 432fr 568fr; column-gap: 4rem; }
}

/* ------------------------- Start with the next … ------------------------- */
.next { background: var(--c-white); text-align: center; }
.next__title { font-size: var(--fs-h2); font-weight: 500; line-height: 1.3; text-wrap: balance; }
/* 16 px on phones and never more than four lines (founder 17.10): the
   frame's four lines fit from 350; below that the type steps down to 14.5
   at 320 so they still do */
.next__text { margin-top: .9375rem; font-size: clamp(.90625rem, -.09375rem + 5vw, 1rem); line-height: 1.3; }
@media (min-width: 768px) { .next__text { font-size: var(--fs-lead); } }

/* ---------------------------------- box --------------------------------- */
.box { padding-top: 0; }
.box__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.box__body { padding: var(--pad) var(--gutter) 0; text-align: center; max-width: calc(30rem + 2 * var(--gutter)); margin-inline: auto; }
.box__body .descriptor { margin-top: .9375rem; }
.box__price { margin-top: var(--gap-block); font-size: 3.75rem; line-height: 1; letter-spacing: -.5px; text-indent: -.125rem; }   /* the "$" sits the ink 1 px right of centre; this centres it optically */
.box__terms { margin-top: .375rem; color: var(--c-ink); }         /* a third nearer the price than the frame's 15 (founder 17.10) */
.box__list { margin-top: 1.5625rem; text-align: left; }
.box__list li { padding-left: 1.5625rem; }
.box__list li + li { margin-top: .75rem; }
.box__list li::before { top: .4375rem; }
.box__name { display: block; font-weight: 600; line-height: 1.3; }
.box__meta { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.65; color: var(--c-ink-68); }
.box__icons { display: flex; justify-content: space-between; gap: .5rem; margin-top: calc(var(--gap-block) - .15625rem); }
.box__icons li { display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: clamp(.75rem, .4643rem + 1.4286vw, .8125rem);   /* 12 at 320 → 13 at 390 (812:772, founder 19.10) */ font-weight: 600; line-height: 1.3; }
/* 1024:49 (founder 19.10): two 22.7 × 21.4 icons and a 32 × 14 one, all in one 21.4 tall box so the labels line up */
.box__icons svg { width: 1.4188rem; height: 1.3359rem; }
.box__icons li:nth-child(3) svg { width: 2rem; }
.box .btn { margin-top: 1.15625rem; line-height: 1; }      /* 925:121: 20.5 under the labels; 812:788: 16 / 16 */
.box .assure { margin-top: .75rem; text-align: left; }
/* 812:800 is 291 wide, 812:809 301 */
.box .assure span { max-width: max(18.1875rem, calc(18.1875rem + 100vw - 24.375rem)); }
.box .assure + .assure span { max-width: max(18.8125rem, calc(18.8125rem + 100vw - 24.375rem)); }
.box .assure__icon { width: .875rem; height: .875rem; }
@media (min-width: 768px) {
  .box { padding-top: calc(var(--pad) - .3125rem); }   /* as far from "Start with" as before its band grew (review r3 n13) */
  .box__in { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: 37.5fr 50.5fr; column-gap: 4.5%; align-items: start; }
  .box__photo img { aspect-ratio: 4 / 5; border-radius: 20px; }
  .box__body { padding: 0; max-width: none; text-align: left; }
  .box__price { text-indent: 0; }   /* left-aligned from 768: no optical centring */
  .box__icons { justify-content: flex-start; gap: 2rem; }
  .box__icons li { font-size: .875rem; }                                              /* 14 from 768, as before */
  .box .assure span, .box .assure + .assure span { max-width: none; }
}
@media (min-width: 1024px) {
  .box { padding-top: calc(var(--pad) - .4375rem); }   /* 123 from the "Start with" text, as 973:3 */
  .box__in { grid-template-columns: 432fr 523fr; column-gap: 10.15%; }
  .box__photo img { border-radius: 22px; }
  /* founder 17.10: tighter, so the title and the button share one screen. The
     gaps marked red are halved (title → descriptor, price → terms), the blue
     ones cut by about a third (descriptor → price, terms → list, list → icons) */
  .box__body .title { line-height: 1; }
  .box__body .descriptor { margin-top: .1875rem; }
  .box__price { margin-top: 1.65625rem; }
  .box__terms { margin-top: 0; }
  .box__list { margin-top: .875rem; }
  .box__icons { margin-top: 1.53125rem; }
}

/* ---------------------------------- FAQ --------------------------------- */
.faq__list { border-bottom: 1px solid var(--c-ink-12); }
.faq__item { border-top: 1px solid var(--c-ink-12); }
.faq__item h3 { font: inherit; }
.faq__item button {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  width: 100%; min-height: 2.75rem; padding: .9375rem 0 .9rem;   /* 843:1862: rows 72 apart with the divider */
  font-weight: 600; line-height: 1.3;
}
.faq__item button > span { max-width: 17rem; }            /* the question boxes of 812:346 … 812:398 wrap at ≈ 272 */
.faq__item .chev { margin-right: .25rem; }                /* 812:348 */
.faq__a { padding-bottom: 1rem; }
.faq__a p + p { margin-top: .75rem; }
.faq__a a { position: relative; text-decoration: underline; text-underline-offset: .15em; }
.faq__a a::after { content: ""; position: absolute; inset: -.75rem -.25rem; }
@media (min-width: 768px) { .faq__item button > span { max-width: none; } }

/* ------------------------------- footer --------------------------------- */
/* Copied from /active-listening/ (assets/css/main.css "Site footer"), its
   max-width queries turned mobile-first, and every link a 44 px target as on
   /research/ (register п. 21). */
.site-footer { background: var(--c-white); }
.site-footer__brand { display: flex; align-items: center; padding: 2rem 1.875rem 1rem; }
.site-footer__brand a { display: inline-flex; align-items: center; min-height: 2.75rem; line-height: 1.65; }   /* 44 px target (register п. 21) */
.site-footer__brand img { display: inline; vertical-align: middle; width: 100%; max-width: 10.313rem; height: .875rem; }
.site-footer__legal { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.875rem 2rem; }
.site-footer__legal ul { flex: none; width: 88%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; padding: 0; }
.site-footer__legal li { font-size: .857rem; font-weight: 400; line-height: 1; }
.site-footer__legal a, .site-footer__legal span {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: inherit; font-weight: inherit; line-height: 1; color: var(--c-ink); text-decoration: none;
}
.site-footer { padding-bottom: var(--bar-h); }   /* room for the phone's bottom bar */
@media (min-width: 768px) {
  .site-footer { padding-bottom: 0; }
  .site-footer__brand { padding: 3rem 2.875rem 1rem; }
  .site-footer__brand img { width: 14.75rem; max-width: 14.75rem; height: 1.25rem; }
  .site-footer__legal { padding: 2.063rem 2.875rem 3rem; }
  .site-footer__legal ul { flex-direction: column; justify-content: flex-end; align-items: flex-start; width: 100%; }
}
@media (min-width: 1024px) {
  .site-footer__brand { padding: 3rem 6.25rem 1rem calc(6.25rem + .6rem); }
  .site-footer__brand img { width: 16.875rem; max-width: 16.875rem; height: 1.438rem; }
  .site-footer__legal { padding: 1rem 6.25rem 3rem; }
  .site-footer__legal ul { flex: 1; flex-direction: row; justify-content: space-between; align-items: center; gap: 3.438rem; padding: 10px; }
  .site-footer__legal li { font-size: 1.125rem; }
}