/* 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: #0E6B3E;                     /* the key's ring, the picked answer's fill, the focus ring. Site simple 2026-10-24: ONE green, #0E6B3E (his "a yes"), for the key, the bands and every other green */
  --watch: #0E6B3E;                      /* 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(14, 107, 62, 0.55);
  --key-glow-2: 0 12px 28px -10px rgba(14, 107, 62, 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;
}
/* IT 2026-10-23 title test: every variant's qualifier and H1 is in the HTML; scripts/build.mjs appends the rule that shows
   the one named on html[data-hero] (the inline hero script names it before the first paint), so nothing ever swaps on
   screen (copy-switch.js and its hidden moment are gone) */
.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 v2 (IT 2026-10-24). Operator, verbatim: "migliora anche a livello di design, font e numero di test
   (rendilo piu pulito) il form" and "Mai due cose chieste insieme" (memory/DECISION_LOG.md 2026-10-24 APPLICATION v2 + ONE
   QUESTION PER SCREEN). The references read the same day (research/landing-teardown-2026-10/FORMS-7FRT-HAYNES-JAKE-2026-10-24.md
   §4): one question per screen, the question 20 to 26 px, the answers in boxes, one key, a thin progress line on the top edge.
   Ours, cleaner: one font pair (the question in the headline's face, DM Serif Display; every other word in Inter; no mono, no
   caps label in the card), calmer sizes (the question 26 px, 22 on a phone; the words 15 to 17), clear fields (a 52 px box with
   a visible edge, the words typed left aligned), the answers as boxes of the same height and radius, one key style (the green
   key, full width of the answer column, "Avanti" with an arrow, "Invia" on the last screen), the progress one thin line on the
   card's top edge. The card is white on the black page (site simple, below: its light tokens). 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 */
.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);
  /* C15 + the 7FRT style (IT 2026-10-24, operator: "il resto ok procedi veloce"; measured in research/landing-teardown-2026-10/
     form-style-2026-10-24/7FRT-saleskick-measures.md): the 8 px bar, then 24 px of air; the sides 12 px + 5 % of the card,
     as 7FRT's 8 px + 5 % of the rest + 4 px (29 px on a 390 phone, 44 px in the 640 px card) */
  padding: 32px calc(12px + 5%) 32px;
  /* the card's own inks: the house black for the answers, the fields and the edges; the question near black, black at
     93.3 % (#111 on the white, 7FRT's place for their purple); the helper black at 60 % (7FRT's helper opacity, on the floor) */
  --q-ink: var(--type); --q-title: rgba(0, 0, 0, 0.933); --q-help: rgba(0, 0, 0, 0.6); --q-edge: rgba(0, 0, 0, 0.3);
}
/* an ending keeps the card it had before C15 (24 / 40 / 40, a phone 16 / 20 / 24): the endings are not part of this pass */
.form-panel[data-done] { padding: 24px 40px 40px; }
/* the progress: 7FRT's bar, 8 px flush to the card's top edge, its square ends clipped by the card's corners, on a 20 % black
   track. The fill in our green, not 7FRT's black (the brief's pick, read on the phone shots at 390 x 844: a black fill on the
   card's top edge melts into the black page and reads as a notch cut out of the card; the green reads as the bar). It fills to
   the end before an ending replaces it */
.form-bar { position: absolute; left: 0; right: 0; top: 0; height: 8px; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; background: rgba(0, 0, 0, 0.2); }
.form-bar i { display: block; height: 100%; background: var(--racing); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-state) var(--ease); }
/* the head: "← Indietro" top left, 12 px over the question (7FRT's "← Back", 12 px 500). The row stays on screen 1 with the
   words hidden, so the question sits at the same height on every screen; the step is said to screen readers only */
.form-head { display: flex; align-items: center; justify-content: space-between; min-height: 16px; margin: 0 0 12px; }
.form-head__mid { display: inline-flex; min-width: 0; }
.form-step { font-family: var(--text); font-weight: 500; font-size: var(--fs-small); line-height: 1.25rem; letter-spacing: 0; color: var(--type-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.form-back {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 16px; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--q-ink); box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--text); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0;
  transition: opacity var(--t-hover) var(--ease), transform 80ms var(--ease);
}
.form-back::after { content: ""; position: absolute; inset: -14px -12px; } /* 44 px to the thumb */
@media (hover: hover) { .form-back:hover { opacity: 0.6; } }
.form-back[hidden] { display: none; }
.form-back__arrow { display: grid; place-items: center; width: 12px; height: 12px; }
.form-back svg { width: 12px; height: 12px; }
.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; }
.form-panel[data-done] .form-head, .form-panel[data-done] .form-bar { display: none; } /* an ending has no step and no way back */

.stage { position: relative; min-height: 0; margin-top: 0; }
.form-panel[data-done] .stage { margin-top: 0; }
/* step changes, the Typeform feel (IT 2026-10-24, his ruling: "the next question slides up in about 350 ms (ease-out), off
   under prefers-reduced-motion"): the next screen slides up 24 px into place in 350 ms on the house ease out (no overshoot),
   on a phone too; the screen it replaces lifts 12 px and fades in 200 ms; back slides the other way. 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(24px); }
.is-enter-prev { opacity: 0; transform: translateY(-24px); }
.stage > .is-active { opacity: 1; transform: none; filter: none; transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.stage > .is-leaving { opacity: 0; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.stage > .is-leaving.to-next { transform: translateY(-12px); }
.stage > .is-leaving.to-prev { transform: translateY(12px); }
/* the card morphs its height between steps (form.js FLIP, 350 ms on the house ease, in time with the slide) */
.stage.is-morphing { overflow: clip; overflow-clip-margin: 8px; transition: height 350ms var(--ease); }

/* one question = one LEFT aligned column the card's inner width (7FRT): the question, its one helper line 4 px under it,
   then 32 px down the answers or the field, 24 px down the key */
