/* ============================================================================
   TellWang docs — layout & components.  Consumes tokens.css. Theme-aware.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 1rem); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base); line-height: var(--lh-body);
  color: var(--t-body); background: var(--c-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ---- Ambient atmosphere --------------------------------------------------- */
.bg-atmos { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; background: var(--mesh); }
.bg-grain {
  position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
img, canvas { display: block; max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--t-bright); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 600; }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); font-weight: 500; }
.text-dim { color: var(--t-dim); }
.accent { color: var(--accent); }

/* ---- Liquid glass --------------------------------------------------------- */
.glass {
  position: relative;
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  /* Liquid glass: a translucent tint with a diagonal specular sheen layered over
     the blurred, saturation-boosted backdrop. */
  background:
    linear-gradient(135deg, var(--glass-sheen), transparent 42%),
    var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(185%) brightness(1.04);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(185%) brightness(1.04);
  /* Ambient drop + a bright top edge + a soft inner-bottom shade (curved-glass depth). */
  box-shadow:
    var(--shadow),
    inset 0 1px 0 var(--glass-hi),
    inset 0 -10px 26px -14px var(--glass-edge);
}

/* ---- Top bar -------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav); height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-5); padding: 0 var(--s-6);
  background: var(--topbar-bg); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--glass-border);
}
.brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 600; color: var(--t-bright); font-size: var(--fs-md); letter-spacing: var(--tracking-tight); }
.brand .mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent-fill), var(--accent-2)); box-shadow: 0 0 22px var(--accent-glow); flex: none; position: relative; }
/* Center of the mark = wood (the flame grows wood, 火生木). SVG feTurbulence with
   slow-x / fast-y frequency makes horizontal plank grain; feColorMatrix tints the
   noise into a dark wood-brown over a mid-brown base. */
.brand .mark::after { content: ""; position: absolute; inset: 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(40,20,8,0.30);
  background: #9a6334 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.11' numOctaves='5' seed='9' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 0 0 0 -0.35' result='a'/%3E%3CfeComponentTransfer in='a' result='b'%3E%3CfeFuncA type='gamma' amplitude='1' exponent='1.7' offset='0'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%2336200b' result='d'/%3E%3CfeComposite in='d' in2='b' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%239a6334'/%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") center / cover; }
.topnav { display: flex; gap: var(--s-5); margin-left: var(--s-4); font-size: var(--fs-sm); }
.topnav a { color: var(--t-dim); transition: color var(--dur-fast) var(--ease); }
.topnav a:hover { color: var(--t-bright); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.topbar-right .btn { padding: 0.45rem 1rem; font-size: var(--fs-sm); }
.searchbtn { display: flex; align-items: center; gap: var(--s-3); padding: 0.45rem 0.8rem; font-size: var(--fs-sm); color: var(--t-dim); cursor: pointer; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-pill); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.searchbtn:hover { border-color: var(--glass-hi); color: var(--t-body); }
.searchbtn kbd { font-family: var(--font-mono); font-size: 0.7rem; padding: 1px 6px; border-radius: 5px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--t-dim); cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.icon-btn:hover { color: var(--t-bright); border-color: var(--glass-hi); }
.theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; }
[data-theme="light"] .theme-toggle .sun { display: block; } [data-theme="light"] .theme-toggle .moon { display: none; }

/* ---- Buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); padding: 0.7rem 1.2rem; border-radius: var(--r-pill); cursor: pointer; border: 1px solid transparent; position: relative; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }   /* Liquid Glass: scale-on-press feedback */

/* Primary = prominent TINTED glass (the single accent CTA per view, per Apple's
   Liquid Glass HIG): the brand orange as a translucent material with a specular
   top highlight, a refracting blur, a bright rim, and curved-edge depth. White
   label kept legible with a soft shadow — tint is semantic, not decoration. */
.btn-primary {
  color: #fff;
  text-shadow: 0 1px 1px rgba(90,35,0,0.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 48%, rgba(255,255,255,0) 100%),
    var(--accent-fill);
  border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: blur(8px) saturate(165%);
  -webkit-backdrop-filter: blur(8px) saturate(165%);
  box-shadow:
    0 6px 20px -8px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 7px -3px rgba(120,45,0,0.30);
}
.btn-primary:hover {
  box-shadow:
    0 12px 34px -8px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 7px -3px rgba(120,45,0,0.30);
}

/* Ghost = secondary clear glass — same liquid recipe as .glass surfaces. */
.btn-ghost {
  color: var(--t-bright);
  background: linear-gradient(135deg, var(--glass-sheen), transparent 46%), var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.btn-ghost:hover { border-color: var(--glass-hi); }

/* ---- Page shell ----------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--w-sidebar) minmax(0,1fr); max-width: var(--w-max); margin: 0 auto; }
.shell.with-toc { grid-template-columns: var(--w-sidebar) minmax(0,1fr) var(--w-toc); }

/* ---- Sidebar -------------------------------------------------------------- */
.sidebar { position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: var(--s-6) var(--s-4) var(--s-8) var(--s-6); }
.nav-group { margin-bottom: var(--s-5); }
.nav-group > .label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-faint); padding: 0 var(--s-3) var(--s-2); display: block; }
.nav-group a { display: flex; align-items: center; gap: var(--s-3); padding: 0.4rem var(--s-3); font-size: var(--fs-sm); color: var(--t-dim); border-radius: var(--r-sm); border-left: 2px solid transparent; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nav-group a:hover { color: var(--t-bright); background: var(--glass-bg); }
.nav-group a.active { color: var(--accent); background: var(--glass-bg); border-left-color: var(--accent); }
.nav-group a .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; flex: none; }

