/* site.css: V8W WHITE "white ground, black ink, green where the visitor acts, every line centred" (2026-10-21, built on
   V7A CLEAN, site-v7a/). Operator, verbatim: "non mi piace il testo a sx, meglio centrale ... lo testerei a sfondo bianco
   con testo nero e terziario in verde con effetti o animazioni premium ma semplici ... metterei il form sotto che parte da
   una roba semplice come nome e cognome". His green ruling, verbatim: "verde usato come lo abbiamo usato sul sito con
   sfondo nero, con lo stesso criterio" (memory/DECISION_LOG.md:515).
   The direction, rendered and measured before this file: research/landing-teardown-2026-10/DESIGN-WHITE-2026-10-21.md.
   Palette: white #FFFFFF (the ground), the dark site's black #050605 as the ink (20.3:1), racing #004225, watch #006039.
   Green sits exactly where the dark site puts it and nowhere else: the key's fill (#006039, white label) and its own
   glow, the picked answer's fill (#004225, white label), the focus ring (#004225). Never text, never a surface, never a
   line. On white a green at an opacity renders as a light green (a 24 % racing tint is #C2D0C9), so every green is solid;
   the one alpha green is inside the key's own box-shadow, which renders as a grey green shadow (npm run qa reads its
   saturation). The progress is the ink, as the dark site's is its white ("Never green").
   Readable text never under 60 % black and never under 4.5:1 on its worst background (the hover veil included); the
   white build's own floor (the dark site's "75 % white" mirrored would put every line near black and flatten the
   hierarchy). Type, radii, the 4 px scale and the three motion durations are V7A's.
   Every hero line is centred (the bar's wordmark, the qualifier, the H1, the video, the key, the effort note, the card, its
   head and its question); the one exception is a list: the answer rows stay left aligned inside a 480 px column centred in
   the card. The video sits in a frame (8 px radius, a 1 px ring, six soft shadows: Notion's frame); the card is white on
   white, lifted by a ring and a soft shadow, 640 px wide. Motion: the dark site's system, shorter: done by 1080 ms, words
   come in by focus (opacity and a 2 px blur, no travel), the video lands 12 px with its shadow, the card fades in place.
   Nothing loops. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/archivo-latin-600-normal.woff2") format("woff2");
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Inter 600: the dashboard's flag */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* V6: a size matched fallback for the serif (Georgia italic at 80 % sets the payoff at Instrument Serif's width, so the
   hero does not jump when the font lands) */
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; font-weight: 400; src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia"); size-adjust: 80%; ascent-override: 124%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;                   /* native scrollbars and form controls render light */

  /* text: four tokens, the dark site's black as the ink (DESIGN-WHITE §2). Ratios are WCAG contrast on white, checked by
     npm run lint and npm run qa */
  --ground: #FFFFFF;                     /* the page and the card */
  --type: #050605;                       /* headlines, answers, inputs: 20.3:1 */
  --body: rgba(5, 6, 5, 0.88);           /* running text: #232423, 15.6:1 */
  --type-2: rgba(5, 6, 5, 0.72);         /* qualifier, effort note, helpers: #4B4C4B, 8.6:1 */
  --type-3: rgba(5, 6, 5, 0.60);         /* footer, placeholders, caps labels, mono: #696A69, 5.4:1 (5.0:1 on the hover veil). The floor */

  /* green: where the visitor acts. Solid on white, never text */
  --racing: #004225;                     /* the key's ring, the picked answer's fill, the focus ring */
  --watch: #006039;                      /* every action key's fill */
  --accent: var(--watch);                /* alias read by the dashboard */
  --on-accent: #FFFFFF;                  /* 7.7:1 on watch, 11.6:1 on racing */
  --progress: var(--type);               /* the form's progress is the ink (the dark site's is its white: "Never green"). Green progress is a one token swap: var(--racing) */

  /* lines and surfaces: black at an opacity (no grey section, no off white) */
  --card: var(--ground);                 /* the card is white on white, lifted by --card-shadow */
  --hair: rgba(5, 6, 5, 0.08);           /* bar and footer hairline. Decoration */
  --hair-2: rgba(5, 6, 5, 0.12);         /* answer row hairlines. Decoration */
  --ring: rgba(5, 6, 5, 0.10);           /* the 1 px ring of the frame */
  --edge: rgba(5, 6, 5, 0.45);           /* an edge that must be seen (input underline, keycap): 3.25:1, over 3:1 */
  --line: var(--hair);                   /* alias for the dashboard */
  --line-2: var(--hair-2);               /* alias for the dashboard */
  --veil: rgba(5, 6, 5, 0.04);           /* answer row hover: #F5F5F5 */
  --veil-2: rgba(5, 6, 5, 0.06);         /* the back key on hover, the dashboard's fields */
  --track: rgba(5, 6, 5, 0.10);          /* the form's progress track */

  /* the screen: the player is a black object on the white page, and every word on it is white (the play key, the
     timecode, the lower third). Its chrome never takes the page's ink */
  --screen: #050605;
  --on-screen: #FFFFFF;
  --on-screen-2: rgba(255, 255, 255, 0.84);
  --screen-veil: rgba(255, 255, 255, 0.12);
  --shadow: rgba(0, 0, 0, 0.6);

  /* the lifts (DESIGN-WHITE §2, rendered and measured on the proof page) */
  --frame-shadow: 0 0 0 1px var(--ring), 0 1px 4px rgba(5, 6, 5, 0.02), 0 3px 7px rgba(5, 6, 5, 0.02), 0 7px 14px rgba(5, 6, 5, 0.02), 0 14px 28px rgba(5, 6, 5, 0.03), 0 24px 52px rgba(5, 6, 5, 0.03), 0 36px 88px rgba(5, 6, 5, 0.04);
  --card-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(5, 6, 5, 0.04), 0 8px 24px -8px rgba(5, 6, 5, 0.1), 0 32px 64px -24px rgba(5, 6, 5, 0.12);
  /* the key: a flat watch fill, a top highlight, the racing ring, its own glow. On white the glow is a shadow: racing at
     55 % with a negative spread stays under the pill (the render: 9 to 18 % saturation, never mint) */
  --key-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(5, 6, 5, 0.24), 0 0 0 1px var(--racing), 0 1px 2px rgba(5, 6, 5, 0.16), 0 6px 16px -6px rgba(0, 66, 37, 0.55);
  --key-glow-2: 0 12px 28px -10px rgba(0, 66, 37, 0.6);

  /* type */
  --display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* radii: the only values on the page */
  --r-key: 6px;            /* letter keys, the picked and hovered answer */
  --r-btn: 8px;            /* the back key, the player buttons */
  --r-screen: 8px;         /* the video frame */
  --r-obj: 12px;           /* the booking embed */
  --r-card: 16px;          /* the form card */
  --r-pill: 999px;         /* the play key, the key, segments */

  /* the columns. The video is the stage (on a desktop first screen its width comes from the screen height, --stage
     below); the hero's words may run wider than the video, up to --hero-text; the card is 640 px */
  --col-max: 1024px;
  --col: var(--col-max);
  --hero-text: 1120px;
  --card-max: 640px;
  --gutter: 16px;          /* 16 phone, 32 tablet, 48 desktop */
  --bar-h: 56px;
  --cta-h: 56px;
  --cta-w: 320px;

  /* type roles (V6 small type pass) */
  --fs-label: 0.75rem;     /* 12: every caps label, mono numerals and keys */
  --fs-small: 0.8125rem;   /* 13: the footer on a desktop, the play key's label */
  --fs-body-s: 0.9375rem;  /* 15: the caption, helpers, the effort note on a phone */
  --fs-ui: 1rem;           /* 16: buttons; the qualifier; phone reading text */
  --fs-body: 1.0625rem;    /* 17: running text, answers; the effort note and helpers from 768 px */

  /* the hero's vertical tokens (phone values; the tiers below) */
  --pad-t: 32px;           /* bar to qualifier */
  --q-h: 24px;             /* the qualifier line */
  --q-gap: 12px;           /* qualifier to H1 */
  --h1: clamp(2.25rem, 9.8vw, 2.5rem); /* 38 px at 390 */
  --h1-gap: 24px;          /* H1 to video */
  --h1-k: 2.075;           /* the H1 block's height in --h1 units (the lead at 1 + the serif payoff at 1.12 x 0.96) */
  --key-gap: 24px;         /* video to the key (DESIGN-WHITE §4) */
  --key-block: 90px;       /* the key 56 + 12 + the effort note's line (22; 26 from 768 px) */
  --pad-b: 32px;           /* the effort note to the end of the hero */
  /* C5 (2026-10-21): the play prompt between the H1 and the video (switch playPrompt, html[data-prompt]). It sits --h1-gap
     under the H1 and --p-gap over the video (it belongs to the video); one 24 px line from 600 px, two at most on a phone.
     --prompt-block is what it adds over the video on a desktop first screen (0 when its switch is off) */
  --p-h: 24px;
  --p-gap: 12px;
  --prompt-block: calc(var(--p-h) + var(--p-gap));

  /* D1 fix (2026-10-21): the H1's widest line in --h1 units, from the font. scripts/build.mjs reads each lead and payoff
     off the font files (scripts/textwidth.mjs, within 0.1 % of Chrome) and writes their width in em before letter spacing
     (--lead-0, --pay-0) and their length in characters (--lead-n, --pay-n): the page as built on :root, every variant of
     the copy switch on html[data-copy]. The letter spacing is the lockup's own, below: classic lead -0.026em, payoff
     -0.01em at 1.12 x; inverted lead -0.02em at 0.7 x, payoff -0.012em at 1.45 x. --fit-k keeps 1 % in hand (ligatures,
     hinting). From 600 px the H1 is set so this line is never wider than the video (the tiers below) */
  --fit-k: 1.01;
  --w-classic: max(var(--lead-0, 1) - 0.026 * var(--lead-n, 0), 1.12 * (var(--pay-0, 1) - 0.01 * var(--pay-n, 0)));
  --w-inverted: max(0.7 * (var(--lead-0, 1) - 0.02 * var(--lead-n, 0)), 1.45 * (var(--pay-0, 1) - 0.012 * var(--pay-n, 0)));
  --h1-w: var(--w-classic);
  /* the phone pair (under 480 px, the inverted lockup): the payoff is --pay-px of the column per px, the lead 0.7 x the H1
     token, so both lines' fit is a plain number. A lead or a payoff that is a few per cent too wide for one line sets that
     much smaller (never under 86 %, as V8D's fitPayoff) and holds one line; one that needs more wraps as written. The
     step is clamp(0, (fit - 0.86) x 100000, 1): 1 when the fit is 0.86 or more, else 0 */
  --lead-fit-0: calc(1.45 / (0.7 * var(--pay-px, 0.136) * (var(--lead-0, 1) - 0.016 * var(--lead-n, 0)) * var(--fit-k)));
  --lead-fit: min(1, 1 - clamp(0, (var(--lead-fit-0) - 0.86) * 100000, 1) * (1 - var(--lead-fit-0)));
  --pay-fit-0: calc(1 / (var(--pay-px, 0.136) * (var(--pay-0, 1) - 0.012 * var(--pay-n, 0)) * var(--fit-k)));
  --pay-fit: min(1, 1 - clamp(0, (var(--pay-fit-0) - 0.86) * 100000, 1) * (1 - var(--pay-fit-0)));

  /* motion: one easing, three durations */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-hover: 160ms;
  --t-state: 240ms;
  --t-enter: 600ms;
}
/* D1 fix (2026-10-21): from 600 px the H1 token is the tier's size (--h1-0) or, when the copy is longer, the size whose
   widest line (--h1-w, from the font) fits the video's width: min(1024, the column). D1 at 1440 x 900 sets 53.9 px (was
   57.6) and its lead ends inside the video; C0 and the shorter variants keep the tier's size */
