/* =========================================================================
   APPORTUNITIES · d-daynight ("לילה" / "יום") · production copy for /he/ and / (31/10/2026)
   Built from design-v2/directions/d-daynight/assets/css/daynight.css by
   design-v2/launch/build-he/make_home_css.mjs. Centering is physical (left: 50% + translateX(-50%)),
   so it is the same in RTL and LTR; LTR-only overrides live in ltr.css.
   One page, two modes, from b-night ("לילה קולנועי").
   Night (bare :root): a deep ocean night with colour, glowing teal + cyan,
   hairlines, double-bezel glass, one WebGL hero, CSS 3D everywhere else.
   Day (:root[data-mode="day"]): daylight over the same world. Off-white with
   a sea tint, ink-navy type, deep teal as the one loud colour, amber only
   where night used amber, crisp 1px ink hairlines and soft navy shadows.
   The mode lives in <html data-mode="night|day"> (never data-theme).
   Logical properties only (RTL-first). Motion: transform / opacity.
   ========================================================================= */

:root {
  --font: 'Heebo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Heebo', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);

  --r-2xl: 34px;
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --wrap: 1280px;
  --gutter: 48px;
  --sec-y: 176px;

  color-scheme: dark;
}

/* ---- NIGHT: a deep ocean night with colour (b-night lifted out of near-black).
        Also the "pieces of the night" that stay dark in both modes: the quote and the recommended plan. ---- */
:root, .daylight .quote .core, .daylight .plan.rec {
  --bg-0: #0a1a2b;            /* page edge, footer, the deepest shade */
  --bg-1: #0d2138;            /* page */
  --bg-2: #102844;            /* raised panels */
  --bg-3: #133051;            /* card cores */
  --bg-4: #173961;
  --line: rgba(150, 205, 255, .12);
  --line-2: rgba(150, 205, 255, .20);
  --line-3: rgba(150, 205, 255, .32);
  --ink: #eaf4ff;
  --ink-hi: #ffffff;          /* headings and names (was literal #fff) */
  --ink-2: #bccbdd;
  --ink-3: #91a5bd;
  --ink-4: #7a90ab;
  --teal: #2ef2d0;
  --teal-2: #19d2b3;
  --teal-3: #0d8f84;
  --teal-ink: #021411;        /* text on the primary button */
  --teal-tx: #8cfbe8;         /* teal used as text */
  --teal-tx-hi: #c9fff5;
  --cyan: #47d7ff;
  --cyan-2: #2aa6e8;
  --cyan-tx: #9be4ff;
  --ice: #dcf8ff;
  --amber: #f3bb6a;
  --amber-tx: #e9c48f;
  --violet: #a99bff;
  --rose: #ff8fa3;
  --soon: #9aacc2;            /* AA on the lifted cards (b-night: #8ea0b6) */
  --wire-a: #2ef2d0;          /* the dashed evidence wire (svg gradient stops) */
  --wire-b: #47d7ff;
  --btn-bg: linear-gradient(180deg, #7dfde8 0%, #2ef2d0 38%, #19d2b3 100%);   /* the primary button */
  --btn-sh: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,60,50,.25), 0 0 0 1px rgba(46,242,208,.55), 0 16px 44px -14px rgba(46,242,208,.75), 0 0 0 7px rgba(46,242,208,.07);
  --btn-sh-hover: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,60,50,.25), 0 0 0 1px rgba(46,242,208,.8), 0 20px 60px -12px rgba(46,242,208,.9), 0 0 0 9px rgba(46,242,208,.10);
  --btn-ico: rgba(2, 20, 17, .14);
  --btn-shine: rgba(255, 255, 255, .55);
  /* channels: rgb(var(--x-rgb) / alpha) */
  --teal-rgb: 46 242 208;     /* fills, rims and rings */
  --glow-rgb: 46 242 208;     /* blurred outer glows */
  --cyan-rgb: 71 215 255;
  --amber-rgb: 243 187 106;
  --violet-rgb: 169 155 255;
  --soon-rgb: 142 160 182;
  --rim-rgb: 150 205 255;     /* cool hairlines */
  --glass-rgb: 255 255 255;   /* glass fills */
  --shadow-rgb: 2 8 18;
  --scrim-rgb: 8 24 42;       /* legibility scrims behind hero text, the footer */
  --stmt-rgb: 234 244 255;    /* the unlit words of the statement */
  --glow-k: 1;                /* glows at full strength */
  --rim-k: 1.25;              /* hairlines read on the lifted night */
  --glass-k: 1.15;
  --shadow-k: 1;
}

/* ---- DAY: daylight over the same world. Also the .daylight band (proof, pricing) in the night. ---- */
:root[data-mode="day"], .daylight {
  --bg-0: #e8eeeb;
  --bg-1: #f4f7f5;            /* off-white with a faint sea tint */
  --bg-2: #fafbfa;
  --bg-3: #ffffff;
  --bg-4: #ffffff;
  --line: rgba(11, 27, 46, .09);
  --line-2: rgba(11, 27, 46, .14);
  --line-3: rgba(11, 27, 46, .24);
  --ink: #0b1b2e;             /* deep ink-navy */
  --ink-hi: #0b1b2e;
  --ink-2: #2e445d;
  --ink-3: #4e6279;
  --ink-4: #586b83;
  --teal: #057466;            /* deep teal: AA as text on the canvas and on --bg-0 (4.8:1) */
  --teal-2: #0b9a87;
  --teal-3: #055f55;
  --teal-ink: #ffffff;
  --teal-tx: #046b60;
  --teal-tx-hi: #055a50;
  --cyan: #0b6f9c;            /* deep sea blue */
  --cyan-2: #0a5f86;
  --cyan-tx: #0b5f86;
  --ice: #0a9e8a;
  --amber: #9a5b10;           /* the one warm accent, as text */
  --amber-tx: #9a5b10;
  --violet: #5b49b8;
  --rose: #c2415b;
  --soon: #586b83;
  --wire-a: #0a9e8a;
  --wire-b: #0b6f9c;
  --btn-bg: linear-gradient(180deg, #0b8274 0%, #097a6d 40%, #066459 100%);   /* deep teal, white label (AA: 4.7:1 and up everywhere) */
  --btn-sh: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 6px rgba(0,40,35,.22), 0 0 0 1px rgba(5,95,85,.62), 0 14px 32px -14px rgba(6,110,98,.55), 0 0 0 6px rgba(10,150,132,.08);
  --btn-sh-hover: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -2px 6px rgba(0,40,35,.22), 0 0 0 1px rgba(5,95,85,.78), 0 18px 40px -14px rgba(6,110,98,.62), 0 0 0 8px rgba(10,150,132,.10);
  --btn-ico: rgba(255, 255, 255, .16);
  --btn-shine: rgba(255, 255, 255, .3);
  --teal-rgb: 10 150 132;
  --glow-rgb: 10 150 132;
  --cyan-rgb: 11 111 156;
  --amber-rgb: 196 122 24;
  --violet-rgb: 91 73 184;
  --soon-rgb: 94 113 137;
  --rim-rgb: 11 27 46;        /* ink hairlines */
  --glass-rgb: 255 255 255;
  --shadow-rgb: 18 38 62;     /* soft navy shadows */
  --scrim-rgb: 244 247 245;
  --stmt-rgb: 11 27 46;
  --glow-k: .32;              /* glows turn into soft tinted shadows */
  --rim-k: 1;
  --glass-k: 12;              /* dark-glass alphas (.02-.08) become white panes (.24-.96) */
  --shadow-k: .36;
}
:root[data-mode="day"] { color-scheme: light; }

* { box-sizing: border-box; }
html { background: var(--bg-0); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-1);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 350;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
bdi, .num { unicode-bidi: isolate; }
bdi { white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.nw { white-space: nowrap; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 0; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgb(var(--teal-rgb) / .28); color: var(--ink-hi); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 10px; }

/* film grain + cursor spotlight (fixed, pointer-events none) */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spotlight {
  position: fixed; top: 0; left: 0; z-index: 3;   /* physical: main.js moves it with clientX / clientY */
  width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--teal-rgb) / .075), rgb(var(--cyan-rgb) / .035) 45%, transparent 72%);
  mix-blend-mode: screen; transform: translate3d(-999px, -999px, 0);
}
html.is-static .spotlight, html.reduce-motion .spotlight { display: none; }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; position: relative; }

/* ---------- type ---------- */
.h2 {
  font-size: clamp(38px, 4.5vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 15%, #a9bfd6 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h2 b, .h2 strong { font-weight: 700; }
.h2 .hl {
  background: linear-gradient(100deg, #9ffcec 0%, var(--teal) 40%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgb(var(--glow-rgb) / calc(.28 * var(--glow-k))));
}
.lead { font-size: 20px; line-height: 1.7; color: var(--ink-2); font-weight: 300; margin: 0; max-width: 660px; text-wrap: pretty; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 16px 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.045 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.012 * var(--glass-k))));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-size: 14px; line-height: 1; font-weight: 500; color: var(--ink-2); letter-spacing: .01em;
}
.eyebrow .idx { font-family: var(--mono); font-size: 11.5px; color: var(--teal); letter-spacing: .04em; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgb(var(--glow-rgb) / var(--glow-k)); }

.sec-head { display: grid; gap: 22px; justify-items: center; text-align: center; margin-block-end: 88px; }
.sec-head .lead { margin-inline: auto; }
.sec-head.start { justify-items: start; text-align: start; }
.sec-head.start .lead { margin-inline: 0; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding-inline: 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--ink-2); background: rgb(var(--glass-rgb) / calc(.03 * var(--glass-k)));
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip-live { color: var(--teal-tx); border-color: rgb(var(--teal-rgb) / .38); background: rgb(var(--teal-rgb) / .09); }
.chip-live::before { background: var(--teal); box-shadow: 0 0 8px rgb(var(--glow-rgb) / var(--glow-k)); }
.chip-beta { color: var(--cyan-tx); border: 1px dotted rgb(var(--cyan-rgb) / .7); background: rgb(var(--cyan-rgb) / .07); }
.chip-beta::before { background: transparent; border: 1.5px dotted var(--cyan); width: 7px; height: 7px; box-sizing: border-box; }
.chip-soon { color: var(--soon); border: 1px dashed rgb(var(--soon-rgb) / .45); background: transparent; }
.chip-soon::before { width: 8px; height: 8px; background: none; border: 1.4px solid currentColor; box-sizing: border-box; }
.chip-demo { font-size: 12px; color: var(--ink-3); background: rgb(var(--glass-rgb) / calc(.025 * var(--glass-k))); }
.chip-demo::before { background: var(--ink-4); }
.chip-draft { color: var(--amber); border: 1px dashed rgb(var(--amber-rgb) / .55); background: rgb(var(--amber-rgb) / .06); }
.chip-draft::before { background: var(--amber); box-shadow: 0 0 8px rgb(var(--amber-rgb) / calc(.7 * var(--glow-k))); }

/* ---------- buttons (pill, button-in-button, shine sweep RTL) ---------- */
.btn {
  --bx: 0px; --by: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  height: 58px; padding-inline: 28px 8px; border-radius: 999px;
  font-size: 17px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; border: 0;
  transform: translate3d(var(--bx), var(--by), 0);
  transition: transform .5s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
.btn:active { transform: translate3d(var(--bx), var(--by), 0) scale(.97); transition-duration: .12s; }
.btn .ico {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  transition: transform .5s var(--ease-out);
}
.btn .ico svg { width: 18px; height: 18px; }
.btn-primary {   /* its material is a token set, so the recommended plan keeps the night button in the day */
  color: var(--teal-ink);
  background: var(--btn-bg);
  box-shadow: var(--btn-sh);
}
.btn-primary .ico { background: var(--btn-ico); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(255deg, transparent 22%, var(--btn-shine) 48%, transparent 74%);
  transform: translateX(110%);
}
.btn-glass {
  color: var(--ink);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.075 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.02 * var(--glass-k))));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgb(var(--rim-rgb) / calc(.16 * var(--rim-k))), 0 18px 40px -22px rgb(var(--shadow-rgb) / calc(.8 * var(--shadow-k)));
}
.btn-glass .ico { background: rgb(var(--glass-rgb) / calc(.07 * var(--glass-k))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.btn-sm { height: 44px; font-size: 15px; padding-inline: 20px 6px; gap: 10px; }
.btn-sm .ico { width: 32px; height: 32px; }
.btn-sm .ico svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { box-shadow: var(--btn-sh-hover); }
  .btn-primary:hover::after { transform: translateX(-110%); transition: transform .95s var(--ease-soft); }
  .btn:hover .ico { transform: translateX(-4px) scale(1.06); }
  .btn-glass:hover { background-color: rgb(var(--glass-rgb) / calc(.04 * var(--glass-k))); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgb(var(--rim-rgb) / calc(.30 * var(--rim-k))), 0 18px 40px -22px rgb(var(--shadow-rgb) / calc(.8 * var(--shadow-k))); }
}

/* ---------- double-bezel shells ---------- */
.shell {
  padding: 7px; border-radius: var(--r-2xl);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.055 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.015 * var(--glass-k))));
  box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.09 * var(--rim-k)));
}
.core {
  position: relative; border-radius: calc(var(--r-2xl) - 7px); overflow: hidden;
  background: linear-gradient(180deg, rgba(24, 54, 92, .82), rgba(14, 35, 61, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.06 * var(--rim-k)));
}

/* glow border that follows the cursor (Linear-style) */
.glow-card { --mx: 70%; --my: 0%; position: relative; isolation: isolate; }
.glow-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(var(--teal-rgb) / .85), rgb(var(--cyan-rgb) / .35) 35%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.glow-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--teal-rgb) / .07), transparent 55%);
  opacity: 0; transition: opacity .5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .glow-zone:hover .glow-card::before { opacity: .55; }
  .glow-zone:hover .glow-card::after { opacity: 1; }
  .glow-zone .glow-card:hover::before { opacity: 1; }
}
html.glow-demo .glow-card::before { opacity: .7; }
html.glow-demo .glow-card::after { opacity: 1; }

/* ---------- reveals ---------- */
[data-reveal], [data-stagger] > * {   /* visible at rest: the reveal is a short rise only */
  transform: translate3d(0, 26px, 0);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}
[data-reveal].in, [data-stagger] > .in { transform: none; }
html.is-static [data-reveal], html.is-static [data-stagger] > *,
html.reduce-motion [data-reveal], html.reduce-motion [data-stagger] > * { transition: none !important; opacity: 1; transform: none; filter: none; }

/* ---------- section scaffolding ---------- */
.sec { position: relative; padding-block: var(--sec-y); isolation: isolate; overflow-x: clip; }
.sec::before { /* hairline divider with a glowing core */
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--rim-rgb) / calc(.16 * var(--rim-k))) 20%, rgb(var(--teal-rgb) / .35) 50%, rgb(var(--rim-rgb) / calc(.16 * var(--rim-k))) 80%, transparent);
  opacity: .6;
}
.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
html.is-only .sec::before { display: none; }

/* =========================================================================
   ANNOUNCEMENT + NAV
   ========================================================================= */
.announce {
  position: relative; z-index: 40; height: 42px; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 14px; color: var(--ink-2);
  background: linear-gradient(90deg, rgb(var(--teal-rgb) / 0) 0%, rgb(var(--teal-rgb) / .10) 30%, rgb(var(--cyan-rgb) / .12) 70%, rgb(var(--cyan-rgb) / 0) 100%), var(--bg-0);
  border-block-end: 1px solid var(--line);
}
.announce .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgb(var(--teal-rgb) / .6); animation: pulse 2.4s var(--ease-out) infinite; }
.announce b { color: var(--ink); font-weight: 600; }
.announce a { color: var(--teal-tx); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.announce a svg { width: 14px; height: 14px; }
.announce .sep { width: 1px; height: 14px; background: var(--line-3); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--teal-rgb) / .55); } 70% { box-shadow: 0 0 0 9px rgb(var(--teal-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--teal-rgb) / 0); } }

.nav {
  position: fixed; z-index: 60; inset-block-start: 56px; inset-inline: 0; margin-inline: auto;
  width: min(1180px, calc(100% - 40px)); height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: 22px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(21, 47, 80, .62), rgba(15, 37, 64, .55));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgb(var(--rim-rgb) / calc(.12 * var(--rim-k))), 0 24px 60px -30px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k)));
  transition: inset-block-start .6s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
  animation: navIn .8s var(--ease) both .05s;
}
.nav.scrolled { inset-block-start: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgb(var(--rim-rgb) / calc(.16 * var(--rim-k))), 0 24px 60px -24px rgb(var(--shadow-rgb) / calc(.95 * var(--shadow-k))); }
@keyframes navIn { from { opacity: 0; transform: translate3d(0, -16px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
html.is-only .nav, html.is-only .announce { display: none; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.wordmark { direction: ltr; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 19px; letter-spacing: .035em; color: var(--ink-hi); }
.wordmark i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px rgb(var(--glow-rgb) / var(--glow-k)), 0 0 2px #fff inset; }
.brand .adam { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.brand .adam b { color: var(--ink-2); font-weight: 600; }
.nav-links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; padding: 9px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-2); transition: color .25s var(--ease-out), background-color .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink-hi); background: rgb(var(--glass-rgb) / calc(.06 * var(--glass-k))); } }
.nav-end { display: flex; align-items: center; gap: 8px; }
.nav-login { font-size: 15px; color: var(--ink-2); padding: 9px 14px; border-radius: 999px; }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(var(--glass-rgb) / calc(.06 * var(--glass-k))); position: relative; cursor: pointer; }
.nav-burger i { position: absolute; inset-inline-start: 13px; width: 18px; height: 1.6px; background: var(--ink-hi); border-radius: 2px; transition: transform .45s var(--ease), opacity .3s; }
.nav-burger i:nth-child(1) { inset-block-start: 17px; } .nav-burger i:nth-child(2) { inset-block-start: 25px; }
html.menu-open .nav-burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
html.menu-open .nav-burger i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 55; padding: 140px 28px 40px; display: grid; align-content: start; gap: 6px;
  background: rgba(10, 28, 48, .86); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
}
.menu a { font-size: 34px; font-weight: 300; padding-block: 8px; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 60ms + 80ms); }
html.menu-open .menu { opacity: 1; pointer-events: auto; }
html.menu-open .menu a { opacity: 1; transform: none; }

