/* ============================================================
   SECTION 9 — FINAL CTA
   The closing scene of the page. Deliberately the quietest section on
   the site: a single emotional line, one supporting sentence, the
   waitlist field with no label/badge dressing, an unobtrusive footnote,
   and a calm two-row footer below a hairline divider. Content-height
   (no forced --band) — its bottom padding is the page's own resting
   margin, not a gap to a following section (there is none).
   ============================================================ */
/* the whole footer (divider + brand/social/lang row + metadata) is pinned
   flush to the true bottom edge of the screen, on EVERY viewport, not
   just desktop — .final-inner stretches to fill a 100svh floor and
   .final-footer's margin-top:auto consumes whatever's left above it (see
   the pinning block below). If real content ever exceeds 100svh (a very
   short window, long translations, …), min-height simply stops mattering
   and everything reverts to plain natural stacking — this never clips or
   forces a scrollbar, it only pins when there's spare room to pin into. */
.panel-final {
  min-height: 100svh;
  /* the one true "act break" on the page: feature content (caps, the
     last editorial section) ends and the emotional close begins, so
     this gets noticeably more air than the shared inter-section rhythm
     (.panel's own padding-top, ~108-140px desktop) — roughly 1.75-2x
     it, the same proportion Apple's own product pages give the seam
     right before a closing CTA screen. Scales with viewport height
     (svh) like the rest of this section's rhythm tokens, not a flat
     px value, so it stays proportional on short/tall windows too. */
  padding-top: clamp(140px, 20svh, 260px);
  /* small and fixed — the footer is pinned flush to the edge instead of
     padded away from it, so this is just a hair of breathing room below
     the metadata row, not the "resting margin" it used to carry alone. */
  padding-bottom: var(--space-fluid-standard);
}
.final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* generous, section-local rhythm — deliberately larger than the shared
     --s4 token other sections use for internal gaps, so the page reads
     as slowing down and coming to rest rather than keeping the same
     pace it held throughout. */
  gap: clamp(40px, 7svh, 80px);
  /* fills the panel's 100svh floor (minus its padding) so .final-footer's
     margin-top:auto below has real space to push into. */
  flex: 1;
  min-height: 0;
}
/* pushes the whole footer down to the bottom of the now-stretched
   .final-inner — divider, brand/social/lang row and metadata travel down
   together as one unit, flush with the panel's own bottom edge. */
.final-footer { margin-top: auto; }

/* ---- H1 + supporting line -------------------------------------- */
/* query container for the shared --type-headline token's cqw term
   (css/tokens.css) — centered, full-wrap-width heading, generous no-op
   ceiling rather than a binding constraint (same role as story.css's
   and products.css's matching containers). */
/* width:100% is load-bearing, not decorative — .final-inner's own
   align-items:center (above) makes a flex item shrink-to-fit its content
   by default, and a container-type element whose OWN size depends on its
   content (which here includes the headline this very container query
   is sizing) is a circular dependency; browsers resolve that by
   collapsing the containment size to 0, which briefly rendered the
   entire heading at font-size:0 before this fix. width:100% gives
   .final-copy a definite size independent of its content, breaking the
   cycle; visual centering is unaffected since the children already
   center themselves (text-align + margin-inline:auto). */