/* ---- Content -------------------------------------------------------------- */
.content { padding: var(--s-8) var(--s-8) var(--s-12); min-width: 0; }
.content.prose { max-width: var(--w-content); }
.prose p { margin: var(--s-4) 0; }
.prose h2 { font-size: var(--fs-xl); margin: var(--s-8) 0 var(--s-3); }
.prose h3 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-2); color: var(--t-bright); }
.prose ul, .prose ol { margin: var(--s-4) 0; padding-left: var(--s-5); }
.prose li { margin: var(--s-2) 0; }
.prose strong { color: var(--t-bright); font-weight: 600; }
.prose a.link { color: var(--accent); border-bottom: 1px solid var(--accent-glow); transition: border-color var(--dur-fast) var(--ease); }
.prose a.link:hover { border-bottom-color: var(--accent); }
.breadcrumb { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--t-faint); letter-spacing: 0.04em; margin-bottom: var(--s-4); }

/* ---- Code (self-contained dark surface in both themes) -------------------- */
code { font-family: var(--font-mono); font-size: 0.9em; }
:not(pre) > code { background: var(--code-inline-bg); border: 1px solid var(--glass-border); padding: 0.1em 0.4em; border-radius: 6px; color: var(--accent); }
.code { position: relative; margin: var(--s-5) 0; border-radius: var(--r-md); overflow: hidden; background: #0d0f14; border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow); }
.code .bar { display: flex; align-items: center; gap: var(--s-3); padding: 0.5rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.code .bar .file { font-family: var(--font-mono); font-size: var(--fs-xs); color: #8b93a3; }
.code .bar .copy { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: #5b6373; cursor: pointer; background: none; border: none; transition: color var(--dur-fast) var(--ease); }
.code .bar .copy:hover { color: #c8f24a; }
.code pre { margin: 0; padding: var(--s-4) var(--s-5); overflow-x: auto; }
.code pre code { color: #c3c9d4; }
.code .tok-c { color: #c8f24a; } .code .tok-s { color: #4ce0d6; } .code .tok-m { color: #5b6373; }

/* ---- Callout -------------------------------------------------------------- */
.callout { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); margin: var(--s-5) 0; border: 1px solid var(--glass-border); background: var(--glass-bg); }
.callout .ico { color: var(--accent); flex: none; font-family: var(--font-mono); }
.callout.warn .ico { color: var(--warn); }

/* ---- On-this-page --------------------------------------------------------- */
.toc { position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: var(--s-8) var(--s-5); font-size: var(--fs-sm); }
.toc .label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-faint); margin-bottom: var(--s-3); }
.toc a { display: block; color: var(--t-faint); padding: 0.25rem 0; transition: color var(--dur-fast) var(--ease); }
.toc a:hover, .toc a.active { color: var(--accent); }

/* ---- Landing hero + cards ------------------------------------------------- */
.hero { padding: var(--s-12) var(--s-8) var(--s-10); max-width: var(--w-max); margin: 0 auto; text-align: center; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.4rem 0.9rem; border-radius: var(--r-pill); border: 1px solid var(--glass-border); background: var(--glass-bg); }
.hero h1 { font-size: var(--fs-3xl); margin: var(--s-5) auto var(--s-4); max-width: 16ch; }
.hero h1 .grad { background: linear-gradient(110deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { font-size: var(--fs-md); color: var(--t-dim); max-width: 56ch; margin: 0 auto var(--s-6); }
.hero .cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
/* iter 194: hero radiance + a real product-demo card — the homepage was text-only
   and read flat. A strong Flame radial glow gives depth (Vercel-style) and the
   demo panel anchors it with what the product actually does (Cursor-style). No particles. */
.hero { position: relative; }
.hero-radiance { position: absolute; left: 50%; top: -3%; transform: translateX(-50%); width: min(1180px, 130%); height: 720px; z-index: 0; pointer-events: none; filter: blur(6px);
  background:
    radial-gradient(38rem 24rem at 30% 18%, rgba(255,122,69,0.30), transparent 62%),
    radial-gradient(30rem 22rem at 72% 26%, rgba(255,180,84,0.22), transparent 60%),
    radial-gradient(46rem 30rem at 52% 82%, rgba(79,168,106,0.16), transparent 64%); }
.hero .hero-copy, .hero .eyebrow, .hero h1, .hero .sub, .hero .cta, .hero .demo { position: relative; z-index: 1; }
/* clean dark product-demo card (terminal-style) — flat rgba (not color-mix/oklab), no
   liquid glass. Reads as an IDE panel on the cream page, never a white box. */
.demo { position: relative; z-index: 1; max-width: 640px; margin: var(--s-8) auto 0; text-align: left; border-radius: var(--r-lg); border: 1px solid var(--glass-border); background: rgba(16,20,42,0.92); box-shadow: 0 30px 80px -28px rgba(0,0,0,0.55), 0 0 70px -24px var(--accent-glow); overflow: hidden; backdrop-filter: blur(10px); }
[data-theme="light"] .demo { background: rgba(22,18,30,0.92); border-color: rgba(255,255,255,0.10); }
.demo-bar { display: flex; align-items: center; gap: var(--s-2); padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--glass-border); }
.demo-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glass-border); }
.demo-bar .dot.r { background: #ff6b6b; } .demo-bar .dot.y { background: var(--accent-soft); } .demo-bar .dot.g { background: var(--accent-2); }
.demo-bar .t { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--t-dim); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.demo-body { padding: var(--s-5); display: flex; flex-direction: column; gap: 0.55rem; }
.demo-you { align-self: flex-start; max-width: 90%; background: var(--accent-tint); border: 1px solid var(--accent-tint-border); color: var(--t-bright); padding: 0.6rem 0.9rem; border-radius: 12px 12px 12px 4px; font-size: var(--fs-sm); }
.demo-step { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--t-body); display: flex; gap: 0.5rem; align-items: baseline; }
.demo-step .ok { color: var(--accent-2); }
.demo-step .m { color: var(--t-dim); }
.demo-live { margin-top: 0.35rem; font-size: var(--fs-sm); color: var(--t-bright); }
.demo-live .star { color: var(--accent); }
.demo-live a { color: var(--accent); font-weight: 600; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.demo-chips span { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--t-dim); padding: 0.2rem 0.5rem; border: 1px solid var(--glass-border); border-radius: var(--r-pill); }
/* Desktop two-column hero — copy left, demo card right. Mobile stays stacked + centered. */
@media (min-width: 861px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-10); align-items: center; text-align: left; }
  .hero-copy { min-width: 0; }
  .hero h1 { margin-left: 0; margin-right: 0; max-width: 18ch; }
  .hero .try-lede { margin-left: 0; margin-right: 0; max-width: 36ch; }
  .hero .try-now { margin-left: 0; margin-right: 0; }
  .demo { margin: 0; max-width: none; }
}

.section { max-width: var(--w-max); margin: 0 auto; padding: var(--s-8); }
.section > .head { margin-bottom: var(--s-6); }
.section > .head h2 { font-size: var(--fs-xl); }
.section > .head p { color: var(--t-dim); margin-top: var(--s-2); }

.grid { display: grid; gap: var(--s-4); }
.grid.two { grid-template-columns: repeat(2,1fr); }
.grid.three { grid-template-columns: repeat(3,1fr); }
.grid.four { grid-template-columns: repeat(4,1fr); }
/* iter 197: the capabilities grid grew to 10 cards (Queues added). Flex-center it
   so the trailing row centers instead of leaving a lone card hanging left. */
.grid.three.caps { display: flex; flex-wrap: wrap; justify-content: center; }
.grid.three.caps > * { flex: 1 1 280px; }
@media (min-width: 861px) { .grid.three.caps > * { max-width: calc((100% - 2 * var(--s-4)) / 3); } }

.card { padding: var(--s-5); border-radius: var(--r-lg); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover { transform: translateY(-3px); border-color: var(--glass-hi); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-hi); }
.card .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-md); color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-tint-border); }
.card h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.card p { font-size: var(--fs-sm); color: var(--t-dim); }
.card .arrow { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--accent); opacity: 0; transform: translateX(-4px); transition: all var(--dur) var(--ease); }
.card:hover .arrow { opacity: 1; transform: translateX(0); }