@media (min-width: 600px) {
  :root {
    --gutter: 32px; --pad-t: 40px; --h1-gap: 32px;
    --h1-0: clamp(2.375rem, 1.1rem + 3.1vw, 3.75rem);
    --h1: min(var(--h1-0), min(var(--col-max), 100vw - 2 * var(--gutter)) / (var(--h1-w) * var(--fit-k)));
  }
}
@media (min-width: 768px) { :root { --key-block: 94px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
/* desktop first screen: the qualifier, the H1, the video, the key and its note, all above the fold. The video takes the
   height left (--hero-h, the height budget less the H1 block), so the stage is min(1024, that x 16 / 9): 815 x 458 at
   1440 x 900 with C0, the note ending 40 px over the fold (DESIGN-WHITE §4: the dark formula with the row swapped for the
   key block). D1 fix: the H1 and the video share --hero-h, so a smaller H1 gives the video its height back. The third term
   of --h1 solves H1 x --h1-w = (--hero-h less the H1 block) x 16 / 9: the widest line exactly the video's width (less the
   1 %), the key and its note where they were. D1 at 1440 x 900: H1 53.9 px, video 829 px, lead 821 px */
@media (min-width: 900px) and (min-height: 600px) {
  :root {
    --pad-t: 40px; --q-gap: 12px; --h1-gap: 32px; --pad-b: 40px;
    --h1-0: min(clamp(2.375rem, 1.1rem + 3.1vw, 3.75rem), max(2.375rem, 6.4svh));
    --hero-h: calc(100svh - var(--bar-h) - var(--pad-t) - var(--q-h) - var(--q-gap) - var(--h1-gap) - var(--prompt-block) - var(--key-gap) - var(--key-block) - var(--pad-b));
    --h1: min(var(--h1-0), min(var(--col-max), 100vw - 2 * var(--gutter)) / (var(--h1-w) * var(--fit-k)), var(--hero-h) * 16 / 9 / (var(--h1-w) * var(--fit-k) + var(--h1-k) * 16 / 9));
    --stage: min(var(--col-max), (var(--hero-h) - var(--h1-k) * var(--h1)) * 16 / 9);
    --col: var(--stage);
  }
}
@media (min-width: 900px) and (min-height: 600px) and (max-height: 820px) {
  :root { --pad-t: 24px; --q-gap: 8px; --h1-gap: 24px; --pad-b: 32px; }
}
@media (min-width: 900px) and (min-height: 600px) and (max-height: 760px) {
  :root { --pad-t: 16px; --h1-gap: 16px; --p-gap: 8px; --h1-0: min(clamp(2rem, 1rem + 2.4vw, 3rem), max(2rem, 5.2svh)); }
}
@supports not (height: 1svh) {
  @media (min-width: 900px) and (min-height: 600px) {
    :root {
      --h1-0: min(clamp(2.375rem, 1.1rem + 3.1vw, 3.75rem), max(2.375rem, 6.4vh));
      --hero-h: calc(100vh - var(--bar-h) - var(--pad-t) - var(--q-h) - var(--q-gap) - var(--h1-gap) - var(--prompt-block) - var(--key-gap) - var(--key-block) - var(--pad-b));
    }
  }
  @media (min-width: 900px) and (min-height: 600px) and (max-height: 760px) { :root { --h1-0: min(clamp(2rem, 1rem + 2.4vw, 3rem), max(2rem, 5.2vh)); } }
}
/* phones 640 px tall or less (an iPhone SE or mini in Safari, the YouTube in-app browser): the key still ends 16 px or
   more above the fold */
@media (max-width: 599px) and (max-height: 640px) {
  :root { --pad-t: 8px; --q-gap: 8px; --h1: 2rem; --h1-gap: 12px; --p-gap: 8px; --key-gap: 16px; }
}
/* C5: the play prompt's switch. Off, the prompt is not shown and the desktop formula gives its line back to the video */
html[data-prompt="off"] { --prompt-block: 0px; }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ground);
  scroll-padding-top: calc(var(--bar-h) + 16px);
}
body {
  position: relative; isolation: isolate;
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ground); color: var(--body);
  font-family: var(--text); font-weight: 400; font-size: var(--fs-body); line-height: 1.75rem; letter-spacing: -0.0128em; overflow-wrap: break-word;
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--edge); text-underline-offset: 3px; }
@media (hover: hover) { a:hover { text-decoration-color: var(--type); } }
button { font: inherit; color: inherit; letter-spacing: inherit; }
/* focus: a solid racing ring 3 px out (DESIGN-WHITE §1: the dark halo rendered as a deep green over black; the same alpha
   on white would render light green, so the ring goes solid in the colour the halo showed) */
