/* Atlas — static edge site. One light, lava accent, glass + grain. */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("/fonts/orbitron.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("/fonts/robotomono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #f2f2f2; --text: #cfcfcf; --muted: #8c8c8c; --faint: #5a5a5a;
  --soft: #ff9a5c; --hot: #ff5a1f; --deep: #d12121; --core: #ffdca6;
  --accent: linear-gradient(180deg, var(--soft), var(--hot) 48%, var(--deep));
  --display: "Segoe UI Variable Display", "Segoe UI", "Inter", system-ui, sans-serif;
  --gutter: clamp(16px, 3.7vw, 56px);
  --page: min(1501px, calc(100vw - 2 * clamp(16px, 4vw, 48px)));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glide: cubic-bezier(.22, 1, .36, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.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 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { background: #000; color-scheme: dark; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: var(--ink); font: 400 16px/1.5 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px; background: #fff; color: #000; border-radius: 10px; }
:focus-visible { outline: 2px solid var(--soft); outline-offset: 3px; border-radius: 8px; }

/* ── type ─────────────────────────────────────────────── */
.display { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 2.4vw + 18px, 56.76px); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.display .soft { display: block; color: #8a8a8a; }
.display .strong { display: block; color: var(--ink); font-weight: 600; }
.center { text-align: center; }

/* ── buttons ──────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 15.5px; position: relative; isolation: isolate; transition: transform .25s var(--ease), filter .25s; }
.btn::after { content: ""; position: absolute; left: 24px; right: 24px; top: .75px; height: 1px; border-radius: 1px; background: #fff; opacity: .45; }
.btn:hover { filter: brightness(1.06); }
html:not(.fx) .btn:active { transform: translateY(1px); }
.btn.light { background: linear-gradient(180deg, #fff, #d9d9d9); color: #0a0a0a; }
.btn.light::after { opacity: .9; }
.btn i { display: contents; font-style: normal; }
.btn .ic-tux, .btn .lbl-linux, .os-linux .btn .ic-dl, .os-linux .btn .lbl { display: none; }
.os-linux .btn .ic-tux, .os-linux .btn .lbl-linux { display: inline-flex; }
.btn.accent { background: var(--accent); color: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
.btn.ghost { background: rgba(255, 255, 255, .04); color: var(--ink); padding: 0 24px 0 8px; gap: 12px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .6s var(--glide), box-shadow .6s var(--glide); }
.btn.ghost::after { opacity: .18; }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); filter: none; }
.btn.ghost .disc { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #0a0a0a; }
.btn.ghost .disc svg { margin-left: 2px; }
.btn.ghost .disc::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); animation: ring 3.6s var(--glide) infinite; }
.btn.ghost .dur { color: var(--faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.btn.sm { height: 42px; padding: 0 20px; font-size: 14.5px; }
.btn.wide { width: 100%; }
.textlink { background: none; border: 0; padding: 0; color: var(--text); font-weight: 600; cursor: pointer; }
.textlink:hover { color: var(--ink); }
.link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid rgba(255, 255, 255, .5); padding-bottom: 6px; }
.link.accent { color: var(--soft); border: 0; }

/* ── nav ──────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 18px max(16px, calc((100vw - 1501px) / 2)); background: linear-gradient(#000 40%, rgba(0, 0, 0, 0)); backdrop-filter: blur(6px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; }
.nav nav { display: flex; gap: 40px; font-size: 15px; color: var(--text); }
.nav nav a:hover { color: var(--ink); }

/* ── hero ─────────────────────────────────────────────── */
.hero { text-align: center; padding: clamp(40px, 7vw, 74px) 0 0; }
.hero > h1, .hero > .lead, .hero > .cta { padding-inline: 16px; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4vw + 16px, 76px); line-height: 1.12; margin: 0; letter-spacing: -.015em; }
.hero h1 .soft { display: block; color: #8a8a8a; }
.hero h1 .strong { display: block; font-weight: 600; }
.lead { color: var(--muted); font-size: clamp(15px, .6vw + 11px, 19px); margin: 18px auto 30px; max-width: 640px; }
.cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-visual { position: relative; width: 100%; overflow-x: clip; margin: clamp(48px, 6vw, 84px) 0 0;
  -webkit-mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, .45) 80%, rgba(0, 0, 0, .1) 93%, transparent);
  mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, .45) 80%, rgba(0, 0, 0, .1) 93%, transparent); }
