/* ============================================================
   SECTION 1 — HERO
   Plain editorial section. The old version pinned the product bottle
   (position:sticky) across a 320px scroll budget and drove a
   scroll-linked --hx custom property to fade/shift/scale it into a
   duplicate "ghost" bottle meant to hand off to Simplicity's own
   figure — removed entirely per explicit request: it produced a
   visible white gap, mismatched/oddly-cropped bottle edges, and never
   actually read as "one bottle becoming the next." Hero is now fully
   self-contained: its product image is ordinary in-flow content that
   scrolls away normally, exactly like every other section's figure.
   Desktop uses the same two-column, proportional-cap grid pattern as
   every other 2-column section on the page (simplicity, transparency,
   membership) instead of a bespoke position:absolute layout.
   ============================================================ */
.panel-hero {
  --band: 100svh;
  /* Hero->Simplicity gap: hero contributes a small share (see the
     desktop override below), Simplicity contributes the rest
     (css/sections/simplicity.css) — combined 80-140px desktop /
     64-96px mobile, editorial spacing instead of a full viewport of
     blank space. */
  padding-bottom: clamp(32px, 4svh, 48px);
}
@media (min-width: 768px) {
  /* small on purpose: at desktop this is ALSO the bottle's distance
     from the bottom of the viewport on first load (see the
     align-items:end/justify-content:flex-end pair below — this is the
     only padding between the bottom-anchored content and the panel's
     own edge, which coincides with the viewport's bottom edge at
     min-height:100svh). Matches the bottle's resting position from the
     pre-removal pinned version (was 100svh*0.02); simplicity.css's
     larger padding-top makes up the rest of the 80-140px section gap. */
  .panel-hero { padding-bottom: clamp(16px, 2svh, 24px); }
}

/* .flex-col-center (css/utilities.css) supplies display/flex-direction/align-items */
.hero-grid {
  text-align: center;
  gap: var(--s4);
}
@media (min-width: 768px) {
  /* bottom-anchor the whole row (not the .panel default's vertical
     centring) so the tall bottle's bottom edge — not its vertical
     centre — sits near the viewport's bottom edge, leaving the
     ~80px+ of headroom above it that --figure-hero-h's own formula
     already assumes for header clearance. Centring the row instead
     (the bug this replaces) pushed the bottle's top up underneath/
     past the fixed header once the image got tall enough. */
  .panel-hero { justify-content: flex-end; }
  /* named areas (not column-only + DOM order) because the DOM order is
     fixed by mobile's needs (text -> bottle -> CTA, see Hero.mjs) but
     desktop's visual order differs: text top-left, CTA bottom-left,
     bottle spanning the full right column. Row 1 (auto) sizes to the
     text's own height; row 2 (1fr) soaks up the rest and is where
     .hero-figure's fixed height "pushes back" against — grid grows the
     1fr row exactly enough to fit the spanning figure, which is what
     lands .cta (bottom-aligned within row 2) on the same baseline as
     the bottle's own bottom edge, matching the pre-removal layout's
     separately-positioned headline/CTA offsets. */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--col-copy-wide)) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "text figure" "cta figure";
    gap: clamp(40px, 6vw, 96px);
    text-align: left;
  }
  /* container-type establishes a query container so the headline (below)
     can size itself off this column's own resolved width via cqw — see
     the audit finding this fixes: at very large monitors (1728px+) the
     column's flat 620px cap stops growing while the svh/vw-based font
     formula keeps growing, and the text runs into (at 2560px, nearly
     onto) the bottle. cqw tracks the ACTUAL column width regardless of
     viewport size, closing that gap structurally instead of hand-tuning
     another magic vw fraction. */
  .hero-copy-top { grid-area: text; align-self: start; padding-top: clamp(64px, 9svh, 120px); container-type: inline-size; }
  /* Hero is the page's one Display moment — see tokens.css's --type-display
     for why this needs its own scoped rule (higher specificity than the
     shared base rule below) rather than just inheriting --type-headline
     like every other section. */
  .hero-copy-top .hero-headline { font-size: var(--type-display); }
  /* scoped to the hero grid — a bare `.cta` here leaked align-self:end onto
     the centred final-CTA (.final-inner .cta), shoving it to the right edge */
  .hero-grid .cta { grid-area: cta; align-self: end; }
  .hero-figure { grid-area: figure; justify-self: center; align-self: end; }
}
/* PORTRAIT TABLETS (768px+ wide, taller than wide — iPad portrait,
   820/834 portrait, a resized tall-narrow desktop window). The desktop
   grid above bottom-anchors the CTA (align-self:end) so it lines up with
   the bottle's own bottom edge — a deliberate baseline relationship that
   reads well on a landscape/widescreen aspect ratio. But on a PORTRAIT
   tablet the bottle fills a very tall right column, which drags row 2
   tall and strands the CTA at the bottom of the left column: measured a
   397px gap between the sub and the CTA at 768x1024, growing to 468px at
   820x1180 (the taller the tablet, the worse). Per the optical-
   composition audit, close that gap by moving the CTA up to sit directly
   under the sub (align-self:start) — the text+CTA now read as one grouped
   block in the upper-left with the tall bottle beside it, instead of two
   fragments pinned to opposite ends of a stretched column. Bottle stays
   centred in its own column. Only orientation:portrait so the
   landscape/widescreen composition (where the bottom-anchor is correct)
   is untouched. */