:focus-visible { outline: 2px solid var(--racing); outline-offset: 3px; box-shadow: none; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
[hidden] { display: none !important; }
::selection { background: var(--type); color: var(--ground); } /* the ink, so green means only an action */

/* the column: every section sits in one */
.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 8px 16px; background: var(--type); color: var(--ground); border-radius: var(--r-pill); text-decoration: none; font-weight: 500; }
.skip:focus { top: 8px; }

/* labels: never under 12 px; Inter caps for every worded label, mono for numerals and keys only */
.label {
  margin: 0; font-family: var(--text); font-weight: 500; font-size: var(--fs-label); line-height: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--type-3);
}

/* the dark site's key light (404) has no job on white: no light sources on this page, only lifts */
.ambient { display: none; }

/* ---------- the bar. 56 px, solid white, the wordmark centred. On the landing its hairline fades in over the first 96 px
   of scroll (the dark site's bar-solid timeline). The Apply pill is gone (DESIGN-WHITE §4): the key is on the first
   screen and the card sits right under it */
.topbar { position: sticky; top: 0; z-index: 30; height: var(--bar-h); }
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ground); border-bottom: 1px solid var(--hair);
}
@supports (animation-timeline: scroll()) {
  .page-landing .topbar::before { animation: bar-solid linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
  @keyframes bar-solid { from { border-bottom-color: transparent; } to { border-bottom-color: var(--hair); } }
}
.topbar .wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
/* the wordmark: the round L3 lockup (inline SVG in currentColor, the ink), centred. Sizes from its NOTES §8: 600 px and up
   the header master at a 14 px cap; under 600 the phone master; under 350 the coin alone */
.wordmark { --cap: 14px; flex: none; display: inline-flex; align-items: center; text-decoration: none; color: var(--type); font-size: var(--fs-body-s); line-height: 1; }
.wordmark__logo { display: block; flex: none; width: auto; max-width: none; height: calc(1.44 * var(--cap)); margin-top: calc(-0.22 * var(--cap)); }
.wordmark__logo--phone, .wordmark__logo--coin { display: none; }
@media (max-width: 599px) {
  .wordmark { --cap: min(11.33px, (100vw - 193px) / 19.58); }
  .wordmark__logo--header { display: none; }
  .wordmark__logo--phone { display: block; }
}
@media (max-width: 349px) {
  .wordmark__logo--phone { display: none; }
  .wordmark__logo--coin { display: block; height: 20px; margin-top: 0; }
}

/* ---------- buttons. Every button is positioned, so a shadow of a positioned box above it never paints over its label */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--text); font-weight: 500; font-size: var(--fs-ui); line-height: 1.25rem; letter-spacing: -0.011em;
  text-decoration: none; text-align: center; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .i-arrow { transition: transform var(--t-hover) var(--ease); }
@media (hover: hover) { .btn:hover .i-arrow { transform: translateX(3px); } }
.btn[disabled] { opacity: 0.6; cursor: progress; }
/* the green key: the watch fill, white words, the racing ring and its own glow. The hover adds light only: the pre painted
   glow layer fades in (160 ms), no lift, no lighter fill (the dark site's mechanism) */
.btn--primary { background: var(--watch); color: var(--on-accent); box-shadow: var(--key-shadow); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: var(--key-glow-2); opacity: 0; transition: opacity var(--t-hover) var(--ease);
}
@media (hover: hover) { .btn--primary:hover::before { opacity: 1; } }
.btn--primary:focus-visible { box-shadow: var(--key-shadow); } /* the racing ring 3 px out: key, white gap, ring */
/* the key: a 56 px pill, never wrapped, 320 px wide, centred under the video; full width on a phone */
.btn--cta { flex: none; min-height: var(--cta-h); min-width: var(--cta-w); padding: 0 24px 0 32px; }
.btn--inline { width: auto; min-width: 280px; }
.btn--small { min-height: 44px; padding: 0 20px; font-size: var(--fs-body-s); letter-spacing: -0.0088em; }
.btn--small svg { width: 16px; height: 16px; }
/* once the application is accepted the page stops asking (and stops describing a video: the caption goes too) */
.page-landing:has(.apply[data-done]) .hero .btn--cta,
.page-landing:has(.apply[data-done]) .hero .cta-note,
.page-landing:has(.apply[data-done]) .hero .hero__caption { display: none; }

/* ---------- hero: the qualifier, the H1, the framed video, the key with its note under it. Every line centred. The words
   may run wider than the video (up to 1120 px): a desire variant of the copy switch keeps its lead on one line at 1440 */
.hero__col { max-width: calc(var(--hero-text) + 2 * var(--gutter)); padding-top: var(--pad-t); padding-bottom: var(--pad-b); text-align: center; }
.qualifier { margin: 0; font-family: var(--text); font-weight: 500; font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; color: var(--type-2); text-wrap: balance; }
.h1 { margin: 0; font-family: var(--display); font-weight: 600; color: var(--type); text-wrap: balance; }
/* the H1 centred: Archivo 600 at -0.026em, 57.6 px at 1440 x 900, 38 px on a phone. The dark site's optical offsets (the H
   stem on a left axis) go to 0: there is no left axis any more */
.h1--hero { margin-top: var(--q-gap); font-size: var(--h1); line-height: 1; letter-spacing: -0.026em; }
.h1__lead { display: block; text-wrap: balance; }
.h1__lead .nw { white-space: nowrap; } /* build.mjs halves(): a narrow screen breaks the lead between its halves only */
.h1__accent, .h1--accent-last .h1__s:last-child {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
  font-size: 1.12em; line-height: 0.96; color: var(--type); text-wrap: balance;
}
/* the copy switch (assets/js/copy-switch.js): while ?copy=<id> swaps the qualifier and the H1, the control's words never
   show for a frame */
html[data-copy-wait] .hero .qualifier, html[data-copy-wait] .hero .h1, html[data-copy-wait] .hero .hero__prompt { visibility: hidden; }
.hero .frame { max-width: var(--col); margin: var(--h1-gap) auto 0; }
/* C5 (copywriter 2026-10-21): the play prompt. One calm line in the qualifier's voice (Inter 500, the --type-2 grey, never
   green, never caps), centred, --h1-gap under the H1 and --p-gap over the video, so it reads with the video it points at.
   Each sentence is an inline block, so a phone breaks it only at a full stop and balances the two lines */