.hero-visual .window { position: relative; width: min(1325px, calc(100vw - 32px)); margin: 0 auto; height: auto; border-radius: 3vw; box-shadow: inset 0 2px 5px rgba(255, 255, 255, .3), 0 -40px 90px -30px rgba(255, 255, 255, .2); }
.wordmark { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font: 400 min(46vw, 640px)/1 "Orbitron", sans-serif; letter-spacing: .02em;
  background: linear-gradient(#fff, rgba(255, 255, 255, .35)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; pointer-events: none; }
html:not(.fx) .hero .window { animation: rise 1.2s var(--ease) both .15s; }
.hero-glow { position: absolute; left: 0; right: 0; margin: 0 auto; top: 8%; width: min(1100px, 90vw); height: 420px; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 60%, rgba(255, 120, 60, .22), transparent 70%), radial-gradient(40% 40% at 50% 70%, rgba(255, 220, 166, .12), transparent 70%);
  filter: blur(40px); opacity: .0; }
html:not(.fx) .hero-glow { opacity: .6; }
.hero .hero-menu { animation: pop .7s var(--ease) both 1.25s; transform-box: fill-box; transform-origin: top left; }

/* ── sections ─────────────────────────────────────────── */
.section { width: var(--page); margin: 0 auto; padding-top: clamp(120px, 14vw, 280px); }
.section > .display.center { margin-bottom: clamp(48px, 6vw, 120px); }

/* ── bento ────────────────────────────────────────────── */
.bento { display: grid; gap: var(--gutter); }
.row { display: flex; gap: var(--gutter); }
.bento > .row { perspective: 2200px; }
/* One light model for every card: light lives only on the edges, never over the content.
   — rest: a neutral glass rim, brighter along the top edge
   — hover: the rim catches a white specular where the pointer is, a warm hairline wakes on the bottom edge,
     and a warm bloom spreads on the page *behind* the card. */
.card { --r: clamp(28px, 4.2vw, 80px); --px: 50%; --py: 0%; --lit: 0; position: relative; flex: var(--w) 1 0; aspect-ratio: var(--w) / var(--h); border-radius: var(--r); overflow: hidden;
  background: #000; container-type: inline-size; isolation: isolate;
  box-shadow: inset 0 0 9.5px rgba(0, 0, 0, .25), 0 30px 60px -30px rgba(0, 0, 0, .9), 0 70px 120px -70px rgba(255, 90, 31, 0);
  transition: box-shadow .7s var(--glide); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .04; pointer-events: none; z-index: 3; }
.card .art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transform-origin: 50% 70%; }
.fx .card .art { will-change: translate; }
.card .rim { position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; pointer-events: none;
  background:
    radial-gradient(38% 62% at var(--px) var(--py), rgba(255, 255, 255, calc(var(--lit) * .85)), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, .025) 70%, rgba(255, 255, 255, .06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.card .edge { position: absolute; z-index: 4; left: 10%; right: 10%; bottom: 0; height: 1.5px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 150, 90, .55) 30%, rgba(255, 214, 170, .9) 50%, rgba(255, 150, 90, .55) 70%, transparent);
  transition: opacity .6s var(--glide); }