/* =========================================================================
   HERO (night)
   The canvas runs 300px past the hero and is masked there, so the planet
   sets into section 01: no edge where #hero ends.
   ========================================================================= */
.hero {
  position: relative; isolation: isolate; z-index: 1;
  overflow-x: clip; overflow-y: visible; /* sideways clipped (layout too), downwards open for the setting planet */
  height: var(--hero-h, max(860px, calc(100svh - 42px)));
  max-height: 1060px;
  background:
    radial-gradient(900px 600px at 82% -10%, rgb(var(--teal-rgb) / .07), transparent 60%),
    radial-gradient(800px 560px at 10% 10%, rgba(71, 160, 255, .10), transparent 60%),
    linear-gradient(180deg, #0a1b30 0%, #0c1f36 55%, var(--bg-1) 100%);
}
#globe { position: absolute; inset-block-start: 0; inset-inline: 0; width: 100%; height: calc(100% + 300px); z-index: 1; display: block; opacity: 0; transition: opacity .9s var(--ease);
  -webkit-mask: linear-gradient(180deg, #000 0, #000 calc(100% - 470px), rgba(0,0,0,.42) calc(100% - 300px), rgba(0,0,0,.12) calc(100% - 190px), transparent calc(100% - 90px));
          mask: linear-gradient(180deg, #000 0, #000 calc(100% - 470px), rgba(0,0,0,.42) calc(100% - 300px), rgba(0,0,0,.12) calc(100% - 190px), transparent calc(100% - 90px)); }
.globe-anchor { position: absolute; z-index: 0; pointer-events: none; left: 50%; transform: translateX(-50%);
  width: 1340px; height: 1340px; inset-block-start: calc(100% - 392px); }
.hero-fallback { /* shown without WebGL: a CSS planet */
  position: absolute; z-index: 1; pointer-events: none; left: 50%; transform: translateX(-50%);
  width: 1340px; aspect-ratio: 1; inset-block-start: calc(100% - 392px); border-radius: 50%; opacity: 0; transition: opacity 1s var(--ease);
  background:
    radial-gradient(circle at 50% 2%, rgba(160, 255, 240, .5), transparent 22%),
    radial-gradient(rgb(var(--rim-rgb) / calc(.55 * var(--rim-k))) 1.1px, transparent 1.7px) 0 0 / 11px 11px,
    radial-gradient(circle at 50% 30%, #12375a, #0a1e35 70%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 69.5%, transparent 70.5%); mask: radial-gradient(circle at 50% 50%, #000 69.5%, transparent 70.5%);
  box-shadow: 0 -20px 120px rgb(var(--glow-rgb) / calc(.35 * var(--glow-k)));
}
.hero.webgl-off .hero-fallback { opacity: 1; }
.hero.webgl-on #globe { opacity: 1; }
html.is-static #globe { transition: none; }
.hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(125% 92% at 50% 30%, transparent 58%, rgb(var(--scrim-rgb) / .6) 100%), linear-gradient(180deg, rgb(var(--scrim-rgb) / .55), transparent 16%);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 55%, transparent 100%); }

.hero-inner {
  position: relative; z-index: 5; height: 100%; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-block-start: 106px; width: min(800px, 100% - 40px); margin-inline: auto;
}
.hero-inner::before { content: ''; position: absolute; z-index: -1; inset-inline: -120px; inset-block: 60px auto; height: 620px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--scrim-rgb) / .74), rgb(var(--scrim-rgb) / .46) 55%, transparent); }
.kicker { animation: rise .8s var(--ease) both .1s; }
.hero-title {
  margin: 24px 0 0; font-weight: 250; font-size: clamp(46px, 5.9vw, 86px); line-height: 1.02; letter-spacing: -0.02em;
  display: grid; gap: .02em;
}
.hero-title .l1, .hero-title .l2 { display: block; animation: titleIn 1s var(--ease) both; }
.hero-title .l1 { animation-delay: .15s; }
.hero-title .l2 { animation-delay: .26s; font-weight: 700; }
.hero-title .tx { display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent; padding-block-end: .08em; }
.hero-title .l1 .tx { background-image: linear-gradient(180deg, #fff 20%, #9fb6cf 120%); }
.hero-title .l2 .tx { background-image: linear-gradient(100deg, #e9fffb 0%, #8ffbe8 30%, var(--teal) 62%, var(--cyan) 100%); filter: drop-shadow(0 0 34px rgb(var(--glow-rgb) / calc(.38 * var(--glow-k)))); }
@keyframes titleIn { from { opacity: 0; transform: scale(1.12) translate3d(0, 10px, 0); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero-sub { margin: 22px 0 0; font-size: 19px; line-height: 1.66; font-weight: 300; color: var(--ink-2); max-width: 720px; text-wrap: balance; animation: rise .8s var(--ease) both .36s; }
.hero-sub b { color: var(--ink); font-weight: 500; }
.hero-ctas { display: flex; gap: 14px; margin-block-start: 28px; animation: rise .8s var(--ease) both .44s; flex-wrap: wrap; justify-content: center; }
.hero-micro { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-2); text-shadow: 0 1px 12px rgb(var(--scrim-rgb) / .95), 0 0 2px rgb(var(--scrim-rgb) / .9); animation: rise .8s var(--ease) both .5s; letter-spacing: .01em; }
.hero-micro .sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); vertical-align: middle; margin-inline: 9px; }
/* the measured number, under the CTAs (it used to sit in an 11.5px corner HUD over the dots) */
.hero-proof { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 13px; border-radius: 999px;
  font-size: 13.5px; line-height: 1.4; color: var(--ink-2); background: rgba(10, 31, 54, .72);
  box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .26), 0 10px 30px -12px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k)));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: rise .8s var(--ease) both .56s; }
.hero-proof b { color: var(--teal-tx-hi); font-weight: 600; }
.hero-proof bdi { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.hero-proof .pdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--teal); box-shadow: 0 0 10px rgb(var(--glow-rgb) / var(--glow-k)); }

/* opportunity cards around the headline */
.hero-cards { position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 1400px; }
.opp {
  --hit: 0; --tz: 0px; --ry: 0deg; --rx: 0deg; --bob: 6px;
  position: absolute; width: 272px; pointer-events: auto;
  transform-style: preserve-3d;
  animation: oppIn 1s var(--ease) both, bob 4.8s var(--ease-io) infinite;
  animation-delay: calc(.4s + var(--o, 0) * .08s), calc(var(--o, 0) * -.96s);
}
.opp .opp-in {
  position: relative; border-radius: 20px; padding: 15px 16px 14px;
  background: linear-gradient(180deg, rgba(27, 59, 98, .82), rgba(15, 37, 64, .92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgb(var(--rim-rgb) / calc(calc(.13 + var(--hit) * .7) * var(--rim-k))),
    0 0 calc(var(--hit) * 64px) rgb(var(--glow-rgb) / calc(calc(var(--hit) * .62) * var(--glow-k))),
    0 30px 60px -30px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k)));
  transform: rotateY(var(--ry)) rotateX(var(--rx)) translateZ(var(--tz));
  text-align: start;
}
.opp .opp-in::after { /* sweep of light on arrival */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(160, 255, 240, .18) 50%, transparent 70%);
  opacity: var(--hit);
}
/* the flare on the edge where a trail lands (desktop: the inner side edge at 62%; phone: the bottom edge) */
.opp .edge { position: absolute; z-index: 2; inset-block-start: 38%; height: 48%; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(var(--teal-rgb) / .95) 28%, #f2fffc 50%, rgb(var(--teal-rgb) / .95) 72%, transparent);
  box-shadow: 0 0 16px 2px rgb(var(--glow-rgb) / calc(.75 * var(--glow-k))), 0 0 40px 6px rgb(var(--glow-rgb) / calc(.35 * var(--glow-k)));
  opacity: var(--hit); transform: scaleY(calc(.55 + var(--hit) * .45)); }
.opp[data-card="0"] .edge, .opp[data-card="2"] .edge { inset-inline-end: -1px; }
.opp[data-card="1"] .edge, .opp[data-card="3"] .edge, .opp[data-card="4"] .edge { inset-inline-start: -1px; }
@keyframes oppIn { from { opacity: 0; transform: translate3d(0, 30px, -160px) scale(.92); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes bob { 0%, 100% { translate: 0 calc(var(--bob) * -1); } 50% { translate: 0 var(--bob); } }
.opp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 9px; }
.sig { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--teal-tx); }
.sig svg { width: 14px; height: 14px; }
.date { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.opp-co { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--ink-hi); }
.opp-why { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); font-weight: 350; }
.opp-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 11px; padding-block-start: 10px; border-block-start: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.mail { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding-inline: 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.mail.ok { color: var(--teal-tx); background: rgb(var(--teal-rgb) / .10); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .3); }
.mail.mid { color: var(--amber); background: rgb(var(--amber-rgb) / .08); box-shadow: inset 0 0 0 1px rgb(var(--amber-rgb) / .3); }
.mail.no { color: var(--ink-3); background: rgb(var(--glass-rgb) / calc(.03 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line-2); }
.opp--focus { width: 322px; }
.opp--focus .opp-in { padding: 17px 18px 16px; background: linear-gradient(180deg, rgba(20, 72, 86, .80), rgba(14, 39, 66, .93)); }
.focus-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--teal-tx-hi); }
.focus-tag svg { width: 15px; height: 15px; color: var(--teal); }
.opp--focus .opp-co { font-size: 17.5px; }
.ev { margin-block-start: 9px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.ev b { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--teal-tx); font-weight: 500; }
.ev bdi { font-family: var(--mono); font-size: 10.5px; }
.opp-actions { display: flex; gap: 6px; margin-block-start: 12px; }
.opp-actions span { flex: 1; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); background: rgb(var(--glass-rgb) / calc(.04 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line-2); }
.opp-actions span.ok { color: var(--teal-ink); background: linear-gradient(180deg, #7dfde8, var(--teal-2)); box-shadow: none; }

/* desktop card placement (inset-inline-start = right in RTL) */
.opp[data-card="0"] { inset-inline-start: 46px;  inset-block-start: 132px; --ry: -16deg; --tz: 30px; --o: 0; }
.opp[data-card="1"] { inset-inline-end: 54px;    inset-block-start: 160px; --ry: 16deg;  --tz: 0px;  --o: 1; }
.opp[data-card="2"] { inset-inline-start: 92px;  inset-block-start: 424px; --ry: -14deg; --tz: -30px; --o: 2; width: 262px; }
.opp[data-card="3"] { inset-inline-end: 98px;    inset-block-start: 344px; --ry: 14deg;  --tz: -40px; --o: 3; width: 258px; }
.opp[data-card="4"] { inset-inline-end: 44px;    inset-block-start: 530px; --ry: 15deg;  --tz: 10px; --o: 4; }
.fan-label { position: absolute; z-index: 5; margin: 0; inset-block-end: 30px; inset-inline-end: 40px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-3); text-shadow: 0 1px 10px rgb(var(--scrim-rgb) / .95); animation: rise .8s var(--ease) both .7s; }
.fan-label .bar { width: 28px; height: 1px; background: linear-gradient(270deg, transparent, var(--teal)); }

.israel-tag {
  /* positioned by globe.js with a physical translate (the projected point is a physical pixel) */
  position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; opacity: 0;
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding-inline: 10px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--teal-tx-hi); white-space: nowrap;
  background: rgba(10, 42, 48, .72); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .45), 0 0 24px rgb(var(--glow-rgb) / calc(.25 * var(--glow-k)));
}
.israel-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgb(var(--glow-rgb) / var(--glow-k)); }
.israel-tag.side::after { display: none; }
.israel-tag::after { content: ''; position: absolute; inset-block-start: 100%; left: 6px; width: 1px; height: 22px;
  background: linear-gradient(180deg, rgb(var(--teal-rgb) / .7), rgb(var(--teal-rgb) / 0)); transform: skewX(-32deg); transform-origin: top; }

/* =========================================================================
   SIGNALS STRIP
   ========================================================================= */
#signals { padding-block: 236px 160px; overflow: hidden; }
#signals::before { display: none; }
.marquee { position: relative; display: grid; gap: 16px; margin-block-start: 6px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.track { display: flex; gap: 14px; width: max-content; animation: marq 70s linear infinite; }
.track.rev { animation-direction: reverse; animation-duration: 90s; }
.marquee:hover .track, .marquee.is-paused .track { animation-play-state: paused; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(50%); } }
.src {
  display: inline-flex; align-items: center; gap: 14px; height: 66px; padding-inline: 12px 24px; border-radius: 20px; white-space: nowrap;
  font-size: 19px; font-weight: 400; color: var(--ink);
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.05 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.015 * var(--glass-k))));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgb(var(--rim-rgb) / calc(.11 * var(--rim-k)));
}
.src .gl { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--teal);
  background: radial-gradient(circle at 30% 20%, rgb(var(--teal-rgb) / .25), rgb(var(--teal-rgb) / .05) 70%); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .25); }
.src .gl svg { width: 21px; height: 21px; }
.src.rc .gl { color: var(--violet); background: radial-gradient(circle at 30% 20%, rgb(var(--violet-rgb) / .28), rgb(var(--violet-rgb) / .05) 70%); box-shadow: inset 0 0 0 1px rgb(var(--violet-rgb) / .3); }
.evc { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding-inline: 16px 18px; border-radius: 14px; white-space: nowrap;
  font-size: 14px; color: var(--ink-2); background: rgba(13, 35, 60, .7); box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.08 * var(--rim-k))); }
.evc .k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--teal); padding: 3px 7px; border-radius: 6px; background: rgb(var(--teal-rgb) / .08); }
.evc .k.rc { color: var(--violet); background: rgb(var(--violet-rgb) / .1); }
.evc bdi { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.sig-foot { display: flex; justify-content: center; margin-block-start: 26px; }

.proofline { /* evidence -> sentence connector */
  margin-block-start: 130px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px;
}
.pl-copy { display: grid; gap: 16px; align-content: center; }
.pl-copy h3 { margin: 0; font-size: 34px; line-height: 1.2; font-weight: 300; color: var(--ink-hi); }
.pl-copy h3 b { font-weight: 700; }
.pl-copy p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 440px; }
.pl-cards { position: relative; display: grid; gap: 14px; padding-inline-end: 70px; }
.pl-link { position: absolute; inset-inline-end: 0; inset-block: 48px 52px; width: 70px; pointer-events: none; }
.pl-link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-link path { fill: none; stroke: url(#wireG); stroke-width: 1.6; stroke-dasharray: 5 6; animation: ants 1.4s linear infinite; }
.pl-link span { position: absolute; inset-block-start: 50%; inset-inline-end: -46px; transform: translateY(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--teal-tx); padding: 5px 10px; border-radius: 999px; background: rgba(10, 42, 48, .92); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .45), 0 0 18px rgb(var(--glow-rgb) / calc(.25 * var(--glow-k))); }
.pl-card { border-radius: 18px; padding: 16px 18px; background: linear-gradient(180deg, rgba(24, 54, 92, .72), rgba(14, 35, 61, .9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgb(var(--rim-rgb) / calc(.11 * var(--rim-k))); }
.pl-card .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--teal); }
.pl-card .lbl.inf { color: var(--amber); }
.pl-card p { margin: 6px 0 0; font-size: 15px; color: var(--ink); line-height: 1.55; }
.pl-card .src-l { margin-block-start: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-align: start; }
.pl-wire { position: relative; height: 100%; min-height: 200px; }
.pl-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-wire path { fill: none; stroke: url(#wireG); stroke-width: 1.5; stroke-dasharray: 5 6; animation: ants 1.4s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -22; } }
.pl-draft .subj { font-weight: 600; color: var(--ink-hi); font-size: 15px; }
.pl-draft .body { margin-block-start: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.65; }
.pl-draft mark { color: var(--teal-tx-hi); background: rgb(var(--teal-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .35); border-radius: 6px; padding: 1px 5px; }

/* =========================================================================
   PRODUCT TOUR (dawn)
   Three to four real screens in a 3D stack, the active one flat in front,
   with the first light of the day rising behind them over the planet's rim.
   ========================================================================= */
#tour { padding-block: 170px 110px; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-1) 0%, #0d213e 34%, #112752 58%, #1b2c59 76%, #212c56 100%); }
#tour::before { opacity: .35; }
.tabwrap { position: relative; z-index: 3; display: flex; justify-content: center; }
.tabbar { position: relative; display: flex; justify-content: center; gap: 6px; padding: 6px; width: max-content; max-width: 100%; border-radius: 999px;
  background: linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.05 * var(--glass-k))), rgb(var(--glass-rgb) / calc(.015 * var(--glass-k)))); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgb(var(--rim-rgb) / calc(.12 * var(--rim-k))); }
.tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding-inline: 18px 20px; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  font-size: 15.5px; font-weight: 500; color: var(--ink-3); transition: color .3s var(--ease-out), background-color .3s var(--ease-out); white-space: nowrap; }
.tab svg { width: 17px; height: 17px; }
.tab.is-active { color: var(--ink-hi); background: linear-gradient(180deg, rgb(var(--teal-rgb) / .16), rgb(var(--teal-rgb) / .05)); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .35), 0 0 24px -6px rgb(var(--glow-rgb) / calc(.45 * var(--glow-k))); }
.tab.is-active svg { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .tab:not(.is-active):hover { color: var(--ink); background: rgb(var(--glass-rgb) / calc(.04 * var(--glass-k))); } }
.tab-progress { position: absolute; inset-inline: 18px; inset-block-end: 6px; height: 2px; border-radius: 2px; background: rgb(var(--glass-rgb) / calc(.06 * var(--glass-k))); opacity: 0; }
.tab-progress i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; border-radius: inherit; background: linear-gradient(270deg, var(--teal), var(--cyan)); transform-origin: right; transform: scaleX(0); }
#tour.is-playing .tab.is-active .tab-progress { opacity: 1; }
#tour.is-playing .tab.is-active .tab-progress i { animation: prog 7s linear forwards; }
@keyframes prog { to { transform: scaleX(1); } }
.tab-cue { display: none; }