@media (min-width: 768px) and (orientation: portrait) {
  .hero-grid .cta { align-self: start; margin-top: var(--s3); }
  .hero-figure { align-self: center; }
}
/* short/landscape viewports (a landscape phone is ≥768px wide but often
   only ~380-450px tall, e.g. iPhone Air: 912×420) — the bottom-anchored
   grid above assumes there's real vertical room to spare above the
   bottle; when there isn't, flex-end pins the CTA/email field past the
   visible fold on first paint (it still exists, just requires an
   immediate scroll within the hero itself, which reads as broken/cut
   off rather than intentional). Switch to a plain top-down flow instead,
   same idea as the mobile layout, so the headline+CTA are reachable
   without the row visually overflowing the frame at first glance. */
/* short/landscape viewports need more than just the flex-start fix above:
   the headline is otherwise sized off vw (up to 11vw = ~100px on a 912px-
   wide landscape phone) and eats the whole ~420px height, which shoved
   the bottle small and far below the fold. Here the headline is capped to
   the viewport's own HEIGHT, the copy padding clears the nav, and the
   bottle is sized to the real available height so it stays a substantial
   object whose bottom edge lands on the same line as the CTA (both are
   align-self:end in grid row 2). */
/* layout half of the landscape fix — the type half (.hero-headline /
   .hero-sub font-size) lives AFTER the base type rules further down so it
   wins the cascade; putting it here would lose to the later base rule at
   equal specificity, the trap documented throughout this codebase. The
   .product-figure-hero override is fine here — its base rule is in the
   earlier-loaded product-figure.css, so any hero.css rule beats it. */
