/* ============================================================
   rawcloser.com — Waitlist page (Phase 7.A.13)
   Page-specific rules ONLY for /waitlist (waitlist/index.html).

   SECTION 1 MIRRORS THE LANDING HERO. Its whole layout system — the
   fold-filling centred section box, the asymmetric copy-left /
   visual-right grid (28rem copy + 900px media, capped 92.25rem,
   centred), the 60rem breakpoint and its stacking (media dropped, not
   shrunk, below it), the --text-6xl heading + matching subhead
   treatment, the MacBook's fill-its-track sizing, the theme swap, and
   the on-load `hero-rise` stagger — is REUSED from landing.css, where
   the hero rules were generalized to serve both pages (one definition,
   two consumers; the hero renders identically). The waitlist classes
   (.wl-intro / .wl-grid / .wl-title / .wl-subhead / .wl-media /
   .wl-shot) are grouped into those hero rules there.

   This file holds ONLY what genuinely DIFFERS from the hero:
     · the waitlist FORM (stacked input-above-full-width-button) and
       the tester affordance beneath it, in place of the hero's CTA row;
     · the product visual's TRUE 3:2 aspect-ratio (the app-home export is
       3:2, not the hero's 1:1) — kept true to avoid squashing; it renders
       at the same width/scale as the hero shot, centred inside a hero-sized
       square media box (see §5);
     · a hero-height SQUARE media box (§5) so the heading lands at the SAME
       HEIGHT as the landing hero's H1 — the 3:2 shot alone is shorter than
       the hero's square and would float the copy (and heading) up;
     · this section's own on-load stagger DELAYS (its element set differs
       from the hero's).

   Consumes tokens.css only — never hardcode a color, spacing, radius,
   type, shadow, or motion value. The few raw numbers below are
   structural layout caps, commented at each use site — the same
   latitude the landing hero takes for its rem caps.
   ============================================================ */

/* ---------- 0. Mobile media sequence (Phase 7.A.32) ---------- */
/* Mirrors landing.css .hero-copy's Phase 7.A.31 mechanism: the product visual
   must sit directly after the H1 and BEFORE the subhead/form/everything else
   on phones — this page previously shipped its shot below the whole copy
   block. The desktop grid (landing.css .wl-grid, shared with .hero-grid)
   places .wl-copy and .wl-media in its two columns purely by DOM order, with
   no `order` override anywhere in this file, landing.css, components.css or
   base.css before this change (grepped — the only hits were the hero's own
   7.A.31 rule and the how-it-works row flip), so the markup cannot move
   without risking that column split.

   Solved the same way as the hero: .wl-copy is unboxed with display:contents
   so its children become direct items of .wl-grid alongside .wl-media, and
   `order` then sequences H1 (default order 0) -> .wl-media (1) -> everything
   else in .wl-copy (2, tied, so they keep their own relative order: subhead,
   form, the 7.C no-JS fallback, the form-status line, the 7.C privacy notice,
   the fine print, the tester link).

   CHECKED FIRST (per the same risk the hero's own comment flags): .wl-copy
   carries no rules of its own anywhere in this file, landing.css,
   components.css or base.css (grepped) — no padding, margin, background or
   max-width, so unboxing it here loses no visual styling. At >=60rem there is
   no override, so .wl-copy reverts to a normal block box and the desktop grid
   keeps exactly the two source-ordered columns it always had. */
@media (max-width: 59.999rem){
  .wl-copy{
    display:contents;
  }
  .wl-media{
    order:1;
  }
  .wl-subhead,
  .wl-form,
  .wl-copy > noscript,
  .form-status,
  .wl-notice,
  .wl-fine,
  .wl-tester{
    order:2;
  }
}

/* ---------- 1. Waitlist form — OWN layout (stacked, full-width) ---------- */
/* The hero's copy column ends in an inline CTA row; this page ends in the
   waitlist FORM instead. The form stacks the email input ABOVE a full-width
   button — distinct from the landing final-CTA form's inline side-by-side pair.
   Both surfaces share the same submission/validation BEHAVIOUR (via
   assets/js/waitlist-form.js, bound to the data-waitlist-form hook) but bring
   their OWN markup + layout; nothing about the stacked layout here is duplicated
   logic. margin-top clears the subhead using the same rhythm scale as the hero. */
.wl-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-top:var(--space-7);
}

