/* ==========================================================================
   Modern: the new era site
   Tokens are copied from the Modern Computer app (themes/modern.css). Copy, don't eyeball.
   ========================================================================== */

@font-face { font-family: Jost; src: url(../assets/fonts/jost-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Inter; src: url(../assets/fonts/inter-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../assets/fonts/jetbrains-mono-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --font-display: Jost, Poppins, "Century Gothic", "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --background: #0b0910;
  --foreground: #f4f3f7;
  --card: #18141f;
  --popover: #241f2b;
  --primary: #a78bfa;
  --primary-foreground: #18141f;
  --secondary: #211b2a;
  --muted: #1d1824;
  --muted-foreground: #b2a6c2;
  --accent: #21172f;
  --border: #352f3b;
  --ring: #a78bfa;
  --text-ghost: #a28fb8;
  --link: #c4b5fd;

  --ok: #2bb7ff;
  --warn: #f5a93c;
  --err: #ff6568;

  --hl: linear-gradient(90deg, #a78bfa, #e879f9);
  --btn-fill: linear-gradient(135deg, #8b7bff, #c084fc);
  --spectrum: linear-gradient(90deg, #14A8F5 0%, #1E1AA0 16.66%, #6B4CF0 33.33%, #8A2BE8 50%, #E053B0 66.66%, #FF63D6 83.33%, #F5A93C 100%);

  --hair: color-mix(in oklch, var(--foreground) 9%, transparent);
  --tint: color-mix(in oklch, var(--foreground) 4.5%, transparent);
  --glow-a: color-mix(in oklch, #a78bfa 18%, transparent);
  --glow-b: color-mix(in oklch, #be185d 8%, transparent);
  --sky-top: #0d0b15;

  --e3: 0 8px 24px -6px rgb(0 0 0 / .42), 0 2px 6px -2px rgb(0 0 0 / .24);
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --background: #f2f1f6;
  --foreground: #191824;
  --card: #ffffff;
  --popover: #ffffff;
  --primary: #6d28d9;
  --primary-foreground: #ffffff;
  --secondary: #f0ecf7;
  --muted: #f4f2f7;
  --muted-foreground: #5f5c6b;
  --accent: #ede9fe;
  --border: #e4e2ec;
  --ring: #8b5cf6;
  --text-ghost: #6b6974;
  --link: #6d28d9;
  --ok: #0369a1;
  --warn: #b45309;
  --err: #dc2626;
  --hl: linear-gradient(90deg, #7c3aed, #c026d3);
  --glow-a: color-mix(in oklch, #a78bfa 22%, transparent);
  --glow-b: color-mix(in oklch, #f0abfc 14%, transparent);
  --sky-top: #f6f5fa;
  --e3: 0 8px 24px -8px rgb(40 20 80 / .16), 0 2px 6px -2px rgb(40 20 80 / .08);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font: 400 1rem/1.6 var(--font-body);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .35s ease, color .35s ease;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: color-mix(in oklch, #a78bfa 32%, transparent); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: .6rem 1rem; border-radius: 999px; background: var(--card); box-shadow: var(--e3); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(72rem + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: calc(48rem + var(--gutter) * 2); }
.center { text-align: center; }

/* The sky: soft light pooled mid-page, faded out well before any edge. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 45% 40%, var(--glow-a), transparent 72%),
    radial-gradient(35% 35% at 85% 55%, var(--glow-b), transparent 70%),
    linear-gradient(180deg, var(--sky-top), var(--background));
  transition: opacity .35s ease;
}

/* ---------- type ---------- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; text-wrap: balance; }
.h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.h2 { font-size: clamp(2.25rem, 5vw, 4rem); }
.h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.2; }
.hl { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.62; color: var(--muted-foreground); max-width: 36rem; }
.hint, .fine { font-size: .8125rem; color: var(--text-ghost); }
.arr { font-family: var(--font-body); display: inline-block; transition: transform .25s var(--ease); }
a:hover .arr, button:hover .arr { transform: translateX(3px); }
.link { color: var(--link); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- buttons: every button is a pill ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.375rem; padding: 0 1rem; border-radius: 9999px;
  border: 1px solid color-mix(in oklch, var(--foreground) 16%, transparent);
  background: color-mix(in oklch, var(--foreground) 4%, transparent);
  font: 500 .8125rem/1 var(--font-body); color: var(--foreground); white-space: nowrap;
  transition: background .2s ease, filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn:hover { background: color-mix(in oklch, var(--foreground) 8%, transparent); }
.btn:active { transform: scale(.98); }
.btn-primary {
  border: 0; color: #fff; background: var(--btn-fill);
  box-shadow: 0 10px 28px -14px #a78bfa;
}
/* Keep the gradient on hover and lift it slightly. Never swap it for a flat colour. */
.btn-primary:hover { background: var(--btn-fill); filter: brightness(1.07); box-shadow: 0 12px 30px -12px #a78bfa; }
.btn-quiet { border: 0; background: none; height: auto; padding: .375rem .625rem; color: var(--link); }
.btn-quiet:hover { background: color-mix(in oklch, #a78bfa 12%, transparent); }
.btn-sm { height: 2.125rem; padding: 0 .95rem; }
.btn-lg { height: 3rem; padding: 0 1.5rem; font-size: .9375rem; }
.btn.round { width: 2.75rem; height: 2.75rem; padding: 0; font-size: 1rem; }
.btn.round:disabled { opacity: .35; cursor: default; }
.fake { pointer-events: none; }

/* ---------- faces: round, initials on a soft colour ---------- */
.face {
  --c: #a78bfa;
  flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  width: 2.25rem; height: 2.25rem;
  background: color-mix(in oklch, var(--c) 34%, var(--background));
  color: color-mix(in oklch, var(--c) 30%, var(--foreground));
  font: 600 .8125rem/1 var(--font-display); letter-spacing: .02em;
  transition: box-shadow .25s ease, transform .25s var(--ease);
}
img.face { object-fit: cover; background: #0d0b17; padding: 0; }
.face-xs { width: 1.75rem; height: 1.75rem; font-size: .6875rem; }
.face-sm { width: 1.875rem; height: 1.875rem; font-size: .6875rem; }
.face-lg { width: 4rem; height: 4rem; font-size: 1.125rem; }
.face-xl { width: 7.5rem; height: 7.5rem; font-size: 1.875rem; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s ease, backdrop-filter .3s ease; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair); opacity: 0; transition: opacity .3s ease; }
.nav.scrolled { background: color-mix(in oklch, var(--background) 72%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); }
.nav.scrolled::after { opacity: 1; }
:root[data-theme="light"] .nav.on-dark {
  --foreground: #f4f3f7; --muted-foreground: #b2a6c2; --background: #0b0910; --link: #c4b5fd;
  --hair: color-mix(in oklch, #f4f3f7 9%, transparent); --tint: color-mix(in oklch, #f4f3f7 6%, transparent);
}
.nav.on-dark .wordmark, .nav.on-dark .menu-btn { color: var(--foreground); }
.nav-in { display: flex; align-items: center; gap: 2rem; height: 64px; max-width: calc(80rem + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wm {
  display: block; aspect-ratio: 536.9 / 95.76; height: 1.25rem;
  background: currentColor;
  -webkit-mask: url(../assets/img/modernai.svg) center / contain no-repeat; mask: url(../assets/img/modernai.svg) center / contain no-repeat;
}
.wordmark { color: var(--foreground); padding: .25rem 0; }
.nav-links { display: flex; gap: .25rem; margin-right: auto; }
.nav-links a { white-space: nowrap; padding: .45rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); transition: color .2s ease, background .2s ease; }
.nav-links a:hover { color: var(--foreground); background: var(--tint); }
.nav-end { display: flex; align-items: center; gap: .5rem; }
/* ---------- the phone menu: a glass card under the bar ---------- */
.sheet { padding: 8px var(--gutter) 0; }
.sheet[hidden] { display: none; }
.sheet-in { position: relative; overflow: hidden; display: grid; gap: .6rem; padding: .7rem; border-radius: 24px;
  background: radial-gradient(120% 70% at 0% 0%, rgb(139 123 255 / .18), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgb(224 83 176 / .12), transparent 60%), color-mix(in oklch, #120f19 94%, transparent);
  border: 1px solid rgb(244 243 247 / .1); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  max-height: calc(100svh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.sheet-in::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 1px; background: var(--spectrum); opacity: .8; }
.sheet-in > *, .sh-grid > * { animation: sh-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes sh-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .sheet-in > *, .sh-grid > * { animation: none; } }
.sh-sol { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; width: 100%; padding: 1rem 1rem 1rem 1.1rem; border-radius: 18px; text-align: left; color: var(--foreground);
  background: linear-gradient(135deg, rgb(139 123 255 / .2), rgb(224 83 176 / .1)); border: 1px solid rgb(196 181 253 / .22); }
.sh-sol-t { display: grid; gap: .2rem; min-width: 0; }
.sh-sol b { font: 600 1.2rem/1.1 var(--font-display); letter-spacing: -.01em; }
.sh-sol small { font-size: .78rem; color: var(--muted-foreground); }
.sh-dots { display: flex; }
.sh-dots i { width: 12px; height: 12px; margin-left: -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #1a1525; }
.sh-sol .arr { color: #c4b5fd; }
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sh-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; min-height: 5.4rem; padding: .85rem .95rem; border-radius: 16px;
  background: rgb(255 255 255 / .035); border: 1px solid rgb(244 243 247 / .07); font: 500 1.02rem/1.15 var(--font-display); color: var(--foreground);
  transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.sh-tile svg { width: 22px; height: 22px; fill: none; stroke: #c4b5fd; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-tile:hover, .sh-tile:focus-visible { background: rgb(167 139 250 / .12); border-color: rgb(167 139 250 / .35); }
.sh-tile:active, .sh-sol:active { transform: scale(.98); }
.sh-cta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .2rem; }
.sh-cta .btn { justify-content: center; width: 100%; }
.sh-login { background: rgb(255 255 255 / .06); border: 1px solid rgb(244 243 247 / .12); color: var(--foreground); }
.sh-foot { margin: .15rem 0 .2rem; text-align: center; font-size: .75rem; color: var(--text-ghost); }
.sh-foot a { color: var(--link); }
.menu-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--muted-foreground); transition: background .2s ease, color .2s ease; }
.menu-btn:hover { background: var(--tint); color: var(--foreground); }
.menu-btn { display: none; gap: 5px; align-content: center; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links, .nav-login { display: none; }
  .menu-btn { display: grid; }
  .nav-in { gap: 1rem; }
  .nav-end { margin-left: auto; }
}
@media (max-width: 420px) {
  .nav-end .btn-primary { display: none; }
}

/* ---------- Solutions: the megamenu (js/solutions.js) ---------- */
.nav-mm { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .75rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); transition: color .2s ease, background .2s ease; }
.nav-mm svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav-mm:hover, .nav-mm[aria-expanded="true"] { color: var(--foreground); background: var(--tint); }
.nav-mm[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav.mm-on { background: var(--background); -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; } /* a blurred parent would stop the panel's own blur, and trap the phone sheet inside the bar */
html.mm-lock, html.mm-lock body { overflow: hidden; }

.mm { position: absolute; left: 0; right: 0; top: 64px; padding: .5rem var(--gutter) 0; pointer-events: none; }
/* Dim the page behind, so the menu reads as the one thing in focus */
.mm::before { content: ""; position: fixed; inset: 64px 0 0; background: rgb(6 4 12 / .45); opacity: 0; transition: opacity .3s ease; }
:root[data-theme="light"] .mm::before { background: rgb(30 20 60 / .18); }
.mm.open::before { opacity: 1; }
.mm-in {
  position: relative; max-width: 76rem; margin: 0 auto; padding: 1.25rem; border-radius: 1.75rem; pointer-events: auto;
  background: color-mix(in oklch, var(--popover) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(32px); backdrop-filter: saturate(1.5) blur(32px);
  border: 1px solid var(--hair);
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / .6), 0 0 0 1px color-mix(in oklch, #a78bfa 6%, transparent);
  opacity: 0; transform: translateY(-10px) scale(.985); transform-origin: 50% 0;
  transition: opacity .28s var(--ease), transform .4s var(--ease);
}
:root[data-theme="light"] .mm-in { box-shadow: 0 40px 100px -30px rgb(40 20 80 / .28), 0 0 0 1px color-mix(in oklch, #a78bfa 10%, transparent); }
/* A slow spectrum glow along the top edge */
.mm-in::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: var(--spectrum); opacity: .7; filter: blur(.3px); }
.mm.open .mm-in { opacity: 1; transform: none; }

.mm-top { padding: .25rem .25rem 1rem; }
.mm-field { position: relative; display: flex; align-items: center; gap: .75rem; height: 3.5rem; padding: 0 1rem 0 1.15rem; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 5%, transparent); border: 1px solid var(--hair); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.mm-field:focus-within { border-color: color-mix(in oklch, #a78bfa 55%, transparent); background: color-mix(in oklch, var(--foreground) 3%, transparent); box-shadow: 0 0 0 4px color-mix(in oklch, #a78bfa 16%, transparent); }
.mm-field > svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--muted-foreground); stroke-width: 1.8; stroke-linecap: round; }
.mm-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--foreground); font: 400 1.0625rem/1 var(--font-body); }
.mm-field input::placeholder { color: var(--text-ghost); }
.mm-field input::-webkit-search-cancel-button { display: none; }
.mm-mode { flex: none; font: 500 .75rem/1 var(--font-mono); letter-spacing: .01em; color: var(--text-ghost); white-space: nowrap; }
.mm-mode.on { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mm-mode.busy { background: linear-gradient(90deg, var(--text-ghost) 30%, var(--foreground) 50%, var(--text-ghost) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mm-shine 1.8s linear infinite; }
@keyframes mm-shine { to { background-position: -150% 0; } }
.mm-x { display: none; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; place-items: center; color: var(--muted-foreground); }
.mm-x svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mm-hint { margin: .7rem 0 0 1.2rem; font-size: .8125rem; color: var(--text-ghost); }
.mm-hint button { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--link) 35%, transparent); text-underline-offset: .2em; font-size: inherit; }

.mm-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.25rem; }
.mm-main { min-width: 0; }
.mm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.mm-grid li { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 35ms + 60ms); }
.mm.open .mm-grid li { opacity: 1; transform: none; }
.mm-card {
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto 1fr auto; gap: .4rem; height: 100%;
  padding: 1.15rem 1.15rem 1rem; border-radius: 1.15rem; overflow: hidden;
  background: color-mix(in oklch, var(--foreground) 3%, transparent); border: 1px solid var(--hair);
  transition: border-color .25s ease, transform .35s var(--ease), background .25s ease;
}
/* A spotlight in the card's own colours follows the pointer */
.mm-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklch, var(--a) 22%, transparent), color-mix(in oklch, var(--b) 8%, transparent) 45%, transparent 70%); }
.mm-card::after { content: ""; position: absolute; left: 1.15rem; right: 1.15rem; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--a), var(--b), transparent); opacity: 0; transition: opacity .3s ease; }
.mm-card:hover, .mm-card:focus-visible { border-color: color-mix(in oklch, var(--a) 40%, transparent); transform: translateY(-2px); }
.mm-card:hover::before, .mm-card:hover::after, .mm-card:focus-visible::before { opacity: 1; }
/* The scene at the top of each card (js/solutions.js art()). Drawn at rest; hover replays it. */
.mm-art {
  position: relative; display: block; height: 7.25rem; margin: -1.15rem -1.15rem .85rem; overflow: hidden;
  border-bottom: 1px solid var(--hair);
  background: radial-gradient(70% 90% at 50% 110%, color-mix(in oklch, var(--a) 22%, transparent), transparent 70%), color-mix(in oklch, var(--foreground) 2%, transparent);
}
.mm-art svg { display: block; width: 100%; height: 100%; padding: .6rem 0 .3rem; overflow: visible; }
.mm-art .ga { stop-color: var(--a); } .mm-art .gb { stop-color: var(--b); }
.mm-art .grid, .mm-art .wire, .mm-art .track { fill: none; stroke: var(--hair); stroke-width: 1; }
.mm-art .wire { stroke: color-mix(in oklch, var(--foreground) 14%, transparent); stroke-width: 1.4; }
.mm-art .track { stroke-width: 3; stroke-linecap: round; }
.mm-art .goal { fill: none; stroke: color-mix(in oklch, var(--b) 55%, transparent); stroke-width: 1.2; stroke-dasharray: 3 5; }
.mm-art .ln { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in oklch, var(--a) 60%, transparent)); }
.mm-art .dot, .mm-art .core { fill: var(--b); }
.mm-art .dot { filter: drop-shadow(0 0 5px var(--b)); }
.mm-art .dot2 { fill: color-mix(in oklch, var(--a) 70%, var(--foreground)); opacity: .7; }
.mm-art .ring { fill: none; stroke: var(--b); stroke-width: 1.5; opacity: .5; transform-box: fill-box; transform-origin: center; }
.mm-art .bx { fill: color-mix(in oklch, var(--card) 88%, transparent); stroke: color-mix(in oklch, var(--foreground) 16%, transparent); stroke-width: 1; }
.mm-art .bx.fr { stroke: color-mix(in oklch, var(--a) 55%, transparent); }
.mm-art .bar { fill: none; stroke: color-mix(in oklch, var(--a) 55%, transparent); stroke-width: 5; stroke-linecap: round; }
.mm-art .chip { fill: color-mix(in oklch, var(--foreground) 14%, transparent); }
.mm-art .txt { fill: none; stroke: color-mix(in oklch, var(--foreground) 20%, transparent); stroke-width: 3; stroke-linecap: round; }
.mm-art .img { opacity: .9; }
.mm-art .bang { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.mm-art .cost { fill: color-mix(in oklch, var(--foreground) 16%, transparent); }
.mm-art .pf { filter: drop-shadow(0 0 8px color-mix(in oklch, var(--b) 70%, transparent)); }
.mm-art .seg { fill: none; stroke-width: 13; }
.mm-art .seg.base { stroke: color-mix(in oklch, var(--foreground) 8%, transparent); }
.mm-art .seg.s2 { stroke: color-mix(in oklch, var(--a) 70%, var(--foreground) 10%); }
.mm-art .seg.s3 { stroke: color-mix(in oklch, var(--b) 45%, transparent); }
.mm-art .donut { transform: rotate(-90deg); transform-origin: 120px 60px; }
.mm-art .st, .mm-art .tile, .mm-art .wb, .mm-art .orbit, .mm-art .donut { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.mm-art .wb { transform-box: fill-box; transform-origin: 50% 100%; }
.mm-art .tile { transform-box: fill-box; transform-origin: 50% 100%; }
.mm-art .orbit { transform-origin: 120px 60px; }
/* Always a little alive: rings pulse */
@media (prefers-reduced-motion: no-preference) {
  .mm-art .ring { animation: mm-ping 2.4s ease-out infinite; }
  .mm-card:hover .ln, .mm-card:focus-visible .ln { animation: mm-draw 1.1s cubic-bezier(.3, .7, .2, 1) both; }
  .mm-card:hover .fa { animation: mm-fade .9s ease both .2s; }
  .mm-card:hover .st1 { transform: translate(-8px, 3px); }
  .mm-card:hover .st2 { transform: translate(6px, -3px); }
  .mm-card:hover .st3 { transform: translate(20px, -7px); }
  .mm-card:hover .tl { transform: translateX(-8px) rotate(-9deg); }
  .mm-card:hover .tr { transform: translateX(8px) rotate(9deg); }
  .mm-card:hover .wb { animation: mm-grow .7s cubic-bezier(.2, .8, .2, 1) both; }
  .mm-card:hover .w2 { animation-delay: .07s; } .mm-card:hover .w3 { animation-delay: .14s; }
  .mm-card:hover .w4 { animation-delay: .21s; } .mm-card:hover .w5 { animation-delay: .3s; }
  .mm-card:hover .donut { transform: rotate(30deg); }
  .mm-card:hover .orbit { transform: rotate(-24deg); }
}
@keyframes mm-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-grow { from { transform: scaleY(.15); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes mm-ping { 0% { transform: scale(.8); opacity: .65; } 100% { transform: scale(1.9); opacity: 0; } }
.mm-t { font: 600 1.125rem/1.2 var(--font-display); color: var(--foreground); }
.mm-d { font-size: .875rem; line-height: 1.5; color: var(--muted-foreground); }
.mm-go { margin-top: .5rem; font-size: .8125rem; font-weight: 500; color: var(--link); }

.mm-res[hidden], .mm-grid[hidden] { display: none; }
.mm-count { margin: 0 0 .5rem .5rem; font-size: .8125rem; color: var(--text-ghost); }
.mm-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: min(26rem, 56vh); overflow-y: auto; }
.mm-results li { animation: hc-in .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.mm-r { display: grid; gap: .2rem; padding: .75rem .9rem; border-radius: .9rem; transition: background .15s ease; }
.mm-r:hover, .mm-r.sel, .mm-r:focus-visible { background: color-mix(in oklch, #a78bfa 11%, transparent); }
.mm-k { display: flex; align-items: center; gap: .5rem; font: 500 .6875rem/1.3 var(--font-mono); letter-spacing: .02em; color: var(--text-ghost); }
.mm-rt { font: 600 1rem/1.3 var(--font-display); color: var(--foreground); }
.mm-rd { font-size: .8125rem; line-height: 1.5; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-r mark { background: none; color: var(--link); }
.mm .fst { display: inline-flex; padding: .15rem .5rem; border-radius: 999px; font: 500 .6875rem/1.2 var(--font-body); }
.mm .fst-on { color: var(--link); background: color-mix(in oklch, #a78bfa 15%, transparent); }
.mm .fst-soon { color: var(--muted-foreground); background: var(--tint); }

.mm-side { display: flex; flex-direction: column; padding: 1.1rem 1.15rem; border-radius: 1.15rem; background: radial-gradient(120% 80% at 100% 0%, color-mix(in oklch, #6b4cf0 20%, transparent), transparent 70%), color-mix(in oklch, var(--foreground) 3%, transparent); border: 1px solid var(--hair); }
.mm-side-h { font: 600 .9375rem/1.3 var(--font-display); color: var(--foreground); }
.mm-qs { list-style: none; margin: .6rem 0 auto; padding: 0; display: grid; gap: .1rem; }
.mm-q { display: block; padding: .55rem 0; font-size: .875rem; line-height: 1.45; color: var(--muted-foreground); border-bottom: 1px solid var(--hair); transition: color .2s ease; }
.mm-q::before { content: "“"; color: #a78bfa; }
.mm-q::after { content: "”"; color: #a78bfa; }
.mm-q:hover { color: var(--foreground); }
.mm-all { margin-top: 1rem; font-size: .8125rem; font-weight: 500; color: var(--link); }

@media (max-width: 1100px) and (min-width: 901px) {
  .nav-links { gap: 0; }
  .nav-links a { padding-inline: .5rem; }
  .mm-body { grid-template-columns: minmax(0, 1fr) 14rem; }
  .mm-d { font-size: .8125rem; }
}
/* Phones and tablets: the menu is a full-screen sheet */
@media (max-width: 900px) {
  .mm { position: fixed; inset: 0; z-index: 60; padding: 0; pointer-events: auto; }
  .mm-in { height: 100%; max-width: none; overflow-y: auto; border-radius: 0; border: 0; padding: max(.75rem, env(safe-area-inset-top)) var(--gutter) 2rem; background: color-mix(in oklch, var(--background) 96%, transparent); transform: translateY(12px); }
  .mm-in::before { display: none; }
  .mm-top { position: sticky; top: calc(-1 * max(.75rem, env(safe-area-inset-top))); z-index: 1; margin: 0 calc(-1 * var(--gutter)); padding: .75rem var(--gutter) 1rem; background: color-mix(in oklch, var(--background) 96%, transparent); }
  .mm-x { display: grid; }
  .mm-field { height: 3.1rem; padding-right: .35rem; }
  .mm-field input { font-size: 16px; }
  .mm-hint { margin-left: .4rem; }
  .mm-body { grid-template-columns: 1fr; }
  .mm-grid { grid-template-columns: 1fr; gap: .6rem; }
  .mm-card { grid-template-columns: 6.5rem 1fr; grid-template-rows: auto auto; column-gap: .9rem; row-gap: .15rem; padding: .75rem; align-items: center; }
  .mm-art { grid-row: span 2; height: 4.5rem; margin: 0; border: 1px solid var(--hair); border-radius: .8rem; }
  .mm-art svg { padding: .35rem .2rem .2rem; }
  .mm-go { display: none; }
  .mm-results { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-in, .mm-grid li { transition: none; transform: none; }
}

/* ---------- scroll scenes ---------- */
.scene { position: relative; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   1. HERO: the Computer turns on (scroll-scrubbed film, live screens pinned to the glass)
   The scene is always a dark stage, in both themes, so it redefines the dark tokens.
   ========================================================================== */
.cs {
  --background: #0b0910; --foreground: #f4f3f7; --muted-foreground: #b2a6c2; --text-ghost: #a28fb8; --link: #c4b5fd;
  --hl: linear-gradient(90deg, #a78bfa, #e879f9);
  --hair: color-mix(in oklch, #f4f3f7 9%, transparent); --tint: color-mix(in oklch, #f4f3f7 4.5%, transparent);
  --cs-bg: #0a0816;
  position: relative; height: 330vh; height: 330svh;
  background: var(--cs-bg); color: var(--foreground); color-scheme: dark;
}
.cs-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 45% at 50% 58%, color-mix(in oklch, #6b4cf0 16%, transparent), transparent 72%); }
.cs-fade { height: 40vh; margin-bottom: -26vh; position: relative; z-index: 1; pointer-events: none; background: linear-gradient(#0b0910, rgb(11 9 16 / .82) 30%, rgb(11 9 16 / .4) 62%, transparent); } /* eased, so the chat melts into the page with no seam */

.cs-stage {
  position: absolute; transform-origin: 50% 50%; will-change: transform;
  /* A soft ellipse, so the film's own vignette never reads as a box. */
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgb(0 0 0 / .55) 80%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, rgb(0 0 0 / .55) 80%, transparent 100%);
}
/* `lighten` drops the film's near-black backdrop into the stage colour, so no box shows. */
.cs-video, .cs-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: lighten; }
.cs-poster { transition: opacity .3s ease; }
.cs.ready .cs-poster { opacity: 0; }

/* ---- copy in the scene: big, scroll-revealed word by word ---- */
.cs-block { position: absolute; z-index: 3; }
.cs-h { letter-spacing: -0.022em; line-height: .98; text-wrap: balance; }
.cs-h .w { display: inline-block; will-change: transform, opacity, filter; }
.cs-h .wi { display: inline-block; }
.cs-h .hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
/* The gradient spans the whole headline; each word shows its own slice (set in JS). */
.cs-h .hl .w { background: var(--hl); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.cs-sub { will-change: transform, opacity; }

.cs-hero {
  left: max(var(--gutter), 6vw); top: 50%; transform: translateY(-46%);
  width: min(40rem, 46vw); text-align: left;
}
.hero-h { font-size: clamp(3rem, 5.7vw, 6rem); }
.cs-hero p.cs-sub { margin-top: 1.75rem; max-width: 30rem; font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.6; color: var(--muted-foreground); }
.cs-hero .cta-row { margin-top: 2.25rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; }

.cs-copy { top: 50%; transform: translateY(-50%); width: min(36rem, 40vw); visibility: hidden; }
.cs-copy.left { left: max(var(--gutter), 6vw); }
.cs-copy.right { right: max(var(--gutter), 6vw); }
.cs-copy .cs-h { font-size: clamp(2.75rem, 5.4vw, 5.75rem); }
.cs-copy p.cs-sub { margin-top: 1.5rem; max-width: 28ch; color: var(--muted-foreground); font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.55; }

.cs-end { left: 0; right: 0; top: calc(64px + 7vh); padding: 0 var(--gutter); text-align: center; visibility: hidden; pointer-events: none; }
.cs-end-h { font-size: clamp(3rem, 7.2vw, 7.5rem); }
.cs-end p.cs-sub { margin: 1.25rem auto 0; max-width: 34rem; color: var(--muted-foreground); font-size: clamp(1rem, 1.3vw, 1.25rem); }

/* where you are in the film; each tab jumps to its feature */
.cs-tabs { position: absolute; z-index: 4; left: 50%; bottom: max(28px, 4.5vh); transform: translateX(-50%); display: flex; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.cs-tabs.on { opacity: 1; visibility: visible; }
.cs-tabs button { position: relative; padding: .4rem 0; font: 500 .9375rem/1.2 var(--font-display); color: var(--muted-foreground); transition: color .2s ease; }
.cs-tabs button:hover { color: var(--foreground); }
.cs-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hl); transform-origin: left; transform: scaleX(var(--f, 0)); }
.cs-tabs button[aria-current="true"] { color: var(--foreground); }

@media (max-width: 760px) {
  .cs-hero { left: var(--gutter); right: var(--gutter); width: auto; top: calc(64px + 3vh); transform: none; text-align: center; }
  .hero-h { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .cs-hero p.cs-sub { margin: 1rem auto 0; font-size: .9375rem; }
  .cs-hero .cta-row { justify-content: center; margin-top: 1.4rem; }
  .cs-copy, .cs-copy.left, .cs-copy.right { left: var(--gutter); right: var(--gutter); width: auto; top: auto; transform: none; bottom: calc(6vh + env(safe-area-inset-bottom, 0px)); }
  .cs-copy .cs-h { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .cs-copy p.cs-sub { margin-top: .9rem; font-size: 1rem; }
  .cs-end { top: calc(64px + 4vh); }
  .cs-tabs { display: none; }
}

/* the first paint: words rise out of a blur once, on load */
@media (prefers-reduced-motion: no-preference) {
  .cs-hero .wi { animation: cs-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 70ms + 120ms); }
  .cs-hero .cs-sub { animation: cs-fade .8s ease both; animation-delay: .55s; }
  .cs-hero .cta-row.cs-sub { animation-delay: .7s; }
}
@keyframes cs-rise { from { opacity: 0; transform: translateY(.45em); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cs-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the hero's world: sky, light, work in progress ---------- */
.cs { --aura: #a78bfa; --aura-lift: color-mix(in oklch, #a78bfa 62%, #fff); }
.cs-sky { z-index: 0; }
.cs-glow { z-index: 0; }
.cs-stage { z-index: 1; mix-blend-mode: lighten; } /* the film's near-black backdrop drops away, so the sky shows through */
/* A pool of light the Computer stands in */
.cs-pool { position: absolute; left: 50%; top: 80%; width: 46%; height: 16%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(167 139 250 / .55), rgb(224 83 176 / .18) 55%, transparent); filter: blur(26px); }
@media (prefers-reduced-motion: no-preference) { .cs-pool { animation: hc-pool 6s ease-in-out infinite; } }
/* The headline glows a little, like the screen */
.hero-h .hl { filter: drop-shadow(0 8px 40px rgb(196 120 255 / .35)); }

/* Work cards floating around the Computer (js/hero-cards.js, placed by js/computer-scroll.js) */
.cs-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.wc {
  --d: 1;
  position: absolute; display: flex; align-items: flex-start; gap: .75rem; width: 17.5rem; padding: .8rem .95rem .85rem .8rem;
  border-radius: 1.1rem; background: rgb(24 20 34 / .62); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgb(244 243 247 / .1);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .06);
  transform: translate(-50%, -50%) translate(var(--fx, 0px), var(--fy, 0px)) translate(calc(var(--px, 0) * var(--d) * 16px), calc(var(--py, 0) * var(--d) * 11px));
  transition: border-color .5s ease, box-shadow .5s ease;
}
.wc img { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(11 9 16), 0 0 0 3.5px rgb(167 139 250 / .55); }
.wc > div { display: grid; gap: .15rem; min-width: 0; }
.wc b { font: 600 .875rem/1.2 var(--font-display); color: #f4f3f7; }
.wc span { font-size: .8125rem; line-height: 1.4; color: #c9bfd8; }
.wc-st { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font: 500 .75rem/1.2 var(--font-body); font-style: normal; color: #a28fb8; }
.wc-st svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wc-dots { display: inline-flex; gap: 3px; }
.wc-dots i { width: 4px; height: 4px; border-radius: 50%; background: #a78bfa; animation: hc-dot 1.2s ease-in-out infinite; }
.wc-dots i:nth-child(2) { animation-delay: .15s; } .wc-dots i:nth-child(3) { animation-delay: .3s; }
.wc.done { border-color: rgb(167 139 250 / .45); box-shadow: 0 24px 60px -24px rgb(0 0 0 / .8), 0 0 36px -10px rgb(167 139 250 / .55), inset 0 1px 0 rgb(255 255 255 / .08); }
.wc.done .wc-st { background: linear-gradient(90deg, #c4b5fd, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wc.done .wc-st svg { stroke: #e879f9; }
@media (prefers-reduced-motion: no-preference) {
  .wc { animation: wc-in 1s cubic-bezier(.2, .8, .2, 1) both, wc-float 7s ease-in-out infinite alternate; }
  .wc:nth-child(1) { animation-delay: .9s, 1.9s; }
  .wc:nth-child(2) { animation-delay: 1.2s, 2.4s; animation-duration: 1s, 8s; }
  .wc:nth-child(3) { animation-delay: 1.5s, 2.1s; animation-duration: 1s, 6.5s; }
}
@keyframes wc-in { from { opacity: 0; scale: .92; filter: blur(8px); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes wc-float { from { translate: 0 0; } to { translate: 0 -9px; } }

/* The team, under the buttons */
.cs-team { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.cs-faces { display: flex; flex: none; }
.cs-faces img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; margin-left: -.6rem; box-shadow: 0 0 0 2px #0b0910; transition: transform .3s var(--ease); }
.cs-faces img:first-child { margin-left: 0; }
.cs-team:hover .cs-faces img { transform: translateY(-3px); }
.cs-team:hover .cs-faces img:nth-child(2n) { transform: translateY(-1px); }
.cs-team p { margin: 0; max-width: 19rem; font-size: .875rem; line-height: 1.45; color: var(--muted-foreground); }
.cs-team b { color: var(--foreground); font-weight: 600; }
.cs.still .cs-cards { display: none; }
@media (max-width: 760px) {
  .cs-team { justify-content: center; margin-top: 1.4rem; gap: .7rem; }
  .cs-team p { font-size: .8125rem; text-align: left; max-width: 13rem; }
  .cs-faces img { width: 1.9rem; height: 1.9rem; }
}

/* ---------- Ask Modern: the chat on the Computer's screen ----------
   js/computer-scroll.js sizes .hc to the glass (then the window) and scales .hc-in, which is
   always laid out at full window size, down to fit. */
.hc {
  position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; visibility: hidden;
  transform-origin: 0 0; will-change: transform, width, height;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklch, #6b4cf0 26%, transparent), transparent 70%),
    radial-gradient(50% 40% at 85% 100%, color-mix(in oklch, #e053b0 12%, transparent), transparent 70%),
    #0b0910;
}
.hc-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; }
/* While it's still a screen: a faint CRT sheen and scanlines, gone by the time it fills the window. */
.hc-crt {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--crt, 1);
  background:
    repeating-linear-gradient(to bottom, rgb(255 255 255 / .05) 0 2px, transparent 2px 5px),
    radial-gradient(120% 100% at 50% 40%, transparent 55%, rgb(0 0 0 / .55));
  box-shadow: inset 0 0 60px rgb(140 100 255 / .35);
}
.hc-boot { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; opacity: 0; pointer-events: none; background: #fff; box-shadow: 0 0 18px 4px #c4b5fd, 0 0 60px 12px #8b5cf6; }
.hc-col { width: min(46rem, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.hc-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in oklch, #f4f3f7 18%, transparent) transparent; }
.hc-scroll > .hc-col { min-height: 100%; display: flex; flex-direction: column; padding-top: 88px; padding-bottom: 1.5rem; }
/* The welcome sits in the middle of the screen, then moves up out of the way once you ask. */
.hc-intro { margin: auto 0; text-align: center; transition: margin .5s var(--ease); }
.hc.has-log .hc-intro { margin: 0 0 1.5rem; }
/* The real logo, on a transparent background (assets/img/mai-logo.webp). */
.hc-logo { display: block; }
.hc-h { font-size: clamp(2.25rem, 4.4vw, 4rem); letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
.hc.has-log .hc-h { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.hc-p { margin: 1.1rem auto 0; max-width: 34rem; color: var(--muted-foreground); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; }
.hc.has-log .hc-p { display: none; }
.hc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.hc-chips button {
  padding: .6rem 1rem; border-radius: 999px; font-size: .875rem; color: var(--foreground);
  border: 1px solid color-mix(in oklch, #f4f3f7 14%, transparent); background: color-mix(in oklch, #f4f3f7 4%, transparent);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hc-chips button:hover { background: color-mix(in oklch, #a78bfa 16%, transparent); border-color: color-mix(in oklch, #a78bfa 45%, transparent); }
.hc-chips button:active { transform: scale(.97); }
.hc.has-log .hc-chips { display: none; }

.hc-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.hc-m { display: flex; gap: .85rem; align-items: flex-start; animation: hc-in .45s var(--ease) both; }
.hc-user { justify-content: flex-end; }
.hc-user .hc-b { max-width: 80%; padding: .7rem 1.05rem; border-radius: 1.25rem 1.25rem .4rem 1.25rem; background: color-mix(in oklch, #8b7bff 30%, #18141f); color: #fff; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-av { flex: none; width: 2.25rem; height: 2.25rem; margin-top: .05rem; border-radius: 50%; }
.hc-bot .hc-b { min-width: 0; padding-top: .3rem; font-size: 1rem; line-height: 1.65; color: color-mix(in oklch, #f4f3f7 92%, transparent); }
.hc-b p + p, .hc-b p + ul, .hc-b ul + p { margin-top: .7rem; }
.hc-b ul { margin: .55rem 0 0; padding-left: 1.15rem; display: grid; gap: .3rem; list-style: disc; }
.hc-b li::marker { color: #a78bfa; }
.hc-b b { color: #fff; font-weight: 600; }
.hc-b a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in oklch, #c4b5fd 40%, transparent); text-underline-offset: .2em; }
.hc-b a:hover { text-decoration-color: currentColor; }
.hc-caret { display: inline-block; width: .5em; height: 1.05em; margin-left: .15em; vertical-align: -.15em; border-radius: 2px; background: #c4b5fd; animation: hc-blink 1s steps(2) infinite; }
.hc-dots { display: inline-flex; gap: .3rem; padding: .55rem 0; }
.hc-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: #a78bfa; animation: hc-dot 1.2s ease-in-out infinite; }
.hc-dots i:nth-child(2) { animation-delay: .15s; } .hc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hc-blink { to { opacity: 0; } }
@keyframes hc-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.hc-form { flex: none; padding: .75rem 0 max(1.25rem, env(safe-area-inset-bottom)); }
.hc-field {
  position: relative; display: flex; align-items: flex-end; gap: .5rem; padding: .45rem .45rem .45rem 1.25rem; border-radius: 1.6rem;
  background: color-mix(in oklch, #f4f3f7 6%, #0b0910); border: 1px solid color-mix(in oklch, #f4f3f7 14%, transparent);
  box-shadow: 0 20px 50px -24px rgb(0 0 0 / .8), 0 0 0 0 transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.hc-field:focus-within { border-color: color-mix(in oklch, #a78bfa 60%, transparent); box-shadow: 0 20px 50px -24px rgb(0 0 0 / .8), 0 0 0 4px color-mix(in oklch, #a78bfa 18%, transparent); }
.hc-field textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: none; color: #f4f3f7;
  font: 400 1rem/1.5 var(--font-body); padding: .55rem 0; max-height: 160px;
}
.hc-field textarea::placeholder { color: color-mix(in oklch, #f4f3f7 45%, transparent); }
.hc-send { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--btn-fill); color: #fff; box-shadow: 0 8px 22px -10px #a78bfa; transition: opacity .2s ease, transform .2s ease, filter .2s ease; }
.hc-send svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-send:hover:not(:disabled) { filter: brightness(1.08); }
.hc-send:active:not(:disabled) { transform: scale(.94); }
.hc-send:disabled { opacity: .35; cursor: default; }
.hc-fine { margin-top: .65rem; text-align: center; font-size: .75rem; color: color-mix(in oklch, #f4f3f7 42%, transparent); }
.hc-fine a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* ---- the screen's atmosphere: the avatar sky from Computer's onboarding ----
   Ported from modern-computer app/src/styles/avatar.css (.avatar-sky) with the dark Modern theme's
   values: --aura is the primary violet, --chart-2 #6B4CF0, --void #07050b. Layers, back to front:
   light from above, three slow aura clouds, faint beams, a pool of light, rising motes, grain, vignette. */
.hc { --aura: #a78bfa; --aura-lift: color-mix(in oklch, #a78bfa 62%, #fff); background: #0b0910; }
.hc-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hc-sky > * { position: absolute; pointer-events: none; }
.hc-sky__wash {
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -18%, color-mix(in oklch, var(--aura) 36%, transparent), transparent 62%),
    radial-gradient(60% 40% at 12% 8%, color-mix(in oklch, var(--aura-lift) 14%, transparent), transparent 70%);
}
.hc-sky__clouds {
  inset: -10% -10% auto -10%; height: 980px; opacity: .78; filter: blur(80px) saturate(1.15);
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 35%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 65% 60% at 50% 35%, #000 30%, transparent 78%);
}
.hc-sky__clouds span { position: absolute; border-radius: 9999px; will-change: transform; }
.hc-sky__clouds span:nth-child(1) { width: 44rem; height: 30rem; left: 0%; top: 2%; background: radial-gradient(closest-side, var(--aura), transparent 72%); }
.hc-sky__clouds span:nth-child(2) { width: 40rem; height: 32rem; left: 40%; top: -6%; background: radial-gradient(closest-side, color-mix(in oklch, var(--aura) 55%, #6b4cf0), transparent 72%); }
.hc-sky__clouds span:nth-child(3) { width: 34rem; height: 26rem; right: -4%; top: 22%; background: radial-gradient(closest-side, var(--aura-lift), transparent 72%); opacity: .6; }
/* Faint rays fanning down from the top edge */
.hc-sky__beams {
  left: 50%; top: -40%; width: 160%; height: 120%; transform: translateX(-50%); opacity: .45;
  /* Each ray fades in and out (no hard stripe edges), then a blur softens them further. */
  background: repeating-conic-gradient(from 180deg at 50% 0%, transparent 0deg, color-mix(in oklch, var(--aura-lift) 8%, transparent) 3deg, transparent 6deg, transparent 11deg);
  filter: blur(10px);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 50% 70% at 50% 0%, #000 10%, transparent 70%);
}
/* A pool of light under the logo */
.hc-sky__floor { left: 50%; top: 220px; width: min(1100px, 140%); height: 340px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklch, var(--aura) 22%, transparent), transparent 70%); filter: blur(20px); }
.hc-sky__motes { inset: 0; }
.hc-sky__motes span {
  position: absolute; bottom: -12px; left: var(--x); width: var(--size); height: var(--size); border-radius: 9999px; opacity: 0;
  background: var(--aura-lift); box-shadow: 0 0 10px 1px color-mix(in oklch, var(--aura-lift) 60%, transparent);
}
.hc-sky__grain { inset: 0; opacity: .05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hc-sky__vignette { inset: 0; background: radial-gradient(120% 90% at 50% 20%, transparent 55%, color-mix(in oklch, #07050b 70%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .hc-sky__clouds span:nth-child(1) { animation: hc-drift-a 28s ease-in-out infinite alternate; }
  .hc-sky__clouds span:nth-child(2) { animation: hc-drift-b 34s ease-in-out infinite alternate; }
  .hc-sky__clouds span:nth-child(3) { animation: hc-drift-c 40s ease-in-out infinite alternate; }
  .hc-sky__beams { animation: hc-sway 26s ease-in-out infinite alternate; }
  .hc-sky__floor { animation: hc-pool 9s ease-in-out infinite; }
  .hc-sky__motes span { animation: hc-mote var(--dur) linear infinite; animation-delay: var(--delay); }
}
/* Phones and touch tablets: the chat window is redrawn as a 3D-warped, clipped shape on every scroll frame
   while it grows out of the glass. With an 80px-blurred cloud layer, blurred rotating beams, SVG noise and
   animated motes inside it, iOS Safari runs out of graphics memory and reloads the page. Here the sky is the
   still wash alone: same colours, nothing blurred, nothing animated. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .hc-sky__clouds, .hc-sky__beams, .hc-sky__grain, .hc-sky__motes { display: none; }
  .hc-sky__floor { animation: none; }
  .hc-sky__wash {
    background:
      radial-gradient(120% 70% at 50% -18%, color-mix(in oklch, var(--aura) 44%, transparent), transparent 62%),
      radial-gradient(70% 45% at 20% 12%, color-mix(in oklch, var(--aura-lift) 18%, transparent), transparent 70%),
      radial-gradient(60% 40% at 85% 30%, color-mix(in oklch, #6b4cf0 22%, transparent), transparent 70%);
  }
  .hc { will-change: transform; }
  .hc .hc-field { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(18 14 28 / .96); }
}
/* With reduced motion the motes rest mid-flight, faintly */
@media (prefers-reduced-motion: reduce) {
  .hc-sky__motes span { bottom: calc(var(--x) * .7 + 10%); opacity: .22; }
}
@keyframes hc-drift-a { to { transform: translate(8%, 10%) scale(1.12); } }
@keyframes hc-drift-b { to { transform: translate(-10%, 8%) scale(.9); } }
@keyframes hc-drift-c { to { transform: translate(-8%, -6%) scale(1.1); } }
@keyframes hc-sway { from { transform: translateX(-50%) rotate(-3deg); } to { transform: translateX(-50%) rotate(3deg); } }
@keyframes hc-pool { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes hc-mote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .55; } 70% { opacity: .35; } 100% { transform: translate3d(var(--drift), -720px, 0); opacity: 0; } }

/* The logo glows and breathes, with a slow spectrum halo turning behind it */
.hc-mark { position: relative; display: block; width: 8.5rem; height: 8.5rem; margin: 0 auto 1rem; }
.hc-mark::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #14a8f5, #6b4cf0, #e053b0, #f5a93c, #14a8f5);
  filter: blur(30px); opacity: .8; animation: hc-spin 9s linear infinite;
}
.hc-mark .hc-logo { width: 100%; height: 100%; margin: 0; animation: hc-breathe 5s ease-in-out infinite; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@keyframes hc-breathe { 50% { transform: scale(1.035); filter: brightness(1.12); } }
.hc.has-log .hc-mark { display: none; }

/* The highlight shimmers, slowly */
.hc-h .hl { background: linear-gradient(90deg, #a78bfa, #e879f9, #f0abfc, #a78bfa) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hc-shimmer 8s linear infinite; }
@keyframes hc-shimmer { to { background-position: -300% 0; } }

/* Chips: glass, an icon, and a gradient edge on hover */
.hc-chips { gap: .65rem; }
.hc-chips button {
  position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem .7rem .9rem;
  background: color-mix(in oklch, #f4f3f7 5%, rgb(11 9 16 / .6)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hc-chips button svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: #c4b5fd; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease, transform .3s var(--ease); }
.hc-chips button::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, #8b7bff, #e879f9, #f5a93c); opacity: 0; transition: opacity .25s ease; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hc-chips button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px #a78bfa; }
.hc-chips button:hover::before { opacity: 1; }
.hc-chips button:hover svg { stroke: #f0abfc; transform: scale(1.1); }

/* The composer: a turning spectrum edge and a glow underneath, brighter while you type */
@property --hc-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.hc-field { border-color: transparent; background: rgb(18 14 28 / .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hc-field::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--hc-a), rgb(167 139 250 / .25), #8b7bff, #e879f9, #f5a93c, #14a8f5, rgb(167 139 250 / .25) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; animation: hc-turn 6s linear infinite; transition: opacity .3s ease;
}
.hc-field::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -14px; height: 28px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: linear-gradient(90deg, #6b4cf0, #e053b0, #14a8f5); filter: blur(22px); opacity: .35; transition: opacity .3s ease;
}
.hc-field:focus-within { border-color: transparent; box-shadow: 0 20px 50px -24px rgb(0 0 0 / .8); }
.hc-field:focus-within::before { opacity: 1; }
.hc-field:focus-within::after { opacity: .7; }
@keyframes hc-turn { to { --hc-a: 360deg; } }
.hc-send:not(:disabled) { box-shadow: 0 0 0 0 rgb(167 139 250 / .5), 0 8px 22px -10px #a78bfa; animation: hc-ready 2s ease-out infinite; }
@keyframes hc-ready { 0% { box-shadow: 0 0 0 0 rgb(167 139 250 / .45), 0 8px 22px -10px #a78bfa; } 100% { box-shadow: 0 0 0 12px rgb(167 139 250 / 0), 0 8px 22px -10px #a78bfa; } }

/* Answers: the avatar's halo turns while it's thinking */
.hc-bot { position: relative; }
.hc-bot.pending .hc-av { animation: hc-think 1.4s ease-in-out infinite; }
@keyframes hc-think { 50% { box-shadow: 0 0 0 4px rgb(167 139 250 / .25), 0 0 24px 4px rgb(232 121 249 / .45); } }
.hc-user .hc-b { background: linear-gradient(135deg, color-mix(in oklch, #8b7bff 55%, #18141f), color-mix(in oklch, #c084fc 40%, #18141f)); box-shadow: 0 14px 30px -18px #a78bfa; }

@media (prefers-reduced-motion: reduce) {
  .hc-mark::before, .hc-mark .hc-logo, .hc-h .hl, .hc-field::before, .hc-send:not(:disabled) { animation: none; }
}
@media (max-width: 760px) {
  .hc-mark { width: 6.5rem; height: 6.5rem; margin-bottom: .75rem; }
  .hc-chips button { padding: .6rem .95rem .6rem .8rem; }
}

/* Reduced motion: no film or push-in. The chat simply sits open, full screen, under the headline. */
.cs.still { height: auto; }
.cs.still .cs-pin { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; }
.cs.still .cs-stage, .cs.still .cs-glow { display: none; }
.cs.still .cs-hero { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: 46rem; margin: 0 auto; padding: 8rem var(--gutter) 2rem; text-align: center; }
.cs.still .cs-hero .cta-row { justify-content: center; }
.cs.still .cs-hero p.cs-sub { margin-left: auto; margin-right: auto; }
.cs.still .hc { position: relative; visibility: visible; width: 100%; height: 100vh; height: 100svh; }
.cs.still .hc-in { width: 100%; height: 100%; }
.cs.still .hc-crt { display: none; }

@media (max-width: 760px) {
  .hc-scroll > .hc-col { padding-top: 76px; }
  /* Suggested questions: one row you swipe, not a stack */
  .hc-chips { gap: .4rem; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; padding: .3rem 0 .5rem; scroll-padding-inline: 0;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .hc-chips::-webkit-scrollbar { display: none; }
  .hc-chips button { flex: none; white-space: nowrap; scroll-snap-align: start; font-size: .8125rem; padding: .55rem .85rem; }
  .hc-user .hc-b { max-width: 88%; }
  .hc-field textarea { font-size: 16px; } /* no zoom on focus in iOS */
}

/* the live screen: a fixed 960x700 canvas that JS corner-pins onto the tracked glass */
.x-screen { position: absolute; left: 0; top: 0; width: 960px; height: 700px; transform-origin: 0 0; mix-blend-mode: screen; pointer-events: none; opacity: 0; }
.x-glass { position: absolute; inset: 3.5% 3%; border-radius: 9% / 12%; overflow: hidden; background: radial-gradient(120% 100% at 50% 40%, rgba(70, 40, 200, .35), rgba(10, 6, 40, .2) 70%); }
.x-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 5px); }
.x-ex { position: absolute; inset: 0; opacity: 0; color: #E6E0FF; }
.x-screen h4, .x-screen h5, .x-screen h6 { margin: 0; }
.x-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* ---------- On-screen app recreations (boilerplate data) ---------- */
  .x-ex { padding: 0; text-shadow: 0 0 6px rgba(150, 110, 255, .35); font-family: var(--font-body); }
  .x-app { position: absolute; inset: 0; display: grid; grid-template-columns: 198px 1fr; color: #ECE8FF;
    background: radial-gradient(120% 90% at 70% 0%, #2a1f63 0%, #160f3a 45%, #0d0a24 100%); }
  .x-side { margin: 10px 0 10px 10px; padding: 12px 10px 10px; border-radius: 18px; border: 1.5px solid rgba(190,170,255,.22);
    background: linear-gradient(180deg, rgba(70,45,150,.55) 0%, rgba(25,15,60,.6) 45%, rgba(12,8,30,.7) 100%); display: flex; flex-direction: column; min-height: 0; }
  .x-seg { display: flex; padding: 3px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); margin-bottom: 8px; }
  .x-seg span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 0; border-radius: 999px; font-size: 13px; color: #b9b1e6; border: 1.5px solid transparent; }
  .x-seg span.x-on { color: #fff; font-weight: 600; background: rgba(123,92,255,.28); border-color: rgba(170,150,255,.55); }
  .x-seg svg { width: 13px; height: 13px; }
  .x-side .x-sec { font-size: 11.5px; color: #a9a1d6; margin: 7px 8px 2px; display: flex; align-items: center; gap: 5px; }
  .x-side .x-sec .x-dot { width: 4px; height: 4px; border-radius: 50%; background: #FF9A3C; }
  .x-side .x-it { display: flex; align-items: center; gap: 9px; height: 26px; padding: 0 8px; border-radius: 8px; font-size: 13.5px; color: #D2CCF2; border: 1.5px solid transparent; position: relative; }
  .x-side .x-it svg { width: 15px; height: 15px; flex: none; stroke: #c8c1ee; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .x-side .x-it.x-on { background: rgba(123,92,255,.28); border-color: rgba(170,150,255,.55); color: #fff; }
  .x-side .x-it.x-on svg { stroke: #fff; }
  .x-side .x-it .x-badge { margin-left: auto; width: 15px; height: 15px; border-radius: 50%; background: #8f6bff; color: #fff; font-size: 9.5px; display: grid; place-items: center; font-weight: 600; }
  .x-side .x-foot { margin-top: auto; border-top: 1.5px solid rgba(255,255,255,.08); padding-top: 6px; }
  .x-side .x-foot .x-it .x-col { margin-left: auto; }
  .x-side .x-me { display: flex; align-items: center; gap: 8px; padding: 6px 6px 2px; }
  .x-side .x-me .x-av { width: 26px; height: 26px; font-size: 10px; }
  .x-side .x-me b { display: block; font-size: 12.5px; font-weight: 500; color: #fff; }
  .x-side .x-me small { display: block; font-size: 10.5px; color: #a9a1d6; }
  .x-side .x-ver { font-family: var(--font-mono); font-size: 9.5px; color: #a9a1d6; padding: 3px 8px 0; }
  .x-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #fff; flex: none; }
  .x-av.x-jl { background: linear-gradient(135deg, #2EA8FF, #7B5CFF); }
  .x-av.x-mc { background: linear-gradient(135deg, #FF9A3C, #FF4FD8); }
  .x-av.x-ag { background: radial-gradient(circle at 35% 30%, #9cf, #3a2bd1 60%, #12093d); box-shadow: 0 0 0 2px rgba(124,245,196,.6); }
  .x-av.x-sky { background: radial-gradient(circle at 50% 35%, #ffd9a8, #e9915a 55%, #7a3d6e); }
  .x-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
  .x-top { height: 74px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 26px; }
  .x-top h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 32px; }
  .x-top .x-search { margin-left: auto; width: 240px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.12); color: #8f87bf; font-size: 15px; }
  .x-content { position: relative; flex: 1; padding: 0 22px 22px; min-height: 0; }
  .x-cursor { position: absolute; width: 26px; height: 32px; left: 0; top: 0; opacity: 0; z-index: 5; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
  .x-cursor .x-ring { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
  .x-caret { display: inline-block; width: 3px; height: 1em; background: #fff; vertical-align: -0.12em; margin-left: 2px; }

  /* Create */
  .x-cr-hero { border-radius: 22px; padding: 26px 28px 22px; border: 1.5px solid rgba(190,160,255,.28);
    background: linear-gradient(135deg, rgba(110,80,200,.45), rgba(60,30,110,.35)); }
  .x-cr-hero h5 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -.01em; }
  .x-cr-prompt { margin: 14px 0 16px; font-size: 22px; color: #fff; min-height: 30px; }
  .x-cr-prompt.x-ph { color: #9c93cf; }
  .x-cr-attach { display: inline-block; padding: 9px 16px; border: 1.5px dashed rgba(200,180,255,.4); border-radius: 12px; color: #c2b8f0; font-size: 15px; }
  .x-cr-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1.5px solid rgba(255,255,255,.1); }
  .x-cr-row b { color: #b49cff; font-size: 17px; margin-right: 4px; }
  .x-dd { padding: 8px 14px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.16); font-size: 16px; background: rgba(255,255,255,.04); transition: border-color .2s, background .2s; }
  .x-dd.x-hot { border-color: #a58bff; background: rgba(123,92,255,.3); }
  .x-cr-make { margin-left: auto; padding: 12px 22px; border-radius: 14px; background: linear-gradient(135deg, #7B5CFF, #b04fd8); font-weight: 600; font-size: 18px; transition: transform .1s; }
  .x-cr-prog { margin-top: 14px; height: 0; overflow: hidden; }
  .x-cr-prog .x-lbl { display: flex; justify-content: space-between; font-size: 15px; color: #cfc6ff; }
  .x-cr-prog .x-bar { margin-top: 8px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
  .x-cr-prog .x-bar span { display: block; height: 100%; width: 0; background: var(--spectrum); }
  .x-cr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
  .x-cr-card { border-radius: 16px; border: 1.5px solid rgba(255,255,255,.1); background: rgba(40,25,90,.5); overflow: hidden; transition: border-color .2s; }
  .x-cr-card.x-hot { border-color: #b49cff; }
  .x-cr-card .x-art { height: 92px; position: relative; background: rgba(90,60,170,.35); }
  .x-cr-card .x-t { padding: 10px 12px 12px; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
  .x-art.x-img::before { content: ""; position: absolute; left: 34%; top: 14px; width: 32%; height: 64px; border-radius: 9px; background: linear-gradient(135deg, #c9b6ff, #8a6bff); box-shadow: -22px 6px 0 -4px #e7a46a, 22px 6px 0 -4px #d872b8; }
  .x-art.x-vid::before { content: ""; position: absolute; left: 14%; right: 14%; top: 16px; height: 50px; border-radius: 9px; background: linear-gradient(90deg, #6a4fc0, #c86fd0); }
  .x-art.x-vid::after { content: "0:15"; position: absolute; right: 18%; top: 44px; font-size: 11px; background: #0008; padding: 1px 5px; border-radius: 4px; }
  .x-art.x-chart { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 12px; }
  .x-art.x-chart i { width: 9px; border-radius: 3px; background: #a993ff; }
  .x-art.x-chart i:nth-child(5) { background: #e47cc7; }
  .x-art.x-pdf::before { content: ""; position: absolute; left: 36%; top: 12px; width: 28%; height: 80px; border-radius: 5px 5px 0 0; background: linear-gradient(#f3efff 0 18%, #e9c3ea 18% 34%, #f3efff 34%); }

  /* Group chat */
  .x-gc { display: grid; grid-template-columns: 236px 1fr; gap: 14px; height: 100%; }
  .x-panel { border-radius: 20px; border: 1.5px solid rgba(255,255,255,.1); background: rgba(20,12,50,.55); overflow: hidden; display: flex; flex-direction: column; }
  .x-conv h6 { margin: 0; padding: 16px 16px 10px; font-family: var(--font-display); font-weight: 600; font-size: 22px; }
  .x-tabs { display: flex; gap: 4px; margin: 0 12px 10px; padding: 4px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.1); font-size: 13px; }
  .x-tabs span { flex: 1; text-align: center; padding: 5px 0; border-radius: 999px; color: #b9b1e6; }
  .x-tabs span.x-on { background: rgba(255,255,255,.1); color: #fff; }
  .x-conv .x-lbl { font-size: 12px; letter-spacing: .08em; color: #8f87bf; padding: 6px 16px; }
  .x-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 15px; }
  .x-row.x-on { background: rgba(123,92,255,.2); }
  .x-row small { display: block; color: #9c93cf; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  .x-chat-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1.5px solid rgba(255,255,255,.08); }
  .x-chat-h b { font-family: var(--font-display); font-size: 22px; display: block; }
  .x-chat-h small { color: #9c93cf; font-size: 13px; }
  .x-chat-h .x-call { margin-left: auto; padding: 7px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.14); font-size: 14px; }
  .x-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 12px 18px; overflow: hidden; min-height: 0; }
  .x-msg { display: flex; gap: 10px; align-items: flex-start; }
  .x-msg .x-who { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
  .x-msg .x-who em { font-style: normal; font-weight: 500; font-size: 11px; color: #7CF5C4; border: 1px solid rgba(124,245,196,.5); border-radius: 6px; padding: 0 5px; margin-left: 6px; }
  .x-msg .x-who time { font-weight: 400; color: #8f87bf; font-family: var(--font-mono); font-size: 12px; margin-left: 6px; }
  .x-bubble { padding: 10px 14px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); font-size: 15px; line-height: 1.4; }
  .x-work { margin-top: 8px; padding: 9px 12px; border-radius: 11px; background: rgba(123,92,255,.2); font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; }
  .x-work span:last-child { color: #7CF5C4; }
  .x-dots { display: inline-flex; gap: 5px; padding: 12px 14px; }
  .x-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c8bfff; animation: x-bob 1s infinite; }
  .x-dots i:nth-child(2) { animation-delay: .15s; } .x-dots i:nth-child(3) { animation-delay: .3s; }
  @keyframes x-bob { 50% { transform: translateY(-4px); opacity: .5; } }
  .x-composer { margin: 0 14px 14px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.12); font-size: 15px; color: #9c93cf; display: flex; align-items: center; }
  .x-composer .x-send { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; background: rgba(123,92,255,.6); transition: transform .1s; }
  .x-composer.x-typing { color: #fff; }
  .x-hide { display: none !important; }

  /* Avatar */
  .x-avpage { position: absolute; inset: 0; background:
      radial-gradient(60% 55% at 30% 35%, rgba(150, 100, 30, .55), transparent 70%),
      radial-gradient(50% 50% at 75% 30%, rgba(140, 50, 110, .45), transparent 70%), #120b22; }
  .x-av-tabs { display: flex; justify-content: center; gap: 26px; padding-top: 18px; font-size: 16px; color: #d8c9b8; font-family: var(--font-display); font-weight: 500; }
  .x-av-tabs span.x-on { color: #fff; border-bottom: 2px solid #ff9db5; padding-bottom: 4px; }
  .x-away { margin: 14px auto 0; width: fit-content; font-size: 14px; color: #d8c9b8; }
  .x-away b { color: #fff; font-weight: 500; } .x-away a { color: #ffbe6e; margin-left: 8px; }
  .x-intro { position: absolute; left: 0; right: 0; top: 112px; text-align: center; }
  .x-portrait { width: 132px; height: 132px; margin: 0 auto; border-radius: 50%; position: relative; border: 3px solid #e9a45a; box-shadow: 0 0 0 9px rgba(233,164,90,.15), 0 0 40px rgba(233,164,90,.4);
    background: radial-gradient(circle at 50% 38%, #f6d4b0 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #2b2440 0 45%, transparent 46%), #f4ead8; overflow: hidden; }
  .x-portrait::before { content: ""; position: absolute; left: 33%; top: 9%; width: 34%; height: 18%; border-radius: 50% 50% 30% 30%; background: #4b3424; }
  .x-intro h5 { margin: 18px 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: 1; }
  .x-intro h5 span { background: linear-gradient(90deg, #ffbe6e, #ff7db5); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .x-intro p { margin: 0; color: #d8c9b8; font-size: 16px; }
  .x-chips { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .x-chips span { padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.14); font-size: 13.5px; color: #eee; }
  .x-av-head { position: absolute; left: 28px; top: 62px; display: flex; align-items: center; gap: 12px; opacity: 0; }
  .x-av-head .x-av { width: 46px; height: 46px; }
  .x-av-head b { font-family: var(--font-display); font-size: 24px; display: block; }
  .x-av-head small { color: #d8c9b8; font-size: 13px; }
  .x-av-chat { position: absolute; left: 60px; right: 60px; bottom: 128px; display: flex; flex-direction: column; gap: 16px; }
  .x-ubub { align-self: flex-end; padding: 12px 18px; border-radius: 18px; background: rgba(120, 75, 40, .75); border: 1.5px solid rgba(255,190,120,.35); font-size: 18px; }
  .x-areply { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.45; max-width: 92%; }
  .x-av-composer { position: absolute; left: 60px; right: 60px; bottom: 26px; padding: 15px 20px; border-radius: 999px; border: 1.5px solid rgba(233,164,90,.6); background: rgba(30,20,30,.6); font-size: 17px; color: #b8a99a; display: flex; align-items: center; }
  .x-av-composer.x-typing { color: #fff; }
  .x-av-composer .x-send { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); transition: transform .1s; }

/* ==========================================================================
   2. GROUP CHAT: people and agents in one thread
   ========================================================================== */
.gc { position: relative; height: 620vh; height: 620svh; }
.gc-pin { display: flex; align-items: center; padding-top: 64px; }
.gc-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 70% 55%, color-mix(in oklch, #6b4cf0 16%, transparent), transparent 72%); }
.gc-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }

.gc-copy { position: relative; min-height: 24rem; }
.beat { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; will-change: transform, opacity, filter; }
.beat + .beat { opacity: 0; visibility: hidden; }
.beat-h { font-size: clamp(2.5rem, 4.5vw, 4.6rem); line-height: 1; letter-spacing: -0.022em; }
.beat-p { margin-top: 1.4rem; max-width: 26rem; color: var(--muted-foreground); font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.6; }
.beat-dots { position: absolute; left: 0; bottom: -1rem; display: flex; gap: .4rem; }
.beat-dots li { width: 1.75rem; height: 3px; border-radius: 3px; background: color-mix(in oklch, var(--foreground) 14%, transparent); transition: background .3s ease, width .3s var(--ease); }
.beat-dots li.on { width: 2.75rem; background: var(--hl); }

/* the thread: a product moment, so it gets a window */
.thread {
  display: flex; flex-direction: column; height: min(78vh, 660px); height: min(78svh, 660px);
  border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--hair);
  background: color-mix(in oklch, var(--card) 90%, transparent);
  box-shadow: 0 50px 100px -50px color-mix(in oklch, #6b4cf0 50%, transparent), var(--e3);
}
.th-head { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--hair); }
.th-title { display: grid; gap: .05rem; min-width: 0; }
.th-title b { font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.th-title span { font-size: .75rem; color: var(--muted-foreground); }
.th-stack { display: flex; margin-left: auto; }
.sf { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--card); background: #0d0b17; }
.sf + .sf { margin-left: -.5rem; }
.ini { display: inline-grid; place-items: center; font: 600 .625rem/1 var(--font-display); background: color-mix(in oklch, var(--c) 34%, var(--background)); color: color-mix(in oklch, var(--c) 30%, var(--foreground)); }
.th-call { flex: none; }
.th-view { position: relative; flex: 1; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 2.5rem); mask: linear-gradient(transparent, #000 2.5rem); }
.th-list { position: absolute; left: 0; right: 0; top: 0; padding: 1rem 1.1rem 0; will-change: transform; }

.gm { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .7rem; align-items: start; margin-bottom: 1.1rem; }
.gf { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; background: #0d0b17; font-size: .75rem; }
.gm-body { min-width: 0; }
.gm-who { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; font: 600 .875rem/1.2 var(--font-display); }
.chip { font: 500 .6875rem/1 var(--font-body); padding: .2rem .45rem; border-radius: 999px; color: var(--link); background: color-mix(in oklch, #a78bfa 14%, transparent); }
.gm-who time { font: 400 .6875rem/1 var(--font-mono); color: var(--text-ghost); }
.bub { display: inline-block; max-width: 34rem; padding: .6rem .85rem; border-radius: .25rem 1rem 1rem 1rem; background: var(--tint); border: 1px solid var(--hair); font-size: .9375rem; line-height: 1.45; }
.bub b { font-weight: 600; color: var(--link); }
.gm.me { grid-template-columns: minmax(0, 1fr) 2.25rem; }
.gm.me .gf { order: 2; }
.gm.me .gm-body { text-align: right; }
.gm.me .gm-who { justify-content: flex-end; }
.gm.me .bub { border-radius: 1rem .25rem 1rem 1rem; background: color-mix(in oklch, #8b7bff 26%, transparent); border-color: color-mix(in oklch, #a78bfa 30%, transparent); text-align: left; }
.gm.sys { display: flex; justify-content: center; gap: .45rem; font-size: .8125rem; color: var(--muted-foreground); padding: .25rem 0 1rem; }
.gm.sys span { color: var(--ok); }

.card { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; max-width: 26rem; padding: .7rem .8rem; border-radius: .875rem; border: 1px solid var(--hair); background: color-mix(in oklch, var(--background) 45%, transparent); text-align: left; }
.card b { display: block; font: 600 .875rem/1.3 var(--font-display); }
.card span { font-size: .75rem; color: var(--muted-foreground); }
.c-mission { justify-content: space-between; }
.mini { display: flex; }
.mini img { width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.mini img + img { margin-left: -.45rem; }
.pg { position: relative; display: flex; flex-direction: column; gap: 5px; width: 8.5rem; height: 5.6rem; padding: .6rem; border-radius: .5rem; overflow: hidden; }
.pg-a { background: linear-gradient(150deg, #14a8f5, #6b4cf0); }
.pg-b { background: linear-gradient(150deg, #8a2be8, #e053b0 70%, #f5a93c); }
.pg i { display: block; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .75); width: 70%; }
.pg i:nth-child(2) { width: 50%; opacity: .7; } .pg i:nth-child(3) { width: 40%; height: 14px; margin-top: auto; border-radius: 999px; opacity: .9; }
.pg em { position: absolute; right: .5rem; top: .4rem; font: 600 .875rem/1 var(--font-display); font-style: normal; color: #fff; }
.pg.sm { width: 4.4rem; height: 3rem; padding: .4rem; flex: none; }
.pg.sm i { height: 4px; } .pg.sm i:nth-child(2) { height: 8px; margin-top: auto; }
.flag { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font: 700 .875rem/1 var(--font-body); color: var(--warn) !important; background: color-mix(in oklch, var(--warn) 16%, transparent); }
.c-ads { flex-direction: column; align-items: stretch; }
.ads { display: flex; align-items: flex-end; gap: .5rem; }
.ad { border-radius: .4rem; height: 5rem; }
.ad.r1 { aspect-ratio: 1; background: linear-gradient(140deg, #6b4cf0, #e053b0); }
.ad.r2 { aspect-ratio: 4 / 5; background: linear-gradient(140deg, #14a8f5, #6b4cf0); }
.ad.r3 { aspect-ratio: 9 / 16; background: linear-gradient(140deg, #e053b0, #f5a93c); }
.acts { display: flex; gap: .5rem; margin-top: .7rem; }
.acts .btn { pointer-events: none; }
.approve { transition: transform .15s ease, filter .2s ease; }
.approve.pressed { transform: scale(.94); }
.approve.done { background: color-mix(in oklch, var(--ok) 16%, transparent); color: var(--ok); box-shadow: none; }

.th-compose { display: flex; align-items: center; gap: .75rem; margin: .5rem .9rem .9rem; padding: .7rem .7rem .7rem 1.1rem; border-radius: 999px; border: 1px solid color-mix(in oklch, #a78bfa 30%, transparent); font-size: .9375rem; color: var(--text-ghost); }
.th-compose.typing { color: var(--foreground); border-color: #a78bfa; }
.th-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.th-send { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--btn-fill); }
.th-send svg { width: .9rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .gc-pin { align-items: flex-start; padding-top: calc(64px + 2svh); }
  .gc-grid { grid-template-columns: 1fr; gap: 1rem; }
  .gc-copy { min-height: 10.5rem; }
  .beat { top: 0; translate: none; }
  .beat-h { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .beat-p { margin-top: .7rem; font-size: .9375rem; }
  .beat-dots { bottom: -.25rem; }
  .thread { height: calc(100svh - 64px - 2svh - 12rem - 1rem); }
  .th-call { display: none; }
  .th-stack .sf:nth-child(n+5) { display: none; }
  .bub { font-size: .875rem; }
  .pg { width: 6.5rem; height: 4.4rem; }
  .ad { height: 3.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gc { height: auto; }
  .gc .gc-pin { position: relative; height: auto; padding: 6rem 0; }
  .gc-copy { min-height: 0; display: grid; gap: 2.5rem; }
  .beat, .beat + .beat { position: static; translate: none; opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; }
  .beat-h { font-size: clamp(1.8rem, 3vw, 2.6rem); }
  .beat-dots { display: none; }
}

/* ==========================================================================
   3. HOW IT WORKS
   ========================================================================== */
.how { height: 560vh; height: 560svh; }
.anchor { position: absolute; top: 0; }
.how .pin { display: flex; align-items: center; padding-top: 64px; }
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.how-copy { position: relative; }
.steps { margin-top: 2.5rem; display: grid; gap: .25rem; }
.steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; padding: .85rem 0; opacity: .38; transition: opacity .35s ease; }
.steps li.on { opacity: 1; }
.step-n { font: 600 .8125rem/1.9 var(--font-display); color: var(--text-ghost); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); transition: background .35s ease, color .35s ease, border-color .35s ease; }
.steps li.on .step-n { background: var(--btn-fill); color: #fff; border-color: transparent; }
.steps h3 { font: 600 1.1875rem/1.3 var(--font-display); letter-spacing: -0.013em; }
.steps p { margin-top: .3rem; font-size: .9375rem; color: var(--muted-foreground); max-width: 28rem; }
.step-bar { position: absolute; left: calc(1rem - .5px); top: calc(100% - 100%); display: none; }

/* the product moment */
.app {
  position: relative; border-radius: 1.125rem; overflow: hidden;
  background: color-mix(in oklch, var(--card) 88%, transparent);
  border: 1px solid var(--hair);
  box-shadow: 0 40px 80px -40px color-mix(in oklch, #6b4cf0 45%, transparent), var(--e3);
}
.app-top { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid var(--hair); }
.app-title { display: flex; align-items: center; gap: .6rem; font: 500 .9375rem/1 var(--font-display); }
.app-dot { width: .9rem; height: .9rem; border-radius: 4px; background: var(--btn-fill); }
.app-body { position: relative; padding: 1.5rem 1.5rem 1.25rem; min-height: 32rem; }
.st { position: absolute; inset: 1.5rem 1.5rem 1.25rem; transition: opacity .4s ease, transform .4s var(--ease); }
.st-compose { display: flex; flex-direction: column; justify-content: center; }
.st-hi { font: 600 clamp(1.25rem, 2vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -0.015em; max-width: 18ch; }
.composer {
  position: relative; margin-top: 1.5rem; min-height: 6.5rem; padding: 1rem 3.75rem 1rem 1.15rem; border-radius: 1.125rem;
  border: 1px solid color-mix(in oklch, #a78bfa 36%, transparent);
  background: color-mix(in oklch, #a78bfa 6%, transparent);
  font-size: 1rem; line-height: 1.55;
}
.caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em; background: #a78bfa; }
.send { position: absolute; right: .75rem; bottom: .75rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--btn-fill); opacity: .4; transition: opacity .3s ease; }
.send.ready { opacity: 1; }
.send svg { width: 1rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.st-mission { opacity: 0; transform: translateY(8px); }
.m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; }
.m-name { font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -0.018em; }
.m-sub { margin-top: .2rem; font-size: .8125rem; color: var(--muted-foreground); }
.m-sub b { font-weight: 500; color: var(--foreground); }
.m-state { font-size: .75rem; font-weight: 500; padding: .3rem .65rem; border-radius: 999px; background: var(--tint); color: var(--muted-foreground); transition: background .3s ease, color .3s ease; white-space: nowrap; }
.m-state.live { color: var(--ok); background: color-mix(in oklch, var(--ok) 12%, transparent); }
.m-state.done { color: var(--link); background: color-mix(in oklch, #a78bfa 14%, transparent); }

.tickets li {
  position: relative; display: grid; grid-template-columns: 1fr auto 3.25rem 6.5rem; align-items: center; gap: .6rem;
  padding: .72rem 0; border-top: 1px solid var(--hair);
  font-size: .875rem; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s var(--ease);
}
.tickets li.in { opacity: 1; transform: none; }
.tickets li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%; background: linear-gradient(99deg, #714dff, #9c83ff 30%, #e770ff 75%); transform-origin: left; transform: scaleX(var(--b, 0)); opacity: .9; }
.tickets .face, .tickets .t-who, .tickets .t-st { opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s var(--ease); }
.tickets li.asg .face, .tickets li.asg .t-who, .tickets li.asg .t-st { opacity: 1; transform: none; }
.t-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-who { font-size: .8125rem; color: var(--muted-foreground); }
.t-st { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted-foreground); justify-self: end; }
.t-st i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-ghost); transition: background .3s ease; }
.t-st em { font-style: normal; }
.tickets li.work .t-st { color: var(--ok); }
.tickets li.work .t-st i { background: var(--ok); }
.tickets li.done .t-st { color: var(--link); }
.tickets li.done .t-st i { background: none; width: auto; height: auto; }
.tickets li.done .t-st i::before { content: "✓"; font-style: normal; font-family: var(--font-body); }

.review { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s var(--ease); }
.review.in { opacity: 1; transform: none; }
.deliv { display: flex; gap: .5rem; margin-bottom: .9rem; }
.dv { position: relative; height: 3.4rem; border-radius: .5rem; overflow: hidden; background: var(--tint); flex: 1; display: grid; place-items: center; }
.dv-page { flex: 1.6; display: flex; flex-direction: column; gap: 4px; align-items: stretch; padding: .5rem; }
.dv-page b { height: 9px; width: 60%; border-radius: 3px; background: color-mix(in oklch, #a78bfa 50%, transparent); }
.dv-page i, .dv-mail i { height: 4px; border-radius: 2px; background: color-mix(in oklch, var(--foreground) 14%, transparent); }
.dv-page i:last-child { width: 70%; }
.dv-ad.a1 { background: linear-gradient(140deg, #6b4cf0, #e053b0); }
.dv-ad.a2 { background: linear-gradient(140deg, #14a8f5, #6b4cf0); }
.dv-ad.a3 { background: linear-gradient(140deg, #e053b0, #f5a93c); }
.dv-vid { background: linear-gradient(140deg, #1e1aa0, #8a2be8); }
.dv-vid svg { width: 1.1rem; fill: #fff; }
.dv-mail { flex: 1.2; display: flex; flex-direction: column; gap: 4px; padding: .55rem; }
.dv-mail b { height: 6px; width: 40%; border-radius: 3px; background: color-mix(in oklch, #e879f9 55%, transparent); }
.review-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.receipt { font-size: .75rem; color: var(--muted-foreground); }

@media (max-width: 900px) {
  .how .pin { align-items: flex-start; padding-top: calc(64px + 2svh); }
  .how-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .how-copy .h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .steps { margin-top: 1rem; min-height: 6.4rem; position: relative; }
  .steps li { position: absolute; inset: 0 0 auto; opacity: 0; padding: .4rem 0; transition: opacity .3s ease; }
  .steps li.on { opacity: 1; }
  .steps p { font-size: .875rem; }
  .app { min-height: 0; }
  .app-body { min-height: 27rem; padding: 1rem; }
  .st { inset: 1rem; }
  .tickets li { grid-template-columns: 1fr auto 5.5rem; font-size: .8125rem; padding: .6rem 0; }
  .tickets .t-who { display: none; }
  .m-name { font-size: 1.25rem; }
  .deliv { display: none; }
}

/* ==========================================================================
   3b. MEET YOUR NEW TEAM: the stack bursts into the whole team
   ========================================================================== */
.wall { position: relative; height: 560vh; height: 560svh; }
.wall-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 40% at 50% 62%, color-mix(in oklch, #6b4cf0 15%, transparent), transparent 72%); }
.wall-head { position: absolute; z-index: 20; left: 0; right: 0; top: calc(64px + 4vh); padding: 0 var(--gutter); text-align: center; transform-origin: 50% 40%; pointer-events: none; }
.wall-h { font-size: clamp(2.8rem, 6.4vw, 6rem); letter-spacing: -0.022em; line-height: 1; }
.wall-head .lede { margin: 1rem auto 0; max-width: 40rem; opacity: 0; }
.track { position: absolute; left: 0; top: 0; height: 100%; }
.agent { position: absolute; left: 0; top: 0; width: var(--face); transform-origin: 50% 50%; opacity: 0; will-change: transform, opacity; }
.agent img {
  display: block; width: var(--face); height: var(--face); border-radius: 50%; object-fit: cover; background: #0d0b17;
  box-shadow: 0 0 0 2px var(--background), 0 14px 30px -16px rgb(0 0 0 / .65);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
:root[data-theme="light"] .agent img { box-shadow: 0 0 0 2px var(--background), 0 14px 30px -14px rgb(40 20 80 / .35); }
.who { position: absolute; left: 50%; top: calc(var(--face) + .6rem); width: calc(var(--colw) - 1rem); transform: translateX(-50%); display: grid; gap: .1rem; text-align: center; opacity: 0; pointer-events: none; }
.who b { font: 600 clamp(.9375rem, 1.1vw, 1.0625rem)/1.25 var(--font-display); letter-spacing: -0.006em; }
.who span { font-size: .8125rem; line-height: 1.35; color: var(--muted-foreground); }
.wall.live .agent:hover img { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 3.5px color-mix(in oklch, #a78bfa 75%, transparent), 0 16px 32px -14px rgb(0 0 0 / .6); }
@media (max-width: 760px) {
  .wall-head { top: calc(64px + 3vh); }
  .wall-head .lede { font-size: .9375rem; }
  .who span { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wall { height: auto; }
  .wall .wall-pin { position: relative; height: 100vh; height: 100svh; overflow-x: auto; }
  .agent, .who { opacity: 1; }
}

/* ==========================================================================
   4. TEAM
   ========================================================================== */
.team { padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem); }
.sec-head .lede { margin-top: 1.25rem; }
.tabs { display: flex; gap: 1.75rem; margin-top: 2.5rem; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); padding-right: 2rem; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; padding: .5rem 0; font: 500 1rem/1.2 var(--font-display); color: var(--muted-foreground); white-space: nowrap; transition: color .2s ease; }
.tabs button:hover { color: var(--foreground); }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hl); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.tabs button[aria-selected="true"] { color: var(--foreground); }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }

.rail-wrap { margin-top: 3rem; -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter) * 2), transparent); mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter) * 2), transparent); }
.rail {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 1rem max(var(--gutter), calc((100vw - 72rem) / 2)) 1rem;
  scroll-padding: 0 max(var(--gutter), calc((100vw - 72rem) / 2));
}
.rail::-webkit-scrollbar { display: none; }
.rail li { flex: none; width: 15rem; scroll-snap-align: start; transition: opacity .35s ease, transform .35s var(--ease); }
.rail li.off { display: none; }
.rail h3 { margin-top: 1.4rem; font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -0.018em; }
.rail .role { margin-top: .15rem; font-size: .875rem; color: var(--muted-foreground); }
.rail .ask { margin-top: 1rem; font-size: .9375rem; line-height: 1.5; color: color-mix(in oklch, var(--foreground) 82%, transparent); padding-top: 1rem; border-top: 1px solid var(--hair); }
.rail li:hover .face { box-shadow: 0 0 0 3.5px color-mix(in oklch, #a78bfa 75%, transparent); transform: translateY(-3px); }
.rail-ctl { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ==========================================================================
   5. AVATAR
   ========================================================================== */
.avatar { --aura: #a78bfa; position: relative; padding: clamp(6rem, 12vw, 10rem) 0; }
.av-aura {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 72% 50%, color-mix(in oklch, var(--aura) 24%, transparent), transparent 72%);
  transition: background .6s ease;
}
.av-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.av-copy .lede { margin-top: 1.25rem; }
.swatches { display: flex; align-items: center; gap: .75rem; margin-top: 2.25rem; }
.swatches button { width: 2rem; height: 2rem; border-radius: 50%; background: var(--s); box-shadow: 0 0 0 2px var(--background), 0 0 0 3px transparent; transition: box-shadow .25s ease, transform .25s var(--ease); }
.swatches button:hover { transform: scale(1.08); }
.swatches button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--background), 0 0 0 5px var(--s); }
.sw-name { margin-left: .5rem; font: 500 .9375rem/1 var(--font-display); color: var(--muted-foreground); }
.av-copy .hint { margin-top: .9rem; }

.av-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.av-face {
  width: clamp(9rem, 16vw, 12rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--aura) 70%, #fff), color-mix(in oklch, var(--aura) 75%, #1a1030) 70%);
  box-shadow: 0 0 0 3.5px color-mix(in oklch, var(--aura) 75%, transparent), 0 30px 80px -20px color-mix(in oklch, var(--aura) 70%, transparent);
  font: 600 clamp(2.5rem, 4vw, 3.25rem)/1 var(--font-display); color: #fff;
  transition: background .6s ease, box-shadow .6s ease;
}
.av-face { overflow: hidden; padding: 0; }
.av-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-name { margin-top: 1.5rem; font: 600 1.5rem/1.2 var(--font-display); letter-spacing: -0.018em; }
.av-sub { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }
.away { margin-top: 2rem; width: 100%; max-width: 30rem; text-align: left; }
.away li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem .75rem; border-top: 1px solid var(--hair); font-size: .9375rem; line-height: 1.5; border-radius: .625rem; transition: background .2s ease; }
.away li:hover { background: var(--tint); }
.k { font-size: .75rem; font-weight: 500; padding-top: .2rem; }
.k-ok { color: var(--ok); }
.k-wait { color: var(--warn); }
.k-no { color: var(--muted-foreground); }

/* ==========================================================================
   6. HUDDLE
   ========================================================================== */
.huddle { padding: clamp(5rem, 10vw, 9rem) 0; }
.hu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hu-copy .lede { margin-top: 1.25rem; }
.stack { display: flex; align-items: center; flex-wrap: wrap; row-gap: 1rem; }
.stack .face { box-shadow: 0 0 0 2px var(--background); }
.stack .face + .face { margin-left: -.85rem; }
.hu-live { margin-left: 1.25rem; font: 500 .9375rem/1.2 var(--font-display); color: var(--muted-foreground); }
.transcript { margin-top: 1.75rem; display: grid; gap: .9rem; }
.transcript li { display: grid; grid-template-columns: 4.75rem 1fr; gap: .75rem; font-size: 1rem; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s var(--ease); }
.transcript li.in { opacity: 1; transform: none; }
.transcript b { font: 600 .9375rem/1.6 var(--font-display); color: var(--muted-foreground); }
.hu-out { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s var(--ease); }
.hu-out.in { opacity: 1; transform: none; }
.hu-out p { font: 600 .9375rem/1.4 var(--font-display); }
.hu-out ul { margin-top: .6rem; }
.hu-out li { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; font-size: .9375rem; }
.chk { color: var(--link); }
.hu-who { margin-left: auto; font-size: .8125rem; color: var(--muted-foreground); }

/* ==========================================================================
   7. CONTROL
   ========================================================================== */
.control { padding: clamp(5rem, 10vw, 9rem) 0; }
.ct-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.rules { margin-top: 2.5rem; }
.rules li { padding: 1.4rem 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 1.5rem; }
.rules h3 { font: 600 1.1875rem/1.3 var(--font-display); letter-spacing: -0.013em; }
.rules p { font-size: .9375rem; color: var(--muted-foreground); }
.ct-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.switch-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.big-switch {
  position: relative; width: 8.5rem; height: 4.5rem; border-radius: 999px;
  background: var(--btn-fill);
  box-shadow: 0 18px 40px -18px #a78bfa;
  transition: background .35s ease, box-shadow .35s ease;
}
.big-switch .knob { position: absolute; top: .45rem; left: .45rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px -4px rgb(0 0 0 / .4); transform: translateX(4.05rem); transition: transform .35s var(--ease); }
.big-switch[aria-checked="false"] { background: color-mix(in oklch, var(--foreground) 14%, transparent); box-shadow: none; }
.big-switch[aria-checked="false"] .knob { transform: none; }
.sw-state { font: 600 1.25rem/1.2 var(--font-display); }
.crew { margin-top: 2rem; width: 100%; max-width: 20rem; }
.crew li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--hair); font-size: .9375rem; }
.crew em { margin-left: auto; font-style: normal; font-size: .8125rem; color: var(--ok); transition: color .3s ease; }
.crew.paused em { color: var(--warn); }
.crew .face { transition: filter .4s ease, opacity .4s ease; }
.crew.paused .face { filter: grayscale(1); opacity: .6; }
.ct-stage .hint { margin-top: 1.25rem; }

/* ==========================================================================
   8. PLATFORM: converge, then a camera tour of the product
   ========================================================================== */
.pf { position: relative; height: 900vh; height: 900svh; }
.pf-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 45% at 50% 50%, color-mix(in oklch, #6b4cf0 18%, transparent), transparent 72%); }
.orbit { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.pf.show-orbit .orbit { visibility: visible; }
.orbit img { --sz: clamp(3.25rem, 5vw, 4.5rem); position: absolute; left: 50%; top: 50%; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2); padding: calc(var(--sz) * .24); object-fit: contain; border-radius: 50%; background: color-mix(in oklch, var(--card) 92%, transparent); box-shadow: 0 0 0 1px var(--hair), 0 18px 40px -22px rgb(0 0 0 / .6); will-change: transform, opacity; }
.core { position: absolute; left: 50%; top: 46%; width: min(60vw, 28rem); opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.core .wm { width: 100%; height: auto; background: var(--spectrum); }
.pf-open { position: absolute; left: 0; right: 0; top: calc(46% - 1.5rem); padding: 0 var(--gutter); text-align: center; opacity: 0; }
.pf-open-h { font-size: clamp(2.6rem, 5.4vw, 5.25rem); letter-spacing: -0.022em; line-height: 1; }
.pf-open .lede { margin: 1.25rem auto 0; max-width: 40rem; }

.pf-copy { position: absolute; left: max(var(--gutter), 5vw); top: calc(50% + 32px); width: min(30rem, 31vw); }
.pbeat { position: absolute; left: 0; right: 0; top: 0; translate: 0 -50%; opacity: 0; visibility: hidden; will-change: transform, opacity, filter; }
.pbeat-h { font-size: clamp(2.3rem, 3.9vw, 4rem); line-height: 1; letter-spacing: -0.022em; }
.pbeat-p { margin-top: 1.25rem; max-width: 26rem; color: var(--muted-foreground); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; }

.pf-stage { position: absolute; right: max(var(--gutter), 4vw); top: calc(64px + 6vh); width: min(58vw, calc((100vh - 64px - 6vh - 7.5rem) * 1.62)); width: min(58vw, calc((100svh - 64px - 6vh - 7.5rem) * 1.62)); }
.pf-win {
  border-radius: 1rem; overflow: hidden; border: 1px solid var(--hair); background: var(--card); opacity: 0; visibility: hidden;
  box-shadow: 0 60px 120px -50px color-mix(in oklch, #6b4cf0 55%, transparent), var(--e3);
  transform-origin: 50% 50%; will-change: transform, opacity;
}
.pf-bar { display: flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .8rem; border-bottom: 1px solid var(--hair); }
.pf-bar span { width: .5rem; height: .5rem; border-radius: 50%; background: color-mix(in oklch, var(--foreground) 18%, transparent); }
.pf-bar em { margin: 0 auto; padding-right: 1.6rem; font: 400 .6875rem/1 var(--font-mono); font-style: normal; color: var(--text-ghost); }
.pf-cam { position: relative; aspect-ratio: 1600 / 968; overflow: hidden; background: #000; }
:root[data-theme="light"] .pf-cam { background: #fff; }
.pf-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.pf-layer img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The focus: a violet outline, with everything outside it dimmed */
.pf-ring { position: absolute; z-index: 3; border-radius: 6px; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1.5px color-mix(in oklch, #a78bfa 85%, transparent), 0 0 0 100vmax rgb(6 5 12 / .5); }
:root[data-theme="light"] .pf-ring { box-shadow: 0 0 0 1.5px color-mix(in oklch, #7c3aed 80%, transparent), 0 0 0 100vmax rgb(242 241 246 / .6); }
.pf-tabs { display: flex; justify-content: center; gap: 2rem; margin-top: 1.25rem; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.pf-tabs.on { opacity: 1; visibility: visible; }
.pf-tabs button { position: relative; padding: .4rem 0; font: 500 .9375rem/1.2 var(--font-display); color: var(--muted-foreground); transition: color .2s ease; }
.pf-tabs button:hover { color: var(--foreground); }
.pf-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hl); transform-origin: left; transform: scaleX(var(--f, 0)); }
.pf-tabs button[aria-current="true"] { color: var(--foreground); }

@media (max-width: 900px) {
  .pf-copy { left: var(--gutter); right: var(--gutter); width: auto; top: calc(64px + 2.5vh); height: 11rem; }
  .pbeat { translate: none; }
  .pbeat-h { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .pbeat-p { margin-top: .7rem; font-size: .9375rem; }
  .pf-stage { left: var(--gutter); right: var(--gutter); width: auto; top: calc(64px + 2.5vh + 12.5rem); }
  .pf-tabs { gap: 1.25rem; }
  .core { top: 40%; }
  .pf-open { top: calc(40% - 1rem); }
}

/* ==========================================================================
   10. MEMORY: a time machine
   ========================================================================== */
.mem { position: relative; height: 620vh; height: 620svh; }
.mem-pin { display: flex; align-items: center; padding-top: 64px; }
.mem-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.mem-h { font-size: clamp(2.3rem, 4.4vw, 4.4rem); letter-spacing: -0.022em; line-height: 1; max-width: 15ch; }
.mem-top .lede { margin-top: 1rem; max-width: 32rem; }
.clock { flex: none; display: grid; justify-items: end; }
.clock-l { font: 500 1rem/1 var(--font-display); color: var(--muted-foreground); }
.clock-n { min-width: 2ch; text-align: right; font: 600 clamp(4.5rem, 10vw, 9rem)/.9 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl { margin-top: 2rem; }
.tl-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 8.5rem; align-items: center; gap: 1.5rem; padding: .6rem 0; border-top: 1px solid var(--hair); }
.tl-name b { display: block; font: 600 1rem/1.25 var(--font-display); }
.tl-name span { display: block; margin-top: .1rem; font-size: .75rem; color: var(--muted-foreground); }
.tl-strip { display: flex; align-items: flex-end; gap: 2px; height: 2.5rem; }
.tl-strip i { flex: 1; height: var(--h); border-radius: 2px 2px 1px 1px; opacity: 0; transform: scaleY(.2); transform-origin: bottom; transition: opacity .25s ease, transform .3s var(--ease), background .35s ease; }
.tl-strip i.k { opacity: 1; transform: none; background: color-mix(in oklch, var(--foreground) 36%, transparent); }
.tl-strip i.x { opacity: 1; transform: scaleY(.18); background: color-mix(in oklch, var(--err) 40%, transparent); }
.tl-row.us .tl-strip i.k { background: linear-gradient(#c084fc, #6b4cf0); }
.tl-kept { text-align: right; }
.tl-kept b { display: block; font: 600 1rem/1.25 var(--font-display); font-variant-numeric: tabular-nums; }
.tl-kept span { display: block; margin-top: .1rem; font-size: .75rem; color: var(--err); }
.tl-row.us .tl-name b, .tl-row.us .tl-kept b { background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mem-end { margin-top: 1.75rem; opacity: 0; }
/* The takeover: Modern's row spreads to the full width and grows to fill the stage */
.tl-row { overflow: hidden; transition: grid-template-columns .6s var(--ease), gap .6s var(--ease); }
.tl-row .tl-name, .tl-row .tl-kept { transition: opacity .35s ease; }
.tl-row.us.take { grid-template-columns: 0 minmax(0, 1fr) 0; gap: 0; border-top-color: transparent; }
.tl-row.us.take .tl-name, .tl-row.us.take .tl-kept { opacity: 0; }
.mem.dense .tl-row.us .tl-strip { gap: 1px; }
.tl-row.us .tl-strip i.k { border-radius: 3px 3px 1px 1px; }
.clock-n.word { font-size: clamp(3rem, 7vw, 6.5rem); }
.mem-end-h { font-size: clamp(1.5rem, 2.6vw, 2.4rem); letter-spacing: -0.015em; }
.mem-end .fine { margin-top: .6rem; max-width: 48rem; }
@media (max-height: 860px) and (min-width: 761px) {
  .mem-top .lede { display: none; }
  .mem-h { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
  .clock-n { font-size: clamp(4rem, 8vw, 6.5rem); }
  .tl { margin-top: 1.25rem; }
  .tl-row { padding: .45rem 0; }
  .tl-strip { height: 2.1rem; }
  .mem-end { margin-top: 1.1rem; }
}
@media (max-width: 760px) {
  .mem-pin { align-items: flex-start; padding-top: calc(64px + 2vh); }
  .mem-top { align-items: flex-end; }
  .mem-h { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .mem-top .lede { display: none; }
  .clock-n { font-size: 4rem; }
  .tl { margin-top: 1.25rem; }
  .tl-row { grid-template-columns: 1fr auto; grid-template-areas: "name kept" "strip strip"; gap: .35rem 1rem; padding: .5rem 0; }
  .tl-row.us.take { grid-template-columns: 1fr; grid-template-areas: "strip"; }
  .tl-row.us.take .tl-name, .tl-row.us.take .tl-kept { display: none; }
  .mem.dense .tl-row.us .tl-strip { gap: 0; }
  .tl-name { grid-area: name; } .tl-name span { display: none; } .tl-kept { grid-area: kept; } .tl-kept b, .tl-kept span { display: inline; } .tl-kept span { margin-left: .4rem; } .tl-strip { grid-area: strip; height: 1.6rem; gap: 1px; }
  .mem-end { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pf, .mem { height: auto; }
  .pf .pf-pin { position: relative; height: 100vh; height: 100svh; }
  .mem .mem-pin { position: relative; height: auto; padding: 6rem 0; }
  .orbit, .core, .pf-open { display: none; }
}

/* ==========================================================================
   12. PRICING
   ========================================================================== */
/* Open columns on the page, no boxes (brand: no containers). Impact comes from big numbers,
   one soft light behind Pro, and each plan's history drawn as a line. js/pricing.js plays it. */
.pricing { position: relative; padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(6rem, 12vw, 10rem); overflow-x: clip; }
.pc-light { position: absolute; left: 50%; top: 42%; width: min(1100px, 120%); height: 70%; transform: translateX(-30%); pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklch, #8b5cf6 16%, transparent), color-mix(in oklch, #e053b0 6%, transparent) 55%, transparent); filter: blur(40px); }
.pricing .wrap { position: relative; }
.plans { --gx: -999px; --gy: -999px; position: relative; isolation: isolate; margin-top: 4rem; display: grid; grid-template-columns: repeat(4, 1fr); }
/* One glow that follows the pointer across the plans */
.plans::before { content: ""; position: absolute; left: var(--gx); top: var(--gy); width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklch, #a78bfa 11%, transparent), transparent); opacity: 0; transition: opacity .4s ease; }
.plans:hover::before { opacity: 1; }
.plan { position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem 0; border-left: 1px solid var(--hair); }
.plan:first-child { border-left: 0; padding-left: 0; }
.plan h3 { display: flex; align-items: center; gap: .6rem; font: 600 1.1875rem/1.3 var(--font-display); }
.pop { font: 500 .6875rem/1 var(--font-body); padding: .3rem .55rem; border-radius: 999px; color: var(--link); background: color-mix(in oklch, #a78bfa 14%, transparent); }
.price { display: flex; align-items: baseline; gap: .3rem; margin-top: 1.1rem; font-size: .9375rem; color: var(--muted-foreground); }
.price .num { font: 600 clamp(2.6rem, 3.7vw, 3.6rem)/.95 var(--font-display); letter-spacing: -0.035em; color: var(--foreground); font-variant-numeric: tabular-nums; }
.price small { font-size: .9375rem; }
.price .from { align-self: flex-start; margin-top: .55rem; font-size: .875rem; }
.p-for { margin-top: .9rem; font-size: .9375rem; color: var(--muted-foreground); min-height: 3em; }
.p-add { margin: -.7rem 0 1.6rem; font-size: .78rem; line-height: 1.5; color: var(--text-ghost); }
/* A plan spec still waiting on a final number: <b class="tbd"> */
.plan .tbd { color: #f5a93c; }
.plan li.save b:not(.tbd) { color: #6ee7b7; }
.plans-note { max-width: 48rem; margin-top: 2.6rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }


/* Pro is the one focal object: light behind it and a gradient hairline above it */
.plan-pop::before { content: ""; position: absolute; left: 50%; top: 30%; width: 150%; height: 90%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, color-mix(in oklch, #8b5cf6 32%, transparent), color-mix(in oklch, #e879f9 10%, transparent) 50%, transparent); filter: blur(24px); }
.plan-pop::after { content: ""; position: absolute; left: 1.75rem; right: 1.75rem; top: 0; height: 2px; border-radius: 2px; background: var(--hl); box-shadow: 0 0 18px 1px color-mix(in oklch, #c084fc 60%, transparent); }
.plan-pop .num { background: linear-gradient(180deg, var(--foreground) 30%, color-mix(in oklch, #c4b5fd 85%, var(--foreground))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* How much history each plan keeps, drawn as a line. "Forever" runs off the end. */
.keep { margin-top: 1.4rem; }
.keep-line { position: relative; display: block; height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.keep-line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hl); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 120ms + 250ms); }
.plan.drawn .keep-line::after { transform: scaleX(var(--k)); }
.keep.forever .keep-line::after { background: linear-gradient(90deg, #a78bfa, #e879f9 70%, color-mix(in oklch, #e879f9 0%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .plan.drawn .keep.forever .keep-line::before { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; z-index: 1; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); animation: keep-run 2.8s ease-in-out infinite; animation-delay: 1.6s; }
}
@keyframes keep-run { from { left: -30%; } to { left: 100%; } }
.keep-l { display: block; margin-top: .55rem; font-size: .8125rem; color: var(--muted-foreground); }
.keep-l b { color: var(--foreground); font-weight: 600; }

/* What these plans cover: Platform, and Computer on the paid plans. */
.plans-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--hair); }
.plans-head p { margin: 0; font: 500 1rem/1.3 var(--font-display); color: var(--muted-foreground); }
.plans-head b { color: var(--foreground); font-weight: 600; }
.plans-head a { font-size: .875rem; color: var(--link); }
.plans-head + .plans { margin-top: 0; }
.plan ul { margin: 1.5rem 0 2rem; display: grid; gap: .6rem; }
.plan li.yes b { font-weight: 600; background: var(--hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan li.no { color: var(--muted-foreground); }
.plan li.no::before { content: "✕"; color: var(--muted-foreground); font-size: .75rem; top: .05em; }
.plan li { position: relative; padding-left: 1.4rem; font-size: .875rem; line-height: 1.45; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--link); font-size: .8125rem; }
.plan .btn { margin-top: auto; align-self: flex-start; }


@media (max-width: 1000px) {
  .plans { grid-template-columns: 1fr 1fr; row-gap: 3.5rem; }
  .plan:nth-child(3) { border-left: 0; padding-left: 0; }
  .plan-pop::after { left: 0; }
}
@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; row-gap: 0; margin-top: 2.5rem; }
  .plans-head { flex-direction: column; gap: .35rem; margin-top: 2.5rem; }
  .plans-head + .plans { margin-top: 1.5rem; }
  .plan { border-left: 0; padding: 2.25rem 0; border-top: 1px solid var(--hair); }
  .plan:first-child { border-top: 0; padding-top: 0; }
  .plan-pop { border-top: 0; }
  .plan-pop::after { left: 0; right: 0; }
  .p-for { min-height: 0; }
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
/* Two columns: the headline and "ask the Computer" stay put on the left; numbered questions on the right. */
.faq { padding: clamp(5rem, 10vw, 8rem) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.faq-side { position: sticky; top: 7rem; }
.faq-side .lede { margin-top: 1.25rem; max-width: 26rem; }
/* Looks like the chat's composer, because it opens it */
.faq-ask {
  display: flex; align-items: center; gap: .75rem; width: min(100%, 26rem); margin-top: 2rem; padding: .45rem .45rem .45rem .5rem;
  border-radius: 999px; text-align: left; color: var(--muted-foreground); font-size: .9375rem;
  background: color-mix(in oklch, var(--foreground) 5%, transparent); border: 1px solid var(--hair);
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.faq-ask img { width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; }
.faq-ask span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faq-ask svg { flex: none; width: 2.4rem; height: 2.4rem; padding: .6rem; border-radius: 50%; background: var(--btn-fill); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.faq-ask:hover { border-color: color-mix(in oklch, #a78bfa 50%, transparent); background: color-mix(in oklch, #a78bfa 8%, transparent); transform: translateY(-1px); box-shadow: 0 16px 40px -24px #a78bfa; color: var(--foreground); }

.qs { counter-reset: q; }
.qs details { border-top: 1px solid var(--hair); counter-increment: q; }
.qs details:last-child { border-bottom: 1px solid var(--hair); }
.qs summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: baseline; gap: 1rem;
  padding: 1.6rem .75rem; margin: 0 -.75rem; border-radius: .75rem;
  font: 500 clamp(1.125rem, 1.5vw, 1.375rem)/1.35 var(--font-display); letter-spacing: -0.012em; transition: background .2s ease, color .2s ease;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::before { content: counter(q, decimal-leading-zero); font: 500 .75rem/1 var(--font-mono); color: var(--text-ghost); transform: translateY(-.15em); transition: color .2s ease; }
.qs summary:hover { background: var(--tint); }
/* A plus that turns into a minus */
.qs summary::after { content: ""; align-self: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--hair);
  background: linear-gradient(currentColor, currentColor) center / .7rem 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px .7rem no-repeat;
  color: var(--muted-foreground); transition: transform .35s var(--ease), background-size .35s var(--ease), border-color .2s ease; }
.qs details[open] summary::after { transform: rotate(180deg); background-size: .7rem 1.5px, 1.5px 0; border-color: color-mix(in oklch, #a78bfa 50%, transparent); color: var(--link); }
.qs details[open] summary::before { color: var(--link); }
.qs details p { padding: 0 3rem 1.75rem 3.25rem; color: var(--muted-foreground); line-height: 1.65; max-width: 44rem; }
/* Smooth opening where the browser supports it */
@supports (interpolate-size: allow-keywords) {
  .qs { interpolate-size: allow-keywords; }
  .qs details::details-content { height: 0; overflow: clip; opacity: 0; transition: height .4s var(--ease), opacity .3s ease, content-visibility .4s allow-discrete; }
  .qs details[open]::details-content { height: auto; opacity: 1; }
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .qs details p { padding: 0 0 1.5rem 3.25rem; }
}

/* ==========================================================================
   14. JOIN
   ========================================================================== */
.join { position: relative; padding: clamp(5rem, 10vw, 8rem) 0 clamp(5rem, 9vw, 7rem); }
/* A deep blue-violet nebula, soft at every edge so it never shows a line */
.join-aura { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(38% 34% at 50% 46%, color-mix(in oklch, #8a2be8 26%, transparent), transparent 72%),
  radial-gradient(45% 40% at 22% 30%, color-mix(in oklch, #3b3fc4 24%, transparent), transparent 70%),
  radial-gradient(40% 38% at 80% 62%, color-mix(in oklch, #6b2bb8 20%, transparent), transparent 70%),
  radial-gradient(30% 28% at 70% 92%, color-mix(in oklch, #be185d 10%, transparent), transparent 70%); }
:root[data-theme="light"] .join-aura { opacity: .7; }
/* Drifting specks of light, drawn by site.js */
.join-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.join > .wrap, .join > .crt-wrap { position: relative; z-index: 1; }
.join .wrap { position: relative; }
.join-crt { width: clamp(9rem, 18vw, 13rem); margin: 0 auto 2rem; }
.join .lede { margin: 1.25rem auto 0; }
.pill-form { margin: 2rem auto 0; max-width: 32rem; }
.join { scroll-margin-top: calc(72px - clamp(5rem, 10vw, 8rem)); } /* the nav's Join link lands on the heading and the form */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pill {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem 1.35rem; border-radius: 999px;
  background: color-mix(in oklch, var(--card) 70%, transparent);
  border: 1px solid color-mix(in oklch, #a78bfa 40%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pill:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 4px color-mix(in oklch, #a78bfa 18%, transparent); }
.pill.error { border-color: var(--err); }
.pill input { flex: 1; min-width: 0; height: 2.75rem; border: 0; outline: 0; background: none; color: var(--foreground); font: 400 1rem/1 var(--font-body); }
.pill input::placeholder { color: var(--text-ghost); }
.pill .btn { height: 2.75rem; padding: 0 1.25rem; }
.pill-form .pill input { height: 3rem; font-size: 1rem; }
.pill-form .pill .btn { height: 3rem; padding: 0 1.4rem; font-size: 1rem; }
@media (max-width: 520px) {
  .pill-form .pill { flex-direction: column; align-items: stretch; gap: .6rem; padding: 0; border: 0; background: none; border-radius: 0; }
  .pill-form .pill:focus-within { box-shadow: none; }
  .pill-form .pill input { flex: none; height: 3rem; padding: 0 1.1rem; border-radius: 14px; border: 1px solid color-mix(in oklch, #a78bfa 40%, transparent); background: color-mix(in oklch, var(--card) 70%, transparent); }
  .pill-form .pill input:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px color-mix(in oklch, #a78bfa 18%, transparent); }
  .pill-form .pill.error input { border-color: var(--err); }
  .pill-form .pill .btn { width: 100%; justify-content: center; border-radius: 14px; }
}
.note { margin-top: .9rem; font-size: .8125rem; color: var(--text-ghost); }
.note a { color: var(--link); }
.note.err { color: var(--err); }
.done-msg { display: none; font: 600 1.25rem/1.4 var(--font-display); }
.pill-form.done .pill, .pill-form.done .note { display: none; }
.pill-form.done .done-msg { display: block; }
.pill-form.closed .pill { display: none; }
.alt { margin-top: 2.5rem; font-size: .9375rem; color: var(--muted-foreground); }
.spinner { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- sign up, on the Computer's own screen ---------- */
.join .join-cta { justify-content: center; }
/* Clip sideways only (the phone layout is wider than the screen); never cut the computer off at the bottom. */
.join { overflow-x: clip; }
/* The image has transparent space above (14.5%) and below (10%) the computer. The margins remove
   exactly that, then add real breathing room. That pulls the wrap up over the form, so it takes no
   clicks; only the glass does, and a click there focuses the real field (site.js). */
.crt-wrap { --cw: min(820px, 96vw); position: relative; width: var(--cw); aspect-ratio: 1;
  margin: calc(var(--cw) * -0.145 + 2rem) auto calc(var(--cw) * -0.10 + 2.5rem); pointer-events: none; }
.crt-img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* A 455x347 canvas laid over the blank glass by site.js. No panel: the form sits right on the screen. */
.crt-screen {
  --background: #0b0910; --foreground: #f4f3f7; --muted-foreground: #b2a6c2; --text-ghost: #a28fb8; --link: #c4b5fd; --err: #ff8a8d;
  position: absolute; left: 0; top: 0; width: 455px; height: 347px; transform-origin: 0 0; color: var(--foreground); color-scheme: dark;
  pointer-events: auto; cursor: text;
}
.crt-glass { position: absolute; inset: 0; transform-origin: 50% 50%; }
.crt-form { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 36px 46px 28px; text-align: left; text-shadow: 0 0 14px rgb(160 120 255 / .55); }
.crt-k { position: absolute; left: 46px; top: 30px; display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-display); color: var(--muted-foreground); }
.crt-k .wm { height: 13px; color: #fff; }
.crt-k em { font-style: normal; padding-left: 8px; border-left: 1px solid rgb(255 255 255 / .2); }
.crt-h { font: 600 36px/1.05 var(--font-display); letter-spacing: -0.02em; color: #fff; }
.crt-l { display: block; margin: 16px 0 8px; font-size: 13px; color: var(--muted-foreground); }
.crt-echo { margin: 22px 0 0; display: flex; align-items: center; min-height: 40px; padding: 0 0 0 2px; border-bottom: 1px solid rgb(196 181 253 / .35); font: 500 22px/1.2 var(--font-mono, ui-monospace, monospace); color: #fff; overflow: hidden; white-space: nowrap; }
.crt-echo .ph { color: rgb(220 210 255 / .42); }
.crt-caret { display: inline-block; width: 11px; height: 24px; margin-left: 3px; background: #c4b5fd; box-shadow: 0 0 10px #a78bfa; animation: crt-caret 1.1s steps(1) infinite; }
@keyframes crt-caret { 50% { opacity: 0; } }
.crt-form.done .crt-echo { border-bottom-color: transparent; font: 400 17px/1.45 var(--font-body); color: var(--muted-foreground); white-space: normal; }
.crt-form.done .crt-caret { display: none; }
@media (prefers-reduced-motion: reduce) { .crt-caret { animation: none; } }
/* Switching on: the first time it scrolls in, the screen opens out of a bright line */
@media (prefers-reduced-motion: no-preference) {
  .crt-wrap .crt-glass { opacity: 0; transform: scaleY(.02); filter: brightness(3); transition: opacity .25s ease .35s, transform .5s cubic-bezier(.2, .8, .2, 1) .35s, filter .7s ease .35s; }
  .crt-wrap.in .crt-glass { opacity: 1; transform: none; filter: none; }
}
@media (max-width: 640px) {
  .crt-wrap { --cw: 140vw; margin-left: -20vw; margin-right: -20vw; margin-top: calc(var(--cw) * -0.145 + 1.5rem); margin-bottom: calc(var(--cw) * -0.10 + 2rem); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { padding-top: 4rem; border-top: 1px solid var(--hair); overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2rem; }
.foot-soc2 { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem !important; padding: .4rem .7rem; border: 1px solid var(--hair); border-radius: 999px; font: 500 .75rem/1 var(--font-body) !important; color: var(--foreground) !important; }
.foot-soc2 svg { width: 14px; height: 14px; fill: none; stroke: #6ee7b7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot-brand .wm { color: var(--foreground); height: 1.4rem; }
.foot-brand p { margin-top: 1rem; font-size: .875rem; color: var(--muted-foreground); max-width: 18rem; }
.foot nav { display: grid; align-content: start; gap: .55rem; }
.foot nav h3 { font: 600 .9375rem/1.4 var(--font-display); margin-bottom: .3rem; }
.foot nav a { font-size: .875rem; color: var(--muted-foreground); transition: color .2s ease; }
.foot nav a:hover { color: var(--foreground); }
.foot-base { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; border-top: 1px solid var(--hair); padding-top: 1.5rem; padding-bottom: 2rem; font-size: .8125rem; color: var(--text-ghost); }
@media (max-width: 800px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- shared responsive ---------- */
@media (max-width: 900px) {
  .av-grid, .hu-grid, .ct-grid { grid-template-columns: 1fr; }
  .av-stage, .ct-stage { margin-top: 1rem; }
  .rules li { grid-template-columns: 1fr; gap: .4rem; }
  .avatar .av-aura { background: radial-gradient(60% 40% at 50% 70%, color-mix(in oklch, var(--aura) 24%, transparent), transparent 72%); }
}

/* ---------- reduced motion: show every scene in its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cs, .how { height: auto; }
  .pin { position: relative; height: auto; overflow: visible; }
  .cs-pin { height: 100vh; height: 100svh; overflow: hidden; }
  .cs-video, .x-screen, .cs-copy, .cs-end, .cs-tabs { display: none; }
  .how .pin { padding: 6rem 0; }
  * { transition-duration: .01ms !important; }
}

/* "Illustrative demo · sample data": under every demo that plays made-up numbers */
.demo-note { margin: 1rem 0 0; text-align: center; font: 500 .7rem/1.3 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--text-ghost); }
.av-copy .demo-note, .bx-log .demo-note { text-align: left; }
.rp-body .demo-note { grid-column: 1 / -1; margin-top: -.5rem; text-align: right; }
.fm-live-k span { color: #6f6987; }

/* the legal links in the footer's last line */
.foot-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot-cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.foot-cookies:hover { color: var(--foreground); }