.q { display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.q__main { min-width: 0; }
.q__ctrl { width: 100%; max-width: none; margin: 32px 0 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.q__lead { margin: 0 0 8px; font-family: var(--text); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--q-help); overflow-wrap: anywhere; }
.q__lead--price { color: var(--q-title); }
/* the question: 7FRT's, Inter 500 at 22 px on a 28 px line, letter spacing 0, near black (#111, not their purple), no
   required mark; the same size on a desktop (theirs is) */
.q__label {
  margin: 0; font-family: var(--text); font-weight: 500; letter-spacing: 0; color: var(--q-title);
  font-size: 22px; line-height: 28px; text-wrap: pretty;
}
.q__s, .q__helper-s { display: inline-block; text-wrap: pretty; } /* one sentence a block: a line never ends on the next one's start */
.q__s:only-child, .q__helper-s:only-child { display: inline; }
.q__helper { margin: 4px 0 0; max-width: none; color: var(--q-help); font-size: 14px; line-height: 20px; letter-spacing: 0; text-wrap: pretty; }
/* C5: the example line under screen 5's helper (switches.painExamples, off since C15), in the helper's voice */
.q__examples { margin: 4px 0 0; max-width: none; color: var(--q-help); font-size: 14px; line-height: 20px; letter-spacing: 0; }
.q__examples-lead { margin: 0; }
.q__examples-list { margin: 0; padding: 0; list-style: none; }
.q__examples-list li { margin: 0; }

/* the answers, 7FRT's boxes: the column wide, 8 / 12 px inside (42 px on one line), 8 apart, radius 8, a 1 px 30 % black
   edge on a 10 % black fill, the words 16 / 24 600 black, the white 24 px letter tile 12 px before them. Hover 15 %;
   picked 25 % with a black edge, the tile black with a white letter and a small check at the right, then on by itself */
.choices { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; text-align: left; }
.choice {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  min-height: 42px; padding: 8px 12px; border: 1px solid var(--q-edge); border-radius: 8px; cursor: pointer;
  background: rgba(0, 0, 0, 0.1); box-shadow: none;
  font-family: var(--text); font-size: 16px; line-height: 24px; letter-spacing: 0; font-weight: 600; color: var(--q-ink);
  font-variant-numeric: proportional-nums; -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}
@media (hover: hover) { .choice:hover { background: rgba(0, 0, 0, 0.15); } }
.choice[aria-checked="true"] { background: rgba(0, 0, 0, 0.25); border-color: var(--q-ink); color: var(--q-ink); }
.choice:focus-visible { outline-offset: 2px; }
.choice__key {
  flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--text); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0; color: var(--q-ink);
  background: #FFFFFF; border: 1px solid var(--q-edge); box-shadow: none;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out;
}
.choice__label { flex: 1; min-width: 0; padding: 0; }
.choice__check { flex: none; width: 16px; height: 16px; color: var(--q-ink); opacity: 0; transition: opacity var(--t-hover) var(--ease); }
.choice[aria-checked="true"] .choice__key { background: var(--q-ink); color: #FFFFFF; border-color: var(--q-ink); }
.choice[aria-checked="true"] .choice__check { opacity: 1; }
/* a pick goes on by itself 300 ms after the tap (form.js), the last screen of his path sends: no key under the answers. The
   picked answer says it is sending (a small turning ring where its check was, nothing moves); "Invia" shows only to send
   again after a failed send (.is-retry) */
.choices ~ .actions:not(.is-retry) { display: none; }
.choice.is-sending .choice__check { opacity: 0; }
.choice.is-sending::before {
  content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.choices.is-sending .choice:not(.is-sending) { pointer-events: none; }

/* the fields, 7FRT's: no box, one 1 px black line under the words, Inter 400 at 22 px, 50 px tall (8 px above and under a
   33 px line). The placeholder black at 60 %: the brief's 45 % reads 3.35:1 on the white (npm run qa, under WCAG AA 4.5:1
   and the white build's 60 % floor); 60 % is 5.7:1 and still lighter than 7FRT's own (70 % on the name, 100 % on the
   email). Focus and an error thicken the line to 2 px with a shadow (nothing moves) */
.field { width: 100%; margin: 0; }
.input {
  width: 100%; display: block; margin: 0; min-height: 50px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--q-ink); border-radius: 0;
  background: transparent; color: var(--q-ink); outline: none; caret-color: var(--q-ink); text-align: left; box-shadow: none;
  font-family: var(--text); font-weight: 400; font-size: 22px; line-height: 33px; letter-spacing: 0;
  transition: box-shadow var(--t-hover) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: rgba(0, 0, 0, 0.6); font-weight: 400; opacity: 1; }
.input:focus, .input:focus-visible { box-shadow: 0 1px 0 0 var(--q-ink); outline: none; }
.q .input.is-wrong { box-shadow: 0 1px 0 0 var(--q-ink); } /* form.js marks the field the error is about */
/* the long answer: the same line under it, 22 px words on a 30 px line, three lines tall to start, it grows (form.js) */
textarea.input { resize: none; min-height: 107px; max-height: 42vh; overflow-y: auto; line-height: 30px; }
/* screen 3: the country code picker and the number on ONE underline (7FRT's phone field: the code and its chevron on the
   left, the number after it). The picker is a native select laid over the code it shows, so a phone opens its own wheel */
.tel { display: flex; align-items: stretch; gap: 12px; border-bottom: 1px solid var(--q-ink); transition: box-shadow var(--t-hover) var(--ease); }
.tel .input { flex: 1; min-width: 0; min-height: 49px; border-bottom: 0; }
.tel .input:focus, .tel .input:focus-visible, .q .tel .input.is-wrong { box-shadow: none; }
.tel:focus-within, .tel:has(.is-wrong) { box-shadow: 0 1px 0 0 var(--q-ink); }
.dial {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 49px; padding: 0; cursor: pointer;
  border: 0; border-radius: 0; background: transparent; color: var(--q-ink);
  font-family: var(--text); font-weight: 400; font-size: 22px; line-height: 33px; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.dial__chev { display: grid; place-items: center; width: 16px; height: 16px; color: rgba(0, 0, 0, 0.45); }
.dial__chev svg { width: 12px; height: 12px; }
.dial__select { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 1rem; appearance: none; -webkit-appearance: none; } /* over the whole code box: a tap anywhere on it opens the wheel */
/* the key, only where a text field needs it ("Avanti"): 7FRT's Continue in our green, 40 px tall, the column wide on a phone
   and a desktop, radius 8, the words 14 px 600 white and a 16 px arrow 16 px after them, 24 px under the field, inline (not
   pinned); 60 % until the field holds a valid answer (form.js .is-ready). On a desktop "Invio ↵" under it */
.actions { order: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 24px; }
.btn--next { width: 100%; min-height: 40px; height: 40px; padding: 8px 24px; gap: 16px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0; }
.btn--next svg { width: 16px; height: 16px; }
.q__ctrl > .field ~ .actions .btn--next:not(.is-ready):not([disabled]) { opacity: 0.6; }
.hint { font-family: var(--text); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; color: rgba(0, 0, 0, 0.6); text-align: left; white-space: nowrap; }
.hint b { font-weight: 600; color: var(--q-ink); }
.hint__sub { font-weight: 400; }
.hint__sub::before { content: "  ·  "; white-space: pre; }
@media (hover: none) { .hint--keys { display: none; } }

/* the error: no box, no red, between the field and the key, left aligned; the field's line thickens and takes the caret back */
.err { order: 1; display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 8px 0 0; padding: 0; color: var(--q-ink); font-size: 13px; line-height: 18px; letter-spacing: 0; font-weight: 500; text-align: left; }
.err svg { width: 14px; height: 14px; flex: none; }
.err[hidden] { display: none; }
.err a { overflow-wrap: anywhere; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 599px) {
  .form-panel[data-done] { padding: 16px 20px 24px; }
}

/* ---------- 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; }
  .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--next { transition: opacity 200ms ease-in-out, transform 80ms var(--ease); }
.btn--cta:active, .btn--next: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 { font-size: var(--fs-ui); line-height: 1.5rem; letter-spacing: -0.011em; } /* application v2: the card's words are sized in its own section */
  .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 { 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, .stage > .is-leaving.to-next, .stage > .is-leaving.to-prev { transition: opacity 120ms linear; filter: none; transform: none; }
  .choice.is-sending::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .btn .i-arrow, .textlink svg, .player__play, .choice, .form-bar i, .input { transition: none; }
  .btn:hover .i-arrow, .textlink:hover svg { transform: none; }
  .player__play:hover, .btn--cta:active, .btn--next:active, .form-back:active, .player__play:active { transform: none; }
  .btn--cta, .btn--next, .form-back { transition: none; }
  .stage.is-morphing { transition: none; }
  .player__preview, .player__sound, .player__track .player__fill { transition: 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.78); /* IT 2026-10-23: 0.64 put the footer, the placeholders and the caps labels under the dark site's floor (readable text never under 75 % white, site-v7a: 0.78, 13.0:1; npm run qa) */
  --racing: #0E6B3E; /* site simple 2026-10-24: the one green */
  --watch: #0E6B3E;
  --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) and (min-height: 641px) {
  :root { --pad-t: 16px; }
}
@media (max-width: 479px) {
  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; }
}

/* IT site 2026-10-23, T-IT7S (operator: "si metti online il titolo"): the long H1, 153 characters (the lead 93, the payoff
   60) on a page built for about 85. Goh's VSL page, the source of the structure, sets its long headline small and keeps the
   whole first block on the first phone screen (research/landing-teardown-2026-10/gohconsulting-vsl.md §9 and §10: H1
   clamp(24px, 3.2vw, 36px), 3 lines at 1440, 4 at 390). html[data-h1="long"] (scripts/build.mjs heroKind; the inline hero
   script per variant) replaces the short lockups for it, and only for it (IT1, D1 and C0 keep theirs; the three titles of
   the test, A, B and C, all take it, B with its capitals in the sans, below):
   - the lead is the title (the sans, the H1 token) and the serif payoff its sub line at 1.12 x (--long-pk, scripts/build.mjs
     LONG_PAY_K: the classic lockup's serif ratio; at 1 x the serif's small x height read under the sans on a phone), never
     the biggest type: the inverted pair under 480 px was made for a short lead over a 3 to 6 word payoff;
   - lines break only between units (build.mjs longUnits: config site.phrases, or the words with every short word held to
     the next), balanced;
   - from 760 px the size holds the lead on two lines and the payoff on one (--long-w, read off the font files by the build:
     the lead's best two line split and the payoff's one line), the measure capped at --long-max, 880 px (Goh: 780 to 860 at 1440): 41.8 px at 1440 x 900;
   - under 760 px a phone size, 24 px at 320, 25.8 at 375, 26.1 at 390 (1rem + 2.6vw, at most 2rem: Goh sets 24 at 390),
     never so big that one unit runs past the column (--long-u); the lead runs four lines on every phone, the payoff two.
   No video on the page today (VIDEO-OFF-NOTE.md): nothing here reads the video's width or height */
:root { --long-max: 880px; }
html[data-h1="long"] { --h1: min(clamp(1.5rem, 1rem + 2.6vw, 2rem), (100vw - 2 * var(--gutter)) / (var(--long-u, 12) * var(--fit-k))); }
@media (min-width: 760px) {
  html[data-h1="long"] { --h1: min(3rem, min(var(--long-max), 100vw - 2 * var(--gutter)) / (var(--long-w, 22) * var(--fit-k))); }
}
html[data-h1="long"] .h1--hero { text-wrap: balance; }
html[data-h1="long"] .h1--hero .h1__u { display: inline-block; }
html[data-h1="long"] .h1--hero .h1__lead { font-size: 1em; line-height: 1.1; letter-spacing: -0.024em; }
html[data-h1="long"] .h1--hero .h1__accent { font-size: calc(var(--long-pk, 1) * 1em); margin-top: 0.28em; line-height: 1.12; letter-spacing: -0.01em; }
@media (max-width: 759px) {
  html[data-h1="long"] .h1--hero .h1__lead { line-height: 1.16; }
  html[data-h1="long"] .h1--hero .h1__accent { margin-top: 0.36em; line-height: 1.14; }
}

/* IT 2026-10-23, the title test, B (Jeremy Haynes' structure, his capitals on both lines as he wrote them;
   research/landing-teardown-2026-10/jeremy-haynes-inner-circle.md §1: "HOW TO SCALE YOUR HIGH TICKET PRODUCT OR SERVICE
   BUSINESS TO THE NEXT LEVEL", one caps line in a bold sans over the video). One layout for the three titles of the test
   (content/drafts/funnel/copy-versions/C9-hero-test-3-titles-2026-10-23.md flag 3: the test reads the words, not the type):
   B is html[data-h1="long"] like A and C (scripts/build.mjs heroKind), the same size rule, measure, breaks between phrases
   and air as above. Only the face of its capitals changes (.h1--caps, scripts/build.mjs isCapsH1):
   - both halves in the display sans, Archivo 600: Haynes' headline is one bold sans voice, and Instrument Serif italic in
     capitals reads as an invitation card, not a call out;
   - the payoff at 1 x the lead (the serif's 1.12 x only made up for its smaller x height), the gap over it the same in px as
     A's and C's (0.28 x 1.12 em, 0.36 x 1.12 on a phone);
   - +0.01em of tracking on both halves (capitals set at a lowercase tracking clog; the build measures them at the same
     CAPS_TRACK, so the size rule holds them inside the column);
   - the ink on the ground, no green: the key stays the only green on the screen.
   26.1 px at 390 and 25.8 at 375, as A and C (npm run qa); 38.2 px at 768 and 47.8 from 1280 (A 40.8 and 48, C 44.4 and 48:
   B's longest line is a touch wider) */
html[data-h1="long"] .h1--hero.h1--caps .h1__lead { letter-spacing: 0.01em; }
html[data-h1="long"] .h1--hero.h1--caps .h1__accent { font-family: var(--display); font-style: normal; font-weight: 600; font-size: 1em; letter-spacing: 0.01em; margin-top: calc(0.28em * 1.12); }
@media (max-width: 759px) {
  html[data-h1="long"] .h1--hero.h1--caps .h1__accent { margin-top: calc(0.36em * 1.12); }
}


/* Mobile type pass (2026-10-23). Operator, verbatim: "Allora sia italiano che inglese mettilo nero lo sfondo che viene
   meglio. Ma fixa gli spazi e il font viene male è brutto scritto cosi a livello di parole e righe in versione mobile.
   Ottimizza sempre tutto per mobile e per iphone". The D3 winner of three judged builds (scratch typo-D1, D2, D3), with the
   graft two of the three judges asked for (a phone on its side, below). The rules, measured on the five reference pages
   at 375, 390 and 430 (research/landing-teardown-2026-10/MOBILE-HERO-TYPE-2026-10-23.md §2); the words are his, only how
   they are set changes:
   - one face for the whole headline: Inter 700, the payoff in Inter 700 italic at the same size, the same white and the
     same line pitch (no second family, no bigger last line, no gap inside the headline). B, all capitals, one block with
     no mark. Every hero H1 is set this way, the test's three and the controls (html[data-h1="set"]: the old long and short
     lockups above no longer apply to a hero);
   - each line set by hand (config site.lines; a control by the same rules in code, scripts/build.mjs setAuto): every line
     a no wrap line, so iPhone Safari and Chrome break in exactly the same places. The size is the column over the widest
     line (--set-wp / --set-ww, em from the Inter 700 files), so the widest line fills 96 % of the column on every iPhone
     (4 % in hand for a Safari that sets a hair wider) and never re-breaks; at most 32 px on a phone, 40 from 600 px;
   - line height 1.12 on every line (1.1 from 760 px); tracking -0.02em on lowercase (Inter's own value at 28 px), 0 on
     capitals;
   - the eyebrow one line of caps (Inter 600, 13 px, +0.12em, the 78 % white; 15 px from 1024 px, the type roles); a control's longer
     eyebrow wraps balanced instead of running off the screen. The words stay as written: the capitals are CSS only;
   - the gaps (phone): the bar to the eyebrow 20 (16 on a screen 640 px tall or less), the eyebrow to the headline 20, the
     headline to the key 24, the key to its note 12 (as before), the note to the card 48 (as before); from 760 px the
     eyebrow to the headline 24 and the headline to the key 32;
   - from 760 px the wide lines (three), at most 52 px, on the 880 px measure;
   - a phone on its side (600 px wide or more, 500 tall or less: a 14 or 15 at 844 x 390, a Pro Max at 932 x 430, an SE at
     667 x 375): the wide lines at 32 px at most and the top gaps at 16, so the key and its note stay on the first screen
     (the judges' graft, from typo-D1; the wide lines there too, so a short screen gets three lines, not four or five);
   - the key's label Inter 600 at 17 px (the references: 17 to 20 px, 600 to 800); the card's question, the ending's title
     and the page titles in the headline's face, so the screen reads in one sans (the wordmark aside).
   Green stays on the key alone; every line of the headline is the ink.
   J1 (below, 2026-10-23) replaced the face, the size, the line height, the tracking, the gaps and the headings' face of
   this pass (Inter 700 and its italic are gone from the site); the hand-set lines, the no wrap lines, the 760 px split
   and the phone on its side stay as this pass set them. */
/* J1 (2026-10-23). Operator, on his iPhone, our live B next to Jake Trinder's viewstoclients.com: "bro da telefono si vede
   cosi ed è veramente brutto il mio, guarda quello a sx di jack come è impaginato bene il testo perchè noi si vede così
   grosso, male e nessuna parola è marcata?". Jake's headline one to one, every value measured on his page
   (research/landing-teardown-2026-10/MOBILE-HERO-TYPE-2026-10-23.md §5), our colours:
   - his face: DM Serif Display 400 (SIL OFL 1.1, self hosted), the payoff in its italic, the same size and line pitch;
   - his size: clamp(29px, 7.7vw, 32px), 29 at 375, 30.03 at 390, 30.26 at 393, 32 at 430; lower only if a line's measured
     width would pass 97 % of the column (100vw less 2 x 18, his H1 box), which none of A, B, C does on an iPhone;
   - his line height 1.09 on every line, his tracking -0.035em (capitals -0.01em: the serifs of LL in CONTROLLO and LIVELLO
     touch under that), his warm off white #F8F5EF on the plain lines;
   - his box: a band 1.00 em tall (16 % to 88 % of the inline box), 0.07em padding each side, square, white text, our green
     as the fill in place of his red; a box sits on one line or, cut where the hand lines break, runs on two with its band
     cloned (box-decoration-break: clone). The green is the key's #006039 lifted, the same hue (156), to #008851: the
     judges' fix, two of two (2026-10-23): at #006039 the band read 2.6:1 on the ground against 5.3:1 for Jake's red, so the
     marked words still did not jump out ("nessuna parola è marcata"); #008851 reads 4.5:1 on the ground and keeps white
     text on it at AA (4.53:1). The key stays #006039, his ruled watch green (memory/DECISION_LOG.md:468): moving the
     key to the lifted green is his call (qa/hero-jake-2026-10-23/key-green-390x844.png shows both);
   - his italic tail in white (no green text: the italic alone carries the risk reversal);
   - his gaps: 8 from the mark to the headline (here the eyebrow), 18 from the headline to the next block (the video is off,
     so the key), 14 from the key to the next line (the effort note).
   Every line is still set by hand (config site.lines): his own page re-breaks on WebKit ("Generate Leads Or Sales, Or" /
   "You Don't Pay." on the operator's iPhone), so text-wrap: balance is never trusted.
   Fresh eyes pass (2026-10-23): the band holds its words' ink. Jake's 16 % to 88 % holds his phrases (no descender, no
   accent); ours have both: the g of "l’immagine" hung 1.3 px under the band and the À of "FELICITÀ" stood 2 px over it,
   1.2 px from the band above. scripts/build.mjs setBand reads each H1's boxes and writes --band-t, --band-b and --set-lh
   on its .h1--set rule: a descender 19 % to 93 % (1.03 em, the line height still 1.09), an accented capital from
   9.1 % with the line height at 1.16 (0.06 em of ground between two bands), any other phrase Jake's band; the defaults
   below are Jake's. npm run qa measures each band's ink against its edges at every iPhone size. */
/* IT 2026-10-24, the heading face. Operator, verbatim: "non devi mettere l'8 devi decidere tra 4 o 5 e usa quella che scegli tra
   4 o 5 di font". The brain picked tile 5 (research/landing-teardown-2026-10/fonts-2026-10-24/FONTS-COMPARE.md, FONT-SHEET-390.jpg):
   Montserrat 700, Marczell Klein's face (his home and Mental Millionaire pages: 700, tracking 0, line height 1.30). ICP #1 is
   his buyer, and it reads as the marketer's world, not the 2026 template look Inter and Plus Jakarta Sans give. It replaces
   DM Serif Display (J1) on the hero H1 and on every heading that took it: the section titles, the card results, the fit and
   FAQ headings, the endings, the page titles (booked, the testimonial pages, the legal pages). Body, sub and keys stay Inter;
   the green band unchanged. Self hosted: the Google Fonts release's two WOFF2 subsets of Montserrat 700 (SIL OFL 1.1,
   /assets/fonts/Montserrat-OFL.txt), the latin one preloaded (partials/head.html), latin-ext by unicode-range only. No
   italic face: a title's accent is set upright, never a slanted fake. The fallback is a bold grotesque narrower than
   Montserrat, so a no wrap hero line never runs past the screen before the face is in */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-700.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 {
  --jake: "Montserrat", "Helvetica Neue", Arial, sans-serif;  /* the heading face (IT 2026-10-24, tile 5); the name kept so every rule that reads it moves with it */
  --jake-caps: var(--jake);
  --set-ink: #F8F5EF;  /* Jake's warm off white, the plain lines (18.6:1 on the ground) */
  --set-box: #0E6B3E;  /* the band. Site simple 2026-10-24 (his "a yes"): the one green, the key's; white text on it 6.6:1, 3.1:1 on the ground */
  --set-fill: 0.96;  /* the widest line's share of the column, at most (IT 2026-10-24, Montserrat: 96 %, the 4 % in hand for a Safari that sets a hair wider) */
  --set-col: calc(100vw - max(18px, env(safe-area-inset-left, 0px)) - max(18px, env(safe-area-inset-right, 0px)));
}
/* from 600 px the column the size rule fills is the page's own (the 32 and 48 px gutters), not Jake's phone H1 box */
@media (min-width: 600px) {
  :root { --set-col: calc(100vw - max(var(--gutter), env(safe-area-inset-left, 0px)) - max(var(--gutter), env(safe-area-inset-right, 0px))); }
}
/* the bar to the eyebrow 12 on a phone (8 on one 640 px tall or less: an SE or a mini in Safari with its bars) */
@media (max-width: 599px) { .hero .hero__col { padding-top: 12px; } }
@media (max-width: 599px) and (max-height: 640px) { .hero .hero__col { padding-top: 8px; } }
.hero .qualifier {
  font-family: var(--text); font-weight: 600; font-size: 0.8125rem; line-height: 1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--type-2); text-wrap: balance;
}
html .hero h1.h1--set {
  margin-top: 8px;
  font-family: var(--jake); font-weight: 700; font-style: normal; color: var(--set-ink);
  font-size: min(clamp(29px, 7.7vw, 32px), var(--set-col) * var(--set-fill) / var(--set-wp, 12));
  line-height: var(--set-lh, 1.3); letter-spacing: 0;
  white-space: nowrap; text-wrap: nowrap; font-kerning: normal; font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html .hero h1.h1--set .h1__lead, html .hero h1.h1--set .h1__accent {
  display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; white-space: inherit;
}
html .hero h1.h1--set .h1__accent { font-style: normal; color: #FFFFFF; } /* IT 2026-10-24: Montserrat has no italic here; upright, never a slanted fake */
html .hero h1.h1--set .h1__box {
  color: #FFFFFF;
  background: linear-gradient(to bottom, transparent var(--band-t, 10.29%), var(--set-box) var(--band-t, 10.29%), var(--set-box) var(--band-b, 97.51%), transparent var(--band-b, 97.51%));
  padding: 0 0.07em 0.025em; border-radius: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html .hero h1.h1--set.h1--caps { letter-spacing: 0; font-family: var(--jake-caps); }
/* the phone lines under 760 px, the wide lines from 760 px and on a phone on its side (600 px wide or more, 500 tall or
   less: fewer, longer lines on a short screen); a plain br is a break in both. npm run qa holds the same split */
@media (max-width: 599px), (max-width: 759px) and (min-height: 501px) { .h1--set br.br-w { display: none; } }
@media (min-width: 760px), (min-width: 600px) and (max-height: 500px) { .h1--set br.br-p { display: none; } }
@media (min-width: 600px) {
  html .hero h1.h1--set { font-size: min(2.5rem, var(--set-col) * var(--set-fill) / var(--set-wp, 12)); }
}
@media (min-width: 760px) {
  html .hero h1.h1--set { margin-top: 16px; font-size: min(3.25rem, min(var(--long-max), var(--set-col)) * 0.96 / var(--set-ww, 20)); line-height: var(--set-lh, 1.3); }
}
/* the headline to the key 18 on a phone (Jake: the headline to his video), 32 from 760 px; the key to its note 14 */
.hero .h1--set ~ .hero__key { margin-top: 18px; }
.hero .h1--set ~ .hero__key .cta-note { margin-top: 14px; }
/* the note in two lines on a phone, as Jake's line under his form heading: its sentences run on (inline, not one block a
   sentence) and its clauses stay whole (.cta-note__c, no wrap), so it breaks only after a full stop or a comma, in the
   fewest lines: "Ci vuole un minuto. Se fa per te," / "trovi il calendario per fissare una chiamata.", not three lines
   with "Se fa per te," alone in the middle. npm run qa holds the break rule */
@media (max-width: 599px) { .hero .h1--set ~ .hero__key .cta-note__s { display: inline; } }
@media (min-width: 760px) { .hero .h1--set ~ .hero__key { margin-top: 32px; } }
/* hero split preview (2026-10-23, operator: "si fammi vedere come verrebbe?"): the sub of a split hero (A2, B2, C2: ?copy=
   only), set as the newest Cameron England pages and Goh set theirs (research/landing-teardown-2026-10/HERO-MEASURES-
   2026-10-23.md: a plain sans at 16 to 25 px, weight 500 to 600, line height 1.35 to 1.55, 14 to 18 px under the headline):
   Inter 600, 17 px on a phone and 21 from 760 px, line height 1.4, 16 px under the headline (18 from 760 px), the off white
   of the plain headline lines (never green text). Its sentences are inline blocks, so a phone breaks it at a full stop and
   a one sentence sub balances; two lines at most on a phone (npm run qa). The key keeps its own gap, now under the sub */
.hero .hero__sub {
  margin: 16px auto 0; max-width: 34em;
  font-family: var(--text); font-weight: 600; font-size: 17px; line-height: 1.4; letter-spacing: -0.012em;
  color: var(--set-ink); text-wrap: balance; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.hero .hero__sub-s { display: inline-block; text-wrap: balance; }
/* a one sentence sub (B2, C2) balances as one block: an inline block of its own broke "Riprogrammando" alone over
   "l’immagine che hanno di sé." at 375 and 390 */
.hero .hero__sub-s:only-child { display: inline; }
/* upgrade 4 (2026-10-24, "no layout shift"): on a phone a sub of two sentences is always two lines, one sentence a line (the
   way it reads in Inter 600 at every iPhone width), so a fallback face that sets narrower before Inter arrives never puts
   them on one line and then drops the second one, moving everything under it (24 px at 390) */
@media (max-width: 599px) { .page-landing .hero .hero__sub-s:not(:only-child) { display: block; } }
@media (min-width: 760px) { .hero .hero__sub { margin-top: 18px; font-size: 21px; } }
@media (min-width: 600px) and (max-height: 500px) { .hero .hero__sub { margin-top: 14px; font-size: 17px; } }
/* a phone on its side (the judges' graft of the D pass): 600 px wide or more and 500 tall or less. The wide lines at 32 px
   at most, the top gaps at 8 and the key 18 under the headline, so the key and its note stay on the first screen */
@media (min-width: 600px) and (max-height: 500px) {
  .hero .hero__col { padding-top: 12px; }
  html .hero h1.h1--set { margin-top: 8px; font-size: min(2rem, min(var(--long-max), var(--set-col)) * 0.96 / var(--set-ww, 20)); line-height: var(--set-lh, 1.3); }
  .hero .h1--set ~ .hero__key { margin-top: 18px; }
}
@media (min-width: 1024px) { .hero .qualifier { font-size: var(--fs-body-s); } }
/* the key's label: Inter 600 at 17 px (the references: 17 to 20 px, 600 to 800); the card's keys (OK, Submit) in the same
   weight (application v2: .btn--next, Inter 600 at 16 px) */
.hero__key > .btn--cta { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.012em; }
/* J1 (2026-10-23): every heading in the headline's face, as Jake sets the heading over his form ("Book Your Strategy
   Call", DM Serif Display 400, the same face as his headline): the card's question, the ending's title, the page titles
   and the legal headings, so the page reads in one display face and one text face (Inter); a title's last sentence (an
   ending, /booked) in its italic, as the headline's payoff. The mobile type pass had them in Inter 700 */
.ending__title, .h1--page, .legal h1, .legal h2 { font-family: var(--jake); font-weight: 700; letter-spacing: 0; } /* IT 2026-10-24: Montserrat 700 at 0 (tile 5) */
.ending__title, .h1--page { font-size: 2.25rem; line-height: 2.75rem; } /* IT 2026-10-24: a fifth under DM Serif's 2.75rem, Montserrat sets a fifth wider */
@media (max-width: 599px) { .ending__title, .h1--page, .legal h1 { font-size: 1.5rem; line-height: 1.875rem; } }
.ending__title.h1--accent-last .h1__s:last-child, .h1--page.h1--accent-last .h1__s:last-child {
  font-family: var(--jake); font-style: normal; font-weight: 700; font-size: 1em; line-height: inherit; letter-spacing: 0;
}
/* the opening. Upgrade 4 (IT 2026-10-24, operator "4 do it": "the headline lines appear one after the other; the green box
   draws itself behind the boxed words ... every animation under half a second, no bounce, all of it off under
   prefers-reduced-motion, and nothing may delay the first paint of the headline (no layout shift, the text is in the HTML
   at full opacity if JS fails)"). Was: the headline in one block (focus-in, 520 ms).
   - Each line is its own run (scripts/build.mjs setLockup: <span class="h1__ln"> with its line number on a phone, data-lp,
     and wide, data-lw), an inline block on its no wrap line, so it can rise without moving a thing around it (a transform:
     no layout shift). The phone numbers rule under 760 px, the wide ones from 760 px and on a phone on its side, the same
     split as the breaks (br-p, br-w).
   - Line n comes in at 40 + 80 n ms, in 380 ms: from 1 % opacity (never 0, so the first frame already paints it and the
     largest paint is never held back) and 0.24 em low, to its place, on the house curve (an ease out with no overshoot:
     no bounce). Three phone lines are all in by 580 ms.
   - The band draws itself left to right behind its words in 420 ms, 160 ms after its line starts to come in (its
     background grows from 0 to the full width: a paint, never a layout); a band over two lines draws both pieces together.
   - CSS only: no script holds or starts anything, so with JavaScript off the page opens exactly the same; under
     prefers-reduced-motion nothing of this runs and every line and band is simply there */
html .hero h1.h1--set .h1__ln { display: inline-block; }
html .hero h1.h1--set .h1__box { background-repeat: no-repeat; background-size: 100% 100%; }
.h1--set [data-lp="1"] { --l: 1; } .h1--set [data-lp="2"] { --l: 2; } .h1--set [data-lp="3"] { --l: 3; } .h1--set [data-lp="4"] { --l: 4; } .h1--set [data-lp="5"] { --l: 5; }
@media (min-width: 760px), (min-width: 600px) and (max-height: 500px) {
  .h1--set [data-lw="0"] { --l: 0; } .h1--set [data-lw="1"] { --l: 1; } .h1--set [data-lw="2"] { --l: 2; } .h1--set [data-lw="3"] { --l: 3; }
}
@media (prefers-reduced-motion: no-preference) {
  html .hero h1.h1--set .h1__lead, html .hero h1.h1--set .h1__accent { animation: none; }
  html .hero h1.h1--set { animation: none; }
  html .hero h1.h1--set .h1__ln { animation: line-in 380ms var(--ease) calc(40ms + var(--l, 0) * 80ms) both; }
  html .hero h1.h1--set .h1__box { animation: band-draw 420ms var(--ease) calc(200ms + var(--l, 0) * 80ms) both; }
  @keyframes line-in { from { opacity: 0.01; transform: translateY(0.24em); } to { opacity: 1; transform: none; } }
  @keyframes band-draw { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
}

/* ---------- Site simple (2026-10-24). Operator, verbatim (memory/DECISION_LOG.md 2026-10-24 SITE SIMPLE, 7FRT ORDER): "io
   farei molto semplice headline con il mio nome, non troppo padding (controlla il padding di licenseandscale 7frt)
   headline subheadline vsl (per ora su ita non la mettere ...) banner del The protocol for millionaire business owner...
   form footer ..."; on the banner "io farei lo stesso riquadro, formato, grandezza, colori (ma con i nostri) poi sotto apply
   now con la freccia e il form in contrasto bianco su nero"; "a yes" (one green, #0E6B3E, the key and the bands; gold for
   the small labels and the banner's marks); "b yes" (the Tommaso and Nicholas cards on the page and the key to the chain).
   The measures are License & Scale /7frt's, read at 390 x 844 and 1440 x 900 on 2026-10-24
   (research/landing-teardown-2026-10/design-refs/licenseandscale-7frt-2026-10-24/measures.json): the headline 12 under the
   logo, the sub 16 under the headline, the box 22 under the block over it (the video there, the proof strip here), its
   padding 15 / 22, 1 px border, radius 10, Inter 800 at clamp(14px, 2vw, 17px), the marked words colour only; "APPLY NOW ↓"
   24 under the box, Inter 800 at clamp(20px, 3vw, 27px), 0.08em, the plain arrow, 20 over the white form card; the form
   48 over what comes next. Our colours: the box's line the one green, its fill a dark green wash (7frt's dark red, ours),
   the marks in the gold. Valori's finishing on black (design-refs/valori-2026-10-23): a soft glow behind the headline, the
   thin light line on the key (--key-shadow's top highlight), thin border cards, small mono caps labels in the gold.
   Never spiritual (DECISION_LOG 2026-10-23 THE LOOK): one low green wash, no aura, no gradient sky. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/inter-latin-800-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 {
  --gold: #C9B27C;  /* a muted champagne, never the cover yellow: 9.8:1 on the ground; labels and the banner's marks only, never on a green fill */
  --sec-col: 840px; /* 7frt's video and box width at 1440 */
}
/* the bar to the headline: 7frt sets its headline 12 under the logo; the bar holds the name, the headline starts right under it */
.page-landing .hero .hero__col { padding-top: 4px; padding-bottom: 0; }
html .page-landing .hero h1.h1--set { margin-top: 0; }
.page-landing .hero .qualifier + h1.h1--set { margin-top: 8px; } /* a ?copy= control with its eyebrow */
@media (min-width: 760px) and (min-height: 501px) { .page-landing .hero .hero__col { padding-top: 16px; } } /* a phone on its side keeps the phone's 4 */
/* the light behind the headline. Upgrade 2 (IT 2026-10-24, operator "2 do it": "the green light low and diffused behind the
   headline the way 7frt uses two radial glows (subtle, never an aura)"): 7frt lays two washes of its darkest red on the black,
   one up at the left, one down at the right, each one a wide soft ellipse (research/landing-teardown-2026-10/design-refs/
   licenseandscale-7frt-2026-10-24/measures.json page.bg). Ours: two washes of the one green, the first up and left of the
   headline (its centre behind the last line: low), the second lower and to the right, behind the sub and the box, at 13
   and 8 % at their centres, faded in three steps to nothing well inside the layer's own box (no edge, no ring). Their
   sizes and centres scale with the screen so the first one is under 3 % where the page meets the bar (the bar stays the
   plain black: a step of 3 levels at most, under the grain) and the second one never reaches it; the card covers the
   rest. Was one wash at 22 % centred on the headline (about 5 levels at the bar's edge) */
.page-landing .hero { position: relative; isolation: isolate; }
.page-landing .hero::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -64px; bottom: -64px; pointer-events: none;
  background:
    radial-gradient(min(460px, 64vw) min(176px, 39vw) at 30% calc(64px + min(110px, 25vw)), rgba(14, 107, 62, 0.13), rgba(14, 107, 62, 0.045) 50%, rgba(14, 107, 62, 0.012) 75%, rgba(14, 107, 62, 0)),
    radial-gradient(min(520px, 72vw) min(220px, 50vw) at 72% calc(64px + min(230px, 56vw)), rgba(14, 107, 62, 0.08), rgba(14, 107, 62, 0.03) 50%, rgba(14, 107, 62, 0.008) 75%, rgba(14, 107, 62, 0));
}
/* the proof strip: his three lines (Tommaso, Nicholas, his own business), heavy and plain, the name a gold mono label; each
   sentence an inline block, so a line breaks at a full stop first */
.proofs { list-style: none; margin: 20px auto 0; padding: 0; max-width: var(--sec-col); display: grid; gap: 8px; }
.proofs__i {
  margin: 0; font-family: var(--text); font-weight: 600; font-size: 15px; line-height: 1.45; letter-spacing: -0.009em;
  color: var(--set-ink); text-wrap: balance;
}
.proofs__who { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.proofs__s { display: inline-block; text-wrap: balance; }
@media (min-width: 760px) { .proofs { gap: 4px; } .proofs__i { font-size: 16px; } }
/* his photo where the video goes (IT 2026-10-24, switches.heroPhoto, on in the preview build only until he picks; operator:
   "metti un immagine mia al posto della vsl che metteremo quando la registrerò di nuovo, giusto per staccare"): the video's
   place and size, 20 under the sub, 16:9, the column wide (840 at most, 7frt's video). The picture is a plain 16:9
   rectangle of a real room (scripts/hero-photo.py: nothing cut out round him, a light grade that rolls the wall's
   highlights off and falls softly from his face to the corners); here its four edges fade into the page black (a mask, so
   the picture blends into whatever is behind it), never a hard line on the black. No frame, no radius, no shadow, no shade
   over it: nothing reads as a video, nothing to click. On a desktop it stays short enough for the card's head to show on
   the first screen (--photo-rest = the bar, the headline, the sub, the banner, "Candidati ora" and the card's first 60 px
   with their gaps, measured at 1440 x 900), never under 480 wide */
.photo { --photo-rest: 496px; --photo-fade-x: 7%; --photo-fade-t: 8%; --photo-fade-b: 16%; position: relative; width: 100%; max-width: var(--sec-col); margin: 20px auto 0; }
.photo__pic {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: transparent;
  /* the soft edge: two fades crossed (sides, then top and bottom), the bottom longer so the room sinks into the black */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--photo-fade-x), #000 calc(100% - var(--photo-fade-x)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--photo-fade-t), #000 calc(100% - var(--photo-fade-b)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--photo-fade-x), #000 calc(100% - var(--photo-fade-x)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--photo-fade-t), #000 calc(100% - var(--photo-fade-b)), transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 599px) { .photo { --photo-fade-x: 6%; --photo-fade-t: 6%; --photo-fade-b: 14%; } }
.photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
@media (min-width: 900px) {
  .photo { max-width: min(var(--sec-col), max(480px, (100svh - var(--photo-rest)) * 16 / 9)); }
}
@supports not (height: 1svh) {
  @media (min-width: 900px) { .photo { max-width: min(var(--sec-col), max(480px, (100vh - var(--photo-rest)) * 16 / 9)); } }
}
/* a phone on its side (600 wide or more, 500 tall or less): the picture no taller than the screen under the bar */
@media (min-width: 600px) and (max-height: 500px) { .photo { max-width: min(var(--sec-col), (100vh - var(--bar-h) - 32px) * 16 / 9); } }
/* the banner: 7frt's box, our colours */
.banner { box-sizing: border-box; width: 100%; max-width: var(--sec-col); margin: 22px auto 0; padding: 15px 22px;
  border: 1px solid var(--watch); border-radius: 10px; background: rgba(14, 107, 62, 0.1);
  font-family: var(--text); font-weight: 800; font-size: clamp(14px, 2vw, 17px); line-height: 1.21; letter-spacing: 0;
  color: #FFFFFF; text-align: center; text-wrap: balance;
}
.banner__s { display: inline-block; text-wrap: balance; }
.banner__mark { color: var(--gold); }
/* fresh eyes 2026-10-24: on a 375 phone (iPhone mini, SE) 22 a side left 297 px and "Candidati qui sotto e scopri se hai i
   requisiti." (305 px) fell to a fourth line; 16 a side keeps 7frt's three lines, the box the same size */
@media (max-width: 379px) { .banner { padding-inline: 16px; } }
/* "Candidati ora ↓": 7frt's line, caps by CSS, the plain arrow */
.apply-now {
  margin: 24px 0 0; font-family: var(--text); font-weight: 800; font-size: clamp(20px, 3vw, 27px); line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF;
}
/* the form, 20 under the line, as a white card on the black page (7frt's light form; our ink, our green key). The card
   carries the light tokens of the white build, so every word, line and key inside it reads dark on white */
.page-landing .apply { padding-top: 20px; padding-bottom: 0; scroll-margin-top: -20px; }
.page-landing .form-panel {
  color-scheme: light;
  --ground: #FFFFFF; --type: #050605; --body: rgba(5, 6, 5, 0.88); --type-2: rgba(5, 6, 5, 0.72); --type-3: rgba(5, 6, 5, 0.6);
  --card: #FFFFFF; --hair: rgba(5, 6, 5, 0.08); --hair-2: rgba(5, 6, 5, 0.12); --ring: rgba(5, 6, 5, 0.1); --edge: rgba(5, 6, 5, 0.45);
  --line: rgba(5, 6, 5, 0.08); --line-2: rgba(5, 6, 5, 0.12);
  --veil: rgba(5, 6, 5, 0.04); --veil-2: rgba(5, 6, 5, 0.06); --track: rgba(5, 6, 5, 0.1); --progress: #050605;
  --cal-primary: #0E6B3E; /* operator 2026-10-24: the Calendly embed in our colours, the one green as its primary (6.6:1 on the white) */
  --frame-shadow: 0 0 0 1px rgba(5, 6, 5, 0.1), 0 14px 28px rgba(5, 6, 5, 0.06);
  background: #FFFFFF; color: var(--body); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 32px 64px -24px rgba(0, 0, 0, 0.8);
}
.page-landing .form-panel ::selection { background: #050605; color: #FFFFFF; }
/* the cleaner card (2026-10-24, "migliora anche a livello di design, font e numero di test (rendilo piu pulito)"): one radius
   family (the card 12 as the cards under it, the fields, the answers and the key 10), the key flat on the white (its green
   glow reads as a grey smudge on white; its 1 px racing ring and its thin top light stay), the field's edge and the answers'
   fill unchanged (a field you can see at once) */
.page-landing .form-panel { border-radius: 12px; --r-obj: 10px; }
.page-landing .form-panel .form-bar { border-radius: 12px 12px 0 0; }
.page-landing .form-panel .btn--next { border-radius: 8px; box-shadow: none; } /* C15 + 7FRT: a plain flat key, radius 8 */
.page-landing .form-panel .btn--next:focus-visible { box-shadow: none; outline: 2px solid var(--racing); outline-offset: 3px; }
.page-landing .form-panel .btn--next::before { display: none; }
/* under the form: the results (the cards and the key to the chain), then the sections, each one label, one title, one block */
.sec { padding-top: 64px; }
.sec__col { max-width: calc(var(--sec-col) + 2 * var(--gutter)); text-align: center; }
.sec__label { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sec__title {
  margin: 12px auto 0; max-width: 18em; font-family: var(--jake); font-weight: 700; font-size: 24px; line-height: 1.2;
  letter-spacing: 0; color: var(--set-ink); text-wrap: balance;
}
/* IT 2026-10-24, the heading scale in Montserrat 700 (qa title-test-qa-2026-10-24: at DM Serif's 30 px the titles left
   "immagine" and "tu." alone on a line at 375 and 390, and stood bigger than the headline, 24.17 to 28.10 px on a phone).
   Montserrat sets about a fifth wider than DM Serif Display, so every heading goes down by that fifth, as the headline did:
   the section titles 24 px on a phone (32 from 760 px, Marczell's own section size), the card results 21, the fit and FAQ
   headings 20, the testimonial result 20, the endings and page titles 24 / 36. The headline stays the biggest type */
.sec__s, .step__s, .fit__s, .faq__s, .tcard__s { display: inline-block; text-wrap: balance; }
.sec__s:only-child, .step__s:only-child, .fit__s:only-child, .faq__s:only-child, .tcard__s:only-child { display: inline; }
.sec__body { margin: 16px auto 0; max-width: 32em; font-size: 17px; line-height: 1.55; color: var(--body); text-wrap: balance; }
/* thin border cards (Valori), radius 12. Upgrade 2 (IT 2026-10-24, operator "2 do it": "cards with a thin border that fades and
   a soft inner shadow, like Valori. A closed club, not a software product"; design-refs/valori-2026-10-23, its dark cards):
   the veil runs from 4.5 % white at the top to 1.5 % at the foot (the light falls from above, as on the page), a soft inner
   shadow 32 px deep takes the edges back towards the black, and the 1 px border fades: 16 % white along the top, 4 % from
   the middle down, 2 % at the foot (a masked layer, so the corners keep the radius). Where the mask is not supported the
   card keeps the old even hairline ring. No outer glow, no blur, no colour */
.tcards, .steps, .fit { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.tcard, .step, .fit__card {
  position: relative; margin: 0; padding: 24px 20px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 0 0 1px var(--hair-2), inset 0 0 32px rgba(0, 0, 0, 0.4);
}
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .tcard, .step, .fit__card { box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.4); }
  .tcard::before, .step::before, .fit__card::before {
    content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.02)) border-box;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); mask-clip: padding-box, border-box; mask-composite: exclude;
  }
}
.tcard__name { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.tcard__result { margin: 8px 0 0; font-family: var(--jake); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: 0; color: var(--set-ink); text-wrap: balance; }
.tcard__line { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--type-2); text-wrap: balance; }
.step__n { display: block; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.14em; color: var(--gold); font-variant-numeric: tabular-nums; }
.step__t { margin: 8px 0 0; font-family: var(--text); font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -0.014em; color: var(--set-ink); text-wrap: balance; }
.step__p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--type-2); text-wrap: balance; }
.fit__h { margin: 0; font-family: var(--jake); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: 0; color: var(--set-ink); }
.fit__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; } /* a list reads left aligned (the house's one exception) */
.fit__i { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.5; color: var(--body); }
.fit__icon { width: 16px; height: 16px; margin-top: 4px; }
.fit__card--yes .fit__icon { color: var(--set-ink); } /* fresh eyes 2026-10-24: the gold stays on the small labels and the banner's marks only */
.fit__card--no .fit__icon { color: var(--type-3); }
.faq { margin: 24px auto 0; max-width: 640px; border-top: 1px solid var(--hair); }
.faq__i { padding: 24px 0; border-bottom: 1px solid var(--hair); }
.faq__q { margin: 0; font-family: var(--jake); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: 0; color: var(--set-ink); text-wrap: balance; }
.faq__a { margin: 8px auto 0; max-width: 32em; font-size: 16px; line-height: 1.55; color: var(--type-2); text-wrap: balance; }
.sec--last { padding-bottom: 64px; }
.sec--last .btn--cta { margin-top: 24px; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.012em; }
@media (max-width: 599px) {
  .sec { padding-top: 48px; }
  .sec--last { padding-bottom: 48px; }
  .sec--last .btn--cta { width: 100%; min-width: 0; padding: 0 24px; }
}
@media (min-width: 600px) { .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) {
  .sec__title { font-size: 32px; line-height: 1.15; }
  .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.steps { max-width: 640px; margin-inline: auto; } /* one column at every width: three columns set each step's lines four words wide at 1440 */
/* the footer: the row as before, then his line in very small type (7frt: 10.5 px, line height 1.7, centred, 820 wide) */
.footer--landing .footer__inner { padding-bottom: 12px; }
.footer--landing .footer__fine { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.footer__legal { margin: 0 auto; max-width: 820px; font-family: var(--text); font-weight: 400; font-size: 11px; line-height: 1.7; letter-spacing: 0; color: var(--type-3); text-wrap: balance; }
.footer__legal-s { display: inline-block; text-wrap: balance; } /* fresh eyes 2026-10-24: a sentence never starts at the end of a line (a name split from its verb at a line end) */
@media (max-width: 599px) { .footer--landing .footer__inner { padding-bottom: 12px; } }
/* the opening: the sub, the box and the line come in by focus after the headline's lines, one after the other, the card
   fades in place. Upgrade 4 (IT 2026-10-24): every animation under half a second (the card was 600 ms), the steps in time
   with the lines above (the sub at 240 ms, the box at 300, the line at 340, the card at 400); all done by 840 ms */
@media (prefers-reduced-motion: no-preference) {
  .page-landing .hero .hero__sub { animation: focus-in 420ms var(--ease) 240ms both; }
  .proofs, .banner { animation: focus-in 440ms var(--ease) 300ms both; }
  .apply-now { animation: focus-in 440ms var(--ease) 340ms both; }
  .page-landing .apply { animation: settle 440ms var(--ease) 400ms backwards; }
  .photo { animation: land 480ms var(--ease) 140ms both; }
}

/* ---------- Upgrade 2, depth on the black (IT 2026-10-24, operator "2 do it": "a very fine film grain; a faint vignette ...
   A closed club, not a software product"). Two layers under every word, on every public page (the dashboard keeps its own
   page):
   - the film: /film.webp, a 200 px tile of fine noise (5 KB, lossless, white specks on nothing: alpha 0 to 7 %), drawn once
     from an SVG feTurbulence (fractal, 1.2 cycles a px, stitched, so the tile has no seam) and kept as a picture, because a
     picture is decoded off the main thread: the SVG drawn live held the first paint about 40 ms on a throttled phone, and
     nothing may delay the first paint of the headline. On the black it lifts the ground about 1 level of 255 on average
     and 7 at the brightest 1 % of pixels. It scrolls with the page, as paper does; never over a word, never on the white
     card (the card covers it). The bar stays the plain black: a picture in the bar would become the page's largest paint
     and wait for the file, and the lights under it are set to fade out before they reach it (npm run qa: no step under it)
   - the vignette: fixed to the screen, clear over the middle (to 58 % of the way from a point a quarter down the screen
     to its farthest corner), then 50 % black at the corners: the edges sink a touch, the grain fades out towards them.
   Both sit behind the content (z-index -1 inside the body, which isolates), pointer-events none. npm run qa reads the
   black ground with the film on it (its average, and the brightest speck) and holds the film neutral (no tint) */
:root { --film: url("/film.webp"); }
body:not(.admin)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--film) 0 0 / 200px 200px repeat;
}
body:not(.admin)::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: -1; pointer-events: none;
  background: radial-gradient(farthest-corner at 50% 24%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.5) 100%);
}
@supports (height: 1lvh) { body:not(.admin)::after { height: 100lvh; } }

