/* =============================================================================
   BoardIt landing "pro" v4 — full-bleed steadytrader mechanics, BoardIt blue.
   v4 owner notes (2026-09-14): the hero board is a WALL TV (real board screen,
   zero browser chrome); circuit sources are bold bare marks like the exemplar's
   exchange logos, traces are one measured SVG whose pulses fire together and
   actually CONNECT into the story stage; the story is 4 REAL surfaces (phones,
   TV, desk iPad, the two morning emails) with no boxes and no panel bars; the
   pulse line lives at the TOP of the stage only; board palettes deepened to sit
   between the primaries and v3's pastels; themes recolor via CSS variables.
   ============================================================================= */
/* all three faces self-hosted (D64): no third-party origins on the live site */
@font-face{
  font-family:'Manrope';
  src:url('/shared/fonts/manrope-var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/shared/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/shared/fonts/jbmono-var.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}
:root{
  --bg:#08090c; --panel:#0e0f14; --bar:#111318; --line:#1f222a; --line-2:#2b2f3a;
  --text:#eef1f6; --dim:#9aa3b3; --dim2:#626a78;
  --blue:#0e3fe6; --blue-up:#5b7cff; --ink:#0a0c12;
  --glow:rgba(91,124,255,.55);
  /* the cycling store theme lives in these four — repaint, never rebuild */
  --cat-new:#3b82f6; --cat-used:#10b981; --cat-cpo:#f43f5e; --cat-acq:#f59e0b;
  --shell-grad:
    radial-gradient(70% 52% at 16% 0%, rgba(255,255,255,.8), transparent 68%),
    radial-gradient(60% 55% at 85% 20%, rgba(228,236,255,.65), transparent 72%),
    radial-gradient(70% 60% at 30% 95%, rgba(130,160,255,.5), transparent 74%),
    linear-gradient(135deg, #f6f8ff 10%, #dfe8ff 34%, #5b7cff 64%, #0e3fe6 90%);
  --gutter:clamp(24px, 3.4vw, 56px);   /* full-width canvas: one shared edge gutter */
  --display:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg);}
.page{
  font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
/* the wide canvas runs to the page edges (gutter only); sanity cap for huge displays */
.wrap-wide{max-width:2100px; padding:0 var(--gutter);}

.wm{font-family:Arial,Helvetica,sans-serif; display:inline-flex; align-items:center; white-space:nowrap; font-weight:800;}
.wm-it{display:inline-flex; align-items:center; justify-content:center; line-height:1;
  background:#fff; color:#08090c; border-radius:.16em; padding:.1em .18em .15em; margin-left:.05em;}
.intro-kicker, .eyebrow, .lane-label, .fnum, .tv-cap,
/* the emails use the site's own face throughout — no mono inside (owner) */
.store-line, .push-to, .why-card .tier, .foot-h{font-family:var(--mono);}
h1, h2, .story-copy h3, .c-engine h3, .c-src, .why-card .tname{font-family:var(--display); letter-spacing:-0.05em;}

/* ---- nav ---- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:13px var(--gutter); transition:background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent; background:rgba(8,9,12,.55);
}
nav.scrolled{background:rgba(8,9,12,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line);}
.brand{display:flex; align-items:center; gap:11px; font-size:22px; flex:none;}
.brand svg{width:30px; height:30px; display:block;}
.nav-mid{display:flex; align-items:center; gap:26px; margin:0 auto;}
.nav-mid a{font-size:14px; font-weight:700; color:var(--dim); text-decoration:none; transition:color .14s ease; white-space:nowrap;}
.nav-mid a:hover{color:var(--text);}
.nav-links{display:flex; align-items:center; gap:10px; flex:none;}
.nav-ghost{
  font-size:14px; font-weight:800; color:var(--text); text-decoration:none;
  padding:10px 16px; border-radius:11px; border:1px solid transparent;
  transition:border-color .14s ease; white-space:nowrap;
}
.nav-ghost:hover{border-color:var(--line-2);}
.nav-cta{
  font-size:14px; font-weight:800; color:#08090c; background:#fff; text-decoration:none;
  padding:10px 18px; border-radius:11px; display:inline-flex; align-items:center; gap:7px;
  transition:opacity .14s ease, transform .1s ease; white-space:nowrap;
}
.nav-cta:hover{opacity:.9;} .nav-cta:active{transform:scale(.97);}
.arr{font-size:.92em;}
@media(max-width:900px){.nav-mid{display:none;}}

/* ---- sheen sweep (transform-only, compositable) + reveal ---- */
.btn-sheen{position:relative; overflow:hidden;}
.btn-sheen::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:55%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-170%) skewX(-18deg); animation:sheen 4.8s ease-in-out infinite;
  pointer-events:none; will-change:transform;
}
@keyframes sheen{0%,72%{transform:translateX(-170%) skewX(-18deg);}100%{transform:translateX(320%) skewX(-18deg);}}
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);}
[data-reveal].in{opacity:1; transform:none;}

