/* =========================================================================
   TeacherKit — live 1-on-1 AI tutoring · marketing site

   THE THESIS: greyscale chrome, colour only where the teacher actually draws.
   The board_sketch tool tells the model "renkler SADECE #1D1D1F ve #0071E3",
   and real stored lessons contain exactly those two values — so on this site
   blue is not a brand colour, it means "the teacher did that".

   The mix:
   · OpenAI / ChatGPT — the off-black #0d0d0d (never #000), the grey ramp,
     hairlines as alpha over the ink rather than solid greys, headings at 600
     with tracking flattened to 0, and an UNBRANDED near-black primary button.
     Values verified against @openai/apps-sdk-ui, their shipped token CSS.
   · Notion — the warm paper #f7f6f3 on component surfaces, and the ni_* black
     line icons the product itself already uses (state via opacity, never hue).
   · Apple — the 8pt grid, New York for display, SF Pro for text, pill CTAs.
   · The Thing — the blurred-circle ambient glows (MoreFeatures.tsx), turned
     into a reusable .glows/.glow utility so any section can carry light.
   ========================================================================= */

/* ----------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, picture, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2.5px solid var(--link); outline-offset: 3px; border-radius: 4px; }
::selection { background: #d8e7ff; color: var(--ink); }

/* ------------------------------------------------------------- Tokens */
:root {
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Mono", monospace;
  /* the teacher's hand — the same face the real board writes in */
  --font-hand: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Varela Round", -apple-system, sans-serif;

  /* ---- Ink: OpenAI's off-black ramp, verified from @openai/apps-sdk-ui.
     Their text colour is #0d0d0d and never #000; secondary is #5d5d5d. ---- */
  --ink:    #0d0d0d;
  --ink-2:  #303030;
  --muted:  #5d5d5d;
  --faint:  #6e6e6e;        /* clears 4.5:1 on white AND on the warm sheet */

  /* ---- Paper: Apple white, Notion's warm sheet, ChatGPT's grey steps ---- */
  --paper:      #ffffff;
  --paper-warm: #f7f6f3;    /* Notion */
  --paper-2:    #f9f9f9;    /* ChatGPT gray-50 */
  --paper-3:    #f3f3f3;    /* ChatGPT gray-75 */

  /* ---- Hairlines: alpha over the ink, the way ChatGPT does it, so they sit
     correctly on white, on warm paper and over a coloured glow alike ---- */
  --line:   rgba(13,13,13,.14);
  --line-2: rgba(13,13,13,.08);
  --line-3: rgba(13,13,13,.05);

  /* ---- Action: OpenAI's primary button is deliberately UNBRANDED ---- */
  --action:       #181818;
  --action-hover: #303030;
  --on-accent:    #ffffff;

  /* ---- The teacher's blue. Reserved for links and anything the teacher
     draws, because board_sketch really is told to draw in #1D1D1F and
     #0071E3 — so on this site blue means "the teacher did that". ---- */
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-press: #006edb;
  --accent-soft: rgba(0,113,227,.10);
  /* Interactive TEXT uses OpenAI's link blue, which is a step darker and so
     still clears AA on the warm sheet. Two blues, two jobs: --link is
     "you can click this", --accent is "the teacher drew this". */
  --link: #0169cc;
  --link-hover: #013566;

  /* Ambient glow palette — Apple system colours, only ever blurred and behind */
  --g-blue:   rgba(0,113,227,.15);
  --g-indigo: rgba(88,86,214,.14);
  --g-purple: rgba(175,82,222,.13);
  --g-pink:   rgba(255,45,85,.12);
  --g-orange: rgba(255,159,10,.15);
  --g-green:  rgba(48,209,88,.14);
  --g-teal:   rgba(48,176,199,.14);

  --r-pill: 980px;
  --r-lg: 24px;
  --r-md: 16px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --maxw: 1080px;
  --maxw-wide: 1200px;
  --maxw-narrow: 720px;
  --gutter: clamp(22px, 5vw, 48px);
  --nav-h: 56px;
  --spring: cubic-bezier(.32,.72,0,1);

  --t-display: clamp(2.7rem, 1.3rem + 5.9vw, 5rem);
  --t-h1:      clamp(2rem, 1.35rem + 2.9vw, 3.1rem);
  --t-h2:      clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  --t-h3:      clamp(1.18rem, 1.05rem + .6vw, 1.4rem);
  --t-lede:    clamp(1.12rem, 1rem + .55vw, 1.35rem);
  --t-body:    1.0625rem;
  --t-small:   .9375rem;
  --t-xs:      .8125rem;
  color-scheme: light;
}