.hero__prompt { margin: var(--h1-gap) auto 0; font-family: var(--text); font-weight: 500; font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; color: var(--type-2); text-wrap: balance; }
.hero__prompt-s { display: inline-block; }
html[data-prompt="on"] .hero .frame { margin-top: var(--p-gap); }
html[data-prompt="off"] .hero__prompt { display: none; }
/* the key block (DESIGN-WHITE §4): the key centred 24 px under the video, the effort note centred 12 px under the key */
.hero__key { display: flex; flex-direction: column; align-items: center; margin-top: var(--key-gap); }
/* the caption describes the video ("Watch once"): it waits for the video, and from 600 px it lives inside the frame beside
   the play key; on a phone it sits over the key */
.hero__caption { margin: -12px 0 20px; max-width: 34ch; font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; color: var(--body); text-wrap: balance; }
.hero:has(.player[data-state="coming"]) .hero__caption { display: none; }
@media (min-width: 600px) { .hero__key .hero__caption { display: none; } }
/* the effort note (copy landing.ctaNote): it answers "how long is this?" before the click. It breaks only at a full stop,
   or at a comma when one sentence cannot fit its line */
.cta-note { margin: 12px 0 0; font-family: var(--text); font-size: var(--fs-body-s); line-height: 1.375rem; letter-spacing: -0.0088em; color: var(--type-2); text-wrap: balance; }
.cta-note__s { display: inline-block; }
.cta-note__c { white-space: nowrap; }

/* ---------- the video object: one 16:9 screen in a frame. 8 px radius, a 1 px ring at black 10 %, six soft shadows peaking
   at black 4 % (Notion's frame, measured: DESIGN-WHITE §5). The shadow is a pre painted layer under the screen, so it can
   settle as the screen lands. The dark site's lit edge, bloom, poster light, bleed and falloff are off: on white the frame
   needs its edge to separate the picture from the ground */
.frame { position: relative; isolation: isolate; width: 100%; margin: 0; }
.frame__box { position: relative; }
.frame__box::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-screen); box-shadow: var(--frame-shadow); pointer-events: none; }
/* the caption under a video that has one (/booked, the gift): Inter 15/24, running text, centred */
.frame__caption {
  position: relative; margin: 12px auto 0; max-width: 64ch; text-align: center;
  font-family: var(--text); font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; color: var(--body); text-wrap: balance;
}

/* ---------- player: a black screen with white chrome (it sits on the picture, never on the page) */
.player {
  --vf-pad: 32px;
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: var(--r-screen); background: var(--screen); text-align: left;
}
@media (max-width: 599px) { .player { --vf-pad: 24px; } }
.player__img, .player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player video { object-fit: contain; background: var(--screen); }
/* a still is a picture, never a control: no drag ghost, no image menu target, no pointer */
.player__img { pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* the dimmed still: /booked and the gift (ending B) reuse the hero's still, dimmed, so every page carries his face and the
   hero stays the only bright screen */
.player__img--still { filter: brightness(0.4) saturate(0.6); }
/* the play key, for the day the VSL lands: one key in white and black, never green, on the left of the bottom shade, clear
   of his face (his head sits right of centre in the still) */
.player__cue {
  position: absolute; left: var(--vf-pad); right: var(--vf-pad); bottom: var(--vf-pad); z-index: 3;
  display: flex; align-items: center; gap: 20px; pointer-events: none;
}
.player__cue > * { pointer-events: auto; }
.player__play {
  position: relative; flex: none; transform: none; transform-origin: 0 50%;
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 20px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--on-screen); color: var(--screen);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  font-family: var(--text); font-weight: 500; font-size: var(--fs-small); line-height: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 80ms var(--ease);
}
@media (hover: hover) { .player__play:hover { transform: scale(1.03); } }
/* the hero's caption inside the frame, beside the key, on the bottom shade; under 600 px it sits over the key */
.player__caption { margin: 0; max-width: 34ch; font-family: var(--text); font-weight: 500; font-size: var(--fs-body-s); line-height: 1.25rem; letter-spacing: -0.0088em; color: var(--on-screen); text-wrap: balance; }
@media (max-width: 599px) { .player__caption { display: none; } }
.player__play-icon { display: grid; place-items: center; width: 12px; height: 12px; }
.player__play-icon svg { width: 12px; height: 12px; }
.player__play-meta { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; letter-spacing: 0; text-transform: none; color: var(--screen); font-variant-numeric: tabular-nums; }
/* the shade under the words over a still: clear on the face, deep enough in the lower third that a line reads at 4.5:1 or
   more (npm run qa reads the rendered frame). The hero's coming still has none (no grey veil on his face) */
.player__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.52) 72%, rgba(0, 0, 0, 0.86) 100%); pointer-events: none; }
.hero .player[data-state="coming"] .player__shade { background: none; }
/* while the VSL is coming the hero screen is his still in the frame, and a click on it does what the green key does
   (landing.js: cta_click with place "frame"): a pointer, no hover change */
.hero .player[data-state="coming"] { cursor: pointer; }
.player[data-state="coming"]:not(.hero .player) { cursor: default; }
/* a coming screen that needs a sentence (the gift, /booked): one line in the lower third, on the shade */
.player__coming { position: absolute; left: var(--vf-pad); right: var(--vf-pad); bottom: var(--vf-pad); z-index: 3; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.player__coming-text { margin: 0; max-width: 48ch; font-family: var(--text); font-weight: 500; font-size: var(--fs-body); line-height: 1.5rem; letter-spacing: -0.0128em; color: var(--on-screen); text-wrap: balance; }
@media (max-width: 480px) {
  .player { --vf-pad: 16px; }
  .player__shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.6) 76%, rgba(0, 0, 0, 0.9) 100%); }
}
.player__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--shadow));
  transition: opacity var(--t-state) var(--ease);
}
.player[data-idle="1"] .player__bar { opacity: 0; }
.player[data-idle="1"] { cursor: none; }
.player__btn { width: 40px; height: 40px; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--on-screen); cursor: pointer; display: grid; place-items: center; }
@media (hover: hover) { .player__btn:hover { background: var(--screen-veil); } }
.player__btn svg { width: 20px; height: 20px; }
/* the video's own progress: white over the picture (it sits on the video, not on the page). Never green */
.player__track { position: relative; flex: 1; height: 2px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.2); cursor: pointer; }
.player__track::before { content: ""; position: absolute; inset: -12px 0; }
.player__fill { position: relative; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--on-screen); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
.player__fill::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--on-screen); box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
.player__time { flex: none; margin-left: 8px; font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; color: var(--on-screen-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player__msg { position: absolute; inset: auto 16px 16px; z-index: 5; margin: 0; padding: 8px 12px; border-radius: var(--r-btn); background: var(--ground); color: var(--type); font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; }
/* the living thumbnail (V8W, operator 2026-10-21: approved; switches.livingThumb, it plays once videos.vsl.preview is set): the
   VSL's opener loops muted over the still, its captions burned in. A white pill with black words in the centre of the screen,
   "Click for sound" (the play key's own look), pulsing a soft white ring every 2 s; the play key, the caption and the bottom
   shade step aside while the loop runs (the burned captions read on the picture). Never green. Under reduced motion the loop
   never mounts: the still and the play key stay */
.player__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.player[data-preview="on"] .player__preview { opacity: 1; }
.player[data-preview="on"] { cursor: pointer; }
.player[data-preview="on"] .player__shade, .player[data-preview="on"] .player__cue { opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease), visibility 0s linear 600ms; }
.player__sound {
  position: absolute; left: 50%; top: 50%; z-index: 4; margin: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 20px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--on-screen); color: var(--screen); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--text); font-weight: 500; font-size: var(--fs-small); line-height: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease);
}
.player__sound-icon { display: grid; place-items: center; width: 16px; height: 16px; }
.player__sound svg { width: 16px; height: 16px; flex: none; }
.player__sound::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); pointer-events: none; }
.player[data-preview="on"] .player__sound { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .player[data-preview="on"] .player__sound::after { animation: sound-pulse 2s var(--ease) infinite; }
  @keyframes sound-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
}
@media (max-width: 599px) { .player__sound { height: 44px; padding: 0 20px 0 16px; gap: 8px; } }
/* the fast then slow bar (switches.progressCurve) moves in small steps between time updates: a short linear glide */
.player__track[data-curve="on"] .player__fill { transition: width 250ms linear; }