/* Email input. No input primitive exists in the site yet, so it is styled from
   tokens here — deliberately the SAME token values as the landing final-CTA
   input (raised surface, strong hairline border, pill radius, --space-2 block
   padding matching .btn height) so the two waitlist surfaces look identical, only
   laid out differently. Full-width: the flex column stretches it. Keyboard focus
   uses the global :focus-visible ring (base.css) — no custom focus rule. */
.wl-input{
  padding-block:var(--space-2);
  padding-inline:var(--space-5);
  background:var(--color-surface-raised);
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-pill);
  color:var(--color-text);
  font-size:var(--text-base);
  transition:border-color var(--dur-fast) var(--ease-standard);
}

.wl-input::placeholder{
  color:var(--color-text-tertiary);
}

.wl-input:hover{
  border-color:var(--color-text-tertiary);
}

/* Full-width submit beneath the input. .btn is inline-flex, so width:100% is what
   makes it span the stacked column. It ships `disabled` (see the markup seam);
   the shared .btn:disabled state (components.css) already reads it as inert. */
.wl-submit{
  width:100%;
}

/* ---------- 1b. Early-access reassurance (muted fine print) ---------- */
/* The "discount stays with you…" line, directly under the form. Deliberately the
   quietest text on the section — the hero fine-print treatment (--text-sm +
   --color-text-tertiary, same as landing.css .hero-req) — so it reads as offer
   reassurance without competing with the medium-weight tester LINK beneath it.
   It hugs the form (--space-4, tighter than the tester's --space-6 below it) so it
   groups with the offer/CTA rather than the tester affordance. Its on-load
   fade-and-rise beat is in §4. */
.wl-fine{
  margin-top:var(--space-4);
  font-size:var(--text-sm);
  color:var(--color-text-tertiary);
}

/* ---------- 2. Tester affordance ---------- */
/* Small line under the form — identical pattern + token values to the landing
   final-CTA tester line: quiet secondary lead-in, then a medium link that shifts
   tone on hover (the arrow is the affordance, no underline). */
.wl-tester{
  margin-top:var(--space-6);
  font-size:var(--text-base);
  color:var(--color-text-secondary);
}

.wl-tester a{
  color:var(--color-text);
  font-weight:var(--weight-medium);
  transition:color var(--dur-fast) var(--ease-standard);
}

.wl-tester a:hover{
  color:var(--color-text-secondary);
}

/* ---------- 3. Product visual — the one aspect-ratio that differs ---------- */
/* The MacBook's WIDTH sizing (fills the track → ~900px) and the theme swap are
   the hero's, reused from landing.css via the grouped .wl-shot / .hero-shot
   selectors. Being dropped below 60rem is NO LONGER shared, Phase 7.A.27: unlike
   the hero (held there for payload reasons — see landing.css's .hero-media
   rule), this page's shot is one ~200KB pair of theme exports, accepted, so it
   now SHOWS on mobile too, capped smaller instead of dropped (below). The
   asset's true shape differs: the app-home export is 3:2 (webp 4260×2840),
   not the hero's 1:1. Setting the real ratio here reserves the
   correct box before load (no CLS) and prevents the square hero ratio from
   squashing this wider image. Its VERTICAL placement is set in §5, where the
   shot is centred inside a hero-sized square media box so the heading aligns
   with the landing hero's — that §5 rule is a >=60rem-only override and is
   untouched here.
   Targets .wl-shot directly, not a nested `img` — Phase 7.X collapsed the
   <picture>/<source> PNG-fallback wrapper to a plain <img> once the PNG
   exports were deleted, so the class sits on the <img> itself now (see
   landing.css's matching .hero-shot/.wl-shot rule for the shared half of
   this). */
.wl-shot{
  aspect-ratio:3 / 2;
}

/* Mobile cap, Phase 7.A.27. Below 60rem .wl-media is a plain block box (the
   grid's default stretch makes it as wide as the track — landing.css .wl-grid
   — same as the page's content width), so left uncapped the shot would run the
   full row width at its 3:2 ratio: ~230px tall at a 393px viewport. Capped on
   .wl-shot specifically, not the shared .hero-shot/.wl-shot display:block rule
   above, so the rule stays scoped to this one selector.
   WIDENED 60% -> 80% and CENTRED, Phase 7.A.33, in step with landing.css
   .hero-shot's identical change (see that file's comment for the full
   375/393/430px numbers and the 80-vs-100% reasoning — both shots move
   together so the landing and waitlist first sections keep reading as one
   system). Centring needs margin-inline:auto on the block box, not
   text-align. */