/* --------------------------------------------------------------- Base */
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -.003em;
  overflow-x: hidden;
}
.skip { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-pill); z-index: 200; transition: top .2s ease; font-size: var(--t-small); font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.wrap--wide { max-width: var(--maxw-wide); }
.narrow { max-width: var(--maxw-narrow); }
section { position: relative; }
.section-pad { padding-block: clamp(60px, 8vw, 120px); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

/* ------------------------------------------------- Ambient glow system */
/* One blurred circle per accent. Lifted from The Thing's FeatureSection:
   an absolutely-positioned round div with a heavy blur and a low-alpha
   Apple system colour. Position with --gx/--gy, size with --gs, tint --gc. */
.glows { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow {
  position: absolute;
  left: var(--gx, 50%); top: var(--gy, 50%);
  width: var(--gs, 520px); height: var(--gs, 520px);
  margin: calc(var(--gs, 520px) / -2) 0 0 calc(var(--gs, 520px) / -2);
  border-radius: 50%;
  background: var(--gc, var(--g-blue));
  filter: blur(var(--gb, 120px));
}
.glow--blue   { --gc: var(--g-blue); }
.glow--indigo { --gc: var(--g-indigo); }
.glow--purple { --gc: var(--g-purple); }
.glow--pink   { --gc: var(--g-pink); }
.glow--orange { --gc: var(--g-orange); }
.glow--green  { --gc: var(--g-green); }
.glow--teal   { --gc: var(--g-teal); }
.glow--drift { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(6%, -5%, 0) scale(1.12); } }

/* --------------------------------------------------------- Type roles */
.display { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-display); line-height: 1.03; letter-spacing: -.022em; }
.h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h1); line-height: 1.07; letter-spacing: -.02em; }
.h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.018em; }
/* Sans headings sit at 600 and 0 tracking — OpenAI flattens every tracking
   token to 0em and uses semibold for every heading. Only the serif display
   keeps optical negative tracking, which is a serif's own business. */
.h3 { font-weight: 600; font-size: var(--t-h3); line-height: 1.3; letter-spacing: 0; }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--muted); letter-spacing: -.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; opacity: .55; }
.muted { color: var(--muted); }
strong, b { font-weight: 600; color: var(--ink); }

/* The Notion icon set ships as black template PNGs. State is carried by
   opacity, never by recolouring — and every one of them needs a size, or the
   raw 144px artwork lands on the page. */
.ni { width: 18px; height: 18px; flex: none; object-fit: contain; opacity: .82; }
.ni-sm { width: 14px; height: 14px; }
.ni-lg { width: 24px; height: 24px; }
.ink-accent { color: var(--accent); }
.hand { font-family: var(--font-hand); }
.shead { display: grid; gap: var(--s-3); margin-bottom: clamp(32px, 5vw, 56px); }
.shead .lede { max-width: 62ch; }
.shead.center { justify-items: center; }
.shead.center .lede { text-align: center; }
.squig { width: 118px; opacity: .5; margin-top: var(--s-2); }
.shead.center .squig { margin-inline: auto; }

/* --------------------------------------------------------- Buttons */
/* The primary action is near-black, not brand-blue: OpenAI's own primary button
   is gray-900 with inverse text. Blue is left to mean "the teacher drew this". */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 500; letter-spacing: 0; padding: 11px 22px; border-radius: var(--r-pill); border: 0; background: var(--action); color: var(--on-accent); cursor: pointer; transition: background .18s ease, transform .12s ease; white-space: nowrap; }
.btn:hover { background: var(--action-hover); }
.btn:active { background: var(--action-hover); transform: scale(.98); }
.btn--lg { padding: 13px 26px; font-size: var(--t-body); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--link); padding: 11px 6px; border-radius: 0; }
.btn--ghost:hover { background: transparent; color: var(--link-hover); }
.btn--ghost::after { content: "\203A"; margin-left: 4px; font-weight: 400; transition: transform .2s ease; }
.btn--ghost:hover::after { transform: translateX(3px); }
.btn--lg.btn--ghost { padding: 13px 6px; }