.path { padding: var(--s-6); }
.path .tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.path h3 { font-size: var(--fs-lg); margin: var(--s-2) 0 var(--s-3); }
.path p { color: var(--t-dim); font-size: var(--fs-sm); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.5rem 0.95rem; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--t-body); background: var(--glass-bg); border: 1px solid var(--glass-border); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chip:hover { border-color: var(--accent); color: var(--t-bright); }

/* ---- Footer --------------------------------------------------------------- */
.footer { border-top: 1px solid var(--glass-border); margin-top: var(--s-10); }
.footer .inner { max-width: var(--w-max); margin: 0 auto; padding: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: space-between; color: var(--t-faint); font-size: var(--fs-sm); }
.footer a:hover { color: var(--t-body); }

/* ---- Prev/next ------------------------------------------------------------ */
.pagenav { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--glass-border); }
.pagenav a { flex: 1; padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--glass-border); background: var(--glass-bg); transition: border-color var(--dur-fast) var(--ease); }
.pagenav a:hover { border-color: var(--glass-hi); }
.pagenav .k { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--t-faint); }
.pagenav .v { color: var(--t-bright); font-weight: 600; }
.pagenav .next { text-align: right; }

/* ---- Hero kicker — distinctly ours, not a generic "● live" status badge --- */
.hero .eyebrow.hero-kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0; border: 0; background: none;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.01em; text-transform: none; color: var(--t-dim);
}
.hero-kicker .spark {
  width: 20px; height: 20px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, var(--accent-fill), var(--accent-2));
  box-shadow: 0 0 18px var(--accent-glow);
  animation: spark-ember 3.8s var(--ease) infinite;
}
@keyframes spark-ember {
  0%, 100% { box-shadow: 0 0 14px var(--accent-glow); transform: rotate(0deg) scale(1); }
  50%      { box-shadow: 0 0 28px var(--accent-glow); transform: rotate(8deg) scale(1.06); }
}

