/* Marketing site (owner: home). Builds on /assets/ui.css tokens + components; nothing here changes the app.
   Site-only tokens live on body.site so the app shell never sees them. */
body.site {
  --site-max: 1200px;              /* container width incl. gutters; widens on big monitors (below) */
  --gutter: 20px;
  --sec: clamp(46px, 4.8vw, 76px);  /* vertical rhythm: one section gap everywhere (was 76–128 px; tightened ~40%) */
  --nav-h: 64px;
  /* radius ladder for marketing surfaces: controls 10 · tiles 14 · cards 20 · panels 28 */
  --rs-1: 10px; --rs-2: 14px; --rs-3: 20px; --rs-4: 28px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  /* the cream "sheet" (brand kit / game notes): AA-checked inks on #f7f5ef */
  --paper: #f7f5ef; --paper-2: #ebe7dc; --ink: #1b1d33; --ink-2: #545770; --ink-label: #6e6446; --ink-gold: #8a5f00; --ink-ok: #0a7a33;
}
@media (min-width: 1600px) { body.site { --site-max: 1320px; --gutter: 32px; } }
@media (min-width: 2200px) { body.site { --site-max: 1600px; --gutter: 40px; } }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.site { overflow-x: clip; }
.site [hidden] { display: none !important; }
.site main { display: block; }
.site .container { max-width: var(--site-max); padding-inline: var(--gutter); }
@media (max-width: 640px) { body.site { --gutter: 16px; } }
::selection { background: rgba(255, 201, 60, .35); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Typesetting: no orphans in headings, fewer widows in body copy, honest code (no arrow ligatures). */
.site h1, .site h2, .site h3, .lg-doc h1, .lg-doc h2 { text-wrap: balance; }
.site p, .site .lede, .site li, .site figcaption { text-wrap: pretty; }
.site code, .site pre, .site .term, .site .kbd { font-variant-ligatures: none; }
.site .btn { text-wrap: balance; }

/* ---------- nav ---------- */
.site-nav { transition: background .25s, border-color .25s; background: rgba(10,11,16,0); border-bottom-color: transparent; }
.site-nav.scrolled, .site-nav.open { background: rgba(10,11,16,.84); border-bottom-color: rgba(255,255,255,.07); }
.site-nav .container { height: var(--nav-h); }
.site-nav .brand, .site-footer .brand { display: inline-flex; align-items: center; gap: 8px; font: 800 18px var(--display); letter-spacing: -.02em; text-decoration: none; color: var(--text); white-space: nowrap; flex: none; }
.site-nav .links { gap: 4px; }
.site-nav .links a { padding: 8px 11px; border-radius: 999px; transition: color .15s, background .15s; white-space: nowrap; }
.site-nav .links a:hover { background: rgba(255,255,255,.05); }
.site-nav .links a.on { color: var(--text); background: rgba(255,255,255,.06); }
.nav-cta { display: flex; gap: 8px; align-items: center; flex: none; }
.nav-cta .btn-sm { padding: 9px 15px; font-size: 13.5px; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-1); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; }
.menu-btn span { width: 16px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s var(--ease-out); }
.site-nav.open .menu-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-nav.open .menu-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-sheet { display: grid; padding: 6px var(--gutter) 20px; border-top: 1px solid var(--line); max-width: var(--site-max); margin: 0 auto; }
.nav-sheet a { display: flex; align-items: center; min-height: 50px; padding: 0 4px; color: var(--text-2); text-decoration: none; font: 600 16px var(--font); border-bottom: 1px solid var(--line); }
.nav-sheet a:last-child { border-bottom: 0; }
.nav-sheet a:active, .nav-sheet a:hover { color: var(--text); }
/* Six links + two CTAs need ~1000 px; collapse to the menu below that (was 760, which broke at tablet widths). */
@media (min-width: 1025px) { .nav-sheet { display: none !important; } }
@media (max-width: 1024px) { .menu-btn { display: inline-flex; } .site-nav .links { display: none; } }
@media (max-width: 640px) { .nav-cta .btn-sm { padding: 11px 16px; min-height: 42px; } .site .btn:not(.btn-sm) { min-height: 46px; } .codebox .tabs button { min-height: 42px; } .codebox .cp { min-height: 32px; } }
@media (max-width: 420px) { .hide-xs { display: none !important; } }
@media (max-width: 359px) { .site-nav .brand span { display: none; } .nav-cta .btn-sm { padding: 10px 14px; } } /* 320 px phones: mark only, so the menu button stays on screen */