@media (min-width: 768px) and (max-height: 600px) {
  /* a DEFINITE height (not just the shared min-height:100svh) is required
     here — the 100%-height chain below (figure -> product-figure -> pf-img)
     can only resolve against a real pixel value, not an auto/content-sized
     ancestor; without this the chain falls back to the image's intrinsic
     929px and balloons way past the viewport. */
  /* --band (base .panel rule's min-height:var(--band), --band:100svh for
     hero) was still forcing the panel back up to a full 100svh even with
     an explicit shorter `height` set below — min-height always wins over
     a smaller height. Override it here too so the two agree. */
  .panel-hero { --band: calc(100svh - 28px); justify-content: flex-start; padding-bottom: clamp(12px, 3vh, 20px); height: calc(100svh - 28px); }
  /* header clearance here = topbar (28px) + the thin nav mode's own 56px
     (css/components/nav.css's matching max-height:600 query — bumped
     from 52 to fit a 44px tap-target nav button) + a small buffer.
     28+64=92 clears the nav's bottom edge at 84 with the same 8px buffer
     this was always tuned to, and the text+CTA column needs every spare
     pixel to fit its own content inside the shortened panel without the
     CTA spilling past the bottom of the viewport (see the .cta/.hero-grid
     trims below — all four of these were tuned together against the
     same overflow, not independently). */
  .hero-copy-top { padding-top: 64px; }
  /* tighter row gap (was the shared clamp(40px,6vw,96px) — 6vw alone is
     ~55px on a 912px-wide landscape phone) and a shorter headline. */
  .hero-grid { gap: clamp(12px, 2vw, 18px); }
  .hero-headline { font-size: clamp(26px, 7vh, 40px); }
  /* the shared .cta{min-height:150px} (css/components/cta-form.css) exists
     to stop the reserve field's "done" success state from reflowing the
     page — real, but 150px is more headroom than this cramped column can
     spare. Scoped to the hero specifically (not the shared rule) so the
     final section / mobile dock's own min-height is untouched. */
  .hero-grid .cta { min-height: 110px; }
  /* the bottle's own top/bottom is now a deliberate, hand-placed span —
     NOT a stretch-to-fill-the-grid-row trick (which anchored the top at
     the grid row's own top edge, i.e. right under the topbar, behind the
     nav — wrong: the brief is "just above the headline"). align-self:end
     bottom-anchors it against row 2 (the CTA row) the same way normal
     (tall-viewport) desktop already does; top is controlled purely by
     this fixed height, tuned against the headline's own top position
     (verified empirically at 912x420 — see the hero.css changelog commit
     for the exact screenshot this was checked against). */
  .hero-figure { align-self: end; height: 333px; position: relative; }
  .hero-figure .product-figure { height: 100%; position: relative; }
  /* NOT height:100% here — .product-figure is `display:grid;place-items:
     center` (its own base rule, for the [data-cycle] crossfade stack),
     and a percentage height on an item of an auto-track grid resolves to
     `auto` per spec even when the grid CONTAINER itself has a definite
     height (confirmed by measuring: .product-figure's own computed
     height was a real 453px, yet the img inside still rendered at its
     929px intrinsic size) — a genuine CSS Grid percentage-resolution
     gotcha, not a cascade/specificity bug. Taking the image out of grid
     flow with position:absolute sidesteps it entirely: percentage
     heights resolve normally against a definite-height positioned
     ancestor for an absolutely-positioned descendant. */
  .product-figure-hero .pf-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-width: none;
  }
}

/* LANDSCAPE PHONES UNDER 768px WIDE (568x320, 667x375, 736x414) — the one
   device class the earlier short-viewport work never reached: the
   min-width:768 landscape block above doesn't match them (too narrow), so
   they fall on the plain mobile flex-column stack (max-width:767, further
   down), where the headline alone fills the whole short screen and the
   bottle + CTA sit entirely below the fold on first paint — the worst
   composition on the site per the optical-composition audit. Fix is to
   extend the SAME two-column idea the >=768 landscape treatment already
   proves works down to these narrower landscape phones: headline/sub/CTA
   share the left column, bottle fills the right, everything on one short
   screen. This block is self-contained (unlike the >=768 landscape block,
   which sits on top of the desktop grid) because under 768 the hero is a
   flex column with no grid underneath — so it re-establishes the grid,
   the area assignments, and the sizing all here. max-height:520 is a safe
   proxy for "landscape phone" in this width band: the only things both
   <768 wide AND <520 tall are phones held sideways (a portrait phone is
   >=568 tall, an iPad split-view pane is far taller). */
