/* ============================================================
   TIME-X investor deck. D-038 / WI-029 / WI-032.
   One hand with time-x.ai: the tokens below are the website's, verbatim.
   Dark only (D-033). Inter prose / IBM Plex Mono data / Space Mono chrome.
   #00FF88 appears ONLY where the color law grants it: money values, the
   paying sliver on the problem chart, the map pulse, the agent dot, the
   cover orb. Never chrome, headings, buttons, links or backgrounds.
   NO CONFIDENTIAL STRINGS IN THIS FILE. Content lives in investor.deck_content.
   ============================================================ */

@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/inter-300.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/ibm-plex-mono-300.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.woff2) format('woff2')}

/* ---------- Tokens (design/TIMEX_DESIGN_SYSTEM.md v1.1, as on time-x.ai) ---------- */
:root{
  --surface-0:#000000; --surface-1:#121212; --surface-2:#1C1C1C;
  --text-primary:#FFFFFF; --text-body:#EDEDED; --text-muted:#B0B0B0; --text-faint:#808080;
  --border-hairline:#2A2A2A; --border-soft:rgba(255,255,255,0.06);
  --border-mid:rgba(255,255,255,0.10); --border-hard:rgba(255,255,255,0.25);
  --accent:#00FF88; --red:#FF3C50; --amber:#FFB400;
  --cosmic-orange:rgba(255,99,8,0.10); --cosmic-slate:rgba(189,201,230,0.10); --cosmic-blue:rgba(151,196,255,0.10);
  --selection:rgba(255,255,255,0.15); --focus-ring:rgba(255,255,255,0.4);
  --inter:'Inter',system-ui,sans-serif; --plex:'IBM Plex Mono',monospace; --smono:'Space Mono',monospace;
  --ease:cubic-bezier(0.4,0,0.2,1); --snap:cubic-bezier(0.16,1,0.3,1);

  /* Type scale, decided once (WI-032 §6). Everything below reads from these. */
  --t-display:clamp(38px,6vw,76px);      /* cover headline, the website hero size */
  --t-title:clamp(28px,3.6vw,44px);      /* one idea per slide */
  --t-hero:clamp(44px,6.5vw,76px);       /* the number is the hero: Plex 300 */
  --t-lede:clamp(16px,1.5vw,19px);
  --t-kicker:clamp(19px,2.1vw,26px);
  --t-body:16px; --t-body-sm:15px; --t-note:13px; --t-eyebrow:13px; --t-chrome:11px;
  --t-table:15px; --t-th:13px;

  /* Spacing, 8pt scale */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px; --s-12:96px;
  --pad-x:clamp(24px,5vw,72px); --pad-top:72px; --pad-bottom:112px;
  --maxw:1040px; --measure:62ch;
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--selection)}
html,body{height:100%}
body{
  background:var(--surface-0); color:var(--text-body); font-family:var(--inter);
  font-weight:300; font-size:var(--t-body); line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px}
img,svg,video{max-width:100%}
strong{font-weight:400; color:var(--text-primary)}
.num{font-family:var(--plex); font-feature-settings:'tnum'}

/* ---------- Shared primitives, the website's ---------- */
.btag{font-family:var(--smono); font-size:var(--t-eyebrow); letter-spacing:2px; text-transform:uppercase; color:var(--text-muted)}
.btag::before{content:'[ '; color:var(--text-faint)}
.btag::after{content:' ]'; color:var(--text-faint)}
.money{color:var(--accent); font-family:var(--plex); font-weight:400; font-feature-settings:'tnum'}