/* ------------------------------------------------------------ Navbar */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: background-color .4s ease, border-color .3s ease; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: var(--s-5); width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
/* The app's own icon, not a decorative blob. It used to be a blue gradient
   circle that appeared nowhere else in the product — so the thing at the top of
   every page was the one mark a returning student had never seen. Now the nav,
   the browser tab, the phone home screen and the Mac app all show the same T. */
.brand__mark { width: 26px; height: 26px; flex: none; background: url("assets/favicon.svg") center/contain no-repeat; }
.brand__wm { font-weight: 660; font-size: 1.02rem; letter-spacing: -.02em; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: var(--s-4); }
.nav__links a { font-size: var(--t-small); font-weight: 500; color: var(--muted); padding: 8px 12px; transition: color .15s ease; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer; color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.nav__burger { display: none; }
@media (max-width: 900px) { .nav__links { display: none; } .nav__cta .btn--ghost { display: none; } .nav__burger { display: inline-grid; } }

/* visibility, not just opacity: opacity:0 leaves all seven links in the tab
   order and the accessibility tree — including on desktop, where the burger
   that controls them is display:none and nobody can close it again. */
.mmenu { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s-4) var(--gutter) var(--s-6); display: grid; gap: 2px; transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.mmenu.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mmenu a { font-size: 1.05rem; font-weight: 540; color: var(--ink); padding: 14px 4px; border-bottom: 1px solid var(--line-2); }
.mmenu .btn { margin-top: var(--s-4); }

/* -------------------------------------------------------------- Hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__title { margin-bottom: var(--s-5); }
.hero__lede { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.hero__note { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-size: var(--t-small); color: var(--faint); }
.hero__note .ni { width: 15px; height: 15px; }
.hero__triad { list-style: none; padding: 0; margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.hero__triad li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 540; color: var(--muted); }
.hero__triad .ni { width: 17px; height: 17px; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

/* ================================================================
   THE SLATE — the board, rebuilt from the product's own components.
   Class names mirror public/style.css (.block, .w-body, .sketch …)
   so the demo and the real room can't visually drift apart.
   ================================================================ */
.slate {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(29,29,31,.04), 0 18px 60px rgba(29,29,31,.10);
  overflow: hidden;
  --slate-pad: clamp(18px, 2.4vw, 28px);
}
.slate__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line-2); background: rgba(255,255,255,.86); }
.slate__title { font-size: 13px; font-weight: 620; letter-spacing: -.01em; }
.slate__title span { color: var(--muted); font-weight: 400; }
.slate__clock { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slate__prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); transition: width 1.2s linear; }
.slate__board { position: relative; min-height: var(--slate-h, 340px); padding: var(--slate-pad) var(--slate-pad) 116px; }
.slate--tall .slate__board { --slate-h: 420px; }
.slate--short .slate__board { --slate-h: 250px; }