/* ---------- Upgrade 4, the numbers count up (IT 2026-10-24, operator "4 do it": "numbers in the cards count up when they
   enter the screen"). landing.js wraps each number of a result card (Tommaso's 10 and 60, Nicholas's 4) and, the first
   time the card comes on screen, counts it from 0 to its written value in 450 ms. While it counts, the number is an inline
   block held at the width of its written value (set by the script, right aligned), so nothing around it moves; then it is
   plain text again. The written value is in the HTML: with JavaScript off, under prefers-reduced-motion, or on a card
   already on screen when the page opens, nothing counts */
.count--run { display: inline-block; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Upgrade 6, the phone bar (IT 2026-10-24, operator "6 do it": "on the phone only: a thin bottom bar with
   'Candidati' (EN 'Apply') that appears once the visitor has scrolled past the form, hides while the form is on screen, and
   scrolls back to the form; safe-area aware on iPhone, never covering the footer text or the cookie line").
   Under 600 px only (the phone set of this file). The bar is the black at 88 % over a 16 px blur, a hairline along its top
   edge, the page's one green key (the pill of the last step) across the column, 44 px tall (the touch floor), "Candidati" and an arrow up (the form is above).
   The sides keep the 16 px gutter or the notch's inset, the foot the home indicator's inset (8 px at least), so on an
   iPhone the key never sits on the indicator. It slides up from under the screen in 240 ms when landing.js sets
   data-on (past the form, the form off screen, the last step and the footer not yet near), down when it goes; hidden it is
   also visibility hidden, so it is out of the tab order and of the screen reader. With JavaScript off it never shows.
   Under prefers-reduced-motion it appears and goes with no slide */
.dock { display: none; }
@media (max-width: 599px) {
  .page-landing .dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(5, 6, 5, 0.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 var(--hair);
    transform: translateY(calc(100% + 8px)); visibility: hidden;
    transition: transform 240ms var(--ease), visibility 0s linear 240ms;
  }
  .page-landing .dock[data-on] { transform: none; visibility: visible; transition: transform 240ms var(--ease), visibility 0s linear 0s; }
  .dock__key { width: 100%; min-width: 0; min-height: 44px; padding: 0 24px; font-weight: 600; font-size: 1rem; letter-spacing: -0.011em; } /* the page's own key (the pill of the last step's Candidati ora), one size down */
  .dock__key .i-up { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .page-landing .dock, .page-landing .dock[data-on] { transition: none; } }

/* @designV2: the de-AI pass under the form (IT 2026-10-24, config switches.designV2, false in production; the tells and the
   references: research/landing-teardown-2026-10/deai-2026-10-24/AI-TELLS.md). Operator, on a prospect's voice note ("si vede
   che è fatto con Claude", "le sezioni sotto ... hanno tutti lo stesso sfondo"): "lui intendeva a livello tecnico/grafico non
   di personalità". The hero, the form card, the green box and the font stay as live. Under the form every section takes its
   own form and its own surface, still on the black:
     the results: no card, a hairline over each client, his result in the heading face, large and left aligned (Valori's
       receipts, Jake's 10x rows), the key to the chain on the same left edge;
     how it works: a full bleed band of the one green at 12 % on the black, the steps a numbered left aligned sequence, the
       numbers joined by a thin rule (Jake's roadmap, Haynes' connector);
     for you / not for you: two plain lists, each on a 2 px rule (white for yes, a dim white for no), no boxes, no icons (Jake);
     the objections: a lifted black band, question and answer as rows with dividers, two columns from 760 px;
     the last step: the one centred block, with the most air.
   No eyebrow over any section (the labels stay in the source, hidden), the spacing changes from section to section, the
   keys under the form are radius 10 with no green glow (the form's own key is radius 8), no arrow on the last key. The
   headline stays the biggest type (the titles 24 px on a phone, under the H1's 24.17 at 375). scripts/build.mjs cuts this
   block while the switch is off, and the served site.css is then byte for byte the live one */
html[data-design="v2"] { --v2-rule: rgba(255, 255, 255, 0.16); --v2-band: rgba(14, 107, 62, 0.12); --v2-lift: rgba(255, 255, 255, 0.028); }
html[data-design="v2"] .page-landing .sec__label { display: none; }
html[data-design="v2"] .page-landing .sec__col { text-align: left; }
html[data-design="v2"] .page-landing .sec__title { margin: 0; max-width: 19em; text-align: left; }
html[data-design="v2"] .page-landing .sec { padding-top: 0; }
/* the results: the column widens to the sections' 840, the card keeps its 640 */
html[data-design="v2"] .page-landing .apply__col { max-width: calc(var(--sec-col) + 2 * var(--gutter)); }
html[data-design="v2"] .page-landing .form-panel { max-width: var(--card-max); margin-inline: auto; }
html[data-design="v2"] .page-landing .tcards { gap: 32px; margin: 24px 0 0; }
html[data-design="v2"] .page-landing .tcard { padding: 20px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--v2-rule); text-align: left; }
html[data-design="v2"] .page-landing .tcard::before { content: none; }
html[data-design="v2"] .page-landing .tcard__name { font-family: var(--text); font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: -0.006em; text-transform: none; } /* the gold kept: the one small accent left under the form */
html[data-design="v2"] .page-landing .tcard__result { margin-top: 8px; font-size: 24px; line-height: 1.2; }
html[data-design="v2"] .page-landing .tcard__line { margin-top: 12px; color: var(--type-2); }
/* how it works: the band */
html[data-design="v2"] .page-landing .sec--how { margin-top: 64px; padding: 48px 0 64px; background: var(--v2-band); box-shadow: inset 0 1px 0 rgba(14, 107, 62, 0.55), inset 0 -1px 0 rgba(14, 107, 62, 0.55); }
html[data-design="v2"] .page-landing .steps { counter-reset: v2step; max-width: none; margin: 32px 0 0; gap: 0; }
html[data-design="v2"] .page-landing .step {
  counter-increment: v2step; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; align-items: start;
  padding: 0 0 32px; border-radius: 0; background: none; box-shadow: none; text-align: left;
}
html[data-design="v2"] .page-landing .step:last-child { padding-bottom: 0; }
html[data-design="v2"] .page-landing .step::before { content: none; }
html[data-design="v2"] .page-landing .step__n { display: none; }
html[data-design="v2"] .page-landing .step::after {
  content: counter(v2step); grid-column: 1; grid-row: 1 / span 2; align-self: stretch;
  font-family: var(--jake); font-weight: 700; font-size: 28px; line-height: 1; color: var(--set-ink);
  /* the rule: from under the number down to the next one */
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) 8px 40px / 1px calc(100% - 32px) no-repeat;
}
html[data-design="v2"] .page-landing .step:last-child::after { background: none; }
html[data-design="v2"] .page-landing .step__t { grid-column: 2; grid-row: 1; margin: 0; font-size: 19px; }
html[data-design="v2"] .page-landing .step__p { grid-column: 2; grid-row: 2; margin: 8px 0 0; }
/* for you / not for you: two lists on a rule */
html[data-design="v2"] .page-landing .sec--fit { padding-top: 64px; }
html[data-design="v2"] .page-landing .fit { gap: 40px; margin: 32px 0 0; }
html[data-design="v2"] .page-landing .fit__card { padding: 4px 0 4px 20px; border-radius: 0; background: none; box-shadow: none; border-left: 2px solid var(--set-ink); text-align: left; }
html[data-design="v2"] .page-landing .fit__card::before { content: none; }
html[data-design="v2"] .page-landing .fit__card--no { border-left-color: rgba(255, 255, 255, 0.3); }
html[data-design="v2"] .page-landing .fit__list { gap: 12px; margin-top: 16px; }
html[data-design="v2"] .page-landing .fit__i { grid-template-columns: minmax(0, 1fr); }
html[data-design="v2"] .page-landing .fit__icon { display: none; }
html[data-design="v2"] .page-landing .fit__card--no .fit__i { color: var(--type-2); }
/* the objections: a lifted black, rows with dividers */
html[data-design="v2"] .page-landing .sec--faq { margin-top: 96px; padding: 48px 0 64px; background: var(--v2-lift); box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
html[data-design="v2"] .page-landing .faq { max-width: none; margin: 24px 0 0; border-top-color: var(--v2-rule); }
html[data-design="v2"] .page-landing .faq__i { padding: 24px 0; border-bottom-color: var(--v2-rule); text-align: left; }
html[data-design="v2"] .page-landing .faq__q { font-size: 19px; text-align: left; }
html[data-design="v2"] .page-landing .faq__a { margin: 8px 0 0; max-width: 34em; text-align: left; }
/* the last step: the one centred block */
html[data-design="v2"] .page-landing .sec--last { padding: 96px 0 64px; }
html[data-design="v2"] .page-landing .sec--last .sec__col { text-align: center; }
html[data-design="v2"] .page-landing .sec--last .sec__title { margin-inline: auto; max-width: 16em; text-align: center; }
html[data-design="v2"] .page-landing .sec--last .btn--cta { border-radius: 10px; padding: 0 32px; box-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); }
html[data-design="v2"] .page-landing .sec--last .btn--cta .i-arrow { display: none; }
html[data-design="v2"] .page-landing .dock__key { border-radius: 10px; }
@media (min-width: 760px) {
  html[data-design="v2"] .page-landing .sec__title { font-size: 36px; line-height: 1.12; }
  html[data-design="v2"] .page-landing .tcards { gap: 48px; }
  html[data-design="v2"] .page-landing .tcard__result { font-size: 30px; line-height: 1.16; }
  html[data-design="v2"] .page-landing .sec--how { margin-top: 128px; padding: 96px 0; }
  html[data-design="v2"] .page-landing .steps { margin-top: 48px; }
  html[data-design="v2"] .page-landing .step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 24px; padding-bottom: 40px; }
  html[data-design="v2"] .page-landing .step::after { font-size: 36px; background-position: 10px 52px; background-size: 1px calc(100% - 44px); }
  html[data-design="v2"] .page-landing .step__t { margin-top: 4px; font-size: 21px; }
  html[data-design="v2"] .page-landing .step__p { font-size: 17px; }
  html[data-design="v2"] .page-landing .sec--fit { padding-top: 128px; }
  html[data-design="v2"] .page-landing .fit { gap: 64px; margin-top: 48px; }
  html[data-design="v2"] .page-landing .sec--faq { margin-top: 144px; padding: 96px 0; }
  html[data-design="v2"] .page-landing .faq { margin-top: 40px; }
  html[data-design="v2"] .page-landing .faq__i { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; padding: 32px 0; }
  html[data-design="v2"] .page-landing .faq__a { margin: 0; }
  html[data-design="v2"] .page-landing .sec--last { padding: 144px 0 128px; }
}
@media (max-width: 599px) {
  html[data-design="v2"] .page-landing .sec--last .btn--cta { padding: 0 24px; }
}
/* @designV2 end */