@media (max-width: 59.999rem){
  .wl-shot{
    max-width:80%;
    margin-inline:auto;
  }
}

/* ---------- 4. Section-1 on-load stagger — this page's own beats ---------- */
/* The `hero-rise` animation itself (keyframe + the raw 900ms + easing) is applied
   to these elements by the SHARED rule in landing.css, so the motion family is
   identical to the hero and it is defined only once. What is page-specific is the
   ORDER of the beats — this section's element set is heading → supporting line →
   FORM → fine print → tester link → visual (the hero's is heading → subhead → CTA
   → fine-print → visual). So only the per-element DELAYS live here, spaced by the
   same --stagger token: the heading leads (no delay), the visual lands last.

   No reduced-motion guard is needed here — landing.css's shared guard already
   lists these elements and kills the animation outright under reduced motion, so
   a reduced-motion visitor sees section 1 instantly and completely. */
.wl-subhead{ animation-delay:var(--stagger); }
.wl-form{    animation-delay:calc(var(--stagger) * 2); }
/* The 7.C privacy notice takes the FORM's beat rather than a beat of its own.
   Two reasons, and both matter: it belongs to the form it describes, so it
   should arrive with it and not a step behind; and giving it its own beat would
   push .wl-fine, .wl-tester and .wl-media each one step later, retiming a
   settled sequence to seat a line of fine print. */
.wl-notice{  animation-delay:calc(var(--stagger) * 2); }
.wl-fine{    animation-delay:calc(var(--stagger) * 3); }
.wl-tester{  animation-delay:calc(var(--stagger) * 4); }
.wl-media{   animation-delay:calc(var(--stagger) * 5); }

/* ---------- 5. Heading height parity with the landing hero ---------- */
/* The hero asset is 1:1, so the hero's media column is as TALL as the track is
   wide, and the copy centres against that tall square — that is what fixes the
   hero H1's height on the page. The waitlist asset is 3:2 (shorter): with the
   shared layout its media just fills the track, so this row is shorter, the
   centred copy floats higher, and the heading sits ABOVE the landing hero's.
   To land the heading at the SAME HEIGHT as the hero (the ask), reserve the SAME
   square footprint for the media here — .wl-media becomes a 1:1 box, the hero's
   height — so this row is the hero's height, the copy centres to the hero's place,
   and the H1 lines up with the landing hero's at EVERY width, not just one. The
   3:2 shot keeps its real width/scale and is centred inside that square box
   (breathing room above/below) instead of being stretched. Waitlist-only; the
   hero is untouched and still renders identically. Scoped to the shared 60rem
   breakpoint — below it the media is dropped, so there is no row to match. A
   small residual can remain because this page's copy (the form) is a little
   taller than the hero's CTA row, so the two centred blocks aren't identical in
   height; the heading heights match to within that difference. */