/* ---- HERO: full-bleed gradient, edge to edge, rounded exit ---- */
.hero{
  background:var(--shell-grad); color:var(--ink); text-align:center;
  padding:150px var(--gutter) 76px; border-radius:0 0 28px 28px; overflow:clip;
}
.hero-inner{max-width:900px; margin:0 auto;}
h1{
  font-size:clamp(44px,5.8vw,86px); font-weight:600; line-height:.99;
  margin:0 auto 24px; max-width:15ch; text-wrap:balance; color:var(--ink);
}
.hero .sub{
  font-size:clamp(16.5px,2vw,20px); font-weight:600; line-height:1.55;
  /* two lines max (owner, text pass): spread wide before wrapping a third */
  color:rgba(10,12,18,.72); max-width:66ch; margin:0 auto 36px; text-wrap:balance;
}
.cta{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;}
.btn-ink{
  font-size:16px; font-weight:800; color:#fff; background:var(--ink); text-decoration:none;
  padding:16px 28px; border-radius:13px; display:inline-flex; align-items:center; gap:9px;
  letter-spacing:-0.01em; transition:opacity .14s ease, transform .1s ease; white-space:nowrap;
  box-shadow:0 14px 34px -12px rgba(10,12,18,.55);
}
.btn-ink:hover{opacity:.87;} .btn-ink:active{transform:scale(.98);}
.btn-ink.btn-on-dark{background:#fff; color:var(--ink); box-shadow:none;}
.btn-shell{
  font-size:16px; font-weight:800; color:var(--ink); text-decoration:none;
  padding:16px 26px; border-radius:13px; border:1.5px solid rgba(10,12,18,.35);
  letter-spacing:-0.01em; transition:border-color .14s ease, background .14s ease; white-space:nowrap;
}
.btn-shell:hover{border-color:rgba(10,12,18,.7); background:rgba(255,255,255,.25);}
.store-line{font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(10,12,18,.5); margin:40px 0 14px;}
.cta-badges{gap:12px;}
.store-pill{
  display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:800;
  color:#fff; background:#111110; text-decoration:none; padding:13px 22px; border-radius:12px;
  letter-spacing:-0.01em; transition:opacity .14s ease, transform .1s ease; white-space:nowrap;
}
.store-pill:hover{opacity:.85;} .store-pill:active{transform:scale(.98);}
.store-pill svg{height:20px; width:auto; display:block;}

/* ---- the wall TV: slim bezel, glass, wall shadow — never a monitor ---- */
.tvwrap{max-width:min(1760px, 100%); margin:80px auto 0;}
.tv{
  position:relative; background:linear-gradient(180deg,#101116,#07080b);
  border-radius:12px; padding:9px 9px 11px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.6) inset,
    0 0 0 1px #05060a,
    0 40px 70px -30px rgba(5,8,25,.8), 0 110px 190px -80px rgba(5,8,25,.7);
}
.tv::after{
  content:""; position:absolute; inset:9px 9px 11px; border-radius:4px; pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 30%, transparent 46%);
}
.tvfit{position:relative; overflow:hidden; border-radius:4px; width:100%; background:#07080d;}
/* absolute: the natural-size screen must not contribute to layout sizing */
.tvfit > *{position:absolute; top:0; left:0; transform-origin:top left;}
.tv-story{width:100%; max-width:1160px;}   /* flex item: needs its own width */
.tv-cap{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(10,12,18,.55); margin:22px 0 0;
}
.tv-cap b{color:rgba(10,12,18,.8); font-weight:600;}
.live-dot{width:7px; height:7px; border-radius:50%; background:#0e3fe6; animation:live-pulse 1.8s ease-in-out infinite;}
@keyframes live-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* =============================================================================
   THE BOARD — values from board/board.css (§4.6), scoped under .tvscreen.
   Built at the real 1920x1080 and transform-scaled, exactly like the live
   site (D69). Category colors resolve through the --cat-* theme variables.
   ============================================================================= */
.tvscreen, .dev-screen{
  --bg:#07080d; --card:#14161e; --card-border:#232634; --grid-line:#2a2f3d;
  --text:#ffffff; --text-dim:#a4adbf;
  --st-up:#22c55e; --st-up-text:#07290f; --st-down:#ef4444; --st-down-text:#3d0808;
  --st-appt:#3b82f6; --st-appt-text:#071c3d; --st-lunch:#f59e0b; --st-lunch-text:#3d2502;
  --st-out:#6f7686; --st-out-text:#12141a;
}
.tvscreen{
  width:1920px; height:1080px; background:var(--bg); color:var(--text);
  font-family:var(--font-sys); font-weight:600; display:flex; flex-direction:column;
  padding:32px 48px; user-select:none; overflow:hidden;
}
.tvscreen .bhead{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:28px; flex:0 0 auto;}
.tvscreen .clock{display:flex; flex-direction:column; gap:4px;}
.tvscreen .clock-time{font-size:56px; font-weight:800; letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums;}
.tvscreen .clock-date{font-size:22px; font-weight:700; letter-spacing:-0.01em; line-height:1; color:var(--text-dim);}
.tvscreen .branding{font-size:56px; font-weight:800; letter-spacing:-0.02em; line-height:1; text-align:right; white-space:nowrap;}
.tvscreen .stage{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:28px; min-height:0;}
.tvscreen .grid-panel{
  width:fit-content; background:var(--card); border:2px solid var(--grid-line);
  border-radius:12px; overflow:hidden; display:grid;
  grid-template-columns:240px repeat(var(--cols,20), var(--cell-size,80px));
}
.tvscreen .corner,.tvscreen .colnum{height:56px; border-right:1px solid var(--grid-line); border-bottom:1px solid var(--grid-line);}
.tvscreen .colnum{display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-dim);}
.tvscreen .name{
  height:var(--cell-size,80px); display:flex; align-items:center; padding:0 24px;
  font-size:28px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; border-right:1px solid var(--grid-line); border-bottom:1px solid var(--grid-line);
}
.tvscreen .name.dim{opacity:0.55;}
.tvscreen .name-label{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.tvscreen .streak-flame{flex:none; margin-left:10px; font-size:0.8em; line-height:1; animation:streak-flicker 1.6s ease-in-out infinite;}
@keyframes streak-flicker{0%,100%{transform:scale(1); opacity:1;}50%{transform:scale(0.86); opacity:0.75;}}
.tvscreen .nameband{
  grid-column:1 / -1; height:44px; display:flex; align-items:center; padding:0 18px;
  font-size:26px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; background:var(--bg); border-bottom:1px solid var(--grid-line);
}
.tvscreen .nameband.dim{opacity:0.55;}
.tvscreen .cell{position:relative; height:var(--cell-size,80px); width:var(--cell-size,80px); border-right:1px solid var(--grid-line); border-bottom:1px solid var(--grid-line); transition:background .5s ease;}
.tvscreen .cell.half-cell{background:linear-gradient(to bottom right, var(--tl-color,transparent) 50%, var(--br-color,transparent) 50%);}
/* The diagonal separator: a rotated 1px line anti-aliases lighter than the
   orthogonal cell borders, so the board reads as mixed gray/black hairlines
   (owner catch, D95 — CORRECTED round 3: 1.75px + darker overshot into bolder;
   equal weight = the SAME ink, ~1.3x width offsets the anti-alias thinning). */
.tvscreen .cell.half-cell.split::after{
  content:""; position:absolute; top:50%; left:50%; width:141.42%; height:1.3px;
  background:var(--grid-line); transform:translate(-50%,-50%) rotate(-45deg); pointer-events:none;
}
.tvscreen .cell.half-cell.bridge::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:calc(200% + 2px);
  background:var(--br-color); clip-path:polygon(0 100%, 50% 0, 100% 0, 50% 100%);
  pointer-events:none;
}
.tvscreen .divider{
  grid-column:1 / -1; display:flex; align-items:center; gap:20px; background:var(--bg);
  padding:14px 24px; font-size:18px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--text-dim); border-bottom:1px solid var(--grid-line);
}
.tvscreen .divider::before,.tvscreen .divider::after{content:""; flex:1; height:2px; background:var(--card-border);}
.tvscreen .ledger-panel{
  align-self:center; background:var(--card); border:2px solid var(--grid-line);
  border-radius:16px; padding:24px 28px; display:flex; flex-direction:column; gap:20px;
  max-height:100%; overflow:hidden;
}
.tvscreen .ledger-item{min-width:250px; border-left:4px solid var(--cat-color,var(--card-border)); padding-left:16px;}
.tvscreen .ledger-label{font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.10em; color:var(--text-dim); text-align:center; margin-bottom:14px; white-space:nowrap;}
.tvscreen .ledger-stats{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.tvscreen .stat-label{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--text-dim); margin-bottom:4px;}
.tvscreen .stat-value{font-size:48px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; line-height:1;}
.tvscreen .stat.current .stat-value{color:var(--cat-color,var(--text));}
.tvscreen .stat.pacing .stat-value{color:var(--text-dim);}
@keyframes cell-pop{0%{transform:scale(0.2); opacity:0;}60%{transform:scale(1.12); opacity:1;}100%{transform:scale(1); opacity:1;}}
.tvscreen .cell.pop{animation:cell-pop 300ms ease-out both; transform-origin:center;}
@keyframes row-flash{0%{background:transparent;}15%{background:var(--flash-color);}100%{background:transparent;}}
.tvscreen .flash{animation:row-flash 2s ease-out both;}
@keyframes band-flash{0%{background:var(--bg);}15%{background:var(--flash-color);}100%{background:var(--bg);}}
.tvscreen .nameband.flash{animation:band-flash 2s ease-out both;}
/* Half-cell flash parity (owner catch — UPSTREAMED as D95): the shared
   renderer now emits an <i class="hwash tl|br flash"> overlay in a flashing
   half-filled cell; clip it to the empty triangle (.flash animates it). */
