/* ============================================================================
   HOME PAGE design tokens (t1798: responsive). Source tags:

     [REF]  measured from the approved still hero_desktop_composition_v1_t1786u_1440x900.png (sha256 7471da2f...)
            with _tools/measure_reference.py, or stated in the approved package
     [AUTH] authored source in the package (v3c nav morph: source_nav_morph.css, source_scroll_controller.js)
     [DERIVED] inferred from [REF] by arithmetic or font metrics
     [USER] a user instruction in this thread (t1793 rounding)
     [PROPOSAL] new in t1798 for the responsive layouts; not in the package

   RESPONSIVE MODEL
   - Desktop landscape (width >= 900px and aspect >= 23:20): the approved 1440x900 composition, scaled by --u.
     --u is exactly 1px at 1440x900, so that viewport reproduces the approved numbers. Body copy and form scale with --u;
     the upper group is anchored to the top, the invite group to the bottom of the hero. The nav is chrome and keeps its px sizes.
   - Narrow or portrait (width < 900px or aspect < 23:20, including tablets and phones): stacked layout [PROPOSAL]: the approved video on
     top as a band (cover, subject framed with --band-pos), the copy below on black, the invite group at the bottom.
   ========================================================================== */

/* Font: Geist only, the package's file. [REF] */
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }   /* the same variable Geist, Latin subset (W5); preloaded by index.html */
@font-face { font-family: "Geist"; src: url("../assets/fonts/Geist-Variable-other.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC, U+FFFE-10FFFF; }   /* every other glyph of the full font, fetched only if a page uses one */

:root {
  /* ---- Colour ---- */
  --white: #FFFFFF;
  --ink: #0A0A0A;                   /* [AUTH] */
  --black: #000000;
  --emblem-red: #d00000;            /* red top, package RED_TOP_WHITE_EMBLEM.svg [REF] */
  --emblem-body: #FFFFFF;           /* [REF] */
  --deadline-blue: #E13A26; /* t1949 */         /* the deadline's BLUE accent rule: rgb(64,109,229) sampled at (44,677) [REF] */
  --field-bg: #141414;              /* form background, rgb(20,20,20) [REF] */
  --cta-rest: #EDEDED;              /* header CTA fill at scroll 0 [REF][AUTH] */
  --font: "Geist", system-ui, -apple-system, sans-serif;

  /* ---- Scale unit: one design pixel. 1px exactly at 1440x900. Clamped so type never goes microscopic or absurd. [PROPOSAL for other sizes] ---- */
  /* HERO HEIGHT [PROPOSAL, t1807]. The hero is the viewport height, but never taller than width / 1.45. The approved composition is 16:10; in a tall window (the t1806
     half-monitor screenshot was about 1420 x 1233, aspect 1.15) a full-height hero stretched the video by HEIGHT (2192px wide, face cut off at the right edge) and left a 536px
     hole between the agent line and the form. Capped, the video keeps roughly the approved framing and the copy keeps the approved spacing. Below the hero the page is black. */
  --hh: min(100svh, calc(100vw / 1.45));
  --u: clamp(0.7px, min(100vw / 1440, var(--hh) / 900), 2.4px);   /* 2.4 = a 3840x2160 window is the 16:10 composition scaled 2.4x (t1807; was 1.8, which left a huge gap at 4K) */
  /* TYPE unit [PROPOSAL, t1803]. Equals --u at and above 1440x900 (type grows with the window) but falls only 0.55 as fast below it:
     0.45px + 0.55 * u. At u = 0.7 the type unit is 0.835px, not 0.7px, so text stays readable in intermediate windows while spacing and the form adapt. */
  --t: max(var(--u), calc(0.45px + 0.55 * var(--u)));
  /* VIDEO BOX HEIGHT (2026-11-09). The hero itself is at least the viewport (--vh-now) so #team-f2 stays below the fold. A taller-than-1.45
     hero with object-fit:cover and object-position 0% 30% scales the 1600x900 master by HEIGHT and crops the silhouette at the right edge
     (the 100vh/--vh-now min-height change made this visible at ~1024x860). Cap the VIDEO's used height at max(--hh, 100vw/1.3), top-aligned
     in the hero: mid windows (~900-1280 x 700-1000) keep the figure in frame and give type a real --disc, while 1440x900 and other 16:10
     (and wider) layouts are unchanged because --hh already equals the viewport. */
  --video-h: min(var(--vh-now, 100dvh), max(var(--hh), calc(100vw / 1.3)));
  /* Where the light (the arc's left edge, 1404 source px) starts on screen. Desktop type is capped so its widest line ends 12px before this.
     Follows the video box height, not only the --hh typography cap, so type can use width when the video is taller than --hh.
     2026-11-09 t2043u: --disc subtracts the cover crop's source-left (--src-l) so headline clearance tracks object-position. */
  /* --cover-span is the 3840px master width after cover-scale, in CSS px. --src-l is how far the cover window shifts right, also in CSS px (CSS cannot divide lengths, so this stays in px rather than source pixels).
     2026-11-09 t2052u: text room wins. --text-need is where the arc must start for the headline and description to sit at their full (uncapped) size
     with --text-air of clear space. The crop shift (--src-l) may only spend room beyond that, so it can never shrink the type; where the arc starts
     short of it (half-window widths), --video-nudge moves the video right instead, up to --nudge-max, giving the text its room back. */
  --cover-span: max(100vw, calc(3840 * var(--video-h) / 2160));
  --disc0: calc(1404 * max(100vw / 3840, var(--video-h) / 2160));
  --text-air: 40px;                 /* 1440x900: 545.5 + 40 = 585.5 >= 585, so no shift and the approved composition is exactly the pre-crop one */
  --nudge-max: 0px;                 /* wide windows never push the video right */
  --text-need: calc(var(--gutter) + 12px + var(--text-air) + max(calc(var(--h1-size) * var(--tbh) * 8.9), calc(var(--desc-size) * var(--tb) * 22.1)));
  --src-l: clamp(0px, calc(var(--disc0) - var(--text-need)), calc((var(--cover-span) - 100vw) * var(--video-pos-x, 0)));
  --video-nudge: clamp(0px, calc(var(--text-need) - var(--disc0)), var(--nudge-max));
  --disc: calc(var(--disc0) - var(--src-l) + var(--video-nudge));

  /* READING BOOST [PROPOSAL, t1807]. Exactly 1 at the approved 16:10 and wider (so 1440x900 is untouched). In squarer windows the layout has spare room and the
     supporting text was measured (t1806 screenshot) at exactly the approved 21px / 18px on a window that is about 56% of a large monitor, which reads small. So the supporting
     text and the form grow in steps as the window gets squarer: --b for description, agent, deadline, code line, form and gaps; --bh (about half as much) for the headline.
     This is NOT a height multiplier: it keys off aspect ratio only, and the base sizes come from the window width (via --u and --t). */
  --b: 1;  --bh: 1;
  --ub: calc(var(--u) * var(--b));        /* layout unit for the groups' gaps and controls */
  --tb: calc(var(--t) * var(--b));        /* type unit for supporting text */
  --tbh: calc(var(--t) * var(--bh));      /* type unit for the headline */

  /* ---- Body type and position, in DESIGN PIXELS at 1440x900 (unitless; multiplied by --u in home.css) ----
     "top" values place each line box so its BASELINE lands on the baseline measured in the PNG, using Geist's hhea metrics
     (ascent 1.005em, descent 0.295em): baseline = top + (line-height - 1.3em) / 2 + 1.005em. [DERIVED] */
  --copy-left: 44;                  /* text origin x [REF]; reference value for the checks only: the CSS aligns copy to --gutter, which is 44px on desktop */
  --h1-size: 59.4;                    /* H cap height 39px / Geist capHeight 0.71 [DERIVED] */
  --h1-lh: 63.72;                      /* line pitch 175, 234, 293 [REF] */
  --h1-weight: 500;                 /* [DERIVED] */
  --h1-tracking: -0.022em;          /* [DERIVED] */
  --h1-top: 165;                    /* line-1 baseline y=214 [DERIVED] */
  --desc-size: 22.68;                  /* 21px Geist 400, line-height 32px, width 450 [REF] */
  --desc-lh: 34.56;
  --desc-weight: var(--agent-weight);   /* t1815: the subline uses the agent line's weight (one source, so they cannot drift). t1857u: that weight is now 400 for both (the subline was 400 in the approved PNG, then 500 from t1815 to t1856; the agent line was 500). */
  --desc-top: 393.66;                /* baseline y=403 [DERIVED] */
  --agent-size: 22.68;                 /* [DERIVED] */
  --agent-weight: 400;              /* t1857u: regular 400 (was 500, medium), Tavio "less bold". The ONE source for both supporting lines (.agent, and .sub through --desc-weight), at every width: no other rule sets their weight. The real 400 instance of the loaded variable Geist (fvar wght 100 to 900, default 400; @font-face "100 900"); no synthetic weight, no family swap. */
  --agent-top: 461.22;               /* baseline y=468 [DERIVED] */
  /* Net 36px above original (headline, agent) and 21px (description): inside the numbers above [REF: package README]. */

  /* ---- Invite group, original position [REF] ---- */
  --deadline-top: 663;              /* blue rule x=44..45, y=663..690 [REF] */
  --deadline-h: 28;
  --deadline-rule-w: 2;
  --deadline-pad: 12;               /* [DERIVED] */
  --deadline-size: 18;              /* [DERIVED] */
  --deadline-weight: 500;           /* [DERIVED] */
  --form-top: 707;                  /* white 2px frame x=44..483, y=707..766 (440 x 60) [REF] */
  --form-w: 440;
  --form-h: 60;
  --form-border: 2;                 /* [REF] */
  --form-pad: 4;                    /* dark ring between frame and button [REF] */
  --form-btn-w: 190;                /* white button x=288..477 [REF] */
  --form-btn-h: 48;                 /* y=713..760 [REF] */
  --form-radius: 0px;               /* square corners [REF] */
  --form-size: 18;                  /* [DERIVED] */
  --form-input-pad: 12;             /* [DERIVED] */
  --code-top: 782.6;                /* "Have an invite code?" baseline y=803 [DERIVED] */
  --code-lh: 28;
  --code-size: 18;                  /* [DERIVED] */
  --code-underline-offset: 3;       /* underline row y=806, baseline y=803 [REF] */
  --ref-h: 900;                     /* the reference viewport height; the invite group is bottom-anchored: top = hero height - (900 - y) * --u */

  /* ---- Video: master projected 1600x900 and cropped [REF: package README] ----
     Desktop object-position: horizontal --video-pos-x (0 = left-pin, as originally). Vertical anchor 30% only matters on
     ultra-wide windows, where cover crops top and bottom; at 16:10 there is no vertical crop.
     2026-11-09 t2043u: shift right enough that 1440/1280 no longer shave the rear glow, and 1024 shows more of the disc,
     without eating headline/--disc clearance. Stacked layout still uses --band-pos, unchanged.
     2026-11-09 t2052u: --video-pos-x is now only the CAP on that shift; the shift itself (--src-l) is limited to room the text does not need. */
  --video-pos-x: 0.40;              /* cap: at most 40% of the cover overflow */
  --video-position: calc(var(--video-nudge) - var(--src-l)) 30%;   /* t2052u: in px, = the cover shift (left) or the half-window nudge (right) */
  /* Stacked layout band. Framing numbers are a PROPOSAL: the face spans about x 740..1070 and the arc edge begins near x 585 of the 1600x900 projection. */
  --band-h: clamp(300px, 46svh, 560px);
  --band-pos-phone: 74% 50%;        /* width < 600px */
  --band-pos-tablet: 60% 50%;       /* 600px and up */
  --band-pos: var(--band-pos-tablet);

  /* ---- Bottom spatial fade, CSS only; the master is never altered ----
     Black overlay, smoothstep alpha from 80% to 98% of the viewport height, solid black after. [REF]
     In the stacked layout the SAME overlay is applied to the video band's height [PROPOSAL]. */
  --fade-start: 80%;
  --fade-span: 18%;

  /* ---- Stacked layout type (px / vw clamps) [PROPOSAL] ---- */
  --s-gutter: clamp(16px, 5.5vw, 44px);
  --s-h1: clamp(32.4px, 10.692vw, 77.76px);           /* widest line is 8.58em, so 9.9vw leaves it inside the gutters down to 320px */
  --s-h1-lh: 1.0727;                          /* 59 / 55 */
  --s-text: clamp(17.28px, 4.536vw, 25.92px);         /* description and agent line (t1807: ceiling raised from 21px for wide tablet-width windows) */
  --s-deadline: clamp(15px, 3.9vw, 20px);
  --s-form: clamp(16px, 4.2vw, 20px);         /* >= 16px so iOS does not zoom the field */
  --s-form-btn: clamp(148px, 46%, 190px);     /* wide enough for the 16px "Request an invite" label down to 320px screens */

  /* ---- Nav: authored scroll-proportional morph (v3c) ----
     p = round(clamp(scrollY / 160) * 1000) / 1000, set on #nav. Every property is linear in p except the glass alpha. [AUTH] */
  --morph-range: 160;               /* px of scroll [AUTH] */
  --nav-h: 72px;                    /* [AUTH] */
  --pill-h: 40px;                   /* [AUTH] */
  --pill-top: 12px;                 /* [AUTH] */
  --pill-w: min(680px, calc(100% - 24px));   /* 680 [AUTH; the 720px menu-hiding override is not used]; capped to leave 12px each side. t1839: the hamburger now lives INSIDE the pill, so no room is reserved beside it (was calc(100% - 72px)). [PROPOSAL] */
  --pill-shift-x: 0px;              /* t1839: the pill is centred on the viewport (was 24px, which centred pill + a separate menu circle as a pair) */
  --gutter: 44px;                   /* [AUTH] */
  --pad-l0: 44px;   --pad-l1: 18px; /* [AUTH] */
  --menu-size: 40px;                /* [REF] */
  --menu-inset: 44px;               /* [AUTH] */
  --menu-gap: 28px;                 /* CTA to menu: 112 = 44 + 40 + 28 [AUTH] */
  --pad-r0: calc(var(--menu-inset) + var(--menu-size) + var(--menu-gap));
  /* t1839: scrolled state only (all of these are weighted by p, so p=0 is exactly as before). The hamburger sits INSIDE the shared pill, at its right end:
     5px from the pill's right edge, with 8px between it and the CTA group. It has no background, border or shadow of its own in any state. */
  --pill-menu-edge: 5px;            /* pill right edge to the hamburger's right edge, at p=1 */
  --pill-menu-gap: 8px;             /* hamburger to the CTA group, at p=1 */
  --pad-r1: calc(var(--menu-size) + var(--pill-menu-edge) + var(--pill-menu-gap));   /* 53px (was 5px, when the hamburger was a separate circle outside the pill) */
  --menu-pill-x: calc(var(--pill-w) / 2 - var(--menu-size) - var(--pill-menu-edge));   /* hamburger left = 50% + this at p=1 (was pill/2 - 16px, outside the pill) */
  --menu-top-0: 16px;  --menu-top-1: 12px;
  --ico-0: 18px;  --ico-1: 14px;    /* emblem [AUTH] */
  --ico-gap-0: 32px;  --ico-gap-1: 14px;
  --links-gap-0: 28px;  --links-gap-1: 14px;
  --actions-gap-0: 20px;  --actions-gap-1: 14px;
  --nav-font-0: 15px;  --nav-font-1: 14px;   /* L913 [AUTH] */
  --wordmark-h-0: 22px;  --wordmark-h-1: 17px;
  --cta-h-0: 40px;  --cta-h-1: 34px;         /* L914 [AUTH] */
  --cta-pad: 18px;                           /* L914 [AUTH] */
  --cta-radius-1: 20px;                      /* L919 [AUTH] */
  --cta-lag: 0s;                    /* L919 also adds a .35s CTA transition. AMBIGUOUS; the package's own demo follows the targets directly. */
  --glass-alpha-max: .72;           /* [AUTH] */
  --glass-blur: 20px;  --glass-sat: .4;  --glass-line: .14;  --glass-shadow: .35;

  /* ---- ROUNDING THRESHOLD (user t1793). ONE token. ----
     Share of the 160px morph range by which the bar is a full pill (0.25 = the first 40px of scroll). [USER] */
  --round-fraction: 0.25;
  --pill-radius: calc(var(--nav-h) / 2);    /* 36px; the browser clamps it to half the height as the bar shrinks */

  /* ---- Menu panel (restored v1 panel; content adapted) ---- */
  --panel-w: 340px;
  --panel-radius: 24px;

}

/* ---- Nav tiers [PROPOSAL]: tighter gutters and fewer items so header contents never overlap (see README for the arithmetic) ---- */
/* ---- Reading boost steps (desktop layout only matters; the stacked layout ignores them). Aspect 1.6 (16:10) and wider: 1, so 1440x900 is exact. ---- */
/* t2052u half-window spacing: desktop layout under 1360px wide. The text keeps its full size and gets clear air before the arc; the video moves right to
   make that room (the left strip it uncovers is blended by the .hero-media::after edge ramp). The stacked layout is excluded, so it never moves. */
@media (min-width: 1020px) and (max-width: 1359.98px) and (min-height: 704px) {
  :root { --text-air: 56px; --nudge-max: 96px; }
}
@media (max-width: 1249.98px) and (max-height: 703.98px) {
  :root { --nudge-max: 0px; }
}

@media (max-aspect-ratio: 3/2)   { :root { --b: 1.06; --bh: 1.03; } }
@media (max-aspect-ratio: 7/5)   { :root { --b: 1.12; --bh: 1.06; } }
@media (max-aspect-ratio: 13/10) { :root { --b: 1.19; --bh: 1.09; } }
@media (max-aspect-ratio: 6/5)   { :root { --b: 1.25; --bh: 1.12; } }   /* the t1806 screenshot window (about 1420 x 1233 = 1.15) lands here */
@media (max-width: 899.98px) {
  :root { --gutter: 28px; --pad-l0: 28px; --menu-inset: 28px; }
}
@media (max-width: 699.98px) {            /* phone nav: emblem and wordmark at the left; links and Sign in live in the menu panel */
  :root { --gutter: 16px; --pad-l0: 20px; --menu-inset: 16px; --menu-gap: 12px;
          --ico-gap-0: 6px; --ico-gap-1: 6px;
          --nav-font-0: 13px; --nav-font-1: 12.5px; --cta-h-0: 36px; --cta-h-1: 32px; --cta-pad: 12px; }
}
@media (max-width: 599.98px) {
  :root { --band-pos: var(--band-pos-phone); }
}
@media (max-width: 379.98px) {            /* 320-375px phones: a little less CTA padding so the wordmark and CTA keep clear of each other */
  :root { --cta-pad: 9px; }
}
@media (min-width: 1020px) and (max-aspect-ratio: 4/5) {   /* t2216u: portrait windows 1020px and wider (tablets in portrait, rotated monitors) stack like a phone; the band shows the whole 16:9 frame */
  :root { --band-h: 56.25vw; --nudge-max: 0px; }
}
@media (max-height: 619.98px) {           /* landscape phones and very short windows: a shorter band so some copy is visible without scrolling */
  :root { --band-h: clamp(180px, 56svh, 300px); }
}