/* ---- Hero — rotating examples + try-now box ------------------------------- */
.try-lede { font-size: var(--fs-lg); color: var(--t-body); max-width: 34ch; margin: var(--s-5) auto var(--s-6); line-height: 1.4; }
/* Reserve 2 lines per example so a long word wrapping never shifts the page or
   the line below — the typewriter just grows/shrinks within the reserved box. */
.try-line { display: block; min-height: 2.8em; }
.try-lede .grad { background: linear-gradient(110deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rot { font-weight: 600; }
.try-lede .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--accent); border-radius: 1px; animation: caret-blink 1.05s steps(1, end) infinite; }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.try-now { display: flex; gap: var(--s-3); flex-wrap: wrap; max-width: 34rem; margin: 0 auto var(--s-3); }
.try-now input {
  flex: 1 1 16rem; min-width: 0; padding: 0.85rem 1.2rem; border-radius: var(--r-pill);
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--t-bright);
  font-family: var(--font-body); font-size: var(--fs-md); outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.try-now input::placeholder { color: var(--t-faint); }
.try-now input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.try-now .btn { padding: 0.85rem 1.4rem; font-size: var(--fs-md); }
.try-dev { display: inline-block; color: var(--accent); font-size: var(--fs-sm); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); }
.try-dev:hover { border-bottom-color: var(--accent); }