@media (max-width: 767px) and (max-height: 520px) {
  .panel-hero {
    /* definite height (see the >=768 landscape block's identical note) so
       the figure's 100%-height chain has a real pixel value to resolve
       against; --band overridden too so min-height doesn't force it back
       up to a full 100svh. */
    --band: calc(100svh - 28px);
    height: calc(100svh - 28px);
    justify-content: flex-start;
    /* the mobile .panel rule (base.css, max-width:767) sets padding-top to
       ~100px and, loading before this file, its later source position beats
       .panel-hero's own padding-top:0 — reinstate 0 here (nav clearance is
       handled by .hero-copy-top's own padding-top below) or that 100px
       lands as dead space above the headline on these short screens. */
    padding-top: 0;
    padding-bottom: clamp(8px, 2.5vh, 14px);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42%);
    grid-template-rows: auto 1fr;
    grid-template-areas: "text figure" "cta figure";
    gap: clamp(16px, 3vw, 32px);
    align-items: start;
    text-align: left;
  }
  /* 52px clears the 28px topbar + 56px mobile nav's bottom edge (84px)
     with a small buffer — the mobile nav keeps its 56px height at this
     width (nav.css's thin-nav rule is scoped >=768), so the same clearance
     the mobile stack already uses applies. */
  .hero-copy-top { grid-area: text; align-self: start; padding-top: 52px; }
  .hero-grid .cta { grid-area: cta; align-self: end; min-height: 92px; }
  .hero-figure { grid-area: figure; align-self: end; justify-self: center; height: min(calc(100svh - 104px), 320px); position: relative; }
  .hero-figure .product-figure { height: 100%; position: relative; }
  .product-figure-hero .pf-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-width: none;
  }
}
/* the very shortest landscape phones (~320px tall, e.g. an old iPhone SE
   held sideways) can't fit the headline + sub + the CTA's label+badge
   row + the email field itself in the left column — the field's bottom
   edge gets clipped. Drop the "JOIN THE WAITLIST" label and the "30% off"
   badge here only: the field with its arrow button is self-evidently a
   signup, so on a screen this cramped a fully-usable input beats a
   decorative label over a cut-off one. Scoped to <=360px tall so 375/414
   landscape phones (which have room and read well WITH the label) keep
   it. */
@media (max-width: 767px) and (max-height: 360px) {
  .panel-hero .cta-top { display: none; }
  .hero-copy-top { padding-top: 48px; }
}

.hero-headline {
  font-weight: 300;
  /* --type-headline (tokens.css) — shared Headline role for every section
     using this class except Hero itself (which scopes its own --type-
     display rule at higher specificity inside the desktop block above).
     Resolves its `cqw` term against whichever column this element's own
     container-type ancestor establishes — see each section's own file
     for where that's set. */
  font-size: var(--type-headline);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--text-primary);
}
/* The headline is two sentences (content/en.mjs's nested-array line groups,
   see content/lines.mjs's br()) — this is the gap BETWEEN them, one step
   tighter than --s3 (the headline-to-subhead gap just below), since it's a
   break within the same headline, not a jump to a new content block. */