/* ---------- Gate (login) ---------- */
.gate{position:fixed; inset:0; display:grid; place-items:center; padding:var(--s-3); background:var(--surface-0); z-index:60}
.gate[hidden]{display:none}
.gate-card{width:100%; max-width:380px}
.gate-mark{font-family:var(--smono); font-weight:700; font-size:15px; letter-spacing:0.45em; text-transform:uppercase; color:var(--text-primary); text-align:center; display:block; margin-bottom:var(--s-1)}
.gate-sub{font-family:var(--plex); font-size:var(--t-note); letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted); text-align:center; margin-bottom:var(--s-6)}
.field{margin-bottom:var(--s-2)}
.field label{display:block; font-family:var(--smono); font-size:var(--t-chrome); letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s-1)}
.field input{
  width:100%; background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:14px;
  padding:14px 16px; color:var(--text-primary); font-family:var(--inter); font-size:16px; font-weight:300; min-height:48px;
}
.field input:focus{outline:none; border-color:var(--border-hard)}
/* Chrome's saved-password autofill paints inputs pale blue; keep the card black. */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--surface-1) inset; -webkit-text-fill-color:var(--text-primary);
  caret-color:var(--text-primary); transition:background-color 9999s ease-out 0s;
}
.gate-btn{
  width:100%; margin-top:var(--s-1); min-height:48px; padding:14px 22px; border-radius:9999px;
  background:#FFFFFF; color:#000000; font-family:var(--smono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  transition:background 150ms ease;
}
.gate-btn:hover{background:var(--text-body)}
.gate-btn:disabled{opacity:0.5; cursor:default}
.gate-msg{margin-top:var(--s-2); min-height:20px; font-family:var(--plex); font-size:var(--t-note); color:var(--amber); text-align:center; line-height:1.5}
.gate-msg.err{color:var(--red)}

/* ---------- Cover backdrop: the website hero field, one green orb ---------- */
#matrix{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; opacity:0; transition:opacity .6s var(--ease); pointer-events:none}
body.on-cover #matrix{opacity:1}

/* ---------- Deck shell ---------- */
.deck{position:fixed; inset:0; z-index:10}
.deck[hidden]{display:none}
/* WI-033: the slide is the ONLY scroll container and nothing sits over it. It owns
   vertical touch scrolling (touch-action), keeps the rubber band to itself
   (overscroll-behavior), and the outgoing slide fades out fast while the incoming
   one arrives a beat later on the snap curve, so a change never reads as a jump. */
.slide{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  padding:var(--pad-top) var(--pad-x) var(--pad-bottom); overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain; touch-action:pan-y pinch-zoom;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
}
.slide.is-active{opacity:1; visibility:visible; transform:none; transition:opacity .44s var(--snap) .1s, transform .44s var(--snap) .1s, visibility 0s}
.slide-inner{width:100%; max-width:var(--maxw)}
.slide-inner.narrow{max-width:700px}

/* Staged reveals exist only where the script's BUILD notes ask for them. */
.stage{opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--snap)}
.slide.is-active .stage.in{opacity:1; transform:none}

/* ---------- Typography ---------- */
.eyebrow{display:block; margin-bottom:var(--s-3)}
.s-title{font-family:var(--inter); font-weight:300; font-size:var(--t-title); line-height:1.1; letter-spacing:-0.02em; color:var(--text-primary); text-wrap:balance; max-width:22ch}
.s-lede{margin-top:var(--s-3); font-size:var(--t-lede); line-height:1.5; color:var(--text-muted); font-weight:300; max-width:var(--measure)}
.s-kicker{margin-top:var(--s-6); font-size:var(--t-kicker); line-height:1.35; color:var(--text-primary); font-weight:300; max-width:44ch; text-wrap:balance}
.s-note{margin-top:var(--s-4); font-family:var(--plex); font-size:var(--t-note); line-height:1.6; color:var(--text-muted); max-width:var(--measure)}

/* the number is the hero */
.stat{display:flex; align-items:baseline; gap:var(--s-3); margin-top:var(--s-3); flex-wrap:wrap}
.stat-v{font-family:var(--plex); font-weight:300; font-size:var(--t-hero); line-height:1; letter-spacing:-0.02em; color:var(--text-primary); font-feature-settings:'tnum'}
.stat-v.money{color:var(--accent); font-weight:300}
.stat-l{font-size:var(--t-body-sm); color:var(--text-muted); max-width:40ch; line-height:1.5}

/* ---------- Two columns ---------- */
.cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
.cols > .col-fig{justify-self:center; width:100%}
.cols.split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start}
.cols.split .t-wrap{margin-top:0}
.cols.split td:last-child{white-space:normal; min-width:16ch}
.cols.map-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.cols.map-cols .map{margin-top:0; max-width:none; aspect-ratio:16/11}