@media (min-width: 60rem){
  .wl-media{
    aspect-ratio:1 / 1;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

/* ---------- 6. Section 2 — "What you're joining" (7.A.15) ---------- */
/* A deliberately TEXT-ONLY beat. Section 1 carries the MacBook, so this section
   has no visual — it rides the shared .section rhythm (--space-section-y top +
   bottom) and gets extra internal air so the type carries it. It sets NO
   background, so it stays on the site DEFAULT --color-bg — NOT the landing
   privacy band's recessed --color-surface. The .container caps + centres the
   content on the same gutter as every landing section.

   Reveal is the GENERIC scroll ruleset (landing.css §2): .reveal on the section,
   .r-rise on the heading, the lead, and each point — so no reveal CSS lives here
   (this differs from section 1, whose on-load hero-rise beats ARE in §4). */

/* Tighten the gap to section 1. Section 1 (.wl-intro) is a fold-filling
   min-height box whose padding-block-end (--space-section-y) is mostly absorbed by
   the fold, so the visible gap to this section is driven by ITS top padding. Left
   at the shared .section default (--space-section-y both sides), that top runs the
   full fluid section height and reads as too large a void after the hero fold. Cap
   it at --space-9 — exactly the landing convention, where the hero's bottom stays
   --space-section-y while the following (problem) section's top is capped at
   --space-9, so only ONE side runs the full section height. padding-top overrides
   only the top half of .section's padding-block shorthand; the bottom is set
   separately in §7 (the coda bind). */
.wl-joining{
  padding-top:var(--space-9);
}

/* Centred intro — the same quiet-beat treatment as the landing "problem" section:
   the heading a step below the hero (--text-5xl, the section-heading step) with a
   secondary-tone lead beneath, both centred in a balanced measure so the two short
   sentences read as flowing statements. The rem caps are structural layout dims
   (same category as the hero's 28rem copy cap / the problem's 56rem measure),
   never design tokens. */
.wl-joining-intro{
  max-width:48rem;         /* heading measure; structural rem cap, not a token */
  margin-inline:auto;
  text-align:center;
}

.wl-joining-title{
  font-size:var(--text-5xl);
  text-wrap:balance;
}

.wl-joining-lead{
  font-size:var(--text-lg);
  color:var(--color-text-secondary);
  max-width:40rem;         /* narrower than the heading; structural rem, not a token */
  margin-inline:auto;
  margin-top:var(--space-5);
  text-wrap:balance;
}

/* The three points. One column on mobile (stacked), a row of three at the shared
   60rem breakpoint (below). Deliberately NOT cards — no border, no fill, no
   radius, no shadow: quiet structured text. A generous top gap off the intro
   (--space-9) and a wide inter-column gap (--space-7) keep the beat airy, since
   there is no visual to fill the section. Text is centred to sit under the centred
   intro; the grid is capped a little narrower than the full container so the
   columns hold a comfortable measure rather than stretching edge to edge. */
.wl-points{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-7);
  max-width:60rem;         /* structural rem cap, not a token */
  margin-inline:auto;
  margin-top:var(--space-9);
  text-align:center;
}

/* Small bold label over one supporting line. The label sits at the primary text
   tone, --text-md and semibold — small, but a clear head; the line drops to the
   secondary tone at base size, spaced off the label by --space-2. The line is
   capped to a comfortable per-column measure so it doesn't run too wide when the
   row collapses to a single column on mobile. */
.wl-point-label{
  font-size:var(--text-md);
  font-weight:var(--weight-semibold);
}

.wl-point-body{
  font-size:var(--text-base);
  color:var(--color-text-secondary);
  margin-top:var(--space-2);
  max-width:22rem;         /* per-column measure; structural rem cap, not a token */
  margin-inline:auto;
}

/* Row of three at the shared 60rem breakpoint (the one the hero + how-it-works +
   features + privacy all use). */
@media (min-width: 60rem){
  .wl-points{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* ---------- 7. Section 3 — compact coda, fused to section 2 (7.A.17) ---------- */
/* Restructured from the former standalone full-height CENTRED text section into a
   COMPACT CODA bound to section 2, so 2 + 3 read as one unit (anchor + coda). The
   old centred stack (heading --text-5xl, lead --text-lg, offer --text-xl, all
   centred in their own full --space-section-y block) is gone entirely — no orphan
   rules from it remain. The <section> now drops the shared .section class, so this
   block sets its OWN compact padding instead of the full section rhythm. */

/* Bind (part 1): shrink section 2's BOTTOM padding so the coda pulls up against it
   (section 2's top padding + its content are untouched). .wl-joining beats
   components.css .section on source order at equal specificity; this padding-bottom
   longhand overrides only the bottom half of .section's padding-block shorthand. */
.wl-joining{
  padding-bottom:var(--space-7);
}

/* The coda block. Compact vertical padding — no top padding (the gap above the
   divider comes from section 2's shrunk bottom), a modest bottom before the footer
   — nothing like the full-section rhythm. The two reveal overrides make its
   fade-and-rise SUBTLER (a smaller rise) and QUICKER (a shorter duration) than
   section 2's; both are set on this scope and inherited by the .r-rise children
   through the generic reveal rule's var() reads (landing.css §2), so the coda
   settles fast without pulling focus from the anchor. */
.wl-next{
  padding-bottom:var(--space-8);
  --reveal-rise:var(--space-5);   /* 24px rise, vs the global 64px — subtler */
  --dur-reveal:var(--dur-slower); /* 480ms settle, vs the global 1400ms — quicker */
}

/* Bind (part 2): a container-width hairline top divider = the continuation rule
   between anchor and coda. Its padding-top sets the gap BELOW the rule to the coda
   content; the gap ABOVE it comes from section 2's shrunk bottom padding. Capped
   narrower than the full container and left-aligned so the strip reads tighter than
   the centred stack it replaced. */
.wl-next-strip{
  max-width:52rem;           /* structural rem cap, not a token */
  margin-inline:auto;
  padding-top:var(--space-7);
  border-top:1px solid var(--color-border);
}

/* Two-part strip at the shared 60rem breakpoint: reassurance LEFT, discount RIGHT,
   top-aligned. The discount column is given a hair more width since it is the
   longer, emphasised half. Below the breakpoint the two parts stack (reassurance
   above the discount). */
@media (min-width: 60rem){
  .wl-next-strip{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:var(--space-7);
    align-items:start;
  }
}

/* Reassurance column — the quiet half. Small heading (a step down to --text-md
   semibold, subordinate to the big centred anchor above) over a compact lead at
   base size in the muted secondary tone. */
.wl-next-title{
  font-size:var(--text-md);
  font-weight:var(--weight-semibold);
}

.wl-next-lead{
  font-size:var(--text-base);
  color:var(--color-text-secondary);
  margin-top:var(--space-2);
  max-width:34rem;           /* comfortable measure; structural rem cap, not a token */
}

/* Discount — the emphasised half. It keeps SOME weight in the otherwise-quiet
   strip (it is the reason the page exists): the PRIMARY text tone against the
   lead's muted secondary, and a step LARGER (--text-lg) — a slight lift, NOT a
   card/callout (no border, fill, radius, or shadow). text-wrap:pretty trims orphans
   on a multi-line paragraph without forcing an even ragged edge. When the strip
   stacks on mobile it sits under the reassurance with a clear --space-6 gap; on the
   desktop grid it is its own column, so that gap is dropped (see below). */
.wl-next-offer{
  font-size:var(--text-lg);
  color:var(--color-text);
  max-width:36rem;           /* structural rem cap, not a token */
  margin-top:var(--space-6);
  text-wrap:pretty;
}

@media (min-width: 60rem){
  .wl-next-offer{
    margin-top:0;            /* the grid gap handles column separation */
  }
}

/* ---------- 8. Section 4 — privacy line (7.A.17) ---------- */
/* The page's final section: one quiet reassurance + one text link, between the
   section-3 coda and the footer. Deliberately SMALL. It sets NO background, so it
   stays on the site DEFAULT --color-bg (NOT the landing privacy band's recessed
   --color-surface), and rides the shared .container gutter. Its padding-block is
   compact — well short of the full --space-section-y section rhythm — so the beat
   reads as a closing note, not a fourth full section.

   Reveal is the GENERIC scroll ruleset (landing.css §2): .reveal on the section,
   .r-rise on the line then the link. The two local overrides make its
   fade-and-rise SUBTLER (a smaller rise) and QUICKER (a shorter settle) than
   section 2's — the same treatment the section-3 coda takes (§7) — so this closing
   note doesn't pull focus; both are read by the generic reveal rule's var() reads
   on the .r-rise children (landing.css §2). */
.wl-privacy{
  padding-block:var(--space-8);
  --reveal-rise:var(--space-5);   /* 24px rise, vs the global 64px — subtler */
  --dur-reveal:var(--dur-slower); /* 480ms settle, vs the global 1400ms — quicker */
}

/* Centred, capped to a comfortable measure so the single sentence reads as a calm
   line rather than running edge to edge — the same centred quiet-beat treatment as
   section 2's intro, at a narrower cap since this is one short sentence. */
.wl-privacy-inner{
  max-width:44rem;           /* structural rem cap, not a token */
  margin-inline:auto;
  text-align:center;
}

/* The reassurance line. Muted secondary tone at base size — quiet, but a step
   above the fine-print tertiary tone so it still reads as a real statement.
   text-wrap:balance keeps the two clauses evenly ragged across the measure (same
   treatment as the section-2 title/lead). */
.wl-privacy-line{
  font-size:var(--text-base);
  color:var(--color-text-secondary);
  text-wrap:balance;
}

/* The text link beneath it — the SAME quiet-link treatment as the tester
   affordance (§2): a medium-weight link at the primary tone that softens on hover,
   the arrow carrying the affordance (no underline). Spaced off the line by
   --space-4 so the line + link group as one closing note. */
.wl-privacy-link{
  margin-top:var(--space-4);
  font-size:var(--text-base);
}

.wl-privacy-link a{
  color:var(--color-text);
  font-weight:var(--weight-medium);
  transition:color var(--dur-fast) var(--ease-standard);
}

.wl-privacy-link a:hover{
  color:var(--color-text-secondary);
}