/* ============================================================
   LO — hellolo.app marketing site
   Design tokens from design_handoff_lo_homepage. Two typefaces:
   Cormorant Garamond (display) + DM Sans (UI). Single warm light
   look — a deliberate brand commitment, no dark mode.
   ============================================================ */

:root {
  --sage:        #3A5A40;   /* primary: headlines, frames, buttons, body */
  --coastal:     #AEBCC7;   /* nav + statement bg, bunting, blue frames */
  --cream:       #F0E8D8;   /* hero + privacy bg */
  --cream-light: #FAF6EE;   /* text on dark, button text */
  /* The big 2,752 only. The handoff specifies #95ABBE, but the numeral
     overlaps the centre photo and the last digit washed out against it — this
     is the same muted blue-grey a few points darker, still clearly distinct
     from coastal blue. */
  --numeral:     #7D98B0;
  --blush:       #EDA898;   /* eyebrows, sign-off, policy link */

  --sage-65: rgba(58,90,64,0.65);
  --sage-50: rgba(58,90,64,0.5);
  --sage-15: rgba(58,90,64,0.15);
  --sage-12: rgba(58,90,64,0.12);
  --cream-80: rgba(250,246,238,0.8);
  --cream-15: rgba(250,246,238,0.15);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --tex-cream: repeating-linear-gradient(0deg, transparent 0 31px, rgba(140,110,70,0.045) 31px 32px);
  --tex-blue:  repeating-linear-gradient(0deg, transparent 0 31px, rgba(58,90,64,0.03) 31px 32px);
  --tex-sage:  repeating-linear-gradient(0deg, transparent 0 31px, rgba(0,0,0,0.04) 31px 32px);
  --bunting:   repeating-linear-gradient(90deg, var(--coastal) 0 20px, #fff 20px 40px);

  --pad: clamp(24px, 5vw, 72px);
  --nav-h: 42px;   /* 58px from >=1024px */

  /* Fluid type — linear interpolation between the mobile (390px) and desktop
     (1440px) values in the handoff, so nothing steps at 500px or 900px.
     The hero is deliberately absent: it is a fixed composition and scales
     proportionally with its own canvas instead (see the >=1024px block). */
  --fs-statement:      clamp(88px, 4.95vw + 69px, 140px);
  --fs-statement-body: clamp(18px, 0.38vw + 17px, 22px);
  --fs-founder-name:   clamp(36px, 1.71vw + 29px, 54px);
  --fs-founder-body:   clamp(18px, 0.19vw + 17px, 20px);
  --fs-signoff:        clamp(40px, 1.14vw + 36px, 52px);
  --fs-privacy-head:   clamp(60px, 3.43vw + 47px, 96px);
  --fs-privacy-body:   clamp(18px, 0.38vw + 17px, 22px);
  --fs-pillar-label:   clamp(30px, 0.76vw + 27px, 38px);
  --fs-pillar-sub:     clamp(15px, 0.48vw + 13px, 20px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--sage);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* guard against any element bleeding past the viewport */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
h1, h2 { font-weight: 400; margin: 0; }

/* 1440 to match the handoff canvas: with the 72px desktop gutter that gives
   the 1296px content measure the sections are drawn against. */
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--sage); color: var(--cream-light);
  padding: 10px 16px; border-radius: 8px; font: 600 14px var(--sans);
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; border-radius: 3px; }

/* ── Shared ornaments ──
   Mobile runs a finer 5px/16px strip; desktop the 6px/20px one. Bunting
   appears in exactly two places at every size: the hero/statement seam and
   the foot of the page. None under the nav. */