/* ---------- shared ---------- */
.section { padding: var(--sec) 0; position: relative; }
.section.tight { padding: calc(var(--sec) * .62) 0; }
.section.flush-top { padding-top: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow.violet { color: #a996ff; } .eyebrow.cyan { color: var(--cyan); }
.site h2 { font-size: clamp(28px, 1.6vw + 17px, 50px); letter-spacing: -.028em; line-height: 1.06; }
.lede { font-size: clamp(16.5px, .35vw + 14px, 20px); line-height: 1.6; color: var(--text-2); max-width: 62ch; }
.sec-hd { max-width: 780px; margin-bottom: clamp(24px, 2.6vw, 40px); }
.sec-hd h2 { margin-bottom: 16px; }
.sec-hd .lede { margin-bottom: 0; }
.sec-hd.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-hd.center .lede { margin-left: auto; margin-right: auto; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.kbd { display: inline-block; font: 650 11.5px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line-strong); border-bottom-width: 2px; color: var(--text); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-2); }
.chip.gold { color: var(--gold); border-color: #5a4512; background: #1f1806; }
.chip.violet { color: #b9a9ff; border-color: #3b2f7a; background: #16112e; }
.chip.cyan { color: #7ee8f7; border-color: #155a66; background: #08222a; }
.glass { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rs-4); box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.shot { border-radius: var(--rs-2); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.45); display: block; width: 100%; height: auto; background: var(--surface-2); }
.note { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 5vh, 72px) 0 clamp(56px, 7vh, 96px); isolation: isolate; }
/* Desktop: the hero fills the first screen so the marquee lands on the fold instead of floating mid-page. */
@media (min-width: 1100px) and (min-height: 760px) { .hero { min-height: calc(100svh - var(--nav-h) - 54px); display: grid; align-items: center; } }
.hero-bg { position: absolute; inset: calc(var(--nav-h) * -1) 0 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-bg .glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.hero-bg .g1 { width: 620px; height: 620px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(124,92,255,.65), transparent 65%); }
.hero-bg .g2 { width: 700px; height: 700px; right: -200px; top: 40px; background: radial-gradient(circle, rgba(34,211,238,.35), transparent 65%); }
.hero-bg .g3 { width: 520px; height: 420px; left: 30%; top: 260px; background: radial-gradient(circle, rgba(255,176,0,.30), transparent 65%); }
@media (min-width: 1600px) { .hero-bg .g1 { width: 900px; height: 900px; left: -200px; } .hero-bg .g2 { width: 1000px; height: 1000px; } .hero-bg .g3 { width: 760px; height: 600px; } }
.hero-bg .floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; background-image: linear-gradient(rgba(124,92,255,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,255,.28) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(600px) rotateX(62deg); transform-origin: bottom; mask-image: linear-gradient(to top, rgba(0,0,0,.65), transparent 75%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.65), transparent 75%); animation: floor 3.5s linear infinite; }
@keyframes floor { to { background-position: 0 64px; } }
/* Floating 3D coins: a 32-frame pre-rendered spin as a sprite strip, stepped by CSS so each coin
   can spin at its own phase and pause under reduced motion. --s is the coin size. */
.coin { --s: 38px; position: absolute; width: var(--s); height: var(--s); background: url(/assets/site/img/coin-spin-96.webp) 0 0 / calc(var(--s) * 32) var(--s) no-repeat; filter: drop-shadow(0 0 14px rgba(255,190,40,.45)); opacity: .9; animation: coin-spin 2.6s steps(32) infinite, coin 9s ease-in-out infinite; }
@keyframes coin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
@keyframes coin-spin { to { background-position-x: calc(var(--s) * -32); } }
@media (max-width: 1399px) { .coin { display: none; } } /* narrow gutters: coins would sit on the copy */
@media (prefers-reduced-motion: reduce) { .hero-bg .floor, .coin, .marquee span::after { animation: none; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(48px, 4.5vw, 96px); align-items: center; width: 100%; }
@media (min-width: 1600px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.hero h1 { font-size: clamp(44px, 3.2vw + 32px, 88px); line-height: .98; letter-spacing: -.038em; margin: 0 0 24px; text-wrap: balance; }
.hero h1 .play { position: relative; display: inline-block; }
.hero h1 .play svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .22em; overflow: visible; }
.hero h1 .play path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 1.1s .6s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .play path { animation: none; stroke-dashoffset: 0; } }
.hero .sub { font-size: clamp(16.5px, .45vw + 13px, 21px); line-height: 1.6; color: var(--text-2); max-width: 34em; margin-bottom: 30px; }
.hero .sub b { color: var(--text); font-weight: 650; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--text-2); margin-bottom: 24px; text-decoration: none; transition: border-color .2s, color .2s; }
.hero-badge:hover { border-color: rgba(255,201,60,.45); color: var(--text); }
.hero-badge b { background: var(--grad-gold); color: var(--gold-ink); border-radius: 999px; padding: 3px 9px; font-size: 11px; letter-spacing: .06em; }
.urlbox { position: relative; display: flex; align-items: center; gap: 8px; background: #0d0f16; border: 1.5px solid var(--line-strong); border-radius: 20px; padding: 8px 8px 8px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 0 rgba(255,201,60,0); transition: border-color .2s, box-shadow .3s; max-width: 620px; }
.urlbox:hover { border-color: #464c63; }
.urlbox:focus-within { border-color: rgba(255,201,60,.75); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 5px rgba(255,201,60,.12); }
.urlbox svg.ic { flex: none; color: var(--muted); transition: color .2s; }
.urlbox:focus-within svg.ic { color: var(--gold); }
.urlbox input { border: 0; background: transparent; box-shadow: none !important; padding: 14px 4px; font-size: 18px; min-width: 0; flex: 1; }
.urlbox input::placeholder { color: #7d879c; } /* 5.3:1 on the box */
.urlbox input:focus, .urlbox input:focus-visible { outline: none; } /* the box itself shows focus (:focus-within) */
.urlbox .btn { padding: 15px 22px; font-size: 16px; border-radius: 14px; }
.urlbox .btn svg { transition: transform .2s var(--ease-out); }
.urlbox .btn:hover svg { transform: translateX(2px); }
.urlbox .kind { position: absolute; right: 150px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0; transition: opacity .2s; }
/* one quiet line under the box: what happens + the demo shortcut */
.url-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 620px; }
.url-hint button { background: none; border: 0; padding: 2px 0; color: var(--gold); font: 650 13.5px var(--font); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,201,60,.4); text-underline-offset: 3px; white-space: nowrap; }
.url-hint button:hover { text-decoration-color: var(--gold); }
.url-err { color: #ff9b9b; font-size: 13.5px; margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.url-err:empty { display: none; }
.url-err::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,120,120,.16); color: #ff9b9b; font: 800 11px/18px var(--font); text-align: center; }
/* the two audience paths: real targets (44 px), not 20 px text links */
.hero-aud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; font-size: 14px; }
.hero-aud a { color: var(--text-2); text-decoration: none; display: inline-flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-weight: 550; transition: border-color .2s, color .2s, background .2s; }
.hero-aud a::after { content: "→"; color: var(--muted); transition: transform .2s var(--ease-out), color .2s; }
.hero-aud a:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.hero-aud a:hover::after { transform: translateX(3px); color: var(--text); }
.hero-aud i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero-aud a:nth-child(2) i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* demo window */
.demo { position: relative; }
.demo-win { position: relative; border-radius: 22px; overflow: hidden; background: #0b0d14; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4), 0 0 80px rgba(124,92,255,.18); }
.demo-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #10121b; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 12.5px; color: var(--muted); }
.demo-bar .dots { display: flex; gap: 6px; } .demo-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #2c3042; }
.demo-bar .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar .t b { color: var(--text); font-weight: 650; }
.demo-bar .live { margin-right: 92px; }
@media (max-width: 1100px) { .demo-bar .live { margin-right: 84px; } }
@media (max-width: 640px) { .demo-bar .live { margin-right: 76px; } }
.live { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #ff9bb8; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 8px var(--coral); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }
.demo-stage { position: relative; aspect-ratio: 16 / 10; background: #8fd3ff; overflow: hidden; }
.demo-stage img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
@media (min-width: 641px) { .demo-stage img.poster { object-position: 0 50%; } } /* 16:9 poster in a 16:10 stage: keep the HUD's left pill whole */
.demo-stage iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity .5s; }
.demo-stage:fullscreen iframe { transform: none !important; width: 100% !important; height: 100% !important; }
.demo-stage.playing iframe { opacity: 1; }
.demo-play { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(10,11,16,.12), rgba(10,11,16,.6)); border: 0; cursor: pointer; color: #fff; padding: 0; width: 100%; font: inherit; transition: opacity .35s, background .3s; }
.demo-play:hover { background: radial-gradient(ellipse at center, rgba(10,11,16,.05), rgba(10,11,16,.5)); }
.demo-play:focus-visible { outline-offset: -4px; }
.demo-play .pbtn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px 12px 12px; border-radius: 999px; background: var(--grad-gold); color: var(--gold-ink); font: 750 16px var(--font); box-shadow: 0 14px 40px rgba(255,176,0,.4), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .25s var(--ease-out), box-shadow .25s; }
.demo-play:hover .pbtn { transform: scale(1.04); box-shadow: 0 18px 50px rgba(255,176,0,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.demo-play .pbtn i { width: 40px; height: 40px; border-radius: 50%; background: #1a1405; display: grid; place-items: center; }
.demo-play .pbtn i::after { content: ""; border-left: 13px solid var(--gold); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.demo-play small { display: block; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.9); text-shadow: 0 1px 6px rgba(0,0,0,.6); text-align: center; }
.demo-stage.playing .demo-play, .demo-stage.loading .demo-play { opacity: 0; pointer-events: none; }
.demo-load { position: absolute; inset: 0; display: none; place-items: center; color: #fff; font-weight: 650; background: rgba(10,11,16,.45); }
.demo-stage.loading .demo-load { display: grid; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--gold); animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; min-height: 46px; background: #10121b; border-top: 1px solid rgba(255,255,255,.07); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.demo-foot .keys { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.demo-foot .btn { padding: 6px 11px; font-size: 12.5px; }
.phase { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text-2); }
.phase i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.phase.ad i { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.demo > .note { margin: 12px 4px 0; }
.demo-bo { position: absolute; width: 150px; height: 150px; right: -34px; top: -104px; z-index: 3; pointer-events: none; }
.demo-bo img, .demo-bo canvas { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.demo-bo .bubble { position: absolute; right: 128px; top: 26px; white-space: nowrap; }
.bubble { background: #fff; color: var(--ink); font: 700 13px/1.25 var(--font); padding: 8px 12px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform-origin: right center; animation: pop .5s 1.4s both cubic-bezier(.3,1.6,.5,1); }
.bubble::after { content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; border-left: 8px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
.touchpad { position: absolute; left: 14px; bottom: 14px; right: 14px; display: none; justify-content: space-between; align-items: flex-end; pointer-events: none; z-index: 4; }
.demo-stage.playing.touch .touchpad { display: flex; }
.joy { width: 112px; height: 112px; border-radius: 50%; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.45); position: relative; pointer-events: auto; touch-action: none; backdrop-filter: blur(4px); }
.joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.jump { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,201,60,.92); color: var(--gold-ink); border: 0; font: 800 13px var(--font); pointer-events: auto; touch-action: none; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
@media (max-width: 1100px) { .demo-bo { width: 120px; height: 120px; right: -8px; top: -84px; } .demo-bo .bubble { right: 100px; top: 18px; } }
@media (max-width: 1099px) {
  .hero-grid { grid-template-columns: 1fr; gap: 72px; }
  .hero { padding-top: 32px; }
  .hero-copy { max-width: 720px; }
  .demo { margin-top: 18px; max-width: 820px; }
}
@media (max-width: 640px) {
  .hero h1 { margin-bottom: 18px; }
  .hero .sub { margin-bottom: 24px; }
  .urlbox { padding: 6px 6px 6px 14px; border-radius: 16px; }
  .urlbox input { font-size: 16px; padding: 12px 2px; }
  .urlbox .btn { padding: 13px 16px; font-size: 15px; min-width: 52px; }
  .urlbox .btn .t-long { display: none; }
  .hero-aud { flex-direction: column; margin-top: 24px; }
  .hero-aud a { justify-content: flex-start; }
  .hero-aud a::after { margin-left: auto; }
  .demo-stage { aspect-ratio: 4 / 3.4; }
  .demo-bo { width: 104px; height: 104px; right: -4px; top: -76px; }
  .demo-bo .bubble { right: 86px; top: 14px; font-size: 12px; }
  .demo-bar .hide-s { display: none; }
}

/* 2560-class monitors: one more step of scale so the hero doesn't read as a postage stamp */
@media (min-width: 2200px) {
  .hero h1 { font-size: 112px; }
  .hero .sub { font-size: 23px; }
  .urlbox, .url-hint { max-width: 720px; }
  .urlbox input { font-size: 20px; padding: 17px 4px; }
  .urlbox .btn { font-size: 17px; padding: 17px 26px; }
  .hero-aud { font-size: 15px; } .url-hint { font-size: 14.5px; }
  .site-nav .links { font-size: 15.5px; } .site-nav .brand { font-size: 19px; } .nav-cta .btn-sm { font-size: 14.5px; padding: 10px 18px; }
  .demo-bo { width: 180px; height: 180px; right: -44px; top: -126px; } .demo-bo .bubble { right: 150px; top: 34px; font-size: 14px; }
}

/* marquee (the track holds four copies of the list, so -50% loops seamlessly even at 2560) */
.marquee { border-block: 1px solid var(--line); background: #0c0d13; overflow: hidden; padding: 17px 0; }
.marquee .track { display: flex; width: max-content; animation: marq 80s linear infinite; }
.marquee span { font: 700 15px var(--display); color: var(--text-2); white-space: nowrap; display: inline-block; letter-spacing: -.01em; padding-right: 44px; }
.marquee span::after { --s: 18px; content: ""; display: inline-block; vertical-align: middle; margin: -3px 0 0 40px; width: var(--s); height: var(--s); background: url(/assets/site/img/coin-spin-32.webp) 0 0 / calc(var(--s) * 32) var(--s) no-repeat; animation: coin-spin 2.2s steps(32) infinite; }
.marquee b { color: inherit; font-weight: inherit; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 10px; padding: 0 var(--gutter); } .marquee .track span.dup { display: none; } }

/* ---------- live preview (detect + learn teaser) ---------- */
.teaser { display: none; }
.teaser.on { display: block; }
.teaser .panel { padding: 24px; position: relative; overflow: clip; }
.tz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.tz-top h2 { font-size: clamp(22px, 1vw + 16px, 32px); margin: 0; flex: 1; min-width: 240px; }
.tz-top .chip { flex: none; }
.tz-grid { display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1061px) {
  /* Bo and his bubble stay in view while a tall brand kit scrolls past. */
  .tz-grid > .tz-bo { position: sticky; top: calc(var(--nav-h) + 20px); }
  /* After a failed learn there's no sheet: let the frame be a sensible size instead of a 1fr sprawl. */
  .teaser:not(.busy) .tz-grid:has(> .sheet[hidden]) { grid-template-columns: 210px minmax(0, 680px); }
  /* While detecting, hold the sheet's place so the panel doesn't look a third empty. */
  .teaser.busy .tz-grid:has(> .sheet[hidden])::after { content: "Bo’s notes will appear here"; display: grid; place-items: center; align-self: stretch; min-height: 240px; border: 1.5px dashed rgba(255,255,255,.12); border-radius: var(--rs-3); color: var(--muted); font-size: 13.5px; background: repeating-linear-gradient(180deg, transparent 0 46px, rgba(255,255,255,.025) 46px 47px); }
}
.tz-bo { position: relative; text-align: center; }
.tz-bo .bo-wrap { width: 190px; height: 210px; margin: 0 auto; position: relative; }
.tz-bo .bo-wrap img, .tz-bo .bo-wrap canvas { width: 100% !important; height: 100% !important; object-fit: contain; }
.tz-bo .say { background: #fff; color: var(--ink); border-radius: 14px; padding: 11px 13px; font: 650 13px/1.4 var(--font); text-align: left; position: relative; margin-top: 8px; min-height: 48px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.tz-bo .say::before { content: ""; position: absolute; top: -7px; left: 50%; margin-left: -7px; border-bottom: 8px solid #fff; border-left: 7px solid transparent; border-right: 7px solid transparent; }
.tz-bo .dots3 span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #6a5fd6; margin-right: 3px; animation: d3 1s infinite; }
.tz-bo .dots3 span:nth-child(2) { animation-delay: .15s; } .tz-bo .dots3 span:nth-child(3) { animation-delay: .3s; }
@keyframes d3 { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
.browser { border-radius: var(--rs-2); overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #0c0e15; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.browser .bar { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #141722; font: 12px var(--mono); color: var(--muted); }
.browser .bar .addr { flex: 1; min-width: 0; background: #0b0d14; border-radius: 8px; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser .view { position: relative; aspect-ratio: 1280 / 760; background: radial-gradient(120% 90% at 50% 0%, #121522, #0b0d14 70%); overflow: hidden; }
.browser .view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .5s; }
.browser .view img.on { opacity: 1; }
.browser .scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(to bottom, transparent, rgba(255,201,60,.18) 85%, rgba(255,201,60,.6)); border-bottom: 2px solid rgba(255,214,107,.9); mix-blend-mode: screen; animation: scan 2.2s cubic-bezier(.5,0,.5,1) infinite; display: none; }
.teaser.busy .browser .scan { display: block; }
@keyframes scan { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .browser .scan { animation: none; top: auto; bottom: 0; height: 2px; } }
.browser .cap { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 12px; color: #fff; background: rgba(10,11,16,.72); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.browser .cap.on { opacity: 1; }
.browser .empty-v { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.browser .empty-v .fs { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px; max-width: 320px; }
.browser .empty-v .fs svg { color: #6b7090; margin-bottom: 4px; }
.browser .empty-v .fs.shield svg { color: #a996ff; }
.browser .empty-v .fs.error svg { color: #ffb36b; }
.browser .empty-v .fs b { color: var(--text); font: 650 14px/1.3 var(--font); overflow-wrap: anywhere; }
.browser .empty-v .fs span { font-size: 12.5px; line-height: 1.4; }
.browser .view.blocked::after { content: "Blocked by the site"; position: absolute; top: 10px; left: 10px; z-index: 2; font: 700 11px/1 var(--font); letter-spacing: .04em; color: #ffd6d6; background: rgba(120,20,30,.85); border: 1px solid rgba(255,120,120,.5); padding: 6px 9px; border-radius: 999px; }
.browser .view.blocked img.on { filter: saturate(.4) brightness(.75); }
.notes { margin-top: 14px; display: grid; gap: 7px; max-height: 176px; overflow: hidden; mask-image: linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.notes div { font-size: 12.5px; line-height: 1.5; color: var(--text-2); display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 6px; animation: notein .35s both; }
.notes div::before { content: "›"; color: var(--gold); font-weight: 800; }
.notes div.th { color: var(--muted); font-style: italic; }
.notes div.th::before { content: "…"; color: #a996ff; font-style: normal; }
@keyframes notein { from { opacity: 0; transform: translateY(-6px); } }
/* the cream sheet: every ink checked to AA on --paper */
.sheet { background: var(--paper); color: var(--ink); border-radius: var(--rs-3); padding: 18px 18px 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); position: relative; }
.sheet::before { content: ""; position: absolute; inset: 7px; border-radius: 14px; border: 1.5px dashed rgba(27,29,51,.12); pointer-events: none; }
.sheet h3 { font: 800 11.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-label); margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; }
.sheet h3 span:last-child { color: var(--ink-gold); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sheet .nf { color: #6b6e85; font-style: italic; font-size: 12.5px; }
.sheet .hd { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.sheet .logo { width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.sheet .logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
.sheet .nm { font: 800 20px/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sheet .tg { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }
.sheet .row2 { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid rgba(27,29,51,.09); align-items: start; font-size: 13px; line-height: 1.45; }
.sheet .row2 > b { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-label); padding-top: 4px; }
.sheet .sw { display: flex; gap: 6px; flex-wrap: wrap; }
.sheet .sw i { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); display: inline-block; position: relative; animation: swin .45s both cubic-bezier(.3,1.6,.5,1); }
.sheet .sw i[title]:hover::after { content: attr(title); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font: 600 11px var(--mono); padding: 3px 6px; border-radius: 6px; white-space: nowrap; z-index: 2; }
.sheet .sw.small i { width: 20px; height: 20px; border-radius: 6px; }
@keyframes swin { from { transform: scale(0) rotate(-30deg); } }
.sheet .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.sheet .tags span { background: var(--paper-2); border-radius: 8px; padding: 3px 9px; font-weight: 650; font-size: 12px; line-height: 1.5; animation: swin .4s both cubic-bezier(.3,1.6,.5,1); }
.sheet .tags.k span { font-family: var(--mono); background: var(--ink); color: #fff; border-radius: 6px; }
.sheet ul { margin: 0; padding-left: 16px; } .sheet li { margin: 2px 0; }
.sheet li span { color: var(--ink-2) !important; }
.sheet .sk { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #e7e2d5, #f3efe5, #e7e2d5); background-size: 200% 100%; animation: skel 1.2s linear infinite; width: 70%; }
.sheet .sk.w4 { width: 40%; }
.sheet .imgs { display: flex; gap: 6px; flex-wrap: wrap; }
.sheet .imgs img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; background: var(--paper-2); animation: swin .4s both cubic-bezier(.3,1.6,.5,1); }
.sheet .stamp { position: absolute; right: 16px; bottom: 16px; transform: rotate(-12deg) scale(0); font: 800 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-ok); border: 2.5px solid var(--ink-ok); border-radius: 8px; padding: 5px 8px; opacity: 0; transition: transform .45s cubic-bezier(.3,1.8,.5,1), opacity .3s; background: rgba(247,245,239,.9); }
.teaser.done .sheet .stamp { transform: rotate(-12deg) scale(1); opacity: 1; }
.teaser.done .sheet { padding-bottom: 56px; }
@media (prefers-reduced-motion: reduce) { .sheet .sw i, .sheet .tags span, .sheet .imgs img, .notes div { animation: none; } .sheet .stamp { transition: none; } }
.flydot { position: fixed; width: 22px; height: 22px; border-radius: 7px; z-index: 60; pointer-events: none; box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(0,0,0,.4); }
.tz-end { margin-top: 20px; display: none; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 16px 16px 16px 20px; border-radius: var(--rs-3); background: linear-gradient(90deg, rgba(255,201,60,.12), rgba(124,92,255,.12)); border: 1px solid rgba(255,201,60,.25); }
.teaser.done .tz-end, .tz-end.show { display: flex; }
.tz-end p { margin: 0; color: var(--text); font-weight: 600; flex: 1 1 280px; }
.tz-end .row { gap: 8px; }
.tz-msg { padding: 14px 18px; border-radius: var(--rs-2); background: var(--surface-2); border: 1px solid var(--line-strong); margin-top: 14px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.tz-msg b { color: var(--text); }
.tz-msg.warn { border-color: #5a4512; background: #1d1707; color: #f4e2b4; }
@media (max-width: 1060px) { .tz-grid { grid-template-columns: 170px minmax(0, 1fr); } .tz-grid .sheet { grid-column: 1 / -1; } .tz-bo .bo-wrap { width: 160px; height: 180px; } }
@media (max-width: 640px) {
  .teaser .panel { padding: 16px; border-radius: 22px; }
  .tz-top { gap: 10px; margin-bottom: 14px; }
  .tz-top h2 { min-width: 100%; }
  .tz-top .btn-ghost { margin-left: auto; padding-right: 4px; }
  .tz-grid { grid-template-columns: 1fr; gap: 14px; }
  .tz-bo { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; }
  .tz-bo .bo-wrap { width: 88px; height: 100px; }
  .tz-bo .say { margin-top: 0; }
  .tz-bo .say::before { left: -7px; top: 50%; margin: -7px 0 0; border: 7px solid transparent; border-right: 8px solid #fff; border-left: 0; }
  .sheet .row2 { grid-template-columns: 80px minmax(0, 1fr); }
  .tz-end { padding: 16px; }
  .tz-end .row { width: 100%; flex-direction: column; align-items: stretch; }
}

/* teaser v2: recorded-run replay + fast analyzer (teaser.js) */
.tz-rec { font: 600 12px/1 var(--font); color: var(--muted); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line-strong); white-space: nowrap; }
.tz-rec::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff5d6c; margin-right: 6px; vertical-align: 1px; }
.teaser.ended .tz-rec::before { background: var(--muted); }
.teaser.idle #tz-close { display: none; }
.notes div.ok::before { content: "✓"; color: #5ee08a; }
.notes div.fld { color: var(--text); }
.tz-techbtn { margin-top: 10px; background: none; border: 0; padding: 6px 0; color: var(--muted); font: 600 12px/1.2 var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }
.tz-techbtn:hover { color: var(--text); }
.tz-tech { margin-top: 6px; max-height: 180px; overflow: auto; background: #07080c; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font: 11.5px/1.55 var(--mono); color: #9aa3b8; overflow-wrap: anywhere; }
.tz-tech div + div { margin-top: 3px; }
.sheet .row2.fill > div { animation: fieldin .45s both var(--ease-out); }
.sheet .row2.fill { animation: rowflash 1.1s ease-out; }
@keyframes fieldin { from { opacity: 0; transform: translateY(4px); } }
@keyframes rowflash { 0% { background: rgba(255, 201, 60, .28); } 100% { background: transparent; } }
.sheet .row2 { border-radius: 6px; }
.sheet .ctrls { display: grid; gap: 5px; }
.sheet .ctrl { display: flex; align-items: center; gap: 8px; animation: swin .35s both cubic-bezier(.3,1.6,.5,1); font-size: 12.5px; }
.sheet .ctrl .keys { display: inline-flex; gap: 3px; flex: none; }
.sheet .ctrl kbd { font: 700 11px/1 var(--mono); min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; background: var(--ink); color: #fff; border-radius: 6px; box-shadow: 0 2px 0 #000; }
.sheet .ctrl em { color: var(--ink-2); font-style: normal; font-size: 11.5px; }
.sheet .rate { display: inline-block; font: 800 10.5px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: #d9f2df; color: #0a5a26; margin-right: 4px; vertical-align: 1px; }
.sheet .rate.r-teen { background: #fde9c8; color: #7a4a00; } .sheet .rate.r-mature { background: #f8d4d4; color: #8a1c1c; } .sheet .rate.r-unrated { background: var(--paper-2); color: var(--ink-2); }
.sheet .pin { display: inline-block; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e5484d; margin-right: 7px; vertical-align: 0; }
.sheet .later { color: var(--ink-2); font-size: 12.5px; }
.sheet .later::before { content: "⏱ "; }
.sheet .logo img.shot { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.tz-demos { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tz-demos .chip { cursor: pointer; font: inherit; font-weight: 600; }
.tz-demos .chip:hover { border-color: var(--gold); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .sheet .row2.fill, .sheet .row2.fill > div, .sheet .ctrl { animation: none; } }
@media (max-width: 640px) { .tz-rec { order: 3; } .tz-tech { max-height: 140px; } }

/* ---------- how it works (scrollytelling) ---------- */
.how { position: relative; }
.how .sec-hd { margin-bottom: max(0px, calc((min(640px, 100vh - var(--nav-h) - 80px) - 56vh) / 2 + 24px)); } /* the sticky stage rises by half its excess over a 56vh step (see .how-stage margin-top); clear the lede by 24px */
.how-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 5vw, 96px); }
/* The stage is sized to its content and pinned at the optical centre of the screen, so the active step and its
   picture line up and there's no 300 px void before step 01. */
.how-steps { padding: 0 0 2vh; }
.how-step { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .45s var(--ease-out); }
.how-step.on { opacity: 1; }
.how-step .n { font: 800 14px/1 var(--mono); color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.how-step .n::after { content: ""; height: 1px; width: 60px; background: linear-gradient(90deg, var(--gold), transparent); }
.how-step h3 { font-size: clamp(26px, 1.4vw + 16px, 40px); line-height: 1.08; margin-bottom: 14px; letter-spacing: -.025em; }
.how-step p { font-size: clamp(16px, .2vw + 14px, 18px); line-height: 1.6; max-width: 30em; }
.how-step .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.how-stage { --stage-h: min(640px, calc(100vh - var(--nav-h) - 80px)); position: sticky; top: calc(50vh - var(--stage-h) / 2 + var(--nav-h) / 2); height: var(--stage-h); margin-top: calc((56vh - var(--stage-h)) / 2); display: grid; place-items: center; }
.how-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); pointer-events: none; }
.how-scene.on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .how-scene { transform: none; transition: opacity .2s; } }
.how-prog { position: absolute; left: clamp(-48px, -2.5vw, -28px); top: 8%; bottom: 8%; width: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.how-prog i { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--p, 0) * 100%); background: var(--grad-gold); }
.scene-card { width: 100%; max-height: 100%; position: relative; }
.mock-url { padding: 20px; }
.mock-url .ln { display: flex; align-items: center; gap: 12px; background: #0b0d14; border: 1px solid var(--line-strong); border-radius: var(--rs-2); padding: 14px 16px; font: 500 17px var(--mono); margin-bottom: 12px; }
.mock-url .ln .typed { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.mock-url .ln .typed::after { content: "▍"; color: var(--gold); animation: blink 1s steps(1) infinite; }
.mock-url .res { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px 4px; min-height: 32px; font-size: 14px; color: var(--text-2); }
.collage { position: relative; aspect-ratio: 16 / 12; max-height: var(--stage-h); }
.collage > * { position: absolute; }
.collage .lbl { position: absolute; left: 12px; top: 12px; z-index: 2; }
.mini-sheet { background: var(--paper); color: var(--ink); border-radius: var(--rs-2); padding: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5); font-size: 12.5px; }
.mini-sheet .t { font: 800 16px var(--display); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.mini-sheet .sw { display: flex; gap: 5px; margin: 8px 0; } .mini-sheet .sw i { width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.mini-sheet .tags { display: flex; gap: 4px; flex-wrap: wrap; } .mini-sheet .tags span { background: var(--paper-2); border-radius: 8px; padding: 2px 8px; font-weight: 650; }
.qa { background: rgba(10,11,16,.88); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rs-2); padding: 12px 14px; font-size: 13px; display: grid; gap: 7px; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.qa div { display: flex; gap: 8px; align-items: center; } .qa div::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #0f3b1d; color: #7ee07e; font-size: 11px; display: grid; place-items: center; font-weight: 800; }
.metrics { background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--rs-2); padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.metrics .grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metrics .m { background: var(--surface-2); border-radius: 10px; padding: 9px 10px; }
.metrics .m .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.metrics .bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 6px; }
.metrics .bars i { flex: 1; background: linear-gradient(to top, rgba(255,201,60,.25), rgba(255,201,60,.8)); border-radius: 2px; }
.how-step .mobile-visual { display: none; }
@media (max-width: 900px) {
  .how .sec-hd { margin-bottom: 8px; }
  .how-wrap { grid-template-columns: 1fr; gap: 0; }
  .how-stage { display: none; }
  .how-steps { padding: 0; }
  .how-step { min-height: 0; opacity: 1; padding: 32px 0 24px; }
  .how-step + .how-step { border-top: 1px solid var(--line); }
  .how-step p { margin-bottom: 0; }
  .how-step .chips { margin-top: 16px; }
  .how-step .mobile-visual { display: block !important; margin-top: 20px; }
}

/* ---------- audiences ---------- */
.aud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.aud-card { display: flex; flex-direction: column; position: relative; padding: clamp(26px, 2.6vw, 44px); overflow: hidden; border-radius: var(--rs-4); border: 1px solid var(--line); background: var(--surface-1); }
.aud-card::before { content: ""; position: absolute; inset: 0; opacity: .9; pointer-events: none; }
.aud-card.dev::before { background: radial-gradient(600px 300px at 0% 0%, rgba(255,201,60,.14), transparent 70%); }
.aud-card.brand::before { background: radial-gradient(600px 300px at 100% 0%, rgba(124,92,255,.2), transparent 70%); }
.aud-card > * { position: relative; }
.aud-card > .row:last-child { margin-top: auto; gap: 8px 12px; }
.aud-card h2 { font-size: clamp(28px, 1.3vw + 18px, 46px); margin-bottom: 12px; }
.aud-stat { display: flex; align-items: flex-end; gap: 18px; margin: 10px 0 2px; flex-wrap: wrap; }
.aud-stat p { margin: 0 0 12px; max-width: 230px; }
.split { display: flex; gap: 4px; margin: 20px 0 6px; height: 34px; }
.split i { width: var(--w); border-radius: 10px; display: flex; align-items: center; padding: 0 12px; min-width: 0; overflow: hidden; font-style: normal; }
.split i:first-child { background: var(--grad-gold); color: var(--gold-ink); }
.split i:last-child { background: var(--surface-3); color: var(--text-2); }
.split b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.big-num { font: 800 clamp(64px, 3.6vw + 44px, 128px)/.9 var(--display); letter-spacing: -.05em; }
.feat { display: grid; gap: 18px; margin: 28px 0 32px; }
.feat > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.feat .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--gold); }
.aud-card.brand .feat .ic { color: #b9a9ff; }
.feat b { display: block; font-weight: 650; color: var(--text); margin-bottom: 3px; font-size: 15.5px; line-height: 1.35; padding-top: 1px; }
.feat span { color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.aud-vis { margin: 8px 0 4px; border-radius: var(--rs-2); overflow: hidden; border: 1px solid var(--line-strong); }
.aud-vis img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .aud { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- formats ---------- */
.fmts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.fmt { border-radius: var(--rs-4); background: var(--surface-1); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.fmt:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.fmt .img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.fmt .img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease-out); }
.fmt:hover .img img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .fmt, .fmt .img img { transition: none; } .fmt:hover, .fmt:hover .img img { transform: none; } }
.fmt .img .chip { position: absolute; left: 12px; top: 12px; background: rgba(10,11,16,.78); backdrop-filter: blur(6px); }
.fmt .bd { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.fmt h3 { font-size: clamp(20px, .5vw + 15px, 24px); margin-bottom: 6px; }
.fmt .aka { font-size: 13px; color: var(--gold); font-weight: 650; margin-bottom: 12px; }
.fmt p { font-size: 14.5px; line-height: 1.6; }
.trig { display: grid; gap: 8px; margin-top: auto; }
.trig div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); align-items: baseline; }
.trig b { font-weight: 700; color: var(--text); }
.trig span { color: var(--text-2); }
.fmt-table { margin-top: 28px; }
.fmt-table table.data td:first-child { white-space: nowrap; }
@media (max-width: 1000px) { .fmts { grid-template-columns: 1fr 1fr; } .fmts .fmt:first-child { grid-column: 1 / -1; } .fmt-table table.data td:first-child { white-space: normal; } }
@media (max-width: 640px) {
  .fmts { grid-template-columns: 1fr; }
  .trig div { grid-template-columns: 1fr; gap: 2px; }
  /* the comparison table becomes one card per format; every cell carries its column name */
  .fmt-table { border: 0; overflow: visible; }
  .fmt-table table, .fmt-table tbody, .fmt-table tr, .fmt-table td { display: block; width: 100%; }
  .fmt-table thead { display: none; }
  .fmt-table tr { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--rs-2); padding: 6px 16px; margin-bottom: 10px; }
  .fmt-table table.data tbody tr:hover { background: var(--surface-1); }
  .fmt-table table.data td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .fmt-table table.data td:first-child { display: block; font-size: 15px; padding-top: 10px; }
  .fmt-table table.data td:last-child { border-bottom: 0; }
  .fmt-table table.data td[data-label]::before { content: attr(data-label); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 2px; }
}

/* ---------- code + agent ---------- */
.code-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 4vw, 80px); align-items: center; }
.codebox { position: relative; border-radius: var(--rs-3); overflow: hidden; border: 1px solid var(--line-strong); background: #07080c; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.codebox .tabs { display: flex; gap: 2px; padding: 8px 96px 0 8px; background: #0d0f16; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.codebox .tabs button { background: none; border: 0; color: var(--muted); font: 600 13px var(--mono); padding: 10px 14px; border-radius: 10px 10px 0 0; cursor: pointer; white-space: nowrap; transition: color .15s; }
.codebox .tabs button:hover { color: var(--text-2); }
.codebox .tabs button.on { background: #07080c; color: var(--text); box-shadow: inset 0 2px 0 var(--gold); }
.codebox .tabs button:focus-visible { outline-offset: -2px; }
.codebox pre { margin: 0; border: 0; border-radius: 0; padding: 22px 24px; font-size: 13.5px; line-height: 1.75; background: transparent; min-height: 200px; color: #dfe6f3; }
.code-foot { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--line); background: #0b0c12; font-size: 12.5px; color: var(--muted); }
.code-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(52,211,153,.6); flex: none; }
.codebox .cp { position: absolute; top: 7px; right: 8px; float: none; margin: 0; }
.tok-k { color: #c39bff; } .tok-s { color: #ffd66b; } .tok-c { color: #7f899e; font-style: italic; } .tok-f { color: #7ee8f7; } .tok-t { color: #ff9bb8; }
.steps-mini { display: grid; gap: 14px; margin: 26px 0 30px; counter-reset: s; }
.steps-mini div { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); line-height: 1.55; }
.steps-mini div::before { counter-increment: s; content: counter(s); flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: #1f1806; border: 1px solid #5a4512; color: var(--gold); font: 800 12px/22px var(--mono); text-align: center; }
.agent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: center; padding: clamp(26px, 3vw, 52px); }
.agent .lede { margin-bottom: 26px; }
.term { background: #07080c; border: 1px solid var(--line-strong); border-radius: var(--rs-2); padding: 18px 20px; font: 13.5px/1.7 var(--mono); color: #cfd6e4; min-height: 262px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.term .you { color: var(--gold); } .term .you::before { content: "› "; color: var(--muted); }
.term .ag { color: #b9c0cf; } .term .ok { color: #7ee07e; } .term .dim { color: #7f899e; }
.term div { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; white-space: pre-wrap; }
.term.play div, .term.static div { opacity: 1; transform: none; }
@media (max-width: 900px) { .code-grid, .agent { grid-template-columns: 1fr; } .agent { gap: 24px; } }

/* ---------- Bo ---------- */
.bo-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 4vw, 80px); align-items: center; }
.bo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.bo-steps figure { margin: 0; text-align: center; }
.bo-steps .im { aspect-ratio: 1; border-radius: var(--rs-3); background: radial-gradient(circle at 50% 60%, rgba(255,201,60,.16), transparent 70%), var(--surface-1); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.bo-steps img { width: 92%; height: 92%; object-fit: contain; }
/* concept art is on white: present it as paper, not as a blown-out thumbnail */
.bo-steps .im.art { background: #f4efe3; border-color: #d9d0bb; transform: rotate(-2deg); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.bo-steps .im.art img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.bo-steps figcaption { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.bo-steps figcaption b { display: block; color: var(--text); font-size: 13.5px; }
@media (max-width: 900px) { .bo-sec { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--rs-2); padding: 0 22px; transition: border-color .2s, background .2s; }
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: var(--line-strong); background: var(--surface-2); }
.faq summary { list-style: none; cursor: pointer; min-height: 60px; padding: 16px 0; font: 650 16.5px/1.35 var(--font); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary:focus-visible { outline-offset: 4px; border-radius: 8px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--font); color: var(--gold); transition: transform .25s var(--ease-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; margin: 0; max-width: 68ch; line-height: 1.65; }
.faq details p a { color: var(--text); text-decoration-color: rgba(255,201,60,.55); text-underline-offset: 3px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(40px, 4.4vw, 80px) clamp(24px, 4vw, 72px); background: radial-gradient(700px 360px at 85% 30%, rgba(255,201,60,.22), transparent 70%), radial-gradient(600px 400px at 10% 100%, rgba(124,92,255,.3), transparent 70%), var(--surface-1); border: 1px solid var(--line-strong); display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 18vw, 320px); gap: 30px; align-items: center; }
.cta-band h2 { font-size: clamp(32px, 2.6vw + 18px, 64px); line-height: 1.02; letter-spacing: -.03em; }
.cta-band .lede { margin-bottom: 26px; }
.cta-band .row { gap: 10px 12px; }
.cta-band .bo { position: relative; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); animation: hop 2.6s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
/* the 3D Bo animates himself: no CSS hop once his canvas is up */
.cta-band .bo:has(> canvas) { animation: none; }
@media (prefers-reduced-motion: reduce) { .cta-band .bo, .nf-bo { animation: none !important; } }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; text-align: left; gap: 8px; } .cta-band .bo { width: 120px; order: -1; justify-self: end; margin: -16px -6px -4px 0; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 32px; margin-top: calc(var(--sec) * .38); background: #0b0c12; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-grid h4 { font: 700 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 14px; }
.foot-grid a:not(.brand) { display: block; color: var(--text-2); text-decoration: none; font-size: 14px; padding: 5px 0; transition: color .15s; }
.foot-grid a:hover { color: var(--text); }
.foot-brand p { margin: 14px 0; max-width: 280px; }
.foot-bo { width: 64px; height: 64px; object-fit: contain; }
.foot-bottom { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); line-height: 1.6; }
.foot-bottom a { color: var(--text-2); text-decoration: none; } .foot-bottom a:hover { color: var(--text); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .foot-brand { grid-column: 1 / -1; } .foot-grid a:not(.brand) { padding: 9px 0; } }

/* ---------- simple pages (pricing, auth, about, bot, 404) ---------- */
.page-hero { padding: clamp(56px, 6vw, 104px) 0 clamp(24px, 3vw, 48px); text-align: center; position: relative; }
.page-hero h1 { font-size: clamp(40px, 3.2vw + 20px, 80px); letter-spacing: -.035em; line-height: 1.02; margin-bottom: 20px; }
.page-hero .lede { margin: 0 auto; }
.page-hero .eyebrow { justify-content: center; }
.legal { max-width: 760px; margin: 0 auto; padding: 30px 0 80px; }
.legal h2 { font-size: clamp(21px, .6vw + 17px, 26px); margin-top: 40px; }
.legal p, .legal li { color: var(--text-2); font-size: 16.5px; line-height: 1.7; }
.legal li { margin: 6px 0; }
.legal li::marker { color: var(--gold); }
.legal li b { color: var(--text); }
.legal a { color: var(--text); text-decoration-color: rgba(255,201,60,.55); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--gold); }
.legal pre { margin: 0 0 1.2em; }
.legal code { font-size: .88em; }
.legal :not(pre) > code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--text); overflow-wrap: anywhere; }
.draft { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #261d08; border: 1px solid #5a4512; color: #ffd27a; margin: 10px 0 24px; font-weight: 600; }
/* .site main.auth-wrap beats `.site main { display: block }`; without it the card sits top-left wherever block-level
   justify-items isn't supported (Safari, Firefox, older Chrome). */
.site main.auth-wrap, .auth-wrap { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; align-content: center; padding: 120px 16px 72px; position: relative; overflow-x: clip; }
/* the glow sits behind the translucent nav too, so it never stops at a hard line under it */
.auth-wrap > .hero-bg { inset: calc(var(--nav-h) * -1) 0 0 !important; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.auth-wrap > .glass, .auth-wrap > div:not(.hero-bg) { position: relative; z-index: 1; }
.auth { width: 100%; max-width: 440px; padding: 32px; position: relative; justify-self: center; border-radius: var(--rs-4); }
.auth h1 { font-size: clamp(27px, .6vw + 22px, 31px); margin-bottom: 8px; text-wrap: pretty; }
.auth > p.muted { line-height: 1.5; }
.auth form { display: grid; gap: 16px; margin-top: 24px; }
.auth label.field { font-size: 13px; font-weight: 600; color: var(--text-2); gap: 7px; }
.auth input:not([type="radio"]):not([type="checkbox"]) { min-height: 48px; border-radius: 12px; }
.auth input::placeholder { color: #7d879c; }
.auth fieldset legend { padding: 0; font-weight: 600; color: var(--text-2) !important; font-size: 13px !important; }
.auth .err { color: #ffb4b4; font-size: 14px; line-height: 1.45; min-height: 1.2em; }
.auth .err:not(:empty) { display: block; position: relative; padding: 11px 13px 11px 40px; border-radius: 12px; background: rgba(208,59,59,.1); border: 1px solid rgba(255,120,120,.28); }
.auth .err:not(:empty)::before { content: "!"; position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,120,120,.2); color: #ffb4b4; font: 800 11px/18px var(--font); text-align: center; }
.auth .err a { color: var(--gold) !important; white-space: nowrap; margin-left: 2px; }
.auth .err:empty { min-height: 0; margin-top: -16px; } /* no blank gap above the button until there's an error */
.auth .btn-lg { width: 100%; min-height: 50px; }
.auth .alt { text-align: center; font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.auth .alt a { color: var(--gold); text-underline-offset: 3px; }
.auth .note a { text-underline-offset: 2px; }
.auth .tz-msg { margin-top: 18px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; margin: 20px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.roles label { position: relative; cursor: pointer; }
.roles input { position: absolute; opacity: 0; pointer-events: none; }
.roles .r { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; min-height: 82px; padding: 12px 6px; border-radius: var(--rs-2); border: 1.5px solid var(--line-strong); background: var(--surface-1); font-size: 13px; line-height: 1.25; font-weight: 650; color: var(--text-2); transition: border-color .2s, background .2s, color .2s; height: 100%; }
.roles label:hover .r { border-color: #4a5068; color: var(--text); }
.roles .r .e { color: var(--gold); }
.roles input:checked + .r { border-color: var(--gold); background: #1f1806; color: var(--text); box-shadow: 0 0 0 3px rgba(255,201,60,.1); }
.roles input:focus-visible + .r { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Bo stands on the card's top edge (right side), clear of the heading and of the nav. */
.auth-bo { position: absolute; width: 120px; height: 120px; right: 26px; top: -107px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.bo-host > img, .bo-host > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
/* live-Bo hosts made by bo-mount.js from an <img>: keep the image's box (auth-bo sits absolute; these two need a positioned box) */
.nf-bo.bo-host { position: relative; }
.nf-bo.bo-host:has(> canvas) { animation: none; }
.bo-card-bo { position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.4)); }
/* 404 */
.nf-wrap { text-align: center; }
.nf-bo { display: block; width: 200px; height: 200px; object-fit: contain; margin: 0 auto 8px; animation: hop 2.6s ease-in-out infinite; filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }
.nf-wrap .eyebrow { justify-content: center; }
.nf-wrap h1 { font-size: clamp(36px, 2.6vw + 22px, 64px); letter-spacing: -.035em; }
.nf-wrap .lede { margin: 0 auto 28px; }
/* about */
.about-grid { align-items: start; }
.about-grid .legal h2:first-child { margin-top: 0; }
.bo-card { padding: clamp(24px, 2.4vw, 36px); text-align: center; position: sticky; top: calc(var(--nav-h) + 24px); }
.bo-card img { width: min(300px, 100%); height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.4)); }
.bo-card h3 { margin: 8px 0 8px; font-size: 22px; }
.bo-card p { margin: 0 auto; max-width: 36ch; line-height: 1.6; }
.bo-card .row { justify-content: center; margin-top: 18px; gap: 8px; }
/* bot */
.prose-page { padding-top: clamp(48px, 5vw, 88px); }
.prose-page .legal { padding-top: 0; }
.prose-page h1 { font-size: clamp(30px, 2vw + 22px, 56px); letter-spacing: -.03em; margin-bottom: 18px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .aud-card .btn, .cta-band .btn, .tz-end .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .aud-card > .row:last-child, .cta-band .row { flex-direction: column; align-items: stretch; }
  .aud-card > .row:last-child .btn, .cta-band .row .btn { width: 100%; min-height: 52px; }
  .aud-card > .row:last-child .btn-ghost { min-height: 44px; }
  .term { min-height: 0; font-size: 12.5px; padding: 16px; }
  /* wrap long lines at spaces only, so the URL stays whole */
  .codebox pre { white-space: pre-wrap; overflow-wrap: normal; word-break: normal; font-size: 12.5px; padding: 18px 16px; min-height: 0; }
  .codebox .tabs { padding-right: 70px; }
  .codebox .tabs button { padding: 10px 10px; font-size: 12.5px; }
  .codebox .cp { padding: 6px 10px; }
  .auth { padding: 26px 20px; }
}
@media (max-width: 520px) { .auth .auth-bo { width: 92px; height: 92px; right: 16px; top: -82px; } .site main.auth-wrap { padding: 100px 16px 48px; } }

/* "made by" credit: parent company, not a customer */
.made-by { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; flex-wrap: wrap; }
.dp-link { display: inline-flex; align-items: center; opacity: .55; transition: opacity .2s; line-height: 0; }
.dp-link:hover, .dp-link:focus-visible { opacity: .9; }
.made-by .dp-link img { height: 12px; width: auto; display: block; }
.made-by-foot .dp-link { vertical-align: -1px; margin-left: 4px; }
.made-by-foot .dp-link img { height: 9px; width: auto; display: inline-block; }

/* ---------- How it works, step 01: brand URL in → logo, product, colours found → ad kit out (howbrand.js) ---------- */
.bflow-card { padding: 16px; container-type: inline-size; }
.bf-url { display: flex; align-items: center; gap: 8px; background: #0b0d14; border: 1px solid var(--line-strong); border-radius: var(--rs-1); padding: 11px 14px; font: 500 15px var(--mono); margin-bottom: 12px; }
.bf-https { color: var(--muted); }
.bf-typed { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; color: var(--text); }
.bf-typed::after { content: "▍"; color: var(--gold); animation: blink 1s steps(1) infinite; }
.bf .bf-kind { flex: none; font-size: 11.5px; padding: 4px 9px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease-out); }
.bf:not([data-phase="0"]) .bf-kind { opacity: 1; transform: none; }
.bf-stage { position: relative; aspect-ratio: 16 / 11; border-radius: var(--rs-2); overflow: hidden; background: #0b0d14; border: 1px solid var(--line-strong); }
.bf-page { position: absolute; inset: 0; background: var(--bb); color: var(--bt); font-family: var(--display); padding: 4% 5%; display: flex; flex-direction: column; gap: 5%; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .6s var(--ease-out), filter .6s; }
.bf:not([data-phase="0"]) .bf-page { opacity: 1; transform: none; }
.bf[data-phase="3"] .bf-page { filter: brightness(.32) saturate(.8) blur(1.5px); }
.bf-nav { display: flex; align-items: center; gap: 4%; font: 600 clamp(9px, 2cqi, 12px)/1 var(--font); }
.bf-nav .bf-logo { height: clamp(18px, 6cqi, 34px); width: auto; margin-right: auto; }
.bf-btn { display: inline-block; background: var(--bp); color: #fff; border-radius: 999px; padding: .55em 1.1em; font: 700 clamp(9px, 2cqi, 12.5px)/1 var(--font); box-shadow: 0 3px 0 var(--ba); }
.bf-hero { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4%; min-height: 0; }
.bf-copy h4 { font: 800 clamp(18px, 6.4cqi, 40px)/1.02 var(--display); letter-spacing: -.02em; color: var(--bt); margin: 0 0 .35em; }
.bf-copy p { font: 500 clamp(10px, 2.3cqi, 14px)/1.4 var(--font); color: color-mix(in srgb, var(--bt) 75%, transparent); margin: 0 0 1em; }
.bf-prod { width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bf-band { height: 7%; border-radius: 8px; background: linear-gradient(90deg, var(--bp) 0 40%, var(--bs) 40% 70%, var(--ba) 70%); }
.bf-scan { position: absolute; left: 0; right: 0; height: 26%; top: -26%; background: linear-gradient(to bottom, transparent, rgba(255,201,60,.16) 85%, rgba(255,201,60,.55)); border-bottom: 2px solid rgba(255,214,107,.95); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.bf[data-phase="1"] .bf-scan, .bf[data-phase="2"] .bf-scan { opacity: 1; animation: scan 1.6s cubic-bezier(.5,0,.5,1) infinite; }
.bf-box { position: absolute; border: 2.5px solid var(--gold); border-radius: 9px; box-shadow: 0 0 0 4px rgba(255,201,60,.22); opacity: 0; transform: scale(1.18); transition: opacity .3s, transform .45s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.bf-box.on { opacity: 1; transform: none; }
.bf[data-phase="3"] .bf-box { opacity: 0; }
.bf-box i { position: absolute; left: -2px; top: -24px; font: 800 11px/1 var(--font); font-style: normal; background: var(--gold); color: #1b1d33; padding: 5px 7px; border-radius: 6px; white-space: nowrap; }
.bf-found { position: absolute; left: 4%; bottom: 13%; background: #fff; color: var(--ink); border-radius: 12px; padding: 8px 10px; box-shadow: 0 14px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-out); }
.bf-found b { display: block; font: 800 9.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-label); margin-bottom: 6px; }
.bf-sw { display: flex; gap: 5px; }
.bf-sw i { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.bf[data-phase="2"] .bf-found { opacity: 1; transform: none; }
.bf[data-phase="2"] .bf-sw i { animation: swin .45s both cubic-bezier(.3,1.6,.5,1); }
.bf-sw i:nth-child(2) { animation-delay: .1s !important; } .bf-sw i:nth-child(3) { animation-delay: .2s !important; } .bf-sw i:nth-child(4) { animation-delay: .3s !important; } .bf-sw i:nth-child(5) { animation-delay: .4s !important; }
.bf-out { position: absolute; inset: 0; padding: 3%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 2.4%; pointer-events: none; }
.bf-card { margin: 0; position: relative; border-radius: 11px; overflow: hidden; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.45); opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .35s, transform .5s cubic-bezier(.3,1.5,.5,1); display: grid; }
.bf-card.on { opacity: 1; transform: none; }
.bf-card.wide { grid-column: span 2; }
.bf-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bf-card.wide, .bf-card.dec { background: var(--bp); }
.bf-card figcaption { position: absolute; left: 6px; bottom: 6px; font: 700 10.5px/1 var(--font); color: #fff; background: rgba(10,11,16,.72); padding: 4px 7px; border-radius: 6px; }
.bf-card.model { background: radial-gradient(circle at 50% 40%, #fff, var(--bb)); }
.bf-3d { position: absolute; inset: 0 0 18px; display: grid; place-items: center; }
.bf-3d canvas { width: 100% !important; height: 100% !important; }
.bf-3d img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.bf-card.pal { background: #fff; padding: 8px 8px 24px; }
.bf-pal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-content: center; }
.bf-pal span { display: grid; gap: 3px; }
.bf-pal i { aspect-ratio: 1; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.bf-pal em { display: none; }
.bf-card.tag { background: var(--bp); grid-column: span 2; }
.bf-tag { display: grid; place-items: center; padding: 6px 12px 22px; font: 800 clamp(16px, 4.6cqi, 28px)/1.05 var(--display); color: #fff; text-shadow: 0 2px 0 var(--ba); text-align: center; letter-spacing: -.01em; }
.bf-cap { display: flex; gap: 8px; margin-top: 12px; font: 600 12.5px/1.3 var(--font); color: var(--muted); }
.bf-cap span { flex: 1; padding-top: 8px; border-top: 2px solid var(--line-strong); transition: color .3s, border-color .3s; }
.bf[data-phase="0"] .bf-cap [data-n="1"], .bf[data-phase="1"] .bf-cap [data-n="2"], .bf[data-phase="2"] .bf-cap [data-n="2"], .bf[data-phase="3"] .bf-cap [data-n="3"] { color: var(--text); border-color: var(--gold); }
.bf-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
@container (max-width: 480px) {
  .bf-stage { aspect-ratio: 4 / 5; }
  .bf-hero { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .bf-prod { max-height: 46cqi; justify-self: center; width: auto; }
  .bf-out { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .bf-card.wide, .bf-card.tag { grid-column: span 2; }
  .bf-nav span { display: none; }
  .bf-cap { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .bf-page, .bf-box, .bf-card, .bf-found, .bf .bf-kind { transition: none; } .bf-scan { display: none; } .bf-typed::after { animation: none; } }
.bf-box[data-for="bf-logo"] i, .bf-box[data-for="bf-btn"] i { top: auto; bottom: -24px; }
.how .bf-note { font-size: 11.5px; line-height: 1.45; margin: 10px 0 0; max-width: none; }
@container (max-width: 480px) { .bf-https { display: none; } .bf-url { font-size: 14px; padding: 10px 12px; } }

/* ---------- the ad: one scroll-driven Bonus Round (scrollstory.js) ---------- */
.scrollstory { padding-bottom: 0; }
.scrollstory .sec-hd { margin-bottom: 0; }
.ss { position: relative; height: 470vh; --p: 0; }
.ss-sticky { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: grid; align-items: center; overflow: hidden; }
.ss-inner { width: 100%; box-sizing: border-box; display: grid; justify-items: center; gap: clamp(14px, 2.2vh, 26px); }
.ss-frame { position: relative; width: min(100%, calc((100svh - var(--nav-h) - 170px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: var(--rs-3); overflow: hidden; background: #0b0d14; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ss-frame .f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; transform: scale(calc(1.02 + var(--p) * .05)); }
.ss[data-stage="host"] .f-host, .ss[data-stage="count"] .f-host, .ss[data-stage="wipe"] .f-host, .ss[data-stage="back"] .f-host { opacity: 1; }
.ss[data-stage="ad"][data-adf="1"] .f-ad1, .ss[data-stage="ad"][data-adf="2"] .f-ad2, .ss[data-stage="ad"][data-adf="3"] .f-ad3, .ss[data-stage="wipe"] .f-ad1 { opacity: 1; }
.ss[data-stage="board"] .f-board { opacity: 1; }
.ss[data-stage="back"] .f-host { transform: scale(1.02); }
/* brand-colour wipe out of the countdown card's corner */
.ss-wipe { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at 86% 12%, #fff 0 4%, var(--sp) 18%, var(--ss2) 70%); clip-path: circle(0% at 86% 12%); }
.ss[data-stage="wipe"] .ss-wipe { opacity: 1; clip-path: circle(calc(((var(--p) - 0.40) / 0.07) * 140%) at 86% 12%); }
.ss[data-stage="ad"] .ss-wipe { opacity: 0; transition: opacity .5s ease; clip-path: circle(150% at 86% 12%); }
/* the countdown card (same look as sdk/countdown.js) */
.ss-cd { position: absolute; z-index: 3; right: 2.4%; top: 4%; width: 260px; height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 9px 8px 13px; border-radius: 18px; background: rgba(18,16,36,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08); color: #fff; font: 600 13px/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transform-origin: right top; opacity: 0; transform: translateX(120%); transition: transform .55s cubic-bezier(.2,1.35,.4,1), opacity .3s ease; }
.ss-cd::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sp); }
.ss[data-stage="count"] .ss-cd { opacity: 1; transform: none; }
.ss[data-stage="wipe"] .ss-cd { opacity: 0; transform: scale(.94); transition: transform .22s ease-in, opacity .22s ease-in; }
.ss-cd .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ss-cd .l1 { display: flex; align-items: center; gap: 6px; height: 18px; }
.ss-cd .ad { flex: none; display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px; background: #fff; color: #0b0a14; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .3px; }
.ss-cd .sep { opacity: .55; font-weight: 800; }
.ss-cd .lk { height: 18px; width: auto; display: block; overflow: visible; }
.ss-cd .l2 { white-space: nowrap; color: rgba(255,255,255,.86); }
.ss-cd .l2 b { font-weight: 850; color: #fff; }
.ss-cd .ring { position: relative; flex: none; width: 46px; height: 46px; }
.ss-cd .ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ss-cd .trk { stroke: rgba(255,255,255,.16); } .ss-cd .prg { stroke: var(--sp); transition: stroke-dashoffset .12s linear; }
.ss-cd .n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 21px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ss-cd .n.pop { animation: sspop .42s cubic-bezier(.2,1.6,.4,1); }
.ss-cd .br-bo { transform-box: fill-box; transform-origin: 50% 60%; animation: ssbob 1.15s ease-in-out infinite; }
@keyframes ssbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-6deg); } }
@keyframes sspop { 0% { transform: scale(1.45); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.ss-chip { position: absolute; z-index: 4; left: 2.4%; top: 4%; font: 700 13px/1 var(--font); color: #fff; background: rgba(10,11,16,.72); backdrop-filter: blur(6px); padding: 8px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease-out); }
.ss-chip b { background: #fff; color: #0b0a14; border-radius: 5px; padding: 2px 5px; font-size: 11px; margin-right: 3px; }
.ss[data-stage="host"] .c-host, .ss[data-stage="count"] .c-host, .ss[data-stage="ad"] .c-ad, .ss[data-stage="board"] .c-ad, .ss[data-stage="back"] .c-back { opacity: 1; transform: none; }
.ss-caps { position: relative; width: 100%; height: clamp(44px, 6vh, 64px); text-align: center; }
.ss-caps p { position: absolute; inset: 0; margin: 0; font: 800 clamp(24px, 1.6vw + 14px, 44px)/1.1 var(--display); letter-spacing: -.025em; color: var(--text); opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--ease-out); }
.ss-caps p.on { opacity: 1; transform: none; }
.ss-strip { display: none; }
.ss-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 4vw, 48px); }
.ss-when > div { padding: 16px 18px; border-radius: var(--rs-2); background: var(--surface-1); border: 1px solid var(--line); display: grid; gap: 6px; }
.ss-when b { font: 700 15px/1.2 var(--display); }
.ss-when span { color: var(--text-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) {
  .ss { height: 400vh; }
  .ss-frame { width: min(100%, calc((100svh - var(--nav-h) - 150px) * 3 / 4)); aspect-ratio: 3 / 4; border-radius: var(--rs-2); }
  .ss-cd { scale: .78 !important; }
  .ss-cd { transform-origin: right top; scale: .62; right: 1.5%; top: 3%; }
  .ss-chip { font-size: 11px; padding: 6px 9px; }
  .ss-caps { height: 72px; }
  .ss-when { grid-template-columns: 1fr; }
}
/* reduced motion: a still strip of three frames */
.ss.static { height: auto; }
.ss.static .ss-sticky { display: none; }
.ss.static .ss-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.ss-strip figure { margin: 0; }
.ss-strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rs-2); border: 1px solid var(--line-strong); }
.ss-strip figcaption { margin-top: 8px; font: 700 16px/1.25 var(--display); }
@media (max-width: 640px) { .ss.static .ss-strip { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ss-cd, .ss-chip, .ss-caps p, .ss-frame .f { transition: none; transform: none; } .ss-cd .br-bo, .ss-cd .n.pop { animation: none; } }

/* ---------- audience mode (audience.js): body[data-audience="brand"|"game"] ---------- */
body[data-audience="brand"] [data-for="game"], body[data-audience="game"] [data-for="brand"] { display: none !important; }
body:not([data-audience="brand"]) [data-only="brand"], body:not([data-audience="game"]) [data-only="game"] { display: none !important; }
.site main { transition: opacity .22s ease; }
.site main.aud-fading { opacity: 0; }
.hero-aud a[aria-pressed="true"] { color: var(--text); border-color: var(--gold); background: rgba(255,201,60,.08); }
.hero-aud a[aria-pressed="true"]::after { content: "✓"; color: var(--gold); }
.aud-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.aud-bar span { color: var(--text-2); font-weight: 600; }
.aud-bar span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: 1px; }
.aud-bar button { background: none; border: 0; padding: 6px 0; color: var(--muted); font: 600 13.5px/1.2 var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }
.aud-bar button:hover { color: var(--text); }
body[data-audience="brand"] .aud, body[data-audience="game"] .aud { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin-inline: auto; }
body[data-audience="brand"] #brands .feat, body[data-audience="game"] #developers .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { body[data-audience] #brands .feat, body[data-audience] #developers .feat { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .site main { transition: none; } }

/* ---------- hero focus: the demo grows to fill the hero (herofocus.js) ---------- */
.hero-copy { transition: opacity .3s ease; }
.hero .coin { transition: opacity .3s ease; }
.hero.focus .hero-copy { position: absolute; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.hero.focus .coin { opacity: 0; }
.hero.focus .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero.focus .demo { width: min(90%, calc((100svh - var(--nav-h) - 150px) * 1.6)); justify-self: center; }
.hero.focus .demo > .note { display: none; }
.demo-exit { display: none; margin-left: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text); border-radius: 999px; padding: 5px 11px; font: 650 12.5px/1 var(--font); cursor: pointer; flex: none; }
.demo-exit:hover { background: rgba(255,255,255,.16); }
.hero.focus .demo-exit { display: inline-flex; gap: 6px; align-items: center; }
.hero.focus .demo-bar .live { margin-right: 6px; }
@media (max-width: 640px) {
  .hero.focus .demo { width: calc(100% + 2 * var(--gutter) - 12px); margin-inline: calc(6px - var(--gutter)); }
  .hero.focus .demo-bo { right: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-copy, .hero .coin, .hero.focus .hero-copy { transition: none; } }
.hero.focus .demo { margin-top: 44px; }
.hero.focus .demo-bo { width: 96px; height: 96px; top: -60px; right: 150px; transition: right .45s var(--ease-out), top .45s var(--ease-out); }
.hero.focus .demo-bo .bubble { display: none; }
@media (max-width: 640px) { .hero.focus .demo-bo { width: 72px; height: 72px; top: -46px; right: 92px; } }
@media (max-width: 640px) { .hero.focus .demo-stage { aspect-ratio: auto; height: min(calc(100svh - var(--nav-h) - 190px), 125vw); } }
.ss[data-dock="bottom-right"] .ss-cd { top: auto; bottom: 3%; transform-origin: right bottom; }
.ss[data-dock="bottom-right"] .ss-wipe { background: radial-gradient(circle at 86% 90%, #fff 0 4%, var(--sp) 18%, var(--ss2) 70%); clip-path: circle(0% at 86% 90%); }
.ss[data-dock="bottom-right"][data-stage="wipe"] .ss-wipe { clip-path: circle(calc(((var(--p) - 0.40) / 0.07) * 140%) at 86% 90%); }
.ss[data-dock="bottom-right"][data-stage="ad"] .ss-wipe { clip-path: circle(150% at 86% 90%); }
@media (max-width: 760px) { .ss[data-dock="bottom-right"] .ss-cd { bottom: 2%; transform-origin: right bottom; } }
.ss[data-dock="bottom-right"] .ss-chip { top: auto; bottom: 3.5%; transform: translateY(6px); } .ss[data-dock="bottom-right"][data-stage] .ss-chip { transition: opacity .3s, transform .3s var(--ease-out); }

/* ---------- How it works, step 01 in game mode: the real integration (index.html .how-code, .how-editor) ---------- */
.how-code { margin: 4px 0 16px; padding: 14px 16px; border-radius: var(--rs-2); background: #07080c; border: 1px solid var(--line-strong); color: #dfe6f3; font: 12.5px/1.75 var(--mono); font-variant-ligatures: none; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 36em; }
.how-editor { max-width: 640px; border-radius: var(--rs-3); overflow: hidden; border: 1px solid var(--line-strong); background: #07080c; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.how-editor .ed-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #0b0c12; font: 600 12.5px var(--mono); color: var(--muted); }
.how-editor .ed-tabs span { padding: 6px 10px; border-radius: 8px; } .how-editor .ed-tabs span.on { background: var(--surface-2); color: var(--text); }
.how-editor .ed-tabs em { margin-left: auto; font-style: normal; color: var(--mint); font-size: 12px; }
.how-editor pre { margin: 0; padding: 22px 24px; border: 0; background: transparent; color: #dfe6f3; font: 14px/1.8 var(--mono); font-variant-ligatures: none; white-space: pre-wrap; }
.how-editor .ed-foot { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--line); background: #0b0c12; font-size: 13px; color: var(--muted); }
.how-editor .ed-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(52,211,153,.6); flex: none; }
@media (max-width: 640px) { .how-code { font-size: 11.5px; padding: 12px; } }

/* ---------- "Where it plays": a highlight reel of real showcase captures under the scroll story (home.js plays) ---------- */
.plays { margin-top: clamp(28px, 3.4vw, 48px); }
.plays h3 { font: 700 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.plays-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.play { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.play .pv { position: relative; aspect-ratio: 16 / 9; border-radius: var(--rs-2); overflow: hidden; background: #0b0d14; border: 1px solid var(--line-strong); margin-bottom: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.play video { display: block; width: 100%; height: 100%; object-fit: cover; }
.play .pg, .play .pk { position: absolute; font: 700 11.5px/1 var(--font); color: #fff; background: rgba(10,11,16,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); }
.play .pg { left: 8px; bottom: 8px; }
.play .pk { left: 8px; top: 8px; color: #7ee8f7; border-color: #155a66; background: rgba(8,34,42,.85); }
.play .pk.rw { color: var(--gold); border-color: #5a4512; background: rgba(31,24,6,.85); }
.play b { font: 700 17px/1.2 var(--display); color: var(--text); letter-spacing: -.01em; }
.play > span { color: var(--text-2); font-size: 14px; line-height: 1.45; }
.play code { margin-top: 6px; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/1.4 var(--mono); color: var(--muted); background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
@media (max-width: 760px) {
  .plays-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; }
  .plays-row::-webkit-scrollbar { display: none; }
  .play { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---------- audience cards, condensed (index.html #developers / #brands): media + 4–5 one-line props ---------- */
.aud-card h2 { margin-bottom: 18px; }
.aud-body { display: grid; gap: 22px; margin-bottom: 26px; }
.aud-body .aud-stat { margin-top: 0; }
.aud-body .split { margin: 14px 0 0; }
.aud-vis video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.aud-body .aud-vis { margin: 0; }
.props { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.props li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.props .ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--gold); }
.aud-card.brand .props .ic { color: #b9a9ff; }
.props b { font: 700 16px/1.25 var(--display); color: var(--text); letter-spacing: -.01em; }
.props li > span:last-child { color: var(--text-2); font-size: 14.5px; line-height: 1.4; }
/* one reader: media beside the list */
body[data-audience="brand"] #brands .aud-body, body[data-audience="game"] #developers .aud-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 36px; }
body[data-audience="game"] #developers .aud-media { align-self: center; }
@media (max-width: 760px) { body[data-audience] #brands .aud-body, body[data-audience] #developers .aud-body { grid-template-columns: 1fr; gap: 20px; } }
/* short laptop screens (1280×800): keep the whole card in view */
@media (min-width: 901px) and (max-height: 860px) {
  .aud-card h2 { margin-bottom: 14px; }
  .aud-body { gap: 18px; margin-bottom: 20px; }
  .props { gap: 9px; }
  body:not([data-audience="brand"]) #brands .aud-vis video { aspect-ratio: 16 / 8.2; }
}
.aud-body .aud-stat { flex-wrap: nowrap; } .aud-body .aud-stat p { max-width: 210px; }