/* ---------- application. The card: white on white, lifted by a ring and a soft shadow, 640 px wide, 16 px radius, centred
   (DESIGN-WHITE §7). Every step and every ending lands 16 px under the bar (html scroll-padding-top); when a short step
   cannot reach that spot, form.js adds the missing scroll (--runway) between the card and the footer row, never between
   the key and the card. The scale under the fold is V7A's: the key block to the card 64 px, the card to the footer row 96
   (phone 48 / 64) */
.apply { position: relative; padding-top: calc(64px - var(--pad-b)); padding-bottom: 96px; }
.apply__col { max-width: calc(var(--card-max) + 2 * var(--gutter)); text-align: center; }
.page-landing .footer__bar { margin-top: var(--runway, 0px); }
.form-panel {
  position: relative; container: panel / inline-size;
  border-radius: var(--r-card); background: var(--card); box-shadow: var(--card-shadow);
  padding: 32px 40px 40px;
}
/* the head, centred: "Application" and the 01 / 05 counter as one line in the middle; the back key at the card's left
   edge, so nothing in the middle moves when it shows on step 2 */
.form-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 20px; }
.form-head__mid { grid-column: 2; display: inline-flex; justify-content: center; align-items: baseline; gap: 12px; min-width: 0; }
.form-label { margin: 0; font-family: var(--text); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--type-3); white-space: nowrap; }
.form-step { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; letter-spacing: 0.1em; color: var(--type-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the back key: a ringed 32 px key, 44 px to the thumb */
.form-back {
  grid-column: 1; grid-row: 1; justify-self: start;
  position: relative; flex: none; width: 32px; height: 32px; margin-block: -8px; padding: 0; border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--type-2); box-shadow: inset 0 0 0 1px var(--hair-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform 80ms var(--ease);
}
.form-back::after { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) { .form-back:hover { color: var(--type); background: var(--veil-2); } }
.form-back[hidden] { display: none; }
.form-back svg { width: 16px; height: 16px; }
/* the progress: five plain segments 8 px apart, the done ones the ink on a black 10 % track (the dark site's are white:
   "Never green") */
.form-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 12px; }
.form-progress i { position: relative; display: block; height: 2px; border-radius: var(--r-pill); background: var(--track); }
.form-progress i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--progress);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-state) var(--ease);
}
.form-progress i.is-on::after { transform: scaleX(1); }
.form-intro { margin: 0 0 24px; color: var(--type-2); font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; text-wrap: pretty; }
.form-panel > .form-intro { margin-top: 16px; } /* the no JS skeleton */
.page-landing .q > .form-intro { display: none; } /* V7A: step 1 shows no intro (the one instruction is the effort note) */
.form-panel[data-done] .form-head, .form-panel[data-done] .form-progress { display: none; } /* an ending has no step and no way back */

.stage { position: relative; min-height: 0; margin-top: 32px; }
.form-panel[data-done] .stage { margin-top: 0; }
/* step changes: a rack focus. Out: opacity and a 6 px blur in 160 ms; in: 280 ms with an 8 px rise. Opacity only on a
   touch screen; instant under reduced motion (form.js swaps without a transition) */
