/* STEP-143: the home (home.html), where the site opens after the access code: night, the intro (assets/landing/neurons.js) behind
   the watch, the hero, the live talk in place, the doors. The token block is styles.css's (Latte & Cobalt, STEP-120); the second
   block holds the home's own night, the intro's deep blue (draft 9), used only here. */
:root {
  /* Latte & Cobalt (STEP-120, 15 Oct): every colour comes from these tokens; the same block opens
     styles.css, content.css, demo.css, access.css, waiting-list.css and the tracker's stylesheet. No hex values in the rules. */
  --milk: #F1F3F6;          /* paper */
  --creme: #E3E7EC;         /* mist: section band, one per section */
  --field: #E9EDF1;         /* embedded field */
  --field-hover: #E3E8ED;
  --field-focus: #EEF1F4;
  --capp: #D9E0E8;          /* hover and selected (light blue-grey) */
  --step-1: #E9EDF1; --step-2: #D9E0E8; --step-3: #C8D1DB; --step-4: #B7C2CE;   /* steps, light → deep; text on them is ink */
  --hair: #CDD4DC;          /* hairline; also the embedded field's top edge */
  --edge-side: #DDE3E9; --edge-low: #F5F7F9;   /* the embedded field's side and bottom edges */
  --ink: #122033;           /* ink: deep navy (gray matter, STEP-152) */
  --soft: #3D4A5A;          /* slate, secondary text */
  --muted: #566271;         /* gray matter, muted text (5.6:1 on paper) */
  --cobalt: #1A5FD6;        /* the one accent: electric blue (STEP-152) */
  --cobalt-hover: #164FB4;
  --night: #233243;         /* the dark slides: slate (STEP-154, lighter than STEP-152's night) */
  --night-raised: #2B3B4E;
  --night-line: #3A4C61;
  --on-night: #E8ECF1;      /* text on night */
  --on-night-soft: #9AA6B4;
  --cobalt-night: #88BDE8;  /* accent on night (STEP-122: was #9DB6E3, which leaned violet; hue 207, 8.4:1 on night) */
  --on-night-body: #C9D1DA;  /* body text on night (STEP-122) */
  --cobalt-hand: #5B9BF0;    /* cobalt lifted one step for the handwriting on night (STEP-122; 4.3:1, used at 24 px and up) */
  --night-field: #1B2735; --night-field-hover: #1F2C3B;   /* the embedded field and icon wells on night (STEP-122) */
  --night-field-edges: #16212D #2A394B #45586E #2A394B;
  --night-field-shadow: inset 0 3px 7px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(0, 0, 0, .5), inset 0 -1px 2px rgba(var(--milk-rgb), .05), 0 1px 0 rgba(var(--milk-rgb), .08);
  --floor-shadow: rgba(0, 0, 0, .75);   /* the contact shadow under the 3D watch on its stage (STEP-122/123) */
  --watch-screen: #0B1118;  /* the watch screen (not --screen: that is the reader's height, set by app.js) */
  --alert: #B23A2A;         /* meaning only: the Alert state, errors */
  --alert-bg: #F6E3DE;
  --white: #FFFFFF;
  /* one pastel per part of the day (STEP-126): the Demo's moment tiles and the icon line drawn on each (3:1 or more on its tile) */
  --morning-tile: #DCE8F4; --morning-icon: #3E6A9E;
  --afternoon-tile: #E3E9DA; --afternoon-icon: #55663A;
  --evening-tile: #E4E2F0; --evening-icon: #5C55A0;
  --night-tile: var(--night); --night-icon: var(--cobalt-night);
  /* the same colours as r, g, b, for rgba(var(--ink-rgb), .1) */
  --ink-rgb: 18, 32, 51;
  --milk-rgb: 241, 243, 246;
  --night-rgb: 35, 50, 67;
  --watch-screen-rgb: 11, 17, 24;
  --white-rgb: 255, 255, 255;
  /* the embedded field and chip (the sample) */
  --field-edges: var(--hair) var(--edge-side) var(--edge-low) var(--edge-side);
  --field-shadow: inset 0 3px 6px rgba(var(--ink-rgb), .10), inset 0 1px 1px rgba(var(--ink-rgb), .08), inset 0 -2px 3px rgba(var(--white-rgb), .7), 0 1px 0 rgba(var(--white-rgb), .9);
  --field-shadow-hover: inset 0 3px 7px rgba(var(--ink-rgb), .13), inset 0 1px 1px rgba(var(--ink-rgb), .09), inset 0 -2px 3px rgba(var(--white-rgb), .7), 0 1px 0 rgba(var(--white-rgb), .9);
  --chip-shadow: inset 0 2px 4px rgba(var(--ink-rgb), .08), inset 0 -1px 2px rgba(var(--white-rgb), .7), 0 1px 0 rgba(var(--white-rgb), .9);
  --flat: .2s ease;         /* every hover: a flat colour change */
  /* older names, kept so every rule still resolves */
  --paper: var(--milk); --tint: var(--creme); --card: var(--milk); --bone: var(--on-night); --softnight: var(--on-night-soft);
  --ember: var(--cobalt); --pale: var(--step-4);
}
:root {
  --page: #0F1A26;   /* STEP-169 §2: the one page colour every section fades from and back into (draft 7's slate) */
  --deep-1: #0E2230; --deep-2: #0A1724; --deep-3: #07111C;   /* the intro's night, centre → edge (STEP-143, draft 9; STEP-152: #07111C to #0E2230) */
  --slate-1: #4A5E74; --slate-2: #2C3D50; --slate-3: #1B2838;   /* STEP-152: the home behind the watch once it has arrived, light → edge */
  /* the site's three fonts, as on the access page (no serif anywhere) */
  --title: "Mona Sans", "Instrument Sans", Arial, sans-serif;
  --sans: "Instrument Sans", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--on-night); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt-night); outline-offset: 3px; }