.bunting { height: 5px; background: repeating-linear-gradient(90deg, var(--coastal) 0 16px, #fff 16px 32px); }

.floret { fill: var(--sage); }
.floret--corner {
  position: absolute; right: 24px; bottom: 20px;
  width: 36px; height: 33px; opacity: 0.6;
}

.eyebrow {
  font: 600 clamp(11px, 0.86vw + 7.7px, 20px)/1 var(--sans);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--blush);
  margin: 0 0 32px;
}
/* 13px on mobile to 50px on desktop is a deliberate jump, not a slip. */
.eyebrow--founder {
  font-family: var(--serif);
  font-size: clamp(13px, 3.52vw - 0.7px, 50px);
  letter-spacing: 0.26em;
}

.rule { border: 0; border-top: 1px solid var(--sage-12); margin: 0 0 clamp(36px, 5vw, 64px); }
.rule--light { border-top-color: var(--cream-15); margin: clamp(32px, 5vw, 64px) 0; }

/* ── Framed photos ── */
.frame {
  margin: 0; overflow: hidden; outline: 6px solid var(--sage);
  background: var(--cream-light);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--blue {
  outline: 10px solid var(--coastal); border-radius: 2px;
  box-shadow: 0 12px 48px rgba(28,22,16,0.18);
}

/* ============================================================
   NAV
   ============================================================ */
/* Static on mobile — the hero is a composed single screen and a sticky bar
   would sit over the collage. It becomes sticky at >=1024px, where there is
   room for it above the composition. */
.nav { position: static; background: var(--coastal); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding-inline: var(--pad);
}
.nav__logo {
  font: 700 24px/1 var(--serif); letter-spacing: 0.2em; color: var(--cream-light);
}
.nav__links { display: flex; gap: 24px; }
.nav__links a {
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.04em; color: rgba(250,246,238,0.85);
  transition: color .15s ease;
  /* Padding buys a >=44px hit area; the negative margin cancels it so the
     visual layout is untouched. */
  display: inline-flex; align-items: center;
  padding: 15px 6px; margin: -15px -6px;
}
.nav__links a:hover { color: var(--cream-light); }

/* ============================================================
   HERO
   ============================================================ */
/* The hero is the one fixed composition on the page. Mobile draws it on a
   390x470 collage canvas, desktop on the 1440x900 canvas from the handoff.
   Both use percentage coordinates measured off the prototypes, so the whole
   arrangement scales as one piece instead of drifting element by element.
   .hero__lede / .hero__pitch are display:contents on mobile so the five hero
   parts can be ordered numeral -> sub -> finally -> collage -> Meet LO
   regardless of how they are nested in the markup. */
.hero { position: relative; background: var(--cream) var(--tex-cream); }
.hero__grid {
  display: flex; flex-direction: column;
  /* width:100% is load-bearing — margin-inline:auto otherwise suppresses the
     flex stretch and the canvas shrinks to its content width. */
  width: 100%; max-width: 430px; margin-inline: auto;
  padding: 0 0 clamp(24px, 5vw, 40px);
}
.hero__lede, .hero__pitch { display: contents; }

.hero__count {
  order: 1; margin: 0 var(--pad);
  font: 600 110px/0.82 var(--serif);
  letter-spacing: -0.055em; color: var(--numeral);
  pointer-events: none;
}
/* The handoff's own 8px gap: the numeral's descenders graze the copy, nothing
   crosses it. Measured off the prototype rather than eyeballed. */
.hero__count-sub {
  order: 2; margin: 8px var(--pad) 6px;
  font: 400 27px/1.2 var(--serif);
  letter-spacing: -0.01em; color: var(--sage);
  max-width: 220px;
}
/* Desktop takes the hard break after "them"; below that the line wraps
   naturally inside its measure, which lands after "on" as drawn. */
.hero__count-sub br { display: none; }
.hero__finally {
  order: 3; margin: 0 var(--pad) 16px;
  font: 400 32px/1.15 var(--serif);
  letter-spacing: -0.02em; color: var(--sage); text-align: right;
}
/* Mobile splits "Finally, a / proper home for them." — the "a" is roman and
   ends line one. Desktop hides the break and italicises "a" with the rest. */
.hero__finally .fin__a { font-style: normal; }
.hero__rule { display: none; }

.collage { position: relative; }
.collage .frame { position: absolute; }
.collage--hero { order: 4; width: 100%; aspect-ratio: 390 / 470; }
.collage--hero .frame { outline-width: 5px; box-shadow: 0 12px 48px rgba(28,22,16,0.14); }
/* Diagonal zigzag: right, left, right — each overlapping the last at a corner. */
.collage--hero__a { top:  0;      left: 48.21%; width: 41.54%; height: 38.51%; z-index: 1; }
.collage--hero__b { top: 19.15%;  left: 14.10%; width: 41.54%; height: 35.53%; z-index: 2; }
.collage--hero__c { top: 37.23%;  left: 47.69%; width: 39.49%; height: 33.62%; z-index: 3; }
.collage--hero__d { display: none; }   /* desktop-only fourth photo */
/* Art-directed crops — these are not defaults. Normalising them to center
   crops the children at the ankles. */
.collage--hero__a img { object-position: center bottom; }
.collage--hero__b img { object-position: center 70%; }
.collage--hero__c img { object-position: center top; }
.collage--hero__d img { object-position: center 30%; }
.collage--hero__floret { display: none; }

/* Meet LO. + form tuck into the pocket left of the third photo. The negative
   margin lifts it back over the collage it follows in source order. */
.hero__signup {
  order: 5; position: relative; z-index: 4;
  margin: -29.49% 0 0 6.15%; width: 40.51%;
}
.hero__meet {
  font: 700 42px/1 var(--serif);
  letter-spacing: -0.02em; color: var(--sage); margin: 0 0 10px;
}

/* ── Waitlist form ── */
.waitlist { display: flex; flex-direction: column; gap: 10px; }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist__email {
  height: 36px; width: 100%; padding: 0 2px;
  border: 0; border-bottom: 1.5px solid var(--sage);
  background: transparent; font: 400 12px var(--sans); color: var(--sage);
  border-radius: 0; /* iOS */
  transition: border-bottom .2s ease, background-color .2s ease;
}
.waitlist__email::placeholder { color: var(--sage-50); font-weight: 600; }
.waitlist__email:hover { background: rgba(58,90,64,0.03); }
/* A thickened rule instead of a browser focus ring — the ring reads as a
   system artefact against this typography. */
.waitlist__email:focus {
  outline: 0; border-bottom-width: 2px;
  box-shadow: 0 2px 0 -1px rgba(58,90,64,0.25);
}
.waitlist__email:focus::placeholder { color: rgba(58,90,64,0.3); }
.waitlist__email[disabled] {
  border-bottom-color: rgba(58,90,64,0.25); color: rgba(58,90,64,0.35); cursor: not-allowed;
}
.waitlist.has-error .waitlist__email { border-bottom-color: var(--blush); }

.waitlist__btn {
  height: 38px; width: 100%; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--sage); color: var(--cream-light);
  font: 700 9px var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease;
}
.waitlist__btn:hover { background: #2A4A35; transform: translateY(-1px); }
.waitlist__btn:active { transform: translateY(0) scale(0.99); background: #2A4A35; }
.waitlist__btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.waitlist__btn[disabled] {
  background: rgba(58,90,64,0.3); color: rgba(250,246,238,0.6);
  cursor: wait; transform: none; pointer-events: none;
}

.waitlist__msg { min-height: 1.2em; margin: 2px 0 0; font: 500 11px/1.4 var(--sans); }
.waitlist__msg[data-state="error"] { color: var(--blush); margin-top: 6px; }
/* Success takes over the field's footprint: no toast, no layout shift. */
.waitlist__msg[data-state="success"] { min-height: 0; margin: 0; animation: wl-in .35s ease both; }
.waitlist__done-a {
  display: block; font: italic 400 24px/1.2 var(--serif); color: var(--sage);
}
.waitlist__done-b {
  display: block; margin-top: 6px; font: 400 12px/1.5 var(--sans); color: var(--sage-65);
}
@keyframes wl-in { from { opacity: 0; } to { opacity: 1; } }
.waitlist.is-done .waitlist__email,
.waitlist.is-done .waitlist__btn { display: none; }

/* WCAG 2.5.8 — the mockup's 36/38px are visual targets, not hit areas. */
@media (pointer: coarse) {
  .waitlist__email { height: 44px; }
  .waitlist__btn { min-height: 44px; }
  .link-arrow { padding-block: 12px; }
}

/* ============================================================
   SECTION 2 — STATEMENT (coastal)
   ============================================================ */
.statement { position: relative; background: var(--coastal) var(--tex-blue); }
.statement__wrap { padding-block: 60px 64px; }
.statement__head {
  font: 600 var(--fs-statement)/0.9 var(--serif);
  letter-spacing: -0.03em; color: var(--sage);
}
/* Mobile sets all five words on their own alternating-aligned lines; the
   three line-groups collapse back to the handoff's desktop lines at 1024. */
.statement__head .sh__line { display: block; }
.statement__head .sh__w { display: block; }
.sh__w--1 { text-align: left; }
.sh__w--2 { text-align: right; }
.sh__w--3 { text-align: left; padding-left: 8px; }
.sh__w--4 { text-align: right; }
.sh__w--5 { text-align: left; }
.statement__body {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(58,90,64,0.2); max-width: 560px;
}
.statement__body p {
  font: 400 var(--fs-statement-body)/1.75 var(--sans); color: rgba(58,90,64,0.7); margin: 0;
}

/* ============================================================
   SECTION 3 — FOUNDER (sage)
   ============================================================ */
.founder { background: var(--sage) var(--tex-sage); color: var(--cream-light); }
.founder .wrap { padding-block: 60px 64px; }
/* Mobile order is name -> paragraphs -> collage -> sign-off, which cuts
   across the markup's text/collage split; display:contents lets the collage
   slot in between. Desktop restores the two real columns. */
.founder__grid { display: flex; flex-direction: column; }
.founder__text { display: contents; }
.collage--founder { order: 1; }
.founder__signoff { order: 2; }
.founder__name {
  font: 400 var(--fs-founder-name)/1 var(--serif);
  letter-spacing: -0.02em; color: var(--cream-light); margin: 0 0 20px;
}
.founder__text p:not(.founder__name):not(.founder__welcome):not(.founder__sig) {
  font: 400 var(--fs-founder-body)/1.75 var(--serif);
  color: var(--cream-80); margin: 0 0 20px; max-width: 580px;
}
.founder__text > p:last-of-type { margin-bottom: 36px; }
.founder__signoff { padding-top: 32px; border-top: 1px solid var(--cream-15); }
.founder__welcome {
  font: italic 400 var(--fs-signoff)/1 var(--serif);
  letter-spacing: -0.02em; color: var(--cream-light); margin: 0;
}
.founder__sig {
  font: 600 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blush); margin: 12px 0 0;
}
/* Mobile stacks the three photos straight; desktop reintroduces the tilt. */
.collage--founder { width: 100%; aspect-ratio: 342 / 560; margin: 0 0 48px; }
.collage--founder .frame { outline-width: 8px; box-shadow: 0 12px 48px rgba(28,22,16,0.25); }
.collage--founder__a { top: 0;      right: 0;    width: 64.33%; height: 51.79%; z-index: 1; }
.collage--founder__b { top: 32.14%; left: 0;     width: 57.02%; height: 46.43%; z-index: 2; }
.collage--founder__c { top: 64.29%; right: 2.9%; width: 54.09%; height: 35.71%; z-index: 3; }
.collage--founder__a img { object-position: center top; }
.collage--founder__b img { object-position: center 20%; }
.collage--founder__c img { object-position: center; }

/* ============================================================
   SECTION 4 — PRIVACY (cream)
   ============================================================ */
.privacy { position: relative; background: var(--cream) var(--tex-cream); }
.privacy .wrap { padding-block: 60px 72px; }
.privacy__head {
  font: 400 var(--fs-privacy-head)/0.88 var(--serif);
  letter-spacing: -0.04em; color: var(--sage); margin: 0 0 40px; max-width: 12ch;
}
/* Same trick as the founder section: on mobile the policy link follows the
   pillars, which sit between it and the body copy it is marked up with. */
.privacy__grid { display: flex; flex-direction: column; }
.privacy__copy { display: contents; }
.pillars { order: 1; }
.link-arrow { order: 2; align-self: start; }
.privacy__copy p {
  font: 400 var(--fs-privacy-body)/1.75 var(--serif); color: var(--sage); margin: 0 0 20px;
}
.privacy__copy p:last-of-type { margin-bottom: 36px; }
.link-arrow {
  display: inline-block;
  font: 600 clamp(15px, 0.48vw + 13.1px, 20px) var(--sans); letter-spacing: 0.08em; color: var(--blush);
  border-bottom: 1.5px solid rgba(58,90,64,0.3); padding-bottom: 3px;
  transition: opacity .15s ease;
}
.link-arrow:hover { opacity: 0.75; }
.pillars { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 0; }
.pillars li { border-top: 1px solid var(--sage-15); padding: 24px 0; }
.pillars li:last-child { border-bottom: 1px solid var(--sage-15); }
.pillars__label {
  font: italic 400 var(--fs-pillar-label)/1 var(--serif);
  letter-spacing: -0.02em; color: var(--sage); margin: 0 0 6px;
}
.pillars__sub { font: 400 var(--fs-pillar-sub)/1.6 var(--sans); color: var(--sage-50); margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--sage) var(--tex-sage); color: var(--cream-light); }
.foot__wrap { padding-block: 48px 40px; }
.foot__inner { display: flex; flex-direction: column; align-items: flex-start; }
.foot__brand { margin-bottom: 28px; }
.foot__logo { font: 700 22px/1 var(--serif); letter-spacing: 0.2em; margin: 0 0 8px; }
.foot__tag { font: italic 400 18px var(--serif); color: var(--cream-80); margin: 0; }
.foot__links { display: flex; flex-direction: column; gap: 16px; }
.foot__links a {
  font: 500 14px var(--sans); letter-spacing: 0.04em; color: var(--cream-80);
  transition: color .15s ease;
}
.foot__links a:hover { color: var(--cream-light); }
/* Divider lives inside .foot__wrap's padding so it aligns with the gutters
   rather than running to the screen edge. */
.foot__legal {
  border-top: 1px solid var(--cream-15); margin: 28px 0 0; padding-top: 20px;
  font: 400 11px var(--sans); color: rgba(250,246,238,0.45);
}
@media (pointer: coarse) {
  .foot__links a { padding-block: 12px; margin-block: -12px; }
}

/* ============================================================
   MOBILE PANELS — one complete idea per swipe (< 768px)
   The hero and the statement each fill a screen. The founder letter and
   the privacy section are long-form and scroll naturally — locking them
   would trap the reader. No scroll-snap: min-height does the work without
   fighting anchor jumps.
   ============================================================ */
@media (max-width: 767px) {
  .hero, .statement {
    min-height: 100vh;    /* fallback where svh is unsupported */
    /* svh, not vh: on iOS Safari 100vh is the LARGE viewport height and gets
       clipped by the address bar on first paint — that is what "you can't see
       Meet LO. above the fold" looks like in the wild. */
    min-height: 100svh;
    display: flex; flex-direction: column;
  }
  .hero__grid { flex: 1 0 auto; }          /* pushes the bunting to the seam */
  .statement__wrap { flex: 1 0 auto; }
  .collage--founder { max-width: 342px; margin-inline: auto; }
}

/* Landscape: a locked full-screen panel becomes an unreadable squeeze. */
@media (max-width: 767px) and (max-height: 500px) {
  .hero, .statement { min-height: 0; }
}

/* NOTE: there is deliberately no short-phone rule here.
   An earlier version shrank the canvas under `(max-height: 700px)` to keep the
   waitlist above the fold on an iPhone SE. That fired on every iPhone, because
   iOS Safari reports the height left over after its toolbars — a 390x844 phone
   measures about 659px — so ordinary devices got a 340px canvas, wider
   gutters and "Meet LO." on two lines. The handoff's own guidance covers this
   case: min-height with height:auto lets the section grow, so on a genuinely
   short viewport the CTA simply sits below the fold and nothing is clipped. */

/* ============================================================
   TABLET (768–1023px) — the mobile composition, scaled 1.35x
   Same three-photo zigzag; Meet LO. leaves the collage pocket because the
   negative space stops holding up at this width.
   ============================================================ */
@media (min-width: 768px) {
  :root { --pad: 40px; }

  /* Full width with the 40px gutter — only the collage is capped at 1.35x the
     mobile canvas. Capping the whole grid pushed the type 187px off the edge. */
  .hero__grid { max-width: none; }
  .hero__count { font-size: 148px; }
  .hero__count-sub { font-size: 36px; max-width: 297px; }
  .hero__finally { font-size: 43px; }
  .hero__meet { font-size: 57px; }
  /* Left-aligned on the gutter, as on mobile — it leaves the collage pocket
     at this width but keeps the same edge. */
  .hero__signup {
    position: static; margin: 28px 0 0 var(--pad); width: auto; text-align: left;
  }
  .waitlist { max-width: 340px; margin-inline: 0; }
  .waitlist__email { text-align: left; }

  /* With Meet LO. out of the collage, the pocket it occupied is dead space —
     crop the canvas to the photos so the CTA follows them directly. */
  .collage--hero { aspect-ratio: 390 / 333; }
  .collage--hero__a { top:  0;      height: 54.35%; }
  .collage--hero__b { top: 27.03%;  height: 50.15%; }
  .collage--hero__c { top: 52.55%;  height: 47.45%; }

  .collage--founder { max-width: 460px; margin-inline: auto; }
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .pillars li:last-child { border-bottom: 0; }

  /* The five alternating lines are a mobile device — at this width there is
     room for the handoff's three, and the zig-zag just impedes reading. */
  .statement__head .sh__w { display: inline; text-align: left; padding-left: 0; }
}

/* ============================================================
   DESKTOP (>=1024px) — the 1440x900 handoff canvas
   Every hero coordinate is a percentage of that canvas (minus the 64px
   nav + bunting above it), so the composition scales as one piece from
   1024px and pins at 1440px. Above 1440 the canvas centres and the
   backgrounds run full-bleed — the design stops working if stretched.
   ============================================================ */
@media (min-width: 1024px) {
  :root { --nav-h: 58px; --pad: 72px; }
  html { scroll-padding-top: 64px; }   /* sticky nav clearance for #our-story */

  .nav { position: sticky; top: 0; z-index: 50; }
  .bunting { height: 6px; background: repeating-linear-gradient(90deg, var(--coastal) 0 20px, #fff 20px 40px); }
  .nav__logo { font-size: 28px; }
  .nav__links { gap: 44px; }
  .nav__links a { font-size: 16px; color: var(--cream-80); padding: 12px 6px; margin: -12px -6px; }

  .hero__grid {
    display: block; position: relative;
    max-width: 1440px; margin-inline: auto;
    aspect-ratio: 1440 / 830; padding: 0;
  }
  /* The numeral paints OVER the photos; the subheadline passes UNDER them.
     That asymmetry is the design, not an oversight. */
  .hero__count {
    position: absolute; top: 2.89%; left: 5.56%; margin: 0; z-index: 20;
    font-size: min(16.667vw, 240px);
  }
  /* Desktop is its own composition and keeps its overlap — the numeral is
     large enough here to carry it. Only mobile and tablet were pulled back to
     the handoff's gap. z-index sits above the numeral so the copy reads over
     it, and above the photos, which it clears by a few pixels anyway. */
  .hero__count-sub {
    position: absolute; top: 23.47%; left: 5.56%; margin: 0; z-index: 21;
    font-size: min(3.194vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
    max-width: 26.39%;
  }
  .hero__count-sub br { display: inline; }
  /* max-width/margin reset undoes the tablet cap, which would otherwise
     squash this back to 526px instead of spanning the canvas. */
  .collage--hero {
    position: absolute; inset: 0; width: auto; max-width: none; margin-inline: 0;
    aspect-ratio: auto; z-index: 2;
  }
  .collage--hero .frame { outline-width: 6px; }
  .collage--hero__a { top:  8.19%; left: 29.17%; width: 26.39%; height: 71.08%; z-index: 4; }
  .collage--hero__b { top: 41.93%; left: -2.08%; width: 13.89%; height: 34.94%; z-index: 5; }
  .collage--hero__c { top:  4.58%; left: 60.42%; width: 14.58%; height: 36.14%; z-index: 4; }
  .collage--hero__d { display: block; top: 10.60%; left: 79.86%; width: 14.58%; height: 36.14%; z-index: 4; }
  .collage--hero__floret {
    display: block; position: absolute; left: 13.61%; bottom: 11.33%;
    width: 48px; height: 44px; opacity: 0.7; z-index: 6;
  }

  .hero__pitch {
    display: block; position: absolute;
    top: 49.16%; left: 68.06%; width: 23.61%;
  }
  .hero__finally {
    margin: 0; text-align: left;
    font-size: min(3.333vw, 48px); line-height: 1.1;
  }
  .hero__finally .fin__a { font-style: italic; }
  .hero__finally .fin__br { display: none; }
  .hero__rule { display: block; border: 0; border-top: 1px solid var(--sage-12); margin: 24px 0 0; }
  .hero__signup { margin: 20px 0 0; width: auto; text-align: left; }
  .hero__meet { font-size: min(5.556vw, 80px); margin: 0 0 14px; }
  .waitlist { max-width: none; margin-inline: 0; }
  .waitlist__email { height: 46px; font-size: 14px; text-align: left; }
  .waitlist__btn { height: 50px; font-size: 11px; letter-spacing: 0.16em; }
  .waitlist__done-a { font-size: 32px; }
  .waitlist__done-b { font-size: 14px; }

  .statement__wrap { padding-block: 100px 108px; }
  .statement__head { letter-spacing: -0.04em; }
  .statement__body { margin-top: 52px; padding-top: 36px; }

  .founder .wrap { padding-block: 100px 120px; }
  .founder__grid { display: grid; grid-template-columns: 1fr 540px; gap: 80px; align-items: start; }
  .founder__text { display: block; }
  .collage--founder { max-width: 540px; aspect-ratio: 540 / 820; margin: 0; }
  .collage--founder .frame { outline-width: 10px; box-shadow: 0 12px 48px rgba(28,22,16,0.16); }
  .collage--founder__a { top: 0;      right: 7.41%; left: auto; width: 57.41%; height: 48.78%; transform: rotate(-2.5deg); }
  .collage--founder__b { top: 34.15%; left: 0;      right: auto; width: 49.63%; height: 42.44%; transform: rotate(2deg); }
  .collage--founder__c { top: 52.44%; right: 1.85%; left: auto; width: 46.67%; height: 41.46%; transform: rotate(-1deg); }
  .founder__signoff { margin-top: 36px; }
  .founder__sig { font-size: 13px; }

  .privacy .wrap { padding-block: 100px 120px; }
  .privacy__head { margin-bottom: 64px; }
  .privacy__grid { display: grid; grid-template-columns: 1fr 420px; gap: 120px; align-items: start; }
  .privacy__copy { display: block; max-width: 680px; }
  .pillars { margin: 0; grid-template-columns: none; }
  .pillars li { padding: 28px 0; }
  .pillars li:last-child { border-bottom: 1px solid var(--sage-15); }
  .link-arrow { margin-top: 12px; }
  .floret--corner { right: 48px; bottom: 28px; width: 43px; height: 40px; }

  .foot__wrap { padding-block: 72px 48px; }
  .foot__inner { flex-direction: row; justify-content: space-between; align-items: center; }
  .foot__brand { margin-bottom: 0; }
  .foot__logo { font-size: 28px; }
  .foot__tag { font-size: 22px; }
  .foot__links { flex-direction: row; gap: 40px; }
  .foot__links a { font-size: 15px; }
  .foot__legal { margin-top: 48px; padding-top: 24px; font-size: 12px; }
}

/* ============================================================
   DOC PAGES (privacy) — long-form editorial reading
   ============================================================ */
.doc { background: var(--cream) var(--tex-cream); }
.doc__main { max-width: 720px; margin-inline: auto; padding: clamp(48px,7vw,80px) var(--pad) clamp(64px,8vw,96px); }
.doc__title { font: italic 400 clamp(38px,6vw,52px)/1.05 var(--serif); color: var(--sage); margin: 0 0 8px; }
.doc__meta { font: 400 14px var(--sans); color: var(--sage-65); margin: 0 0 clamp(36px,5vw,48px); }
.doc__meta a { color: var(--sage); border-bottom: 1px solid var(--sage-15); }
/* Content typography is scoped to .doc__main so it NEVER bleeds into the
   shared nav/footer (which live outside .doc__main). .doc is only the
   page background. */
.doc__main h2 {
  font: 600 clamp(24px,3vw,30px)/1.15 var(--serif); color: var(--sage);
  margin: clamp(40px,5vw,56px) 0 12px;
}
.doc__main h3 { font: 600 17px var(--sans); color: var(--sage); margin: 26px 0 6px; letter-spacing: 0.01em; }
.doc__main p, .doc__main li { font: 400 clamp(16px,1.9vw,17.5px)/1.7 var(--sans); color: #33302B; }
.doc__main p { margin: 0 0 14px; }
.doc__main ul { padding-left: 22px; margin: 0 0 14px; }
.doc__main li { margin-bottom: 8px; }
/* Underline only links inside the policy body — NOT the nav/footer links. */
.doc__main a { color: var(--sage); border-bottom: 1px solid var(--sage-15); }
.doc__main a:hover { border-bottom-color: var(--sage); }
.doc__main .promise {
  background: var(--cream-light); border: 1px solid var(--sage-12);
  border-radius: 14px; padding: 22px 26px; margin: 28px 0;
}
.doc__main .promise p:last-child { margin: 0; }
.doc__tablewrap { overflow-x: auto; margin: 16px 0; }
.doc__main table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.doc__main th, .doc__main td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid #E4DCCC; }
.doc__main th { font-weight: 600; color: var(--sage); font-family: var(--sans); }
.doc__main td { font-family: var(--sans); color: #33302B; }
.doc__fine { font-size: 13.5px; color: var(--sage-65); margin-top: 40px; }

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}