.tvscreen .cell .hwash{position:absolute; inset:0; pointer-events:none;}
.tvscreen .cell .hwash.tl{clip-path:polygon(0 0, 100% 0, 0 100%);}
.tvscreen .cell .hwash.br{clip-path:polygon(100% 0, 100% 100%, 0 100%);}

/* ---- THE CIRCUIT: bare marks -> measured traces -> engine -> the story ---- */
.flow{position:relative;}
.flow > section{position:relative; z-index:1;}
.flow-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;}
/* the cables draw themselves in when the circuit scrolls into view... */
.flow-svg .fbase{
  fill:none; stroke:var(--line-2); stroke-width:1.5;
  stroke-dasharray:100 100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.25,1);
}
.flow-svg.drawn .fbase{stroke-dashoffset:0;}
.flow-svg .fnode{fill:var(--bg); stroke:var(--line-2); stroke-width:2; animation:node-breathe 5.5s ease-in-out infinite;}
@keyframes node-breathe{0%,100%{opacity:.55;}50%{opacity:1;}}
/* ...then comets ride them: a bright head with a soft second glint behind it,
   eased fast-in slow-out, all cables on one clock */
.flow-svg:not(.drawn) .fpulse{display:none;}
/* round 5 owner call: the comet never PARKS at the tip — the gap in the dash
   pattern is longer than the cable, so it runs clean OFF the far end and
   disappears in motion, same way it enters */
.flow-svg .fpulse{
  fill:none; stroke:#a4b6ff; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:12 200; stroke-dashoffset:12;
  filter:drop-shadow(0 0 6px rgba(122,148,255,.95)) drop-shadow(0 0 16px rgba(91,124,255,.55));
  animation:comet 2.1s cubic-bezier(.7,.02,.3,1) infinite;   /* round 4: faster */
}
.flow-svg .fpulse.f2{
  stroke:#dbe3ff; stroke-width:1.6; stroke-dasharray:4 200; stroke-dashoffset:10;
  filter:drop-shadow(0 0 4px rgba(190,205,255,.9));
  animation-name:comet2;
}
.flow-svg .fpulse.fout{animation-delay:1.05s;}
@keyframes comet{
  0%{stroke-dashoffset:12; opacity:0;} 6%{opacity:1;}
  64%{stroke-dashoffset:-112; opacity:1;}
  64.1%,100%{stroke-dashoffset:-112; opacity:0;}
}
@keyframes comet2{
  0%,5%{stroke-dashoffset:10; opacity:0;} 11%{opacity:.9;}
  68%{stroke-dashoffset:-104; opacity:.9;}
  68.1%,100%{stroke-dashoffset:-104; opacity:0;}
}
.circuit{padding:100px var(--gutter) 0; text-align:center;}
.c-sources{
  display:flex; justify-content:space-between; align-items:center; gap:28px;
  max-width:1600px; margin:0 auto; padding:0 8px;
}
.c-src{display:inline-flex; align-items:center; gap:14px; font-size:21px; font-weight:700; color:#fff; white-space:nowrap;}
.c-mark{display:inline-flex; color:#fff;}
.c-mark svg{height:30px; width:auto; display:block;}
.c-engine-row{margin-top:190px;}
/* the circuit's heart: a small live wall TV with a breathing halo behind it */
.c-tv{position:relative; display:inline-block; width:min(720px, 88%); text-align:center;}
.c-tv::before{
  content:""; position:absolute; inset:-90px -140px; pointer-events:none; z-index:0;
  background:radial-gradient(55% 55% at 50% 42%, rgba(91,124,255,.17), transparent 70%);
  animation:halo-breathe 5.5s ease-in-out infinite;
}
@keyframes halo-breathe{0%,100%{opacity:.65;}50%{opacity:1;}}
.tv-mini{position:relative; z-index:1; box-shadow:
  0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.6) inset,
  0 0 0 1px #05060a, 0 0 70px -18px var(--glow), 0 34px 70px -40px rgba(5,8,25,.9);}
.c-tv h3{position:relative; z-index:1; font-size:26px; font-weight:600; margin:26px 0 0; color:var(--text); font-family:var(--display); letter-spacing:-0.04em;}
.c-tv p{position:relative; z-index:1; font-size:14px; font-weight:600; color:var(--dim); line-height:1.6; margin:6px 0 0;}

/* ---- the divider band: the BOARD's own divider language (§4.6), full width.
   Centered mono label + half-cell mark, hairlines running to the page edges —
   the structural element that owns the full-bleed canvas and is ours, not the
   exemplar's. ---- */
.rule-band{
  display:flex; align-items:center; gap:20px;
  padding:0 var(--gutter); margin:0 0 64px;
}
.rule-band::before, .rule-band::after{content:""; flex:1; height:1px; background:var(--line);}
.rule-band span{
  display:inline-flex; align-items:center; gap:13px; font-family:var(--mono);
  font-size:13.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dim2); white-space:nowrap;
}
.rb-mark{
  width:14px; height:14px; border-radius:4px; flex:none;
  background:linear-gradient(to bottom right, #fff 50%, #2b3244 50%);
  border:1px solid var(--line-2);
}

/* ---- sections + the scroll story ---- */
section{padding:110px 0; scroll-margin-top:76px;}
.circuit{padding-bottom:0;}
#chapters{padding-top:120px;}
.intro-kicker{
  display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim2); margin:0 0 22px;
}
h2{font-size:clamp(32px,4.6vw,56px); font-weight:600; line-height:1.02; margin:0 0 18px; text-wrap:balance; color:var(--text);}
.lead{font-size:17px; font-weight:600; color:var(--dim); line-height:1.6; max-width:56ch; margin:0;}
.eyebrow{
  /* bumped a size class with the rule-bands (owner, text pass 2) */
  display:flex; align-items:center; gap:14px; font-size:14.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim2); margin:0 0 20px;
}
.num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid rgba(91,124,255,.45); border-radius:50%;
  font-size:14px; color:var(--blue-up); background:rgba(91,124,255,.06);
}
.story{position:relative; display:grid; grid-template-columns:minmax(340px, 4fr) 9fr; gap:clamp(48px, 5vw, 110px); align-items:start;}
.story-rail{min-width:0;}
.step{min-height:86vh; display:flex; align-items:flex-start;}
/* the last step must out-travel the stage height, or the stage un-pins early
   and the email panel scrolls off the top (owner bug report) */