/* the bar: the logo · Talk to AVA · The Product · the Investor access pill (STEP-144 §5) */
.hm-bar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: var(--hm-bar); padding: 0 24px; background: var(--slate-3); /* STEP-154: slate */ border-bottom: 1px solid var(--night-line); }
.hm-logo { justify-self: start; display: block; }
.hm-logo img { height: 28px; width: auto; display: block; }
.hm-tabs { display: flex; gap: 4px; }
.hm-tab { height: 42px; padding: 0 18px; border-radius: 999px; display: inline-block; line-height: 42px !important; color: var(--on-night); font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color var(--flat); }
.hm-ask .sm { display: none; }
.hm-ask { justify-self: end; height: 38px; padding: 0 16px; border: 1px solid var(--cobalt-night); border-radius: 999px; display: inline-block; line-height: 36px !important; color: var(--cobalt-night); font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color var(--flat), color var(--flat); }
@media (hover: hover) {
  .hm-tab:hover { background: var(--night-line); }
  .hm-ask:hover { background: var(--cobalt-night); color: var(--night); }
}

/* the home: the intro's night, the canvas behind everything, the watch and the words over it */
/* STEP-144 §2: the stage lower, so the strap clears the bar by 56 px or more on a laptop (the watch box at most 58vh) */
.hm { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - var(--hm-bar)); min-height: calc(100svh - var(--hm-bar)); display: grid; grid-template-rows: 1fr auto; padding: 56px 24px 20px; background: var(--page); }
/* STEP-169 §2: the intro's night is a layer that fades away when the watch lands, so the hero ends on the page colour at every edge */
.hm::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(75% 65% at 35% 45%, var(--deep-1), var(--deep-2) 55%, var(--deep-3)); transition: opacity 1.6s ease; pointer-events: none; }
.arrived.hm::after { opacity: 0; }
#neurons { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* STEP-152 §3: when the watch arrives the night lifts to slate over 1.6 s, the light centred behind the watch (a layer faded in,
   under the neuron field, which stays over it, faint); the intro itself stays on night */
.hm::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(48% 56% at 72% 48%, #25384F 0%, #18273A 55%, rgba(15, 26, 38, 0) 100%); /* STEP-169 §2: a soft glow behind the watch that reaches the page colour before any edge */ opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.arrived.hm::before { opacity: 1; }
@media (max-width: 599px) { .hm::before { background: radial-gradient(70% 40% at 50% 26%, #25384F 0%, #18273A 55%, rgba(15, 26, 38, 0) 100%); } }
.hm-stage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; max-width: 1120px; width: 100%; margin: 0 auto; }
.hm-watch { position: relative; width: min(100%, 520px, 58vh); aspect-ratio: 1; max-height: 58vh; margin: auto; opacity: 0; transition: opacity .8s ease; } /* STEP-148: a fade only, so the real watch appears exactly on the light's drawing */
.watch-still, .watch-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* STEP-152 §3, STEP-155: a soft light behind the watch, so the black case reads on slate. Only light: no fill, no dark shadow and
   no ring, which drew a dark disc that showed as the watch turned (Ivana, 20 Oct). Round, about 90 % of the box, centred on the
   face's ring (STEP-151's focus); the 3D watch keeps its own floor shadow */
.hm-watch::before { content: ""; position: absolute; left: 49.9%; top: 49.9%; width: 90%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(136, 189, 232, .20), rgba(136, 189, 232, .07) 55%, transparent 100%); box-shadow: none; pointer-events: none; }
.watch-still { object-fit: contain; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.hm-doors, .hm-down { opacity: 0; transform: translateY(12px); transition: opacity 1s ease 1s, transform 1s ease 1s; }
.hm-pitch, .hm-doors, .hm-down { pointer-events: none; }   /* not clickable while they are not shown */
.arrived .hm-watch, .arrived .hm-doors, .arrived .hm-down { opacity: 1; transform: none; pointer-events: auto; }
/* STEP-146 §2: the hero text falls in slowly, line by line, from 1.2 s, while the head is drawn (home.js adds .early) */
.hm-pitch > * { opacity: 0; transform: translateY(-18px); transition: opacity 1.6s ease, transform 2s cubic-bezier(.2, .8, .2, 1); }
.early .hm-pitch, .arrived .hm-pitch { pointer-events: auto; }
.early .hm-pitch > *, .arrived .hm-pitch > * { opacity: 1; transform: none; }
.early .hm-pitch > :nth-child(2) { transition-delay: .5s; } .early .hm-pitch > :nth-child(3) { transition-delay: 1.1s; }
.early .hm-pitch > :nth-child(4) { transition-delay: 1.6s; } .early .hm-pitch > :nth-child(5) { transition-delay: 2.1s; }
.arrived .hm-pitch > :nth-child(n+6) { transition-delay: 0s; transition-duration: .3s; } /* the talk cards open at once */

/* the hero (STEP-143 §3) */
.hm-label { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt-night); }
.hm-pitch h1 { margin: 14px 0 12px; font: 600 clamp(34px, 1rem + 3vw, 56px)/1.04 var(--title); font-stretch: 108%; letter-spacing: -.01em; color: var(--on-night); text-wrap: balance; }
.hm-pitch > p { margin: 0 0 8px; color: var(--on-night-body); font-size: 18px; max-width: 30em; }
.hm-pitch > p.raise { color: var(--on-night); }
.hm-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } /* STEP-145 §3: Talk and the film side by side, Talk first; stacked only when they don't fit */
.hm-btn { height: 52px; padding: 0 24px; border: 1px solid var(--cobalt); border-radius: 999px; background: var(--cobalt); color: var(--white); font: 600 16px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; transition: background-color var(--flat), border-color var(--flat); }
.hm-btn[hidden] { display: none; }
.hm-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.hm-btn.ghost { background: transparent; border-color: var(--soft); }
.hm-btn:disabled { opacity: .55; cursor: default; }
@media (hover: hover) {
  .hm-btn:not(:disabled):hover { background: var(--cobalt-hover); border-color: var(--cobalt-hover); }
  .hm-btn.ghost:not(:disabled):hover { background: var(--night-line); border-color: var(--soft); }
}