.tour-copy { position: relative; height: 118px; margin-block: 40px 0; }
.tour-copy > div { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; gap: 10px; text-align: center;
  opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); }
.tour-copy > div.is-active { opacity: 1; transform: none; filter: none; }
.tour-copy h3 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-hi); }
.tour-copy p { margin: 0; max-width: 660px; color: var(--ink-2); font-size: 17.5px; text-wrap: balance; }

.tour-stage { position: relative; isolation: isolate; perspective: 2300px; perspective-origin: 50% 32%; padding-block: 70px 250px; }
/* the dawn: warm light rising behind the screens, from under the planet's rim */
.tour-stage .sky { position: absolute; z-index: -3; inset-inline: -20%; inset-block: -640px 200px; pointer-events: none;
  background:
    radial-gradient(62% 58% at 50% 100%, rgba(255, 238, 214, .85), rgba(255, 196, 140, .56) 20%, rgba(250, 140, 110, .3) 40%, rgba(160, 90, 190, .17) 62%, transparent 84%),
    radial-gradient(75% 62% at 50% 100%, rgba(90, 80, 200, .30), rgba(40, 50, 140, .14) 50%, transparent 78%),
    radial-gradient(18% 12% at 50% 100%, rgba(255, 252, 240, .7), transparent 70%); }
/* the planet's rim, inside the 3D stack: in front of the screens at the back, behind the one in front */
.stack .ground { position: absolute; z-index: 0; left: 50%; inset-block-start: 79%; width: 3400px; height: 900px; pointer-events: none;
  transform: translateX(-50%) translateZ(-200px);
  border-radius: 1700px 1700px 0 0 / 150px 150px 0 0;
  background: linear-gradient(180deg, #132643 0%, #0b1c2f 9%);
  box-shadow: 0 -2px 0 rgba(255, 240, 222, .95), 0 -14px 46px rgba(255, 190, 134, .55), 0 -70px 180px rgba(255, 150, 120, .3); }
/* the planet's dot lattice fades out downwards, so the section ends on the same night as section 03 begins */
.stack .ground::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(30% 22% at 50% 0%, rgba(255, 196, 150, .26), transparent 100%), radial-gradient(rgb(var(--rim-rgb) / calc(.20 * var(--rim-k))) 1.1px, transparent 1.7px) 0 0 / 13px 13px;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 22%, transparent 58%); mask: linear-gradient(180deg, #000 0, #000 22%, transparent 58%); }
.stack .ground .rim { position: absolute; inset-block-start: -64px; left: 50%; transform: translateX(-50%); width: 1500px; height: 128px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 252, 244, 1), rgba(255, 214, 160, .62) 30%, rgba(255, 150, 110, .2) 60%, transparent 80%); filter: blur(2px); }
.stack {
  --trx: 0deg; --try: 0deg; --gx: 50%; --gy: 30%;
  position: relative; width: min(1060px, 100% - 64px); margin-inline: auto; aspect-ratio: 1060 / 701; transform-style: preserve-3d;
  transform: rotateX(calc(1.5deg + var(--trx))) rotateY(var(--try));
  transition: transform .28s var(--ease-out); /* short: the cursor tilt is spring-lerped in JS */
}
@property --wl { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --wr { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.win { position: absolute; inset: 0; margin: 0; padding: 0 9px 9px; border-radius: 16px; transform-style: preserve-3d; backface-visibility: hidden;
  background: linear-gradient(180deg, #223b5b 0%, #152a45 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255, 210, 170, .25);
  /* the screens at the back dissolve into the dawn on their outer side (registered props, so it eases with the move) */
  -webkit-mask: linear-gradient(90deg, transparent calc(var(--wl) * .04), #000 var(--wl), #000 calc(100% - var(--wr)), transparent calc(100% - var(--wr) * .04));
          mask: linear-gradient(90deg, transparent calc(var(--wl) * .04), #000 var(--wl), #000 calc(100% - var(--wr)), transparent calc(100% - var(--wr) * .04));
  transition: transform 1.15s var(--ease), filter .9s var(--ease), opacity .9s var(--ease), --wl 1.15s var(--ease), --wr 1.15s var(--ease); }
/* the front screen's shadow and back-light live on a separate layer: a mask would clip them */
.tour-stage .halo { position: absolute; z-index: -2; inset-inline: 0; margin-inline: auto; width: min(1060px, 100% - 64px); inset-block: 70px 250px; border-radius: 18px; pointer-events: none;
  box-shadow: 0 70px 140px -50px rgb(var(--shadow-rgb) / calc(.95 * var(--shadow-k))), 0 -40px 170px -30px rgba(255, 176, 124, .42), 0 0 260px 30px rgba(255, 150, 120, .14), 0 0 90px -20px rgb(var(--glow-rgb) / calc(.22 * var(--glow-k))); }
.win-bar { position: relative; height: 34px; display: flex; align-items: center; gap: 7px; direction: ltr; padding-inline: 7px; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b3548; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.win-bar i:first-child { background: #3ee6c8; box-shadow: 0 0 8px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k))); }
.win-url { position: absolute; inset-inline: 0; margin-inline: auto; width: max-content; display: inline-flex; align-items: center; gap: 7px;
  height: 22px; padding-inline: 12px; border-radius: 8px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); background: rgb(var(--glass-rgb) / calc(.045 * var(--glass-k))); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.win-url svg { width: 11px; height: 11px; color: var(--teal); }
.win-screen { position: relative; overflow: hidden; border-radius: 9px; aspect-ratio: 16 / 10; background: #f6f4ef; box-shadow: 0 0 0 1px rgb(var(--shadow-rgb) / calc(.6 * var(--shadow-k))); }
.win-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* tone the off-white screen so it sits in the light of the scene instead of glaring */
.win-tone { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 32%, transparent 58%, rgba(19, 43, 74, .20) 100%),
    linear-gradient(0deg, rgba(255, 176, 120, .09), transparent 38%),
    linear-gradient(180deg, rgb(var(--glass-rgb) / calc(.05 * var(--glass-k))), transparent 22%); }
/* slots: 0 = in front and flat, 1 / 2 = fanned behind, 3 = waiting at the back */
.win[data-slot="0"] { transform: translate3d(0, 0, 0); }
.win[data-slot="1"] { transform: translate3d(-30%, 3%, -380px) rotateY(15deg); filter: brightness(.72) saturate(.9); --wl: 42%; }
.win[data-slot="2"] { transform: translate3d(30%, 3%, -380px) rotateY(-15deg); filter: brightness(.72) saturate(.9); --wr: 42%; }
.win[data-slot="3"] { transform: translate3d(0, -16%, -760px); filter: brightness(.4); opacity: 0; }
#tour[data-tab="4"] .win[data-slot="0"] { transform: translate3d(0, -6%, -460px); filter: brightness(.42) saturate(.8); }
#tour[data-tab="4"] .win[data-slot="1"], #tour[data-tab="4"] .win[data-slot="2"] { filter: brightness(.34); }
/* the deal: on entering the viewport the screens fan out from one pile */
.tour-stage[data-inview]:not(.is-in) .win:not([data-slot="0"]) { transform: translate3d(0, 2%, -420px); --wl: 0%; --wr: 0%; }
.tour-stage[data-inview].is-in .win[data-slot="1"] { transition-delay: .12s; }
.tour-stage[data-inview].is-in .win[data-slot="2"] { transition-delay: .2s; }
html.is-static .win, html.reduce-motion .win { transition: none; }

/* hotspots + callouts (image coordinates are physical: left/top, in % of the 1440x900 screen) */
.hots { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.win[data-slot="0"] .hots { opacity: 1; transition-delay: .5s; }
#tour[data-tab="4"] .hots { opacity: 0; }
.hot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.hot::before { content: ''; position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px rgba(10, 44, 50, .85), 0 0 0 4.5px rgb(var(--teal-rgb) / .55), 0 0 16px rgb(var(--glow-rgb) / var(--glow-k)); }
.hot::after { content: ''; position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 1.5px solid var(--teal); animation: ping 2.7s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.call { position: absolute; top: var(--y); z-index: 6; width: 14.2%; transform: translateY(-50%); pointer-events: none;
  padding: 10px 12px; border-radius: 13px; font-size: 13px; line-height: 1.45; color: var(--ink); text-align: start;
  background: linear-gradient(180deg, rgba(21, 51, 86, .95), rgba(14, 35, 61, .97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgb(var(--teal-rgb) / .38), 0 18px 40px -16px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k))), 0 0 30px -10px rgb(var(--glow-rgb) / calc(.45 * var(--glow-k))); }
.call small { display: block; margin-block-end: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--teal); }
.call.r { right: 1.2%; }
.call.l { left: 1.2%; }
.call.top { left: var(--x); top: var(--y); width: 17%; transform: translate(-50%, -50%); }
.wire { position: absolute; top: var(--y); height: 1.5px; margin-top: -.75px; z-index: 5; pointer-events: none; }
.wire.r { left: calc(var(--x) + 8px); right: 15.4%; background: linear-gradient(90deg, rgb(var(--teal-rgb) / .95), rgb(var(--teal-rgb) / .55)); box-shadow: 0 0 8px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k))); }
.wire.l { right: calc(100% - var(--x) + 8px); left: 15.4%; background: linear-gradient(270deg, rgb(var(--teal-rgb) / .95), rgb(var(--teal-rgb) / .55)); box-shadow: 0 0 8px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k))); }
.wire.up { left: var(--x); top: var(--to); height: auto; bottom: calc(100% - var(--y) + 8px); width: 1.5px; margin: 0 0 0 -.75px; background: linear-gradient(180deg, rgb(var(--teal-rgb) / .55), rgb(var(--teal-rgb) / .95)); box-shadow: 0 0 8px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k))); }

/* phones (mobile tab) */
.phones { position: absolute; inset: 70px 0 250px; z-index: 7; display: flex; justify-content: center; align-items: center; gap: 70px; pointer-events: none; transform-style: preserve-3d;
  opacity: 0; transition: opacity .8s var(--ease); }
#tour[data-tab="4"] .phones { opacity: 1; pointer-events: auto; }
.phone { position: relative; width: 300px; padding: 11px; border-radius: 52px; transform-style: preserve-3d; transition: transform 1.1s var(--ease);
  background: linear-gradient(160deg, #314968, #12263c 60%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 7px #05080d, 0 60px 100px -40px rgb(var(--shadow-rgb) / calc(.95 * var(--shadow-k))), 0 30px 90px -30px rgba(255,170,120,.35), 0 0 80px -20px rgb(var(--glow-rgb) / calc(.25 * var(--glow-k))); }
.phone .ph-screen { position: relative; overflow: hidden; border-radius: 42px; aspect-ratio: 390 / 844; background: #f6f4ef; display: flex; flex-direction: column; }
.phone .ph-status { flex: none; height: 6.6%; display: flex; align-items: center; justify-content: space-between; direction: ltr; padding-inline: 26px 22px; padding-block-start: 2px; background: #f6f4ef; color: #121821; }
.phone .ph-status b { font-size: 12.5px; font-weight: 600; font-family: var(--font); letter-spacing: .01em; }
.phone .ph-ic { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.phone .ph-ic i { width: 3px; border-radius: 1px; background: #121821; }
.phone .ph-ic i:nth-child(1) { height: 5px; } .phone .ph-ic i:nth-child(2) { height: 7.5px; } .phone .ph-ic i:nth-child(3) { height: 10px; }
.phone .ph-screen img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.phone .island { position: absolute; z-index: 3; inset-block-start: 20px; inset-inline-start: 50%; width: 86px; height: 25px; margin-inline-start: -43px; border-radius: 20px; background: #000; }
.phone:nth-child(1) { transform: rotateY(-14deg) rotateZ(1.2deg) translateZ(60px) translateY(18px); }
.phone:nth-child(2) { transform: rotateY(12deg) rotateZ(-1.2deg) translateZ(110px) translateY(-18px); }
#tour:not([data-tab="4"]) .phone { transform: translateZ(-200px) translateY(80px); }
.tour-foot { position: relative; z-index: 2; display: flex; justify-content: center; gap: 12px; margin-block-start: -70px; flex-wrap: wrap; }

/* =========================================================================
   BRAIN (how Adam works)
   ========================================================================= */
.brain-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps::before { content: ''; position: absolute; inset-inline-start: 23px; inset-block: 26px; width: 1px; background: linear-gradient(180deg, rgb(var(--teal-rgb) / .55), rgb(var(--cyan-rgb) / .25) 60%, rgb(var(--teal-rgb) / .08)); }
.steps::after { content: ''; position: absolute; inset-inline-start: 21px; inset-block-start: 26px; width: 5px; height: 90px; border-radius: 4px;
  background: linear-gradient(180deg, transparent, var(--teal), transparent); filter: drop-shadow(0 0 8px rgb(var(--glow-rgb) / var(--glow-k))); animation: fiber 4.2s var(--ease-io) infinite; }
@keyframes fiber { from { transform: translateY(-40px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(640px); opacity: 0; } }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 16px 0; border-radius: 18px; transition: opacity .5s var(--ease); }
.step .node { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--teal);
  background: radial-gradient(circle at 30% 20%, rgb(var(--teal-rgb) / .18), rgba(15, 37, 64, .95) 70%); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .3), 0 0 0 6px var(--bg-1); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.step h3 { margin: 4px 0 4px; font-size: 22px; font-weight: 600; color: var(--ink-hi); letter-spacing: -0.005em; }
.step p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 520px; }
#brain:not(.is-static-all) .step { opacity: .78; }
#brain .step.is-active { opacity: 1; }
#brain .step.is-active .node { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .8), 0 0 0 6px var(--bg-1), 0 0 30px rgb(var(--glow-rgb) / calc(.55 * var(--glow-k))); }
html.is-static #brain .step, html.reduce-motion #brain .step { opacity: 1; }
.loopback { display: inline-flex; align-items: center; gap: 10px; margin-block-start: 18px; margin-inline-start: 70px; font-size: 14px; color: var(--ink-3); }
.loopback svg { width: 18px; height: 18px; color: var(--teal); }

/* the engine: the hero's planet, small and whole; signals fall through three gates into one person and one draft.
   Positions are fractions of the box and match G in assets/js/engine.js */
#brain { background: linear-gradient(180deg, #0b1c2f 0%, var(--bg-1) 30%, var(--bg-1) 100%); }
#brain::before { display: none; }
.engine { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 700; margin-inline: auto; }
.engine canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.engine .eg-tag, .engine .eg-gate { position: absolute; white-space: nowrap; font-size: 12.5px; line-height: 1; pointer-events: none; }
.eg-planet { top: 1%; left: 47%; transform: translateX(-50%); color: var(--ink-3); }
.eg-gate { right: 7%; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding-inline: 10px 12px; border-radius: 999px; color: var(--teal-tx-hi);
  background: rgba(11, 39, 58, .86); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .38), 0 0 24px -8px rgb(var(--glow-rgb) / calc(.5 * var(--glow-k))); transform: translateY(-50%); transition: box-shadow .5s var(--ease), color .5s var(--ease); }
.eg-gate i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgb(var(--glow-rgb) / var(--glow-k)); }
.eg-gate.g1 { top: 46%; } .eg-gate.g2 { top: 53.5%; } .eg-gate.g3 { top: 61%; }
.eg-out { left: 0; top: 63%; color: var(--amber-tx); font-size: 12px; opacity: .85; }   /* clear of the person pill (70%) */
.eg-out::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-inline-end: 7px; vertical-align: middle; }
.eg-person { position: absolute; top: 70%; left: 47%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 7px 12px 7px 8px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2);
  background: linear-gradient(180deg, rgba(20, 64, 80, .94), rgba(14, 39, 66, .96)); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .5), 0 0 40px -8px rgb(var(--glow-rgb) / calc(.55 * var(--glow-k))); }
.eg-person b { color: var(--ink-hi); font-weight: 600; }
.eg-person .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--teal); background: radial-gradient(circle at 30% 25%, rgb(var(--teal-rgb) / .35), rgb(var(--teal-rgb) / .06) 70%); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .45); }
.eg-person .av svg { width: 17px; height: 17px; }
.eg-draft { position: absolute; top: 76.5%; left: 50%; transform: translateX(-50%); width: min(400px, 84%); display: grid; gap: 4px; padding: 14px 16px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(23, 55, 92, .94), rgba(14, 35, 61, .97)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgb(var(--rim-rgb) / calc(.16 * var(--rim-k))), 0 24px 50px -24px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k))); }
.eg-draft small { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--teal); }
.eg-draft b { font-size: 15px; color: var(--ink-hi); font-weight: 600; }
.eg-draft > span { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-draft .opp-actions { margin-block-start: 8px; }
.eg-draft .opp-actions span { height: 26px; font-size: 11.5px; }
.eg-readout { position: absolute; top: 0; right: 0; display: grid; justify-items: end; gap: 8px; }
.eg-readout .who { font-size: 14px; color: var(--ink-2); }
.eg-readout .who b { color: var(--ink-hi); font-weight: 700; font-size: 16px; }
.readout { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--teal); height: 30px; padding-inline: 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: rgb(var(--teal-rgb) / .07); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .3); }
.readout span { font-family: var(--font); font-size: 13px; letter-spacing: 0; color: var(--teal-tx-hi); }
.readout::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgb(var(--glow-rgb) / var(--glow-k)); }
/* the stage of the active step lights up (main.js sets data-step on #brain) */
#brain[data-step="2"] .eg-gate { color: var(--ink-hi); box-shadow: inset 0 0 0 1px rgba(120,255,232,.85), 0 0 30px -4px rgb(var(--glow-rgb) / calc(.75 * var(--glow-k))); }
#brain[data-step="3"] .eg-person { box-shadow: inset 0 0 0 1px rgba(120,255,232,.95), 0 0 50px -4px rgb(var(--glow-rgb) / calc(.85 * var(--glow-k))); }
#brain[data-step="4"] .eg-draft, #brain[data-step="5"] .eg-draft { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgb(var(--teal-rgb) / .6), 0 0 44px -10px rgb(var(--glow-rgb) / calc(.65 * var(--glow-k))); }
#brain[data-step="5"] .eg-draft .opp-actions span.ok { box-shadow: 0 0 0 3px rgb(var(--teal-rgb) / .25), 0 0 20px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k))); }