.hero-headline .line-group + .line-group { margin-top: var(--s2); }
.hero-sub {
  margin-top: var(--s3);
  max-width: 34ch;
  font-weight: 400;
  font-size: min(clamp(19px, 2.6svh, 23px), 3.4vw);
  line-height: 1.5;
  letter-spacing: 0.01em;
  /* --text-muted (not --text-secondary) matches every other piece of
     supporting copy on the page (.eyebrow, .section-lead). */
  color: var(--text-muted);
}
@media (min-width: 768px) {
  /* each headline/sub string is already an explicit array of lines
     (content/en.mjs, joined with <br>) — nowrap stops the browser from
     ALSO wrapping a line internally once the fixed-width copy column
     narrowed under the grid, which is what let "your family needs."
     break onto two lines even though it's meant to read as one and sit
     flush against the bottle exactly like before. Text is allowed to
     run past the column edge toward the bottle when needed — nothing
     clips it (matches the pre-removal behaviour). */
  .hero-headline, .hero-sub { white-space: nowrap; }
}
@media (max-width: 767px) {
  /* min(..., 34svh) added per the type-system audit — the plain vw clamp
     below was tuned against 812-932px-tall phones and has zero height
     awareness at all; on a genuinely shorter phone still sold today
     (iPhone SE, 375x667) the identical headline measured 254px tall —
     38% of the viewport — pushing the product photo and the waitlist
     form nearly two full screens down. 34svh is a no-op on every phone
     this was already tuned against (co-dominant with the vw clamp there)
     and only engages on short viewports, capping the headline near a
     third of the screen instead. Same fix already proven on desktop
     (--type-display/--type-headline's own svh term) — mobile just never
     had it applied. */
  .hero-headline { font-size: min(clamp(40px, 11.5vw, 68px), 34svh); line-height: 1.02; letter-spacing: -0.045em; }
  .hero-sub { font-size: clamp(21px, 5.2vw, 25px); }
}
/* very narrow phones (iPhone SE / small Androids portrait) — the mobile
   formula above floors at 40px. Above ~348px width the 11.5vw term wins
   and the headline/content-width ratio stays constant (3 clean lines);
   below 348px the 40px FLOOR binds, forcing 40px onto a too-narrow column
   so "your family needs" fractures to "your family" / "needs", turning
   the intended 3-line pyramid (Everything / your family needs / Nothing
   it doesn't) into a 5-line block that fills the whole first screen and
   pushes the bottle almost entirely below the fold. 348px is exactly
   where that floor starts binding (40 / 0.115), so the override is scoped
   there — 360/375 phones keep their full-size headline untouched, only
   the genuinely narrow band (320 and below) gets the smaller floor that
   keeps each line whole. Placed after the max-width:767 block so it wins
   the cascade at that width. */
@media (max-width: 348px) {
  .hero-headline { font-size: min(clamp(30px, 9.4vw, 40px), 34svh); }
}
/* landscape/short-viewport type — placed after the base + mobile rules so
   it wins the cascade (see the layout-half block above). Sized off vh so
   the headline can't grow past the short height and swallow the fold.
   Bare `.hero-headline` is still needed here (not just the more specific
   rule below) — simplicity/story/products/caps/final-cta all share this
   class with no scoped override of their own, so they depend on this
   exact selector for their own landscape sizing. */
@media (min-width: 768px) and (max-height: 600px) {
  .hero-headline { font-size: clamp(28px, 8.2vh, 46px); line-height: 1.02; white-space: normal; }
  .hero-sub { font-size: clamp(15px, 3.4vh, 18px); margin-top: 10px; white-space: normal; }
  /* ADDITIONALLY needed at this same specificity as the cqw ceiling added
     for the large-monitor overflow fix (above), which is scoped to
     `.hero-copy-top .hero-headline` (2 classes) — without a matching
     landscape override at that same specificity, the cqw rule wins
     regardless of source order and this hero-specific breakpoint
     silently stops applying (confirmed: measured 56px instead of ~34px
     at 912x420 before this fix). */
  .hero-copy-top .hero-headline { font-size: clamp(28px, 8.2vh, 46px); }
}
/* type half of the landscape-phone (<768w) treatment — sized off vh so
   the headline stays a compact left-column element instead of the
   screen-filling block the mobile vw formula produces. Placed last so it
   wins the cascade over the max-width:767 mobile rule at equal
   specificity. No cqw term needed (no container-type ancestor under
   768 — see the layout block's note). */
@media (max-width: 767px) and (max-height: 520px) {
  .hero-headline { font-size: clamp(22px, 7vh, 36px); line-height: 1.04; letter-spacing: -0.03em; white-space: normal; }
  .hero-sub { font-size: clamp(12px, 3vh, 15px); margin-top: 8px; white-space: normal; }
}