/* Libraries: none. Fonts: Instrument Serif (the asking voice), Geist (the answering voice), Geist Mono (labels).
   Layout: every question opens on a full-bleed "stage" (a video loop per character, placeholder until the files exist).
   The question sits on the video; the answer floats on a matte glass card. The proof follows on the paper below.
   To plug in a video: set data-video="file.mp4" (and optionally data-poster) on a .stage. */
:root {
  --paper: #F2F0EC;    /* sampled from the studio white in the hero video, so the video runs straight into the page */
  --paper-2: #E9E9E4;
  --rule: #DADAD3;
  --ink: #121417;
  --body: #3D3D38;
  --muted: #6E6C64;
  --navy: #0E1A36;
  --navy-2: #1A2A4F;
  --navy-ink: #F4F3EC;
  --navy-muted: #9FB0CC;
  --blue: #2F6FB3;
  --sky: #5B9BD5;
  --sky-soft: #B9D6F5;
  --p-sky: #B9D6F5;
  --p-mint: #CBE9C1;
  --p-butter: #F4E3A3;
  --p-peach: #F3C3B1;
  --p-lilac: #D8D0F2;
  --bar-dim: #CFCBBE;
  --d-blue: #5592CF;
  --d-ochre: #B58A3C;
  --b-reg: #4F7CC4;   /* the Bloom chart (02): the regular class, a mid blue (was ochre, her call 22.10) */
  --b-one: #B9D6F5;   /* and one-on-one, a quite light sky blue */

  --glass: rgba(255, 255, 255, .28);
  --glass-strong: rgba(255, 255, 255, .34);
  --glass-edge: rgba(255, 255, 255, .62);
  --glass-dark: rgba(14, 26, 54, .34);

  --f-q: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-a: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-m: "Geist Mono", ui-monospace, Menlo, monospace;

  --gut: clamp(16px, 4.5vw, 64px);
  --hh: 56px;
  --hm: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-quick: 150ms;
  --t-std: 500ms;
  --t-slow: 850ms;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-a); font-size: 18px; line-height: 1.55; letter-spacing: -0.01em; }
p, h1, h2, h3, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* ---------- matte glass ---------- */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); border: 1px solid var(--glass-edge); border-radius: 14px; box-shadow: 0 10px 40px rgba(14, 26, 54, .10); color: var(--ink); }
.glass.strong { background: var(--glass-strong); }
/* the chapters' answer cards are a little clearer than the rest of the glass: thinner tint, softer blur, more video through */
.ch .stage .card.glass { background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.chipg { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1 var(--f-m); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(14, 26, 54, .1); border-radius: 99px; padding: 8px 14px; }
.chipg b { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.chipg b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* ---------- header ---------- */
/* a floating glass bar, clear of the top and side edges */
.top { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--hm)); z-index: 30; height: var(--hh); margin: var(--hm) var(--gut) 0; display: flex; align-items: center; gap: clamp(12px, 2.6vw, 36px); padding: 0 clamp(14px, 1.6vw, 22px); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--glass-edge); border-radius: 14px; box-shadow: 0 8px 30px rgba(14, 26, 54, .08); }
/* the Alma Labs logo (https://148974181.fs1.hubspotusercontent-eu1.net/hubfs/148974181/alma-labs/brand/alma-labs-logo.svg, traced from her PNG), drawn in the text colour through a mask,
   so the same file is dark in the menu and light in the footer; the words stay in the link for screen readers */
.logo { --logo-h: 22px; display: inline-block; flex: none; height: var(--logo-h); width: calc(var(--logo-h) * 802 / 224); background-color: currentColor; -webkit-mask: url(https://148974181.fs1.hubspotusercontent-eu1.net/hubfs/148974181/alma-labs/brand/alma-labs-logo.svg) no-repeat center / contain; mask: url(https://148974181.fs1.hubspotusercontent-eu1.net/hubfs/148974181/alma-labs/brand/alma-labs-logo.svg) no-repeat center / contain; font-size: 0; color: var(--ink); }
.nav { display: flex; gap: 6px; font-size: 14.5px; margin-right: auto; }
.nav a { padding: 6px 13px; border-radius: 99px; transition: background-color var(--t-quick) var(--ease); }
.nav a:hover, .nav a[aria-current="true"] { background: rgba(255, 255, 255, .55); }
.ans { font: 500 14px var(--f-a); letter-spacing: -0.01em; color: var(--ink); background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .6); border-radius: 99px; padding: 7px 14px; display: inline-flex; gap: 9px; align-items: center; cursor: pointer; white-space: nowrap; }
.ans i { width: 28px; height: 15px; border-radius: 99px; background: rgba(14, 26, 54, .14); position: relative; transition: background 180ms var(--ease); }
.ans i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); transition: transform 180ms var(--ease), background 180ms var(--ease); }
.ans[aria-pressed="true"] i { background: var(--navy); }
.ans[aria-pressed="true"] i::after { transform: translateX(13px); background: var(--sky-soft); }
.cta-w { background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; border-radius: 99px; padding: 9px 18px; white-space: nowrap; box-shadow: 0 2px 10px rgba(14, 26, 54, .08); transition: transform 120ms var(--ease); }
.cta-w:active, .btn:active, .btn-w:active { transform: scale(.97); }

/* floating chapter pill */
.pill { position: fixed; z-index: 25; left: 50%; top: calc(env(safe-area-inset-top, 0px) + var(--hm) + var(--hh) + 12px); transform: translate(-50%, -8px); display: flex; align-items: center; gap: 12px; background: rgba(14, 26, 54, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--navy-ink); border-radius: 99px; padding: 7px 14px; opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease), transform 250ms var(--ease); max-width: calc(100vw - 32px); }
.pill.show { opacity: 1; transform: translate(-50%, 0); }
.pill .dots { display: flex; gap: 5px; }
.pill .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(244, 243, 236, .3); transition: background-color 250ms var(--ease); }
.pill .dots i.on { background: var(--sky); }
.pill span { font-family: var(--f-q); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 140ms var(--ease); }

/* ---------- stage: video behind, question on top, answer on glass ---------- */
.stage { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(560px, 84vh, 900px); display: grid; align-content: end; padding: clamp(28px, 4vw, 56px) var(--gut) clamp(32px, 4.5vw, 64px); color: var(--ink); }
/* the infinite white studio (the video replaces it; the page paper continues it) */
.media { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 50% 32%, #FFFFFF 0%, #F8F8F6 45%, var(--paper) 100%); }
.media::after { content: ""; position: absolute; left: 0; right: 0; top: 64%; height: 24%; background: linear-gradient(to bottom, rgba(14, 26, 54, 0), rgba(14, 26, 54, .035) 45%, rgba(14, 26, 54, 0)); }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; } /* on screens wider than the footage, crop mostly floor, not heads */
/* the minister: the bottom fade into the paper is lighter here (.4 instead of .7), so it doesn't read as a white veil over her dark suit */
#is-it-safe .stage::after { background: linear-gradient(to top, rgba(243, 243, 240, .4) 0%, rgba(243, 243, 240, 0) 38%); }
#is-it-safe .media video { object-position: 50% 0%; } /* the minister ends close to the camera with little headroom: crop only the floor */
.media video:not([src]):not([poster]) { display: none; } /* reduced motion: the poster stands in for the loop */
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(243, 243, 240, .7) 0%, rgba(243, 243, 240, 0) 38%); pointer-events: none; }
.stage-in { position: relative; z-index: 1; }
.vtag { position: absolute; z-index: 1; top: clamp(18px, 2.4vw, 32px); right: var(--gut); max-width: min(420px, 60vw); font: 500 10.5px/1.5 var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px dashed rgba(14, 26, 54, .25); border-radius: 14px; padding: 7px 12px; }
.stage.has-video .vtag { display: none; }
.stage-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(18px, 2.4vw, 28px); align-items: end; }
.stage .chipg { grid-column: 1 / -1; justify-self: start; }
.stage .q { grid-column: 1 / span 7; color: var(--ink); }
.stage .card { grid-column: 9 / -1; padding: clamp(20px, 2.2vw, 30px); display: grid; gap: 12px; align-self: end; }
/* the name sits right above its question: the answer card spans both rows beside them, so a tall card
   no longer stretches the space between the name and the question (the free space goes above the name) */