.slate .tk-section { margin: 0 0 18px; }
.slate .tk-section .tk-sec-t { display: block; font-family: var(--font-hand); font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.slate .tk-section .rule { display: block; height: 2px; width: 0; background: var(--ink); opacity: .18; border-radius: 2px; margin-top: 6px; transition: width .7s var(--spring); }
.slate .tk-section.in .rule { width: 100%; }

.slate .block { margin: 0 0 13px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--spring), transform .5s var(--spring); }
.slate .block.in { opacity: 1; transform: none; }
.slate .block.w-title { font-family: var(--font-hand); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.slate .block.w-heading { font-family: var(--font-hand); font-size: 18px; font-weight: 700; }
.slate .block.w-body { font-family: var(--font-hand); font-size: 16px; line-height: 1.55; }
.slate .block.w-em { font-family: var(--font-hand); font-size: 16px; line-height: 1.5; color: var(--accent); font-weight: 600; }
.slate .block.w-formula { font-family: var(--font-hand); font-size: 21px; font-weight: 600; text-align: center; padding: 14px; background: var(--accent-soft); border-radius: var(--r-md); }
.slate .block.sketch { text-align: center; }
.slate .block.sketch svg { max-width: min(100%, 340px); height: auto; margin-inline: auto; }
.slate .block.sketch .cap { font-size: 12px; color: var(--muted); margin-top: 6px; }
.slate .block.q-rec { display: flex; gap: 9px; align-items: center; font-family: var(--font-hand); font-size: 15px; color: var(--muted); }
.slate .block.q-rec .ni { width: 16px; height: 16px; }
.slate .block.lit { background: var(--accent-soft); border-radius: 10px; box-shadow: 0 0 0 7px var(--accent-soft); }

/* The stroke-drawn sketch — the product's trick: pathLength="1000" normalises
   every path so one dash of 1000 covers it exactly, then the offset is animated
   away. Selected by CLASS, never by [pathLength]: selector attribute names are
   lowercased when parsed in an HTML document, but SVG attribute matching is
   case-sensitive, so [pathLength] silently never matches in the cascade. */
.slate .sketch svg .tk-stroke { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.slate .sketch.in svg .tk-stroke { animation: tk-draw 1.1s var(--spring) forwards; }
@keyframes tk-draw { to { stroke-dashoffset: 0; } }
.slate .sketch svg text { opacity: 0; transition: opacity .5s ease .7s; font-family: var(--font-hand); }
.slate .sketch.in svg text { opacity: 1; }

/* board_point — the teacher's finger, inside the sketch's own coordinates */
.tk-point-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: tk-ping 1.9s var(--spring) infinite; }
.tk-point-dot { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.tk-point-label { fill: var(--accent); font-family: var(--font-hand); font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
@keyframes tk-ping { 0% { opacity: .85; transform: scale(.45); } 70%, 100% { opacity: 0; transform: scale(1.6); } }

/* board_shimmer — a light travelling THROUGH the ink, clipped to the glyphs.
   It is applied to .wtext, never to the block: .w-formula paints its pill with
   the `background` shorthand, which would reset background-clip back to
   border-box and flood the whole pill with the gradient. */
.slate .wtext { display: inline; }
.slate .wtext.shimmer-text {
  background-image: linear-gradient(100deg, var(--ink) 42%, var(--accent) 50%, var(--ink) 58%);
  background-size: 260% 100%;
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: tk-shimmer 1.7s ease-in-out 2;
}
.slate .w-formula .wtext.shimmer-text, .slate .w-em .wtext.shimmer-text { background-image: linear-gradient(100deg, var(--accent) 42%, var(--ink) 50%, var(--accent) 58%); }
@keyframes tk-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* room chrome */
.slate__orb { position: absolute; left: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #4d9ef0, var(--accent)); box-shadow: 0 6px 20px rgba(0,113,227,.28); }
.slate__orb.listening { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.07); } }
/* The caption gets its own row ABOVE the dock — in the room they share the
   bottom edge and the dock covers the tail of a long line. */
.slate__cap { position: absolute; left: 20px; right: 94px; bottom: 64px; font-size: 13px; line-height: 1.4; color: var(--muted); max-height: 38px; overflow: hidden; }
.slate__cap b { color: var(--ink); font-weight: 620; }
.slate__dock { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); box-shadow: 0 6px 24px rgba(29,29,31,.12); border: 1px solid var(--line-2); }
.slate__dock span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.slate__dock span.on { background: var(--accent); }
.slate__dock .ni { width: 17px; height: 17px; opacity: .7; }
.slate__dock span.on .ni { filter: invert(1); opacity: 1; }
.slate__cam { position: absolute; right: 16px; bottom: 16px; width: 62px; aspect-ratio: 3/4; border-radius: 12px; background: linear-gradient(160deg, #2b2b2e, #131315); box-shadow: 0 6px 22px rgba(29,29,31,.2); display: grid; place-items: center; }
.slate__cam span { font-size: 9px; color: rgba(255,255,255,.55); letter-spacing: .04em; }

.slate__qcard {
  position: absolute; left: 50%; bottom: 66px; z-index: 4;
  width: min(360px, calc(100% - 40px));
  transform: translateX(-50%) translateY(28px) scale(.94); opacity: 0; pointer-events: none;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  border: 1px solid var(--line-2); border-radius: 20px; padding: 16px 20px;
  box-shadow: 0 20px 60px rgba(29,29,31,.16);
  transition: transform .6s var(--spring), opacity .35s ease, border-color .3s ease;
}
.slate__qcard.show { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
.slate__qcard.correct { border-color: var(--accent); }
.slate__qcard .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.slate__qcard .q { font-family: var(--font-hand); font-size: 17px; font-weight: 600; line-height: 1.35; }
.slate__qcard .choices { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.slate__qcard .choices span { padding: 6px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 13px; transition: background .3s, border-color .3s, color .3s; }
.slate__qcard .choices span.picked { background: var(--accent); border-color: var(--accent); color: #fff; }
.slate__qcard .verdict { margin-top: 10px; font-size: 13px; font-weight: 620; color: var(--accent); display: none; }
.slate__qcard.correct .verdict { display: block; }

.slate__replay { position: absolute; right: 12px; top: 52px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.92); font-size: 12px; font-weight: 550; color: var(--muted); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s ease, color .2s ease, visibility .3s; }
.slate__replay.show { opacity: 1; visibility: visible; }
.slate__replay .ni { width: 13px; height: 13px; }
.slate__replay:hover { color: var(--ink); }

.slate__cue { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--faint); text-align: center; }
.slate__cue code { font-family: var(--font-mono); font-size: .95em; color: var(--muted); }

/* ------------------------------------------------------------ Pillars */
.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.pillar.rev .pillar__copy { order: 2; }
.pillar__num { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); }
.pillar__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.018em; margin-bottom: var(--s-4); }
.pillar__body { color: var(--muted); max-width: 52ch; }
.pillar__list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.pillar__list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-size: var(--t-small); }
.pillar__list .ck { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); margin-top: 1px; }
.pillar__list .ck .ni { width: 13px; height: 13px; opacity: .85; }
.pillar__more { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s-5); font-size: var(--t-small); font-weight: 550; color: var(--link); }
.pillar__more::after { content: "\203A"; transition: transform .2s ease; }
.pillar__more:hover::after { transform: translateX(3px); }
@media (max-width: 860px) { .pillar { grid-template-columns: 1fr; } .pillar.rev .pillar__copy { order: 0; } }