.card header { position: absolute; z-index: 5; top: calc(54 / var(--w) * 100cqw); left: calc(64 / var(--w) * 100cqw); right: calc(64 / var(--w) * 100cqw); pointer-events: none; }
.card.narrow header { left: calc(48 / var(--w) * 100cqw); right: calc(48 / var(--w) * 100cqw); text-align: center; }
.card h3 { margin: 0; font-weight: 700; font-size: calc(28 / var(--w) * 100cqw); line-height: 1.2; letter-spacing: -.01em;
  background: linear-gradient(#fff, #9a9a9a); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.card p { margin: calc(8 / var(--w) * 100cqw) 0 0; color: #7d7d7d; font-size: calc(17 / var(--w) * 100cqw); line-height: 1.47; max-width: calc(460 / var(--w) * 100cqw); }
.card.narrow p { margin-inline: auto; }
.card .obj { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) {
  .card:hover { box-shadow: inset 0 0 9.5px rgba(0, 0, 0, .25), 0 30px 60px -30px rgba(0, 0, 0, .9), 0 60px 130px -50px rgba(255, 90, 31, .42); }
  .card:hover .edge { opacity: 1; }
}

/* per-zone entrance choreography (runs once when the card enters); spring-timed so every part lands with weight */
.card .dial-arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.card.in .dial-arc { animation: draw 2.2s var(--glide) forwards .5s; }
.card .dial-needle { transform-box: view-box; transform-origin: 180px 180px; }
.card.in .dial-needle { animation: needle 2.4s var(--glide) backwards .45s; }
.card .pill { transform-box: fill-box; transform-origin: bottom; }
.card.in .pill { animation: grow 1.9s var(--glide) backwards calc(.35s + var(--i, 0) * .09s); }
.card .wave { stroke-dasharray: 1; stroke-dashoffset: 0; }
.card.in .wave { animation: draw 2.4s var(--glide) backwards .7s; }
.card .ch { opacity: 1; }
.card.in .ch { animation: type-in .5s var(--glide) backwards calc(.6s + var(--i) * .11s); }
.card.in .row { animation: rows 1.6s var(--glide) backwards calc(1.25s + var(--i) * .08s); }
.card.in [data-name="wheel"] { animation: spin-in 2.4s var(--glide) backwards .3s; }
.card.in [data-name="files"] { animation: fall 2s var(--glide) backwards .35s; }
.card.in [data-name="dragged tab"], .card.in [data-card="tabs"] [data-name="cursor"] { animation: glide 2.2s var(--glide) backwards .5s; }
.card.in .dot { animation: type-in .4s var(--glide) backwards calc(.5s + var(--i) * .16s); }
.card [data-name="space key"] { animation: press 4.2s var(--glide) infinite 2.4s; }
.card.in [data-name="menu"] { animation: rise-soft 1.8s var(--glide) backwards .3s; }
.card.in [data-name="window"], .card.in [data-name="theme reveal"], .card.in [data-name="preview"] { animation: rise-soft 2s var(--glide) backwards .3s; }
.card.in [data-name="results"], .card.in [data-name="benchmarks"], .card.in [data-name="locked folder"], .card.in [data-name="result pill"] { animation: rise-soft 2s var(--glide) backwards .4s; }
@media (hover: hover) { .card .obj[style*="--hover"] { transition: transform .7s var(--glide); } .card:hover .obj[style*="--hover"] { transform: var(--hover); } }
#theme-reveal .handle { cursor: ew-resize; }

/* ── lateral sections ─────────────────────────────────── */
.lateral { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.lateral .copy p { color: var(--muted); font-size: 17px; margin: 24px 0 28px; max-width: 400px; }
.ext-list { list-style: none; padding: 0; margin: 0 0 36px; max-width: 400px; }
.ext-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--text); font-size: 15px; }
.ext-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ext-list svg { color: #bdbdbd; }
.exploded { width: 100%; height: auto; overflow: visible; }
.exploded .plane.lift, .exploded .tag { transform-box: view-box; }
.reveal.in .exploded .plane.lift { animation: lift 2.2s var(--glide) backwards calc(.3s + var(--i) * .14s); }
.reveal.in .exploded .tag { animation: fade 1s ease backwards calc(.9s + var(--i) * .15s); }

/* ── pricing ──────────────────────────────────────────── */
.license-stage { position: relative; max-width: 860px; margin: 0 auto; }
.licenses { position: relative; width: 100%; aspect-ratio: 860 / 470; perspective: 1400px; }
.lic { position: absolute; left: var(--l); top: var(--t); width: 51.163%; aspect-ratio: 440 / 278; rotate: var(--rot); transform-origin: 50% 50%; container-type: inline-size; }
.lic .float, .lic .face { width: 100%; height: 100%; transform-style: preserve-3d; }
.lic .face { --px: 50%; --py: 30%; --lit: 0; position: relative; border-radius: 5cqw; overflow: hidden; isolation: isolate; cursor: grab;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .9), 0 60px 120px -40px rgba(0, 0, 0, .8); }
.lic .face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lic.free .face { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
/* specular glare that follows the pointer */
.lic .glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: calc(.25 + var(--lit) * .75);
  background: radial-gradient(60% 80% at var(--px) var(--py), rgba(255, 255, 255, .16), transparent 60%); }
/* brushed-metal anisotropy + holographic foil (founding only) */
.lic .foil { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lic.founding .foil { opacity: calc(.16 + var(--lit) * .3); mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(calc(110deg + var(--nx, 0) * 20deg), rgba(255, 255, 255, .0) 0 3px, rgba(255, 255, 255, .05) 3px 4px),
    conic-gradient(from calc(var(--nx, 0) * 90deg) at var(--px) var(--py), #ff8a5b33, #ffd29a40, #9bdcff26, #c9a2ff2e, #ff8a5b33); }
.lic .sweep { position: absolute; top: -30%; bottom: -30%; left: 0; width: 30%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 40%, rgba(255, 244, 230, .28) 50%, rgba(255, 255, 255, .1) 60%, transparent); transform: translateX(-120%) skewX(-20deg); filter: blur(4px); }
html:not(.fx) .license-stage:hover .free { translate: -2% 2%; rotate: -11deg; }
html:not(.fx) .license-stage:hover .founding { translate: 0 -4%; rotate: 2deg; }
html:not(.fx) .lic { transition: translate .9s var(--glide), rotate .9s var(--glide); }
.fx .lic { opacity: 0; }
.lic.founding.bob .face { animation: bob-t 8s ease-in-out infinite; }
@keyframes bob-t { 50% { translate: 0 -10px; } }
.license-stage .spill { position: absolute; left: 44%; bottom: 0; width: 60%; height: 90px; background: var(--hot); filter: blur(70px); opacity: .25; z-index: -1; }
.plans { perspective: 1600px; display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(24px, 6vw, 120px); max-width: 1100px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
.plan { --px: 50%; --py: 50%; --lit: 0; position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 3vw, 44px) clamp(20px, 3vw, 40px); border-radius: 36px; isolation: isolate; }
/* under the pointer the plan becomes a pane of glass: a rim that catches the light, a whisper of fill */
.plan::before, .plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--lit); z-index: -1; }
.plan::before { padding: 1.25px;
  background: radial-gradient(42% 70% at var(--px) var(--py), rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.plan::after { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.plans .divider { background: rgba(255, 255, 255, .12); }
.eyebrow { color: var(--faint); font-weight: 600; font-size: 15px; margin: 0; }
.offer { color: var(--soft); }
.price { margin: 8px 0 6px; font-size: clamp(54px, 4vw + 20px, 64px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.price s { font-size: 20px; color: var(--faint); font-weight: 400; letter-spacing: 0; vertical-align: middle; }
.note { color: var(--muted); margin: 0 0 30px; }
.plan .note:has(+ .perks-h) { margin-bottom: 22px; }
.perks-h { align-self: stretch; display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: var(--soft); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.perks-h::before, .perks-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 154, 92, .35)); }
.perks-h::after { transform: scaleX(-1); }
.perks { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 13px; text-align: left; }
.perks li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.perks b { color: var(--ink); font-weight: 600; }
.perks svg { flex: none; width: 22px; height: 22px; padding: 5px; box-sizing: border-box; border-radius: 50%; fill: #fff; background: var(--accent); box-shadow: 0 0 14px -2px rgba(255, 90, 31, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.fine { color: var(--faint); font-size: 13.5px; margin: 22px 0 0; }
.status { color: var(--muted); text-align: center; min-height: 1.5em; margin-top: 18px; display: flex; justify-content: center; }
/* feedback is plain, specific text: no pills, no glow. Busy lives on the button, success replaces the form. */
.status[data-state] { align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-align: left; animation: say-in .2s ease-out; }
.status[data-state="error"] { color: #ff9b8a; }
.status[data-state="error"]::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.status[data-state="busy"], .status[data-state="ok"] { color: var(--muted); }
.status[data-state=""] { display: none; }
@keyframes say-in { from { opacity: 0; } }
@keyframes say-spin { to { transform: rotate(360deg); } }
.btn.is-busy { pointer-events: none; color: transparent !important; position: relative; }
.btn.is-busy > * { opacity: 0; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: say-spin .7s linear infinite; }
.btn.light.is-busy::after { border-color: rgba(0, 0, 0, .2); border-top-color: #111; }
.sheet input[aria-invalid="true"]:not([type="checkbox"]) { box-shadow: inset 0 0 0 1.5px rgba(255, 155, 138, .7); }
.sheet .done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 14px 0 4px; }
.sheet .done[hidden] { display: none; }
.sheet .done svg { width: 36px; height: 36px; color: var(--ink); margin-bottom: 6px; }
.sheet .done p { max-width: 32ch; }
.sheet .done b { color: var(--ink); font-weight: 600; word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation-duration: 2s; } }

/* ── faq palette ──────────────────────────────────────── */
.palette { border-radius: 26px; background: linear-gradient(#171718, #0b0b0c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 70px rgba(0, 0, 0, .8);
  overflow: hidden; position: relative; }
.palette::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .04; pointer-events: none; }
.palette .search { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 72px; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.palette input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: 400 20px "Inter", sans-serif; caret-color: var(--hot); min-width: 0; }
.palette input::-webkit-search-cancel-button { display: none; }
kbd { font: 500 11px "Inter", sans-serif; color: var(--muted); padding: 3px 7px; border-radius: 5px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.palette .body { display: grid; grid-template-columns: 400px 1fr; min-height: 360px; }
.palette ul { position: relative; list-style: none; margin: 0; padding: 12px; border-right: 1px solid rgba(255, 255, 255, .07); }
.palette li { position: relative; z-index: 1; }
.palette .ind { position: absolute; z-index: 0; left: 12px; right: 12px; top: 0; height: 50px; border-radius: 13px; opacity: 0; pointer-events: none;
  background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 12px 30px -10px rgba(255, 74, 20, .55); }
.palette .ind::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  background-size: 250% 100%; background-position: var(--shine, 120%) 0; mix-blend-mode: soft-light; }
.palette .q { transition: color .3s var(--ease); width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border-radius: 13px; border: 0; background: none; cursor: pointer; color: var(--text); font-size: 15px; }
.palette .q svg { color: var(--faint); flex: none; }
.palette .q kbd { margin-left: auto; opacity: 0; }
.palette .q:hover { background: rgba(255, 255, 255, .04); }
.palette.has-ind .q.on { background: transparent; box-shadow: none; }
.palette .q.on { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .25); }
.palette .q.on svg, .palette .q.on kbd { color: #fff; opacity: 1; background: none; box-shadow: none; }
.palette .q mark { background: none; color: inherit; font-weight: 700; }
.palette li[hidden] { display: none; }
.palette .a { display: none; }
.palette .pane { position: relative; padding: 44px; overflow: hidden; }
.palette .pane-in { will-change: transform, opacity, filter; }
.palette .pane h4 { margin: 0 0 14px; font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.palette .pane p { color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0; max-width: 560px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chips span { padding: 7px 15px; border-radius: 99px; font-size: 13.5px; color: var(--text); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.palette > footer { display: flex; gap: 24px; align-items: center; padding: 12px 22px; border-top: 1px solid rgba(255, 255, 255, .07); color: var(--faint); font-size: 12.5px; }
.palette > footer kbd { margin-right: 6px; }
.palette > footer .count { margin-left: auto; }
html:not(.fx) .palette.typing .pane { animation: fade .3s ease; }

/* ── teaser theater ───────────────────────────────────────────── */
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(255, 90, 31, .7); }
.dot.live { background: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, .6); }
.player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: clamp(20px, 2.6vw, 40px); overflow: hidden; background: #050505; isolation: isolate; }
.player::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .02) 70%, rgba(255, 255, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* theater: the hero pill morphs into this player (fx.js) */
dialog.theater { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: #fff; overflow: hidden;
  display: none; place-items: center; }
dialog.theater[open] { display: grid; }
dialog.theater::backdrop { background: transparent; }
.theater-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); }
.theater .player { z-index: 2; width: min(1400px, 92vw, calc((100dvh - 120px) * 16 / 9)); box-shadow: 0 40px 100px rgba(0, 0, 0, .7); }
.theater .morph { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; background: #0b0b0c; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .16); }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.theater-close { position: absolute; top: 22px; right: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 14px; border: 0; border-radius: 99px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .18); }
.theater-close:hover { background: rgba(255, 255, 255, .12); }
.player.started:not(.ui):not(.paused) { cursor: none; }
.player .bar { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 18px;
  background: rgba(12, 12, 13, .5); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14); opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease); cursor: default; }
.player.ui .bar, .player.paused .bar { opacity: 1; transform: none; pointer-events: auto; }
.player.started:not(.ui):not(.paused) { cursor: none; }
.player .ctl { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: #fff; opacity: .86; cursor: pointer; transition: background .2s, opacity .2s; }
.player .ctl:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
.player .pp .i-play, .player.paused .pp .i-pause, .player .mute .i-off, .player.muted .mute .i-on { display: none; }
.player.paused .pp .i-play, .player.muted .mute .i-off { display: inline; }
.player .time { font: 500 12.5px/1 "Roboto Mono", monospace; color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; min-width: 34px; }
.player .time.faint { color: rgba(255, 255, 255, .42); text-align: right; }
.player .track { position: relative; flex: 1; height: 22px; cursor: pointer; --p: 0%; --b: 0%; }
.player .track::before, .player .track i { content: ""; position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; transition: height .2s var(--ease), margin .2s var(--ease); }
.player .track::before { right: 0; background: rgba(255, 255, 255, .16); }
.player .track .buf { width: var(--b); background: rgba(255, 255, 255, .22); }
.player .track .fill { width: var(--p); background: #fff; }
.player .track .fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); transform: scale(0); transition: transform .25s var(--ease); }
.player .track:hover::before, .player .track:hover i { height: 4px; margin-top: -2px; }
.player .track:hover .fill::after, .player .track:focus-visible .fill::after { transform: scale(1); }
@keyframes ring { 0% { transform: scale(.92); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.22); opacity: 0; } }

/* ── community (Figma: community3 — two centred stacks over monumental, lava-lit logos) ── */
.community { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1920px; margin: clamp(120px, 14vw, 260px) auto 0; overflow: hidden; padding-bottom: 0; }
.community .block { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.community .tag { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--faint); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.community .text p:not(.tag) { color: var(--muted); margin: 18px 0 30px; font-size: 17px; }
.inline-mail { display: flex; align-items: center; width: min(440px, 100%); margin: 0 auto; padding: 6px 6px 6px 24px; border-radius: 99px; background: linear-gradient(#161617, #0c0c0d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .16); transition: box-shadow .35s var(--ease); }
.inline-mail:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 140, 80, .55), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 6px rgba(255, 90, 31, .08), 0 18px 50px -18px rgba(255, 90, 31, .5); }
.inline-mail input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 15.5px "Inter", sans-serif; }
.community .stage { position: relative; width: 100%; margin-top: clamp(40px, 5vw, 80px); height: clamp(320px, 28vw, 520px); display: flex; align-items: flex-end; justify-content: center; perspective: 1100px;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.sculpture { position: relative; z-index: 1; width: clamp(260px, 24vw, 460px); height: auto; overflow: visible; margin-bottom: -6%; transform-style: preserve-3d; will-change: transform; }
.sculpture.clyde { margin-bottom: 2%; }
.community .pool { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 4%; width: min(620px, 90%); height: 46%; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 30% at 50% 88%, var(--core), transparent 70%), radial-gradient(50% 55% at 50% 92%, var(--hot), transparent 72%), radial-gradient(60% 80% at 50% 110%, var(--deep), transparent 75%);
  filter: blur(26px); opacity: .85; }
html:not(.fx) .reveal.in .sculpture { animation: emerge 1.6s var(--ease) backwards .2s; }
html:not(.fx) .community .pool { animation: breathe 7s ease-in-out infinite; }
.community .horizon { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 80, .5) 25%, rgba(255, 220, 166, .7) 50%, rgba(255, 140, 80, .5) 75%, transparent); opacity: .6; }