/* ---------- Bullets ---------- */
.b-list{list-style:none; margin-top:var(--s-4); display:grid; gap:0; max-width:var(--measure)}
.b-list li{display:grid; grid-template-columns:3.5ch 1fr; gap:var(--s-2); align-items:baseline; padding:14px 0; border-bottom:1px solid var(--border-soft)}
.b-list li:first-child{border-top:1px solid var(--border-soft)}
.b-num{font-family:var(--plex); font-weight:300; font-size:var(--t-note); color:var(--text-faint); font-feature-settings:'tnum'}
.b-head{display:block; color:var(--text-primary); font-weight:400; font-size:var(--t-body); line-height:1.4}
.b-body{display:block; color:var(--text-muted); margin-top:4px; font-size:var(--t-body-sm); line-height:1.5}

/* ---------- Tables ---------- */
.t-wrap{margin-top:var(--s-4); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
table{width:100%; border-collapse:collapse; font-size:var(--t-table); font-feature-settings:'tnum'}
th{
  font-family:var(--smono); font-size:var(--t-th); letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted);
  font-weight:400; text-align:left; padding:0 var(--s-2) 12px 0; border-bottom:1px solid var(--border-hard); white-space:nowrap;
}
th:not(:first-child), td:not(:first-child){text-align:right}
td{padding:13px var(--s-2) 13px 0; border-bottom:1px solid var(--border-soft); color:var(--text-body); vertical-align:top; white-space:nowrap}
td:first-child{color:var(--text-muted); white-space:normal; min-width:14ch}
td:last-child,th:last-child{padding-right:0}
tr.em td{color:var(--text-primary)}
td .num{font-family:var(--plex)}
th:first-child, td:first-child{position:sticky; left:0; background:var(--surface-0); z-index:1}