.step:last-child{min-height:max(92vh, 940px);}
.story-copy{position:sticky; top:190px; opacity:.32; transition:opacity .45s ease; padding-right:8px;}
.story-copy.active{opacity:1;}
.story-copy h3{font-size:clamp(30px,3vw,47px); font-weight:600; line-height:1.05; margin:0 0 12px; text-wrap:balance;}
.story-copy em{font-style:normal; color:var(--blue-up);}
/* every chapter (owner, text pass): short title, bold white sub, gray detail */
.copy-sub{font-size:19px; font-weight:800; color:var(--text); margin:0 0 18px; letter-spacing:-0.01em;}
.copy-lead{font-size:17.5px; font-weight:600; color:var(--dim); line-height:1.65; margin:0; max-width:42ch;}
.mail-sub{font-size:15.5px; font-weight:700; color:#d3d8e4; line-height:1.6; max-width:44ch; margin:0 0 14px;}
.mail-sub b{color:var(--text); font-weight:800;}
.stage-col{min-width:0; align-self:stretch;}   /* full row height: the sticky stage travels inside it */
.story-stage{position:sticky; top:88px; height:min(1000px, calc(100vh - 118px));}

/* the pulse line lives at the TOP of the stage only (steadytrader pattern) */
.stage-trace{
  position:absolute; top:0; left:50%; margin-left:-1px; width:2px; height:52px;
  background:linear-gradient(to bottom, var(--line-2), rgba(91,124,255,.4)); overflow:hidden;
}
.stage-trace i{
  position:absolute; left:0; top:-22px; width:100%; height:22px;
  background:linear-gradient(to bottom, transparent, var(--blue-up));
  animation:trace-drop 1.5s ease-in infinite; will-change:transform;
}
@keyframes trace-drop{0%{transform:translateY(0); opacity:0;}18%{opacity:1;}100%{transform:translateY(78px); opacity:0;}}
.stage-panel{
  position:absolute; left:0; right:0; top:52px; bottom:0;
  /* content hugs the BOTTOM of the stage (owner sketch): no dead band under
     the devices, every chapter sits low on the screen */
  display:none; align-items:flex-end; justify-content:center;
  padding-bottom:22px;
}
.stage-panel.active{display:flex; animation:panel-enter .32s cubic-bezier(.23,1,.32,1) backwards;}
/* 02's TV rides a touch higher now that its rail copy is shorter (owner) */
.stage-panel[data-panel="1"]{align-items:center;}
@keyframes panel-enter{from{opacity:0; transform:translateY(14px) scale(.985);}to{opacity:1; transform:none;}}

/* mobile story (owner + steadytrader's phone pattern): NO pinned stage —
   pro.js moves each panel INTO its chapter, and the chapters stack as plain
   blocks (copy, then its own demo) that scroll normally */
@media(max-width:980px){
  .story{display:block;}
  .stage-col{display:none;}   /* the emptied desktop stage (and its trace) */
  .step{min-height:0; display:block; margin-bottom:92px;}
  .step:last-child{min-height:0; margin-bottom:24px;}
  .story-copy{position:static; padding-right:0; opacity:1;}
  .stage-panel{
    position:static; display:flex; padding:30px 0 0;
    align-items:stretch; justify-content:center;
  }
  .stage-panel.active{animation:none;}
  .mailframe{--ms:clamp(10.5px, 3.7vw, 16px);}   /* width-fit; fitMails is desktop-only */
  /* panels never pop in/out with chapter activation here — that shifted the
     page under the reader's thumb; inline chapters show everything, always */
  .story-copy .tour-panel{display:block;}
}

/* ---- the phone duo (01): real rep app inside real hardware ---- */
.duo{display:flex; gap:40px; align-items:flex-start; justify-content:center; width:100%;}
/* bold platform labels over both phones (owner, round 4: name them, or two
   phones just looks redundant) */
.devfit[data-device]::before{
  content:attr(data-device); position:absolute; top:-56px; left:0; right:0;
  text-align:center; font-family:var(--display); font-size:22px; font-weight:700;
  letter-spacing:-0.03em; color:#fff;
}
/* width caps keep the scaled devices inside short viewports (0.476 = 406/852) */
.devfit{position:relative; width:min(340px, 40%, calc((100vh - 380px) * 0.476));}
.devfit > *{position:absolute; top:0; left:0; transform-origin:top left;}
.iphone{
  width:406px; height:852px; border-radius:62px; padding:9px; position:relative;
  background:linear-gradient(140deg,#4b4e57,#23252c 30%,#101217 66%,#3d4049);
  box-shadow:0 0 0 1px #08090c inset, 0 2px 3px rgba(255,255,255,.14) inset,
    0 60px 110px -50px rgba(0,0,0,.95);
}
.iphone::before{ /* volume keys */
  content:""; position:absolute; left:-2.5px; top:190px; width:3px; height:60px;
  border-radius:2px; background:#41444d; box-shadow:0 78px 0 #41444d, 0 -66px 0 -14px #41444d;
}
.iphone::after{ /* power key */
  content:""; position:absolute; right:-2.5px; top:250px; width:3px; height:96px;
  border-radius:2px; background:#41444d;
}
.ip-screen{
  position:relative; width:388px; height:834px; border-radius:54px; background:var(--bg);
  overflow:hidden; border:1px solid #12151d;
}
.ip-status{position:relative; height:56px; display:flex; align-items:center; justify-content:space-between; padding:6px 36px 0; color:#fff;}
.ip-time{font-size:17px; font-weight:700; letter-spacing:-0.01em; font-family:var(--font-sys);}
.ip-island{position:absolute; left:50%; top:12px; transform:translateX(-50%); width:122px; height:36px; border-radius:20px; background:#000;}
.ip-icons{display:flex; align-items:center; gap:7px;}
.ip-icons svg{display:block;}
.ip-homebar{position:absolute; bottom:9px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:3px; background:#fff; opacity:.28;}

.aphone{
  width:392px; height:846px; border-radius:40px; padding:10px; position:relative;
  background:linear-gradient(140deg,#3d4048,#191b20 38%,#2e3138);
  box-shadow:0 0 0 1px #08090c inset, 0 2px 3px rgba(255,255,255,.1) inset,
    0 60px 110px -50px rgba(0,0,0,.95);
}
.aphone::after{ /* power + volume, right edge */
  content:""; position:absolute; right:-2.5px; top:200px; width:3px; height:70px;
  border-radius:2px; background:#41444d; box-shadow:0 88px 0 #41444d;
}
.ap-screen{
  position:relative; width:372px; height:826px; border-radius:30px; background:var(--bg);
  overflow:hidden; border:1px solid #12151d;
}
.ap-status{position:relative; height:48px; display:flex; align-items:center; justify-content:space-between; padding:4px 26px 0; color:#fff;}
.ap-time{font-size:16px; font-weight:700; font-family:var(--font-sys);}
.ap-cam{position:absolute; left:50%; top:14px; transform:translateX(-50%); width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #17202e 18%, #000 60%); box-shadow:0 0 0 2px #05060a;}
.ap-navbar{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:120px; height:4px; border-radius:2px; background:#fff; opacity:.25;}

/* the rep app reproduction — rep/rep.css values verbatim, shared by both */
.rapp{position:relative; height:calc(100% - 56px); font-weight:600; font-family:var(--font-sys); color:var(--text);}
.ap-screen .rapp{height:calc(100% - 48px);}
/* the app's three screens live stacked in each phone; arrows page between */
.rscreen{position:absolute; inset:0; padding:8px 20px 0; display:none; flex-direction:column;}
.rscreen.active{display:flex; animation:rscreen-in .3s cubic-bezier(.23,1,.32,1) backwards;}
@keyframes rscreen-in{from{opacity:0; transform:translateX(16px);}to{opacity:1; transform:none;}}
.rapp .log-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.rapp .rbtn-link{color:var(--text-dim); font-size:16px; font-weight:700; padding:8px 4px;}
.rapp .log-head h1{margin:0; font-size:26px; font-weight:800; letter-spacing:-0.01em; color:var(--text); max-width:none;}
.rapp .log-steps{margin:auto 0; padding-bottom:140px;}
.rapp .lstep{margin-bottom:28px;}
.rapp .step-label{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-dim); margin:0 4px 12px;}
.rapp .cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.rapp .cat-btn{
  min-height:88px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 14px; font-family:inherit; font-size:22px; font-weight:800; color:#fff;
  background:var(--c,var(--card)); border:4px solid transparent; border-radius:14px;
  transition:transform .08s ease, border-color .12s ease; text-shadow:0 1px 2px rgba(0,0,0,.35);
  pointer-events:none;
}
.rapp .cat-btn.selected{border-color:#fff;}
.rapp .credit-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.rapp .rpill{
  min-height:84px; display:flex; align-items:center; justify-content:center; font-family:inherit;
  font-size:28px; font-weight:800; color:var(--text); background:var(--card);
  border:3px solid var(--card-border); border-radius:14px;
  transition:transform .08s ease, background .12s ease, color .12s ease, border-color .12s ease;
  pointer-events:none;
}
.rapp .rpill.selected{background:var(--text); color:var(--bg); border-color:var(--text);}
.rapp .rdock{position:absolute; left:12px; right:12px; bottom:96px;}
.rapp .rbtn-primary{
  width:100%; min-height:72px; display:flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:26px; font-weight:800; letter-spacing:-0.01em;
  background:var(--text); color:var(--bg); border:none; border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.5); transition:transform .08s ease, opacity .12s ease;
  pointer-events:none;
}
.rapp .rbtn-primary:disabled{opacity:.35;}
.rapp .rbtn-primary.press{transform:scale(.98);}
.rapp .rtoast{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); white-space:nowrap;
  padding:16px 24px; font-size:22px; font-weight:700; color:#fff; background:#04bf33;
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; transition:opacity .2s ease;
}
.rapp .rtoast.show{opacity:1;}
.tapdot{
  position:absolute; width:38px; height:38px; border-radius:50%; z-index:6;
  background:rgba(255,255,255,.35); border:1.5px solid rgba(255,255,255,.7);
  transform:translate(-50%,-50%) scale(.4); opacity:0; pointer-events:none;
  left:50%; top:50%;
  transition:left .38s cubic-bezier(.3,.7,.3,1), top .38s cubic-bezier(.3,.7,.3,1);
}
.tapdot.press{animation:tap .42s ease;}
@keyframes tap{0%{opacity:0; transform:translate(-50%,-50%) scale(.4);}30%{opacity:1; transform:translate(-50%,-50%) scale(1);}100%{opacity:0; transform:translate(-50%,-50%) scale(1.5);}}

/* ---- the desk iPad (03): real kiosk look — rep.css §4.11 values, iPad-sized.
   Status colors are PRODUCT colors (fixed, outside the theme system). ---- */
.pad-scene{position:relative; display:flex; justify-content:center; align-items:flex-end; gap:64px; width:100%;}
.devfit-pad{width:min(490px, 64%, calc((100vh - 330px) * 0.711));}   /* 640/900 */
.ipad{
  width:640px; height:900px; border-radius:44px; padding:16px; position:relative;
  background:linear-gradient(140deg,#43464e,#1d1f25 36%,#33363e);
  box-shadow:0 0 0 1px #08090c inset, 0 2px 3px rgba(255,255,255,.12) inset,
    0 60px 110px -50px rgba(0,0,0,.95);
}
.ipad::before{ /* front camera, portrait top bezel */
  content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:#000; box-shadow:0 0 0 1.5px #0c0e13;
}
.pad-screen{
  position:relative; width:608px; height:868px; border-radius:28px; background:var(--bg);
  overflow:hidden; border:1px solid #12151d; font-family:var(--font-sys); color:var(--text);
}
.kk-head{display:flex; align-items:baseline; justify-content:space-between; padding:30px 28px 16px;}
.kk-head h1{font-size:36px; font-weight:800; letter-spacing:-0.01em; margin:0; color:var(--text); max-width:none;}
.kk-store{font-size:16px; font-weight:700; color:var(--text-dim);}
/* base row = the rep app's own values (rep.css §4.11); the iPad scales UP */
.up-list{display:flex; flex-direction:column; gap:8px;}
.up-row{
  position:relative; display:flex; align-items:center; gap:8px; background:var(--card);
  border:2px solid var(--grid-line); border-radius:12px; padding:9px 12px;
}
.up-row.up-point{border-color:var(--text); padding:13px 12px;}
.up-row.up-point .up-name{font-size:16px; font-weight:800;}
.up-row.up-point .up-pos{font-size:18px; font-weight:800;}
.up-row.up-paused .up-name, .up-row.up-paused .up-pos{color:var(--text-dim);}
.up-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700;}
.up-pos{flex:0 0 auto; width:26px; text-align:center; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;}
.up-chev{flex:0 0 auto; color:var(--text-dim); font-size:18px; font-weight:800;}
.st-chip{flex:0 0 auto; min-width:62px; text-align:center; font-size:12px; font-weight:800; letter-spacing:.4px; border-radius:999px; padding:5px 12px;}
/* rows FLIP into place like a drag, never teleport (owner ask) */
.up-row.lift{z-index:3; box-shadow:0 16px 34px -12px rgba(0,0,0,.85); border-color:var(--text-dim);}
@keyframes chip-pop{0%{transform:scale(.6);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
.st-chip.chip-pop{animation:chip-pop .45s cubic-bezier(.3,.7,.3,1) both;}
/* the desk iPad's sizes */
.pad-screen .up-list{gap:9px; padding:2px 24px 24px;}
.pad-screen .up-row{gap:12px; border-radius:14px; padding:13px 16px;}
.pad-screen .up-row.up-point{padding:19px 16px;}
.pad-screen .up-row.up-point .up-name{font-size:24px;}
.pad-screen .up-row.up-point .up-pos{font-size:26px;}
.pad-screen .up-name{font-size:21px;}
.pad-screen .up-pos{width:36px; font-size:21px;}
.pad-screen .st-chip{min-width:92px; font-size:16px; padding:8px 16px;}
.st-chip-up{background:var(--st-up); color:var(--st-up-text);}
.st-chip-down{background:var(--st-down); color:var(--st-down-text);}
.st-chip-appt{background:var(--st-appt); color:var(--st-appt-text);}
.st-chip-lunch{background:var(--st-lunch); color:var(--st-lunch-text);}
.st-chip-out{background:var(--st-out); color:var(--st-out-text);}
.up-row.up-lockin{background:#0d0f16; border-style:dashed;}
.up-row.up-lockin .up-name{color:var(--text-dim);}
.lockin-tag{flex:0 0 auto; font-size:12px; font-weight:800; color:var(--bg); background:var(--text); border-radius:999px; padding:7px 14px;}
.pad-screen .lockin-tag{font-size:16px; padding:9px 20px;}
.up-row.up-out{opacity:.45; border-color:var(--card-border);}
.up-row.slide{animation:up-slide .45s cubic-bezier(.23,1,.32,1) backwards;}
@keyframes up-slide{from{opacity:0; transform:translateY(-8px);}to{opacity:1; transform:none;}}
.pad-home{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:180px; height:5px; border-radius:3px; background:#fff; opacity:.22;}
/* the kiosk's own status sheet + tap dot (round 5), iPad-sized */
.pad-screen .psheet{left:18px; right:18px; bottom:22px; border-radius:20px; padding:22px 22px 20px;}
.pad-screen .psheet-name{font-size:25px; margin-bottom:16px;}
.pad-screen .st-grid{gap:10px;}
.pad-screen .st-btn{min-height:58px; font-size:20px; border-radius:14px;}
.ipad::after{ /* top button, portrait right edge */
  content:""; position:absolute; right:-2.5px; top:120px; width:3px; height:84px;
  border-radius:2px; background:#4a4d55;
}

/* the position pings (LOCKED wording, D75) land INSIDE the top of an iPhone
   beside the iPad (owner, round 4): island + lock clock, newest card slides
   in under the clock like iOS, five deep, the oldest dies into the fade at
   the phone's cut edge */
.push-phone{
  flex:none; width:308px; padding:9px 9px 0; border-radius:52px 52px 0 0;
  background:linear-gradient(140deg,#4b4e57,#23252c 30%,#101217 66%,#3d4049);
  box-shadow:0 0 0 1px #08090c inset, 0 2px 3px rgba(255,255,255,.14) inset;
  height:min(600px, calc(100vh - 400px)); pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 76%, transparent 99%);
  mask-image:linear-gradient(to bottom, #000 76%, transparent 99%);
}
.pp-screen{
  position:relative; height:100%; border-radius:44px 44px 0 0; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #1b2130, #0a0c12 70%);
  padding:14px 12px 0; border:1px solid #12151d; border-bottom:none;
}
.pp-island{display:block; width:88px; height:25px; border-radius:14px; background:#000; margin:6px auto 16px;}
.pp-date{margin:0; text-align:center; font-size:14px; font-weight:600; color:rgba(255,255,255,.82);}
.pp-time{margin:0; text-align:center; font-size:54px; font-weight:700; letter-spacing:-0.02em;
  color:#fff; font-variant-numeric:tabular-nums; line-height:1.12;}
.push-stack{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.push-card{transition:opacity .4s ease, transform .45s cubic-bezier(.3,.7,.3,1);}
.push-card.enter{opacity:0; transform:translateY(-18px) scale(.97);}
.push-card.leave{opacity:0; transform:translateY(12px) scale(.96);}
.push-to{font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dim2); margin:0 0 8px 6px;}
.push-body{
  display:flex; gap:12px; align-items:center;
  background:rgba(30,32,40,.94); border:1px solid rgba(255,255,255,.16); border-radius:17px;
  padding:13px 15px; box-shadow:0 22px 60px -18px rgba(0,0,0,.95);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.push-mark{flex:none; display:inline-flex;}
.push-body b{display:block; font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--dim); text-transform:uppercase;}
.push-body span{font-size:14.5px; font-weight:700; color:#fff;}

/* ---- the two morning emails (04): docs/super-redesign/emails.html ---- */
/* Round 5 (owner: tough to read + dead room under the shorter email): every
   size rides the per-frame --ms base, and fitMails() (pro.js) sets EACH
   frame's base so both emails fill the stage height exactly — as big as
   their content allows, no scroll, no dead room. */
.mailduo{display:grid; grid-template-columns:1fr 1fr; gap:34px; width:100%; max-width:1320px; align-items:start; max-height:100%; overflow-y:auto; padding:2px;
  scrollbar-width:none;}   /* the fallback scroll stays chromeless */
.mailduo::-webkit-scrollbar{display:none;}
.lane-label{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim2); margin:0 0 11px 2px;}
.mailframe{--ms:16px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0c0d12; box-shadow:0 40px 90px -55px rgba(0,0,0,.95);}
.mailhead{padding:calc(var(--ms)*.88) calc(var(--ms)*1.3); border-bottom:1px solid rgba(35,38,52,.6);}
.mailhead .subj{font-size:calc(var(--ms)*1.06); font-weight:800; letter-spacing:-0.01em; margin-bottom:3px; color:var(--text);}
.mailhead .meta{font-size:calc(var(--ms)*.84); font-weight:600; color:var(--dim2);}
.email{background:#000; padding:calc(var(--ms)*1.9); font-weight:600;}
.e-brand{display:flex; align-items:baseline; gap:10px; margin-bottom:calc(var(--ms)*1.25);}
.wm-mail{font-size:calc(var(--ms)*1.06); color:#fff;}
.e-brand > span:last-child{color:#555c6b; font-size:calc(var(--ms)*.69); font-weight:800; text-transform:uppercase; letter-spacing:.14em;}
.e-date{color:var(--dim2); font-size:calc(var(--ms)*.88); margin-bottom:2px;}
.e-store{color:var(--dim); font-size:calc(var(--ms)*.97); font-weight:700; margin-bottom:calc(var(--ms)*1.25);}
.e-hero{color:#fff; font-size:calc(var(--ms)*3); font-weight:800; letter-spacing:-0.03em; line-height:1; font-variant-numeric:tabular-nums;}
.e-hero small{font-size:calc(var(--ms)*1.06); color:var(--dim2); font-weight:600; letter-spacing:-0.01em;}
.e-heroL{color:var(--dim2); font-size:calc(var(--ms)*.9); margin:calc(var(--ms)*.44) 0 calc(var(--ms)*1.44);}
.e-row{display:flex; border-top:1px solid #191c24; padding:calc(var(--ms)*.81) 0; align-items:baseline; font-size:calc(var(--ms)*.97);}
.e-hero + .e-row{margin-top:calc(var(--ms)*1.2);}   /* the admin hero has no sub-line now */
.e-row .k{width:calc(var(--ms)*7.4); color:var(--dim2); font-size:calc(var(--ms)*.84); flex:none;}
.e-row .v{color:#ededed; font-weight:600; min-width:0;}
.e-row .v.vgrow{flex:1;}
.e-row .v b{font-weight:800; color:#fff; font-variant-numeric:tabular-nums;}
.e-amber{color:#ffb224; font-weight:700;}
.e-flame{font-size:calc(var(--ms)*.75);}
.cells{display:inline-flex; gap:3px; vertical-align:-1px; flex-wrap:wrap;}
.cells i{width:calc(var(--ms)*.81); height:calc(var(--ms)*.81); border-radius:3px;}
.cells i.half{clip-path:polygon(0 0,100% 0,0 100%);}
.e-cats{display:block; font-size:calc(var(--ms)*.84); color:var(--dim); margin-top:calc(var(--ms)*.44); font-weight:600;}
.e-cats b{font-weight:800; font-variant-numeric:tabular-nums;}
.mixbar{display:flex; height:calc(var(--ms)*.63); border-radius:5px; overflow:hidden; background:#191c24; margin-top:5px;}
.mixbar i{height:100%;}
.e-sub{color:var(--dim); font-size:calc(var(--ms)*.75); text-transform:uppercase; letter-spacing:.14em; font-weight:600; margin:calc(var(--ms)*1.3) 0 calc(var(--ms)*.3);}
.rtable{width:100%; border-collapse:collapse;}
.rtable th{font-size:calc(var(--ms)*.72); color:var(--dim2); text-transform:uppercase; letter-spacing:.08em; text-align:left; padding:calc(var(--ms)*.44) 4px; border-bottom:1px solid #191c24; font-weight:600;}
.rtable th.r,.rtable td.r{text-align:right;}
.rtable td{padding:calc(var(--ms)*.63) 4px; border-bottom:1px solid #12141b; font-size:calc(var(--ms)*.94); color:#ededed; white-space:nowrap; font-variant-numeric:tabular-nums; font-family:var(--font);}
.rtable td.dim{color:var(--dim2);}
.rtable .nm{font-weight:700; color:#fff;}
.rtable .fl{font-size:calc(var(--ms)*.75);}
.e-ok{color:var(--dim2); font-size:calc(var(--ms)*.88); padding:calc(var(--ms)*.38) 0;}
.e-ok b{color:#4cc38a; font-weight:800;}
.e-cta{display:inline-block; margin-top:calc(var(--ms)*1.3); padding:calc(var(--ms)*.75) calc(var(--ms)*1.13); border:1px solid #333a48; border-radius:10px; color:#ededed; font-weight:700; font-size:calc(var(--ms)*.9);}

/* ---- WHY: three cards, ours glows ---- */
.why-head{text-align:center; padding:0 24px 44px;}
.why-head h2{font-size:clamp(38px,5.4vw,72px); margin:0 auto;}
.why-cards{display:grid; grid-template-columns:1.05fr 1fr 1fr; gap:18px; max-width:1680px; margin:0 auto;}
@media(max-width:940px){.why-cards{grid-template-columns:1fr;}}
.why-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 26px 14px;
}
.why-card.us{
  background:linear-gradient(180deg, #10131d, #0c0d13);
  border-color:rgba(91,124,255,.55);
  box-shadow:0 0 70px -22px var(--glow), 0 0 0 1px rgba(91,124,255,.12) inset;
}
.why-card .thead{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
.why-card .thead svg{width:26px; height:26px; flex:none;}
.why-card .tname{font-size:21px; font-weight:600; color:var(--text);}
.why-card .tname .wm{font-size:21px;}
.why-card .tier{display:block; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2); padding:6px 0 16px; border-bottom:1px solid var(--line);}
.why-row{display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid #14161c; font-size:14px; font-weight:600; color:var(--dim);}
.why-card .why-row:last-child{border-bottom:none;}
.why-card.us .why-row{color:var(--text);}
.wmark{
  width:22px; height:22px; border-radius:6px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px;
  border:1px solid var(--line-2); color:var(--dim2);
}
.wmark.y{background:var(--blue-up); border-color:var(--blue-up); color:#fff; box-shadow:0 0 14px -2px var(--glow);}
.wmark.p{color:var(--dim); border-color:var(--line-2);}

/* ---- FAQ: heading left, accordion right ---- */
.faq-grid{display:grid; grid-template-columns:5fr 7fr; gap:clamp(56px, 6vw, 120px); align-items:start; max-width:1760px;}
@media(max-width:940px){.faq-grid{grid-template-columns:1fr; gap:20px;}}
.faq-head{position:sticky; top:140px;}
@media(max-width:940px){.faq-head{position:static;}}
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  display:flex; align-items:baseline; gap:20px; cursor:pointer; list-style:none;
  padding:24px 4px; font-size:17.5px; font-weight:800; letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{display:none;}
.fnum{font-size:11px; color:var(--blue-up); flex:none;}
.plus{margin-left:auto; color:var(--dim2); font-weight:600; font-size:20px; transition:transform .2s ease;}
.faq details[open] .plus{transform:rotate(45deg);}
.faq details p{margin:0; padding:0 4px 26px 46px; font-size:15px; font-weight:600; color:var(--dim); line-height:1.65; max-width:64ch;}
@media(max-width:560px){.faq details p{padding-left:4px;}}

/* ---- CLOSING (the ask): full-bleed grainy gradient band; four surface
   marks ride measured comet cables into the Get BoardIt button ---- */
.closing{
  text-align:center; padding:170px 24px 180px; position:relative; overflow:hidden;
  background:var(--shell-grad); color:var(--ink);
}
.close-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.close-svg .cbase{fill:none; stroke:rgba(10,12,18,.28); stroke-width:1.5;}
.close-svg .cpulse{
  fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:12 200; stroke-dashoffset:12;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(91,124,255,.8));
  animation:comet 2.1s cubic-bezier(.7,.02,.3,1) infinite;   /* the hero clock */
}
.close-svg .cpulse.c2{animation-delay:1.05s;}
/* the button takes the hit: a quick pop + white ring each time a comet
   lands (owner) — timed from JS against the same 2.1s clock */
#close-cta.ping{animation:cta-ping .55s cubic-bezier(.2,.7,.3,1);}
@keyframes cta-ping{
  0%,100%{transform:none; box-shadow:0 14px 34px -12px rgba(10,12,18,.55);}
  22%{
    transform:scale(1.05);
    box-shadow:0 0 0 7px rgba(255,255,255,.38), 0 0 44px -2px rgba(255,255,255,.95),
      0 14px 34px -12px rgba(10,12,18,.55);
  }
}
.cm{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ink); z-index:1;
}
.cm span{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(10,12,18,.62);}
#cm-tv{left:9%; top:64px;}
#cm-phone{right:9%; top:64px;}
#cm-pad{left:13%; bottom:70px;}
#cm-mail{right:13%; bottom:70px;}
@media(max-width:900px){.cm, .close-svg{display:none;}}
.closing::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.closing h2{color:var(--ink); font-size:clamp(38px,5.4vw,72px); margin:0 auto 16px; position:relative;}
.closing-sub{font-size:17px; font-weight:600; color:rgba(10,12,18,.72); max-width:44ch; margin:0 auto 34px; position:relative;}
.closing .cta{position:relative;}

/* ---- footer: the map ---- */
footer{padding:64px 0 56px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.foot-brand{display:flex; align-items:center; gap:10px; font-size:20px; margin-bottom:14px;}
.foot-brand svg{width:28px; height:28px;}
.foot-tag{font-size:13.5px; font-weight:600; color:var(--dim2); line-height:1.6; margin:0;}
.foot-h{font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--dim2); margin:6px 0 14px;}
.foot-col{display:flex; flex-direction:column; align-items:flex-start;}
.foot-col a{
  font-size:14px; font-weight:600; color:var(--dim); text-decoration:none;
  padding:7px 0; border-bottom:1px solid #14161c; width:100%;
  transition:color .14s ease;
}
.foot-col a:last-child{border-bottom:none;}
.foot-col a:hover{color:var(--text);}

/* ---- small screens ---- */
@media(max-width:560px){
  nav{padding:12px 16px;}
  .brand{font-size:19px;} .brand svg{width:26px; height:26px;}
  .nav-ghost{padding:9px 10px;} .nav-cta{padding:9px 13px;}
  section{padding:72px 0;}
  .hero{padding:112px 14px 44px; border-radius:0 0 18px 18px;}
  .tvwrap{margin-top:48px;}
  .tv{padding:5px 5px 6px; border-radius:8px;}
  .tv::after{inset:5px 5px 6px;}
  .closing{padding:92px 20px;}
}
@media(max-width:900px){
  .circuit{padding-top:64px;}
  .flow-svg{display:none;}
  .c-sources{flex-direction:column; gap:16px; align-items:center;}
  .c-src{font-size:18px;}
  .c-mark svg{height:24px;}
  .c-engine-row{margin-top:44px;}
  .c-tv{width:100%;}
  #chapters{padding-top:64px;}
  .duo{gap:18px;}
  .devfit{width:min(240px, 44%);}
  .devfit-pad{width:min(340px, 72%);}
  .push-phone{display:none;}   /* no room beside the iPad on small screens */
  .duo{padding-top:40px;}      /* headroom for the platform labels */
  .devfit[data-device]::before{top:-38px; font-size:15px;}
  .lab-arrow{width:42px; height:42px; font-size:22px;}
  .mailduo{grid-template-columns:1fr; max-width:520px;}
}
/* one phone on a phone (steadytrader shows one device): Android hides, the
   iPhone carries the demo at a size you can actually read */
@media(max-width:700px){
  .devfit[data-device="Android"]{display:none;}
  .devfit[data-fit="406x852"]{width:min(272px, 72vw);}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn-sheen::before, .live-dot, .stage-trace i, .flow-svg .fpulse,
  .tvscreen .streak-flame, .tvscreen .cell.pop, .tvscreen .flash,
  .tvscreen .nameband.flash, .tapdot{animation:none;}
  .js [data-reveal]{opacity:1; transform:none; transition:none;}
  .stage-panel.active{animation:none;}
  .up-row.slide{animation:none;}
}

/* ---- the phone lab (01): arrows page through the app's real screens ---- */
.lab{display:flex; flex-direction:column; align-items:center; width:100%;}
.lab-row{display:flex; align-items:center; justify-content:center; gap:30px; width:100%;}
.lab-arrow{
  flex:none; width:54px; height:54px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(91,124,255,.8); background:rgba(91,124,255,.12); color:var(--blue-up);
  font-size:27px; font-weight:600; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font); line-height:1; padding:0 0 3px;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
  animation:arrow-beckon 1.5s ease-in-out infinite;   /* round 4: they DEMAND to be pressed */
}
@keyframes arrow-beckon{
  0%,100%{box-shadow:0 0 0 0 rgba(91,124,255,0); background:rgba(91,124,255,.12);
    border-color:rgba(91,124,255,.8); color:var(--blue-up);}
  50%{box-shadow:0 0 32px -2px var(--glow), 0 0 0 8px rgba(91,124,255,.16);
    background:rgba(91,124,255,.32); border-color:#8ba4ff; color:#fff;}
}
.lab-arrow:hover{border-color:var(--blue-up); color:#fff; background:rgba(91,124,255,.16);}
.lab-arrow:active{transform:scale(.94);}
.lab-cap{margin-top:28px; text-align:center;}
.lab-dots{display:flex; gap:9px; justify-content:center; margin-bottom:12px;}
/* one clickable dot language for the lab and the board tour (round 4;
   round 5: bigger, they were tough to hit) */
.tdot{
  width:17px; height:17px; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid var(--line-2); background:var(--line-2);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tdot:hover{border-color:var(--blue-up);}
.tdot.on{background:var(--blue-up); border-color:var(--blue-up); box-shadow:0 0 12px -1px var(--glow);}

/* the phone's board view: the REAL portrait renderer, rep-app scale */
.tvscreen.tvportrait .grid-panel{grid-template-columns:repeat(var(--cols,20), var(--cell-size,48px));}
.pbhost{padding:0; background:transparent; display:block; transform-origin:top left;}
.pb-scale{flex:1 1 auto; min-height:0; overflow:hidden; border-radius:10px;}
.pb-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 0 16px; flex:none;}
.pb-card{background:var(--card); border:2px solid var(--card-border); border-left:4px solid var(--cat-color,var(--card-border)); border-radius:12px; padding:10px 12px;}
.pb-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pb-stats{display:flex; gap:14px; align-items:baseline;}
.pb-v{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;}
.pb-dim{color:var(--text-dim); font-size:14px; font-weight:700;}

/* the phone's own-status picker: the Log-a-Deal button language (rep.css) */
.psheet{
  position:absolute; left:10px; right:10px; bottom:14px; z-index:5;
  background:var(--card); border:2px solid var(--card-border); border-radius:16px;
  padding:16px 16px 14px; transform:translateY(118%);
  transition:transform .4s cubic-bezier(.3,.7,.3,1);
  box-shadow:0 -14px 40px rgba(0,0,0,.55);
}
.psheet.show{transform:none;}
.psheet-name{margin:0 0 12px; font-size:19px; font-weight:800; color:var(--text);}
.st-grid{display:flex; flex-direction:column; gap:8px;}
.st-btn{
  min-height:46px; font-family:inherit; font-size:15px; font-weight:800;
  border:3px solid transparent; border-radius:12px; pointer-events:none;
}
.st-btn.selected{border-color:#fff;}
.st-btn-up{background:var(--st-up); color:var(--st-up-text);}
.st-btn-down{background:var(--st-down); color:var(--st-down-text);}
.st-btn-appt{background:var(--st-appt); color:var(--st-appt-text);}
.st-btn-lunch{background:var(--st-lunch); color:var(--st-lunch-text);}
.st-btn-out{background:var(--st-out); color:var(--st-out-text);}
.pup{padding-bottom:14px; overflow:hidden; flex:1; min-height:0;}

/* ---- the board tour (02): a ring travels the TV, calling out features ---- */
.tv-tour{position:relative; width:100%; max-width:1160px;}
.tour-ring{
  position:absolute; z-index:4; pointer-events:none; border-radius:10px;
  border:2px solid var(--blue-up); box-shadow:0 0 26px -6px var(--glow), 0 0 0 4px rgba(91,124,255,.12);
  transition:left .55s cubic-bezier(.3,.7,.2,1), top .55s cubic-bezier(.3,.7,.2,1),
    width .55s cubic-bezier(.3,.7,.2,1), height .55s cubic-bezier(.3,.7,.2,1), opacity .3s ease;
  animation:ring-pulse 2.2s ease-in-out infinite;
}
@keyframes ring-pulse{0%,100%{box-shadow:0 0 26px -6px var(--glow), 0 0 0 4px rgba(91,124,255,.12);}50%{box-shadow:0 0 34px -4px var(--glow), 0 0 0 7px rgba(91,124,255,.05);}}
/* the description panel lives in the rail, under the chapter copy (owner,
   round 4); a measured cable ties it to the ring on the TV */
.tour-panel{
  /* fills the rail and runs bigger (owner, text pass 2: was way too small) */
  display:none; margin-top:30px; width:100%; max-width:none;
  border:1px solid rgba(91,124,255,.35); border-radius:14px;
  padding:24px 26px 22px; background:rgba(14,16,24,.72);
}
.story-copy.active .tour-panel{display:block;}
.tour-k{margin:0 0 10px; font-family:var(--mono); font-size:13.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--blue-up);}
.tour-b{margin:0; font-size:17.5px; font-weight:600; color:var(--dim); line-height:1.6;}
.tour-b b{color:var(--text); font-weight:800; margin-right:9px;}
.tour-dots{display:flex; gap:9px; margin-top:14px;}
.tour-link{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; overflow:visible;}
.tour-link .tl-base{fill:none; stroke:rgba(91,124,255,.4); stroke-width:1.5;}
.tour-link .tl-pulse{
  fill:none; stroke:#a4b6ff; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:10 200; stroke-dashoffset:10;   /* runs off the end too */
  filter:drop-shadow(0 0 6px rgba(122,148,255,.95)) drop-shadow(0 0 14px rgba(91,124,255,.5));
  animation:tlink 1.8s cubic-bezier(.6,.05,.35,1) infinite;
}
@keyframes tlink{
  0%{stroke-dashoffset:10; opacity:0;} 8%{opacity:1;}
  82%{stroke-dashoffset:-110; opacity:1;}
  82.1%,100%{stroke-dashoffset:-110; opacity:0;}
}

/* new-motion additions honor reduced motion too */
@media (prefers-reduced-motion: reduce){
  .flow-svg .fbase{stroke-dasharray:none; stroke-dashoffset:0; transition:none;}
  .flow-svg .fnode, .c-tv::before, .tour-ring, .st-chip.chip-pop, .lab-arrow,
  .rscreen.active, .push-card, .tour-link .tl-pulse,
  .close-svg .cpulse{animation:none; transition:none;}
}

/* small screens: the arrows float over the duo so the phones keep their size */
@media(max-width:900px){
  .lab-row{position:relative; gap:0;}
  .lab-arrow{
    position:absolute; z-index:6; top:50%; transform:translateY(-50%);
    width:42px; height:42px; font-size:21px; background:rgba(14,15,20,.82);
  }
  .lab-arrow[data-lab="-1"]{left:2px;}
  .lab-arrow[data-lab="1"]{right:2px;}
  .lab-arrow:active{transform:translateY(-50%) scale(.94);}
  .lab-cap{margin-top:18px; padding:0 12px;}
}