.q, .ending { position: relative; }
.q.is-leaving, .ending.is-leaving { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
.is-enter-next { opacity: 0; transform: translateY(8px); }
.is-enter-prev { opacity: 0; transform: translateY(-8px); }
.stage > .is-active { opacity: 1; transform: none; filter: none; transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
.stage > .is-leaving { opacity: 0; transition: opacity var(--t-hover) var(--ease), filter var(--t-hover) var(--ease); }
@media (pointer: fine) { .stage > .is-leaving { filter: blur(6px); } }
@media (pointer: coarse) { .is-enter-next, .is-enter-prev { transform: none; } }
/* the card morphs its height between steps (form.js FLIP, 280 ms on the house ease) */
.stage.is-morphing { overflow: clip; overflow-clip-margin: 8px; transition: height 280ms var(--ease); }

/* one question = one centred column: the words, then the answer */
.q { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.q__main { min-width: 0; }
.q__ctrl { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.q__greeting { margin: 0 0 8px; color: var(--type-2); font-size: var(--fs-body); line-height: 1.75rem; overflow-wrap: anywhere; }
.q__label {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; color: var(--type);
  font-size: 1.625rem; line-height: 2rem; text-wrap: balance;
}
.q__helper { margin: 8px auto 0; max-width: 48ch; color: var(--type-2); font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; text-wrap: balance; }
/* C5: the example lines under the ruled Q5 helper, in the helper's voice: "For example:", then one line each, centred */
.q__examples { margin: 12px auto 0; max-width: 48ch; color: var(--type-2); font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; }
.q__examples-lead { margin: 0; }
.q__examples-list { margin: 0; padding: 0; list-style: none; }
.q__examples-list li { margin: 0; }

/* answers (the one exception to centring: a list reads badly centred). A 480 px column centred in the card, rows 56 px
   on hairlines, left aligned. Hover = a black 4 % fill; picked = the solid racing fill with white words, the key white with
   a black letter, the check white; the hairlines next to it step aside. Green means one thing: you chose this */
.choices { width: 100%; max-width: 480px; margin: 24px auto 0; padding: 0; border-top: 1px solid var(--hair-2); text-align: left; }
.choice {
  position: relative; isolation: isolate; width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  min-height: 56px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; cursor: pointer;
  background: transparent; font-family: var(--text); font-size: var(--fs-body); line-height: 1.5rem; letter-spacing: -0.0128em; font-weight: 400; color: var(--type);
  font-variant-numeric: proportional-nums; -webkit-tap-highlight-color: transparent;
}
.choice::before, .choice::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-key); pointer-events: none; opacity: 0; }
.choice::before { background: var(--veil); transition: opacity var(--t-hover) var(--ease); }
/* the blink after a pick: the solid fill steps between racing and watch (two solid greens), never through a light green */
.choice::after { background: var(--watch); }
@media (hover: hover) { .choice:hover::before { opacity: 1; } }
.choice[aria-checked="true"] { background: var(--racing); color: var(--on-accent); border-radius: var(--r-key); }
.choice[aria-checked="true"], .choice:has(+ .choice[aria-checked="true"]) { border-bottom-color: transparent; }
.choices:has(> .choice:first-child[aria-checked="true"]) { border-top-color: transparent; }
.choice.is-blink::after { animation: blink 360ms steps(1, end) 1; }
@keyframes blink { 0%, 50% { opacity: 0; } 25%, 75% { opacity: 1; } }
.choice:focus-visible { border-radius: var(--r-key); }
/* the letter key: a white keycap (an inset ring and a base line); picked, it is pressed: white with a black letter */
.choice__key {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-key); display: grid; place-items: center;
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; letter-spacing: 0; color: var(--type);
  background: var(--ground); box-shadow: inset 0 0 0 1px var(--edge), 0 1px 0 rgba(5, 6, 5, 0.12);
  transition: transform var(--t-hover) var(--ease);
}
.choice__label { flex: 1; }
.choice__check { flex: none; width: 16px; height: 16px; color: inherit; opacity: 0; transition: opacity var(--t-hover) var(--ease); }
.choice[aria-checked="true"] .choice__key { background: var(--ground); color: var(--type); box-shadow: none; transform: translateY(1px); }
.choice[aria-checked="true"] .choice__check { opacity: 1; }
/* a pick advances on its own after 440 ms (form.js); the OK key shows only while a choice step is sending */
.choices ~ .actions { margin-top: 16px; }
.choices ~ .actions .btn:not([disabled]) { display: none; }

/* the text answers (the fields centred in the card, their words typed left aligned): one field, or the name screen's two (first and last), side by side from a 480 px card and
   stacked under it (DESIGN-WHITE §7; FORMS-RECHECK §4) */
.field { width: 100%; margin-top: 24px; }
.fields { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.fields > .field { margin-top: 0; }
@container panel (min-width: 400px) { .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.input {
  width: 100%; display: block; margin: 0; padding: 8px 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--type);
  border-bottom: 1px solid var(--edge); outline: none; caret-color: var(--type);
  text-align: left; /* judge fix 2026-10-21 (both judges): typed left aligned in the centred column, like the answer rows and the long answer; centred, the caret sat inside the placeholder ("First |name", "name@co|mpany.com") */
  font-family: var(--text); font-weight: 500; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.019em;
}
/* V8W screen 2 (operator 2026-10-21, "whatsapp nel form si"): the email and, under it, the WhatsApp number, stacked at
   every width (an email is too long for half a card). The number is one underlined row: the country code picker (a native
   select laid over the code it shows, so a phone opens its own wheel) and the number. The consent line under it in the
   helper's voice, centred like every line of the card */
.fields.fields--stack { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tel { display: flex; align-items: stretch; gap: 16px; }
.tel .input { flex: 1; min-width: 0; }
.dial {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0 12px; cursor: pointer;
  border-bottom: 1px solid var(--edge); color: var(--type);
  font-family: var(--text); font-weight: 500; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.019em; font-variant-numeric: tabular-nums;
}
.dial__chev { display: grid; place-items: center; width: 16px; height: 16px; color: var(--type-2); }
.dial__chev svg { width: 12px; height: 12px; }
.dial__select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 1rem; appearance: none; -webkit-appearance: none; }
.dial:focus-within { border-bottom-color: var(--type); box-shadow: 0 1px 0 var(--type); }
.q__note { margin: 12px auto 0; max-width: 48ch; color: var(--type-2); font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; text-wrap: balance; }
.input::placeholder { color: var(--type-3); font-weight: 400; opacity: 1; }
/* focus on a text answer: the underline turns ink and doubles (the dark site's rule, in black: its inputs carry no green) */
.input:focus, .input:focus-visible { border-bottom-color: var(--type); outline: none; box-shadow: 0 1px 0 var(--type); }
textarea.input { resize: none; min-height: 3.4em; max-height: 42vh; overflow-y: auto; text-align: left; }
/* the keys inside the card: OK (44 px) and Submit (56 px), centred, the hint centred under OK */
.actions { order: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.actions .btn--small { min-width: 200px; }
.actions .btn--submit { min-height: var(--cta-h); min-width: 280px; padding: 0 32px; font-size: var(--fs-body); letter-spacing: -0.0128em; }
.hint { font-family: var(--text); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--type-3); }
.hint b { font-weight: 500; color: var(--type-2); }
@media (hover: none) { .hint--keys { display: none; } .choices ~ .actions:not(:has(.btn[disabled])) { display: none; } }

/* the error: no box, no red, above the actions; the field's underline turns ink 2 px and takes the caret back */
.err { order: 1; display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 0; color: var(--type); font-size: var(--fs-body-s); line-height: 1.25rem; letter-spacing: -0.006em; font-weight: 500; }
.err svg { width: 14px; height: 14px; flex: none; }
.err[hidden] { display: none; }
.err a { overflow-wrap: anywhere; }
.q .input.is-wrong { border-bottom-color: var(--type); box-shadow: 0 1px 0 var(--type); } /* form.js marks the field the error is about */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- endings: centred, at the card width. The gift video inside the card in the same frame; the booking embed full width */
.ending { text-align: center; }
.ending__title { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.026em; font-size: 2.75rem; line-height: 3rem; color: var(--type); text-wrap: balance; overflow-wrap: break-word; }
.ending__text { margin: 12px auto 0; max-width: 56ch; color: var(--body); font-size: var(--fs-body); line-height: 1.75rem; text-wrap: pretty; }
/* the booking embed is light: form.js asks the provider for the page white, the ink as its text and its primary colour
   (never the green: a provider paints its primary colour as text); the box behind it is the page white with a hairline */
.calendar { margin-top: 32px; border-radius: var(--r-obj); overflow: hidden; background: var(--ground); box-shadow: inset 0 0 0 1px var(--hair-2); }
.calendar iframe { display: block; width: 100%; height: 760px; border: 0; }
@media (max-width: 640px) { .calendar iframe { height: 1000px; } }
.gift { margin-top: 32px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 500; text-decoration: none; color: var(--type); font-size: var(--fs-ui); line-height: 1.5rem; letter-spacing: -0.011em; }
.textlink svg { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease); }
@media (hover: hover) { .textlink:hover svg { transform: translateX(3px); } }

/* ---------- /booked + 404: the same column, centred like the landing */
.booked { position: relative; padding-top: 64px; padding-bottom: 32px; text-align: center; }
.h1--page { max-width: 22ch; margin-inline: auto; font-size: 2.75rem; line-height: 3rem; letter-spacing: -0.026em; }
@media (min-width: 760px) { .h1--lines { max-width: none; } .h1--lines .h1__s { display: block; } }
.lede { margin: 16px auto 0; max-width: 46ch; color: var(--body); font-size: var(--fs-body); line-height: 1.75rem; text-wrap: balance; }
.booked__stage { margin-top: 48px; }
.cta-row { margin-top: 32px; display: flex; justify-content: center; }
/* the 404 numerals: the serif, its one display moment */
.notfound__num { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 4rem; line-height: 4rem; letter-spacing: -0.01em; color: var(--type); }
/* what happens next: three rows split by hairlines, a list, so left aligned inside a 640 px column centred on the page */
.next { max-width: var(--card-max); margin: 64px auto 0; text-align: left; }
.next .label { text-align: center; }
.next ol { list-style: none; margin: 16px 0 0; padding: 0; border-bottom: 1px solid var(--hair); }
.next li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; padding: 20px 0; border-top: 1px solid var(--hair); }
.next li p { margin: 0; max-width: 64ch; color: var(--body); font-size: var(--fs-body); line-height: 1.75rem; text-wrap: pretty; }
.next li span { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; letter-spacing: 0.1em; color: var(--type-3); font-variant-numeric: tabular-nums; }