/* -------------------------------------------------------------- Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.card { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .35s var(--spring), box-shadow .35s ease, border-color .3s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(29,29,31,.08); border-color: var(--line); }
.card__ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); margin-bottom: var(--s-4); }
.card__ic .ni { width: 20px; height: 20px; opacity: .86; }
.card h3 { font-size: 1.02rem; font-weight: 640; letter-spacing: -.012em; margin-bottom: var(--s-2); }
.card p { font-size: var(--t-small); color: var(--muted); }
a.card { display: block; }
a.card::after { content: "\203A"; position: absolute; right: 20px; top: 20px; color: var(--faint); transition: transform .2s ease, color .2s ease; }
a.card:hover::after { transform: translateX(3px); color: var(--accent); }

/* ------------------------------------------------------- Tool grid */
/* Hairlines come from each cell's own ring, not from a coloured gap showing
   through — a partial last row would otherwise leave a grey rectangle. */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.tool { background: var(--paper); padding: var(--s-5); display: grid; gap: 5px; align-content: start; box-shadow: 0 0 0 1px var(--line-2); transition: background .25s ease; }
.tool:hover { background: var(--paper-2); }
.tool__name { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600; color: var(--accent); letter-spacing: -.01em; }
.tool__t { font-size: var(--t-small); font-weight: 620; letter-spacing: -.01em; }
.tool p { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------------------- Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(24px, 4vw, 48px); }
.stat { position: relative; }
.stat__v { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -.028em; }
.stat__v .u { font-size: .48em; color: var(--muted); margin-left: 2px; letter-spacing: -.01em; }
.stat__v.accent { color: var(--accent); }
.stat__l { margin-top: var(--s-3); font-size: var(--t-small); color: var(--muted); max-width: 26ch; }
.stat .scribble { position: absolute; left: -18px; top: -14px; width: 150px; opacity: .16; pointer-events: none; }