/* ── footer (Figma: closing.footer — hairline, brand + badge, four columns, cropped wordmark) ── */
.footer { position: relative; margin: clamp(60px, 7vw, 120px) 0 0; overflow: hidden; isolation: isolate; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28) 20%, rgba(255, 248, 240, .6) 50%, rgba(255, 255, 255, .28) 80%, transparent); }
.footer .inner, .doc .footer .bottom { width: var(--page); margin: 0 auto; }
.footer .inner { padding-top: 64px; position: relative; z-index: 1; }
.footer .top { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 48px; align-items: start; }
.footer .about .brand { gap: 12px; font-size: 20px; }
.footer .about p { color: var(--muted); margin: 22px 0 0; font-size: 16px; }
.footer .about .badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--text); font-size: 13.5px; font-weight: 600; }
.footer nav { display: grid; grid-template-columns: repeat(4, auto); column-gap: clamp(40px, 6.5vw, 120px); }
.footer h5 { margin: 0 0 22px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.footer nav a { position: relative; display: block; width: fit-content; color: var(--text); font-size: 15px; line-height: 20px; margin-bottom: 14px; transition: color .25s var(--ease); }
.footer nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.footer nav a:hover { color: var(--ink); }
.footer nav a:hover::after { transform: scaleX(1); }
.footer .bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); font-size: 13.5px; margin-top: 76px; }
.footer-mark { --mx: 50%; position: relative; z-index: 1; display: flex; justify-content: center; height: 10.4vw; margin-top: clamp(48px, 7vw, 120px); overflow: hidden;
  font: 400 18.75vw/.74 "Orbitron", sans-serif; letter-spacing: .03em; user-select: none; }