.final-copy { container-type: inline-size; width: 100%; }
.final-copy .hero-headline { margin-inline: auto; }
.final-lead {
  margin-top: var(--s3);
  max-width: 680px;
  margin-inline: auto;
  font-weight: 400;
  font-size: var(--t-desc);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- waitlist field: the primary CTA, no label/badge above it --- */
.final-cta-form { align-items: center; text-align: center; }
/* same type treatment as the "Nothing unnecessary" editorial intro body
   ("We believe every ingredient has a purpose…", .editorial-intro-body
   p in css/sections/simplicity.css) per request — the shared smaller
   Body tier (--t-body), matching font-weight/line-height/tracking/colour. */
.final-founding {
  margin-top: var(--s3);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
/* keep the footnote visible and settled once the form's own success
   message takes over the row above it — it's independent, factual
   information, not part of the submit flow. */
.cta.done .final-founding { margin-top: var(--s3); }

/* ---- bottom footer: hairline, then a calm single row ------------ */
.final-footer { width: 100%; }
.final-footer-divider {
  width: 100%;
  height: 1px;
  background: var(--border-default);
}
.final-footer-row {
  margin-top: var(--space-fluid-generous);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: clamp(18px, 2.5svh, 28px);
  column-gap: clamp(20px, 3vw, 40px);
}
/* matches .site-nav-logo (css/components/nav.css) exactly — same
   wordmark treatment as the header, just living in the footer instead
   of a clickable nav element. */
.final-footer-brand {
  font-weight: 200;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.final-footer-meta {
  margin-top: var(--space-fluid-tight);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 16px);
  font-size: var(--t-label);
  color: var(--text-disabled);
}

/* ============================================================
   DESKTOP — only the TOP gap differs from the shared base rule above
   (the pinning itself — min-height:100svh, .final-inner's flex:1, and
   .final-footer's margin-top:auto — now applies everywhere, mobile
   included). Desktop gets noticeably more top air: the seam is a bigger
   visual jump there (a whole viewport-height product gallery gives way
   to the ending), so it's bumped past the shared/mobile value.
   ============================================================ */
@media (min-width: 768px) {
  .panel-final { padding-top: clamp(200px, 24svh, 320px); }
}
/* short/landscape viewport (see hero.css's matching query) — the 200px+
   floor above is a purely decorative "act break" gap, the single
   largest chunk of this section's own height (measured: ~200 of 645px
   total at 912x420). js/nav.js hides the topbar+nav once this section
   is in view at this breakpoint (freeing the ~90px they'd otherwise
   cost), so it's wasteful to also spend 200px on pure air above the
   heading — every other gap in the section is trimmed too, all scaled
   down together against the same overflow. */
@media (max-height: 600px) {
  .panel-final { padding-top: clamp(20px, 5vh, 32px); }
  .final-inner { gap: clamp(10px, 2.4vh, 18px); }
  .final-lead { margin-top: 6px; }
  .final-founding { margin-top: 6px; }
  .final-footer-row { margin-top: clamp(10px, 2vh, 16px); }
  .final-footer-meta { margin-top: clamp(8px, 1.6vh, 12px); }
}
/* per request, .final-lead should read at the same size/weight as the
   membership eyebrow ("The more you're with us, the more you get") at this
   breakpoint — same reasoning/formula as .caps-sub's matching override
   (css/sections/caps.css): that eyebrow rule was never given its own
   landscape shrink, so match its literal values instead of picking a new
   one. min-width:768 needed here (unlike the shared block above) since
   this is a font-size change, not a spacing one, and should only apply
   once the layout has actually switched to the 2-column desktop grid. */
@media (min-width: 768px) and (max-height: 600px) {
  .final-lead { font-size: min(clamp(19px, 2.6svh, 23px), 3.4vw); }
}

/* ============================================================
   MOBILE — a deliberately different composition, not a scaled-down
   desktop layout. The footer is pinned to the bottom edge here too (see
   the shared base rule above) — if the section's own content ever grows
   taller than 100svh on a given phone, the min-height simply stops
   mattering and it all reverts to plain natural stacking, so this never
   clips or forces an awkward scroll.
   ============================================================ */
@media (max-width: 767px) {
  /* 2. supporting line — tighter column than desktop (280-320px, vs.
     680px), reads as a short, calm sentence rather than a paragraph */
  .final-lead { max-width: 300px; }

  /* brand + social share one row (brand left, social right — same
     space-between pairing as desktop), language switcher gets its own
     row directly below with both labels on one line. */
  .final-footer-row {
    flex-wrap: wrap;
    row-gap: clamp(20px, 4svh, 32px);
  }
  .final-footer-row .lang-switch {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 0;
  }
  /* the shared footer-controls.css rule hides language labels below
     768px (flags-only, for the old hamburger-menu context) — this is
     the one remaining consumer of .lang-switch, and this brief asks
     for the full label on mobile too, so it's restored here. */
  .final-footer-row .lang-text { display: inline; }

  /* bottom metadata — one line, same as desktop (shorter now that the
     location string is just "Argentina", not the full city+country). */
  .final-footer-meta { margin-top: clamp(24px, 4svh, 36px); }
}