/* -------------------------------------------------------------- Band */
.band { position: relative; border: 1px solid var(--line-2); border-radius: clamp(20px, 3vw, 32px); padding: clamp(28px, 4.5vw, 56px); background: var(--paper-warm); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.band__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.band p { color: var(--muted); margin-top: var(--s-4); }
.band__list { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.band__list .row { display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3); align-items: start; }
.band__list .row .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line-2); }
.band__list .row .ic .ni { width: 17px; height: 17px; opacity: .82; }
.band__list .row b { display: block; font-size: var(--t-small); }
.band__list .row span span { display: block; font-size: var(--t-small); color: var(--muted); }
@media (max-width: 800px) { .band__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- Honest ledger */
.ledger { display: grid; gap: 1px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.ledger__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.ledger__cell { background: var(--paper); padding: var(--s-5); box-shadow: 0 0 0 1px var(--line-2); }
.ledger__cell h3 { font-size: var(--t-small); font-weight: 640; margin-bottom: var(--s-2); display: flex; align-items: center; gap: 7px; }
.ledger__cell h3 .ni { width: 15px; height: 15px; opacity: .8; }
.ledger__cell p { font-size: var(--t-small); color: var(--muted); }
.ledger__cell--no { background: var(--paper-warm); }
@media (max-width: 700px) { .ledger__row { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- Clock timeline */
.tl { position: relative; display: grid; gap: 0; margin-top: var(--s-7); }
.tl::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--line-2), var(--line), var(--line-2)); border-radius: 2px; }
.tl__row { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--s-5); padding-block: var(--s-5); }
.tl__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); }
.tl__row--fire .tl__dot { border-color: var(--accent); color: var(--accent); }
.tl__t { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--faint); letter-spacing: .02em; }
.tl__h { font-size: 1.02rem; font-weight: 640; letter-spacing: -.012em; margin: 3px 0 5px; }
.tl__b { font-size: var(--t-small); color: var(--muted); max-width: 62ch; }
.tl__b code { font-family: var(--font-mono); font-size: .9em; background: var(--line-2); padding: 1px 5px; border-radius: 5px; color: var(--ink); }

/* ------------------------------------------------------------ Proof */
.proof { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; font-family: var(--font-mono); font-size: var(--t-xs); }
.proof__row { background: var(--paper); display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; padding: 13px var(--s-5); }
.proof__cmd { color: var(--muted); overflow-wrap: anywhere; }
.proof__cmd b { color: var(--ink); font-weight: 600; }
.proof__res { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ----------------------------------------------------------- Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.shot { display: grid; gap: var(--s-3); }
/* contain, not cover: these are whole screens and the dock at the bottom edge
   is the part worth seeing — cropping it would sell the product short. */
.shot__frame { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--paper-warm); aspect-ratio: 3 / 2; box-shadow: 0 8px 30px rgba(29,29,31,.06); }
.shot__frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.shot figcaption { font-size: var(--t-small); color: var(--muted); }
.shot figcaption b { display: block; color: var(--ink); font-weight: 620; margin-bottom: 2px; }

/* --------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; font-size: 1.02rem; font-weight: 560; letter-spacing: -.012em; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1; transition: transform .3s var(--spring), background .2s, color .2s, border-color .2s; }
.qa[open] .pm { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: #fff; }
.qa .ans { padding: 0 0 var(--s-5); font-size: var(--t-small); color: var(--muted); max-width: 72ch; }

/* --------------------------------------------------------------- CTA */
.cta__box { position: relative; border-radius: clamp(22px, 3.4vw, 36px); border: 1px solid var(--line-2); padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px); text-align: center; overflow: hidden; background: var(--paper-warm); }
.cta__inner { position: relative; z-index: 1; display: grid; gap: var(--s-4); justify-items: center; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin-top: var(--s-4); }
.cta .lede { max-width: 56ch; }

