/* Basaltu · Estrato em fluxo — v3 */
:root {
  --ivory:#f5f1e9; --paper:#fffdfa; --ink:#191817; --deep:#121210;
  --copper:#a65332; --copper-hover:#b65e3b; --copper-light:#e0a27e;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:Inter, 'Segoe UI', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --flow:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px, 4.5vw, 56px);
  --max:1200px;
  --header:68px;
  --section:clamp(64px, 8vw, 112px);
  --radius:6px;
}

/* Section tones: tone-auto follows the theme, tone-basalt is always dark. */
.tone-ivory, [data-theme="light"] .tone-auto {
  --bg:var(--ivory); --fg:#1f201d; --muted:#625d55; --faint:#8a8378; --line:rgba(31,32,29,.12); --line-strong:rgba(31,32,29,.26);
  --accent:var(--copper); --surface:var(--paper); --surface-2:#efe9de;
}
.tone-basalt, [data-theme="dark"] .tone-auto {
  --bg:var(--ink); --fg:#f2ede4; --muted:#a8a196; --faint:#7d776e; --line:rgba(245,241,233,.1); --line-strong:rgba(245,241,233,.24);
  --accent:var(--copper-light); --surface:#1f1f1c; --surface-2:#262623;
}
.tone-basalt { --bg:var(--deep); }

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--ink); scroll-padding-top:var(--header); }
html[data-theme="light"] { background:var(--ivory); }
body { margin:0; font:400 16px/1.6 var(--sans); color:#f2ede4; background:inherit; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
[data-theme="light"] body { color:#1f201d; }
img, svg { display:block; max-width:100%; }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:inherit; }
em { font-style:italic; color:var(--accent); }
:focus-visible { outline:2px solid var(--accent, var(--copper)); outline-offset:3px; border-radius:3px; }
.wrap { width:100%; max-width:calc(var(--max) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); }
section { position:relative; background:var(--bg); color:var(--fg); }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:200; padding:10px 16px; background:var(--copper); color:#fff; border-radius:var(--radius); text-decoration:none; }
.skip-link:focus { top:16px; }

/* Type: editorial serif for statements, sans for reading, mono for system labels. */
h1 { font-size:clamp(42px, 6.2vw, 84px); line-height:.98; letter-spacing:-.025em; }
h2 { font-size:clamp(32px, 3.9vw, 54px); line-height:1.04; letter-spacing:-.02em; text-wrap:balance; }
h3 { font-size:clamp(22px, 1.8vw, 26px); line-height:1.15; letter-spacing:-.01em; }
p { text-wrap:pretty; }
.eyebrow { margin:0 0 18px; font:500 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.lede { font-size:clamp(16px, 1.2vw, 18px); line-height:1.6; color:var(--muted); max-width:52ch; margin:0; }
.section-head { margin-bottom:clamp(36px, 4.5vw, 56px); }

/* Buttons and inline form */
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; border-radius:var(--radius); border:1px solid transparent; font:500 15px/1 var(--sans); text-decoration:none; white-space:nowrap; transition:background .2s var(--flow), border-color .2s, transform .2s var(--flow), box-shadow .2s; position:relative; }
.button .arrow { transition:transform .3s var(--flow); }
.button:hover .arrow { transform:translate(2px,-2px); }
.button:active { transform:translateY(1px); }
.button-primary { background:var(--copper); color:#fffdfa; box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 8px 24px -10px rgba(166,83,50,.7); }
.button-primary:hover { background:var(--copper-hover); }
.button-outline { border-color:var(--line-strong, rgba(245,241,233,.24)); background:transparent; }
.button-outline:hover { border-color:currentColor; }
.button-small { min-height:38px; padding:0 15px; font-size:13.5px; }
.full-width { width:100%; }
.text-link { display:inline-flex; align-items:center; gap:8px; padding:4px 0; border:0; background:none; font:500 14px/1.2 var(--sans); text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:4px; color:var(--fg, inherit); }
.text-link:hover { text-decoration-color:currentColor; }
.icon-button { width:38px; height:38px; display:inline-grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb, currentColor 22%, transparent); background:transparent; transition:border-color .2s; }
.icon-button:hover { border-color:currentColor; }
.icon-button svg { width:17px; height:17px; }

.waitlist-inline { display:flex; gap:8px; width:100%; max-width:520px; padding:6px; border-radius:calc(var(--radius) + 4px); background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--line-strong); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .2s, box-shadow .2s; }
.waitlist-inline:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.waitlist-inline input { flex:1; min-width:0; min-height:46px; padding:0 12px; border:0; background:transparent; color:var(--fg); font:400 16px/1 var(--sans); }
.waitlist-inline input:focus { outline:none; box-shadow:none; }
.waitlist-inline input::placeholder { color:var(--faint); }
.waitlist-inline .button { min-height:46px; }
.waitlist-inline.invalid { border-color:#c2553a; }
.form-hint { margin:12px 0 0; font-size:13px; color:var(--faint); }
.status-pill { display:inline-flex; align-items:center; gap:10px; margin:0 0 24px; padding:6px 12px 6px 10px; border:1px solid var(--line-strong); border-radius:99px; font:500 12px/1 var(--mono); letter-spacing:.02em; color:var(--fg); background:color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#6fbf73; box-shadow:0 0 0 0 rgba(111,191,115,.6); animation:ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(111,191,115,.5); } 70%, 100% { box-shadow:0 0 0 8px rgba(111,191,115,0); } }

/* Header */
.site-header { position:fixed; inset:0 0 auto; z-index:50; height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 var(--gutter); color:#f2ede4; transition:background .3s var(--flow), border-color .3s; border-bottom:1px solid transparent; }
[data-theme="light"] .site-header { color:#1f201d; }
.site-header.scrolled { background:rgba(25,24,23,.78); border-color:rgba(245,241,233,.07); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); }
[data-theme="light"] .site-header.scrolled { background:rgba(245,241,233,.84); border-color:rgba(31,32,29,.08); }
.site-header.on-dark { color:#f2ede4; }
[data-theme="light"] .site-header.on-dark.scrolled { background:rgba(18,18,16,.8); border-color:rgba(245,241,233,.07); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-product { font:500 25px/1 var(--serif); letter-spacing:-.02em; }
.brand-stop { color:var(--copper-light); }
[data-theme="light"] .site-header:not(.on-dark) .brand-stop { color:var(--copper); }
.brand-divider { width:1px; height:22px; background:currentColor; opacity:.22; }
.brand-parent { font:600 8.5px/1.25 var(--sans); letter-spacing:.22em; opacity:.65; }
.site-header nav { display:flex; gap:28px; font-size:13.5px; }
.site-header nav a { text-decoration:none; opacity:.7; transition:opacity .2s; }
.site-header nav a:hover { opacity:1; }
.header-actions { display:flex; align-items:center; gap:10px; }
.theme-toggle .moon { display:none; }
[data-theme="light"] .theme-toggle .sun { display:none; }
[data-theme="light"] .theme-toggle .moon { display:block; }

/* Hero: ivory strata, editorial type on the left, the product in motion on the right */
.atmo { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.no-webgl .hero-media { background:radial-gradient(70% 40% at 40% 100%, rgba(36,37,34,.16), transparent 70%); }
.hero { min-height:min(100svh, 920px); display:flex; flex-direction:column; overflow:hidden; padding:calc(var(--header) + clamp(28px, 5vh, 64px)) 0 0; --bg:#f6f1e8; }
[data-theme="dark"] .hero { --bg:#191817; }
.hero-media { position:absolute; inset:0; }
.hero-media::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, var(--bg) 0%, transparent 30%), linear-gradient(90deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 42%); }
.hero-grid { position:relative; z-index:2; flex:1; display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:clamp(32px, 4vw, 64px); align-items:center; padding-bottom:clamp(28px, 5vh, 56px); }
.hero-content { pointer-events:none; }
.hero-content > * { pointer-events:auto; }
.hero-kicker { display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hero-kicker span:not(.status-dot) { opacity:.5; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#5fae63; box-shadow:0 0 0 0 rgba(95,174,99,.55); animation:ping 2.4s infinite; flex:none; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(95,174,99,.5); } 70%, 100% { box-shadow:0 0 0 8px rgba(95,174,99,0); } }
.hero h1 { font-size:clamp(46px, 4.7vw, 76px); line-height:.96; letter-spacing:-.035em; font-weight:400; }
@media (max-width: 1080px) { .hero h1 { font-size:clamp(46px, 8vw, 76px); } }
.hero h1 em { font-weight:400; }
.line { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.line > span { display:block; transform:translateY(105%); animation:rise 1.1s var(--flow) forwards; }
.line:nth-child(2) > span { animation-delay:.1s; }
@keyframes rise { to { transform:none; } }
.hero-kicker, .hero-copy, .hero .waitlist-inline, .hero .form-hint { opacity:0; animation:fade 1s var(--flow) forwards; }
.hero-kicker { animation-delay:.05s; } .hero-copy { animation-delay:.3s; } .hero .waitlist-inline { animation-delay:.6s; } .hero .form-hint { animation-delay:.7s; }
@keyframes fade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.hero-copy { margin:24px 0 0; max-width:46ch; font:500 clamp(12px, .95vw, 13.5px)/1.75 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hero-q { display:block; margin-bottom:10px; color:var(--fg); }
.hero .waitlist-inline { margin-top:30px; }
.hero-foot { position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; padding-top:18px; padding-bottom:22px; background:var(--bg); box-shadow:0 0 0 100vmax var(--bg); clip-path:inset(0 -100vmax); }
.hero-foot::before { content:''; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:var(--line); }
.clients-label { margin:0; font:500 11.5px/1.3 var(--mono); color:var(--faint); white-space:nowrap; }
.client-logos { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; flex:1; }
.client-logo { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); white-space:nowrap; transition:color .2s; }
.client-logo:hover { color:var(--fg); }
.client-logo svg { width:17px; height:17px; flex:none; }
.motion-control { margin-left:auto; display:inline-flex; border:0; background:none; padding:4px 0; color:var(--faint); }
.motion-control:hover { color:var(--fg); }
.mono-mark { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 3px; border-radius:4px; border:1px solid currentColor; font:600 8.5px/1 var(--mono); letter-spacing:0; }
.motion-symbol { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; font-size:9px; }

/* The product window, recreated in HTML and driven by real proof-of-concept records */
.hero-app { position:relative; opacity:0; animation:app-in 1.2s var(--flow) .35s forwards; margin-right:calc(var(--gutter) * -1.4); }
@keyframes app-in { from { opacity:0; transform:translate3d(40px, 16px, 0) scale(.98); } to { opacity:1; transform:none; } }
.app-window { --w-bg:#fbf8f2; --w-fg:#1f201d; --w-muted:#77716a; --w-line:rgba(31,32,29,.09); --w-soft:#f1ebe0; --w-nav:#232320;
  border-radius:12px; overflow:hidden; background:var(--w-bg); color:var(--w-fg); border:1px solid rgba(31,32,29,.1); box-shadow:0 60px 120px -50px rgba(31,26,20,.45), 0 18px 40px -24px rgba(31,26,20,.25); font-size:12.5px; }
[data-theme="dark"] .app-window { --w-bg:#1f1f1c; --w-fg:#ece7de; --w-muted:#9b948a; --w-line:rgba(245,241,233,.08); --w-soft:#2a2a26; --w-nav:#141412; border-color:rgba(245,241,233,.08); box-shadow:0 60px 120px -50px rgba(0,0,0,.85); }
.app-chrome { display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-bottom:1px solid var(--w-line); background:color-mix(in srgb, var(--w-soft) 60%, var(--w-bg)); }
.app-chrome i { width:9px; height:9px; border-radius:50%; background:#d9a08a; }
.app-chrome i:nth-child(2) { background:#d8c08a; } .app-chrome i:nth-child(3) { background:#9cbf8f; }
.app-chrome span { margin-left:10px; font:500 10.5px/1 var(--mono); color:var(--w-muted); }
.app-body { display:grid; grid-template-columns:132px 1fr; height:clamp(380px, 46vw, 470px); }
.app-nav { display:flex; flex-direction:column; gap:3px; padding:14px 8px; background:var(--w-nav); color:#d8d2c7; }
.app-logo { padding:2px 8px 14px; font:500 17px/1 var(--serif); color:#f5f1e9; }
.app-logo b { color:var(--copper-light); font-weight:500; }
.app-nav-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; font-size:11.5px; opacity:.72; transition:background .4s, opacity .4s; }
.app-nav-item svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; flex:none; }
.app-nav-item.active { background:rgba(224,162,126,.16); color:#f5d6c3; opacity:1; }
.app-main { display:flex; flex-direction:column; min-width:0; padding:12px 14px 0; }
.app-search { display:flex; align-items:center; gap:8px; height:34px; padding:0 4px 0 12px; border:1px solid var(--w-line); border-radius:8px; background:var(--w-bg); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.app-search svg { width:14px; height:14px; fill:none; stroke:var(--w-muted); stroke-width:1.8; flex:none; }
.app-query { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-query.typing::after { content:''; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--copper); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.app-go { width:26px; height:26px; display:grid; place-items:center; border-radius:6px; background:var(--copper); color:#fff; font-size:13px; transition:transform .2s; }
.app-go.press { transform:scale(.88); }
.app-chips { display:flex; gap:5px; margin:10px 0; overflow:hidden; }
.app-chips span { flex:none; padding:4px 9px; border:1px solid var(--w-line); border-radius:99px; font-size:10.5px; color:var(--w-muted); transition:all .35s; }
.app-chips span.on { background:var(--copper); border-color:var(--copper); color:#fff; }
.app-split { flex:1; min-height:0; display:grid; grid-template-columns:.95fr 1.25fr; gap:10px; }
.app-results { min-height:0; overflow:hidden; border-right:1px solid var(--w-line); padding-right:10px; }
.app-count { font:500 10.5px/1 var(--mono); color:var(--w-muted); margin:2px 0 8px; }
.app-list { display:flex; flex-direction:column; gap:6px; }
.app-item { padding:9px 10px; border:1px solid var(--w-line); border-radius:8px; background:var(--w-bg); opacity:0; transform:translateY(8px); transition:opacity .45s var(--flow), transform .45s var(--flow), border-color .3s, background .3s; }
.app-item.in { opacity:1; transform:none; }
.app-item.sel { border-color:color-mix(in srgb, var(--copper) 55%, transparent); background:color-mix(in srgb, var(--copper) 6%, var(--w-bg)); }
.app-tag { display:inline-block; margin-bottom:4px; padding:2px 6px; border-radius:4px; font:500 9.5px/1.2 var(--mono); color:var(--copper); background:color-mix(in srgb, var(--copper) 11%, transparent); }
.app-tag.green { color:#4f8a52; background:rgba(95,174,99,.13); }
.app-item strong { display:block; font:500 11.5px/1.3 var(--mono); }
.app-item small { display:block; margin-top:2px; color:var(--w-muted); font-size:10.5px; line-height:1.35; }
.app-doc { min-height:0; overflow:hidden; padding:2px 2px 0; }
.doc-head { opacity:0; transform:translateY(6px); transition:opacity .5s var(--flow), transform .5s var(--flow); }
.app-doc.in .doc-head { opacity:1; transform:none; }
.doc-crumb { font-size:10px; color:var(--w-muted); }
.doc-title { margin:4px 0 6px; font:500 17px/1.15 var(--serif); }
.doc-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:10px; color:var(--w-muted); }
.doc-tabs { display:flex; gap:12px; margin:10px 0 8px; border-bottom:1px solid var(--w-line); font-size:10.5px; color:var(--w-muted); }
.doc-tabs span { padding-bottom:6px; }
.doc-tabs span:first-child { color:var(--w-fg); border-bottom:1.5px solid var(--copper); }
.doc-lines { display:flex; flex-direction:column; gap:6px; }
.doc-line { display:grid; grid-template-columns:16px 1fr; gap:6px; font:400 11px/1.5 var(--serif); opacity:0; transform:translateY(6px); transition:opacity .45s var(--flow), transform .45s var(--flow); }
.doc-line.in { opacity:1; transform:none; }
.doc-line i { font:normal 9px/1.8 var(--mono); color:var(--w-muted); }
.doc-line.ghost span { display:block; height:7px; margin:5px 0 3px; border-radius:3px; background:var(--w-soft); }
.doc-line.ghost span + span { width:70%; margin-top:0; }
.doc-line.cite p { margin:0; padding:6px 8px; border-radius:6px; background:linear-gradient(90deg, color-mix(in srgb, var(--copper) 16%, transparent) 50%, transparent 50%); background-size:200% 100%; background-position:100% 0; transition:background-position 1.2s var(--flow); }
.doc-line.cite.mark p { background-position:0 0; }
.doc-actions { display:flex; gap:6px; margin-top:10px; opacity:0; transition:opacity .4s; }
.app-doc.done .doc-actions { opacity:1; }
.doc-actions span { padding:5px 9px; border-radius:6px; border:1px solid var(--w-line); font-size:10px; }
.doc-actions span:first-child { background:var(--copper); border-color:var(--copper); color:#fff; }
.doc-chart { display:flex; align-items:flex-end; gap:4px; height:92px; margin-top:6px; padding-bottom:4px; border-bottom:1px solid var(--w-line); }
.doc-chart i { flex:1; height:0; border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--w-fg) 18%, transparent); transition:height .7s var(--flow); }
.doc-chart i.peak { background:var(--copper); }
.doc-stat { display:flex; gap:14px; margin-top:8px; }
.doc-stat div { font-size:10px; color:var(--w-muted); }
.doc-stat b { display:block; font:400 18px/1.1 var(--serif); color:var(--w-fg); }
.app-toast { position:absolute; left:clamp(-40px, -3vw, -16px); bottom:-22px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:#1f201d; color:#f2ede4; box-shadow:0 24px 50px -20px rgba(0,0,0,.55); font-size:12px; opacity:0; transform:translateY(14px) scale(.97); transition:opacity .5s var(--flow), transform .5s var(--flow); }
[data-theme="dark"] .app-toast { background:#f2ede4; color:#1f201d; }
.app-toast.show { opacity:1; transform:none; }
.toast-check { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#5fae63; color:#fff; font-size:12px; }
.app-toast strong { display:block; font-weight:600; }
.app-toast small { opacity:.7; }
.toast-logos { padding-left:12px; border-left:1px solid color-mix(in srgb, currentColor 18%, transparent); font:500 10.5px/1.3 var(--mono); opacity:.75; }

/* End of the hero loop: the interface folds into the Basaltu mark and connects to the agents */
.app-window { clip-path:circle(150% at 50% 50%); transition:clip-path 1s var(--flow), background .6s var(--flow), border-color .6s; }
.app-chrome, .app-body { transition:opacity .35s var(--flow); }
.hero-app.packing .app-chrome, .hero-app.packing .app-body { opacity:0; }
.hero-app.packing .app-window { clip-path:circle(46px at 50% 50%); background:#232320; border-color:transparent; }
[data-theme="dark"] .hero-app.packing .app-window { background:#f2ede4; }
.hub { position:absolute; inset:0; pointer-events:none; }
.hub-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hub-lines path { fill:none; stroke:color-mix(in srgb, var(--fg) 38%, transparent); stroke-width:1.3; stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset .9s var(--flow); transition-delay:calc(var(--i) * 70ms + .15s); }
.hub-lines path.pulse { stroke:var(--copper); stroke-width:2; stroke-dasharray:10 var(--len); stroke-dashoffset:0; opacity:0; transition:opacity .4s; filter:drop-shadow(0 0 3px rgba(166,83,50,.6)); }
.hero-app.packed .hub-lines path { stroke-dashoffset:0; }
.hero-app.packed .hub-lines path.pulse { opacity:1; animation:hub-pulse 1.8s linear infinite; animation-delay:calc(var(--i) * 140ms + .9s); }
@keyframes hub-pulse { from { stroke-dashoffset:0; } to { stroke-dashoffset:calc(var(--len) * -1); } }
.hub-core { position:absolute; left:50%; top:50%; width:92px; height:92px; margin:-46px 0 0 -46px; display:grid; place-items:center; border-radius:50%; color:#f5f1e9; opacity:0; transform:scale(.6); transition:opacity .4s var(--flow), transform .6s var(--flow); }
[data-theme="dark"] .hub-core { color:#1f201d; }
.hub-core span { font:500 50px/1 var(--serif); letter-spacing:-.04em; transform:translateY(-3px); }
.hub-core i { font-style:normal; color:var(--copper-light); }
[data-theme="dark"] .hub-core i { color:var(--copper); }
.hub-core::after { content:''; position:absolute; inset:-10px; border-radius:50%; border:1px solid color-mix(in srgb, var(--copper) 55%, transparent); opacity:0; }
.hero-app.packing .hub-core { opacity:1; transform:none; transition-delay:.55s; }
.hero-app.packed .hub-core::after { animation:core-ring 2.2s var(--flow) infinite; }
@keyframes core-ring { from { opacity:.9; transform:scale(.85); } to { opacity:0; transform:scale(1.5); } }
.hub-node { position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; width:96px; margin-left:-48px; margin-top:-26px; opacity:0; transform:scale(.7); transition:opacity .45s var(--flow), transform .55s var(--flow); transition-delay:calc(var(--i) * 70ms + .55s); }
.hero-app.packed .hub-node { opacity:1; transform:none; }
.hub-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:1px solid var(--line-strong); color:var(--fg); box-shadow:0 10px 24px -14px rgba(31,26,20,.5); font:500 15px/1 var(--serif); }
.hub-icon svg { width:24px; height:24px; }
.hub-icon.mono { font:500 13px/1 var(--mono); letter-spacing:.02em; }
.hub-node small { font:500 11px/1.2 var(--sans); color:var(--fg); text-align:center; white-space:nowrap; }
.hub-caption { position:absolute; left:50%; bottom:5%; transform:translate(-50%, 8px); margin:0; padding:10px 20px 11px; border-radius:16px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; background:color-mix(in srgb, var(--bg) 88%, transparent); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); width:max-content; max-width:94%; font:400 clamp(17px, 1.6vw, 22px)/1.2 var(--serif); color:var(--fg); opacity:0; transition:opacity .5s var(--flow) .9s, transform .6s var(--flow) .9s; }
.hub-caption small { font:500 11px/1.2 var(--mono); letter-spacing:.02em; color:var(--muted); }
.hero-app.packed .hub-caption { opacity:1; transform:translate(-50%, 0); }
@media (max-width: 560px) {
  .demo-bar { gap:12px; }
  .ai-switch { flex:1 1 auto; }
  .story { order:3; flex:1 1 100%; min-width:0; }
  .story-label { font-size:10.5px; }
  .story-label b { display:none; }
  .src { height:46px; padding:6px; border-radius:9px; }
  .src svg { height:26px; }
  .src-esaj svg { height:12px; }
  .flow-sources { gap:6px; }
  .hub-node { width:74px; margin-left:-37px; margin-top:-20px; }
  .hub-icon { width:40px; height:40px; }
  .hub-icon svg { width:19px; height:19px; }
  .hub-node small { font-size:9.5px; white-space:normal; }
  .hub-core { width:72px; height:72px; margin:-36px 0 0 -36px; }
  .hub-core span { font-size:38px; }
  .hero-app.packing .app-window { clip-path:circle(36px at 50% 50%); }
  .hub-caption { font-size:15px; bottom:2%; }
}

/* Reading progress */

/* Engine: the counter, the scrollytelling stage and the formula */
.engine { padding:var(--section) 0; border-top:1px solid var(--line); }
.engine-head { max-width:820px; }
.engine-head h2 { margin-bottom:18px; }
.engine-stats { display:grid; grid-template-columns:repeat(3, 1fr); margin:clamp(36px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat { padding:22px 20px 22px 0; }
.stat + .stat { padding-left:20px; border-left:1px solid var(--line); }
.stat strong { display:block; font:400 clamp(38px, 4.4vw, 60px)/1 var(--serif); letter-spacing:-.03em; color:var(--fg); white-space:nowrap; }
.stat strong small { font-size:.5em; letter-spacing:0; color:var(--accent); }
.stat .stat-word { font-size:clamp(26px, 2.6vw, 36px); line-height:1.25; color:var(--accent); }
.stat > span { display:block; margin-top:8px; font-size:13.5px; color:var(--muted); max-width:24ch; }
.engine-story { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px, 5vw, 80px); }
.engine-visual { position:relative; }
.engine-stage { position:sticky; top:calc(var(--header) + 24px); height:min(480px, calc(100svh - var(--header) - 48px)); border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb, var(--surface) 70%, transparent); overflow:hidden; }
#engine-canvas { position:absolute; inset:0; width:100%; height:100%; }
.engine-overlay { position:absolute; inset:0; pointer-events:none; }
.ov { position:absolute; transform:translate(-50%, -50%); padding:5px 10px; border-radius:99px; border:1px solid var(--line-strong); background:color-mix(in srgb, var(--bg) 85%, transparent); font:500 11px/1 var(--mono); color:var(--fg); white-space:nowrap; opacity:0; transition:opacity .5s var(--flow), transform .5s var(--flow); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.ov.show { opacity:1; }
.ov.accent { border-color:var(--accent); color:var(--accent); }
.ov.plain { border:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--muted); font-size:10px; }
.ov.node { padding:8px 12px; border-radius:8px; font-size:11.5px; }
.ov.final { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.engine-progress { position:absolute; left:18px; top:18px; display:flex; gap:4px; }
.engine-progress i { width:22px; height:3px; border-radius:2px; background:var(--line-strong); transition:background .4s; }
.engine-progress i.on { background:var(--accent); }
.engine-caption { position:absolute; left:18px; right:18px; bottom:14px; margin:0; font:500 11px/1.4 var(--mono); color:var(--muted); }
.engine-steps { list-style:none; margin:0; padding:0; }
.engine-step { min-height:min(44svh, 380px); display:flex; flex-direction:column; justify-content:center; padding:24px 0; opacity:.32; transition:opacity .5s var(--flow); }
.engine-step:first-child { min-height:min(34svh, 300px); justify-content:flex-start; padding-top:32px; }
.engine-step.active { opacity:1; }
.step-k { font:500 12px/1 var(--mono); color:var(--accent); letter-spacing:.04em; }
.engine-step h3 { margin:12px 0 10px; font-size:clamp(26px, 2.6vw, 36px); }
.engine-step p { margin:0; max-width:44ch; color:var(--muted); font-size:16.5px; }

/* Staggered reveals and the step mini-interfaces come alive when visible */
.reveal.pending [data-stagger-item], .stagger.pending > * { opacity:0; transform:translateY(16px); }
.stagger.visible > * { opacity:1; transform:none; transition:opacity .7s var(--flow), transform .8s var(--flow); }
.stagger.visible > *:nth-child(2) { transition-delay:.08s; } .stagger.visible > *:nth-child(3) { transition-delay:.16s; } .stagger.visible > *:nth-child(4) { transition-delay:.24s; } .stagger.visible > *:nth-child(5) { transition-delay:.32s; }
@keyframes pop { from { opacity:0; transform:translateY(6px) scale(.94); } }

/* Protocol */
.protocol { padding:var(--section) 0; overflow:hidden; }
.protocol-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px, 6vw, 96px); align-items:center; }
.protocol h2 { margin-bottom:20px; }
.benefit-list { list-style:none; margin:36px 0 0; padding:0; border-top:1px solid var(--line); }
.benefit-list li { display:grid; grid-template-columns:72px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.benefit-key { font:400 26px/1 var(--serif); color:var(--accent); padding-top:2px; }
.benefit-list strong { display:block; font-weight:500; font-size:15.5px; margin-bottom:2px; }
.benefit-list span:not(.benefit-key) { font-size:14.5px; color:var(--muted); }
.flow { display:flex; flex-direction:column; align-items:center; }
.flow-sources { list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.src { display:grid; place-items:center; height:60px; padding:10px 12px; border-radius:12px; background:#f4efe6; box-shadow:0 12px 30px -20px rgba(0,0,0,.7); }
.src svg { width:100%; max-width:108px; height:34px; }
.src-esaj { background:#1f4f96; }
.src-esaj svg { fill:#fff; height:17px; max-width:70px; }
.flow-out { width:100%; height:clamp(46px, 5vw, 70px); overflow:visible; }
.flow-out .pulse { animation-delay:1.6s; }
.flow-outputs { list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.out { padding:10px 10px 14px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(255,255,255,.025); }
.out strong { display:block; margin-top:12px; font:400 16px/1.2 var(--serif); color:var(--fg); }
.out > span { display:block; margin-top:5px; font-size:12px; line-height:1.45; color:var(--muted); }
.out-visual { position:relative; height:66px; padding:9px 10px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--line); overflow:hidden; }
.out-quote i { display:block; height:4px; margin-bottom:6px; border-radius:2px; background:var(--line-strong); width:86%; }
.out-quote i:nth-child(2) { width:64%; }
.out-quote b { display:block; margin:2px 0 6px; padding-left:7px; border-left:2px solid var(--copper); font:italic 400 11px/1.25 var(--serif); color:var(--copper-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.out-doc { display:flex; align-items:center; gap:10px; }
.doc-sheet { width:38px; height:48px; padding:7px 6px; border-radius:3px; background:#f4efe6; display:flex; flex-direction:column; gap:4px; }
.doc-sheet i { height:3px; border-radius:2px; background:#c9c0b2; }
.doc-sheet i.hl { background:var(--copper); }
.out-doc em, .out-table em { font:normal 500 11px/1 var(--mono); color:var(--copper-light); }
.out-chart { display:flex; align-items:flex-end; gap:5px; }
.out-chart i { flex:1; height:var(--h); border-radius:2px 2px 0 0; background:color-mix(in srgb, var(--copper) 70%, transparent); }
.out-chart svg { position:absolute; inset:9px 10px; width:calc(100% - 20px); height:calc(100% - 18px); overflow:visible; }
.out-chart path { fill:none; stroke:var(--fg); stroke-width:1.2; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
.out-table { display:grid; gap:5px; align-content:start; }
.out-table i { height:8px; border-radius:2px; background:linear-gradient(90deg, var(--line-strong) 0 30%, transparent 30% 34%, var(--line) 34% 70%, transparent 70% 74%, var(--line) 74%); }
.out-table i:first-child { background:linear-gradient(90deg, color-mix(in srgb, var(--copper) 60%, transparent) 0 30%, transparent 30% 34%, color-mix(in srgb, var(--copper) 35%, transparent) 34% 70%, transparent 70% 74%, color-mix(in srgb, var(--copper) 35%, transparent) 74%); }
.out-table em { position:absolute; right:9px; bottom:7px; }
.flow-lines { width:100%; height:clamp(56px, 6vw, 90px); margin-top:6px; overflow:visible; }
.flow-lines path, .flow-out path { fill:none; stroke:var(--line-strong); stroke-width:1; vector-effect:non-scaling-stroke; }
@keyframes pulse { to { stroke-dashoffset:0; } }
.flow-core { position:relative; width:clamp(190px, 19vw, 250px); aspect-ratio:1; display:grid; place-items:center; }
.vortex { position:absolute; inset:-24%; width:148%; height:148%; pointer-events:none; }
.core-text { position:relative; text-align:center; display:grid; gap:6px; text-shadow:0 0 18px #121210, 0 0 6px #121210; }
.core-label { font:500 10px/1 var(--mono); letter-spacing:.14em; color:var(--muted); }
.core-name { font:400 clamp(32px, 3vw, 42px)/1 var(--serif); letter-spacing:-.03em; color:var(--fg); }
.core-name span { color:var(--copper-light); }

/* Steps */

/* Demo: the same conversations, rendered in the assistant the visitor uses */
.demo-section { padding:var(--section) 0; }
.demo-bar { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-bottom:20px; }
.ai-switch { position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; border:1px solid var(--line-strong); border-radius:99px; background:color-mix(in srgb, var(--surface) 70%, transparent); }
.ai-switch button { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:0 18px; border:0; border-radius:99px; background:none; color:var(--muted); font-size:14px; font-weight:500; transition:color .35s var(--flow); }
.ai-switch button svg { width:16px; height:16px; flex:none; }
.ai-switch button:hover { color:var(--fg); }
.ai-switch button[aria-checked="true"] { color:var(--bg); }
.ai-switch-thumb { position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:99px; background:var(--fg); transition:transform .55s var(--flow); }
.ai-switch[data-active="claude"] .ai-switch-thumb { transform:translateX(100%); }
.story { flex:1; min-width:260px; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.story-seg { display:flex; flex-direction:column; gap:9px; padding:8px 0; border:0; background:none; text-align:left; color:var(--muted); cursor:pointer; }
.story-track { display:block; height:3px; border-radius:2px; background:var(--line-strong); overflow:hidden; }
.story-track i { display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--flow); }
.story-label { font:500 12px/1 var(--mono); white-space:nowrap; transition:color .3s; }
.story-label b { margin-right:4px; font-weight:500; color:var(--faint); }
.story-seg:hover, .story-seg.active { color:var(--fg); }
.story-seg.active .story-label b { color:var(--accent); }
.story-pause { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; background:none; color:var(--muted); font-size:10px; }
.story-pause:hover { color:var(--fg); border-color:var(--fg); }
.demo-stage { display:grid; grid-template-columns:230px minmax(0, 1fr); gap:28px; align-items:start; }
.pipeline { --pl:0; position:sticky; top:96px; list-style:none; margin:0; padding:8px 0 0; display:grid; gap:24px; }
.pipeline::before, .pipeline::after { content:''; position:absolute; left:7px; top:18px; bottom:var(--last, 60px); width:1px; background:var(--line-strong); }
.pipeline::after { background:var(--accent); transform:scaleY(var(--pl)); transform-origin:top; transition:transform .7s var(--flow); }
.pipeline li { position:relative; display:grid; grid-template-columns:15px minmax(0, 1fr); gap:14px; opacity:.42; transition:opacity .45s var(--flow); }
.pipeline li.now, .pipeline li.done { opacity:1; }
.pl-dot { position:relative; z-index:1; width:15px; height:15px; margin-top:4px; border:1px solid var(--line-strong); border-radius:50%; background:var(--bg); transition:background .3s, border-color .3s, box-shadow .3s; }
.pipeline li.done .pl-dot { background:var(--accent); border-color:var(--accent); }
.pipeline li.now .pl-dot { border-color:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); }
.pipeline li.now .pl-dot::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); animation:pl-blink .9s ease-in-out infinite alternate; }
@keyframes pl-blink { from { opacity:.25; } to { opacity:1; } }
.pl-k { display:block; margin-bottom:5px; font:500 10.5px/1 var(--mono); color:var(--accent); }
.pipeline strong { display:block; font:400 18px/1.15 var(--serif); font-weight:400; }
.pipeline small { display:block; margin-top:5px; font:400 11.5px/1.45 var(--mono); color:var(--muted); overflow-wrap:anywhere; transition:color .3s; }
.pipeline li.now small { color:var(--fg); }
.demo-head { display:grid; grid-template-columns:1.1fr 1fr; gap:24px 56px; align-items:end; }
@keyframes count { to { transform:scaleX(1); } }

/* Assistant shell. Skins override the --a-* tokens and a few shapes. */
.assistant { --a-bg:#fffdfa; --a-side:#f3eee5; --a-fg:#1f201d; --a-muted:#6b665e; --a-line:rgba(31,32,29,.1); --a-soft:#f1ece3; --a-ui:var(--copper); --a-data:var(--copper); --a-input:#fffdfa; --a-font:var(--sans); --a-reply-font:var(--sans); --a-reply-size:15px;
  display:grid; grid-template-columns:250px 1fr; height:clamp(600px, 78vh, 720px); border-radius:14px; overflow:hidden; color:var(--a-fg); background:var(--a-bg); border:1px solid var(--a-line); font-family:var(--a-font); box-shadow:0 50px 100px -50px rgba(18,18,16,.5), 0 2px 6px rgba(18,18,16,.05); transition:background .35s, color .35s; }
[data-theme="dark"] .assistant { --a-bg:#1c1c1a; --a-side:#161614; --a-fg:#ece7de; --a-muted:#9e978c; --a-line:rgba(245,241,233,.08); --a-soft:#262623; --a-ui:var(--copper-light); --a-data:var(--copper-light); --a-input:#22221f; box-shadow:0 50px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(245,241,233,.03); }
.assistant[data-skin="chatgpt"] { --a-bg:#ffffff; --a-side:#f9f9f9; --a-fg:#0d0d0d; --a-muted:#5d5d5d; --a-line:rgba(0,0,0,.08); --a-soft:#f4f4f4; --a-ui:#0d0d0d; --a-input:#ffffff; --a-font:ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --a-reply-size:15.5px; border-radius:12px; }
[data-theme="dark"] .assistant[data-skin="chatgpt"] { --a-bg:#212121; --a-side:#171717; --a-fg:#ececec; --a-muted:#afafaf; --a-line:rgba(255,255,255,.08); --a-soft:#303030; --a-ui:#ececec; --a-input:#303030; }
.assistant[data-skin="claude"] { --a-bg:#faf9f5; --a-side:#f5f4ed; --a-fg:#141413; --a-muted:#73726c; --a-line:rgba(31,30,29,.12); --a-soft:#f0eee6; --a-ui:#d97757; --a-input:#ffffff; --a-font:ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --a-reply-font:Georgia, 'Newsreader', 'Times New Roman', serif; --a-reply-size:16.5px; border-radius:16px; }
[data-theme="dark"] .assistant[data-skin="claude"] { --a-bg:#262624; --a-side:#1f1e1d; --a-fg:#f5f4ed; --a-muted:#a6a39b; --a-line:rgba(222,220,209,.12); --a-soft:#141413; --a-ui:#d97757; --a-input:#30302e; }

.assistant-side { display:flex; flex-direction:column; gap:2px; min-height:0; padding:12px 10px; background:var(--a-side); border-right:1px solid var(--a-line); font-size:14px; overflow:hidden; }
.side-head { display:flex; align-items:center; gap:8px; padding:8px 10px 12px; font-weight:600; font-size:17px; }
.side-head svg { width:20px; height:20px; color:var(--a-ui); }
.assistant[data-skin="claude"] .side-head { font:500 21px/1 Georgia, var(--serif); letter-spacing:-.01em; }
.side-action { display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; border-radius:8px; background:none; color:var(--a-fg); text-align:left; font-size:14px; }
.side-action:hover { background:color-mix(in srgb, var(--a-fg) 6%, transparent); }
.plus-circle { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--a-ui); color:#fff; font-size:15px; }
.side-label { margin:16px 10px 6px; font-size:12px; font-weight:500; color:var(--a-muted); }
.side-list { display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.side-item { display:block; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--a-fg); text-align:left; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.92; }
.side-item.muted { color:var(--a-muted); cursor:default; }
button.side-item:hover { background:color-mix(in srgb, var(--a-fg) 6%, transparent); }
.side-item.active { background:color-mix(in srgb, var(--a-fg) 9%, transparent); opacity:1; }
.side-foot { margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-top:1px solid var(--a-line); font-size:13.5px; }
.side-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--copper); color:#fff; font-size:12px; font-weight:600; }
.assistant[data-skin="claude"] .side-avatar { background:#3d3a33; }
.side-connector { display:flex; align-items:center; gap:8px; margin:8px 0 0; padding:10px; border:1px solid var(--a-line); border-radius:8px; font-size:12.5px; }
.side-connector small { margin-left:auto; font:500 10.5px/1 var(--mono); color:#5fae63; }
.connector-dot { width:7px; height:7px; border-radius:50%; background:#5fae63; flex:none; }

.assistant-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.assistant-top { display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 16px; }
.top-title { font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assistant[data-skin="chatgpt"] .top-title { font-size:17px; font-weight:500; }
.top-title small { color:var(--a-muted); font-weight:400; margin-left:4px; }
.top-menu { display:none; width:30px; height:30px; place-items:center; color:var(--a-muted); }
.mcp-chip { margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:99px; border:1px solid var(--a-line); font:500 11.5px/1 var(--mono); color:var(--a-fg); white-space:nowrap; }

.assistant-thread { flex:1; min-height:0; overflow-y:auto; padding:18px clamp(16px, 4vw, 48px) 16px; display:flex; flex-direction:column; gap:20px; font-size:var(--a-reply-size); line-height:1.65; scrollbar-width:thin; overscroll-behavior:contain; }
.msg { width:100%; max-width:720px; margin:0 auto; animation:fade .4s var(--flow); }
.msg-user { display:flex; justify-content:flex-end; }
.msg-user p { margin:0; max-width:78%; padding:10px 16px; border-radius:20px; background:var(--a-soft); font-size:15px; line-height:1.55; font-family:var(--a-font); }
.assistant[data-skin="claude"] .msg-user p { border-radius:14px; padding:12px 16px; }
.msg-bot { display:grid; grid-template-columns:1fr; gap:12px; }
.bot-avatar { display:none; width:28px; height:28px; border-radius:50%; place-items:center; border:1px solid var(--a-line); color:var(--a-ui); font-size:13px; }
.bot-body { min-width:0; display:flex; flex-direction:column; gap:14px; font-family:var(--a-reply-font); }
.bot-body > p, .bot-body > ol, .bot-body > ul { margin:0; }
.bot-body ol, .bot-body ul { padding-left:1.3em; display:grid; gap:8px; }
.bot-body li::marker { color:var(--a-muted); }
.bot-body strong { font-weight:600; }
.assistant[data-skin="claude"] .bot-body strong { font-weight:700; }
.bot-sign { display:none; width:22px; height:22px; color:var(--a-ui); }
.assistant[data-skin="claude"] .bot-sign { display:block; }
.bot-sign.pulse { animation:spark 1.2s ease-in-out infinite; }
@keyframes spark { 50% { transform:rotate(25deg) scale(.85); opacity:.6; } }
.thinking { display:flex; align-items:center; gap:8px; color:var(--a-muted); font-size:14px; font-family:var(--a-font); }
.thinking span { background:linear-gradient(90deg, var(--a-muted) 0%, var(--a-fg) 50%, var(--a-muted) 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.stream-caret::after { content:''; display:inline-block; width:8px; height:8px; margin-left:4px; border-radius:50%; background:var(--a-fg); vertical-align:1px; animation:caret .9s ease-in-out infinite; }
.assistant[data-skin="claude"] .stream-caret::after { display:none; }
@keyframes caret { 50% { opacity:.2; } }

/* Tool calls */
.tool-call { font-family:var(--a-font); font-size:13.5px; animation:fade .4s var(--flow); }
.tool-head { display:flex; align-items:center; gap:10px; width:100%; padding:0; border:0; background:none; color:var(--a-muted); text-align:left; font:inherit; }
.tool-head:hover { color:var(--a-fg); }
.tool-state { width:16px; height:16px; flex:none; border-radius:50%; border:1.6px solid var(--a-line); border-top-color:var(--a-fg); animation:spin .8s linear infinite; }
.tool-call.done .tool-state { animation:none; border-color:#5fae63; background:#5fae63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center/11px no-repeat; }
@keyframes spin { to { transform:rotate(360deg); } }
.tool-label { flex:1; min-width:0; }
.tool-label b { color:var(--a-fg); font-weight:600; }
.tool-chev { transition:transform .25s var(--flow); font-size:16px; line-height:1; }
.tool-call.open .tool-chev { transform:rotate(90deg); }
.tool-body { display:none; margin-top:10px; border:1px solid var(--a-line); border-radius:10px; overflow:hidden; }
.tool-call.open .tool-body { display:block; }
.tool-section { padding:10px 12px; }
.tool-section + .tool-section { border-top:1px solid var(--a-line); }
.tool-section-label { margin-bottom:6px; font:500 10.5px/1 var(--mono); color:var(--a-muted); text-transform:uppercase; letter-spacing:.05em; }
.tool-params { margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px 16px; font:400 12px/1.4 var(--mono); }
.tool-params div { animation:fade .3s var(--flow); }
.tool-params dt { color:var(--a-muted); font-size:10.5px; }
.tool-params dd { margin:0; }
.tool-result { font:500 12px/1.45 var(--mono); }
.tool-result::before { content:'↳ '; color:var(--a-data); }
/* ChatGPT: a quiet single line; Claude: a bordered card with the tool name */
.assistant[data-skin="claude"] .tool-call { border:1px solid var(--a-line); border-radius:12px; background:color-mix(in srgb, var(--a-input) 70%, transparent); padding:10px 12px; }
.assistant[data-skin="claude"] .tool-state { border-top-color:var(--a-ui); }
.assistant[data-skin="claude"] .tool-body { border:0; border-top:1px solid var(--a-line); border-radius:0; margin:10px -12px -10px; }

/* Embedded results */
.embed { font-family:var(--a-font); font-size:14px; border:1px solid var(--a-line); border-radius:12px; padding:16px; background:color-mix(in srgb, var(--a-input) 60%, transparent); animation:fade .5s var(--flow); }
.embed-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px 16px; flex-wrap:wrap; margin-bottom:14px; }
.embed-title { font-weight:600; font-size:14px; }
.embed-title small { display:block; margin-top:2px; font:400 11.5px/1.3 var(--mono); color:var(--a-muted); }
.embed-note { margin:12px 0 0; font-size:12.5px; color:var(--a-muted); }
.seg { display:inline-flex; padding:3px; border-radius:8px; background:color-mix(in srgb, var(--a-fg) 6%, transparent); }
.seg button { padding:5px 10px; border:0; border-radius:6px; background:none; font:500 12px/1 var(--a-font); color:var(--a-muted); }
.seg button[aria-pressed="true"] { background:var(--a-bg); color:var(--a-fg); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.chips button { padding:5px 10px; border:1px solid var(--a-line); border-radius:99px; background:none; font:500 12px/1 var(--a-font); color:var(--a-muted); }
.chips button[aria-pressed="true"] { border-color:var(--a-data); color:var(--a-data); background:color-mix(in srgb, var(--a-data) 10%, transparent); }
.chips button b { font-weight:600; margin-left:3px; }
.records { display:flex; flex-direction:column; border-top:1px solid var(--a-line); }
.record { border-bottom:1px solid var(--a-line); }
.record-row { display:grid; grid-template-columns:78px 1fr auto 16px; align-items:center; gap:12px; width:100%; padding:10px 2px; border:0; background:none; text-align:left; font:400 13px/1.35 var(--a-font); color:var(--a-fg); }
.record-row:hover { background:color-mix(in srgb, var(--a-fg) 4%, transparent); }
.record-date { font:400 11.5px/1 var(--mono); color:var(--a-muted); }
.record-main strong { display:block; font:500 12.5px/1.3 var(--mono); }
.record-main small { color:var(--a-muted); font-size:12px; }
.badge { padding:3px 8px; border-radius:99px; font:500 11px/1.2 var(--mono); background:color-mix(in srgb, var(--a-data) 14%, transparent); color:var(--a-data); white-space:nowrap; }
.record-chev { color:var(--a-muted); transition:transform .25s var(--flow); }
.record.open .record-chev { transform:rotate(90deg); }
.record-detail { display:none; padding:4px 2px 14px 90px; }
.record.open .record-detail { display:block; animation:fade .3s var(--flow); }
.record-src { font:500 11px/1.3 var(--mono); color:var(--a-muted); }
.record-detail blockquote { margin:0 0 8px; padding-left:12px; border-left:2px solid var(--a-data); font:italic 400 15px/1.5 var(--serif); color:var(--a-fg); }
.embed a { color:var(--a-data); font-weight:500; font-size:13px; text-decoration:none; }
.embed a:hover { text-decoration:underline; }
.more-records { margin-top:10px; padding:6px 0; border:0; background:none; font:500 12.5px/1 var(--a-font); color:var(--a-data); }
.mini-bars { display:grid; gap:8px; margin-top:14px; }
.mini-bar { display:grid; grid-template-columns:110px 1fr 28px; align-items:center; gap:10px; font-size:12.5px; }
.mini-bar span:first-child { color:var(--a-muted); }
.mini-track { height:8px; border-radius:99px; background:color-mix(in srgb, var(--a-fg) 7%, transparent); overflow:hidden; }
.mini-track i { display:block; height:100%; width:var(--w); border-radius:inherit; background:var(--a-data); animation:widen .9s var(--flow) both; }
.mini-bar b { font:500 12px/1 var(--mono); text-align:right; }
@keyframes widen { from { width:0; } }
.source-line { display:flex; gap:6px; font:400 11.5px/1.45 var(--mono) !important; color:var(--a-muted); }
.source-line::before { content:'↳'; color:var(--a-data); }
.big-number { font:400 clamp(30px, 3.6vw, 42px)/1 var(--serif); letter-spacing:-.02em; }
.big-number small { display:block; margin-top:4px; font:400 12px/1.3 var(--a-font); color:var(--a-muted); letter-spacing:0; }

/* Bar chart */
.chart { position:relative; }
.bars { display:flex; align-items:flex-end; gap:5px; height:150px; padding-bottom:22px; border-bottom:1px solid var(--a-line); }
.bar { position:relative; flex:1; height:100%; display:flex; align-items:flex-end; padding:0; border:0; background:none; cursor:pointer; }
.bar i { display:block; width:100%; height:var(--h); border-radius:4px 4px 0 0; background:color-mix(in srgb, var(--a-fg) 18%, transparent); transform-origin:bottom; transition:height .6s var(--flow), background .2s; animation:grow .8s var(--flow) both; animation-delay:calc(var(--i) * 40ms); }
.bar.peak i { background:var(--a-data); }
.bars.sum .bar.peak i { background:color-mix(in srgb, var(--a-fg) 18%, transparent); }
.bar:hover i, .bar:focus-visible i, .bar.active i { background:color-mix(in srgb, var(--a-data) 70%, var(--a-fg)); }
.bar span { position:absolute; bottom:-19px; left:50%; transform:translateX(-50%); font:400 10px/1 var(--mono); color:var(--a-muted); }
@keyframes grow { from { transform:scaleY(0); } }
.tip { position:absolute; z-index:3; pointer-events:none; padding:7px 10px; border-radius:8px; background:var(--a-fg); color:var(--a-bg); font:500 12px/1.35 var(--a-font); white-space:nowrap; transform:translate(-50%, calc(-100% - 8px)); opacity:0; transition:opacity .15s; box-shadow:0 8px 20px -8px rgba(0,0,0,.4); }
.tip.show { opacity:1; }
.tip small { display:block; font-weight:400; opacity:.75; }

/* Donut */
.donut-wrap { display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:center; }
.donut { position:relative; width:170px; height:170px; }
.donut svg { width:100%; height:100%; transform:rotate(-90deg); }
.donut circle { fill:none; stroke-width:16; cursor:pointer; transition:stroke-width .2s var(--flow), opacity .2s; }
.donut circle.dim { opacity:.3; }
.donut circle.hot { stroke-width:20; }
.donut-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.donut-center strong { font:400 30px/1 var(--serif); }
.donut-center small { margin-top:4px; font-size:11.5px; color:var(--a-muted); max-width:110px; }
.legend { display:grid; gap:4px; }
.legend button { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border:0; border-radius:8px; background:none; text-align:left; font:400 13.5px/1.3 var(--a-font); color:var(--a-fg); }
.legend button:hover, .legend button.hot { background:color-mix(in srgb, var(--a-fg) 6%, transparent); }
.legend i { width:10px; height:10px; border-radius:3px; background:var(--c); }
.legend b { font:500 13px/1 var(--mono); }

/* Trend chart */
.trend { position:relative; }
.trend svg { width:100%; height:auto; overflow:visible; }
.trend .grid line { stroke:var(--a-line); }
.trend .axis text { fill:var(--a-muted); font:400 10px var(--mono); }
.trend .series path { fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:opacity .25s; }
.trend .series .area { stroke:none; opacity:.12; }
.trend .series circle { stroke:var(--a-bg); stroke-width:2; transition:r .15s; }
.trend .series.off { opacity:0; }
.trend .hover-line { stroke:var(--a-muted); stroke-dasharray:3 3; opacity:0; }
.trend .hit { fill:transparent; cursor:crosshair; }
.trend-legend { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.trend-legend button { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid var(--a-line); border-radius:99px; background:none; font:500 12px/1 var(--a-font); color:var(--a-fg); }
.trend-legend button[aria-pressed="false"] { opacity:.45; }
.trend-legend i { width:14px; height:3px; border-radius:2px; background:var(--c); }
.compare { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.compare div { padding:12px; border:1px solid var(--a-line); border-radius:10px; }
.compare span { display:block; font-size:12px; color:var(--a-muted); }
.compare strong { display:block; margin:6px 0 2px; font:400 24px/1 var(--serif); color:var(--a-data); }
.compare small { font:400 11px/1.3 var(--mono); color:var(--a-muted); }
.links { display:flex; flex-direction:column; }
.links .link-row { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:10px 0; border-bottom:1px solid var(--a-line); color:var(--a-fg) !important; font-weight:400 !important; }
.links .link-row:last-child { border-bottom:0; }
.links .link-row small { grid-column:1; font-size:12px; color:var(--a-muted); }
.links .link-row span { grid-row:span 2; align-self:center; color:var(--a-data); font:500 12px/1 var(--mono); }
.illustrative { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:99px; border:1px dashed var(--a-muted); font:500 10.5px/1.2 var(--mono); color:var(--a-muted); }

/* Composer */
.assistant-composer { padding:8px clamp(14px, 4vw, 48px) 10px; }
.composer-box { max-width:740px; margin:0 auto; padding:12px 12px 10px 18px; border-radius:28px; background:var(--a-input); border:1px solid var(--a-line); box-shadow:0 4px 18px -10px rgba(0,0,0,.25); }
.assistant[data-skin="claude"] .composer-box { border-radius:18px; padding:14px 12px 10px 16px; }
.composer-input { min-height:24px; font-size:15px; line-height:1.5; font-family:var(--a-font); }
.composer-text:not(:empty) + .composer-placeholder { display:none; }
.composer-text:not(:empty)::after { content:''; display:inline-block; width:1.5px; height:1.1em; margin-left:1px; vertical-align:-2px; background:var(--a-fg); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.composer-placeholder { color:var(--a-muted); }
.composer-tools { display:flex; align-items:center; gap:6px; margin-top:10px; }
.c-icon { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--a-muted); font-size:17px; }
.assistant[data-skin="claude"] .c-icon { border:1px solid var(--a-line); border-radius:8px; width:30px; height:30px; font-size:15px; }
.c-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; font:500 12px/1 var(--a-font); color:var(--a-ui); background:color-mix(in srgb, var(--a-ui) 12%, transparent); }
.assistant[data-skin="chatgpt"] .c-chip { color:#3b82f6; background:color-mix(in srgb, #3b82f6 14%, transparent); }
.c-model { margin-left:auto; font-size:13px; color:var(--a-muted); }
.c-model b { color:var(--a-fg); font-weight:500; }
.composer-replay { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--a-muted); }
.composer-replay:hover { color:var(--a-fg); }
.composer-replay svg { width:16px; height:16px; }
.composer-send { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--a-fg); color:var(--a-bg); font-size:16px; opacity:.3; transition:opacity .2s, transform .2s; }
.assistant[data-skin="claude"] .composer-send { border-radius:9px; background:var(--a-ui); color:#fff; }
.composer-send.ready { opacity:1; transform:scale(1.06); }
.composer-disclaimer { margin:8px 0 0; text-align:center; font-size:11.5px; color:var(--a-muted); font-family:var(--a-font); }
.demo-note { margin:16px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:12.5px; color:var(--faint); max-width:90ch; }

/* FAQ */
.faq { padding:var(--section) 0; border-top:1px solid var(--line); }
.faq-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(32px, 6vw, 96px); align-items:start; }
.faq-list { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:500; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary span { position:relative; flex:none; width:14px; height:14px; }
.faq summary span::before, .faq summary span::after { content:''; position:absolute; left:0; top:6px; width:14px; height:1.5px; background:var(--accent); transition:transform .3s var(--flow); }
.faq summary span::after { transform:rotate(90deg); }
.faq details[open] summary span::after { transform:rotate(0); }
.faq details p { margin:0 0 22px; max-width:62ch; color:var(--muted); }

/* Origin with the procedural stone */
.origin { border-top:1px solid var(--line); overflow:hidden; }
.origin-grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; padding:clamp(44px, 5vw, 64px) var(--gutter); }
.origin-copy { max-width:560px; }
.origin-title { margin:6px 0 0; font-size:clamp(26px, 2.6vw, 36px); line-height:1.15; letter-spacing:-.015em; }
.institutions { display:flex; flex-wrap:wrap; gap:16px 32px; }
.institution { display:flex; align-items:center; gap:14px; }
.institution img { width:auto; height:44px; object-fit:contain; }
[data-theme="dark"] .institution img { filter:grayscale(1) invert(1) brightness(1.4) contrast(.9); mix-blend-mode:screen; }
[data-theme="light"] .institution img { filter:grayscale(1); mix-blend-mode:multiply; }
.institution span { display:block; font:500 10.5px/1.3 var(--mono); color:var(--faint); }
.institution strong { font-weight:500; font-size:13.5px; }

/* Closing: clean, the form is the focus */
.closing { padding:var(--section) 0; border-top:1px solid var(--line); text-align:center; }
.closing-inner { display:flex; flex-direction:column; align-items:center; }
.closing h2 { font-size:clamp(36px, 4.6vw, 64px); }
.closing-copy { margin:16px 0 28px; max-width:46ch; color:var(--muted); font-size:clamp(16px, 1.2vw, 18px); }

/* Footer */
.site-footer { background:var(--deep); color:var(--muted); border-top:1px solid var(--line); font-size:13px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; padding-bottom:24px; }
.footer-wordmark { display:flex; align-items:baseline; gap:12px; text-decoration:none; color:var(--fg); font:400 19px/1 var(--serif); }
.footer-wordmark span { font:italic 400 14px/1 var(--serif); color:var(--muted); }
.footer-inner > div { display:flex; gap:22px; }
.footer-link { border:0; background:none; padding:0; color:inherit; font-size:13px; }
.footer-link:hover { color:var(--fg); }

/* Mobile sticky CTA */
.mobile-cta { display:none; }

/* Reveal */
.reveal.pending { opacity:0; transform:translateY(24px); }
.reveal.visible { opacity:1; transform:none; transition:opacity .8s var(--flow), transform 1s var(--flow); }

/* Dialogs */
dialog { border:0; padding:0; color:#242522; background:var(--paper); }
[data-theme="dark"] dialog { color:#f2ede4; background:#1d1d1a; }
dialog::backdrop { background:rgba(15,15,13,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
dialog[open] { animation:dialog-in .5s var(--flow); }
@keyframes dialog-in { from { opacity:0; transform:translateY(24px) scale(.98); } }
dialog { --muted:#6c665d; --line:rgba(36,37,34,.14); --line-strong:rgba(36,37,34,.3); --accent:var(--copper); --fg:#242522; --field:#f5f1e9; }
[data-theme="dark"] dialog { --muted:#a59e93; --line:rgba(245,241,233,.12); --line-strong:rgba(245,241,233,.3); --accent:var(--copper-light); --fg:#f2ede4; --field:#262623; }
.enrollment { width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); border-radius:14px; padding:28px clamp(22px, 5vw, 48px) 24px; overflow-y:auto; box-shadow:0 60px 140px -40px rgba(0,0,0,.6); }
.form-topline { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; font:500 22px/1 var(--serif); }
.section-label { display:block; font-size:10.5px; letter-spacing:.22em; color:var(--accent); margin-bottom:14px; }
.enrollment h2, .info-dialog h2 { font-size:clamp(38px, 6vw, 52px); line-height:.98; }
.form-intro { color:var(--muted); margin:16px 0 26px; }
.form-progress { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:26px; }
.form-progress > span { height:2px; background:var(--line); border-radius:2px; transition:background .4s; }
.form-progress > span.active { background:var(--accent); }
.form-progress small { grid-column:1 / -1; font-size:10.5px; letter-spacing:.16em; color:var(--muted); margin-top:6px; }
.field { display:grid; gap:7px; margin-bottom:18px; }
.field label, legend { font-size:13px; font-weight:500; }
.field label small { font-weight:400; color:var(--muted); }
.field > small { font-size:12px; color:var(--muted); }
input, select { width:100%; min-height:48px; padding:0 14px; font:400 15px/1.2 var(--sans); color:var(--fg); background:var(--field); border:1px solid var(--line); border-radius:6px; transition:border-color .2s, box-shadow .2s; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:12px; padding-right:36px; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.profile-field { border:0; padding:0; margin:0 0 22px; }
.profile-field legend { margin-bottom:10px; }
.profile-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.profile-options label { cursor:pointer; }
.profile-options input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; }
.profile-options label > span { display:block; height:100%; padding:14px 16px; border:1px solid var(--line); border-radius:8px; transition:border-color .2s, background .2s; }
.profile-options strong { display:block; font-weight:500; font-size:14px; }
.profile-options small { font-size:12px; color:var(--muted); }
.profile-options input:checked + span { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.profile-options input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.optional-fields { margin:4px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.optional-fields summary { display:flex; justify-content:space-between; padding:14px 0; cursor:pointer; font-size:13px; color:var(--muted); list-style:none; }
.optional-fields summary::-webkit-details-marker { display:none; }
.optional-fields[open] summary span { transform:rotate(45deg); }
.optional-fields summary span { transition:transform .3s; }
.consent { display:flex; gap:12px; align-items:flex-start; margin:8px 0 20px; font-size:13px; color:var(--muted); line-height:1.5; }
.consent input { width:18px; height:18px; min-height:0; margin-top:2px; accent-color:var(--copper); flex:none; }
.inline-link { border:0; background:none; padding:0; color:var(--accent); text-decoration:underline; font-size:inherit; }
.honeypot { position:absolute; left:-9999px; }
.form-error { color:#c2553a; font-size:13px; margin:0 0 14px; }
.form-back { display:block; margin:14px auto 0; border:0; background:none; color:var(--muted); font-size:13px; }
.enrollment .button-primary { margin-top:6px; }
.form-footer { display:flex; justify-content:space-between; margin-top:28px; padding-top:16px; border-top:1px solid var(--line); font:400 14px/1 var(--serif); }
.form-footer span { font-style:italic; color:var(--muted); }
#form-success { text-align:left; padding:12px 0; }
#form-success p { color:var(--muted); }
.success-symbol { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--copper); color:#fff; font-size:22px; margin-bottom:28px; }
.success-note { font-style:italic; font-family:var(--serif); font-size:18px; }
.info-dialog { width:min(600px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); border-radius:14px; padding:clamp(28px, 5vw, 52px); overflow-y:auto; position:relative; }
.close-info { position:absolute; right:18px; top:18px; }
.info-dialog h3 { font-size:22px; margin:26px 0 8px; }
.info-dialog p { color:var(--muted); }
.info-list { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.info-list span { padding:7px 14px; border:1px solid var(--line-strong); border-radius:99px; font-size:13px; }
.info-dialog .button { margin-top:12px; }


/* Motion off */
.motion-paused .pulse, .motion-paused .status-dot { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .line > span { transform:none; }
  .hero-kicker, .hero-copy, .hero .waitlist-inline, .hero .form-hint, .hero-app { opacity:1; }
  .engine-step { opacity:1; }
}

/* Responsive */
@media (max-width: 1080px) {
  .site-header nav { gap:20px; }
  .protocol-grid { grid-template-columns:1fr; }
  .flow { max-width:560px; width:100%; margin:0 auto; }
  .assistant { grid-template-columns:200px 1fr; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-app { margin:8px 0 30px; max-width:760px; }
}
@media (max-width: 1080px) {
  .demo-stage { grid-template-columns:minmax(0, 1fr); gap:14px; }
  .pipeline { position:relative; top:0; display:flex; gap:6px; padding:0; }
  .pipeline::before, .pipeline::after { display:none; }
  .pipeline li { flex:0 0 auto; display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:99px; transition:opacity .45s var(--flow), flex-grow .5s var(--flow); }
  .pipeline li > div { display:none; min-width:0; }
  .pipeline li.now { flex:1 1 auto; border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .pipeline li.now > div { display:block; }
  .pl-dot { margin:0; }
  .pipeline .pl-k { display:none; }
  .pipeline strong { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pipeline small { margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width: 860px) {
  .flow-outputs { grid-template-columns:repeat(2, 1fr); }
  :root { --header:60px; }
  .site-header nav { display:none; }
  .demo-head, .faq-grid { grid-template-columns:1fr; }
  .faq-grid { gap:0; }
  .engine-story { grid-template-columns:1fr; gap:0; }
  .engine-visual { position:sticky; top:var(--header); z-index:2; height:min(46svh, 380px); padding:10px 0; background:var(--bg); }
  .engine-stage { position:relative; top:0; height:100%; }
  .engine-caption { display:none; }
  .engine-step, .engine-step:first-child { min-height:44svh; justify-content:center; padding-top:24px; }
  .assistant { grid-template-columns:1fr; height:min(680px, 82svh); }
  .assistant-side { display:none; }
  .top-menu { display:grid; }
  .donut-wrap { grid-template-columns:1fr; justify-items:center; }
  .legend { width:100%; }
  .compare { grid-template-columns:1fr 1fr 1fr; }
  .origin-grid { min-height:0; }
  .institution img { height:38px; }
}
@media (max-width: 560px) {
  :root { --section:56px; }
  .header-actions .button-small { display:none; }
  .brand-divider, .brand-parent { display:none; }
  .hero { min-height:auto; padding-top:calc(var(--header) + 28px); }
  .hero h1 { font-size:clamp(42px, 12vw, 56px); }
  .app-body { grid-template-columns:1fr; height:340px; }
  .app-nav { display:none; }
  .app-split { grid-template-columns:1fr; }
  .app-doc { display:none; }
  .app-results { border-right:0; padding-right:0; }
  .hero-app { margin-right:0; }
  .app-toast { left:10px; right:10px; bottom:-18px; }
  .toast-logos { display:none; }
  .engine-stats { grid-template-columns:1fr; }
  .stat, .stat + .stat { padding:16px 0; border-left:0; }
  .stat + .stat { border-top:1px solid var(--line); }
  .hero-media::after { background:linear-gradient(0deg, var(--bg) 6%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 25%, transparent) 100%); }
  .hero-copy { margin:18px 0 0; font-size:11.5px; letter-spacing:.1em; }
  .waitlist-inline { flex-direction:column; padding:6px; }
  .waitlist-inline input { min-height:48px; }
  .waitlist-inline .button { width:100%; min-height:50px; }
  .hero-foot { gap:12px; }
  .clients-label { max-width:none; width:100%; }
  .client-logos { flex:0 0 100%; gap:10px 16px; }
  .motion-control { display:none; }
  .client-logo { font-size:12.5px; }
  .benefit-list li { grid-template-columns:56px 1fr; gap:12px; }
  .benefit-key { font-size:22px; }
  .assistant { margin:0 calc(var(--gutter) * -.5); border-radius:12px; height:min(640px, 80svh); }
  .assistant-thread { padding:14px 14px 10px; gap:16px; --a-reply-size:14.5px; }
  .msg-user p { max-width:90%; font-size:14.5px; }
  .assistant-composer { padding:6px 10px 8px; }
  .mcp-chip { font-size:10.5px; padding:4px 8px; }
  .record-row { grid-template-columns:1fr auto 14px; }
  .record-date { display:none; }
  .record-detail { padding-left:2px; }
  .compare { grid-template-columns:1fr; }
  .compare div { display:grid; grid-template-columns:1fr auto; align-items:center; }
  .compare strong { grid-row:span 2; margin:0; }
  .c-model { display:none; }
  .faq summary { font-size:16px; padding:18px 0; }
  .footer-inner { flex-direction:column; align-items:flex-start; padding-bottom:96px; }
  .mobile-cta { display:block; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40; transform:translateY(140%); transition:transform .4s var(--flow); }
  .mobile-cta .button { width:100%; min-height:52px; box-shadow:0 16px 40px -12px rgba(0,0,0,.6); }
  .mobile-cta.show { transform:none; }
  .profile-options { grid-template-columns:1fr; }
}