/* =========================================================================
   AUTONOMY LADDER (CSS 3D staircase)
   ========================================================================= */
#ladder { overflow: hidden; }
.stair-stage { position: relative; perspective: 2000px; perspective-origin: 50% 20%; padding-block: 40px 0; margin-block-start: -10px; }
.stairs { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 470px; transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-8deg); }
.stair { --h: 120px; --i: 0; position: relative; width: 98px; height: var(--h); transform-style: preserve-3d; flex: none; }
.stair .f { position: absolute; inset: 0; border-radius: 14px 14px 6px 6px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, rgb(var(--teal-rgb) / .22), rgba(16, 60, 74, .55) 38%, rgba(13, 35, 60, .9)); box-shadow: inset 0 1px 0 rgba(200,255,245,.45), inset 0 0 0 1px rgb(var(--teal-rgb) / .42), 0 0 40px -12px rgb(var(--glow-rgb) / calc(.55 * var(--glow-k))); }
.stair .t { position: absolute; inset-inline: 0; inset-block-start: 0; height: 40px; transform-origin: top; transform: rotateX(90deg); border-radius: 14px;
  background: linear-gradient(180deg, rgba(160,255,240,.55), rgb(var(--teal-rgb) / .12)); box-shadow: 0 0 30px rgb(var(--glow-rgb) / calc(.45 * var(--glow-k))); }
.stair .s { position: absolute; inset-block: 0; inset-inline-end: 0; width: 40px; transform-origin: left; transform: rotateY(-90deg); background: linear-gradient(90deg, rgba(16, 80, 86, .7), rgba(11, 35, 56, .9)); }
.stair .n { font-family: var(--mono); font-size: 11px; color: var(--teal); }
.stair .lb { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--ink-hi); text-wrap: balance; }
.stair .st { margin-block-start: auto; }
.stair .st .chip { height: 22px; font-size: 11px; padding-inline: 7px; gap: 5px; }
.stair .st .chip::before { width: 5px; height: 5px; }
.stair.beta .f { background: linear-gradient(180deg, rgb(var(--cyan-rgb) / .16), rgba(15, 47, 78, .6) 40%, rgba(13, 35, 60, .9)); box-shadow: inset 0 0 0 1px rgb(var(--cyan-rgb) / .0), 0 0 30px -14px rgb(var(--cyan-rgb) / calc(.5 * var(--glow-k))); outline: 1.5px dotted rgb(var(--cyan-rgb) / .75); outline-offset: -1.5px; }
.stair.beta .t { background: linear-gradient(180deg, rgba(160,230,255,.35), rgb(var(--cyan-rgb) / .08)); box-shadow: 0 0 20px rgb(var(--cyan-rgb) / calc(.3 * var(--glow-k))); }
.stair.beta .n { color: var(--cyan); }
.stair.soon .f { background: linear-gradient(180deg, rgba(140,170,200,.06), rgba(13, 33, 56, .35)); box-shadow: none; outline: 1px dashed rgb(var(--soon-rgb) / .42); outline-offset: -1px; }
.stair.soon .t { background: linear-gradient(180deg, rgba(160,180,205,.10), rgba(160,180,205,0)); box-shadow: none; outline: 1px dashed rgb(var(--soon-rgb) / .3); }
.stair.soon .s { background: linear-gradient(90deg, rgba(47, 73, 104, .25), rgba(11, 31, 52, .2)); }
.stair.soon .n, .stair.soon .lb { color: var(--soon); }
.stair.soon .lb { font-weight: 500; }
/* rise in sequence (soon steps rise too, but never animate afterwards) */
.stair-stage[data-inview] .stair { transform: translateY(26px); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.stair-stage[data-inview].is-in .stair { transform: none; }
.stair.live .f::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(200,255,245,.14), transparent 40%); animation: liveGlow 3.6s var(--ease-io) infinite alternate; animation-delay: calc(var(--i) * -.3s); }
@keyframes liveGlow { from { opacity: .2; } to { opacity: 1; } }
.today-mark { position: relative; z-index: 3; flex: none; width: 2px; align-self: stretch; margin-inline: 4px; pointer-events: none; }
.today-mark::before { content: ''; position: absolute; inset-block: -24px 0; inset-inline-start: 0; width: 2px; background: linear-gradient(180deg, rgb(var(--teal-rgb) / 0), var(--teal) 20%, rgb(var(--teal-rgb) / .15)); box-shadow: 0 0 16px rgb(var(--glow-rgb) / var(--glow-k)); }
.today-mark span { position: absolute; inset-block-start: -58px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--teal-tx-hi); padding: 6px 12px; border-radius: 999px; background: rgba(10, 42, 48, .85); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .5), 0 0 24px rgb(var(--glow-rgb) / calc(.3 * var(--glow-k))); }
.stair-floor { position: relative; height: 1px; margin-block-start: 0; background: linear-gradient(90deg, transparent, rgb(var(--teal-rgb) / .5), transparent); box-shadow: 0 0 30px rgb(var(--glow-rgb) / calc(.5 * var(--glow-k))); }
.ladder-legend { display: flex; justify-content: center; gap: 12px; margin-block: 34px 0; flex-wrap: wrap; }
.ladder-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-block-start: 90px; }
.lcol .core { padding: 34px 34px 30px; height: 100%; }
.lcol h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 600; color: var(--ink-hi); }
.lcol .sub { margin: 0 0 18px; color: var(--ink-3); font-size: 15px; }
.lrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding-block: 14px; border-block-start: 1px solid var(--line); }
.lrow .n { font-family: var(--mono); font-size: 12px; color: var(--teal); padding-block-start: 3px; }
.lrow b { display: block; font-size: 16.5px; font-weight: 600; color: var(--ink-hi); }
.lrow span.l { display: block; margin-block-start: 2px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.lcol.soon .lrow .n, .lcol.soon .lrow b { color: var(--soon); }
.lcol.soon .lrow b { font-weight: 500; }
.lock-shot { margin-block-start: 22px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgb(var(--rim-rgb) / calc(.16 * var(--rim-k))), 0 30px 60px -30px rgb(var(--shadow-rgb) / calc(.9 * var(--shadow-k))); position: relative; }
.lock-shot img { width: 100%; }
.lock-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-start: 12px; font-size: 13.5px; color: var(--ink-3); }
.why-follow { margin-block-start: 26px; }

/* =========================================================================
   FOR TEAMS (statement + bento + personas)
   ========================================================================= */
.statement { font-size: clamp(30px, 3.9vw, 58px); line-height: 1.22; font-weight: 300; letter-spacing: -0.01em; margin: 0 auto; max-width: 1120px; text-align: center; text-wrap: balance; }
.statement .w-src { display: block; }
.statement .w { color: rgb(var(--stmt-rgb) / .55); transition: color .5s var(--ease); }   /* unlit: still 3:1 or more (large text) */
.statement .hl .w { font-weight: 600; }
@supports (animation-timeline: view()) {
  html:not(.is-static):not(.reduce-motion) .statement .w { animation: lit linear both; animation-timeline: view(); animation-range: cover calc(14% + var(--wi) * 1.6%) cover calc(26% + var(--wi) * 1.6%); }
}
@keyframes lit { to { color: rgb(var(--stmt-rgb) / 1); } }
html:not(.is-static):not(.reduce-motion) .statement .hl .w { animation-name: litHl; }
@keyframes litHl { to { color: var(--teal-tx); text-shadow: 0 0 30px rgb(var(--glow-rgb) / calc(.35 * var(--glow-k))); } }
html.is-static .statement .w, html.reduce-motion .statement .w { color: var(--ink); }
html.is-static .statement .hl .w, html.reduce-motion .statement .hl .w { color: var(--teal-tx); text-shadow: 0 0 30px rgb(var(--glow-rgb) / calc(.35 * var(--glow-k))); }
@supports not (animation-timeline: view()) { .statement .w { color: var(--ink); } .statement .hl .w { color: var(--teal-tx); } }
.teams-head { margin-block: 150px 70px; }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bento > .shell { min-height: 0; }
.b-focus { grid-column: span 7; grid-row: span 2; }
.b-guid { grid-column: span 5; }
.b-person { grid-column: span 5; }
.b-chain { grid-column: span 7; }
.b-ctrl { grid-column: span 5; }
.bento .core { height: 100%; padding: 30px 30px 32px; display: flex; flex-direction: column; gap: 22px; }
.b-k { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.b-k b { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--teal); font-weight: 500; }
.b-k i { width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--teal)); }
.bento h3 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--ink-hi); letter-spacing: -0.01em; }
.bento p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 520px; }
.viz { position: relative; margin-block-start: auto; border-radius: 18px; padding: 18px; background: rgba(10, 29, 50, .55); box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.08 * var(--rim-k))); overflow: hidden; }
.viz .demo { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
/* focus viz: one big card + folded stack */
.fstack { position: relative; padding-block-start: 14px; }
.fcard { position: relative; z-index: 3; border-radius: 16px; padding: 18px 18px 16px; background: linear-gradient(180deg, rgba(20, 72, 86, .9), rgba(15, 41, 68, .96)); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .45), 0 0 40px -10px rgb(var(--glow-rgb) / calc(.45 * var(--glow-k))); }
.fcard .ft { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--teal-tx-hi); font-weight: 600; }
.fcard h4 { margin: 10px 0 4px; font-size: 19px; color: var(--ink-hi); font-weight: 600; }
.fcard p { font-size: 14px; color: var(--ink-2); margin: 0; }
.fcard .frow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-start: 12px; padding-block-start: 11px; border-block-start: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.fcard .fev { margin-block-start: 9px; font-size: 12.5px; color: var(--ink-3); }
.fcard .fev b { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--teal-tx); font-weight: 500; }
.fcard .opp-actions { margin-block-start: 12px; }
.fold { position: relative; height: 18px; margin-inline: 14px; border-radius: 0 0 14px 14px; background: rgba(21, 51, 86, .8); box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.12 * var(--rim-k))); }
.fold.f2 { margin-inline: 28px; height: 16px; opacity: .7; }
.fold.f3 { margin-inline: 42px; height: 14px; opacity: .45; }
.mini { display: grid; gap: 7px; margin-block-start: 10px; }
.mini .mr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgb(var(--glass-rgb) / calc(.025 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); }
.mini .mr b { color: var(--ink-hi); font-weight: 600; }
.mini .mr .sg { font-size: 12px; color: var(--ink-3); }
.mini-h { margin-block-start: 18px; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fmeta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-start: 16px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.fmeta .fu, .mini-h .fu { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px; border-radius: 999px; color: var(--cyan-tx); background: rgb(var(--cyan-rgb) / .08); box-shadow: inset 0 0 0 1px rgb(var(--cyan-rgb) / .3); }
/* guidance viz: evidence rows */
.evrow { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgb(var(--glass-rgb) / calc(.025 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line); }
.evrow + .evrow { margin-block-start: 8px; }
.evrow .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--teal); }
.evrow .lbl.inf { color: var(--amber); }
.evrow .tx { font-size: 14px; color: var(--ink); }
.evrow .sr2 { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
/* right person viz: role ladder */
.roles { display: grid; gap: 8px; }
.role { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--glass-rgb) / calc(.025 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); }
.role .rk { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.role.pick { color: var(--ink-hi); background: rgb(var(--teal-rgb) / .06); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .4), 0 0 24px -8px rgb(var(--glow-rgb) / calc(.4 * var(--glow-k))); }
.role.pick .rk { color: var(--teal); }
/* lead chain viz */
.chain-cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block-end: 16px; flex-wrap: wrap; }
.chain-cap .chip:first-child { color: var(--teal-tx-hi); border-color: rgb(var(--teal-rgb) / .32); background: rgb(var(--teal-rgb) / .06); }
.chain-cap .chip:first-child::before { display: none; }
.chain-cap .chip svg { width: 13px; height: 13px; color: var(--teal); }
.chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: center; padding-block: 8px 4px; }
.cnode { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 13.5px; color: var(--ink-2); }
.cnode .bub { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 37, 64, .95); box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.2 * var(--rim-k))); }
.cnode .bub svg { width: 19px; height: 19px; color: var(--ink-2); }
.cnode.on .bub { box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .7), 0 0 22px rgb(var(--glow-rgb) / calc(.45 * var(--glow-k))); }
.cnode.on .bub svg { color: var(--teal); }
.cnode:not(:last-child)::after { content: ''; position: absolute; inset-block-start: 23px; inset-inline-start: 50%; width: 100%; height: 1px; background: linear-gradient(270deg, rgb(var(--teal-rgb) / .6), rgb(var(--rim-rgb) / calc(.12 * var(--rim-k)))); }
.chain-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 18px; }
.chain-notes > span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding-inline: 11px; border-radius: 999px; font-size: 13px; color: var(--ink-2); background: rgb(var(--glass-rgb) / calc(.03 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line-2); }
.chain-notes > span svg { width: 14px; height: 14px; color: var(--teal); }
/* control viz: modes */
.modes { display: grid; gap: 8px; }
.mode { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgb(var(--glass-rgb) / calc(.025 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; color: var(--ink-2); }
.mode .rad { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.mode.sel { color: var(--ink-hi); background: rgb(var(--teal-rgb) / .06); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .45); }
.mode.sel .rad { box-shadow: inset 0 0 0 1.5px var(--teal), inset 0 0 0 5px var(--bg-1), inset 0 0 0 9px var(--teal); }
.mode.locked { opacity: .75; }
.mode .lk { display: inline-flex; align-items: center; gap: 6px; }
.mode .lk svg { width: 13px; height: 13px; }

.personas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 20px; }
.persona .core { padding: 28px 28px 30px; height: 100%; display: grid; gap: 14px; align-content: start; }
.persona .who { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: var(--ink-hi); }
.persona .av { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--teal); background: radial-gradient(circle at 30% 20%, rgb(var(--teal-rgb) / .25), rgb(var(--teal-rgb) / .04) 70%); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .25); }
.persona .av svg { width: 20px; height: 20px; }
.persona .th { font-size: 16px; color: var(--ink-2); line-height: 1.6; padding-inline-start: 14px; border-inline-start: 2px solid rgb(var(--rim-rgb) / calc(.18 * var(--rim-k))); }
.persona .th small { display: block; font-size: 12.5px; color: var(--ink-3); margin-block-end: 4px; }
.persona .an { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--ink); line-height: 1.6; }
.persona .an svg { flex: none; width: 18px; height: 18px; color: var(--teal); margin-block-start: 4px; }
.notfor { margin-block-start: 26px; display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 22px 28px; border-radius: 20px; color: var(--ink-2); font-size: 17px; background: rgb(var(--glass-rgb) / calc(.02 * var(--glass-k))); box-shadow: inset 0 0 0 1px var(--line-2); }
.notfor b { color: var(--ink-hi); font-weight: 600; }

/* =========================================================================
   PROOF
   ========================================================================= */