/* --------------------------------------------------------- Marquee */
.marquee { border-block: 1px solid var(--line-2); padding-block: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__row { display: flex; gap: clamp(28px, 5vw, 64px); width: max-content; animation: slide 34s linear infinite; }
.marquee__row span { font-size: var(--t-small); font-weight: 540; color: var(--faint); white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- Footer */
.foot { border-top: 1px solid var(--line-2); margin-top: clamp(40px, 6vw, 80px); }
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); padding-block: clamp(40px, 6vw, 72px); }
.foot__brand p { font-size: var(--t-small); color: var(--muted); margin-top: var(--s-3); max-width: 34ch; }
.foot__col { display: grid; gap: var(--s-3); align-content: start; }
.foot__col h2 { font-size: var(--t-xs); font-weight: 660; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.foot__col a { font-size: var(--t-small); color: var(--muted); transition: color .15s ease; }
.foot__col a:hover { color: var(--ink); }
.foot__bar { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; padding-block: var(--s-5); border-top: 1px solid var(--line-2); font-size: var(--t-xs); color: var(--faint); }
@media (max-width: 1000px) { .foot__grid { grid-template-columns: 1fr 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------- Page header */
.phead { padding-block: clamp(44px, 6vw, 88px) clamp(28px, 4vw, 48px); overflow: hidden; }
.phead .display { max-width: 18ch; }
.phead .lede { max-width: 58ch; margin-top: var(--s-5); }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--faint); margin-bottom: var(--s-4); }
.crumb a:hover { color: var(--ink); }

/* --------------------------------------------------------- Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--spring), transform .7s var(--spring); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .glow--drift { animation: none; }
}

/* An .ink-accent inside running text is a link; at display size it is emphasis. */
a.ink-accent { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a.ink-accent:hover { color: var(--link-hover); }

/* --------------------------------------------------- Long-form documents */
/* Legal and support pages are read, not scanned, so they get a measure, real
   paragraph rhythm, and headings that are findable rather than decorative. */
.doc { max-width: 74ch; }
.doc h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); line-height: 1.15; letter-spacing: -.016em; margin-top: clamp(40px, 5vw, 64px); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-top: var(--s-6); }
.doc p, .doc li { color: var(--muted); }
.doc p { margin-top: var(--s-4); }
.doc ul, .doc ol { margin: var(--s-4) 0 0; padding-left: 1.35em; display: grid; gap: var(--s-2); }
.doc li::marker { color: var(--faint); }
.doc code { font-family: var(--font-mono); font-size: .9em; background: var(--paper-3); padding: 1px 5px; border-radius: 5px; color: var(--ink); }
.doc a:not(.btn) { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.doc a:not(.btn):hover { color: var(--link-hover); }
.doc .updated { font-size: var(--t-xs); color: var(--faint); margin-top: var(--s-3); }
.doc .todo { color: var(--ink); background: rgba(255,159,10,.16); padding: 1px 6px; border-radius: 5px; font-weight: 550; }

/* A data table that stays readable on a phone by scrolling itself. */
.tablewrap { overflow-x: auto; margin-top: var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 640px; }
.dtable th, .dtable td { text-align: left; padding: 13px var(--s-4); border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dtable thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; background: var(--paper-2); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td { color: var(--muted); }
.dtable td:first-child { color: var(--ink); font-weight: 550; }

/* Symptom -> cause -> fix */
.fixes { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.fix { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s-5); background: var(--paper); }
.fix > h3 { margin: 0 0 var(--s-2); font-size: 1.02rem; font-weight: 600; }
.fix p { margin-top: var(--s-2); font-size: var(--t-small); }
.fix .why { color: var(--faint); font-size: var(--t-xs); margin-top: var(--s-3); }

/* Numbered checklist — the order is real, so the numbers carry information. */
.steps { counter-reset: step; display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.stepi { display: grid; grid-template-columns: 30px 1fr; gap: var(--s-4); align-items: start; }
.stepi::before { counter-increment: step; content: counter(step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-3); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.stepi b { display: block; }
.stepi span { font-size: var(--t-small); color: var(--muted); }

/* 404 */
.oops { min-height: 62vh; display: grid; place-items: center; text-align: center; }

/* ------------------------------------------------------- Product film */
/* Real footage: the product's own renderer replaying a stored lesson. */
.film { position: relative; border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 2px rgba(13,13,13,.04), 0 18px 60px rgba(13,13,13,.10); }
.film video { width: 100%; height: auto; display: block; }
.film__tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-2); font-size: 12px; font-weight: 550; color: var(--muted); }
.film__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: livedot 2.4s ease-in-out infinite; }
@keyframes livedot { 50% { opacity: .3; } }
.film__cue { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--faint); text-align: center; }

/* A picture that gets the width it deserves. */
.strip { margin-block: clamp(36px, 5vw, 72px); }
.strip__frame { border-block: 1px solid var(--line-2); background: var(--paper-warm); display: grid; place-items: center; padding: clamp(20px, 3vw, 44px) var(--gutter); }
.strip__frame img { width: min(1080px, 100%); height: auto; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--paper); box-shadow: 0 14px 50px rgba(13,13,13,.08); }
.strip figcaption { text-align: center; font-size: var(--t-small); color: var(--muted); margin-top: var(--s-4); padding-inline: var(--gutter); }
.strip figcaption b { color: var(--ink); }

/* Big captions under a picture — the picture does the explaining. */
.gallery .shot figcaption b { font-size: 1.02rem; }
/* Four cards should be one row, not three-and-a-lonely-one. */
.gallery--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .gallery--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .gallery--4 { grid-template-columns: 1fr; } }