@media (min-width: 1001px) {
  .ch:not(#start-tomorrow) .stage-in:has(> .chipg) { grid-template-rows: 1fr auto; }
  .ch:not(#start-tomorrow) .stage-in:has(> .chipg) > .chipg { grid-row: 1; align-self: end; }
  .ch:not(#start-tomorrow) .stage-in:has(> .chipg) > .q { grid-row: 2; }
  .ch:not(#start-tomorrow) .stage-in:has(> .chipg) > .card { grid-row: 1 / span 2; }
}
.stage .card .lead { font-size: clamp(21px, 1.9vw, 27px); }
.stage .card .sub { font-size: 16px; color: var(--body); }

/* the big type is sized by width but capped by height too, so a laptop (wide but short) keeps the proportions of a big screen */
.q { font-family: var(--f-q); font-weight: 400; font-size: clamp(48px, min(7vw, 10vh), 116px); line-height: .94; letter-spacing: -0.022em; text-wrap: balance; max-width: 7.6em; }
.q em { font-style: normal; color: inherit; } /* over video, one ink color reads best */
.lead { font-weight: 500; font-size: clamp(23px, 2.5vw, 34px); line-height: 1.16; letter-spacing: -0.035em; max-width: 26ch; }
.sub { color: var(--body); max-width: 54ch; }


/* ---------- hero stage ---------- */
.hero-scene { margin-top: calc(-1 * (var(--hh) + var(--hm))); }
.hero { padding-top: calc(var(--hh) + var(--hm) + clamp(28px, 4vw, 56px)); padding-bottom: calc(clamp(32px, 4.5vw, 64px) + 7vh); min-height: 100vh; min-height: 100svh; } /* the whole opening block sits a little higher off the bottom */
/* the same centered type structure as the paper version, with the answer on one glass panel */
.hero { align-content: end; }
/* laptops only: the whole opening block (title, panel and buttons) sits midway between the menu's bottom edge
   and the screen's bottom edge; big screens keep the block low, as above */
@media (max-width: 1800px) {
  .hero { padding-top: calc(var(--hm) + var(--hh) + 16px); padding-bottom: 16px; align-content: center; }
}
.hero .stage-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: clamp(20px, 2.6vw, 32px); }
.hero .chipg { grid-column: auto; justify-self: center; }
/* the opening title's size: by width, but never taller than the screen leaves room for (three lines plus the panel and buttons),
   so on a laptop it stays clear of the menu; big screens keep the full 170px */
:root { --hq: clamp(56px, min(10.4vw, 33.7vh - 175px), 170px); }
.hero .q { grid-column: auto; font-size: var(--hq); line-height: .92; max-width: 7.6em; }
/* the title sits 20% closer to the panel than it did: the old visible gap (baseline to panel) was row gap + margin + .122em of the title */
.hero .hero-card { --hcm: max(4px, calc(.8 * clamp(20px, 8vh, 96px) - .2 * (clamp(20px, 2.6vw, 32px) + .122 * var(--hq)))); grid-column: auto; width: min(860px, 100%); margin-top: var(--hcm); padding: clamp(14px, 1.6vw, 20px) clamp(24px, 3vw, 40px); display: grid; gap: 6px; justify-items: center; }
/* laptops only: the glass panel moves up a little toward the title; the space it gives up goes under it,
   so the title and the buttons stay exactly where they were */
@media (max-width: 1800px) {
  .hero .hero-card { margin-top: calc(var(--hcm) * .35); margin-bottom: calc(var(--hcm) * .65); }
}
.hero .hero-card .lead { font-size: clamp(22px, 2.2vw, 30px); max-width: none; }
.hero .hero-card .sub { font-size: 16px; max-width: none; }
.hero .row { justify-content: center; }
/* the last chapter closes the page the way the opening began: question and answer centered, at the opening's size */
#start-tomorrow .stage-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
/* the block is placed so "Let's talk this week" sits on Leo's loop: the script works out where the loop lands
   on this screen (data-ring-y on the stage, as a share of the video's height) and sets --ring-top */
#start-tomorrow > .stage { align-content: start; padding-top: var(--ring-top, calc(var(--hh) + var(--hm) + 12px)); }
#start-tomorrow .stage .chipg, #start-tomorrow .stage .q, #start-tomorrow .stage .card { grid-column: auto; grid-row: auto; justify-self: center; }
#start-tomorrow .stage .q { font-size: var(--hq); line-height: .92; }
#start-tomorrow .stage .card { width: min(860px, 100%); justify-items: center; padding: clamp(14px, 1.6vw, 20px) clamp(24px, 3vw, 40px); }
#start-tomorrow .stage .card .lead { max-width: none; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; border-radius: 99px; padding: 6px 6px 6px 20px; transition: background-color var(--t-quick) var(--ease), transform 120ms var(--ease); }
.btn b { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 14px; transition: transform var(--t-quick) var(--ease); }
.btn:hover { background: #2C3036; }
.btn:hover b { transform: translateX(3px); }
.btn-w { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 15px; border-radius: 99px; padding: 12px 22px; transition: background-color var(--t-quick) var(--ease), transform 120ms var(--ease); }
.btn-w:hover { background: rgba(18, 20, 23, .06); }
/* on the navy chapter (the form) the dark button flips to light */
.dark .btn { background: var(--navy-ink); color: var(--ink); }
.dark .btn b { background: var(--ink); color: var(--navy-ink); }
.dark .btn:hover { background: #fff; }

/* ---------- chapter body (the proof, on paper) ---------- */
.ch { scroll-margin-top: var(--hh); }
.body { background: var(--paper); padding: clamp(64px, 9vw, 130px) var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(26px, 3.4vw, 44px); }
.lbl { grid-column: 1 / span 3; align-self: start; display: grid; gap: 6px; font: 500 12px/1.3 var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); position: sticky; top: calc(var(--hh) + 64px); }
.lbl b { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.lbl b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.main { grid-column: 4 / -1; display: grid; gap: clamp(22px, 3vw, 36px); min-width: 0; }
.proof { display: grid; gap: 18px; min-width: 0; }
.cap { font-size: 18px; line-height: 1.45; max-width: 46ch; letter-spacing: -0.015em; }
.src { font: 400 11.5px/1.5 var(--f-m); color: var(--muted); }
.dark .body { background: var(--navy); color: var(--navy-ink); }
.dark .lbl, .dark .src { color: var(--navy-muted); }
.dark .lbl b { color: var(--navy-ink); }
.pastel .body { background: var(--sky-soft); color: var(--navy); }
.pastel .lbl, .pastel .src { color: rgba(14, 26, 54, .62); }
.pastel .lbl b { color: var(--navy); }
.pastel .lbl b::before { background: var(--navy); }
.tint .body { background: var(--paper-2); }

/* legends + data disclosure */
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.data summary { font: 500 11px var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; width: max-content; list-style: none; }
.data summary::-webkit-details-marker { display: none; }
.data summary::before { content: "+ "; }
.data[open] summary::before { content: "− "; }
.data table { margin-top: 10px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.data th, .data td { text-align: left; padding: 6px 18px 6px 0; border-bottom: 1px solid var(--rule); }
.data th { font: 500 11px var(--f-m); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dark .data summary, .dark .data th { color: var(--navy-muted); }
.dark .data th, .dark .data td { border-bottom-color: rgba(244, 243, 236, .16); }

/* tooltip */
.tip { position: fixed; z-index: 60; max-width: 270px; background: var(--navy); color: var(--navy-ink); font: 400 13.5px/1.4 var(--f-a); letter-spacing: -0.01em; padding: 9px 12px; border-radius: 10px; pointer-events: none; box-shadow: 0 10px 30px rgba(14, 26, 54, .22); }
.tip .v { display: block; font-weight: 600; font-size: 15px; }
.tip .l { color: #C8D3E6; }
.tip .tr { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); gap: 8px; align-items: baseline; }
.tip .tr + .tr { margin-top: 4px; }
.tip .tr i { height: 2px; border-radius: 2px; align-self: center; }
.tip .tr .v { display: inline; }
.tip.on-dark { background: var(--navy-ink); color: var(--ink); }
.tip.on-dark .l { color: var(--body); }

/* ---------- 01 dots ---------- */
.dots3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 64px); max-width: 920px; }
.dotset { display: grid; gap: 16px; align-content: start; }
.g100 { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(2px, .5vw, 5px); max-width: 230px; }
.g100 i, .g193 i { aspect-ratio: 1; border-radius: 50%; background: var(--paper-2); display: block; }
.g100 i.on { background: var(--sky-soft); } /* light sky (her swatch, 25.10); the AI grid is all grey like the others */
.g100:hover i.on, .g100:focus i.on { opacity: .78; }
.num { font-weight: 600; font-size: clamp(40px, 5.4vw, 76px); line-height: .9; letter-spacing: -0.05em; }
.num.qm { font-family: var(--f-q); font-weight: 400; color: var(--navy); letter-spacing: -0.02em; }
/* the third set is one question in words (her call 25.10), not a "?" over a label; about as tall as a number + its label */
.num.ask-q { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.dl { display: grid; gap: 4px; font-size: 15px; line-height: 1.35; }

/* ---------- 02 bloom (dark) ---------- */
.bloom svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.bloom .c-a { fill: rgba(79, 124, 196, .16); stroke: var(--b-reg); stroke-width: 2; stroke-linejoin: round; }
.bloom .c-b { fill: rgba(185, 214, 245, .14); stroke: var(--b-one); stroke-width: 2; stroke-linejoin: round; }
.bloom .axis { stroke: rgba(244, 243, 236, .35); stroke-width: 1; fill: none; }
.bloom .mean { stroke: var(--b-one); stroke-width: 1.2; stroke-dasharray: 4 5; fill: none; }
.bloom text { font-family: var(--f-a); font-size: 16px; fill: var(--navy-ink); letter-spacing: -0.2px; }
.bloom text.b { font-weight: 600; }
.bloom text.m { font-family: var(--f-m); font-size: 12px; fill: var(--navy-muted); letter-spacing: .5px; }
.bloom text.pct { font-weight: 600; font-size: 58px; letter-spacing: -2.5px; }
.bloom .hit { fill: transparent; cursor: crosshair; }
.bloom .xh { stroke: rgba(244, 243, 236, .6); stroke-width: 1; fill: none; opacity: 0; }
.bloom .mk { stroke: var(--navy); stroke-width: 2; opacity: 0; }
.bloom .mk.a { fill: var(--b-reg); }
.bloom .mk.b { fill: var(--b-one); }
.bloom svg.hovering .xh, .bloom svg.hovering .mk { opacity: 1; }
.dark .legend i.a { background: var(--b-reg); }
.dark .legend i.b { background: var(--b-one); }

/* ---------- 03 number + layers ---------- */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.giant { font-weight: 600; font-size: clamp(120px, min(18vw, 24vh), 280px); line-height: .8; letter-spacing: -0.065em; }
.giant small { font-size: .38em; letter-spacing: -0.03em; vertical-align: top; margin-left: .04em; }
.stack { overflow-x: auto; }
.stack table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.stack th, .stack td { padding: 11px 8px; border-bottom: 1px solid var(--rule); text-align: center; }
.stack th { font: 500 11px/1.3 var(--f-m); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }
.stack th.al { color: var(--navy); font-weight: 600; }
.stack td:first-child, .stack th:first-child { text-align: left; white-space: nowrap; }
.stack td:first-child { font-weight: 500; }
.stack td.al { background: var(--sky-soft); }
.stack .full::before, .stack .half::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.stack .full::before { background: var(--blue); }
.stack .half::before { background: linear-gradient(90deg, var(--blue) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--blue); }
.stack td.full:hover, .stack td.half:hover, .stack td.full:focus, .stack td.half:focus { background: var(--paper-2); }
.stack td.al:hover, .stack td.al:focus { background: #A6CBF2; }
.stack .legend { margin-top: 12px; font-size: 13px; color: var(--muted); }
.stack .legend i { width: 11px; height: 11px; border-radius: 50%; }
.stack .legend i.f { background: var(--blue); }
.stack .legend i.h { background: linear-gradient(90deg, var(--blue) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* ---------- 04 pastel pillars ---------- */
.rev { display: grid; max-width: 940px; }
.rev div { display: grid; grid-template-columns: minmax(70px, 2fr) minmax(0, 7fr); gap: 20px; padding: 15px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.rev dt { font-family: var(--f-q); font-size: clamp(26px, 3vw, 40px); line-height: 1; }
.rev dd { font-size: clamp(18px, 1.7vw, 21px); color: var(--body); letter-spacing: -0.02em; }
.pillars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 24px; overflow: hidden; }
.pillar { min-height: clamp(260px, 34vw, 460px); padding: clamp(16px, 2vw, 28px); display: grid; align-content: space-between; gap: 18px; }
.pillar:nth-child(1) { background: var(--p-sky); }
.pillar:nth-child(2) { background: var(--p-mint); }
.pillar:nth-child(3) { background: var(--p-butter); }
.pillar:nth-child(4) { background: var(--p-peach); }
.pillar:nth-child(5) { background: var(--p-lilac); }
.pillar i { font: 500 11px var(--f-m); letter-spacing: .08em; color: rgba(18, 20, 23, .55); font-style: normal; }
.pillar b { display: block; font-weight: 500; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.05; letter-spacing: -0.04em; }
.pillar span { display: block; margin-top: 8px; font-family: var(--f-q); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.15; color: rgba(18, 20, 23, .8); }

/* ---------- comparison bars ---------- */
.versus { --max: clamp(200px, 26vw, 360px); display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: clamp(16px, 3vw, 40px); align-items: end; }
.vcol { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; }
.vcol .n { font-weight: 600; font-size: clamp(44px, 5.6vw, 84px); line-height: .9; letter-spacing: -0.05em; }
.vcol .t { font: 500 11.5px/1.3 var(--f-m); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.vcol .blk { height: calc(var(--max) * var(--v)); border-radius: 4px 4px 0 0; transform-origin: bottom; }
.vcol.dim .blk { background: var(--bar-dim); }
.vcol.hi .blk { background: var(--blue); }
.vcol:hover .blk, .vcol:focus .blk { opacity: .82; }

/* ---------- 05 a teacher's week: the same 50 hours, today and with AI every week.
   Row names sit above each bar, segment names inside their segment, so the eye never leaves the bars ---------- */
.week { display: grid; gap: 8px; }
.wk-row { font: 500 12px/1.3 var(--f-m); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wbar { display: flex; gap: 2px; height: 76px; }
.wbar + .wk-row { margin-top: 14px; }
.wbar .s { flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; padding: 0 12px; border-radius: 4px; font-size: 15px; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; }
.wbar .st { background: var(--blue); color: #fff; }
.wbar .sb { background: var(--sky); color: var(--navy); font-weight: 600; justify-content: center; padding: 0; }
.wbar .so { background: rgba(14, 26, 54, .10); color: var(--body); }
.cap b { font-weight: 600; }
/* what it takes a teacher to start, as three plain facts under the week */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.facts div { border-top: 2px solid var(--ink); padding-top: 10px; display: grid; gap: 4px; align-content: start; }
.facts b { font-weight: 600; font-size: clamp(26px, 3.4vh, 40px); line-height: 1; letter-spacing: -0.04em; }
.facts span { font-size: 14px; line-height: 1.35; color: var(--body); }

/* ---------- 06 promises ---------- */
.promises { display: grid; max-width: 1100px; container-type: inline-size; }
.promises li { font-weight: 600; font-size: min(5.3cqi, 62px); white-space: nowrap; line-height: 1.04; letter-spacing: -0.05em; padding: clamp(14px, 2vw, 26px) 0; border-top: 1px solid var(--rule); }
.promises li span { color: var(--blue); }
.promises li small { display: block; margin-top: 8px; font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--muted); white-space: normal; }

/* ---------- 07 countries ---------- */
.g193 { display: grid; grid-template-columns: repeat(28, 1fr); gap: clamp(3px, .5vw, 7px); max-width: 940px; }
.dark .g193 i { background: rgba(244, 243, 236, .12); }
.dark .g193 i.on { background: var(--d-blue); box-shadow: 0 0 0 3px rgba(85, 146, 207, .22); }
.dark .g193:hover i.on, .dark .g193:focus i.on { box-shadow: 0 0 0 4px rgba(85, 146, 207, .45); }
.dark .legend i.on { background: var(--d-blue); border-radius: 50%; }
.dark .legend i.off { background: rgba(244, 243, 236, .2); border-radius: 50%; }
.stat { font-weight: 500; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.15; letter-spacing: -0.04em; max-width: 24ch; }
.stat b { font-weight: 600; }

/* ---------- 08 calculator ---------- */
.calc { display: grid; gap: 16px; max-width: 980px; }
.calc label { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.calc input { font: 600 clamp(60px, min(10vw, 12vh), 150px)/1 var(--f-a); letter-spacing: -0.06em; width: 100%; max-width: 7.6ch; background: transparent; color: var(--navy); border: 0; border-bottom: 2px solid var(--navy); padding: 0 0 6px; transition: border-color var(--t-quick) var(--ease); }
.calc input:focus { outline: none; border-bottom-color: var(--blue); }
.calc-out { font-weight: 500; font-size: clamp(24px, 3vw, 42px); line-height: 1.12; letter-spacing: -0.045em; max-width: 24ch; }
/* the typed number is the subject of the sentence: "120,000 students / will finish 7th grade without it" */
.calc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4em; }
.calc-row { position: relative; }
.calc-row input { width: 7.6ch; min-width: 2ch; } /* the script sizes it to the typed number, so "students" sits right after it in every browser */
.calc-mirror { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; pointer-events: none; font: 600 clamp(60px, min(10vw, 12vh), 150px)/1 var(--f-a); letter-spacing: -0.06em; }
.calc-unit { font-weight: 500; font-size: clamp(24px, 3vw, 42px); line-height: 1.12; letter-spacing: -0.045em; }
.path { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; }
.path span { border: 1px solid rgba(14, 26, 54, .25); border-radius: 99px; padding: 8px 16px; }
.path em { font-style: normal; opacity: .6; }

/* ---------- 09 ladder ---------- */
.ladder { display: grid; gap: 4px; }
.ladder p { max-width: 22ch; }
.ladder .lq { font-family: var(--f-q); color: var(--blue); font-size: clamp(32px, 4vw, 60px); line-height: 1; }
.ladder .la { font-weight: 600; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -0.05em; margin-bottom: clamp(14px, 2vw, 26px); }
.ladder .end { max-width: 18ch; }
.team { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 70ch; padding-top: 24px; border-top: 1px solid var(--rule); }
.team b { color: var(--ink); font-weight: 600; }

/* ---------- 10 steps ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1100px; }
.steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: left; }
.steps div { padding: 16px 18px 0 0; display: grid; gap: 6px; align-content: start; }
.steps i { font: 500 11px var(--f-m); color: var(--blue); font-style: normal; letter-spacing: .06em; }
.steps b { font-weight: 500; font-size: clamp(21px, 2vw, 28px); letter-spacing: -0.04em; }
.steps span { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------- products ---------- */
.doors { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.door { border-radius: 20px; padding: clamp(20px, 2.4vw, 32px); min-height: clamp(220px, 22vw, 300px); display: grid; align-content: space-between; gap: 22px; }
.door.live { background: var(--navy); color: var(--navy-ink); }
.door.next { box-shadow: inset 0 0 0 1px var(--rule); }
.door .tag { justify-self: start; font: 500 11px var(--f-m); letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 5px 10px; }
.door.live .tag { background: var(--sky-soft); color: var(--navy); }
.door.next .tag { background: var(--paper-2); color: var(--muted); }
.door h3 { font-family: var(--f-q); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: .95; letter-spacing: -0.02em; }
.door.next h3 { color: var(--muted); }
.door p { font-size: 16px; line-height: 1.45; max-width: 30ch; }
.door.live p { color: #C8D3E6; }
.door.next p { color: var(--body); }

/* laptops only: the products title, its line and all six doors fit one screen, so every product is seen together;
   the doors are a little lower. Big screens stay as they are */
@media (min-width: 901px) and (max-width: 1800px) {
  /* the section is a screen tall and its content sits toward the bottom of it, not under the menu */
  #products > .body { min-height: 100vh; min-height: 100svh; align-content: end; padding-top: clamp(40px, 6vh, 80px); padding-bottom: clamp(28px, 5vh, 56px); row-gap: clamp(16px, 2.6vh, 32px); }
  #products .main { gap: clamp(10px, 1.6vh, 20px); }
  #products .main > .q { font-size: clamp(44px, min(6vw, 8.5vh), 96px); }
  #products .main > .lead { font-size: clamp(19px, min(2vw, 2.8vh), 30px); }
  .doors { gap: clamp(8px, 1.2vh, 14px); }
  .door { min-height: clamp(170px, 25vh, 270px); padding: clamp(16px, 2.2vh, 26px) clamp(18px, 1.8vw, 28px); gap: 10px; }
  .door h3 { font-size: clamp(34px, min(3.6vw, 5.4vh), 56px); }
  .door p { font-size: 15px; line-height: 1.4; }
}

/* ---------- Be: the Be door opens into its own navy section ----------
   On wide screens the section starts under the doors (negative margin, set by the script as --be-over) and its
   navy background is clipped to the Be door's own rectangle; scrolling on, the clip opens to the full section,
   so the door becomes the background. A copy of the door's text sits on top at first and fades as it opens. */
.be { position: relative; z-index: 2; margin-top: calc(-1 * var(--be-over, 0px)); color: var(--navy-ink); }
.be-bg { position: absolute; inset: 0; background: var(--navy); clip-path: inset(var(--ct, 0px) var(--cr, 0px) var(--cb, 0px) var(--cl, 0px) round var(--crad, 0px)); pointer-events: none; }
.be-ghost { position: absolute; margin: 0; pointer-events: none; }
.be.closed .be-bg, .be.closed .be-ghost { visibility: hidden; }
.be-in { position: relative; padding: calc(var(--be-over, 0px) * .75 + clamp(48px, 5vw, 80px)) var(--gut) clamp(88px, 10vw, 160px); display: grid; gap: clamp(56px, 7vw, 112px); opacity: var(--be-show, 1); }
.be .tag { justify-self: start; font: 500 11px var(--f-m); letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 5px 10px; background: var(--sky-soft); color: var(--navy); }
.be-head { display: grid; gap: 18px; max-width: 980px; }
/* the section's own tag waits until the door has opened all the way (the door's copy of it fades out first) */
.be-head .tag { opacity: var(--be-tag, 1); transition: opacity 400ms var(--ease); font-size: 8.5px; padding: 3px 8px; margin-bottom: 18px; } /* smaller than the door's tag, and higher off the Be */
.be-head h2 { font-family: var(--f-q); font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); line-height: 1; letter-spacing: -0.015em; }
/* the Be logo (https://148974181.fs1.hubspotusercontent-eu1.net/hubfs/148974181/alma-labs/brand/be-logo.png; -light has the letters in cream for the navy section), as tall as the old wordmark */
.be-head h2 .be-logo img { display: block; height: .74em; width: auto; }
.be-head h2 span { display: block; font-size: clamp(120px, 16.5vw, 240px); line-height: .82; letter-spacing: -0.03em; color: var(--sky-soft); margin-bottom: 10px; }
.be-head .lead { color: #C8D3E6; max-width: 34ch; }
.be-by { font: 500 12px var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-muted); }
.door.be-door:hover { translate: none; box-shadow: none; } /* its copy in the Be section covers it exactly, so it stays put */

/* Inside Be: a product window floating on the navy, its screens fading one into the next. The screen itself stays
   still, as in the real product; on each one a pointer comes in and does one real thing (sends an answer, opens the
   helper, drags a card), and a short note pops up. Beside it, only the feature on screen is described */
/* the head (tag, Be, title) spans the top row on the left; under it, the paragraph and the list; the window sits
   beside them, its top on the paragraph's top line */
.showcase { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 72px); row-gap: 22px; align-items: start; }
.showcase .be-head { grid-column: 1; grid-row: 1; }
.be-side { grid-column: 1; grid-row: 2; display: grid; gap: 18px; align-content: start; }
.showcase .sc-win { grid-column: 2; grid-row: 1 / span 2; margin-top: var(--win-top, 8px); } /* its top on the top of the subtitle line ("AI fluency for grades 7–9."), measured by the script as --win-top */
/* only the feature on screen is shown: the five sit in one cell and fade into each other; small dots switch them */
.sc-steps { display: grid; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.sc-step { grid-area: 1 / 1; display: grid; gap: 8px; align-content: start; opacity: 0; transition: opacity 500ms var(--ease); }
.sc-step.on { opacity: 1; transition-delay: 250ms; }
.sc-step b { font-weight: 500; font-size: 21px; letter-spacing: -0.03em; color: var(--navy-ink); }
.sc-step span { font-size: 16px; line-height: 1.5; color: #C8D3E6; max-width: 40ch; }
.sc-dots { display: flex; gap: 2px; margin: 18px 0 0 -8px; }
.sc-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.sc-dots button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background-color 300ms var(--ease); }
.sc-dots button:hover::after { background: rgba(255, 255, 255, .5); }
.sc-dots button.on::after { background: var(--navy-ink); }
.sc-win { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #F4F0E9; box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .2); }
.sc-bar { height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 13px; background: #FBFAF7; border-bottom: 1px solid rgba(14, 26, 54, .06); }
.sc-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DCD8CE; }
.sc-view { position: relative; aspect-ratio: 1512 / 950; overflow: hidden; }
.sc-shots { position: absolute; inset: 0; }
/* the product in action (see the markup): covers and cut-outs of the still, moved with the page's UI timing
   (300-600ms, ease-out in, nothing ambient). .go plays a screen's move; without it everything rests at the start */
.sc-act { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; }
.sc-act.on { visibility: visible; }
.sc-act > * { position: absolute; left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); }
.sc-act .cov, .sc-act .crop { width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }
.sc-act .crop { background: var(--img) no-repeat; background-size: calc(10000% / var(--w)) calc(10000% / var(--h)); background-position: calc(var(--l) / (100 - var(--w)) * 100%) calc(var(--t) / (100 - var(--h)) * 100%); }
.sc-act .rise { opacity: 0; transform: translateY(14px); }
.sc-act.go .rise { opacity: 1; transform: none; transition: opacity 400ms var(--ease), transform 500ms cubic-bezier(.2, 0, 0, 1); }
.sc-act .slide { opacity: 0; transform: translateX(32px); }
.sc-act.go .slide { opacity: 1; transform: none; transition: opacity 350ms var(--ease), transform 550ms cubic-bezier(.2, 0, 0, 1); }
.sc-act.go .pop { animation: sc-pop 420ms cubic-bezier(.2, 0, 0, 1); }
@keyframes sc-pop { 40% { transform: scale(1.3); } 100% { transform: none; } }
/* the sorting game: the chip is picked up (tilts a little) and carried toward Not AI; let go just short of it, it
   snaps onto the circle by itself (a quick move with a little overshoot, then a small pulse, like a magnet), turns
   yellow, and a pale yellow patch grows behind it to join the group */
.sc-act .drag { width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); transition: none; }
.sc-act .drag img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-act .drag .chip-y { opacity: 0; }
.sc-act.go .drag { left: calc(var(--nl) * 1%); top: calc(var(--nt) * 1%); transform: rotate(-4deg); transition: left 900ms cubic-bezier(.45, 0, .2, 1), top 900ms cubic-bezier(.45, 0, .2, 1), transform 300ms var(--ease); }
.sc-act.go.snap .drag { left: calc(var(--tl) * 1%); top: calc(var(--tt) * 1%); transform: none; transition: left 260ms cubic-bezier(.34, 1.56, .64, 1), top 260ms cubic-bezier(.34, 1.56, .64, 1), transform 260ms cubic-bezier(.34, 1.56, .64, 1); animation: sc-magnet 760ms ease-out 200ms; }
.sc-act.go.snap .drag .chip-y { opacity: 1; transition: opacity 220ms var(--ease) 140ms; }
/* landing like a drop: squash, stretch, settle */
@keyframes sc-magnet { 25% { scale: 1.08 .9; } 50% { scale: .96 1.05; } 75% { scale: 1.02 .98; } 100% { scale: 1; } }
.sc-act .sc-hull { width: 100%; height: 100%; overflow: visible; }
.sc-act .sc-hull .blob { transform-box: fill-box; transform-origin: center; transform: rotate(-20deg) scale(0); }
.sc-act.go.snap .sc-hull .blob { transform: rotate(-20deg) scale(1); transition: transform 620ms cubic-bezier(.34, 1.56, .64, 1) 80ms; }
.sc-act .grp { width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); transform-origin: 0 60%; }
/* the group gives way a little as the chip joins (pushed from the left), then wobbles back like something soft */
.sc-act.go.snap .grp { animation: sc-jelly 950ms ease-out 160ms; }
@keyframes sc-jelly { 18% { transform: translate(1.6%, -.6%) scale(1.012, .988); } 40% { transform: translate(-.7%, .3%) scale(.994, 1.006); } 64% { transform: translate(.3%, 0) scale(1.003, .997); } 100% { transform: none; } }
/* the chip is its own cut-out (https://148974181.fs1.hubspotusercontent-eu1.net/hubfs/148974181/alma-labs/product/s10-chip.png, transparent outside its outline), so the lifted shadow
   follows the tilted capsule instead of a rounded box that clipped its ends */
.sc-act.go:not(.snap) .drag .chip { filter: drop-shadow(0 8px 10px rgba(14, 26, 54, .2)); }
/* Alma is answering: three dots after the student's message */
.sc-act .typing { display: flex; gap: 5px; opacity: 0; }
.sc-act .typing b { width: 7px; height: 7px; border-radius: 50%; background: #9A968C; }
.sc-act.go .typing { opacity: 1; transition: opacity 300ms var(--ease) 700ms; }
.sc-act.go .typing b { animation: sc-dot 1s ease-in-out 700ms infinite; }
.sc-act.go .typing b:nth-child(2) { animation-delay: 850ms; }
.sc-act.go .typing b:nth-child(3) { animation-delay: 1000ms; }
@keyframes sc-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.sc-shots img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--ease); }
.sc-shots img.on { opacity: 1; }
/* the note: a dot on the part of the screen it talks about, and a small card beside it */
.sc-note { position: absolute; z-index: 2; left: var(--x); top: var(--y); translate: 0 -50%; display: flex; align-items: center; gap: 10px; margin: 0; pointer-events: none; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: left center; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.sc-note.flip { flex-direction: row-reverse; transform-origin: right center; translate: -100% -50%; }
.sc-note.on.pop { opacity: 1; transform: none; transition: opacity 450ms var(--ease), transform 600ms cubic-bezier(.2, 1.4, .4, 1); }
.sc-note::before { content: ""; flex: none; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(47, 111, 179, .22); }
.sc-note span { max-width: 25ch; margin-left: 12px; padding: 9px 13px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.35; letter-spacing: -0.015em; box-shadow: 0 12px 30px rgba(14, 26, 54, .18); }
.sc-note.flip span { margin: 0 12px 0 0; }
/* the end-of-unit confetti, drawn by the script (as in the product's own recording, without its player bar) */
.sc-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* the pointer glides to the spot, presses (it shrinks a touch) and a ring spreads from the tip */
.sc-ptr { position: absolute; z-index: 3; left: var(--ptr-x, 104%); top: var(--ptr-y, 104%); width: 22px; height: 22px; margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); transition: left 1000ms cubic-bezier(.45, 0, .2, 1), top 1000ms cubic-bezier(.45, 0, .2, 1), transform 140ms var(--ease), opacity 400ms var(--ease); }
.sc-ptr svg { display: block; }
.sc-ptr.click { transform: scale(.8); }
.sc-ptr::after { content: ""; position: absolute; left: 5px; top: 3px; width: 12px; height: 12px; margin: -6px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; }
.sc-ptr.click::after { animation: sc-ring 650ms ease-out; }
@keyframes sc-ring { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(3.4); } }

/* the facts and the learning ladder, from the one-pager */
/* the three facts as a short list above the features: the number, and beside it what it means */
.be-facts { display: grid; margin-top: 10px; }
.be-facts div { display: grid; grid-template-columns: clamp(104px, 9vw, 132px) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.be-facts dt { font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.045em; color: var(--sky-soft); white-space: nowrap; }
.be-facts dd { margin: 0; font-size: 15px; line-height: 1.4; color: #C8D3E6; max-width: 32ch; }
.be-ladder { display: grid; gap: 22px; }
.be-ladder .stat { color: var(--navy-ink); }
.be-ladder .stat b { color: var(--sky-soft); }
.be-ladder .cap { color: var(--navy-muted); }
.climb { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.climb li { display: grid; align-content: start; gap: 10px; min-width: 0; }
.climb .cl-top { height: clamp(170px, 18vw, 240px); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; border-bottom: 2px solid rgba(255, 255, 255, .5); }
.climb .cl-top b { font-weight: 500; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.05; letter-spacing: -0.035em; }
.climb .bar { display: block; height: calc(var(--h) * 17%); border-radius: 8px 8px 0 0; transform-origin: bottom; }
.climb li:nth-child(1) .bar { background: #2A3F6E; }
.climb li:nth-child(2) .bar { background: #36558F; }
.climb li:nth-child(3) .bar { background: #4A72B5; }
.climb li:nth-child(4) .bar { background: #6E98D6; }
.climb li:nth-child(5) .bar { background: var(--sky-soft); }
.climb q { quotes: "\201C" "\201D"; font-family: var(--f-q); font-size: clamp(23px, 2.2vw, 31px); line-height: 1.15; color: var(--p-peach); }
.climb p { font-size: 15px; line-height: 1.4; color: #C8D3E6; }
/* laptops only: everything in "Inside Be" (head, paragraph, facts, the feature on screen and the window) fits one
   screen under the menu, so the type and the spacing are capped by the screen's height; big screens stay as they are */
@media (min-width: 901px) and (max-width: 1800px) {
  .showcase { row-gap: 14px; }
  .be-head { gap: 10px; }
  .be-head h2 { font-size: clamp(30px, min(4.2vw, 5.2vh), 60px); }
  .be-head h2 span { font-size: clamp(92px, min(16.5vw, 16.5vh), 240px); margin-bottom: 4px; }
  .be-side { gap: 12px; }
  .be-side .lead { font-size: clamp(18px, min(2.5vw, 2.55vh), 34px); }
  /* on a wide but short screen the window is narrowed by the screen's height, so its bottom stays on screen */
  .showcase .sc-win { max-width: calc(128vh - 280px); }
  .be-facts { margin-top: 2px; }
  .be-facts div { padding: 7px 0; }
  .be-facts dt { font-size: clamp(22px, min(2.4vw, 3.4vh), 34px); }
  .sc-steps { margin-top: 10px; padding-top: 12px; }
  .sc-dots { margin-top: 8px; }
}
@media (min-width: 901px) and (max-width: 1800px) and (max-height: 740px) {
  .be-head h2 span { font-size: clamp(92px, min(16.5vw, 15.5vh), 240px); }
  .be-facts div { padding: 4px 0; }
  .sc-steps { padding-top: 8px; }
}
@media (max-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .showcase .be-head, .be-side, .showcase .sc-win { grid-column: 1; grid-row: auto; }
  .showcase .sc-win { order: 2; }
  .be-side { order: 3; }
  .sc-note span { font-size: 12px; max-width: none; white-space: nowrap; padding: 6px 10px; }
  .climb { grid-template-columns: minmax(0, 1fr); }
  .climb .cl-top { height: auto; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 0; }
  .climb .bar { height: 14px; width: calc(var(--h) * 18%); border-radius: 0 6px 6px 0; transform-origin: left; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-shots img, .sc-note, .sc-note.on.pop { transition: opacity 300ms linear; transform: none; }
  .sc-ptr { display: none; }
  .sc-act .rise, .sc-act .slide { opacity: 1; transform: none; }
  .sc-act .drag, .sc-act.go .drag { transition: none; }
}

/* ---------- 11 form ---------- */
.form { display: grid; gap: 22px; max-width: 900px; }
.field { display: grid; gap: 6px; }
.field label { font: 500 11.5px var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-muted); }
.field input, .field textarea { font: 400 18px var(--f-a); letter-spacing: -0.02em; color: var(--navy-ink); background: transparent; border: 0; border-bottom: 1px solid rgba(244, 243, 236, .25); padding: 8px 0; width: 100%; resize: vertical; transition: border-color var(--t-quick) var(--ease); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--sky); }
.field.big label { font-family: var(--f-q); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.01em; text-transform: none; color: var(--navy-ink); }
.field.big label em { font-style: normal; color: var(--sky); }
/* one line, sitting on its rule; it grows as you type (field-sizing), instead of an empty second line under the placeholder */
.field.big textarea { font-size: 22px; field-sizing: content; min-height: 0; }
.field textarea::placeholder, .field input::placeholder { color: rgba(244, 243, 236, .35); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.form .btn { border: 0; font: 600 15px var(--f-a); cursor: pointer; }
.note { font: 400 12px var(--f-m); color: var(--navy-muted); }
.reveal { grid-column: 1 / -1; font-family: var(--f-q); font-size: clamp(36px, 5.4vw, 84px); line-height: .98; letter-spacing: -0.02em; max-width: 20ch; padding-top: clamp(48px, 8vw, 120px); }
.reveal em { font-style: normal; color: var(--sky); }

.foot { background: var(--navy); color: var(--navy-muted); padding: 28px var(--gut) 44px; display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: baseline; font-size: 14px; border-top: 1px solid var(--navy-2); }
.foot .logo { color: var(--navy-ink); --logo-h: 20px; align-self: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a:hover { color: var(--navy-ink); }
.foot .copy { margin-left: auto; font: 400 12px var(--f-m); }

/* ---------- motion (same system as the paper version) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes tick { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.motion .hero .chipg, .motion .hero .row, .motion .hero .card { animation: rise 650ms var(--ease) both; }
.motion .hero .q .w { display: inline-block; animation: rise 700ms var(--ease) both; animation-delay: calc(var(--wi) * 55ms + 150ms); }
.motion .hero .card { animation-delay: 760ms; }
.motion .hero .row { animation-delay: 860ms; }

/* ---------- scenes: pinned video, the answer replaces the question, then the page slides over.
   Some chapters vary this, by class on the section:
   keep-q       the question stays and the answer joins it (no small echo of the question)
   same-screen  the proof joins on the same screen, on a panel, instead of a page sliding over
   proof-below  the proof comes in under the answer and pushes it up (chapter 01) ---------- */
.echo { display: none; font-family: var(--f-q); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.05; color: var(--muted); }
.pp { display: contents; } /* the proof panel only exists as a box while a same-screen scene is pinned */
.media video.off { visibility: hidden; }
@media (min-width: 901px) and (min-height: 640px) {
  /* the opening and chapter 01 share one camera: the opening scene runs on under chapter 01 */
  .pin .hero-scene { height: 380vh; height: 380svh; }
  .pin .hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  .pin #ch-01 { margin-top: -330vh; margin-top: -330svh; } /* starts half a screen earlier, so the first scroll brings its question all the way up */
  .pin #ch-01 > .stage .media, .pin #ch-01 > .stage::after { display: none; }
  /* chapter 03 waits pinned underneath chapter 02, so 02's page peels away and uncovers it;
     its answer and page shift one screen later to make room for the reveal */
  .pin #ch-03 { margin-top: -100vh; margin-top: -100svh; }
  .pin #ch-03 > .body { margin-top: 190vh; margin-top: 190svh; }

  .pin .scene { position: relative; }
  .pin .scene > .stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  /* the answer gets most of a screen of scrolling to itself before the next page slides over it,
     and drifts up a little meanwhile, so the scroll never goes dead (nothing ever holds the wheel) */
  .pin .scene > .body { position: relative; z-index: 2; margin-top: 90vh; margin-top: 90svh; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(14, 26, 54, .10); }
  /* at least a screen tall, so the page covers the whole video before both move on (a short page stopped halfway up the video) */
  .pin .scene:not(.same-screen) > .body { min-height: 100vh; min-height: 100svh; align-content: center; }
  .pin .scene:not(.same-screen) > .stage .card { translate: 0 calc(var(--read, 0) * -32px); }
  .pin .scene:not(.keep-q) > .stage .echo { display: block; }
  .pin .scene > .stage .q { transition: opacity 320ms cubic-bezier(.4, 0, 1, 1), transform 320ms cubic-bezier(.4, 0, 1, 1); }
  .pin .scene > .stage .card { transition: opacity var(--t-std) var(--ease) 140ms, transform var(--t-std) var(--ease) 140ms; }
  .pin .scene:not(.answered) > .stage .card { opacity: 0; transform: translateY(28px); pointer-events: none; }
  .pin .scene.answered:not(.keep-q) > .stage .q { opacity: 0; transform: translateY(-24px); }

  /* chapter 01: while you scroll toward the answer the question drifts up a little, so the longer wait never feels stuck */
  /* chapter 01's question no longer drifts up after it arrives (21.10): the opening's glide lands it in its final place */

  /* same screen: the proof sits on a second panel over the same video, right above the answer */
  .pin .same-screen { height: 240vh; height: 240svh; }
  .pin #ch-01 { height: 330vh; height: 330svh; } /* ends where the opening scene ends. Her flow (21.10): the opening glides the question into place, the very next scroll brings the answer (data-answer .35), the one after the proof (data-proof .95); guarded by tests/flow.test.mjs */
  .pin .same-screen > .body { position: sticky; top: 0; z-index: 2; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh; padding: calc(var(--hh) + var(--hm) + 56px) var(--gut) calc(clamp(32px, 4.5vw, 64px) + var(--card-h, 0px) + 16px); background: transparent; color: var(--ink); align-content: end; pointer-events: none; border-radius: 0; box-shadow: none; }
  .pin .same-screen > .body > .lbl { display: none; }
  /* or the proof comes in underneath and pushes the answer up to make room */
  .pin .proof-below > .body { padding-bottom: clamp(32px, 4.5vw, 64px); }
  .pin .proof-below.proved > .stage .card { transform: translateY(calc(-1 * (var(--pp-h, 0px) + 16px))); }
  /* the two move in lockstep (same distance, time and curve), so the proof pushes the answer and never slides over it */
  .pin .scene.proof-below > .stage .card { transition: opacity var(--t-std) var(--ease) 140ms, transform 600ms var(--ease); }
  .pin .same-screen.proof-below > .body > .pp { transition: opacity 250ms var(--ease), transform 600ms var(--ease); }
  .pin .same-screen.proof-below:not(.proved) > .body > .pp { transform: translateY(calc(var(--pp-h, 0px) + 16px)) scale(var(--fit, 1)); }
  .pin .same-screen > .body > .pp { grid-column: 9 / -1; justify-self: end; width: var(--pp-w, 100%); display: grid; gap: 18px; min-width: 0; padding: clamp(18px, 2vw, 28px); border-radius: 14px; background: rgba(242, 240, 236, .84); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); border: 1px solid var(--glass-edge); box-shadow: 0 10px 40px rgba(14, 26, 54, .10); transform: scale(var(--fit, 1)); transform-origin: bottom right; pointer-events: auto; transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
  .pin .same-screen.no-card > .body > .pp { grid-column: 8 / -1; } /* chapter 09: the ladder beside the question */
  /* chapters 05 and 06: the teacher's week and the promises read across, so the answer and its proof take half the screen */
  .pin #what-can-i-be > .stage .card, .pin #what-can-i-be > .body > .pp, .pin #ch-06 > .stage .card, .pin #ch-06 > .body > .pp { grid-column: 7 / -1; }
  .pin .same-screen:not(.proved) > .body > .pp { opacity: 0; transform: translateY(40px) scale(var(--fit, 1)); pointer-events: none; }
  .pin .same-screen > .body > .pp > * { grid-column: 1 / -1; }
  .pin .same-screen > .body .main { gap: 18px; }
  .pin .same-screen.tint > .body > .pp { background: rgba(233, 233, 228, .88); }

  /* the proofs, sized for half a screen */
  .pin .pp .cap { font-size: 16px; }
  .pin .pp .dots3 { gap: 24px; }
  .pin .pp .g100 { max-width: none; }
  .pin .pp .num { font-size: clamp(36px, 5vh, 56px); }
  .pin .pp .num.ask-q { font-size: clamp(20px, 2.6vh, 28px); }
  .pin .pp .versus { --max: clamp(110px, 20vh, 220px); }
  .pin .pp .vcol .n { font-size: clamp(36px, 5vh, 60px); }
  .pin .pp .ladder .lq { font-size: clamp(24px, 3.8vh, 40px); }
  .pin .pp .ladder .la { font-size: clamp(22px, 3.4vh, 36px); margin-bottom: 10px; }
  .pin .pp .team { font-size: 15px; padding-top: 14px; }
}

.ready .rv { transition: opacity var(--t-std) var(--ease) var(--d, 0ms), transform var(--t-std) var(--ease) var(--d, 0ms); }
.rv.pending { opacity: 0; transform: translateY(24px); }

.ready .g193 i.on { transition: background-color 240ms var(--ease) calc(var(--i, 0) * var(--step, 5ms) + 150ms), box-shadow 240ms var(--ease) calc(var(--i, 0) * var(--step, 5ms) + 150ms), opacity var(--t-quick) var(--ease); }
/* the literacy grids play in order: 1820, today, then the empty AI grid and its question */
.ready .g100 i { --at: calc(var(--i, 0) * var(--step, 5ms) + var(--base, 150ms)); transition: background-color 260ms var(--ease) var(--at), transform 320ms var(--ease) var(--at), opacity 260ms var(--ease) var(--at); }
.ready .done .g100 i { transition-delay: 0ms; }
.pb .g100 i.on { background: var(--paper-2); transform: scale(.55); }
.pb .g100.ask i { opacity: 0; transform: scale(.55); }
.ready .num.qm { transition: opacity 500ms var(--ease) 2500ms, transform 500ms var(--ease) 2500ms; }
.ready .done .num.qm { transition-delay: 0ms; }
.pb .num.qm { opacity: 0; transform: translateY(12px); }
.dark .g193.pb i.on { background: rgba(244, 243, 236, .12); box-shadow: none; }
/* one smooth stroke per curve; the blue one starts as the yellow one lands, so the two read as one motion (about 1.3s in all) */
.ready .bloom .c-a { transition: stroke-dashoffset 700ms cubic-bezier(.45, 0, .2, 1), fill-opacity 400ms var(--ease) 450ms; }
.ready .bloom .c-b { transition: stroke-dashoffset 700ms cubic-bezier(.45, 0, .2, 1) 450ms, fill-opacity 400ms var(--ease) 900ms; }
/* each curve's words arrive right after it is drawn: the regular class, then one-on-one */
.ready .bloom .bl.la { transition: opacity 300ms var(--ease) 550ms; }
.ready .bloom .bl.lb { transition: opacity 300ms var(--ease) 1000ms; }
.bloom .c-a, .bloom .c-b { stroke-dasharray: var(--len, 0); }
.pb .c-a, .pb .c-b { stroke-dashoffset: var(--len, 0); fill-opacity: 0; }
.pb .bl { opacity: 0; }
/* the table fills row by row, left to right, so Alma's dot lands last in each row and its column fills downward */
.ready .stack .full::before, .ready .stack .half::before { transition: transform 320ms var(--ease) var(--dd, 0ms), opacity 320ms var(--ease) var(--dd, 0ms); }
.stack.pb .full::before, .stack.pb .half::before { transform: scale(0); opacity: 0; }
.ready .stack:not(.done) td.al { transition: background-color 300ms var(--ease) var(--dd, 0ms); } /* no delay once built, so hover stays quick */
.stack.pb td.al, .stack.pb th.al { background: transparent; }
.ready .vcol .blk { transition: transform var(--t-slow) var(--ease) var(--bd, 0ms), opacity var(--t-quick) var(--ease); }
.ready .vcol .n, .ready .vcol .t { transition: opacity 400ms var(--ease) calc(var(--bd, 0ms) + 500ms); }
.pb .vcol .blk { transform: scaleY(0); }
.pb .vcol .n, .pb .vcol .t { opacity: 0; }
/* the week draws left to right, today first, then with AI; the six hours come in last */
.wbar .s { clip-path: inset(0 0 0 0); } /* a clip to animate from; clip-path: none can't be tweened */
.ready .wbar .s { transition: clip-path 600ms var(--ease) var(--sd, 0ms); }
.week.pb .wbar .s { clip-path: inset(0 100% 0 0); }
.ready .steps::before { transition: transform var(--t-slow) var(--ease) 150ms; }
.steps.pb::before { transform: scaleX(0); }
.ready .ladder p { transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.motion .ladder p:not(.lit) { opacity: .2; transform: translateY(8px); }

/* ---------- hovers: quick (150ms), one change per element, only on things you can act on ---------- */
.cta-w { transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform 120ms var(--ease); }
.cta-w:hover { background: var(--ink); color: #fff; }
.ans { transition: background-color var(--t-quick) var(--ease); }
.ans:hover { background: rgba(255, 255, 255, .72); }
.data summary { transition: color var(--t-quick) var(--ease); }
.data summary:hover { color: var(--ink); }
.dark .data summary:hover { color: var(--navy-ink); }
.foot a { transition: color var(--t-quick) var(--ease); }
/* product doors lift a little; the live ones cast a shadow, the coming ones darken their outline */
/* Be's learning ladder climbs step by step, each student's words arriving after its step */
.ready .climb .bar { transition: transform 600ms var(--ease) calc(var(--i, 0) * 140ms + 100ms); }
.climb.pb .bar { transform: scaleY(0); }
.ready .climb q, .ready .climb p { transition: opacity 400ms var(--ease) calc(var(--i, 0) * 140ms + 450ms); }
.climb.pb q, .climb.pb p { opacity: 0; }
@media (max-width: 900px) { .climb.pb .bar { transform: scaleX(0); } }
.ready .doors .door { transition: opacity var(--t-std) var(--ease) var(--d, 0ms), transform var(--t-std) var(--ease) var(--d, 0ms), translate 220ms var(--ease), box-shadow 220ms var(--ease); }
.doors .door { cursor: pointer; }
.doors .door:hover { translate: 0 -4px; }
.doors .door.live:hover { box-shadow: 0 16px 40px rgba(14, 26, 54, .20); }
.doors .door.next:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.doors .door.next h3 { transition: color 220ms var(--ease); }
.doors .door.next:hover h3 { color: var(--ink); }
/* the five pillars: the one under the pointer opens up, its neighbours make room */
@media (min-width: 1001px) and (hover: hover) {
  .pillars { display: flex; }
  .pillars .pillar { flex: 1 1 0; min-width: 0; }
  .ready .pillars .pillar { transition: opacity var(--t-std) var(--ease) var(--d, 0ms), transform var(--t-std) var(--ease) var(--d, 0ms), flex-grow 380ms var(--ease); }
  .pillars:hover .pillar { flex-grow: .8; }
  .pillars .pillar:hover { flex-grow: 1.9; }
}

/* ---------- just the answers ---------- */
body.answers .stage { min-height: 0; padding-block: calc(var(--hh) + 24px) 32px; }
body.answers .ch .stage { padding-top: 32px; }
body.answers .stage .q, body.answers .stage .chipg, body.answers .vtag, body.answers .sub, body.answers .ladder .lq, body.answers .reveal, body.answers .lbl span { display: none; }
body.answers .stage .card { grid-column: 1 / -1; }
body.answers .body { padding-block: clamp(36px, 5vw, 64px); }
body.answers .ladder p, .motion body.answers .ladder p:not(.lit) { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .stage .q, .hero .left { grid-column: 1 / -1; }
  .stage .card { grid-column: 1 / -1; max-width: 560px; }
  .hero .right { grid-column: 1 / -1; }
  .lbl { grid-column: 1 / -1; display: flex; gap: 16px; position: static; }
  .main { grid-column: 1 / -1; }
  .split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .cta-w { margin-left: auto; }
  .pill { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .cta-w { display: none; }
  .ans { font-size: 13px; padding: 6px 11px; }
  .hero .right { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar { min-height: 150px; }
  .doors, .fgrid, .steps { grid-template-columns: minmax(0, 1fr); }
  .rev div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .g193 { grid-template-columns: repeat(14, 1fr); }
  .foot .copy { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before { transition: none !important; animation: none !important; }
}
/* ---------- v2 (condensed version, 2 Nov 2026) ----------
   No chapter 01 after the opening: the opening keeps its own pinned screen, a shorter one,
   and chapter "Is it safe?" (Elena, id ch-07) reads across like the promises did */
@media (min-width: 901px) and (min-height: 640px) {
  .pin .hero-scene { height: 160vh; height: 160svh; }
}
.pin #is-it-safe > .stage .card, .pin #is-it-safe > .body > .pp { grid-column: 7 / -1; }
/* ---------- v2: the page itself never scrolls (2 Nov 2026) ----------
   On wide screens (html.deck) every section is one fixed screen, stacked in place; the wheel, a swipe or the keys
   move one step at a time: the question, then its answer, then the next screen fades in (the contact screen still
   has its form sheet after the answer). Phones keep the ordinary scrolling page */
html.deck, html.deck body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* phones: overflow alone doesn't hold the page still in iPhone Safari, so the body is pinned in place and the finger
   never pans it (touch-action); the swipe is read by the script instead and moves one step */
html.deck { touch-action: none; }
html.deck body { position: fixed; inset: 0; width: 100%; touch-action: none; }
html.deck { scroll-behavior: auto; }
html.deck .top { position: fixed; left: 0; right: 0; margin: 0 var(--gut); }
html.deck main > section { position: fixed; inset: 0; margin: 0; overflow: hidden; visibility: hidden; opacity: 0; z-index: 1; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
html.deck main > section.cur { visibility: visible; opacity: 1; z-index: 2; transition: opacity 700ms var(--ease); }
/* screens with a clip are hidden by opacity alone, never visibility: Safari on the iPhone treats a clip under
   visibility: hidden as off screen and won't play it, even once its screen has come in */
html.deck main > section:has(video) { visibility: visible; pointer-events: none; transition: opacity 700ms var(--ease); }
html.deck main > section.cur:has(video) { pointer-events: auto; }
html.deck .hero-scene { margin-top: 0; }
html.deck .stage { position: absolute; inset: 0; min-height: 0; height: 100%; }
/* the answer card comes in on the second step, the question stays */
html.deck .ch .stage .card { transition: opacity var(--t-std) var(--ease) 100ms, transform 600ms var(--ease); }
html.deck .ch:not(.answered) .stage .card { opacity: 0; transform: translateY(28px); pointer-events: none; }
/* the proof on a sheet: it rises over the video and fills the screen */
html.deck .ch > .body { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: calc(var(--hh) + var(--hm) + 32px) var(--gut) 40px; transform: translateY(101%); transition: transform 800ms var(--ease); border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(14, 26, 54, .10); }
html.deck .ch.proved > .body { transform: none; border-radius: 0; }
.sheet-in { display: contents; }
html.deck .sheet-in { display: grid; width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(22px, 2.8vw, 36px); align-content: center; }
html.deck .sheet-in > .lbl { position: static; }
html.deck #start-tomorrow > .body { padding-bottom: 110px; } /* room for the footer, which comes up with the form */
/* "Is it safe?": the promises come up on the video, under the answer, which moves up to make room */
html.deck .same-screen > .body { background: transparent; box-shadow: none; transform: none; pointer-events: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); align-content: end; align-items: end; padding: 0 var(--gut) clamp(32px, 4.5vw, 64px); }
html.deck .same-screen > .body > .lbl { display: none; }
html.deck .same-screen > .body > .pp { grid-column: 8 / -1; pointer-events: auto; display: grid; gap: 18px; padding: clamp(18px, 2vw, 28px); border-radius: 14px; background: rgba(242, 240, 236, .84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform-origin: bottom right; transition: opacity 300ms var(--ease), transform 600ms var(--ease); }
html.deck .same-screen:not(.proved) > .body > .pp { opacity: 0; transform: translateY(40px); pointer-events: none; }
html.deck #is-it-safe > .stage .card { grid-column: 8 / -1; } /* clear of the question's 7 columns, so both share the bottom row */
html.deck .same-screen.proved > .stage .card { transform: translateY(calc(-1 * (var(--pp-h, 0px) + 16px))); }
/* Be: two steps, the product window, then the learning ladder in its place */
html.deck .be { background: var(--navy); }
html.deck .be-in { height: 100%; padding: calc(var(--hh) + var(--hm) + 28px) var(--gut) 40px; grid-template-areas: "one"; align-items: center; }
html.deck .be-in > * { grid-area: one; transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
/* phones: Be takes two steps, the logo, headline and window first, then the paragraph and features in their place */
@media (max-width: 900px) {
  html.deck .showcase { position: relative; }
  html.deck .showcase > * { transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
  html.deck .be-side { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
  html.deck .be:not(.proved) .be-side { opacity: 0; transform: translateY(40px); pointer-events: none; }
  html.deck .be.proved .showcase > :not(.be-side) { opacity: 0; transform: translateY(-40px); pointer-events: none; }
}
@media (max-width: 900px) { html.deck .same-screen > .body { display: none; } }
@media (max-width: 600px) { html.deck nav.deck-dots { display: none; } } /* they ran over the text */
/* narrow screens: "Is it safe?" stacks like the others, its promises panel under the answer */
@media (max-width: 1000px) {
  html.deck #is-it-safe > .stage .card, html.deck .same-screen > .body > .pp { grid-column: 1 / -1; max-width: 560px; }
}
/* the footer comes up with the form, the last step */
html.deck .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; transform: translateY(100%); }
html.deck.deck-ready .foot { transition: transform 600ms var(--ease); } /* not on load, or it slides away across the first screen */
html.deck.at-end .foot { transform: none; }
/* where you are: one dot per screen, on the right edge */
.deck-dots { display: none; }
html.deck .deck-dots { position: fixed; z-index: 26; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 4px; }
.deck-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.deck-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(14, 26, 54, .22); transition: background-color 250ms var(--ease), transform 250ms var(--ease); }
.deck-dots button[aria-current="true"]::before { background: var(--blue); transform: scale(1.35); }
html.deck.on-dark .deck-dots button::before { background: rgba(244, 243, 236, .3); }
html.deck.on-dark .deck-dots button[aria-current="true"]::before { background: var(--sky-soft); }
@media (prefers-reduced-motion: reduce) {
  html.deck .ch .stage .card, html.deck .ch > .body, html.deck .be-in > *, html.deck .same-screen > .body > .pp { transform: none !important; }
  html.deck .ch:not(.proved) > .body:not(.same-screen > .body) { opacity: 0; visibility: hidden; }
}

/* ---------- v2, round 3 (2 Nov 2026) ---------- */
/* no menu bar: the logo alone sits in the top corner (the file she sent, https://148974181.fs1.hubspotusercontent-eu1.net/hubfs/148974181/alma-labs/brand/alma-labs-logo.png, in white as
   -white.png), Contact us in the other. A plain image, not a CSS mask: a mask doesn't load when the page is opened
   straight from the disk (file://). The white is blended by difference, so it reads dark on the white studio and
   light on navy */
.logo-img { display: block; flex: none; }
.logo-img img { display: block; height: var(--logo-h); width: auto; }
.logo-img.corner { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + var(--hm) + (var(--hh) - var(--logo-h)) / 2); left: var(--gut); --logo-h: clamp(24px, 2.2vw, 32px); mix-blend-mode: difference; }
.foot .logo-img { --logo-h: 20px; align-self: center; }
.cta-w.corner { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + var(--hm) + (var(--hh) - 38px) / 2); right: var(--gut); display: inline-flex; align-items: center; height: 38px; }
.hero-scene { margin-top: 0; }
.pill { top: calc(env(safe-area-inset-top, 0px) + var(--hm) + (var(--hh) - 34px) / 2); }

/* Be, as in the one-pager: the small logo and the headline over the product window on the left, the paragraph and
   the four features down the right */
.be-head .be-logo { display: block; }
.be-head .be-logo img { display: block; height: clamp(40px, 4.4vw, 60px); width: auto; }
.be-head h2 { font-family: var(--f-a); font-weight: 300; font-size: clamp(30px, min(3.3vw, 5.4vh), 56px); line-height: 1.12; letter-spacing: -0.02em; max-width: 19em; }
.be-head h2 b { font-weight: 500; }
.be-feats { display: grid; margin: 4px 0 0; }
.be-feats div { display: grid; gap: 6px; padding: clamp(12px, 1.8vh, 20px) 0; } /* dividers removed (J.G., 4 Nov 2026) */
.be-feats dt { font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.02em; color: var(--navy-ink); }
.be-feats dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: #C8D3E6; max-width: 44ch; }
@media (min-width: 901px) {
  .showcase { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); row-gap: clamp(18px, 2.6vh, 32px); }
  .showcase .be-head { grid-column: 1; grid-row: 1; }
  .showcase .sc-win { grid-column: 1; grid-row: 2; margin-top: 0; }
  .showcase .sc-dots { grid-column: 1; grid-row: 3; margin-top: -8px; }
  .be-side { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 900px) { .showcase .sc-dots { order: 2; } }

/* the last screen: question and answer together on one glass panel (the question was lost over the crowd), the
   contact button under it */
#start-tomorrow .stage .card.close { gap: 14px; padding: clamp(22px, 2.6vw, 36px) clamp(26px, 3.4vw, 48px); }
#start-tomorrow .stage .card.close .q { grid-column: auto; font-size: clamp(44px, min(5.6vw, 8.6vh), 92px); color: var(--ink); max-width: none; margin-bottom: 6px; }
#start-tomorrow .stage .row { justify-content: center; }

/* ---------- v2, mobile round (3 Nov 2026) ---------- */
/* the corner logo is black throughout; on Be (navy) it gives way to the Be logo in the same corner */
.logo-img.corner { mix-blend-mode: normal; transition: opacity 400ms var(--ease), visibility 0s linear 0s; }
.be-corner { position: fixed; z-index: 30; left: var(--gut); --logo-h: clamp(30px, 2.8vw, 42px); top: calc(env(safe-area-inset-top, 0px) + var(--hm) + (var(--hh) - var(--logo-h)) / 2); opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
.be-corner img { display: block; height: var(--logo-h); width: auto; }
html.on-be .be-corner { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease); }
html.on-be .logo-img.corner { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
@media (max-width: 900px) {
  /* the question waits at the bottom of the screen, and goes up with the answer as it comes in under it
     (--lift is the answer's height plus the gap, measured by the script) */
  html.deck .ch:not(.all-in) .stage .q { transition: transform 600ms var(--ease); }
  html.deck .ch:not(.all-in):not(.answered) .stage .q { transform: translate(calc(-1 * var(--pad)), var(--lift, 0px)); }
  /* and once the answer is in, the question sits on the same glass panel as the answer, so it reads over the video.
     One panel drawn behind both (the card's own glass is turned off); the question is inset by the card's padding,
     and stands flush left while it waits alone */
  html.deck .ch:not(.all-in) .stage-in { --pad: clamp(20px, 2.2vw, 30px); }
  html.deck .ch:not(.all-in) .stage .q { padding-inline: var(--pad); }
  html.deck .ch:not(.all-in) .stage-in { row-gap: 6px; }
  html.deck .ch:not(.all-in) .stage .card { padding-top: 6px; }
  html.deck .ch:not(.all-in) .stage .card.glass { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; }
  html.deck .ch:not(.all-in) .stage-in::before { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; top: calc(-1 * var(--pad)); width: min(100%, 560px); border-radius: 14px; border: 1px solid var(--glass-edge); box-shadow: 0 10px 40px rgba(14, 26, 54, .10); background: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); opacity: 0; transform: translateY(28px); transition: opacity var(--t-std) var(--ease) 100ms, transform 600ms var(--ease); }
  html.deck .ch:not(.all-in).answered .stage-in::before { opacity: 1; transform: none; }
  /* the last screen stands alone: no footer under it, and no Contact us in the corner (it has its own) */
  html.deck.at-end .foot { transform: translateY(100%); }
  /* the last panel sits at the bottom of the screen, under the boy's face even when he comes up close to draw */
  html.deck #start-tomorrow > .stage { align-content: end; padding-top: 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
  html.deck .cta-w.corner { transition: opacity 400ms var(--ease), visibility 0s linear 0s; }
  html.deck.at-end .cta-w.corner { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
}
/* ---------- v2, Become (3 Nov 2026) ---------- */
/* Become, under Be and built the same way: navy, its own logo in the corner (https://148974181.fs1.hubspotusercontent-eu1.net/hubfs/148974181/alma-labs/brand/become-logo-light.png, the letters
   in cream), the headline over a product screenshot on the left, the programme down the right. On a phone it takes two
   steps like Be: headline and screenshot, then the list */
html.on-be .bc-corner { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
html.on-become .bc-corner { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease); }
html.on-become .logo-img.corner { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
.become .be-head { gap: 14px; }
.bc-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .bc-show .bc-shot { grid-column: 1; grid-row: 2; margin-top: 0; max-width: 760px; }
  /* the whole is centred on the screen; the right side's heading drops below the headline by as much as Be's does
     (--lead-y, measured on Be by the script) */
  .bc-show .be-side { grid-row: 1 / span 2; align-self: start; margin-top: var(--lead-y, 0px); }
}
@media (max-width: 900px) {
  .bc-show .bc-shot { order: 2; }
}

/* ---------- HubSpot migration tweaks (4 Nov 2026) ---------- */
/* keep the Be / Become feature list clear of the fixed screen dots on the right */
@media (min-width: 901px) { html.deck .be-in { padding-right: calc(var(--gut) + 36px); } }
/* Screens wider than 1800px: the product window must keep its height-based cap, or the deck's fit-to-height loop
   runs away (the window grows with the width it is given, so every zoom step makes it taller). Same cap as 901–1800px. */
@media (min-width: 1801px) { .showcase .sc-win { max-width: calc(128vh - 280px); } }
/* Wide screens (≥1801px): the headline was running away from the feature text. Rein the headline in a little and
   give the features more presence and air, so the two halves of the screen read as one composition. */
@media (min-width: 1801px) {
  .showcase { column-gap: clamp(48px, 4vw, 90px); grid-template-columns: minmax(300px, 11fr) minmax(0, 9fr); }
  .be-head h2 { font-size: clamp(34px, min(2.6vw, 5vh), 46px); max-width: 18em; }
  /* the features sit beside the product window, centred on it (same on Be and Become) */
  .showcase .be-side, .showcase.bc-show .be-side { grid-row: 2; align-self: center; padding-top: 0; margin-top: 0; }
  html.deck .be-in { align-items: start; }
  /* Be and Become line up: same window width cap, and the headline block keeps the same height on both */
  .bc-show .bc-shot { max-width: calc(128vh - 280px); }
  .showcase .be-head { min-height: calc(4 * 1.12em * 1.05); align-content: start; }
  .showcase .be-head h2 { min-height: calc(4 * 1.12em); }
  .be-feats { gap: 0; }
  .be-feats div { padding: 0 0 clamp(22px, 3.4vh, 36px); gap: 10px; }
  .be-feats div:last-child { padding-bottom: 0; }
  .be-feats dt { font-size: clamp(24px, 1.5vw, 30px); }
  .be-feats dd { font-size: 18px; line-height: 1.5; max-width: 44ch; }
  .be-side .lead { font-size: clamp(22px, min(1.6vw, 2.6vh), 30px); }
}

/* ---------- Copy & typography notes (5 Nov 2026) ---------- */
/* Meet BE / Meet BECOME: only the product name is bold; the rest of the headline stays light */
.be-head h2 b { font-weight: 500; }
/* The feature list beside the product window: larger and easier to read, so it balances the headline */
@media (min-width: 901px) {
  .be-feats dt { font-size: clamp(21px, 1.7vw, 27px); }
  .be-feats dd { font-size: clamp(17px, 1.2vw, 19.5px); line-height: 1.5; }
}
@media (min-width: 1801px) {
  .be-feats dt { font-size: clamp(26px, 1.6vw, 32px); }
  .be-feats dd { font-size: clamp(19px, 1.05vw, 21px); }
}
/* Closing screen: "We are helping them create it." a step up; "Powered by AI. Led by people." in ink, closer to the lead */
#start-tomorrow .stage .card.close .sub { font-size: clamp(18px, 1.45vw, 21px); }
#start-tomorrow .stage .card.close .sub.pw { font-size: clamp(19px, 1.65vw, 24px); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }

/* ---------- Language switch (5 Nov 2026): a small pill beside the Contact button; links to the same page on the other site ---------- */
.lang-w.corner { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + var(--hm) + (var(--hh) - 38px) / 2); right: calc(var(--gut) + 126px); display: inline-flex; align-items: center; height: 38px; padding: 0 13px; border-radius: 99px; background: rgba(255, 255, 255, .72); color: var(--ink); font: 600 13px var(--f-a); text-decoration: none; box-shadow: 0 2px 10px rgba(14, 26, 54, .08); transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), opacity 400ms var(--ease), visibility 0s linear 0s; }
.lang-w.corner:hover { background: var(--ink); color: #fff; }
html.deck.at-end .lang-w.corner { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
@media (max-width: 560px) { .lang-w.corner { right: calc(var(--gut) + 112px); height: 34px; padding: 0 11px; } }

/* ---------- 6 Nov 2026: BECOME in its own colour, a tint of the Become mark's cyan (#23C4FF at 60%, so the cyan
   mark in the corner logo still shows against it), with navy text; and the hairline seam between the dark sections
   (anti-aliasing at a fractional pixel) closed by overlapping their backgrounds ---------- */
.be-bg { inset: -1px 0; }
#become { --navy: #9FE3FF; --navy-ink: #0E1A36; --navy-muted: #0E1A36; --sky-soft: #0E1A36; }
#become .be-head h2, #become .be-head .lead, #become .be-feats dt, #become .be-feats dd { color: #0E1A36; }
#become .sc-dots button::after { background: rgba(14, 26, 54, .22); }
#become .sc-dots button:hover::after { background: rgba(14, 26, 54, .45); }
html.deck.on-become .deck-dots button::before { background: rgba(14, 26, 54, .22); }
html.deck.on-become .deck-dots button[aria-current="true"]::before { background: #0E1A36; }
html.a11y-contrast #become { --navy: #000; --navy-ink: #fff; }
html.a11y-contrast #become .be-head h2, html.a11y-contrast #become .be-feats dt, html.a11y-contrast #become .be-feats dd { color: #fff !important; }
/* on phones the Become wordmark ran into the language pill: a smaller corner logo there */
@media (max-width: 560px) { .be-corner { --logo-h: 24px; } }

/* ---------- 6 Nov 2026: "Resources" pill in the header, between Contact us and the language pill; on phones there is
   no room for a third pill, so it lives in the footer there ---------- */
.res-w.corner { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + var(--hm) + (var(--hh) - 38px) / 2); right: calc(var(--gut) + 126px); display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 99px; background: rgba(255, 255, 255, .72); color: var(--ink); font: 600 13px var(--f-a); text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(14, 26, 54, .08); transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), opacity 400ms var(--ease), visibility 0s linear 0s; }
.res-w.corner:hover { background: var(--ink); color: #fff; }
html.deck.at-end .res-w.corner { opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
.lang-w.corner { right: calc(var(--gut) + 234px); }
@media (max-width: 560px) { .res-w.corner { display: none; } .lang-w.corner { right: calc(var(--gut) + 112px); } }