/* STEP-176 §5: the live talk on the watch: under it one small row (the round stop button, the minutes and AVA's turn, the keep
   switch), then the one-line disclaimer with More; no card, no dim. The row sits just under the watch, centred on it */
.hm-under { position: relative; z-index: 3; width: min(100%, 420px); margin: 6px auto 0; display: grid; gap: 8px; justify-items: center; text-align: center; color: var(--on-night); }
.hm-under[hidden], .hm-under [hidden] { display: none !important; }
.hm-talk, .hm-rest { display: grid; gap: 8px; justify-items: center; }
.hm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.talk-btn { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--cobalt); border-radius: 50%; background: var(--cobalt); color: var(--milk); cursor: pointer; transition: background-color var(--flat), border-color var(--flat); }
.talk-btn svg { width: 22px; height: 22px; fill: currentColor; }
.talk-btn .i-stop, .talk-btn.on .i-mic { display: none; }
.talk-btn.on .i-stop { display: block; }
.talk-btn.on { background: rgba(var(--milk-rgb), .1); border-color: rgba(var(--milk-rgb), .35); }
.talk-btn:disabled { cursor: default; opacity: .5; }
@media (hover: hover) { .talk-btn:not(:disabled):hover { background: var(--cobalt-hover); border-color: var(--cobalt-hover); } .talk-btn.on:not(:disabled):hover { background: rgba(var(--milk-rgb), .18); } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hm-meta { margin: 0; display: flex; gap: 10px; font: 500 12px/1.2 var(--mono); letter-spacing: .1em; color: var(--on-night-soft); font-variant-numeric: tabular-nums; }
.hm-meta .t { color: var(--on-night); }
.hm-state { color: var(--cobalt-night); text-transform: uppercase; }
/* the keep switch: a small toggle, off by default */
.keep { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--on-night-body); cursor: pointer; }
.keep input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 30px; height: 18px; margin: 0; border-radius: 999px; background: rgba(var(--milk-rgb), .2); cursor: pointer; transition: background-color var(--flat); }
.keep input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--milk); transition: left .2s; }
.keep input:checked { background: var(--cobalt-night); } .keep input:checked::after { left: 14px; }
.keep input:focus-visible { outline: 2px solid var(--cobalt-night); outline-offset: 2px; }
.keep:has(input:disabled) { cursor: default; opacity: .55; }
.hm-msg { margin: 0; font-size: 14px; color: var(--on-night); }
.hm-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; }
.hm-line { margin: 0; color: var(--on-night-body); font-size: 15px; line-height: 1.45; }
.hm-small { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--on-night-soft); text-wrap: pretty; }
/* the disclaimer: one small line in the body font, on screen before the mic turns on (STEP-80); More opens the whole text in place */
.hm-data { margin: 0; max-width: 420px; font-size: 12px; line-height: 1.45; color: var(--on-night-soft); text-wrap: pretty; }
/* STEP-181 §22 (Ivana, 24 Oct 17:40): while a talk is open SOUND ON hides (a talk already has sound) and comes back when it ends; the
   talk's small print is one compact block under the watch, on its axis, at most 420 px wide: the switch on one line, then the
   disclaimer in 12 px on at most two lines, More as a link */