/* ---- Footer compliance ---------------------------------------------------- */
.footer-compliance { max-width: var(--w-max); margin: 0 auto; padding: var(--s-6) var(--s-8) 0; }
.footer-compliance .fc-head { display: flex; align-items: center; gap: var(--s-2); color: var(--t-bright); font-weight: 600; font-size: var(--fs-sm); }
.footer-compliance .fc-head svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.footer-compliance p { color: var(--t-dim); font-size: var(--fs-sm); max-width: 92ch; margin-top: var(--s-2); line-height: 1.6; }
.footer-compliance .link, .footer .inner .link, .try-dev.link { color: var(--accent); }
.footer-compliance .link:hover { color: var(--t-bright); }

/* ---- FAQ (homepage GEO Q&A) ----------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--s-3); max-width: 780px; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: var(--s-4) var(--s-5); font-family: var(--font-display); font-weight: 600; color: var(--t-bright); display: flex; align-items: center; gap: var(--s-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 600; font-size: 1.25em; line-height: 1; transition: transform var(--dur-fast) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 var(--s-5) var(--s-4); margin: 0; color: var(--t-dim); max-width: 72ch; }

/* ---- Reveal + lateral parallax -------------------------------------------- */
/* Baseline (works everywhere): one-shot directional reveal toggled by JS `.in`. */
[data-reveal] { opacity: 0; transform: translateY(20px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
/* Product / capability cards enter laterally by column — no per-card markup. */
.caps [data-reveal]:nth-child(3n+1) { transform: translateX(-48px); }
.caps [data-reveal]:nth-child(3n)   { transform: translateX(48px); }

/* Scroll-LINKED enhancement (Chromium today): motion tracks the scroll both ways,
   and ambient layers drift slower for depth. JS stands down when this is supported. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { opacity: 0; animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 2% cover 24%; }
    [data-reveal="left"]  { animation-name: reveal-left; }
    [data-reveal="right"] { animation-name: reveal-right; }
    .caps [data-reveal]:nth-child(3n+1) { animation-name: reveal-left; }
    .caps [data-reveal]:nth-child(3n)   { animation-name: reveal-right; }
    .bg-atmos { animation: parallax-bg linear both; animation-timeline: scroll(root); }
    .hero-radiance { animation: parallax-radiance linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  }
}
@keyframes reveal-up    { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(-72px); } to { opacity: 1; transform: none; } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(72px); } to { opacity: 1; transform: none; } }
@keyframes parallax-bg       { from { transform: translateY(0); } to { transform: translateY(-7%); } }
@keyframes parallax-radiance { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(46px); } }

/* ---- Mobile --------------------------------------------------------------- */
.menu-toggle { display: none; }
@media (max-width: 1100px) { .shell.with-toc { grid-template-columns: var(--w-sidebar) minmax(0,1fr); } .toc { display: none; } }
@media (max-width: 860px) {
  .topnav { display: none; }
  /* Hamburger drops the landing-page nav down as a full-width panel. */
  .topnav.open {
    display: flex; flex-direction: column; gap: var(--s-1);
    position: fixed; left: 0; right: 0; top: var(--topbar-h); z-index: var(--z-overlay);
    background: var(--sidebar-bg); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--glass-border); padding: var(--s-3) var(--s-4);
  }
  .topnav.open a { padding: var(--s-3) var(--s-2); font-size: var(--fs-md); }
  .menu-toggle { display: inline-grid; }
  .shell, .shell.with-toc { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: var(--topbar-h); bottom: 0; width: 84%; max-width: 20rem; z-index: var(--z-overlay); background: var(--sidebar-bg); backdrop-filter: blur(18px); border-right: 1px solid var(--glass-border); transform: translateX(-104%); transition: transform var(--dur) var(--ease); }
  .sidebar.open { transform: none; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .content { padding: var(--s-6) var(--s-5) var(--s-10); min-width: 0; }
  .hero { padding: var(--s-10) var(--s-5) var(--s-8); }
  .hero h1 { max-width: none; }
  .topbar { padding: 0 var(--s-4); gap: var(--s-3); }
  .topbar-right { gap: var(--s-2); min-width: 0; }
  .topbar-right .btn { padding: 0.5rem 0.85rem; font-size: var(--fs-xs); }
  .searchbtn { display: none; }
  .code { max-width: 100%; }
  .code pre { min-width: 0; }
}
html, body { overflow-x: hidden; }

/* ---- Scrollbar ------------------------------------------------------------ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }

/* ---- "Coming soon" (not-yet-built links, never broken) -------------------- */
.is-soon { opacity: .45; cursor: default; }
.topnav a.is-soon::after, .footer a.is-soon::after, .btn.is-soon::after {
  content: "soon"; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .05em;
  margin-left: .4rem; padding: 1px 5px; border-radius: 6px; background: var(--glass-bg);
  border: 1px solid var(--glass-border); color: var(--t-faint); vertical-align: middle;
}
/* On filled (primary) buttons: don't dim the whole pill — the badge alone signals "soon",
   and the badge gets a contrasting dark backdrop instead of the glass-bg that disappears on the ember fill. */
.btn-primary.is-soon { opacity: 1; }
.btn-primary.is-soon::after { background: rgba(0,0,0,0.30); border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.92); }
.nav-group a.is-soon::after { content: none; }   /* sidebar: just dim, no badge clutter */

/* ---- ⌘K search ------------------------------------------------------------ */
.search-modal { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(0,0,0,.5); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.search-modal[hidden] { display: none; }
.search-box { width: min(560px, 92vw); background: var(--c-bg-2); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.search-box input { width: 100%; padding: 1rem 1.2rem; background: transparent; border: 0; border-bottom: 1px solid var(--glass-border); color: var(--t-bright); font-family: var(--font-body); font-size: var(--fs-md); outline: none; }
.search-results { list-style: none; margin: 0; padding: .4rem; max-height: 52vh; overflow: auto; }
.search-results li { display: flex; flex-direction: column; gap: 2px; padding: .6rem .8rem; border-radius: var(--r-sm); cursor: pointer; }
.search-results li.sel, .search-results li:hover { background: var(--glass-bg); }
.search-results .st { color: var(--t-bright); font-weight: 600; font-size: var(--fs-sm); }
.search-results .sd { color: var(--t-dim); font-size: var(--fs-xs); }
.search-results .empty { color: var(--t-faint); cursor: default; }

/* ---- Waitlist form -------------------------------------------------------- */
.wl-form { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; max-width: 32rem; margin: 0 auto; }
.wl-form input { flex: 1 1 16rem; padding: 0.7rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--t-bright); font-family: var(--font-body); font-size: var(--fs-sm); outline: none; transition: border-color var(--dur-fast) var(--ease); }
.wl-form input::placeholder { color: var(--t-faint); }
.wl-form input:focus { border-color: var(--accent); }
.wl-msg { min-height: 1.3em; margin-top: var(--s-3); color: var(--accent); font-size: var(--fs-sm); }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto; }
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bg-atmos, .hero-radiance, .hero-kicker .spark, .try-lede .caret { animation: none !important; }
  .hero-radiance { transform: translateX(-50%); }
}