.footer-mark span { display: block; color: transparent; -webkit-background-clip: text; background-clip: text; will-change: transform;
  background-image: radial-gradient(22vw 14vw at var(--mx) 0%, rgba(255, 236, 214, .34), transparent 70%), linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 62%, rgba(255, 255, 255, 0) 92%);
  background-size: var(--bw, 100vw) 100%; background-position: var(--bx, 0) 0; background-repeat: no-repeat; }
.footer-glow { position: absolute; left: 10vw; right: 10vw; bottom: -120px; height: 360px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 70%, rgba(255, 90, 31, .22), transparent 70%), radial-gradient(30% 30% at 50% 80%, rgba(255, 220, 166, .1), transparent 70%); filter: blur(30px); }
.doc .footer .bottom { margin-top: 0; padding: 40px 0 48px; border-top: 1px solid rgba(255, 255, 255, .1); }


/* ── mail dialog ──────────────────────────────────────── */
dialog.mail { border: 0; padding: 0; background: none; color: var(--ink); width: min(460px, calc(100vw - 32px)); }
dialog.mail::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(8px); }
dialog.mail[open] .sheet { animation: pop .45s var(--ease); }
.sheet { position: relative; display: grid; gap: 14px; padding: 34px; border-radius: 28px; background: linear-gradient(#18181a, #0b0b0c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2), 0 40px 90px rgba(0, 0, 0, .8); }
.sheet h3 { margin: 0; font-size: 24px; }
.sheet p { margin: 0 0 6px; color: var(--muted); }
.sheet input[type="email"] { height: 54px; padding: 0 20px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .05); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font: 16px "Inter", sans-serif; outline: 0; }
.sheet input[type="email"]:focus { box-shadow: inset 0 0 0 1.5px var(--hot); }
.consent { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 13.5px; }
.consent input { accent-color: var(--hot); margin-top: 3px; }
.sheet .close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--muted); font-size: 26px; cursor: pointer; }
.hp { position: absolute; left: -9999px; }
.turnstile:empty { display: none; }