html.talk-open .hm-snd { opacity: 0; visibility: hidden; pointer-events: none; }
.hm-under .keep { white-space: nowrap; font-size: 12.5px; }
.hm-more-text { max-width: 420px; }
.hm-more { padding: 0; border: 0; background: none; color: var(--cobalt-night); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hm-more-text { margin: 0; max-width: 46em; font-size: 12px; line-height: 1.5; color: var(--on-night-soft); text-align: left; }
html.talk-open { overflow: hidden; } /* while a talk runs the page holds still (a phone doesn't scroll) */

/* the two doors (STEP-143 §1: to Overview and the plan until their own views are built) */
.hm-doors { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1120px; width: 100%; margin: 12px auto 0; }
.hm-door { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 24px; border: 1px solid rgba(var(--milk-rgb), .14); border-radius: 20px; background: rgba(var(--night-rgb), .72); color: var(--on-night); text-decoration: none; transition: background-color var(--flat), border-color var(--flat); }
.hm-door b { font: 600 24px/1.1 var(--title); font-stretch: 106%; }
.hm-door span { grid-column: 1; color: var(--on-night-body); font-size: 14.5px; }
.hm-door i { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: 26px; color: var(--cobalt-night); }
@media (hover: hover) { .hm-door:hover { background: var(--night-raised); border-color: var(--cobalt-night); } }


/* STEP-145 §2: SOUND, bottom left of the home: AVA's hello on or off */
.hm-snd { position: absolute; left: 24px; bottom: 24px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid rgba(var(--milk-rgb), .2); border-radius: 999px; background: rgba(var(--night-rgb), .5); color: var(--cobalt-night); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color var(--flat), color var(--flat); }
.hm-snd svg { width: 14px; height: 14px; fill: currentColor; }
.hm-snd[aria-pressed="true"] { border-color: var(--cobalt-night); color: var(--on-night); }
@media (hover: hover) { .hm-snd:hover { border-color: var(--cobalt-night); } }
@media (max-width: 599px) { .hm-snd { left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } /* STEP-183 §8: bottom-right on a phone, clear of the index, above the safe area */
/* STEP-146 §3: SKIP, bottom right, in SOUND's style; gone once the watch has arrived */
.hm-skip { position: absolute; right: 24px; bottom: 24px; z-index: 6; height: 34px; padding: 0 14px; border: 1px solid rgba(var(--milk-rgb), .2); border-radius: 999px; background: rgba(var(--night-rgb), .5); color: var(--cobalt-night); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: opacity .6s, border-color var(--flat); }
.arrived .hm-skip { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
@media (hover: hover) { .hm-skip:hover { border-color: var(--cobalt-night); } }
@media (max-width: 599px) { .hm-skip { right: auto; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } /* SOUND ON took the right */

/* STEP-144: the way down to The Product */
.hm-down { position: relative; z-index: 1; justify-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; color: var(--on-night-soft); font: 500 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.hm-down i { font-style: normal; font-size: 18px; color: var(--cobalt-night); }
@media (hover: hover) { .hm-down:hover { color: var(--on-night); } }

a.hm-btn { text-decoration: none; }

/* STEP-144 §5: the Investor access dialog, centred; × , Escape or a click outside closes it (STEP-154: light, on paper) */
.ia { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: calc(100vw - 32px); }
.ia::backdrop { background: rgba(var(--night-rgb), .6); }
.ia-box { position: relative; width: min(440px, calc(100vw - 32px)); margin: 0; padding: 32px 28px 26px; border: 1px solid var(--hair); border-radius: 24px; background: var(--milk); display: grid; gap: 12px; }
.ia .hm-label { color: var(--cobalt); }
.ia .hm-small { color: var(--soft); }
.ia-logo { height: 30px; width: auto; }
.ia h2 { margin: 4px 0 6px; font: 600 28px/1.1 var(--title); font-stretch: 106%; }
.ia-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--creme); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.ia-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ia-row input { flex: 1 1 180px; min-width: 0; height: 52px; padding: 0 22px; border: 1px solid; border-color: var(--field-edges); border-radius: 999px; background: var(--field); color: var(--ink); font: 500 17px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--field-shadow); }
.ia-row input::placeholder { color: var(--muted); opacity: 1; }
.ia-error { margin: 0; color: var(--alert); font-size: 14px; }
.ia-error[hidden] { display: none; }
@media (hover: hover) { .ia-x:hover { background: var(--capp); } }

/* the film (STEP-143 §5) */
.hm-film { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(var(--night-rgb), .92); }
.hm-film[hidden] { display: none; }
.hm-film video { width: min(1280px, 100%); max-height: 100%; background: var(--night); border-radius: 6px; }
.hm-close { position: absolute; top: 16px; right: 20px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--milk); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
@media (hover: hover) { .hm-close:hover { background: var(--capp); } }

/* tablet (820) and phone (390): the watch on top, the words under it, the doors side by side (STEP-143 §6) */
@media (max-width: 860px) {
  .hm-bar { padding: 0 12px; gap: 6px; }
  .hm-tabs { gap: 0; }
  .hm-tab { padding: 0 10px; font-size: 14px; }
  .hm-ask { padding: 0 10px; font-size: 12.5px; }
  .hm-ask .sm { display: inline; }
  .hm-logo img { height: 22px; }
  .lg { display: none; }
  .hm { padding: 24px 16px 16px; }
  .hm-stage { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .hm-watch { width: 34vh; width: 34svh; max-height: none; }
  .hm-pitch > p { margin-left: auto; margin-right: auto; font-size: 16px; }
  .hm-acts { justify-content: center; }
  .hm-doors { gap: 10px; }
  .hm-door { padding: 12px 14px; }
  .hm-door b { font-size: 17px; }
  .hm-door span { display: none; }
}
@media (max-width: 860px) and (min-width: 600px) {
  .hm-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-align: left; gap: 24px; }
  .hm-watch { width: min(100%, 360px); }
  .hm-pitch > p { margin-left: 0; }
  .hm-acts { justify-content: flex-start; }
  .hm-door span { display: block; }
}
@media (max-width: 599px) {
  .hm-watch { width: 34svh; height: 34svh; }
  .hm-pitch .hm-label { display: none; }
  .hm-pitch h1 { font-size: 30px; margin: 4px 0 8px; }
  .hm-pitch > p { font-size: 15px; margin-bottom: 4px; }
  .hm-acts { margin-top: 14px; gap: 8px; }
  .hm-btn { height: 46px; padding: 0 16px; font-size: 15px; }
  .hm-doors { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hm-watch, .hm-pitch, .hm-pitch > *, .hm-doors { transition: none; } .watch-gl { transition-duration: .3s; } }

/* STEP-167 §2: one site, front and back: the two-way switch under the logo (the back's bar has the same, styles.css) */
.hm-brand { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.hm-brand .hm-logo img { height: 24px; }
.sides { display: flex; gap: 6px; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-soft); }
.sides a { color: var(--on-night-soft); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.sides a[aria-current="page"] { color: var(--cobalt-night); border-bottom-color: currentColor; }
@media (hover: hover) { .sides a:not([aria-current]):hover { color: var(--on-night); } }
.sides a:focus-visible { outline: 2px solid var(--cobalt-night); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 599px) { .sides { display: none; } }

/* ========================================================== STEP-168: the home as a website (draft 6)
   1 the hero: the words left, the watch right, the neurons around and behind it, fading into slate at its foot (no line);
   2 The product: slate into mist, the neuron field drifting, five stories; 3 The watch on its dark ground; 4 the big photo;
   5 the Talk band; 6 the footer. Parallax all the way down (home-site.js sets --hd, --drift, --fd, --px, --td); nothing moves with
   reduced motion. Every section starts in the colour the one above ends in, so there is no line between them */
.hm-tab { padding: 0 14px; }
.hm-pitch h1 { font-weight: 700; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -.02em; }
.hm-pitch > p.raise { margin-top: 18px; color: var(--on-night-soft); font-size: 15px; }
/* STEP-169 §1: one network in the hero: the intro's particle network fades out once the watch has landed (home.js adds .settled); the
   neuron-field image no longer sits behind the hero, it appears from The Product down */
#neurons { transition: opacity 1.2s ease; }
.settled #neurons { opacity: 0; }
.hm-orbit { position: relative; display: grid; place-items: center; }
#brain { position: absolute; left: -45%; top: -30%; width: 190%; height: 160%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.settled #brain { opacity: 1; } /* STEP-172 §1: appears as the intro's network fades (.settled), never both at once */
.hm-orbit .hm-watch { z-index: 1; }
/* STEP-178 §11: on the stacked page (phones, reduced motion) the neurons cover the whole opening too, not only the ring around the watch */
.pilled .hm-stage, .pilled .hm-orbit { position: static; }
.pilled .hm-orbit .hm-watch { position: relative; }
.pilled #brain { left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
@media (max-width: 599px) { .hm-orbit { order: -1; } .hm-pitch > p.raise { margin-top: 10px; } }

/* 2 The product */
.pr { position: relative; overflow: clip; color: var(--ink); scroll-margin-top: var(--hm-bar); /* clip, not hidden: the stories' pin needs the page to be its scroller */
  background: linear-gradient(var(--page) 0, #1C2C40 70px, #3A5373 150px, #7690AE 230px, #B8C6D6 300px, #D8DEE6 350px, var(--creme) 400px,
    var(--creme) calc(100% - 420px), #D8DEE6 calc(100% - 370px), #B8C6D6 calc(100% - 320px), #7690AE calc(100% - 240px), #3A5373 calc(100% - 160px), #1C2C40 calc(100% - 80px), var(--page) 100%); } /* STEP-169 §2 */
.pr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1300px; background: url("assets/landing/neuron-field.webp") center top / cover no-repeat; opacity: .55; transform: translateY(var(--drift, 0px)); pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 0, #000 200px, #000 55%, transparent); mask-image: linear-gradient(transparent 0, #000 200px, #000 55%, transparent); }
.pr-in, .feat-in, .site-in { position: relative; max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pr-in { padding-top: 230px; padding-bottom: 380px; } /* room for the mist to rise and settle */
.pr .hm-label { color: var(--cobalt-hover); }
.pr h2, .feat h2 { margin: 16px 0 0; font: 700 clamp(34px, 4.6vw, 68px)/1.02 var(--title); font-stretch: 106%; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.pr .lede { margin: 20px 0 0; font-size: 20px; color: var(--soft); max-width: 36em; }
.more { font: 500 13px/1.3 var(--mono); color: var(--cobalt); text-decoration: none; border-bottom: 1px solid currentColor; }
@media (hover: hover) { .more:hover { color: var(--cobalt-hover); } }

/* STEP-169 §3: the five stories follow the scroll. .story is about 5 × 75vh tall; .pin sticks 96 px under the top and holds the
   tabs and the panel together; home-site.js picks the story from the scroll. Each panel animates in when it comes on. Only the active
   tab shows its line. Phone (≤ 860 px) and reduced motion: nothing pinned, the tabs are buttons above one panel */
.story { height: calc(5 * 75vh + 100vh); margin-top: 48px; }
.pin { position: sticky; top: 96px; height: calc(100vh - 128px); max-height: 640px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.tabs { display: grid; gap: 4px; align-content: center; }
.tabs [role="tab"] { all: unset; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; padding: 14px 18px; border-radius: 16px; transition: background-color .3s; }
.tabs [role="tab"][aria-selected="true"] { background: var(--milk); box-shadow: 0 12px 40px rgba(var(--ink-rgb), .08); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
@media (hover: hover) { .tabs [role="tab"][aria-selected="false"]:hover { background: rgba(255, 255, 255, .45); } }
.tabs .k { grid-row: 1 / 3; font: 500 13px/1.9 var(--mono); color: var(--muted); }
.tabs b { font: 650 clamp(21px, 2vw, 28px)/1.15 var(--title); letter-spacing: -.01em; color: #6A7787; transition: color .3s; }
.tabs [role="tab"][aria-selected="true"] b { color: var(--ink); }
.tabs .d { display: none; color: var(--soft); font-size: 15px; }
.tabs [role="tab"][aria-selected="true"] .d { display: block; }
.story-note { margin: 14px 0 0 18px; color: var(--soft); font-size: 14px; }
.panes { position: relative; height: min(520px, 100%); border-radius: 28px; overflow: hidden; color: var(--on-night); background: radial-gradient(70% 80% at 70% 20%, #2C4260, #16253A 60%, #0F1A26); }
.pane { position: absolute; inset: 0; padding: 32px 34px 28px; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.pane.on { opacity: 1; visibility: visible; }
.cap { margin: auto 0 0; color: var(--on-night-soft); font-size: 15px; }
.clock { display: flex; gap: 18px; font: 500 12px var(--mono); color: var(--on-night-soft); letter-spacing: .1em; }
.b { margin: 0; max-width: 80%; padding: 10px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i, 0) * .7s); }
.pane.on .b, .pane.on .fan figure, .pane.on .rows .r { opacity: 1; transform: none; }
.b.me { align-self: flex-end; background: rgba(232, 236, 241, .12); border-bottom-right-radius: 6px; }
.b.ava { align-self: flex-start; background: linear-gradient(135deg, #2D6FE0, #1A5FD6); border-bottom-left-radius: 6px; color: #fff; }
.b.note2 { background: none; padding: 0; color: var(--cobalt-night); font: 500 12.5px/1.5 var(--mono); max-width: none; }
.fan { position: relative; height: 230px; }
.fan figure { position: absolute; left: 50%; top: 0; width: min(58%, 280px); margin: 0; background: #F5F2EC; padding: 8px 8px 10px; border-radius: 6px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
  transform: translateX(calc(-50% + var(--x))) rotate(var(--r)) translateY(12px); opacity: 0; transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * .3s); }
.pane.on .fan figure { transform: translateX(calc(-50% + var(--x))) rotate(var(--r)); }
.fan img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.fan figcaption { font: 500 12px var(--sans); color: #4A5260; margin-top: 6px; }
.rows { display: grid; gap: 10px; }
.rows .r { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(232, 236, 241, .06); border: 1px solid rgba(136, 189, 232, .16); opacity: 0; transition: opacity .5s; transition-delay: calc(var(--i) * .7s); }
.rows .who { font-weight: 600; }
.rows .st { font: 500 13px var(--mono); color: var(--on-night-soft); text-align: right; }
.rows .ring { color: #F2B35C; } .rows .ok { color: #6FD3A0; }
.rows .big { min-width: 84px; font: 700 26px var(--title); color: var(--cobalt-night); text-align: center; }
.rows .big.ring { color: #F2B35C; }
.rows .big.sm { font: 600 13px/1.2 var(--mono); }
.route svg { width: 100%; height: auto; display: block; max-height: 170px; }
.route .road { fill: none; stroke: rgba(136, 189, 232, .18); stroke-width: 10; stroke-linecap: round; }
.route .walk { fill: none; stroke: var(--cobalt-night); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 3s ease .2s; }
.pane.on .route .walk { stroke-dashoffset: 0; }
.route .home { fill: var(--cobalt-night); }
.route text { fill: var(--on-night-soft); font: 500 12px var(--mono); }
.story.flat { height: auto; }
.story.flat .pin { position: static; height: auto; max-height: none; }
@media (max-width: 860px) {
  .story { height: auto; }
  .pin { position: static; height: auto; max-height: none; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tabs-col { min-width: 0; }
  .tabs { grid-template-columns: repeat(5, auto); overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .tabs [role="tab"] { grid-template-columns: auto; padding: 10px 14px; }
  .tabs .k, .tabs .d { display: none !important; }
  .tabs b { font-size: 16px; white-space: nowrap; }
  .story-note { margin-left: 2px; }
  .panes { height: 500px; }
  .pane { padding: 24px 20px; }
}
.big3 { margin-top: 80px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.big3 .num { font: 800 clamp(60px, 9vw, 140px)/.9 var(--title); font-stretch: 112%; letter-spacing: -.04em; color: var(--ink); }
.big3 .num small { display: block; margin-top: 12px; font: 500 14px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.big3 blockquote { margin: 0; font: 700 clamp(28px, 3vw, 42px)/1.15 var(--title); letter-spacing: -.015em; color: var(--cobalt); text-wrap: balance; } /* STEP-169 §5: the question in cobalt, at display size */
.big3 blockquote span { display: block; margin-top: 14px; font: 400 17px/1.55 var(--sans); color: var(--soft); letter-spacing: 0; }
@media (max-width: 760px) {
  .pr-in { padding-top: 200px; padding-bottom: 320px; }
  .big3 { grid-template-columns: 1fr; gap: 28px; margin-top: 72px; }
}

/* 3 The watch: its own dark ground, the neuron field faint behind, drifting */
.feat { position: relative; isolation: isolate; color: var(--on-night); scroll-margin-top: var(--hm-bar);
  background: radial-gradient(40% 35% at 70% 50%, rgba(58, 80, 104, .55), rgba(15, 26, 38, 0) 100%); } /* STEP-169 §2: a glow behind the watch only, on the page colour */
.feat .hm-label { color: var(--cobalt-night); }
.feat h2 { max-width: 20ch; color: var(--on-night); }
.feat .lede { margin: 14px 0 0; color: var(--on-night-body); max-width: 40em; font-size: 19px; }
/* STEP-169 §4: the features scroll past on the left, the watch stays on the right and its screen changes */
.track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.feat-col { min-width: 0; }
.feat-head { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.steps { list-style: none; margin: 0; padding: 0 0 30vh; }
.step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; gap: 10px; opacity: .28; transition: opacity .4s; }
.step.now { opacity: 1; }
.step .n { font: 500 13px var(--mono); color: var(--cobalt-night); letter-spacing: .12em; }
.step h3 { margin: 0; font: 700 clamp(28px, 3vw, 44px)/1.08 var(--title); letter-spacing: -.015em; color: var(--on-night); }
.step p { margin: 0; color: var(--on-night-body); font-size: 19px; max-width: 28em; }
.stick { position: sticky; top: var(--hm-bar); height: calc(100vh - var(--hm-bar)); display: grid; place-items: center; }
.wbox { position: relative; width: min(100%, 560px); aspect-ratio: 1; }
.wbox .watch-still, .wbox .watch-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.wbox.is-3d .watch-still { display: none; }
.halo { position: absolute; left: 50%; top: 51%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(136, 189, 232, .22), rgba(136, 189, 232, .06) 60%, transparent); z-index: -1; }
.dots { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(136, 189, 232, .25); transition: background-color .3s, transform .3s; }
.dots i.now { background: var(--cobalt-night); transform: scale(1.5); }
.feat-foot { margin: 0; padding: 0 24px 40px; text-align: center; font-size: 13px; color: var(--on-night-soft); }
@media (max-width: 860px) {
  .feat-head { min-height: auto; padding-block: 24px; }
  .track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stick { order: -1; top: var(--hm-bar); height: 52svh; z-index: 2; background: linear-gradient(var(--page) 80%, rgba(15, 26, 38, 0)); }
  .feat-col { display: contents; }
  .feat-head { order: -2; }
  .wbox { width: min(80vw, 360px); }
  .steps { padding-bottom: 20vh; }
  .step { min-height: 40vh; }
  .dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .step, .dots i { transition: none; } }

/* STEP-169 §6: the hand photo carries the last invitation: 92vh, moving a little as the page scrolls (--px), fading in from the page
   colour at its top and into the footer's at its bottom; the words on the dark left of the photo */
.hand { position: relative; isolation: isolate; height: clamp(560px, 92vh, 980px); overflow: hidden; }
.hand img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; object-position: 62% 50%; transform: translateY(var(--px, 0px)); z-index: -2; }
.hand::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--page), rgba(15, 26, 38, 0) 22%), linear-gradient(90deg, rgba(10, 16, 24, .82), rgba(10, 16, 24, .35) 45%, transparent 65%), linear-gradient(rgba(11, 20, 30, 0) 70%, #0B141E); }
.hand-in { position: relative; max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; justify-content: center; }
.hand .hm-label { color: var(--cobalt-night); }
.hand h2 { margin: 16px 0 0; max-width: 9ch; font: 700 clamp(44px, 6.4vw, 104px)/.98 var(--title); font-stretch: 108%; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.hand-line { margin: 20px 0 0; max-width: 28em; color: #DCE3EA; font-size: 19px; }
.hand .hm-acts { margin-top: 30px; }
@media (max-width: 760px) {
  .hand img { object-position: 70% 50%; }
  .hand::before { background: linear-gradient(var(--page), rgba(15, 26, 38, 0) 18%), linear-gradient(rgba(10, 16, 24, .25) 30%, rgba(10, 16, 24, .82) 70%, #0B141E); }
  .hand-in { justify-content: flex-end; padding-bottom: 56px; }
}

/* STEP-169 §7: the footer, with care */
footer.site { position: relative; overflow: hidden; background: #0B141E; color: var(--on-night-soft); }
footer.site::before { content: ""; position: absolute; inset: 0 0 auto; height: 420px; background: url("assets/landing/neuron-field.webp") center top / cover no-repeat; opacity: .1; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.site-in { padding-top: 96px; padding-bottom: 32px; }
.fhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; padding-bottom: 56px; border-bottom: 1px solid rgba(136, 189, 232, .12); }
footer.site .fline { margin: 0; max-width: 14ch; font: 700 clamp(30px, 3.6vw, 52px)/1.05 var(--title); letter-spacing: -.02em; color: var(--on-night); }
footer.site .swiss { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-body); }
.swiss svg { width: 30px; height: 30px; border-radius: 4px; display: block; flex: none; }
.fcols { display: grid; grid-template-columns: 1.5fr 1.1fr .8fr; gap: 56px; padding-top: 56px; }
footer.site h2 { margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt-night); }
footer.site p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
footer.site .fsm { font-size: 13px; color: #8794A3; }
.srcs { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.srcs a { display: inline-block; padding: 5px 11px; border: 1px solid rgba(136, 189, 232, .22); border-radius: 999px; color: var(--on-night-body); font: 500 12.5px var(--sans); text-decoration: none; transition: border-color .2s, color .2s; }
@media (hover: hover) { .srcs a:hover { border-color: var(--cobalt-night); color: #fff; } .fnav a:hover { color: #fff; } }
.plain { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; font-size: 15px; color: var(--on-night-body); }
.plain.dotted li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.plain.dotted li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--cobalt-night); }
.fnav a { color: var(--on-night-body); text-decoration: none; font-size: 16px; }
.fbase { margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(136, 189, 232, .12); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font: 500 12px var(--mono); letter-spacing: .08em; color: #8794A3; }
.fbase img { height: 18px; width: auto; opacity: .7; display: block; }
.fcopy { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* STEP-172 §3: © 2026 AVA, then the flag and "A Swiss company" */
footer.site .fbase .swiss { font: 500 12px var(--mono); letter-spacing: .08em; gap: 10px; }
.fbase .swiss svg { width: 18px; height: 18px; border-radius: 3px; }
@media (max-width: 1000px) { .fcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fcols { grid-template-columns: 1fr; } .site-in { padding-top: 72px; } }

@media (prefers-reduced-motion: reduce) {
  .b, .rows .r, .fan figure, .pane, .route .walk { transition: none; }
  #brain, #neurons { transition: none; }
}

/* STEP-168: below 760 px the bar keeps Talk to AVA and the investor pill; The product and The watch are a scroll away (draft 6) */
@media (max-width: 760px) { .hm-tabs .hm-tab:not(#bar-talk) { display: none; } }

/* STEP-188 §3 (Ivana, 25 Oct 17:12): one bar layout, the home's and the investor area's: the logo on the left; in the right corner
   Talk to AVA (STEP-187: hidden on the opening, it fades in left of Investor area once the opening's has gone) next to Investor
   area →. A bit smaller: 56 px (52 on a phone), the ring 36 px. No Home · Investor area switch under the logo any more */
:root { --hm-bar: 56px; }
@media (max-width: 900px) { :root { --hm-bar: 52px; } }
.hm-bar { display: flex; gap: 16px; padding: 0 20px 0 24px; }
.hm-bar .hm-brand { margin-right: auto; }
.hm-bar .hm-brand .hm-logo img { height: 26px; }
.hm-bar .sides { display: none; }
.hm-bar .hm-tabs { gap: 0; }
html body .hm-bar .talk-ring.hm-tab, html body .hm-bar .talk-ring.hm-tab:hover { height: 40px; gap: 9px; font-size: 15px; }
.hm-bar .talk-ring .tp-ico { width: 36px; height: 36px; }
.hm-bar .talk-ring .tp-ico svg { width: 15px; height: 15px; }
.hm-ask { height: 34px; padding: 0 14px; line-height: 32px !important; font-size: 14px; }
@media (max-width: 900px) { .hm-bar { gap: 12px; padding: 0 12px 0 16px; } .hm-bar .hm-brand .hm-logo img { height: 22px; } }