/* ---------- The reveal card (the website's share card, live) ---------- */
.card-stage{perspective:1000px; justify-self:center}
.card-stage .share-card{transform:rotateY(8deg) rotateX(3deg) rotateZ(-1deg)}
.share-card{width:340px; max-width:100%; border-radius:14px; background:var(--surface-1); border:1px solid var(--border-hairline); padding:34px 30px 26px; position:relative; overflow:hidden}
.share-card .cosmic{position:absolute; inset:0; height:38%; background:radial-gradient(ellipse at 50% 0%, var(--cosmic-orange), var(--cosmic-slate) 55%, transparent 80%); pointer-events:none}
.share-card .sc-eyebrow{font-family:var(--plex); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5); position:relative}
.share-card .sc-ppm{font-family:var(--plex); font-weight:300; margin-top:16px; position:relative; display:flex; align-items:baseline; font-feature-settings:'tnum'}
.share-card .sc-cur{font-size:34px; color:var(--text-muted)}
.share-card .sc-int{font-size:72px; color:#fff; letter-spacing:-1.2px; line-height:1}
.share-card .sc-dec{font-size:42px; color:var(--text-muted)}
.share-card .sc-unit{font-family:var(--smono); font-size:19px; color:var(--text-muted); margin-left:6px}
.share-card .sc-src{font-family:var(--plex); font-size:12px; color:var(--text-muted); margin-top:14px; position:relative; letter-spacing:0.04em}
.share-card .sc-platforms{margin-top:18px; border-top:1px solid var(--border-soft); position:relative}
.share-card .sc-plat{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-soft)}
.share-card .sc-plat:last-child{border-bottom:none}
.share-card .sc-pname{font-family:var(--smono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:#fff}
.share-card .sc-pstat{display:flex; align-items:center; gap:6px; font-family:var(--smono); font-size:8px; letter-spacing:0.15em; color:var(--text-faint); text-transform:uppercase}
.share-card .sc-pstat i{width:5px; height:5px; border-radius:50%; background:var(--border-hard); display:inline-block; transition:background .3s ease}
.share-card .sc-plat.on .sc-pstat{color:var(--text-muted)}
.share-card .sc-plat.on .sc-pstat i{background:var(--accent)}
.share-card .sc-brand{font-family:var(--smono); font-size:11px; letter-spacing:0.3em; color:var(--text-faint); text-align:right; margin-top:18px; position:relative}

/* ---------- The product demo (the website's iPhone loop, extended) ---------- */
.demo{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"phone head" "phone copy" "phone note"; column-gap:clamp(32px,5vw,72px); row-gap:var(--s-4); align-items:center}
.demo .iphone{grid-area:phone}
.demo-head{grid-area:head; align-self:end}
.demo-copy{grid-area:copy; align-self:center}
.demo-note{grid-area:note; align-self:start; margin-top:0}
.demo .s-title{max-width:none}
.fig-cap{margin-top:var(--s-3); font-size:var(--t-lede); text-align:center; max-width:none}
.card-stage{display:flex; flex-direction:column; align-items:center}
.iphone{width:300px; height:610px; border-radius:44px; border:1px solid var(--border-hard); background:#000; position:relative; padding:12px; flex:none; justify-self:center}
.iphone::before{content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:90px; height:24px; background:#0a0a0a; border:1px solid var(--border-hairline); border-radius:14px; z-index:6}
.iphone-screen{width:100%; height:100%; border-radius:34px; background:var(--surface-0); overflow:hidden; position:relative; border:1px solid var(--border-hairline)}
.ph-top{padding:44px 16px 10px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px}
.ph-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1600ms infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.ph-agent{font-family:var(--smono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted)}
.ph-feed{padding:14px 12px; display:flex; flex-direction:column; gap:10px; font-size:12px}
.msg{max-width:88%; border-radius:14px; padding:10px 12px; opacity:0; transform:translateY(8px); transition:opacity 400ms var(--ease), transform 400ms var(--snap); line-height:1.45}
.msg.show{opacity:1; transform:none}
.msg.user{align-self:flex-end; background:var(--surface-2); color:var(--text-body)}
.msg.user .caret{display:inline-block; width:1px; height:12px; background:#fff; margin-left:1px; vertical-align:-2px; animation:pulse 900ms infinite}
.msg.user.done .caret{display:none}
.msg.agent{align-self:flex-start; background:none; color:var(--text-body); padding-left:0}
.pcard{background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px; padding:12px; margin-top:8px}
.pcard .pr{display:flex; justify-content:space-between; border-bottom:1px solid var(--border-soft); padding:7px 0; align-items:baseline}
.pcard .pr:last-of-type{border-bottom:none}
.pcard .pl{font-family:var(--smono); font-size:8px; letter-spacing:0.2em; color:var(--text-faint); text-transform:uppercase}
.pcard .pv{font-family:var(--plex); font-size:11px; color:#fff}
.pcard .pact{display:flex; gap:8px; margin-top:10px}
.pcard .ppill{font-family:var(--smono); font-size:8px; letter-spacing:1px; border:1px solid var(--border-hard); border-radius:9999px; padding:6px 12px; color:#fff; text-transform:uppercase}
.pcard .ppill.sld{background:#fff; color:#000; border-color:#fff}
.ph-layer{position:absolute; inset:0; background:var(--surface-0); opacity:0; transition:opacity 500ms var(--ease); pointer-events:none}
.ph-layer.show{opacity:1}
.ph-reveal{z-index:3; display:flex; align-items:center; justify-content:center; padding:18px}
.ph-reveal .share-card{width:100%; padding:24px 20px 18px; transform:none}
.ph-reveal .share-card .sc-int{font-size:56px}
.ph-reveal .share-card .sc-cur{font-size:26px}
.ph-reveal .share-card .sc-dec{font-size:32px}
.ph-call{z-index:4; display:flex; flex-direction:column}
.ph-tile{flex:1; position:relative; background:var(--surface-1); display:flex; align-items:center; justify-content:center; overflow:hidden}
.ph-tile + .ph-tile{border-top:1px solid var(--border-soft); background:var(--surface-2)}
.tile-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none}
.tile-vid.ready{display:block}
.ph-tile .face{width:64px; height:64px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-hairline); display:flex; align-items:center; justify-content:center; font-family:var(--inter); font-weight:300; font-size:24px; color:var(--text-muted)}
.ph-hud{position:absolute; bottom:0; left:0; right:0; padding:14px; background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.95) 100%); display:flex; align-items:center; justify-content:space-between; z-index:2}
.ph-hud .who .nm{font-size:12px; color:#fff}
.ph-hud .who .hd{font-family:var(--smono); font-size:8px; color:#A1A1A1; letter-spacing:0.1em}
.ph-hud .who .rt{font-size:11px; color:#fff; margin-top:3px}
.ph-hud .timer{font-family:var(--plex); font-weight:300; font-size:12px; color:#fff; border:1px solid var(--border-mid); border-radius:9999px; padding:5px 10px; white-space:nowrap; font-feature-settings:'tnum'}
.ph-hud .timer .bill{color:var(--accent)}
.ph-live{position:absolute; top:44px; left:0; right:0; display:flex; justify-content:center; z-index:3}
.ph-live .tag{font-family:var(--smono); font-size:8px; letter-spacing:0.2em; color:var(--red); display:flex; align-items:center; gap:5px}
.ph-live .tag i{width:5px; height:5px; border-radius:50%; background:var(--red); animation:pulse 1600ms infinite}
.ph-summary{z-index:5; display:flex; flex-direction:column; align-items:center; padding:60px 20px}
.ph-summary .cosmic{position:absolute; top:0; left:0; right:0; height:40%; background:radial-gradient(ellipse at 50% 0%, #1a1410, #100c0a, transparent); pointer-events:none}
.ph-summary .tag{font-family:var(--smono); font-size:8px; letter-spacing:0.25em; color:var(--text-muted); position:relative}
.ph-summary .face{width:72px; height:72px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-hairline); margin-top:20px; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:300; color:var(--text-muted); position:relative}
.ph-summary .nm{font-size:18px; font-weight:400; color:#fff; margin-top:12px; position:relative}
.ph-stats{width:100%; background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:14px; margin-top:22px; padding:4px 14px; position:relative}
.ph-stats .pr{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-soft); align-items:baseline}
.ph-stats .pr:last-child{border-bottom:none}
.ph-stats .pl{font-family:var(--smono); font-size:8px; letter-spacing:0.2em; color:var(--text-faint); text-transform:uppercase}
.ph-stats .pv{font-family:var(--plex); font-size:12px; color:#fff}
.ph-stats .pv.earn{color:var(--accent); font-size:14px}
.ph-file{z-index:6; display:flex; align-items:center; justify-content:center; padding:20px}
.callmd{width:100%; background:var(--surface-1); border:1px solid var(--border-hairline); border-radius:14px; padding:18px}
.callmd .fname{font-family:var(--plex); font-size:13px; color:#fff}
.callmd .fsub{font-family:var(--smono); font-size:9px; letter-spacing:0.15em; color:var(--text-faint); text-transform:uppercase; margin-top:4px}
.callmd .arrows{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.callmd .out{font-family:var(--smono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--border-soft); border-radius:9999px; padding:5px 11px; opacity:0; transition:opacity .4s var(--ease)}
.callmd .out.show{opacity:1}
.callmd .fswitch{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--border-soft); font-family:var(--smono); font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted)}
.callmd .fswitch i{width:26px; height:14px; border-radius:9999px; border:1px solid var(--border-hard); position:relative; display:inline-block}
.callmd .fswitch i::after{content:''; position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* captions beside the phone: a tracklist on desktop, the active beat alone on phone */
.demo-copy{display:flex; flex-direction:column}
.beat{display:grid; grid-template-columns:3.5ch 1fr; gap:var(--s-2); padding:14px 0; border-bottom:1px solid var(--border-soft); opacity:0.42; transition:opacity .4s var(--ease); cursor:pointer}
.beat:first-child{border-top:1px solid var(--border-soft)}
.beat.on{opacity:1}
.beat .b-num{padding-top:3px}
.beat .b-body{margin-top:3px}

/* ---------- The problem chart ---------- */
.grid-wrap{width:100%; max-width:480px; margin:0 auto}
#dotgrid{width:100%; display:block}
.legend{margin-top:var(--s-3); display:flex; flex-wrap:wrap; gap:10px var(--s-3); justify-content:center; font-family:var(--plex); font-size:var(--t-note); color:var(--text-muted)}
.legend span{display:inline-flex; align-items:center; gap:9px}
.legend i{width:10px; height:10px; border-radius:2px; display:inline-block; flex:none}

/* ---------- The positioning map ---------- */
.map{position:relative; width:100%; aspect-ratio:16/10; max-width:820px; margin:var(--s-4) auto 0}
.map-axis{position:absolute; background:var(--border-hairline)}
.map-axis.x{left:0; right:0; top:50%; height:1px}
.map-axis.y{top:0; bottom:0; left:50%; width:1px}
.map-lab{position:absolute; font-family:var(--smono); font-size:var(--t-chrome); letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); background:var(--surface-0); padding:0 6px; white-space:nowrap}
.mark{position:absolute; transform:translate(-50%,-50%); font-family:var(--plex); font-size:var(--t-note); color:var(--text-muted); white-space:nowrap; opacity:0; transition:opacity .5s var(--ease)}
.mark.on{opacity:1}
.mark.dim{color:var(--text-faint)}
.mark.us{color:var(--text-primary); font-family:var(--smono); font-size:14px; letter-spacing:0.16em; border:1px solid var(--accent); border-radius:9999px; padding:10px 18px; background:var(--surface-0)}
.mark.us.pulse{animation:mpulse 1.7s var(--snap) 1}
@keyframes mpulse{0%{box-shadow:0 0 0 0 rgba(0,255,136,0.42)}100%{box-shadow:0 0 0 22px rgba(0,255,136,0)}}
.mark .mk{display:none}
.map-legend{display:none}

/* ---------- Team ---------- */
.team-lead{margin-top:var(--s-3); font-size:17px; color:var(--text-primary); font-weight:300; max-width:var(--measure); line-height:1.5}
.team .s-kicker{font-size:clamp(18px,1.9vw,22px); margin-top:var(--s-3)}
.tbl > .s-note, .tbl .col-fig > .s-note{max-width:none}
.tbl .t-wrap{margin-top:var(--s-3)}
.tbl .stat{margin-top:var(--s-2)}
.tbl .stat-v{font-size:clamp(40px,5.6vw,64px)}
.tbl .s-kicker{margin-top:var(--s-2)}
.tbl .s-note{margin-top:var(--s-2)}
.tbl th{padding-bottom:10px}
.tbl td{padding-top:9px; padding-bottom:9px}
.tbl .stat-l{max-width:46ch}
.cols.split .s-kicker{font-size:clamp(17px,1.6vw,20px); margin-top:var(--s-3); max-width:none}
.team-staff{margin-top:var(--s-2); font-size:var(--t-body-sm); color:var(--text-muted); max-width:var(--measure)}
.roster{margin-top:var(--s-3); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--s-6)}
.roster div{display:grid; grid-template-columns:88px 1fr; gap:var(--s-2); padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:13px; line-height:1.45; align-items:baseline}
.roster b{font-family:var(--smono); font-weight:400; font-size:11px; color:var(--text-primary); letter-spacing:0.14em; text-transform:uppercase}
.team .s-kicker{margin-top:var(--s-4)}
.roster span{color:var(--text-muted)}

/* ---------- Cover ---------- */
.cover{text-align:center; display:flex; flex-direction:column; align-items:center}
/* WI-033: the title IS the wordmark, set the way the brand sets it (Space Mono, tracked), at display size */
.cover-h1{font-family:var(--smono); font-weight:400; font-size:clamp(34px,5.4vw,64px); letter-spacing:0.22em; text-indent:0.22em; text-transform:uppercase; color:var(--text-primary); line-height:1.08}
.cover-sub{max-width:560px; margin:18px auto 0; font-size:var(--t-kicker); font-weight:300; color:var(--text-body)}
.cover-caps{margin-top:var(--s-3); font-family:var(--smono); font-size:var(--t-note); letter-spacing:0.3em; text-indent:0.3em; text-transform:uppercase; color:var(--text-muted)}
.badge{margin-top:var(--s-6); display:inline-flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; font-family:var(--smono); font-size:var(--t-note); letter-spacing:2px; text-transform:uppercase; color:var(--text-muted)}
.badge .sep{color:var(--text-faint)}

/* ---------- Chrome ---------- */
.progress{position:fixed; top:0; left:0; height:2px; background:var(--text-muted); z-index:50; transition:width .44s var(--snap)}
.progress[hidden]{display:none}
.hud{position:fixed; left:0; right:0; bottom:0; height:104px; z-index:40; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.72) 45%, transparent 100%)}
.hud[hidden]{display:none}
.hud-bar{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; padding:0 var(--pad-x) 18px;
  font-family:var(--smono); font-size:var(--t-chrome); letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted)}
.hud-bar #counter{font-feature-settings:'tnum'}
.hud-actions{display:flex; gap:4px}
.hud button{pointer-events:auto; color:var(--text-muted); font-family:var(--smono); font-size:var(--t-chrome); letter-spacing:0.18em; text-transform:uppercase; padding:14px 12px; min-height:44px; border-radius:9999px; transition:color 150ms ease}
.hud button:hover{color:var(--text-primary)}
.hud button[aria-pressed="true"]{color:var(--text-primary)}
.hud button[aria-pressed="true"]::before{content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--text-primary); margin-right:8px; vertical-align:2px}
#btn-out{color:var(--text-faint)}
.empty{text-align:center; color:var(--text-muted); font-family:var(--plex); font-size:var(--t-note); letter-spacing:0.1em}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cols,.cols.split,.cols.map-cols{grid-template-columns:minmax(0,1fr); gap:var(--s-4)}
  .cols.split .t-wrap{margin-top:var(--s-3)}
  .cols.map-cols .map{aspect-ratio:1/1; max-width:640px}
  .cols > .col-fig{order:2}
  .demo{grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "copy" "phone" "note"; row-gap:var(--s-3)}
  .demo-head,.demo-copy{align-self:auto}
  .demo .iphone{justify-self:center}
  .roster{grid-template-columns:1fr}
  .map{max-width:640px}
}
@media (max-width:600px){
  :root{--pad-top:64px; --pad-bottom:120px; --t-table:14px; --t-th:12px; --t-body:16px}
  .s-title{max-width:none}
  .iphone{width:272px; height:556px}
  .beat{display:none; border:0; padding:0; grid-template-columns:1fr; opacity:1; min-height:112px}  /* tall enough for the longest caption: the phone never moves when a beat lands */
  .beat.on{display:grid}
  .beat .b-num{display:none}
  .demo-dots{display:flex; gap:6px; margin-top:var(--s-2)}
  .demo-dots i{width:22px; height:2px; background:var(--border-hairline); display:block; transition:background .4s}
  .demo-dots i.on{background:var(--text-muted)}
  .share-card{width:100%; max-width:320px}
  .card-stage .share-card{transform:none}
  .map{aspect-ratio:1/1}
  .mark{font-size:0; width:8px; height:8px; border-radius:50%; background:var(--text-muted)}
  .mark.dim{background:var(--text-faint)}
  .mark .mk{display:block; position:absolute; left:12px; top:-5px; font-family:var(--plex); font-size:12px; color:var(--text-muted); font-feature-settings:'tnum'}
  .mark.us{font-size:12px; width:auto; height:auto; border-radius:9999px; padding:8px 14px; background:var(--surface-0)}
  .mark.us .mk{display:none}
  .map-legend{display:grid; grid-template-columns:1fr 1fr; gap:4px var(--s-2); margin-top:var(--s-3); list-style:none; font-family:var(--plex); font-size:var(--t-note); color:var(--text-muted); font-feature-settings:'tnum'}
  .map-legend li{display:flex; gap:8px}
  .map-legend li span{color:var(--text-faint); min-width:2ch}
  .hud-bar{padding-bottom:14px}
  .hud button{padding:14px 8px}
  .stat{gap:var(--s-2)}
  /* the three-column unit table fits a phone when every column may wrap */
  .cols.split td:first-child{min-width:10ch}
  .cols.split td:nth-child(2){min-width:13ch}
  .cols.split td:last-child{min-width:11ch}
}
@media (min-width:601px){
  .demo-dots{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  #matrix{display:none}
  .stage{opacity:1; transform:none}
  .mark{opacity:1}
  .msg{opacity:1; transform:none}
}