/* ---------- legal: a reading measure, left aligned (running text reads badly centred), in a 720 px column centred */
.legal { padding-top: 48px; padding-bottom: 32px; }
.legal > * { max-width: 720px; margin-inline: auto; }
.legal h1 { margin: 0 auto; font-family: var(--display); font-weight: 600; letter-spacing: -0.026em; color: var(--type); font-size: 2.75rem; line-height: 3rem; }
.legal .updated { margin: 12px auto 0; font-family: var(--text); font-weight: 500; font-size: var(--fs-label); line-height: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--type-3); }
.legal h2 { margin: 32px auto 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.016em; color: var(--type); }
.legal p { margin: 8px auto 0; color: var(--body); line-height: 1.75rem; }
.legal .contact { margin-top: 48px; }

/* ---------- footer: the creed (on /booked, the 404 and the legal pages) centred in the serif, then one row centred: the
   copyright and the links; every link 44 px to the thumb */
.footer { position: relative; color: var(--type-3); font-size: var(--fs-small); line-height: 1.25rem; letter-spacing: -0.0032em; text-align: center; }
.footer__creed { padding-top: 96px; padding-bottom: 96px; container: creed / inline-size; }
.creed { margin: 0 auto; max-width: none; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.875rem; line-height: 2.125rem; letter-spacing: -0.008em; color: var(--type); text-wrap: wrap; }
@container creed (min-width: 680px) { .creed { font-size: 2.25rem; line-height: 2.5rem; } }
.creed__s { display: block; color: var(--type-2); text-wrap: balance; }
.creed__s:last-child { color: var(--type); }
.footer__bar { border-top: 1px solid var(--hair); }
.footer__inner {
  min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px;
  padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.footer__copy { margin: 0; }
.footer__links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; }
.footer a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--type-3); text-decoration: none; }
@media (hover: hover) { .footer a:hover { color: var(--type); } }

/* ---------- retina: internal dividers at half a pixel */
@media (min-resolution: 2dppx) {
  .next ol, .next li, .footer__bar { border-width: 0.5px; }
}

/* ---------- phone: one column of 358 at 390. The frame stays inside the 16 px gutters (on white the frame needs its edge to
   separate the picture from the ground); the key goes full width; the card stays a card (DESIGN-WHITE §7: phone padding
   24 / 20 / 32) */
@media (max-width: 599px) {
  .h1--hero { line-height: 1.04; letter-spacing: -0.024em; }
  .hero__key > .btn--cta { width: 100%; min-width: 0; padding: 0 24px; }
  .apply { padding-top: calc(48px - var(--pad-b)); padding-bottom: 64px; }
  .form-panel { padding: 24px 20px 32px; }
  .form-step { font-size: var(--fs-small); line-height: 1.25rem; }
  .stage { margin-top: 24px; }
  .q__label { font-size: 1.5rem; line-height: 1.75rem; }
  .input, .dial { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.017em; }
  .tel { gap: 12px; }
  /* every key in the form is a thumb sized, full width button on a phone; Submit is the full key */
  .q .actions { align-self: stretch; }
  .q .actions .btn { width: 100%; min-width: 0; min-height: 52px; }
  .q .actions .btn--submit { min-height: var(--cta-h); }
  .ending__title, .h1--page, .legal h1 { font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.022em; }
  .notfound__num { font-size: 3rem; line-height: 3rem; }
  .footer__creed { padding-top: 64px; padding-bottom: 64px; }
  .creed { font-size: 1.625rem; line-height: 1.875rem; }
  .footer__inner { flex-direction: column; gap: 16px; padding-top: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .player__coming-text { font-size: var(--fs-body-s); line-height: 1.25rem; letter-spacing: -0.0088em; }
  .player__play { height: 48px; padding: 0 20px 0 16px; }
}

/* ---------- the switches (config.switches, one attribute on <html>; npm run qa shoots both states) */
/* lockup: classic is the white build's default (DESIGN-WHITE §4 rendered it); inverted puts the sans lead at 0.7 x and the
   serif payoff at 1.45 x, the biggest type on the page */
html[data-lockup="inverted"] { --h1-k: 2.11; --h1-w: var(--w-inverted); }
html[data-lockup="inverted"] .h1--hero .h1__lead { font-size: 0.7em; line-height: 1.1; letter-spacing: -0.02em; }
html[data-lockup="inverted"] .h1--hero .h1__accent { font-size: 1.45em; line-height: 0.92; letter-spacing: -0.012em; }
@media (max-width: 599px) {
  html[data-lockup="inverted"] { --pay-px: 0.136; --h1: calc((100vw - 2 * var(--gutter)) * var(--pay-px) / 1.45); }
  html[data-lockup="inverted"] .h1--hero .h1__lead { font-size: calc(0.7em * var(--lead-fit)); line-height: 1.15; letter-spacing: -0.016em; }
  html[data-lockup="inverted"] .h1--hero .h1__accent { font-size: calc(1.45em * var(--pay-fit)); }
}
/* judge fix 2026-10-21 (both judges): under 480 px the hero takes the inverted pair whatever the lockup switch says, as V8D:
   the lead at 0.7 x on one line (23.5 px at 390), the serif payoff at 13.6 % of the column per px (48.7 px at 390), the
   biggest type on the screen. The classic phone lockup set C0's lead on two 38 px lines and the payoff, where the pain and
   the want sit, smaller; the video now starts about 49 px higher. A phone 640 px tall or less sets the pair 12 % smaller (as
   V8D). From 480 px the switch decides (classic by default).
   D1 fix (2026-10-21): a line a few per cent too wide for the column holds one line, set up to 14 % smaller, never under
   86 % (--lead-fit, --pay-fit on :root, from the font: before the first paint, no jump). D1 at 390: the lead 22.6 px (was
   23.5 on two lines, "Drop what keeps / you at this number"), the payoff 44.1 px; at 375: 21.6 and 42.3. The lead never
   goes under 20 px (the display face's floor): one that cannot fit at 20 px wraps between its halves, "at this number"
   whole. landing.js fitPayoff stays as the backstop (a payoff still on two lines, say with the fallback font) */
@media (max-width: 479px) {
  html[data-lockup] { --pay-px: 0.136; --h1: calc((100vw - 2 * var(--gutter)) * var(--pay-px) / 1.45); }
  html[data-lockup] .h1--hero .h1__lead { font-size: max(1.25rem, 0.7em * var(--lead-fit)); line-height: 1.15; letter-spacing: -0.016em; }
  html[data-lockup] .h1--hero .h1__accent { font-size: calc(1.45em * var(--payoff-fit, var(--pay-fit))); line-height: 0.92; letter-spacing: -0.012em; }
}
@media (max-width: 479px) and (max-height: 640px) {
  html[data-lockup] { --pay-px: 0.12; }
}
/* keyFace: flat is the white build's default (DESIGN-WHITE §6); gradient falls from watch to racing, nothing lighter
   than #006039 */
html[data-key="gradient"] .btn--primary { background: linear-gradient(180deg, var(--watch), var(--racing)); }
/* press feedback: the key, the back key and the play key give under the thumb for about 80 ms */
.btn--cta { transition: transform 80ms var(--ease); }
.btn--cta:active, .form-back:active, .player__play:active { transform: scale(0.97); }
/* the next step line over the application (switch nextStep, off by default): centred, 24 px over the card */
.apply__next { margin: 0 0 24px; font-family: var(--text); font-weight: 500; font-size: var(--fs-body-s); line-height: 1.5rem; letter-spacing: -0.0088em; color: var(--body); text-wrap: balance; }
html[data-next="off"] .apply__next, .apply[data-done] .apply__next { display: none; }
/* the effort note in its two states (switch ctaNote; "buys" resolves to "cost" while the calendar is not live) */
html[data-note="buys"] .cta-note__cost, html[data-note="cost"] .cta-note__buys { display: none; }

/* ---------- reading sizes. On a phone the qualifier, the intro and the helpers 16/24, the effort note 15/22, the footer
   15/20; from 768 px the effort note and the helpers at the 17 px running text role, the qualifier at 16 */
@media (max-width: 599px) {
  .qualifier, .hero__prompt { font-size: var(--fs-ui); line-height: 1.5rem; letter-spacing: -0.011em; }
  .form-intro, .q__helper, .q__examples, .q__note { font-size: var(--fs-ui); line-height: 1.5rem; letter-spacing: -0.011em; }
  .footer { font-size: var(--fs-body-s); line-height: 1.25rem; letter-spacing: -0.0088em; }
  .calendar iframe { height: 1000px; min-height: calc(100svh - var(--bar-h) - 32px); }
}
@media (min-width: 768px) {
  .qualifier, .apply__next, .hero__prompt { font-size: var(--fs-ui); line-height: 1.5rem; letter-spacing: -0.011em; }
  .cta-note, .q__helper, .q__examples, .q__note { font-size: var(--fs-body); line-height: 1.625rem; letter-spacing: -0.0128em; }
}
/* the notch: in landscape the safe area takes the gutter's place when it is wider */
.wrap { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }

/* ---------- the opening (DESIGN-WHITE §8): CSS only, from the first frame, done by 1080 ms (the dark site: 1500). The
   words come in by focus (opacity 0.01 to 1 and a 2 px blur to none, no travel), the video lands 12 px while its shadow
   settles, the key and its note rise 8 px, the card fades in place (opacity only, so a click on the key never scrolls to
   a moving target). Opacity starts at 0.01 on the words and the screen so the browser still counts them as the first
   large paint. Once, never a loop; nothing at all under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero .qualifier { animation: focus-in 480ms var(--ease) 0ms both; }
  .h1--hero .h1__lead { animation: focus-in 480ms var(--ease) 60ms both; }
  .h1--hero .h1__accent { animation: focus-in 560ms var(--ease) 140ms both; }
  .hero__prompt { animation: focus-in 480ms var(--ease) 200ms both; } /* C5: the play prompt, last of the words, as the frame lands */
  .hero .frame { animation: land 700ms var(--ease) 220ms both; }
  .hero .frame__box::after { animation: settle 800ms var(--ease) 220ms both; }
  .hero__key { animation: rise var(--t-enter) var(--ease) 360ms both; }
  .page-landing .apply { animation: settle var(--t-enter) var(--ease) 480ms backwards; }
  @keyframes focus-in { from { opacity: 0.01; filter: blur(2px); } to { opacity: 1; filter: none; } }
  @keyframes land { from { opacity: 0.01; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { opacity: 0; } }
}

/* reduced motion: nothing moves. No opening, no rise between steps, no arrow nudge, no pressed key travel */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-enter-next, .is-enter-prev { transform: none; }
  .stage > .is-active, .stage > .is-leaving { transition: opacity 120ms linear; filter: none; }
  .btn .i-arrow, .textlink svg, .player__play, .choice__key, .form-progress i::after { transition: none; }
  .btn:hover .i-arrow, .textlink:hover svg { transform: none; }
  .player__play:hover, .btn--cta:active, .form-back:active, .player__play:active { transform: none; }
  .btn--cta, .form-back { transition: none; }
  .stage.is-morphing { transition: none; }
  .player__preview, .player__sound, .player__track .player__fill { transition: none; }
  .choice[aria-checked="true"] .choice__key { transform: none; }
  .choice.is-blink::after { animation: none; }
}