/* ── keyframes ────────────────────────────────────────── */
@keyframes draw { to { stroke-dashoffset: 0; } from { stroke-dashoffset: 1; } }
@keyframes needle { from { transform: rotate(-36deg); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes type { from { opacity: 0; } }
@keyframes rows { from { transform: translateY(14px); } }
@keyframes spin-in { from { transform: rotate(-35deg); } }
@keyframes fall { from { transform: translateY(-90px); opacity: 0; } 25% { opacity: 1; } }
@keyframes glide { from { transform: translate(150px, -70px); opacity: 0; } 25% { opacity: 1; } }
@keyframes press { 0%, 56%, 100% { transform: translateY(0); } 62% { transform: translateY(5px); } 70% { transform: translateY(0); } }
@keyframes rise { from { transform: translateY(26px); opacity: 0; } }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
@keyframes lift { from { transform: translateY(70px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes type-in { from { opacity: 0; filter: blur(3px); } }
@keyframes rise-soft { from { transform: translateY(34px); opacity: 0; } 30% { opacity: 1; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes emerge { from { transform: translateY(60px); opacity: 0; } }
@keyframes breathe { 50% { opacity: .72; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.fx .btn { transition: filter .9s var(--glide), background .9s var(--glide), box-shadow .9s var(--glide); }
html:not(.fx) .btn:hover { transform: translateY(-1px); }
html:not(.fx) .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html:not(.fx) .reveal.in { opacity: 1; transform: none; }
/* Motion (fx.js) owns entrances when available; these are only the pre-paint states */
.fx [data-fx], .fx .reveal, .fx .card, .fx .hero-visual .window, .fx .wordmark, .fx .footer-mark span, .fx .footer-glow { opacity: 0; }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .lateral { grid-template-columns: 1fr; }
  .lateral .copy { max-width: 560px; }
  .palette .body { grid-template-columns: 340px 1fr; }
  .nav nav { gap: 24px; }
}
@media (max-width: 760px) {
  .nav nav { display: none; }
  .cta { flex-direction: column; gap: 12px; }
  .cta .btn { width: 100%; }
  .hero-visual .window { width: 150vw; margin: 0 0 0 16px; }
  .wordmark { display: none; }
  .row { flex-direction: column; gap: 16px; }
  .bento { gap: 16px; }
  .card { aspect-ratio: auto; flex: none; display: flex; flex-direction: column; border-radius: 34px; }
  .card header, .card.narrow header { position: relative; inset: auto; order: -1; padding: 28px 26px 0; text-align: left; }
  .card h3 { font-size: 22px; }
  .card p, .card.narrow p { font-size: 14.5px; max-width: none; margin: 6px 0 0; }
  .card .art { position: relative; inset: auto; height: auto; aspect-ratio: 600 / 394; margin-top: 8px; }
  .card.narrow .art { aspect-ratio: 452 / 394; }
  .card.strip .art { aspect-ratio: 900 / 279; }
  .plans { grid-template-columns: 1fr; gap: 48px; }
  .plans .divider { height: 1px; width: 60%; margin: 0 auto; }
  .palette .body { grid-template-columns: 1fr; }
  .palette ul { border-right: 0; }
  .palette .pane { display: none; }
  .palette .q.on + .a { display: block; padding: 6px 16px 18px; }
  .palette .a h4 { display: none; }
  .palette .a p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }
  .palette .chips { margin-top: 16px; }
  .palette > footer span:not(.count) { display: none; }
  /* community, re-thought for small screens: compact rows, logo as a lit badge */
  .community { grid-template-columns: 1fr; gap: 0; padding: 0 16px 24px; }
  .community .block { display: grid; grid-template-columns: 104px 1fr; gap: 20px; align-items: center; text-align: left; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .community .block:first-child { border-top: 0; }
  .community .stage { order: -1; margin: 0; height: 104px; width: 104px; align-items: center; justify-content: center; position: relative; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  /* no container: the mark floats, lit by an ember pool on the "floor" beneath it */
  .community .stage::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 96px; height: 26px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--hot), transparent); opacity: .55; filter: blur(9px); pointer-events: none; }
  .sculpture, .sculpture.clyde { width: 84px; margin: 0 0 8px; }
  .community .display { font-size: 28px; }
  .community .text p { margin: 8px 0 0; font-size: 14px; }
  .community .inline-mail, .community .text > .btn { grid-column: 1 / -1; }
  .community .block .text { display: contents; }
  .community .block .text h2 { grid-column: 2; }
  .community .block .text p { grid-column: 1 / -1; margin-top: 4px; }
  .community .inline-mail { margin: 4px 0 0; width: 100%; }
  .community .text > .btn { width: 100%; margin-top: 4px; }
  .community .horizon { display: none; }
  .community .stage { -webkit-mask-image: none; mask-image: none; perspective: none; }
  .footer .top { grid-template-columns: 1fr; }
  .footer nav { grid-template-columns: 1fr 1fr; gap: 32px 24px; width: 100%; }
  .footer-mark { height: 12vw; }
  .theater .player { width: 100vw; border-radius: 0; }
  .theater-close kbd { display: none; }
  .player .bar { left: 8px; right: 8px; bottom: 8px; height: 44px; gap: 4px; padding: 0 6px; }
  .player .time.faint, .player .fs { display: none; }
  .palette .ind { display: none; }
  .palette.has-ind .q.on { background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .25); }
  .community .tag { display: none; }
  .community .pool { display: none; }
  .footer .bottom { flex-direction: column; gap: 6px; margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.fx) *, html:not(.fx) *::before, html:not(.fx) *::after { animation: none !important; transition: none !important; }
  html:not(.fx) .reveal { opacity: 1; transform: none; }
}

/* ── secondary pages ──────────────────────────────────── */
.doc .footer { margin-top: 80px; }
.prose { width: min(720px, calc(100vw - 32px)); margin: 0 auto; padding: 60px 0 0; color: var(--text); font-size: 16.5px; line-height: 1.75; }
.prose h1 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 3vw + 18px, 52px); line-height: 1.12; color: var(--ink); margin: 0 0 24px; letter-spacing: -.01em; }
.prose h2 { font-size: 22px; color: var(--ink); margin: 48px 0 12px; }
.prose h3 { font-size: 17px; color: var(--ink); margin: 32px 0 8px; }
.prose a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 24px 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.prose th { color: var(--muted); font-weight: 600; }
.prose .status { justify-content: flex-start; font-size: 16px; }

/* ── scrollbar ────────────────────────────────────────── */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
html.lenis { scrollbar-width: none; }
html.lenis::-webkit-scrollbar { display: none; }
.sb { position: fixed; z-index: 90; top: 6px; bottom: 6px; right: 0; width: 14px; cursor: default; }
.sb[hidden] { display: none; }
.sb i { position: absolute; top: 0; right: 4px; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); opacity: 0;
  transition: opacity .8s var(--glide), width .45s var(--glide), background .45s var(--glide); will-change: transform; }
.sb.on i, .sb:hover i { opacity: 1; transition-duration: .25s, .45s, .45s; }
.sb:hover i, .sb.drag i { width: 6px; background: rgba(255, 255, 255, .5); }
.sb.drag i { background: rgba(255, 255, 255, .7); }
@media (hover: none) { .sb { display: none; } }

.sheet.sent > :not(.done):not(.close) { display: none; }

/* ── checkout success ─────────────────────────────────── */
.success { width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 72px 0 40px; color: var(--text); line-height: 1.6; }
.success .hero .eyebrow { margin-bottom: 14px; }
.success h1 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 3vw + 18px, 52px); line-height: 1.1; color: var(--ink); margin: 0 0 16px; letter-spacing: -.01em; }
.success .lead { font-size: 18px; color: var(--text); margin: 0; max-width: 54ch; }
.success h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 56px 0 8px; }
.success h3 { font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.success p { margin: 0 0 12px; }
.success .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.success .steps li { counter-increment: s; position: relative; padding: 26px 0 26px 56px; border-top: 1px solid rgba(255, 255, 255, .08); }
.success .steps li::before { content: counter(s); position: absolute; left: 0; top: 26px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.success kbd { font: 600 12px/1 var(--mono, ui-monospace, monospace); padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--ink); }
.success .textlink { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.success .benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.success .benefits li { display: grid; gap: 2px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.success .benefits b { color: var(--ink); font-weight: 600; }
.success .benefits span { color: var(--muted); font-size: 15px; }
.success .community-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 28px 0; border-block: 1px solid rgba(255, 255, 255, .08); }
.success .community-cta h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.success .community-cta p { margin: 0; color: var(--muted); }
.success .guarantee { margin-top: 28px; }
.success .guarantee strong { color: var(--ink); font-weight: 600; }
.success .fine a { color: var(--soft); }
@media (max-width: 640px) { .success { padding-top: 48px; } .success .benefits { grid-template-columns: 1fr; } .success .community-cta { flex-direction: column; align-items: stretch; text-align: left; } .success .community-cta .btn { width: 100%; } }

/* lite: low-end hardware (≤4 cores, ≤4 GB or Save-Data) keeps layout, type and light, but drops the
   glass and blend passes that cost a GPU re-composite every scrolled frame. Motion is already off
   because the head script never adds .fx there. */
.lite *, .lite *::before, .lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important; }

/* ── GitHub: navbar mark, hero line, open-source band ─── */
.nav-end { display: flex; align-items: center; gap: 12px; }
.gh { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink); background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .16); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.gh::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); right: 0; padding: 7px 12px; border-radius: 10px; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--text);
  background: rgba(18, 18, 19, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
.gh:hover, .gh:focus-visible { transform: translateY(-1px); background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 154, 92, .5), inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 28px rgba(255, 90, 31, .28); }
.gh:hover::after, .gh:focus-visible::after { opacity: 1; transform: none; }
.source { margin-top: 0; }
.source-card { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(24px, 4vw, 72px); width: 100%; margin: 0 auto;
  padding: clamp(34px, 4.5vw, 72px) clamp(34px, 5.5vw, 96px); border-radius: 40px; overflow: hidden;
  background: radial-gradient(55% 75% at 88% 112%, rgba(255, 90, 31, .26), transparent 70%), radial-gradient(40% 50% at 8% -10%, rgba(255, 255, 255, .06), transparent 70%), linear-gradient(#151516, #08080a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1.5px 0 rgba(255, 255, 255, .16), 0 50px 100px rgba(0, 0, 0, .6); }
.source-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 90% at 80% 100%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 80% 100%, #000, transparent 75%); }
.source-copy, .source-mark { position: relative; z-index: 1; }
.source .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--text); font-size: 13px; letter-spacing: .02em; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 12px var(--hot); }
.source-lead { margin: 22px 0 0; max-width: 46ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.clone { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 30px 0 26px; padding: 7px 7px 7px 20px; border-radius: 18px; background: rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .05); font: 500 13.5px/1 "Roboto Mono", ui-monospace, monospace; }
.clone code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--text); scrollbar-width: none; }
.clone code::-webkit-scrollbar { display: none; }
.clone .p { margin-right: 12px; color: var(--soft); user-select: none; }
.clone .copy { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--ink); cursor: pointer; transition: background .25s, transform .25s var(--ease); }
.clone .copy:hover { background: rgba(255, 255, 255, .12); }
.clone .copy:active { transform: scale(.94); }
.clone .copy svg { grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--ease); }
.clone .copy .i-done { opacity: 0; transform: scale(.6); color: #8be0a4; }
.clone .copy.done .i-copy { opacity: 0; transform: scale(.6); }
.clone .copy.done .i-done { opacity: 1; transform: none; }
.source .cta { justify-content: flex-start; }
.btn.ghost.plain { padding: 0 24px; }
.source-mark { display: grid; place-items: center; min-height: 300px; }
.source-mark svg { position: relative; z-index: 1; width: clamp(190px, 22vw, 340px); height: auto; overflow: visible; animation: bob-t 7s ease-in-out infinite; }
.source-mark .pool { position: absolute; left: 50%; bottom: 8%; width: 72%; height: 90px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 90, 31, .75), transparent); filter: blur(22px); opacity: .7; }
@media (max-width: 900px) {
  .source-card { grid-template-columns: 1fr; padding: 34px 24px 40px; border-radius: 30px; }
  .source-mark { order: -1; min-height: 170px; justify-content: flex-start; place-items: center start; }
  .source-mark svg { width: 128px; }
  .source-mark .pool { left: 64px; width: 150px; bottom: 6%; }
  .source .cta { flex-direction: column; align-items: stretch; }
  .source .cta .btn { width: 100%; }
}
@media (max-width: 760px) { .nav-end { gap: 8px; } .gh { width: 40px; height: 40px; } .gh::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .source-mark svg { animation: none; } }