.proof-hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
.proof-hero:has(> .quote) { grid-template-columns: 1.15fr .85fr; }
.bignum .core { padding: 46px 50px 44px; height: 100%; display: grid; align-content: space-between; gap: 30px; overflow: hidden; }
.bignum .core::before { content: ''; position: absolute; inset-inline-end: -120px; inset-block-start: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--teal-rgb) / .22), transparent 70%); filter: blur(10px); }
.bn-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; }
.bn { position: relative; display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.bn .big { font-size: 236px; line-height: .78; font-weight: 200; letter-spacing: -0.045em; direction: ltr; unicode-bidi: isolate;
  background: linear-gradient(180deg, #ffffff 10%, #9ffcec 55%, #1fa9c9 110%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgb(var(--glow-rgb) / calc(.25 * var(--glow-k)))); padding-block: 14px 6px; }
.bn .of { display: grid; gap: 6px; padding-block-end: 10px; }
.bn .of b { font-size: 30px; font-weight: 300; color: var(--ink-hi); line-height: 1.2; }
.bn .of strong { font-weight: 700; color: var(--ink-hi); }
.bn .of span { font-size: 16px; color: var(--ink-2); }
.denom { position: relative; display: flex; align-items: flex-start; gap: 12px; padding-block-start: 18px; border-block-start: 1px solid var(--line-2); font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.denom svg { flex: none; width: 16px; height: 16px; margin-block-start: 3px; color: var(--teal); }
.quote .core { padding: 44px 44px 36px; height: 100%; display: grid; align-content: space-between; gap: 26px; background: linear-gradient(180deg, rgba(27, 51, 88, .85), rgba(15, 35, 61, .95)); }
.quote blockquote { margin: 0; position: relative; font-size: 27px; line-height: 1.5; font-weight: 300; color: var(--ink-hi); text-wrap: pretty; }
.quote blockquote b { font-weight: 600; color: var(--teal-tx-hi); }
.quote figcaption { display: grid; gap: 12px; }
.quote .by { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.quote .by .mk { width: 40px; height: 40px; border-radius: 12px; flex: none; background: radial-gradient(circle at 30% 25%, rgba(160,255,240,.55), transparent 45%), conic-gradient(from 200deg, rgb(var(--teal-rgb) / .55), rgb(var(--cyan-rgb) / .18), rgb(var(--violet-rgb) / .25), rgb(var(--teal-rgb) / .55)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 20px; }
.stat .core { padding: 32px 32px 28px; height: 100%; display: grid; align-content: space-between; gap: 22px; }
.stat .v { font-size: 76px; line-height: .95; font-weight: 250; letter-spacing: -0.03em; color: var(--ink-hi); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stat .v .ltr { background: linear-gradient(180deg, #fff, #8ffbe8 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .v small { font-size: 16px; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pair > div { display: grid; gap: 6px; align-content: start; }
.pair .v { font-size: 64px; }
.pair .cap { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.stat .lbl { font-size: 18px; font-weight: 500; color: var(--ink-hi); }
.stat .scope { display: inline-flex; margin-block-start: 6px; }
.stat .denom { font-size: 13.5px; }
.proof-note { margin-block-start: 34px; text-align: center; font-size: 14px; color: var(--ink-3); }

/* =========================================================================
   PRICING
   ========================================================================= */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan .core { padding: 34px 32px 32px; height: 100%; display: flex; flex-direction: column; gap: 18px; }
.plan .pn { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 700; color: var(--ink-hi); }
.plan .pn .lat { direction: ltr; letter-spacing: .01em; }
.plan .pr { display: flex; align-items: baseline; gap: 10px; }
.plan .pr .amt { direction: ltr; unicode-bidi: isolate; font-size: 64px; font-weight: 250; letter-spacing: -0.03em; line-height: 1; color: var(--ink-hi); }
.plan .pr .per { color: var(--ink-3); font-size: 15px; }
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.plan li > span { flex: 1; }
.plan li svg { flex: none; width: 17px; height: 17px; margin-block-start: 3px; color: var(--teal); }
.plan li .chip { margin-inline-start: 4px; height: 22px; font-size: 11.5px; }
/* v74 (31/10/2026, Aviel): each plan says who it is for, the higher plans start from "everything in …", and each line
   leads with the outcome (b) and explains it underneath (.li-sub) */
.plan ul:has(.li-sub) { gap: 14px; }
.plan .plan-for { margin: -8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.plan .plan-inc { margin: 2px 0 -2px; font-size: 13.5px; font-weight: 700; color: var(--teal); }
.plan li b { font-weight: 700; color: var(--ink-hi); }
.plan li .li-sub { display: block; margin-block-start: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.plan .btn { margin-block-start: auto; align-self: stretch; justify-content: space-between; }
.plan.rec { position: relative; }
.plan.rec .shell { position: relative; overflow: hidden; background: none; box-shadow: none; }
.plan.rec .shell::before { content: ''; position: absolute; inset: -60%; z-index: 0; background: conic-gradient(from var(--ang, 0deg), rgb(var(--teal-rgb) / 0) 0deg, rgb(var(--teal-rgb) / .95) 50deg, rgb(var(--cyan-rgb) / .6) 100deg, rgb(var(--teal-rgb) / 0) 160deg, rgb(var(--teal-rgb) / 0) 360deg); animation: ang 6s linear infinite; }
.plan.rec .shell::after { content: ''; position: absolute; inset: 1.5px; z-index: 0; border-radius: calc(var(--r-2xl) - 1.5px); background: var(--bg-2); }
.plan.rec .core { z-index: 1; background: linear-gradient(180deg, rgba(18, 66, 80, .85), rgba(14, 37, 64, .96)); }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ang { to { --ang: 360deg; } }
.rec-badge { display: inline-flex; align-items: center; height: 26px; padding-inline: 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--teal-ink); background: linear-gradient(180deg, #8ffbe8, var(--teal-2)); }
.price-strips { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-block-start: 20px; }
.strip .core { padding: 28px 32px; height: 100%; display: grid; gap: 8px; align-content: center; }
.strip h3, .strip h4 { margin: 0; font-size: 21px; font-weight: 600; color: var(--ink-hi); }
.strip p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.strip .chip { justify-self: start; margin-block-end: 6px; }
.seats { margin-block-start: 26px; text-align: center; font-size: 14.5px; color: var(--ink-3); }
.seats span { direction: ltr; unicode-bidi: isolate; }

/* =========================================================================
   FINAL CTA
   ========================================================================= */
#cta { padding-block: 200px 600px; overflow: hidden; }
.cta-inner { position: relative; z-index: 3; display: grid; justify-items: center; text-align: center; gap: 26px; }
.cta-inner .h2 { font-size: clamp(46px, 6vw, 92px); }
.cta-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-block-start: 8px; }
.closing { font-size: 15px; color: var(--ink-3); letter-spacing: .02em; }
.closing b { color: var(--teal-tx); font-weight: 600; }
.planet { position: absolute; z-index: 1; width: 1700px; max-width: none; aspect-ratio: 1; left: 50%; inset-block-end: -1250px; transform: translateX(-50%); border-radius: 50%; }
.planet .pl-body { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(60% 18% at 50% 0%, rgba(170, 255, 242, .38), transparent 70%),
    radial-gradient(rgb(var(--rim-rgb) / calc(.42 * var(--rim-k))) 1.1px, transparent 1.8px) 0 0 / 12px 12px,
    radial-gradient(circle at 50% 14%, #154165, #0b2038 55%);
  box-shadow: 0 -2px 0 rgba(170, 255, 242, .55), 0 -24px 110px rgb(var(--glow-rgb) / calc(.40 * var(--glow-k))), inset 0 36px 90px rgb(var(--teal-rgb) / .26); }
.planet .pl-atmo { position: absolute; inset: -2.4%; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 95.2%, rgb(var(--teal-rgb) / .55) 97.4%, rgb(var(--cyan-rgb) / .14) 99%, transparent 100%); filter: blur(7px); }
.planet .pl-flare { position: absolute; inset-inline-start: 50%; inset-block-start: -2px; width: 900px; height: 3px; margin-inline-start: -450px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(160,255,240,.6) 30%, transparent 70%); filter: blur(.6px); box-shadow: 0 0 50px 8px rgb(var(--glow-rgb) / calc(.32 * var(--glow-k))); }
.planet .pl-flare::after { content: ''; position: absolute; left: 50%; top: 50%; width: 240px; height: 80px; margin: -40px 0 0 -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200,255,245,.55), transparent); }
.motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.motes i { position: absolute; inset-block-end: 22%; width: 3px; height: 3px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px rgb(var(--glow-rgb) / var(--glow-k)); opacity: 0; animation: mote 7s var(--ease-out) infinite; }
@keyframes mote { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-420px); opacity: 0; } }

/* =========================================================================
   THE LIGHT ARC
   night (hero, 01) → dawn behind the product (02) → the engine before
   dawn (03) → first light (04) → morning (05) → daylight for the numbers
   and the prices (06, 07) → dusk → the next sunrise (CTA).
   ========================================================================= */
#ladder { background:
  radial-gradient(1100px 520px at 84% 0%, rgba(255, 190, 130, .07), transparent 70%),
  linear-gradient(180deg, var(--bg-1) 0%, #0e284a 55%, #112d52 100%); }
#teams { background:
  radial-gradient(900px 520px at 20% 10%, rgba(255, 196, 140, .06), transparent 70%),
  linear-gradient(180deg, #112d52 0%, #133159 60%, #14345d 100%); }

/* daylight: the sky brightens over ~520px, holds, then turns to dusk before the final scene */
.daylight {
  /* its tokens come from the day set (see :root[data-mode="day"], .daylight) */
  --teal-d: #057d6f; --teal-d2: #0b6f8c;
  position: relative; isolation: isolate; color: var(--ink); padding-block: 360px 330px; margin-block-start: -1px;
  background:
    radial-gradient(820px 520px at 84% 470px, rgba(255, 214, 160, .55), transparent 72%),
    radial-gradient(980px 640px at 8% 900px, rgba(150, 236, 226, .30), transparent 72%),
    radial-gradient(900px 600px at 70% calc(100% - 900px), rgba(255, 220, 190, .32), transparent 72%),
    linear-gradient(180deg, #14345d 0px, #123457 90px, #2c6b8f 190px, #73aec4 280px, #bfe0e8 370px, #e6f2f3 470px, #f0f6f4 640px,
      #f3f5ef 62%, #f6f0e6 calc(100% - 520px), #f2dfcd calc(100% - 400px), #d9a99a calc(100% - 300px), #8d6378 calc(100% - 205px),
      #3b2c4c calc(100% - 115px), #17294c calc(100% - 40px), #0d2138 100%);   /* ends on the night page colour (its own --bg-1 is the day one) */
}
.daylight .sec { padding-block: 120px; }
.daylight .sec::before { display: none; }
.daylight .ambient { display: none; }
.daylight .h2 { background: linear-gradient(180deg, #0b1b2e 25%, #27445f 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.daylight .h2 .hl { background: linear-gradient(100deg, #047d70 0%, #0b8f86 45%, #0b6f9c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
.daylight .lead { color: var(--ink-2); }
.daylight .eyebrow { color: var(--ink-2); border-color: rgba(16, 48, 80, .14); background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 #fff, 0 6px 20px -12px rgba(20, 60, 90, .35); }
.daylight .eyebrow .idx { color: var(--teal-d); }
.daylight .eyebrow .dot { background: #0aa58f; box-shadow: 0 0 8px rgba(10, 165, 143, .6); }
.daylight .shell { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.42)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 0 rgba(16,48,80,.06), 0 40px 80px -46px rgba(20, 60, 100, .45); }
.daylight .core { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247, 250, 250, .86)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(16, 48, 80, .07); }
.daylight .glow-card::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(10, 165, 143, .75), rgba(11, 111, 156, .3) 35%, transparent 62%); }
.daylight .glow-card::after { background: radial-gradient(520px circle at var(--mx) var(--my), rgba(10, 165, 143, .06), transparent 55%); }
.daylight .chip { color: var(--ink-2); border-color: rgba(16, 48, 80, .16); background: rgba(255,255,255,.7); }
.daylight .chip-live { color: #046b60; border-color: rgba(5, 125, 111, .32); background: rgba(10, 165, 143, .09); }
.daylight .chip-live::before { background: #0aa58f; box-shadow: 0 0 6px rgba(10, 165, 143, .55); }
.daylight .chip-soon { color: #5a6e85; border-color: rgba(90, 110, 133, .45); background: transparent; }
.daylight .chip-draft { color: #9a5b10; border-color: rgba(176, 110, 24, .45); background: rgb(var(--amber-rgb) / .14); }
.daylight .chip-draft::before { background: #d08a2a; box-shadow: none; }
.daylight .denom { color: var(--ink-3); border-color: var(--line-2); }
.daylight .denom svg { color: var(--teal-d); }
.daylight .proof-note, .daylight .seats { color: var(--ink-3); }

/* proof in daylight: one huge number, one big quote */
.daylight .bignum .core::before { background: radial-gradient(closest-side, rgba(255, 206, 150, .55), transparent 70%); filter: blur(14px); }
.daylight .bn .big { font-size: 300px; background: linear-gradient(180deg, #0b1b2e 15%, #0b5f72 70%, #0aa58f 115%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
.daylight .bn .of b { color: var(--ink); font-size: 32px; }
.daylight .bn .of span { color: var(--ink-2); font-size: 16.5px; }
.daylight .bn .of strong { color: var(--ink); font-weight: 700; }
.quote .q-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.quote .q-mark { font-family: Georgia, 'Times New Roman', serif; font-size: 150px; line-height: .72; font-weight: 700; height: 76px; color: rgb(var(--teal-rgb) / .35); }
.daylight .quote .core { background: linear-gradient(180deg, #16375a, #0f2841); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.1 * var(--rim-k))); color: var(--ink-hi); }
.daylight .quote .core::after { display: none; }
.daylight .quote blockquote { color: #eef6ff; font-size: 33px; line-height: 1.42; font-weight: 300; }
.daylight .quote blockquote b { color: var(--teal-tx); font-weight: 600; }
.daylight .quote .by { color: #b2c3d8; font-size: 15px; line-height: 1.45; }
.daylight .quote .by b { color: var(--ink-hi); font-weight: 600; }
.daylight .quote .q-mark { color: rgb(var(--teal-rgb) / .55); }
.daylight .quote .chip-draft { color: var(--amber); border-color: rgb(var(--amber-rgb) / .55); background: rgb(var(--amber-rgb) / .08); }
.daylight .quote .chip-draft::before { background: var(--amber); }
/* 01/11/2026: two approved quotes share the proof's quote column, each a compact card in the height the number already takes */
.proof-hero:has(> .quotes) { grid-template-columns: 1.15fr .85fr; }
.quotes { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.quotes .quote .core { padding: 30px 36px 26px; gap: 14px; }
.quotes .quote .q-mark { font-size: 96px; height: 46px; }
.quotes .quote blockquote { font-size: 24px; }
.daylight .quotes .quote blockquote { font-size: 27px; }
.daylight .stat .v { color: var(--ink); }
.daylight .stat .v .ltr { background: linear-gradient(180deg, #0b1b2e 20%, #0b8f86 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.daylight .stat .v small { color: var(--ink-2); }
.daylight .stat .lbl { color: var(--ink); }
.stat .scope-l { margin-block-start: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 320px; }

/* pricing in daylight: white plans, the recommended plan stays a piece of the night */
.daylight .plan .pn { color: var(--ink); }
.daylight .plan .pr .amt { color: var(--ink); font-weight: 300; }
.daylight .plan .pr .per { color: var(--ink-3); }
.daylight .plan li { color: var(--ink-2); }
.daylight .plan li svg { color: var(--teal-d); }
.daylight .plan li b { color: var(--ink); }
.daylight .plan .plan-for, .daylight .plan li .li-sub { color: var(--ink-3); }
.daylight .plan .plan-inc { color: var(--teal-d); }
.daylight .plan.rec li b { color: var(--ink-hi); }
.daylight .plan.rec .plan-for, .daylight .plan.rec li .li-sub { color: #9fb2c9; }
.daylight .plan.rec .plan-inc { color: var(--teal); }
.daylight .btn-glass { color: var(--ink); background: linear-gradient(180deg, #ffffff, #f1f5f6); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(16, 48, 80, .14), 0 14px 30px -18px rgba(20, 60, 100, .45); }
.daylight .btn-glass .ico { background: rgba(16, 48, 80, .06); box-shadow: inset 0 0 0 1px rgba(16, 48, 80, .08); }
.daylight .plan.rec .core { background: linear-gradient(180deg, #16415f, #0e2641); }
.daylight .plan.rec .pn, .daylight .plan.rec .pr .amt { color: var(--ink-hi); }
.daylight .plan.rec .pr .per, .daylight .plan.rec li { color: #b2c3d8; }
.daylight .plan.rec li svg { color: var(--teal); }
.daylight .plan.rec li.soon-li, .daylight .plan.rec li.soon-li svg { color: var(--soon); }
.daylight .plan.rec .chip-soon { color: var(--soon); border-color: rgb(var(--soon-rgb) / .45); }
.daylight .plan.rec .shell { box-shadow: 0 50px 100px -50px rgba(5, 40, 60, .7); }
.daylight .strip h3, .daylight .strip h4 { color: var(--ink); }
.daylight .strip p { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .daylight .btn-glass:hover { background-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(16, 48, 80, .26), 0 18px 34px -18px rgba(20, 60, 100, .5); }
}

/* the next sunrise (final CTA): the planet again, now with the sun at its rim */
.planet .pl-sun { position: absolute; left: 50%; transform: translateX(-50%); inset-block-start: -150px; width: 1000px; height: 330px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 230, .95), rgba(255, 204, 146, .55) 26%, rgba(255, 150, 112, .22) 52%, rgba(200, 90, 130, .08) 70%, transparent 84%); filter: blur(6px); }
.planet .pl-flare { background: radial-gradient(closest-side, #fff, rgba(255, 226, 190, .8) 30%, transparent 70%); box-shadow: 0 0 60px 10px rgba(255, 190, 130, .36); }
#cta { background: radial-gradient(1200px 560px at 50% calc(100% - 520px), rgba(255, 170, 120, .14), transparent 70%), var(--bg-1); }
#cta::before { display: none; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot { position: relative; z-index: 4; background: rgb(var(--scrim-rgb) / .92); border-block-start: 1px solid var(--line); padding-block: 64px 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot h5, .foot .fh { margin: 0 0 14px; font-size: 13px; line-height: 1.4; letter-spacing: .02em; color: var(--ink-4); font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { color: var(--ink-2); font-size: 15px; transition: color .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink-hi); } }
.foot .tag { margin: 12px 0 0; color: var(--ink-3); font-size: 15px; }
.foot-note { margin-block-start: 48px; padding-block-start: 24px; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink-4); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1360px) {
  .call { font-size: 12px; }
  .opp { width: 248px; }
  .opp--focus { width: 292px; }
  .opp[data-card="2"], .opp[data-card="3"] { width: 236px; }
  .opp[data-card="0"] { inset-inline-start: 24px; }
  .opp[data-card="1"] { inset-inline-end: 26px; }
  .opp[data-card="4"] { inset-inline-end: 22px; }
  .opp[data-card="2"] { inset-inline-start: 54px; }
  .opp[data-card="3"] { inset-inline-end: 64px; }
}
@media (max-width: 1180px) {
  .opp[data-card="2"], .opp[data-card="3"] { display: none; }
  .call, .wire { display: none !important; }
  .brain-grid { grid-template-columns: 1fr; }
  .engine { width: min(520px, 100%); order: -1; }
  .stairs { transform: none; height: auto; flex-wrap: wrap; }
  .stair { height: var(--h); }
  .win[data-slot="1"] { transform: translate3d(-24%, 3%, -380px) rotateY(15deg); }
  .win[data-slot="2"] { transform: translate3d(24%, 3%, -380px) rotateY(-15deg); }
}
@media (max-width: 900px) {
  :root { --gutter: 16px; --sec-y: 104px; }
  body { font-size: 16px; }
  .announce { height: 38px; font-size: 12.5px; gap: 9px; padding-inline: 12px; }
  .announce .hide-m { display: none; }
  .nav { inset-block-start: 50px; height: 56px; padding-inline: 16px 6px; width: calc(100% - 24px); }
  .nav-login { display: none; }
  .nav-burger { display: block; }
  .nav .btn-sm { height: 38px; padding-inline: 14px; font-size: 13.5px; gap: 0; }
  .nav .btn-sm .ico { display: none; }
  .nav-end { gap: 6px; }
  .nav-burger { width: 40px; height: 40px; }
  .nav-burger i { inset-inline-start: 11px; }
  .nav-burger i:nth-child(1) { inset-block-start: 15px; } .nav-burger i:nth-child(2) { inset-block-start: 23px; }
  .wordmark { font-size: 15px; letter-spacing: .02em; }
  .brand .adam { display: none; }

  .hero { height: var(--hero-h, auto); max-height: none; min-height: 0; padding-block-end: 0; }
  .hero-inner { height: auto; padding-block-start: 126px; width: calc(100% - 32px); }
  .kicker { font-size: 13px; padding-inline: 12px 14px; }
  .hero-title { font-size: 44px; line-height: 1.06; margin-block-start: 22px; }
  .hero-sub { font-size: 16.5px; line-height: 1.7; margin-block-start: 18px; }
  .hero-ctas { flex-direction: column; align-self: stretch; gap: 10px; margin-block-start: 26px; }
  .hero-ctas .btn { justify-content: space-between; }
  .hero-micro { font-size: 12.5px; line-height: 1.9; }
  .hero-micro .sep { margin-inline: 6px; }
  .hero-proof { font-size: 12.5px; padding: 8px 14px 8px 12px; border-radius: 16px; text-align: start; }
  .hero-cards { position: relative; inset: auto; height: 396px; margin-block-start: 78px; perspective: none; }
  .opp { animation-name: oppIn, bob; --bob: 4px; }
  .opp[data-card="1"], .opp[data-card="4"] { display: none; }
  .opp[data-card="0"] { inset-inline: 0; margin-inline: auto; inset-block-start: 0; width: calc(100% - 32px); --ry: 0deg; --tz: 0px; }
  .opp[data-card="2"], .opp[data-card="3"] { display: block; width: calc(50% - 22px); inset-block-start: 262px; --ry: 0deg; --tz: 0px; }
  .opp[data-card="2"] { inset-inline-start: 16px; }
  .opp[data-card="3"] { inset-inline-end: 16px; inset-block-start: 274px; }
  .opp[data-card="2"] .opp-why, .opp[data-card="3"] .opp-why, .opp[data-card="2"] .opp-person, .opp[data-card="3"] .opp-person,
  .opp[data-card="2"] .date, .opp[data-card="3"] .date { display: none; }
  .opp[data-card="2"] .opp-co, .opp[data-card="3"] .opp-co { font-size: 14px; }
  .opp[data-card="2"] .opp-top, .opp[data-card="3"] .opp-top { margin-block-end: 6px; }
  .opp .opp-in { padding: 13px 14px 12px; }
  .opp .edge { inset-block: auto -1px; inset-inline: 22% !important; width: auto; height: 2px; transform: scaleX(calc(.55 + var(--hit) * .45));
    background: linear-gradient(90deg, transparent, rgb(var(--teal-rgb) / .95) 28%, #f2fffc 50%, rgb(var(--teal-rgb) / .95) 72%, transparent); }
  .fan-label { position: absolute; inset-block-end: 0; inset-inline: 0; justify-content: center; font-size: 12px; }
  .globe-anchor, .hero-fallback { width: 700px; height: 700px; inset-block-start: 560px; bottom: auto; }
  .hero-fallback { height: auto; }
  .israel-tag { display: none; }   /* it lands on the focus card or the proof pill here; the glowing beacon still marks Israel */

  .sec-head { margin-block-end: 56px; gap: 16px; }
  .lead { font-size: 17px; }
  .h2 { font-size: 35px; }
  #signals { padding-block: 150px 110px; }
  .src { height: 54px; font-size: 16px; border-radius: 16px; }
  .src .gl { width: 34px; height: 34px; border-radius: 11px; }
  .proofline { grid-template-columns: 1fr; gap: 22px; margin-block-start: 80px; }
  .pl-wire, .pl-link { display: none; }
  .pl-cards { padding-inline-end: 0; }
  .pl-copy h3 { font-size: 27px; }

  /* tour: phones first on a phone, the tab bar scrolls (with a cue) */
  #tour { padding-block: 110px 70px; }
  .tabwrap { margin-inline: calc(var(--gutter) * -1); }
  .tabbar { width: auto; max-width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding-inline: 16px 56px; border-radius: 0; background: none; box-shadow: none;
    -webkit-mask: linear-gradient(270deg, #000 70%, transparent 100%); mask: linear-gradient(270deg, #000 70%, transparent 100%); }
  .tabbar::-webkit-scrollbar { display: none; }
  .tab { height: 42px; padding-inline: 13px 15px; font-size: 14px; flex: none; background: rgb(var(--glass-rgb) / calc(.03 * var(--glass-k))); box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.12 * var(--rim-k))); }
  .tab-cue { display: grid; place-items: center; position: absolute; inset-inline-end: 10px; inset-block-start: 50%; width: 30px; height: 30px; margin-block-start: -15px; border-radius: 50%;
    color: var(--ink); background: rgba(15, 37, 64, .92); box-shadow: inset 0 0 0 1px rgb(var(--rim-rgb) / calc(.2 * var(--rim-k))); pointer-events: none; animation: cue 1.6s var(--ease-io) infinite alternate; }
  .tab-cue svg { width: 15px; height: 15px; }
  @keyframes cue { from { transform: translateX(0); } to { transform: translateX(-5px); } }
  .tour-copy { height: 190px; margin-block: 26px 0; }
  .tour-copy h3 { font-size: 24px; }
  .tour-copy p { font-size: 15.5px; }
  .tour-stage { padding-block: 24px 130px; perspective: 1400px; }
  .stack { width: calc(100% - 32px); transform: none !important; }
  .win { padding: 0 5px 5px; border-radius: 11px; }
  .win-bar { height: 22px; gap: 4px; padding-inline: 4px; }
  .win-bar i { width: 6px; height: 6px; }
  .win-url { height: 15px; font-size: 8.5px; padding-inline: 7px; gap: 4px; }
  .win-url svg { width: 8px; height: 8px; }
  .win-screen { border-radius: 6px; }
  .win[data-slot="1"], .win[data-slot="2"] { opacity: 0; }
  .hot::after { display: none; }
  .phones { inset: 0 0 110px; gap: 14px; }
  .phone { width: 46%; padding: 6px; border-radius: 30px; }
  .phone .ph-screen { border-radius: 25px; }
  .phone .ph-status { padding-inline: 14px 12px; }
  .phone .ph-status b { font-size: 8.5px; }
  .phone .ph-ic { height: 7px; } .phone .ph-ic i { width: 2px; }
  .phone .island { width: 46px; height: 13px; inset-block-start: 10px; margin-inline-start: -23px; }
  .phone:nth-child(1), .phone:nth-child(2) { transform: none; }
  #tour[data-tab="4"] .tour-stage { min-height: 470px; }
  #tour[data-tab="4"] .win { opacity: 0; }
  .stack .ground { width: 1600px; height: 500px; border-radius: 800px 800px 0 0 / 70px 70px 0 0; inset-block-start: 86%; transform: translateX(-50%); }
  .stack .ground .rim { width: 560px; height: 64px; inset-block-start: -32px; }
  .tour-foot { margin-block-start: -20px; }

  .brain-grid { gap: 36px; }
  .engine { width: min(400px, 100%); }
  .eg-gate { font-size: 11px; height: 24px; right: 0; }
  .eg-person { font-size: 12px; padding: 5px 10px 5px 6px; gap: 7px; }
  .eg-person .av { width: 24px; height: 24px; }
  .eg-draft { padding: 11px 12px; width: 92%; }
  .eg-draft b { font-size: 13.5px; }
  .eg-draft > span { font-size: 12px; }
  .eg-readout .who { display: none; }
  .eg-planet { display: none; }
  .eg-out { font-size: 11px; left: 4px; top: 61%; }
  .fcard .ft .mono { display: none; }
  .step { grid-template-columns: 40px 1fr; gap: 16px; padding-block: 12px; }
  .step .node { width: 40px; height: 40px; border-radius: 12px; }
  .steps::before { inset-inline-start: 19px; }
  .steps::after { inset-inline-start: 17px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 15px; }
  .loopback { margin-inline-start: 56px; }

  .stairs { display: grid; grid-template-columns: 1fr; gap: 8px; height: auto; transform: none; }
  .stair { width: 100%; height: auto !important; }
  .stair .f { position: relative; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; }
  .stair .t, .stair .s { display: none; }
  .stair .st { margin-block-start: 0; margin-inline-start: auto; }
  .today-mark { display: none; }
  .ladder-cols { grid-template-columns: 1fr; margin-block-start: 50px; }
  .lcol .core { padding: 24px 20px; }
  .lrow b { font-size: 16px; }

  .statement { font-size: 28px; }
  .teams-head { margin-block: 90px 46px; }
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .bento > .shell { grid-column: auto !important; grid-row: auto !important; }
  .bento .core { padding: 24px 20px 24px; }
  .bento h3 { font-size: 23px; }
  .personas { grid-template-columns: 1fr; gap: 14px; }
  .chain { grid-template-columns: repeat(5, 1fr); }
  .cnode { font-size: 11.5px; }
  .cnode .bub { width: 38px; height: 38px; }
  .cnode:not(:last-child)::after { inset-block-start: 19px; }
  .notfor { flex-direction: column; gap: 6px; padding: 18px; font-size: 15.5px; }

  .daylight { padding-block: 260px 250px; }
  .daylight .sec { padding-block: 80px; }
  .proof-hero, .stats, .plans, .price-strips { grid-template-columns: 1fr; gap: 14px; }
  .proof-hero:has(> .quote) { grid-template-columns: 1fr; }   /* 01/11: the quote card stacks under the number (the :has rule above outranks the line before) */
  .bignum .core { padding: 28px 22px; }
  .bn .big, .daylight .bn .big { font-size: 150px; }
  .bn .of b, .daylight .bn .of b { font-size: 24px; }
  .quote .core { padding: 26px 22px; }
  .quote .q-mark { font-size: 110px; height: 56px; }
  .quote blockquote, .daylight .quote blockquote { font-size: 23px; }
  .proof-hero:has(> .quotes) { grid-template-columns: 1fr; }
  .quotes { grid-template-rows: none; gap: 14px; }
  .quotes .quote .core { padding: 26px 22px; }
  .quotes .quote .q-mark { font-size: 90px; height: 44px; }
  .quotes .quote blockquote, .daylight .quotes .quote blockquote { font-size: 22px; }
  .stat .v { font-size: 60px; }
  .plan .core { padding: 26px 22px; }
  .plan .pr .amt { font-size: 54px; }

  #cta { padding-block: 120px 420px; }
  .cta-inner .h2 { font-size: 46px; }
  .cta-ctas { flex-direction: column; align-self: stretch; padding-inline: 16px; }
  .cta-ctas .btn { justify-content: space-between; }
  .planet { width: 900px; inset-block-end: -640px; }
  .planet .pl-flare { width: 620px; margin-inline-start: -310px; }
  .planet .pl-sun { width: 460px; height: 200px; inset-block-start: -80px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}

/* =========================================================================
   REDUCED MOTION / STATIC CAPTURE
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .track { animation: none !important; }
}
html.is-static .track { animation-play-state: paused; }
html.is-static .opp, html.is-static .hero-title .l1, html.is-static .hero-title .l2, html.is-static .kicker, html.is-static .hero-sub, html.is-static .hero-ctas,
html.is-static .hero-micro, html.is-static .hero-proof, html.is-static .nav, html.is-static .fan-label { animation-delay: -10s, 0s !important; }

/* one section at a time (?only=…): the daylight sections sit on plain daylight, without the long transitions */
html.is-only .daylight { padding-block: 0;
  background: radial-gradient(820px 520px at 84% 120px, rgba(255, 214, 160, .55), transparent 72%), radial-gradient(980px 640px at 8% 60%, rgba(150, 236, 226, .30), transparent 72%), linear-gradient(180deg, #e9f3f4, #f3f5ef 60%, #f6f0e6); }
html.is-only .daylight .sec { padding-block: 150px; }

/* =========================================================================
   MODE TOGGLE ("☾ לילה" / "☀ יום"): one <button aria-pressed> in the nav.
   The thumb slides on the inline axis (right = night, left = day in RTL).
   ========================================================================= */
.mode-toggle {
  position: relative; isolation: isolate; flex: none;
  display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center;
  height: 40px; padding: 3px; margin: 0; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ink-3);
  background: rgb(var(--glass-rgb) / calc(.045 * var(--glass-k)));
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .3s var(--ease-out);
}
.mode-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 999px; }
.mode-toggle .mt-thumb {
  position: absolute; z-index: 0; inset-block: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--teal-rgb) / .2), rgb(var(--teal-rgb) / .07));
  box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .45), 0 0 18px -6px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k)));
  transition: inset-inline-start .55s var(--ease);
}
.mode-toggle .mt-opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding-inline: 11px 13px; transition: color .35s var(--ease-out); }
.mode-toggle .mt-ic { font-size: 14px; line-height: 1; font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif; transition: color .35s var(--ease-out); }
:root:not([data-mode="day"]) .mode-toggle .mt-n, :root[data-mode="day"] .mode-toggle .mt-d { color: var(--ink-hi); }
:root:not([data-mode="day"]) .mode-toggle .mt-n .mt-ic { color: var(--teal); }
:root[data-mode="day"] .mode-toggle .mt-thumb { inset-inline-start: 50%; background: linear-gradient(180deg, #ffffff, #f1faf7); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .42), 0 4px 12px -4px rgba(18, 38, 62, .32); }
:root[data-mode="day"] .mode-toggle .mt-d .mt-ic { color: #c97f1e; }
@media (hover: hover) and (pointer: fine) { .mode-toggle:hover { box-shadow: inset 0 0 0 1px var(--line-3); } .mode-toggle:hover .mt-opt { color: var(--ink-hi); } }

/* the same toggle, full size, at the end of the mobile menu */
.menu .menu-mode { justify-self: start; height: 46px; margin-block-start: 22px; font-size: 15px; opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease), transform .7s var(--ease), box-shadow .3s var(--ease-out); transition-delay: calc(var(--i) * 60ms + 80ms); }
.menu .menu-mode .mt-opt { height: 40px; padding-inline: 16px 18px; }
.menu .menu-mode .mt-ic { font-size: 16px; }
html.menu-open .menu .menu-mode { opacity: 1; transform: none; }
.menu { visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }   /* closed: nothing in it takes focus */
html.menu-open .menu { visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }

/* the switch itself: a soft circular wipe from the button (View Transitions, Chrome / Edge / Safari 18) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: modeWipe .72s var(--ease-io) both; }
@keyframes modeWipe { from { clip-path: circle(0 at var(--vt-x, 80%) var(--vt-y, 60px)); } to { clip-path: circle(160vmax at var(--vt-x, 80%) var(--vt-y, 60px)); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }

/* =========================================================================
   DAY MODE ("יום")
   Daylight over the same world, not an inverted night:
   - canvas: off-white with a faint sea tint (#f4f7f5), warming to paper at the end of the day
   - type: deep ink-navy; accent: deep teal; the one warm accent (amber) only where the night used amber, and the sun
   - cards: white, 1px ink hairlines, soft navy shadows. No haze, no glow on white, no orbs, no lavender.
   - the globe is a dotted ink/teal sphere with a crisp limb and a graticule (globe.js, palette "day")
   Most of the day comes from the tokens above; these are the components whose material changes.
   ========================================================================= */
[data-mode="day"] body::after { opacity: .045; mix-blend-mode: multiply; filter: invert(1); }   /* film grain becomes a paper grain */
[data-mode="day"] .spotlight { display: none; }
[data-mode="day"] .ambient i { opacity: .28; }

/* type */
[data-mode="day"] .h2 { background-image: linear-gradient(180deg, #0b1b2e 25%, #2a4661 120%); }
[data-mode="day"] .h2 .hl { background-image: linear-gradient(100deg, #056f63 0%, #0a8a80 45%, #0b6f9c 100%); filter: none; }
[data-mode="day"] .eyebrow { background: rgba(255, 255, 255, .78); border-color: rgba(11, 27, 46, .13); box-shadow: inset 0 1px 0 #fff, 0 6px 20px -12px rgba(18, 38, 62, .32); }

/* buttons */
[data-mode="day"] .btn-glass { color: var(--ink); background: linear-gradient(180deg, #ffffff, #f1f5f4); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .14), 0 14px 30px -18px rgba(18, 38, 62, .42); }
[data-mode="day"] .btn-glass .ico { background: rgba(11, 27, 46, .05); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .08); }
@media (hover: hover) and (pointer: fine) {
  [data-mode="day"] .btn-glass:hover { background-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .24), 0 18px 34px -18px rgba(18, 38, 62, .5); }
  [data-mode="day"] .nav-links a:hover { background: rgba(11, 27, 46, .05); }
}

/* cards: white, hairline, soft navy shadow */
[data-mode="day"] .shell { background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .07), 0 1px 0 rgba(11, 27, 46, .04), 0 34px 70px -46px rgba(18, 38, 62, .42); }
[data-mode="day"] .core { background: linear-gradient(180deg, #ffffff, #fbfcfb); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(11, 27, 46, .08); }

/* announcement + nav + mobile menu */
[data-mode="day"] .nav { background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(249, 251, 250, .76)); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .1), 0 18px 44px -26px rgba(18, 38, 62, .4); }
[data-mode="day"] .nav.scrolled { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .12), 0 20px 50px -24px rgba(18, 38, 62, .45); }
[data-mode="day"] .nav-burger { background: rgba(11, 27, 46, .05); }
[data-mode="day"] .menu { background: rgba(244, 247, 245, .95); }

/* ---------- hero: a morning over the same planet ---------- */
[data-mode="day"] .hero { background:
    radial-gradient(900px 560px at 86% -12%, rgba(255, 214, 160, .26), transparent 62%),
    radial-gradient(820px 560px at 8% 4%, rgba(10, 150, 132, .06), transparent 62%),
    linear-gradient(180deg, #eaf2f0 0%, #f1f6f4 52%, var(--bg-1) 100%); }
[data-mode="day"] .hero-vignette { display: none; }
[data-mode="day"] .hero-title .l1 .tx { background-image: linear-gradient(180deg, #0b1b2e 30%, #2c4864 125%); }
[data-mode="day"] .hero-title .l2 .tx { background-image: linear-gradient(100deg, #054f47 0%, #067c6e 36%, #0a8a80 64%, #0b6f9c 100%); filter: none; }
[data-mode="day"] .hero-proof { background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .3), 0 10px 26px -14px rgba(18, 38, 62, .35); }
[data-mode="day"] .hero-fallback { background: radial-gradient(circle at 50% 2%, rgba(255, 214, 160, .5), transparent 22%), radial-gradient(rgba(11, 27, 46, .35) 1.1px, transparent 1.7px) 0 0 / 11px 11px, radial-gradient(circle at 50% 30%, #ffffff, #e6edeb 70%); box-shadow: 0 -1px 0 rgba(11, 27, 46, .4); }
[data-mode="day"] .opp .opp-in {
  background: linear-gradient(180deg, #ffffff, #fbfcfb);
  box-shadow: inset 0 1px 0 #fff,
    0 0 0 1px rgba(11, 27, 46, calc(.1 - var(--hit) * .1)),
    0 0 0 calc(var(--hit) * 1.5px) rgba(10, 150, 132, calc(var(--hit) * .9)),
    0 0 calc(var(--hit) * 34px) rgba(10, 150, 132, calc(var(--hit) * .2)),
    0 26px 50px -28px rgba(18, 38, 62, .42);
}
[data-mode="day"] .opp .opp-in::after { background: linear-gradient(105deg, transparent 30%, rgba(10, 150, 132, .08) 50%, transparent 70%); }
[data-mode="day"] .opp--focus .opp-in { background: linear-gradient(180deg, #e8f6f2, #ffffff 72%); }
[data-mode="day"] .opp .edge { background: linear-gradient(180deg, transparent, rgba(10, 160, 140, .9) 28%, #067c6e 50%, rgba(10, 160, 140, .9) 72%, transparent); box-shadow: 0 0 10px 1px rgba(10, 150, 132, .3); }
[data-mode="day"] .opp-actions span.ok { background: linear-gradient(180deg, #0b8274, #066a5f); }
[data-mode="day"] .israel-tag { color: #055a50; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .45), 0 6px 16px -8px rgba(18, 38, 62, .3); }

/* ---------- 01 signals ---------- */
[data-mode="day"] .src { background: #ffffff; box-shadow: 0 0 0 1px rgba(11, 27, 46, .09), 0 12px 26px -20px rgba(18, 38, 62, .4); }
[data-mode="day"] .evc { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .09); }
[data-mode="day"] .pl-card { background: #ffffff; box-shadow: 0 0 0 1px rgba(11, 27, 46, .09), 0 16px 34px -24px rgba(18, 38, 62, .4); }
[data-mode="day"] .pl-link span { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .42), 0 6px 16px -10px rgba(18, 38, 62, .3); }

/* ---------- 02 tour: the product in the morning light ---------- */
[data-mode="day"] #tour { background: linear-gradient(180deg, var(--bg-1) 0%, #f4f4f0 46%, #f5f1ea 78%, #f5f0e9 100%); }
[data-mode="day"] .tabbar { background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .1), 0 12px 30px -22px rgba(18, 38, 62, .35); }
[data-mode="day"] .tour-stage .sky { background:
    radial-gradient(60% 55% at 50% 100%, rgba(255, 228, 196, .42), rgba(255, 212, 170, .14) 34%, transparent 70%),
    radial-gradient(18% 12% at 50% 100%, rgba(255, 247, 232, .8), transparent 70%); }
[data-mode="day"] .stack .ground { background: linear-gradient(180deg, #ffffff 0%, #f1f5f3 10%, var(--bg-1) 40%); box-shadow: 0 -1px 0 rgba(11, 27, 46, .32), 0 -10px 30px rgba(255, 196, 140, .16), 0 -50px 120px rgba(255, 180, 130, .07); }
[data-mode="day"] .stack .ground::before { background: radial-gradient(30% 22% at 50% 0%, rgba(255, 196, 150, .22), transparent 100%), radial-gradient(rgba(11, 27, 46, .17) 1.1px, transparent 1.7px) 0 0 / 13px 13px; }
[data-mode="day"] .stack .ground .rim { background: radial-gradient(closest-side, rgba(255, 242, 220, .8), rgba(255, 216, 172, .26) 34%, transparent 75%); }
[data-mode="day"] .win { background: linear-gradient(180deg, #ffffff 0%, #edf1f0 100%); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .13), inset 0 1px 0 #fff; }
[data-mode="day"] .win[data-slot="1"], [data-mode="day"] .win[data-slot="2"] { filter: saturate(.92) brightness(.97); }
[data-mode="day"] .win[data-slot="3"] { filter: none; }
[data-mode="day"] #tour[data-tab="4"] .win[data-slot="0"] { filter: saturate(.8) brightness(.96); }
[data-mode="day"] #tour[data-tab="4"] .win[data-slot="1"], [data-mode="day"] #tour[data-tab="4"] .win[data-slot="2"] { filter: saturate(.8) brightness(.94); }
[data-mode="day"] .tour-stage .halo { box-shadow: 0 60px 120px -50px rgba(18, 38, 62, .42), 0 -30px 150px -30px rgba(255, 186, 136, .3), 0 0 90px -20px rgba(10, 150, 132, .1); }
[data-mode="day"] .win-bar i { background: #d6dddc; box-shadow: none; }
[data-mode="day"] .win-bar i:first-child { background: #0fae98; box-shadow: none; }
[data-mode="day"] .win-url { background: rgba(11, 27, 46, .04); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .06); }
[data-mode="day"] .win-tone { background: radial-gradient(120% 95% at 50% 32%, transparent 70%, rgba(18, 38, 62, .06) 100%); }
[data-mode="day"] .hot::before { box-shadow: 0 0 0 3px #ffffff, 0 0 0 4.5px rgba(6, 124, 110, .55), 0 2px 10px rgba(18, 38, 62, .3); }
[data-mode="day"] .call { background: linear-gradient(180deg, #ffffff, #f7faf9); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(6, 124, 110, .35), 0 16px 34px -16px rgba(18, 38, 62, .42); }
[data-mode="day"] .phone { background: linear-gradient(160deg, #f6f8f8, #cfd8da 62%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), inset 0 0 0 7px #0b0f14, 0 50px 90px -40px rgba(18, 38, 62, .5), 0 24px 70px -30px rgba(255, 170, 120, .28); }

/* ---------- 03 the engine ---------- */
[data-mode="day"] #brain { background: var(--bg-1); }
[data-mode="day"] .step .node { background: radial-gradient(circle at 30% 20%, rgba(10, 150, 132, .14), #ffffff 70%); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .32), 0 0 0 6px var(--bg-1); }
[data-mode="day"] .eg-gate { background: rgba(255, 255, 255, .94); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .38), 0 6px 18px -10px rgba(18, 38, 62, .3); }
[data-mode="day"] .eg-person { background: linear-gradient(180deg, #eef9f6, #ffffff); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .5), 0 10px 26px -14px rgba(18, 38, 62, .35); }
[data-mode="day"] .eg-draft { background: #ffffff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 27, 46, .12), 0 20px 40px -24px rgba(18, 38, 62, .42); }
[data-mode="day"] #brain[data-step="2"] .eg-gate { box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .85), 0 8px 22px -8px rgba(10, 150, 132, .35); }
[data-mode="day"] #brain[data-step="3"] .eg-person { box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .95), 0 12px 30px -10px rgba(10, 150, 132, .4); }
[data-mode="day"] #brain[data-step="4"] .eg-draft, [data-mode="day"] #brain[data-step="5"] .eg-draft { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(6, 124, 110, .6), 0 18px 40px -22px rgba(10, 150, 132, .45); }

/* ---------- 04 the ladder: still dimensional, in light materials ---------- */
[data-mode="day"] #ladder { background: radial-gradient(1100px 520px at 84% 0%, rgba(255, 196, 140, .12), transparent 70%), linear-gradient(180deg, var(--bg-1) 0%, #f3f5f1 60%, #f5f3ee 100%); }
[data-mode="day"] .stair .f { background: linear-gradient(180deg, #c6ebe2 0%, #e3f5f0 42%, #fafdfc 100%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(6, 124, 110, .42), 0 22px 30px -22px rgba(18, 38, 62, .45); }
[data-mode="day"] .stair .t { background: linear-gradient(180deg, #a9e0d3, #d3f0e9); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .3); }
[data-mode="day"] .stair .s { background: linear-gradient(90deg, #8ac8ba, #67a99c); }
[data-mode="day"] .stair.live .f::after { background: linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 24%); }
[data-mode="day"] .stair.beta .f { background: linear-gradient(180deg, #d9ecf6 0%, #f1f8fc 42%, #ffffff 100%); box-shadow: 0 22px 30px -22px rgba(18, 38, 62, .4); outline-color: rgba(11, 111, 156, .7); }
[data-mode="day"] .stair.beta .t { background: linear-gradient(180deg, #c6e1ef, #e6f2f8); box-shadow: none; }
[data-mode="day"] .stair.beta .s { background: linear-gradient(90deg, #a9cde1, #8db8cf); }
[data-mode="day"] .stair.soon .f { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35)); box-shadow: none; outline-color: rgba(94, 113, 137, .5); }
[data-mode="day"] .stair.soon .t { background: rgba(255, 255, 255, .5); outline-color: rgba(94, 113, 137, .34); }
[data-mode="day"] .stair.soon .s { background: linear-gradient(90deg, rgba(94, 113, 137, .12), rgba(94, 113, 137, .06)); }
[data-mode="day"] .today-mark::before { background: linear-gradient(180deg, rgba(10, 150, 132, 0), #0a8f7e 20%, rgba(10, 150, 132, .15)); box-shadow: none; }
[data-mode="day"] .today-mark span { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .5), 0 8px 20px -10px rgba(18, 38, 62, .35); }
[data-mode="day"] .stair-floor { background: linear-gradient(90deg, transparent, rgba(11, 27, 46, .28), transparent); box-shadow: 0 16px 34px rgba(18, 38, 62, .12); }
[data-mode="day"] .lock-shot { box-shadow: 0 0 0 1px rgba(11, 27, 46, .1), 0 24px 50px -30px rgba(18, 38, 62, .45); }

/* ---------- 05 teams ---------- */
[data-mode="day"] #teams { background: radial-gradient(900px 520px at 20% 10%, rgba(255, 196, 140, .1), transparent 70%), linear-gradient(180deg, #f5f3ee 0%, var(--bg-1) 40%, var(--bg-1) 100%); }
[data-mode="day"] .viz { background: #f4f7f6; box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .07); }
[data-mode="day"] .fcard { background: linear-gradient(180deg, #eaf7f3, #ffffff); box-shadow: inset 0 0 0 1px rgba(6, 124, 110, .42), 0 14px 30px -18px rgba(18, 38, 62, .3); }
[data-mode="day"] .fold { background: #e9eeed; box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .08); }
[data-mode="day"] .mini .mr, [data-mode="day"] .evrow, [data-mode="day"] .role, [data-mode="day"] .mode { background: #ffffff; }
[data-mode="day"] .cnode .bub { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .16); }
[data-mode="day"] .cnode.on .bub { box-shadow: inset 0 0 0 1.5px rgba(6, 124, 110, .75), 0 6px 16px -6px rgba(10, 150, 132, .35); }
[data-mode="day"] .notfor { background: rgba(255, 255, 255, .7); }

/* ---------- 06-07 proof and pricing: midday into the afternoon (the two night pieces stay) ---------- */
[data-mode="day"] .daylight { padding-block: 40px 150px; background:
    radial-gradient(820px 520px at 84% 160px, rgba(255, 214, 160, .3), transparent 72%),
    linear-gradient(180deg, var(--bg-1) 0px, #f5f6f2 40%, #f7f3ec calc(100% - 260px), #f6f0e6 100%); }
[data-mode="day"] .daylight .bignum .core::before { opacity: .42; }
[data-mode="day"] .daylight .plan.rec .shell { box-shadow: 0 50px 100px -50px rgba(18, 38, 62, .55); }
html.is-only[data-mode="day"] .daylight { background: radial-gradient(820px 520px at 84% 120px, rgba(255, 214, 160, .3), transparent 72%), linear-gradient(180deg, #f4f7f5, #f6f4ee 60%, #f7f1e8); }

/* ---------- the next sunrise, in daylight: golden hour over the ink planet ---------- */
[data-mode="day"] #cta { background: radial-gradient(1100px 520px at 50% calc(100% - 520px), rgba(255, 196, 130, .22), transparent 70%), linear-gradient(180deg, #f6f0e6 0%, #f5eee4 55%, #f2e9dc 100%); }
[data-mode="day"] .planet .pl-body {
  background:
    radial-gradient(60% 18% at 50% 0%, rgba(255, 222, 176, .6), transparent 70%),
    radial-gradient(rgba(11, 27, 46, .2) 1.1px, transparent 1.8px) 0 0 / 12px 12px,
    radial-gradient(circle at 50% 14%, #ffffff, #eef2ef 55%);
  box-shadow: 0 -1px 0 rgba(11, 27, 46, .4), 0 -18px 60px rgba(255, 176, 110, .18), inset 0 30px 80px rgba(255, 214, 166, .22); }
[data-mode="day"] .planet .pl-atmo { display: none; }
[data-mode="day"] .planet .pl-sun { background: radial-gradient(closest-side, rgba(255, 244, 222, .9), rgba(255, 206, 140, .42) 28%, rgba(255, 170, 110, .12) 56%, transparent 80%); }
[data-mode="day"] .planet .pl-flare { background: radial-gradient(closest-side, #e2993f, rgba(226, 153, 63, .5) 30%, transparent 70%); box-shadow: none; }
[data-mode="day"] .planet .pl-flare::after { background: radial-gradient(closest-side, rgba(255, 214, 160, .7), transparent); }
[data-mode="day"] .motes i { background: #d08a2a; box-shadow: none; }

/* ---------- footer ---------- */
[data-mode="day"] .foot { background: #edf1ee; }

@media (max-width: 900px) {
  .nav { gap: 6px; padding-inline: 14px 6px; }
  .nav-end { gap: 4px; }
  .nav .btn-sm { padding-inline: 11px; font-size: 13px; }
  .nav-burger { width: 38px; height: 38px; }
  .nav-burger i { inset-inline-start: 10px; }
  .nav-burger i:nth-child(1) { inset-block-start: 14px; } .nav-burger i:nth-child(2) { inset-block-start: 22px; }
  .wordmark { font-size: 13.5px; letter-spacing: .01em; gap: 5px; }
  .nav .mode-toggle { height: 34px; padding: 2px; }
  .nav .mode-toggle .mt-tx { display: none; }
  .nav .mode-toggle .mt-opt { width: 25px; height: 30px; padding: 0; gap: 0; }
  .nav .mode-toggle .mt-ic { font-size: 13px; }
  .nav .mode-toggle .mt-thumb { inset-block: 2px; inset-inline-start: 2px; width: calc(50% - 2px); }
  :root[data-mode="day"] .nav .mode-toggle .mt-thumb { inset-inline-start: 50%; }
  [data-mode="day"] .hero-micro { text-shadow: 0 0 4px var(--bg-1), 0 0 10px var(--bg-1), 0 1px 16px rgba(244, 247, 245, .95); }
  [data-mode="day"] .hero-inner::before { height: 820px; background: radial-gradient(closest-side, rgba(244, 247, 245, .9), rgba(244, 247, 245, .66) 62%, transparent); }
  [data-mode="day"] .opp .edge { background: linear-gradient(90deg, transparent, rgba(10, 160, 140, .9) 28%, #067c6e 50%, rgba(10, 160, 140, .9) 72%, transparent); }
  [data-mode="day"] .tab { background: rgba(255, 255, 255, .7); }
  [data-mode="day"] .tab-cue { background: rgba(255, 255, 255, .96); box-shadow: inset 0 0 0 1px rgba(11, 27, 46, .14), 0 6px 14px -8px rgba(18, 38, 62, .3); }
  [data-mode="day"] .daylight { padding-block: 24px 110px; }
}
/* the smallest phones switch from the menu: see "THE NAV FITS ITS PILL" at the end of this file */

/* =========================================================================
   PRODUCTION ADDITIONS (31/10/2026)
   Skip link, pause controls (WCAG 2.2.2), the founders' seat counter, the FAQ,
   the Enterprise line. Tokens only, so both modes and the .daylight band work;
   logical properties, so RTL and LTR share them.
   ========================================================================= */

/* the window label follows the page direction (its bar is LTR for the window dots) */
html[dir="rtl"] .win-url { direction: rtl; }

/* skip link: off-screen until it takes focus */
.skip-link {
  position: fixed; z-index: 100; inset-block-start: 10px; inset-inline-start: 10px;
  padding: 11px 18px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--teal-ink); background: var(--btn-bg); box-shadow: var(--btn-sh);
  transform: translateY(-200%); transition: transform .25s var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--ink-hi); outline-offset: 3px; }
main:focus { outline: none; }
html.menu-open body { overflow: hidden; }
/* the primary links sit in a <nav> landmark; when they do not fit the bar, the burger menu takes over ("THE NAV FITS ITS PILL", the end of this file) */

/* ---------- pause controls: the tour's 7 s screens, the 2.6 s steps, the sources marquee ---------- */
.pause-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 32px; padding-inline: 10px 14px; margin: 0; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--ink-2);
  background: rgb(var(--glass-rgb) / calc(.04 * var(--glass-k)));
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.pause-btn svg { width: 13px; height: 13px; flex: none; color: var(--teal); }
.pause-btn .i-play { display: none; }
.pause-btn[data-paused="true"] .i-pause { display: none; }
.pause-btn[data-paused="true"] .i-play { display: block; }
.pause-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .pause-btn:hover { color: var(--ink-hi); box-shadow: inset 0 0 0 1px var(--line-3); } }
[data-mode="day"] .pause-btn { background: rgba(255, 255, 255, .8); }
html.reduce-motion .pause-btn, html.is-static .pause-btn { display: none; }   /* nothing moves on its own there */

.tour-ctl { position: relative; z-index: 3; display: flex; justify-content: center; margin-block-start: 16px; }
.tour-copy { margin-block-start: 26px; }
#tour.is-paused .hot::after { animation-play-state: paused; }
.brain-ctl { margin-block-start: 14px; margin-inline-start: 70px; }
#brain.is-paused .steps::after { animation-play-state: paused; }
.sig-foot { gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
  .tour-ctl { margin-block-start: 12px; }
  .tour-copy { margin-block-start: 18px; }
  .brain-ctl { margin-inline-start: 56px; }
}

/* ---------- the founders' seat counter (the number comes from the app API; the HTML holds the fallback) ---------- */
.seatbox {
  display: grid; gap: 8px; width: min(100%, 420px); padding: 14px 18px 13px; border-radius: 18px; text-align: start;
  background: rgb(var(--glass-rgb) / calc(.035 * var(--glass-k)));
  box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -30px rgb(var(--shadow-rgb) / calc(.7 * var(--shadow-k)));
}
.seatbox .sb-n { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink-hi); }
.seatbox .sb-n b { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--teal-tx); letter-spacing: 0; }
.seatbox .sb-bar { height: 6px; border-radius: 99px; overflow: hidden; background: rgb(var(--rim-rgb) / calc(.14 * var(--rim-k))); }
.seatbox .sb-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(270deg, var(--teal), var(--cyan)); transition: width 1.2s var(--ease); }
.seatbox .sb-note { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.seatbox.is-waves .sb-bar { display: none; }
.strip .seatbox { margin-block-start: 10px; }
.cta-inner .seatbox { margin-block-start: 2px; }
.daylight .seatbox { background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(16, 48, 80, .12); }

/* ---------- Enterprise: one line under the plans ---------- */
.ent { margin: 18px auto 0; max-width: 900px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.ent b { color: var(--ink); font-weight: 700; }
.ent a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--teal-tx);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ent a svg { width: 14px; height: 14px; }

/* ---------- FAQ (in daylight, before dusk) ---------- */
.faq-list { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.qa { border-radius: 20px; background: rgb(var(--glass-rgb) / calc(.05 * var(--glass-k)));
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -38px rgb(var(--shadow-rgb) / calc(.7 * var(--shadow-k))); }
.daylight .qa { background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px rgba(16, 48, 80, .1), 0 24px 50px -38px rgba(20, 60, 100, .45); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 24px; border-radius: 20px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink-hi); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; width: 10px; height: 10px; margin-block-start: -5px;
  border-right: 1.7px solid var(--teal); border-bottom: 1.7px solid var(--teal); transform: rotate(45deg); transition: transform .35s var(--ease); }
.qa[open] summary::after { margin-block-start: 5px; transform: rotate(-135deg); }
.qa summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 20px; }
.qa > div { padding: 0 24px 20px; }
.qa p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-2); max-width: 740px; }
.qa p + p { margin-block-start: 10px; }
.qa a { color: var(--teal-tx); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .qa summary { padding: 16px 18px; font-size: 16.5px; }
  .qa > div { padding: 0 18px 18px; }
  .qa p { font-size: 15.5px; }
}

/* =========================================================================
   LAUNCH QA FIXES (S7, 31/10/2026) · the log: design-v2/launch/fix-log.md
   ========================================================================= */

/* focus and #anchors never land under the fixed nav (its bottom edge: 78px scrolled on desktop, 106px on a phone at the top) */
html { scroll-padding-block-start: 112px; }

/* ---------- hero, 901-1180px (tablet landscape, small laptops) ----------
   Next to a 720px subtitle there is no room for side cards, so the two cards that stay (the focus card and the
   logistics card) sit under the text, on the planet's shoulders, and the hero grows to hold them. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero { height: var(--hero-h, max(960px, calc(100svh - 42px))); }
  .opp[data-card="4"] { display: none; }
  .opp[data-card="0"] { inset-block-start: 650px; }
  .opp[data-card="1"] { inset-block-start: 668px; }
  .israel-tag { display: none; }   /* it would land on a card; the glowing beacon still marks Israel (as on phones) */
}
/* 1181-1360px: the subtitle keeps to the column between the side cards */
@media (min-width: 1181px) and (max-width: 1360px) {
  .hero-sub { max-width: min(720px, calc(100vw - 664px)); }
}

/* ---------- the nav at night, scrolled: nearly opaque glass, so it stays readable over the light product screens and the
   daylight band (links 6:1 and up over white). The inactive mode label and "× Adam" use --ink-2. ---------- */
:root:not([data-mode="day"]) .nav.scrolled { background: linear-gradient(180deg, rgba(21, 47, 80, .94), rgba(15, 37, 64, .92)); }
.nav .brand .adam, .nav .mode-toggle { color: var(--ink-2); }

/* ---------- one switch for all motion (WCAG 2.2.2): the [data-motion-toggle] button in the footer (v74; it was in the nav and the menu) ----------
   Pressed (main.js adds html.motion-paused, remembered as adam-home-motion): every CSS animation stops where it is, the hero
   clock freezes so the globe stops, and the tour, the steps and the marquee switch to their own paused state.
   The one-off entrances finish at once and stay finished after a release (html.entrances-done is never removed), so
   nothing replays; the cards keep their bob phases. The scroll-lit statement still follows the visitor's own scrolling. */
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; }
html.motion-paused .statement .w { animation-play-state: running !important; }
html.entrances-done .opp { animation-delay: -10s, calc(var(--o, 0) * -.96s) !important; }
html.entrances-done :is(.hero-title .l1, .hero-title .l2, .kicker, .hero-sub, .hero-ctas, .hero-micro, .hero-proof, .nav, .fan-label) { animation-delay: -10s !important; }
/* the switch reads as one more footer link. The small track after the label shows the state (on = the animations are paused);
   the label itself stays the same, as a toggle button's should, and aria-pressed carries the state. RTL-first like the rest:
   off sits at the inline start, on at the inline end (ltr.css mirrors the track). */
.foot-motion {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; line-height: inherit; color: var(--ink-2); text-align: start;
  -webkit-tap-highlight-color: transparent; transition: color .25s var(--ease-out);
}
.foot-motion::after {
  content: ''; flex: none; width: 26px; height: 15px; border-radius: 99px;
  background: radial-gradient(circle at calc(100% - 7.5px) 50%, var(--ink-3) 4px, transparent 4.5px);
  box-shadow: inset 0 0 0 1.5px var(--line-3);
}
.foot-motion[aria-pressed="true"] { color: var(--ink-hi); }
.foot-motion[aria-pressed="true"]::after { background: radial-gradient(circle at 7.5px 50%, #ffffff 4px, transparent 4.5px), var(--teal-2); box-shadow: inset 0 0 0 1.5px var(--teal-2); }
.foot-motion:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .foot-motion:hover { color: var(--ink-hi); } }
html.reduce-motion .foot-motion, html.is-static .foot-motion { display: none; }   /* nothing moves on its own there (main.js leaves it unwired) */
html.reduce-motion .foot li:has(> .foot-motion), html.is-static .foot li:has(> .foot-motion) { display: none; }   /* nor an empty row */
.menu { overflow-y: auto; overscroll-behavior: contain; }   /* short phones: the menu's last rows stay reachable */

/* ---------- the tour's phone tab bar: the cue and the fade follow the scroll (main.js sets .at-start / .at-end) ---------- */
@keyframes cue-back { from { transform: translateX(0); } to { transform: translateX(5px); } }
@media (max-width: 900px) {
  .tabwrap.at-end:not(.at-start) .tabbar { -webkit-mask: linear-gradient(90deg, #000 70%, transparent 100%); mask: linear-gradient(90deg, #000 70%, transparent 100%); }
  .tabwrap.at-end:not(.at-start) .tab-cue { inset-inline-end: auto; inset-inline-start: 10px; animation-name: cue-back; }
  .tabwrap.at-end:not(.at-start) .tab-cue svg { transform: scaleX(-1); }
  .tabwrap.at-start.at-end .tabbar { -webkit-mask: none; mask: none; }
  .tabwrap.at-start.at-end .tab-cue { display: none; }
}

/* ---------- phones: long labels wrap instead of pushing a box past the screen (WCAG 1.4.10 reflow, 1.4.12 text spacing) ---------- */
@media (max-width: 900px) {
  main .btn { white-space: normal; }
  .cta-inner { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .mode { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .mini-h { flex-wrap: wrap; }
}

/* ---------- the hero's demo-data label keeps a soft backdrop, so the planet's dots never run through the letters ---------- */
.fan-label { padding: 4px 12px 4px 10px; border-radius: 999px; color: var(--ink-2); background: rgb(var(--scrim-rgb) / .62); }
[data-mode="day"] .fan-label { background: rgba(255, 255, 255, .86); }
@media (max-width: 900px) { .fan-label { width: max-content; max-width: calc(100% - 32px); margin-inline: auto; border-radius: 14px; text-align: center; } }

/* ---------- day mode: the cream gap between the last question and the final call to action matches the other section gaps ---------- */
@media (min-width: 901px) {
  [data-mode="day"] .daylight { padding-block-end: 40px; }
  [data-mode="day"] #cta { padding-block-start: 120px; }
}

/* ---------- small labels that measured just under 4.5:1 ---------- */
.mode.locked { opacity: 1; }                                   /* the lock icon says it; the "soon" chip keeps full contrast */
.mode.locked .lk { color: var(--ink-3); }
[data-mode="day"] .stair .st .chip { background: #ffffff; }   /* the 11px stair chips on an opaque face */
.daylight .eyebrow .idx { color: #057466; }
.seatbox .sb-note, .chip-demo { color: var(--ink-2); }
[data-mode="day"] .announce a { color: #035a51; }
[data-mode="day"] .step .node { color: #04574d; background: radial-gradient(circle at 30% 20%, rgba(10, 150, 132, .14), #ffffff 70%), #ffffff; }
[data-mode="day"] .eg-out { color: #7a4609; }

/* =========================================================================
   V74 (31/10/2026) · the founders' first month, the ceilings line, what the alternative costs, and the tour's tabs as a rail
   beside the screen on a phone. Proof and pricing sit in the .daylight band, whose tokens are the day set in both modes.
   ========================================================================= */

/* ---------- pricing: the founders' first month on the Solo card (a chip, like the founders strip's), the ceilings under the plans ---------- */
.plan .pr-note { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-block-start: -6px;
  padding-block: 5px; padding-inline: 10px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--teal-tx); background: rgb(var(--teal-rgb) / .09); box-shadow: inset 0 0 0 1px rgb(var(--teal-rgb) / .32); }
.plan .pr-note::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 6px rgb(var(--glow-rgb) / calc(.6 * var(--glow-k))); }
.plans-note { margin: 20px auto 0; max-width: 820px; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); text-wrap: balance; }

/* ---------- what the alternative costs: one card under the strips. The cost column carries the weight; Adam's row is tinted.
   On a phone each row stacks: the alternative, its cost, the note (the column heads stay for screen readers). ---------- */
.alt-card { margin-block-start: 20px; }
.alt-card .core { padding: 30px 32px 22px; display: grid; gap: 14px; }
.alt-card h3 { margin: 0; font-size: 21px; font-weight: 600; color: var(--ink-hi); }
.alt-cost { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.alt-cost th, .alt-cost td { padding: 13px 16px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line-2); }
.alt-cost tr > :first-child { padding-inline-start: 0; }
.alt-cost tr > :last-child { padding-inline-end: 0; }
.alt-cost thead th { padding-block: 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink-3); border-block-end-color: var(--line-3); }
.alt-cost thead th:first-child { width: 27%; }
.alt-cost thead th:nth-child(2) { width: 25%; }
.alt-cost tbody th { font-weight: 600; color: var(--ink); }
.alt-cost td:nth-child(2) { font-weight: 600; color: var(--ink); }
.alt-cost td:last-child { font-size: 14px; color: var(--ink-3); }
.alt-cost .alt-adam > * { border-block-end: 0; background: rgb(var(--teal-rgb) / .09); }
.alt-cost .alt-adam > :first-child { padding-inline-start: 16px; border-start-start-radius: 14px; border-end-start-radius: 14px; }
.alt-cost .alt-adam > :last-child { padding-inline-end: 16px; border-start-end-radius: 14px; border-end-end-radius: 14px; }
.alt-cost .alt-adam th, .alt-cost .alt-adam td:nth-child(2) { color: var(--teal-tx); }
.alt-cost .alt-adam td:last-child { color: var(--ink-2); }
.alt-foot { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 700px) {
  .alt-card .core { padding: 24px 20px 18px; gap: 10px; }
  .alt-cost, .alt-cost tbody, .alt-cost tr, .alt-cost th, .alt-cost td { display: block; }
  .alt-cost thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .alt-cost tr { padding-block: 14px; border-block-end: 1px solid var(--line-2); }
  .alt-cost th, .alt-cost td { padding: 0; border: 0; }
  .alt-cost td:nth-child(2) { margin-block-start: 2px; }
  .alt-cost td:last-child { margin-block-start: 6px; font-size: 13.5px; }
  .alt-cost .alt-adam { margin-block-start: 14px; padding: 14px 16px; border: 0; border-radius: 16px; background: rgb(var(--teal-rgb) / .09); }
  .alt-cost .alt-adam > * { background: none; }
  .alt-cost .alt-adam > :first-child, .alt-cost .alt-adam > :last-child { padding-inline: 0; border-radius: 0; }
}

/* ---------- the product tour on a phone (350-900px): the tabs become an icon rail beside the screen ----------
   The tab bar sat about 250px above the screen (tabs, pause, text, then the screen). Now the rail and the screen share a row, so
   the tab picked and the screen it opens are seen together, and the pause control and the text follow below. #tour becomes a
   grid and its first .wrap steps aside (display: contents) so the rail, the stage and the text can be placed. The screen keeps
   280-320px at 350-390px. The stage keeps one height on every tab (the phones are sized to fit it), so the text below never
   jumps when the tour moves on. The labels stay in the buttons as their names; the text below names the screen. Under 350px the
   tabs stay above the screen, and picking one scrolls the screen into view (main.js). */
@media (min-width: 350px) and (max-width: 900px) {
  #tour { display: grid; grid-template-columns: 10px 44px 8px minmax(0, 1fr) 10px; align-items: start; }
  #tour > .wrap:not(.tour-foot) { display: contents; }
  #tour .sec-head { grid-column: 2 / 5; grid-row: 1; }
  #tour .tabwrap { grid-column: 2; grid-row: 2; margin: 24px 0 0; }
  #tour .tour-stage { grid-column: 4; grid-row: 2; padding-block: 24px 100px; }
  #tour .tour-ctl { grid-column: 2 / 5; grid-row: 3; margin-block-start: 0; }
  #tour .tour-copy { grid-column: 2 / 5; grid-row: 4; z-index: 3; }   /* above the planet's ground, which runs on below the stage */
  #tour .tour-foot { grid-column: 1 / -1; grid-row: 5; margin-block-start: 6px; }
  #tour .tabbar { flex-direction: column; width: auto; max-width: none; overflow: visible; gap: 6px; padding: 0; background: none; box-shadow: none; -webkit-mask: none; mask: none; }
  #tour .tab { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  #tour .tab svg { width: 19px; height: 19px; }
  #tour .tab-progress { inset-inline: 11px; inset-block-end: 5px; }
  #tour .tab-cue { display: none; }
  #tour .stack { width: 100%; }
  #tour[data-tab] .tour-stage { min-height: 0; }
  #tour .phones { inset: 14px 0; }
  #tour .phone { width: min(46%, 30% + 50px); }
  #tour .tour-stage .halo { transition: opacity .9s var(--ease); }
  #tour[data-tab="4"] .tour-stage .halo { opacity: 0; }   /* the window's shadow goes with the window (a dark slab behind the phones on a tablet) */
}

/* =========================================================================
   THE NAV FITS ITS PILL (31/10/2026)
   The bar is a size container, so what shows in it follows the room the pill really has (a classic scrollbar, zoom and the
   fallback font included), not the window width. Sizes below are the pill's content box: the pill less its inline padding,
   1148px when the pill is at its full 1180px.
   - The five section links show only with room to spare, and otherwise the burger takes over, at every width. (The burger
     used to appear only under 901px and the links left the bar under 1181px (/he/) or 1240px (/), so from 901px up to there the
     bar had neither.) Measured 31/10 with the 24px gaps: the Hebrew links need 1071px in Heebo and 1104px in the system-ui
     fallback, so they show from 1116px: a 1188px window, 1205px with a 17px scrollbar. English: ltr.css.
   - A label never wraps: a bar that runs out of room hands its links to the burger instead.
   - From 901px the gap between the brand, the links and the actions is a 16px floor, not 24px. Nothing moves (space-between
     spreads the free room the same way); a wider fallback font just has more room before anything could touch.
   - Phones: the day/night switch stays in the bar from 331px (a 375px phone; it is in the menu too), and under 345px (phones
     under 389px) the actions draw about 11px closer, so the fallback font fits as well as Heebo. In the fallback font the
     Hebrew bar needs 337px with the switch and 279px without.
   main.js closes the menu when the burger leaves the bar.
   ========================================================================= */
.nav { container: nav / inline-size; }
@media (min-width: 901px) { .nav { gap: 16px; } }
.nav-links a { white-space: nowrap; }
@container nav (width < 1116px) {
  .nav-primary { display: none; }
  .nav-burger { display: block; }
}
@container nav (width < 345px) {
  .nav-end { gap: 2px; }
  .nav .btn-sm { padding-inline: 9px; }
  .nav .wordmark { letter-spacing: 0; gap: 4px; }
}
@container nav (width < 331px) { .nav .mode-toggle { display: none; } }