/* generated by scripts/build.mjs (IT 2026-10-23 title test): every variant is in the HTML, the one named on html[data-hero] shows; none named (no JavaScript) = the default E1 */
.hero [data-v] { display: none; }
html:not([data-hero]) .hero [data-v="E1"],
html[data-hero="E1"] .hero [data-v="E1"] { display: block; }

/* 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: 26.3090; --lead-n: 54; --lead-h0: 13.6780; --lead-hn: 26; }
html[data-hero="E1"] { --lead-0: 26.3090; --lead-n: 54; --lead-h0: 13.6780; --lead-hn: 26; }

/* generated by scripts/build.mjs (mobile type pass 2026-10-23): per hero H1, the widest phone line (--set-wp) and wide line (--set-ww) in em, Montserrat 700 at the hero's tracking (IT 2026-10-24), and the line counts; the default on .h1--set */
.h1--set { --set-wp: 9.2200; --set-ww: 16.1090; --set-np: 4; --set-nw: 2; --band-t: 10.29%; --band-b: 97.51%; --set-lh: 1.3; }
.h1--set[data-v="E1"] { --set-wp: 9.2200; --set-ww: 16.1090; --set-np: 4; --set-nw: 2; --band-t: 10.29%; --band-b: 97.51%; --set-lh: 1.3; }