.oss { animation: oss-in .9s var(--ease) both 1.1s; }
@keyframes oss-in { from { opacity: 0; transform: translateY(8px); } }
.source-copy { min-width: 0; }
@media (max-width: 900px) { .source-card { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .oss { animation: none; } }

.oss { display: inline-flex; align-items: center; gap: 8px; margin: 22px auto 0; font-size: 13.5px; color: var(--faint); transition: color .3s; }
.oss svg { opacity: .8; }
.oss:hover, .oss:focus-visible { color: var(--ink); }

/* ── Lifetime Pro: support dialog ─── */
dialog.support { width: min(480px, calc(100vw - 32px)); }
.support .sheet { gap: 16px; }
.support .eyebrow { margin: 0; color: var(--soft); font-size: 13px; letter-spacing: .02em; }
.support h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; padding-right: 28px; }
.support .perks { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.support .perks li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--text); font-size: 15px; }
.support .perks li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 10px var(--hot); }
.support .btn.plain { background: none; box-shadow: none; color: var(--muted); height: 44px; }
.support .btn.plain:hover { color: var(--ink); background: rgba(255, 255, 255, .05); box-shadow: none; }
.support .btn.plain::after { display: none; }
.support .btn { white-space: nowrap; }
.support .status:empty { display: none; }

/* touch: no glass or blend passes per scrolled frame (iOS Safari tears on them) */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important; }
}