/* IT site 2026-10-22: the wordmark as text (the SVG lockup spells the EN name). Same ink, the display face, the round coin kept.
   Display stays with the .wordmark__logo rules above (header vs phone vs coin), so nothing here sets display. */
.wordmark__txt { height: auto; margin-top: 0; font-family: var(--display); font-weight: 600; font-size: calc(1.12 * var(--cap)); letter-spacing: 0.14em; line-height: 1; white-space: nowrap; }
.wordmark__txt .wordmark__coin { display: inline-block; vertical-align: -0.18em; height: 1.3em; width: auto; margin-right: 0.55em; }

/* operator 2026-10-22 night: the page in black, white and black swapped, the green stays the third colour. Token swap
   only: every rule above reads these. --cal-primary feeds the Calendly embed (white, as the ink was on the light page) */
:root {
  color-scheme: dark;
  --ground: #050605;
  --type: #FFFFFF;
  --body: rgba(255, 255, 255, 0.92);
  --type-2: rgba(255, 255, 255, 0.78);
  --type-3: rgba(255, 255, 255, 0.64);
  --racing: #006039;
  --watch: #006039;
  --on-accent: #FFFFFF;
  --card: rgba(255, 255, 255, 0.03);
  --hair: rgba(255, 255, 255, 0.10);
  --hair-2: rgba(255, 255, 255, 0.14);
  --ring: rgba(255, 255, 255, 0.12);
  --edge: rgba(255, 255, 255, 0.50);
  --veil: rgba(255, 255, 255, 0.05);
  --veil-2: rgba(255, 255, 255, 0.08);
  --track: rgba(255, 255, 255, 0.16);
  --screen: #050605;
  --frame-shadow: 0 0 0 1px var(--ring), 0 24px 52px rgba(0, 0, 0, 0.5);
  --card-shadow: 0 0 0 1px var(--hair), 0 32px 64px -24px rgba(0, 0, 0, 0.7);
  --cal-primary: #FFFFFF;
}

/* operator 2026-10-22 night (his phone): the headline and its payoff sat on each other. More air between the qualifier and
   the H1, between the lead and the payoff, and inside the payoff, which runs on two lines in Italian */
.h1--hero { margin-top: calc(var(--q-gap) + 4px); }
.h1--hero .h1__accent { margin-top: 0.16em; line-height: 1.04; }
@media (max-width: 479px) {
  html[data-lockup] .h1--hero .h1__lead { line-height: 1.22; }
  html[data-lockup] .h1--hero .h1__accent { margin-top: 8px; line-height: 1.02; }
}
/* operator 2026-10-22 night (his iPhone 11 Pro Max): on a phone the lead's wider half runs the column's full width
   ("Togli quello che ti tiene fermo" / "a questo numero"), sized from the font (--lead-h0, --lead-hn from the build), never
   over 0.85 of the H1 token; and less air between the logo bar and the qualifier */
@media (max-width: 479px) {
  :root { --pad-t: 16px; }
  html[data-lockup] .h1--hero .h1__lead { font-size: max(1.25rem, min(0.85em, calc((100vw - 2 * var(--gutter)) * 0.96 / (var(--lead-h0, 14) - 0.016 * var(--lead-hn, 0))))); line-height: 1.18; }
}

/* generated by scripts/build.mjs (D1 fix): the hero H1's width from the font files, em before letter spacing and characters; site.css --h1-w, --lead-fit, --pay-fit */
:root { --lead-0: 21.1680; --lead-n: 47; --lead-h0: 13.2840; --lead-hn: 31; --pay-0: 10.2470; --pay-n: 30; }
html[data-copy="D1"] { --lead-0: 21.1680; --lead-n: 47; --lead-h0: 13.2840; --lead-hn: 31; --pay-0: 10.2470; --pay-n: 30; }
html[data-copy="C0"] { --lead-0: 17.4740; --lead-n: 39; --lead-h0: 9.4600; --lead-hn: 20; --pay-0: 6.7170; --pay-n: 19; }