/* smtry.ai design system, rebuilt 2026-09-12 on the board's grid (DR-0001..0003). Tokens keep the shipped palette; layout is the board's grid.
   Container 1120 at 1440 (12 cols · 71.33 px · 24 gutters). Type: Space Grotesk display, Inter text. */
:root {
  --bg:#050508; --surface:#0A0D12; --surface2:#0E1116; --border:#1B2230; --text:#EEF0F6; --muted:#8A94A8;
  --accent:#6FB3FF; --accent-dim:#92C5FF; --warm:#FFB347; --ok:#4CAF82;
  --col:71.33px; --gut:24px; --container:1120px; --measure:620px;
  --h1:64px; --h1-lh:68px; --h2:40px; --h2-lh:44px; --h3:28px; --h3-lh:34px; --claim:20px; --body:17px; --body-lh:28px; --small:14px; --eyebrow:12px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
}
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--text); font:var(--body)/var(--body-lh) Inter, -apple-system, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
body { margin:0; overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; }
img, svg { max-width:100%; height:auto; display:block; }
.container { width:min(var(--container), calc(100% - 48px)); margin:0 auto; }
.grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gut); row-gap:var(--s4); }
.c6 { grid-column:span 6; } .c5 { grid-column:span 5; } .c7 { grid-column:span 7; } .c4 { grid-column:span 4; } .c12 { grid-column:span 12; } .c3 { grid-column:span 3; } .c8 { grid-column:span 8; }
.eyebrow { font-size:var(--eyebrow); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 var(--s2); }
h1 { font:300 var(--h1)/var(--h1-lh) "Space Grotesk", Inter, sans-serif; margin:0 0 var(--s3); letter-spacing:-.01em; text-wrap:balance; }
h1 em { font-style:italic; color:var(--accent); }
h2 { font:300 var(--h2)/var(--h2-lh) "Space Grotesk", Inter, sans-serif; margin:0 0 var(--s3); letter-spacing:-.01em; text-wrap:balance; }
h3 { font:600 var(--h3)/var(--h3-lh) Inter, sans-serif; margin:0 0 var(--s2); }
h4 { font:600 var(--claim)/26px Inter, sans-serif; margin:0 0 var(--s1); }
p { margin:0 0 var(--s2); max-width:var(--measure); color:var(--muted); }
p.lead { font-size:20px; line-height:30px; max-width:480px; }
p strong, .ink { color:var(--text); }
.status { display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--muted); vertical-align:middle; margin-left:10px; font-weight:600; }
.status.live { color:var(--ok); border-color:var(--ok); }
.btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:6px; font:600 15px/1 Inter, sans-serif; background:var(--accent); color:#07080C; }
.btn.small { height:36px; padding:0 16px; font-size:14px; }
.link { font:500 15px/44px Inter, sans-serif; color:var(--accent); margin-left:var(--s3); }
/* nav */
.nav { height:72px; border-bottom:1px solid var(--border); background:rgba(5,5,8,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:5; }
.nav .container { height:72px; display:flex; align-items:center; gap:var(--s4); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font:600 15px/1 Inter, sans-serif; letter-spacing:.02em; }
.brand img { width:32px; height:32px; }
.nav ul { list-style:none; display:flex; gap:var(--s4); margin:0 0 0 auto; padding:0; }
.nav ul a { color:#C8D0E0; font:400 14px/1 Inter, sans-serif; }
.nav ul a.on { color:var(--text); }
.nav ul a.btn { color:var(--accent); background:transparent; border:1px solid rgba(111,179,255,.45); }
.nav ul a.btn:hover { background:rgba(111,179,255,.1); box-shadow:none; transform:none; }
.burger { display:none; }
/* proof chips (hero): measured facts, each a link to its measurement */
.proof { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:var(--s4) 0 0; padding:0; }
.proof a { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:7px 13px; font:500 13px/1 Inter, sans-serif; color:#C8D0E0; }
.proof a b { color:var(--text); font-weight:600; }
.proof a:hover { border-color:var(--accent); }
.hero .shot .term { min-height:360px; }
/* sections */
section { padding:var(--s7) 0; border-bottom:1px solid var(--border); }
section.hero { padding:var(--s6) 0 var(--s7); position:relative; overflow:hidden; }
.hero .grid { align-items:center; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.35; pointer-events:none; }
.hero .container { position:relative; }
.shot { border:1px solid rgba(111,179,255,.3); border-radius:8px; overflow:hidden; background:var(--surface); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.shot img { width:100%; }
.shot figcaption { font-size:12px; color:var(--muted); padding:8px 12px; border-top:1px solid var(--border); }
.shot figcaption { max-width:none; }
/* works-with */
.works { padding:var(--s3) 0; }
.works .container { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.works span.lab { font-size:13px; color:var(--muted); }
.works ul { list-style:none; display:flex; gap:12px; margin:0; padding:0; flex-wrap:wrap; }
.works li { border:1px solid var(--border); border-radius:6px; padding:8px 14px; font:500 13px/1 Inter, sans-serif; color:#C8D0E0; }
/* claims */
.claims { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--gut); margin:var(--s4) 0 var(--s5); }
.claims p { font-size:15px; line-height:24px; }
.claims .num { font:500 var(--h3)/1 "Space Grotesk", sans-serif; color:var(--text); margin-bottom:var(--s1); }
/* cards */
.card { border:1px solid var(--border); border-radius:8px; padding:var(--s4); background:var(--surface); }
.numcard { border:1px solid rgba(255,179,71,.4); border-radius:8px; padding:var(--s4); background:var(--surface); }
.numcard .big { font:300 56px/1 "Space Grotesk", sans-serif; color:var(--warm); }
.numcard p { font-size:15px; line-height:24px; }
.caption { font-size:13px; line-height:20px; color:var(--muted); max-width:var(--measure); margin-top:var(--s2); }
footer { padding:var(--s4) 0; }
footer .container { display:flex; align-items:center; justify-content:center; text-align:center; gap:var(--s3); font-size:13px; color:var(--muted); flex-wrap:wrap; }
footer a { color:var(--muted); }
/* diagram */
.diagram { width:100%; }
.diagram .gloss { opacity:0; transition:opacity .2s; pointer-events:none; }
.diagram .stage:hover .gloss, .diagram .stage:focus .gloss, .diagram .stage.on .gloss { opacity:1; }
.diagram .stage { cursor:pointer; outline:none; }
.glossbox { min-height:88px; border:1px solid var(--border); border-radius:8px; padding:var(--s2) var(--s3); font-size:15px; line-height:24px; color:var(--muted); background:var(--surface); }
.glossbox b { color:var(--text); display:block; margin-bottom:4px; }
.glossbox .gl { display:grid; grid-template-columns:150px 1fr; gap:4px 16px; padding:8px 0; border-top:1px solid var(--border); }
.glossbox .gl:first-child { border-top:0; padding-top:0; }
.glossbox .gl b { margin:0; }
@media (max-width:720px) { .glossbox .gl { grid-template-columns:1fr; } }
/* guides overlay (mockup only) */
.guides { position:absolute; inset:0; pointer-events:none; display:none; z-index:4; }
body.show-guides .guides { display:block; }
.guides .cols { position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:min(var(--container), calc(100% - 48px)); display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gut); }
.guides .cols i { background:rgba(111,179,255,.06); border-left:1px dashed rgba(111,179,255,.35); border-right:1px dashed rgba(111,179,255,.35); }
.guides .dim { position:absolute; font:11px ui-monospace, Menlo, monospace; color:var(--warm); background:rgba(5,5,8,.8); padding:2px 6px; border:1px solid rgba(255,179,71,.5); border-radius:3px; }
.toolbar { position:fixed; right:16px; bottom:16px; z-index:9; display:flex; gap:8px; }
.toolbar button { font:600 12px/1 Inter, sans-serif; padding:10px 12px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
.toolbar button.on { border-color:var(--warm); color:var(--warm); }
.note { position:absolute; font:11px/14px Inter, sans-serif; color:#07080C; background:var(--warm); padding:3px 7px; border-radius:3px; max-width:260px; display:none; z-index:4; }
body.show-guides .note { display:block; }
@media (max-width:820px) {
  :root { --h1:40px; --h1-lh:44px; --h2:28px; --h2-lh:34px; --h3:22px; --h3-lh:28px; --body:16px; --body-lh:26px; --s7:56px; --s6:40px; }
  .grid { grid-template-columns:1fr; row-gap:var(--s4); } .grid > * { grid-column:auto !important; }
  .nav ul { display:none; } .burger { display:block; margin-left:auto; background:none; border:0; color:var(--text); font-size:22px; cursor:pointer; }
  .nav ul.open { display:flex; flex-direction:column; position:absolute; left:0; right:0; top:72px; background:var(--bg); border-bottom:1px solid var(--border); padding:16px 24px 20px; gap:16px; }
  .claims { grid-template-columns:1fr; row-gap:var(--s3); }
  .btn { width:100%; justify-content:center; height:48px; } .link { margin:12px 0 0; display:block; }
  section.hero { padding-top:var(--s5); }
}

/* demo slot (DR-0003 placeholder until the hook is cut) */
.demo { padding:var(--s6) 0; }
.demo-slot { aspect-ratio:16/9; border:1px dashed rgba(111,179,255,.45); border-radius:8px; background:var(--surface); display:grid; place-items:center; }
.demo-frame { display:flex; align-items:center; gap:12px; color:var(--muted); font:500 14px/1 Inter, sans-serif; }
.demo-mark { width:40px; height:40px; border-radius:50%; border:1px solid var(--accent); color:var(--accent); display:grid; place-items:center; font-size:14px; }

/* contact form */
.contact-form label { display:block; font:600 13px/1 Inter, sans-serif; color:var(--text); margin:0 0 14px; }
.contact-form input, .contact-form textarea { display:block; width:100%; margin-top:6px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font:15px/1.4 Inter, sans-serif; }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }

/* ── blog (ported from jiashley.com's article system, 2026-09-24) ── */
.article-page, .front { padding:var(--s6) 0 var(--s7); }
.article { max-width:720px; }
.article h1 { font-size:48px; line-height:52px; }
.article .eyebrow a { color:var(--accent); }
.crumb-sep { color:var(--muted); margin:0 6px; }
.article-dek { font-size:20px; line-height:30px; color:var(--text); max-width:620px; }
.article-meta { font-size:14px; color:var(--muted); margin-bottom:var(--s4); }
.article-meta .author-title { margin-left:8px; }
.article-meta .agent-label { color:var(--warm); border-bottom:1px dotted rgba(255,179,71,.5); }
.article-meta .reviewer { color:var(--muted); }
.article-hero { margin:0 0 var(--s4); }
.article-hero img { border:1px solid var(--border); border-radius:8px; width:100%; }
.article-hero figcaption { font-size:12px; color:var(--muted); margin-top:8px; }
.findings { border:1px solid rgba(111,179,255,.35); border-radius:8px; padding:var(--s3) var(--s4); background:var(--surface); margin:0 0 var(--s5); }
.findings-label { font-size:var(--eyebrow); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 var(--s2); }
.findings ul { margin:0; padding-left:20px; } .findings li { color:var(--text); margin-bottom:8px; font-size:16px; line-height:26px; }
.article-body h2 { font-size:28px; line-height:34px; margin:var(--s5) 0 var(--s2); }
.article-body h3 { font-size:20px; line-height:28px; margin:var(--s4) 0 var(--s1); }
.article-body p { color:#C8D0E0; max-width:620px; }
.article-body ul, .article-body ol { color:#C8D0E0; max-width:620px; padding-left:22px; margin:0 0 var(--s2); }
.article-body li { margin-bottom:6px; }
.article-body blockquote { border-left:2px solid var(--accent); margin:var(--s3) 0; padding:4px 0 4px 20px; }
.article-body blockquote p { color:var(--text); font-style:italic; }
.article-body code { font:14px ui-monospace, Menlo, monospace; background:var(--surface2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; color:var(--text); }
.article-body pre { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:var(--s2) var(--s3); overflow-x:auto; }
.article-body pre code { border:0; background:none; padding:0; }
.inline-link { color:var(--accent); border-bottom:1px solid rgba(111,179,255,.35); }
.table-wrap { overflow-x:auto; margin:var(--s3) 0; }
.article-body table { border-collapse:collapse; width:100%; font-size:15px; }
.article-body th, .article-body td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); color:#C8D0E0; vertical-align:top; }
.article-body th { color:var(--text); font-weight:600; }
sup.fn a { color:var(--accent); font-size:12px; text-decoration:none; }
.sources { margin-top:var(--s5); border-top:1px solid var(--border); padding-top:var(--s3); }
.sources ol { padding-left:22px; font-size:14px; line-height:22px; color:var(--muted); } .sources li { margin-bottom:8px; }
.sources a { color:var(--accent-dim); word-break:break-word; } .fn-back { margin-left:6px; }
.updated-note { font-size:14px; color:var(--muted); border-top:1px solid var(--border); padding-top:var(--s2); }
.article-data, .colophon { border-top:1px solid var(--border); margin-top:var(--s4); padding-top:var(--s3); font-size:14px; color:var(--muted); }
.colophon .disclosure { color:#C8D0E0; }
.article-foot { margin-top:var(--s5); font-size:14px; }
.article-foot p { color:var(--muted); }
/* the /blog front */
.front-head { margin-bottom:var(--s5); }
.featured a, .shelf-card a, .writing-item a { display:block; color:inherit; }
.featured { border:1px solid rgba(111,179,255,.35); border-radius:8px; padding:var(--s4); background:var(--surface); margin-bottom:var(--s5); }
.featured h1 { font-size:36px; line-height:42px; margin:var(--s1) 0 var(--s2); }
.featured-meta, .writing-kind, .writing-date { font-size:13px; color:var(--muted); }
.writing-kind { color:var(--accent); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-right:12px; }
.featured-dek { color:#C8D0E0; font-size:17px; }
.featured-by { font-size:14px; color:var(--muted); }
.featured-read { color:var(--accent); font:600 14px/1 Inter, sans-serif; }
.featured-img, .shelf-img { border-radius:6px; margin-bottom:var(--s2); }
.shelf { margin-bottom:var(--s5); }
.shelf-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s3); }
.shelf-card { border:1px solid var(--border); border-radius:8px; padding:var(--s3); background:var(--surface); }
.shelf-card h3 { font-size:20px; line-height:26px; margin:6px 0 8px; }
.shelf-card p { font-size:15px; line-height:24px; }
.writing-list .writing-item { border-top:1px solid var(--border); padding:var(--s3) 0; }
.writing-item h3 { font-size:22px; line-height:28px; margin:6px 0 6px; }
.writing-item p { font-size:15px; line-height:24px; }
/* faq */
.faq-list { max-width:720px; }
.faq-list details { border-top:1px solid var(--border); padding:var(--s3) 0; }
.faq-list details:last-child { border-bottom:1px solid var(--border); }
.faq-list summary { cursor:pointer; list-style:none; font:600 var(--claim)/28px Inter, sans-serif; color:var(--text); display:flex; justify-content:space-between; gap:16px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; color:var(--accent); font-weight:400; }
.faq-list details[open] summary::after { content:"–"; }
.faq-list details p { margin-top:var(--s2); color:#C8D0E0; }
.faq-list details p + p { margin-top:8px; }
@media (max-width:820px) { .article h1 { font-size:34px; line-height:40px; } .shelf-grid { grid-template-columns:1fr; } .featured h1 { font-size:28px; line-height:34px; } }

/* ── the original memory visualization (from the live 2026-09 page), restored 2026-09-24 ── */
.grid > * { min-width:0; }
.memory-viz-wrap { width:100%; min-width:0; }
.memory-viz-wrap svg { width:100%; height:auto; display:block; }
/* Small screens: keep the stations legible; the diagram scrolls sideways on purpose. */
@media (max-width:720px) {
  .memory-viz-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .memory-viz-wrap svg { min-width:820px; }
  .desktop-only { display:none; }
}
/* Node hover interactivity */
    .mem-stage{cursor:default;}
.mem-stage .tooltip-group{opacity:0; transition:opacity .25s; pointer-events:none;}
.mem-stage:hover .tooltip-group, .mem-stage:focus-visible .tooltip-group{opacity:1;}
.mem-stage:focus-visible, .echo-typed:focus-visible { outline:1px solid var(--accent); outline-offset:6px; border-radius:50%; }
.mem-stage .node-ring{transition:filter .25s;}
.mem-stage:hover .node-ring{filter:brightness(1.4);}
.mem-stage .ecphory-path{transition:stroke-opacity .25s;}
.mem-stage:hover .ecphory-path{stroke-opacity:.95;}
/* Echo typed nodes */
    .echo-typed{cursor:default;}
.echo-typed .tt{opacity:0; transition:opacity .25s; pointer-events:none;}
.echo-typed:hover .tt, .echo-typed:focus-visible .tt{opacity:1;}
/* Engram pulse animation */
    .engram-node{animation: epulse 3.5s ease-in-out infinite;}
.engram-node:nth-child(2){animation-delay:.6s;}
.engram-node:nth-child(3){animation-delay:1.2s;}
.engram-node:nth-child(4){animation-delay:1.8s;}
.engram-node:nth-child(5){animation-delay:2.4s;}
@keyframes dashrotate { to { stroke-dashoffset:-140; } }
/* TTL dashed ring on echo */
    .echo-ttl{stroke-dasharray:4 3;
      animation: dashrotate 20s linear infinite;}


/* ── v3 (2026-09-24 late): the memory is the page ─────────────────────────── */
:root { --h1:clamp(48px, 5.4vw, 84px); --h1-lh:1.0; --h2:clamp(32px, 3.2vw, 48px); --h2-lh:1.08; --s7:clamp(64px, 7vw, 104px); }
section { border-bottom:0; }
.nav { border-bottom:1px solid rgba(255,255,255,.06); background:rgba(5,5,8,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
h1 { letter-spacing:-.03em; }
h2 { letter-spacing:-.02em; }
/* grain: one fixed layer of noise so the black has texture instead of being a void */
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
/* hero: full viewport, graph behind, copy left */
.hero-graph { min-height:min(calc(100vh - 72px), 940px); padding:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; position:relative; overflow:hidden; }
.hero-graph #graph { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:1; }   /* the old `.hero canvas` rule set .35; this is the value the entrance animation settles on */
.hero-graph .hero-inner { position:relative; width:min(var(--container), calc(100% - 48px)); margin:0 auto; padding:var(--s4) 0 var(--s6); pointer-events:none; }   /* tight enough that the copy, facts included, stays inside a 800px-high fold */
.hero-graph .hero-inner a { pointer-events:auto; }
.hero-copy { max-width:min(560px, calc(42vw - 40px)); }   /* the universe's left edge is at 0.7w - R with R <= 0.278w, so the copy stops before 0.42w */
.hero-copy .lead { max-width:min(480px, 100%); }
@media (max-width:1200px) and (min-width:821px) { :root { --h1:64px; --h1-lh:66px; } .hero-copy .lead { font-size:19px; line-height:29px; } }   /* type scales with the column it sits in */
.hero-copy h1 { margin-bottom:var(--s3); }
.hero-copy .lead { font-size:21px; line-height:32px; max-width:480px; margin-bottom:var(--s4); }
.hero-copy .cta { margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px 0; }
.btn { height:48px; padding:0 22px; border-radius:8px; box-shadow:0 0 0 0 rgba(111,179,255,0); transition:box-shadow .3s, transform .2s; }
.btn:hover { box-shadow:0 0 32px rgba(111,179,255,.35); transform:translateY(-1px); }
.facts { font:500 14px/22px Inter, sans-serif; color:var(--muted); margin:0; display:grid; gap:2px; justify-items:start; }   /* three short lines: proof as objects, and nothing can run into the universe */
.facts a { color:#C8D0E0; white-space:nowrap; border-bottom:1px solid transparent; transition:border-color .2s, color .2s; }
.facts a:hover { color:var(--text); border-bottom-color:var(--accent); }
.facts span { margin:0 10px; color:#4A5470; }
.hint { position:absolute; right:0; bottom:var(--s4); margin:0; font:400 13px/18px Inter, sans-serif; color:var(--muted); letter-spacing:.02em; transition:opacity 1.2s; max-width:none; }
.hint.seen { opacity:0; }
.works-line { font-size:14px; line-height:22px; color:var(--muted); text-align:center; margin:-40px auto var(--s6); position:relative; }
/* framed objects: gradient edge, deep shadow */
.frame { position:relative; border-radius:14px; background:var(--surface); box-shadow:0 60px 140px rgba(0,0,0,.65), 0 0 0 1px rgba(111,179,255,.12); overflow:hidden; margin:var(--s6) 0 0; }
.frame::before { content:""; position:absolute; inset:0; border-radius:14px; padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(135deg, rgba(111,179,255,.7), rgba(111,179,255,.06) 38%, rgba(255,179,71,.05) 62%, rgba(255,179,71,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.frame.shot { border:0; }
.term-frame .term { background:#07080C; padding:18px 24px 26px; font:14px/23px ui-monospace, SFMono-Regular, Menlo, monospace; min-height:340px; }
.term-bar { display:flex; gap:7px; align-items:center; margin-bottom:16px; }
.term-bar i { width:11px; height:11px; border-radius:50%; background:#232A44; display:block; }
.term-bar span { margin-left:auto; color:#3A4560; font-size:12px; }
.term .ln { white-space:pre-wrap; }
.term.typing .ln { visibility:hidden; }
.term.typing .ln.show { visibility:visible; }
.term.typing .ln.show:last-of-type::after, .term.typing .ln.show + .ln:not(.show)::before { content:""; }
.term.typing .ln.show:not(:has(~ .ln.show))::after { content:"▍"; color:var(--accent); animation:blink 1s steps(2) infinite; }   /* the cursor rides the last typed line */
@keyframes blink { to { opacity:0; } }
/* the three numbers */
.big3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--gut); row-gap:var(--s5); }
.big3 .n { font:300 clamp(64px, 7.4vw, 112px)/1 "Space Grotesk", sans-serif; letter-spacing:-.03em; color:var(--text); margin-bottom:var(--s2); font-variant-numeric:tabular-nums; }
.big3 .n small { font-size:.42em; color:var(--muted); letter-spacing:0; margin-left:4px; }
.big3 p { font-size:15px; line-height:24px; }
/* how it works: sticky stage, scrolling steps */
.how-head { margin-bottom:var(--s5); }
.story { display:grid; grid-template-columns:4fr 8fr; column-gap:var(--s5); align-items:start; }
.story > * { min-width:0; }
.stage { position:sticky; top:96px; }
.steps { list-style:none; margin:0; padding:0; }
.step { min-height:min(54vh, 520px); display:flex; flex-direction:column; justify-content:center; padding:0 0 var(--s5); opacity:.3; transition:opacity .5s; }
.step:first-child { min-height:min(40vh, 380px); }
.step.on { opacity:1; }
.step b { font:500 26px/32px "Space Grotesk", sans-serif; color:var(--text); display:block; margin-bottom:10px; letter-spacing:-.01em; }
.step p { font-size:16px; line-height:26px; margin:0; }
svg.stepping .mem-stage, svg.stepping .echo-typed { opacity:.28; transition:opacity .5s; }
svg.stepping .mem-stage.on, svg.stepping .echo-typed.on { opacity:1; }
svg.stepping .mem-stage.on .tooltip-group { opacity:1; }
/* reveals */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.card { transition:transform .25s, border-color .25s; }
.card:hover { transform:translateY(-2px); border-color:rgba(111,179,255,.4); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } .step { transition:none; } .term.typing .ln.show::after { display:none; } }
@media (max-width:820px) {
  .hero-graph { min-height:auto; }
  .hero-graph #graph { opacity:.6; }
  .hero-graph .hero-inner { padding:var(--s6) 0 var(--s7); }
  .hint { position:static; margin-top:var(--s4); }
  .works-line { margin:0 auto var(--s5); text-align:left; }
  .big3 { grid-template-columns:1fr; }
  .story { grid-template-columns:1fr; }
  .stage { position:static; order:-1; margin-bottom:var(--s4); }
  .step { min-height:0; padding:var(--s3) 0; opacity:1; border-top:1px solid var(--border); }
  .step:first-child { min-height:0; }
  .term-frame .term { font-size:12.5px; line-height:19px; padding:14px 16px 20px; }
}

@media (prefers-reduced-motion: reduce) { #how svg *, .hero-graph canvas { animation:none !important; } }
@media (max-width:820px) { :root { --h1:40px; --h1-lh:44px; --h2:28px; --h2-lh:34px; --s7:64px; --s6:40px; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── v3.1: critic + exemplar pass ─────────────────────────────────────────── */
/* load choreography (Resend's shape): rise 16px with fade, 90ms stagger, 900ms total; JS-gated so nothing can vanish */
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
html.js .hero-copy > * { animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
html.js .hero-copy > :nth-child(1) { animation-delay:.05s; } html.js .hero-copy > :nth-child(2) { animation-delay:.15s; }
html.js .hero-copy > :nth-child(3) { animation-delay:.25s; } html.js .hero-copy > :nth-child(4) { animation-delay:.35s; }
@keyframes graphIn { from { opacity:0; } }                                   /* no `to`: it settles on the element's own opacity (0.6 on phones) */
html.js #graph { animation:graphIn 1.2s ease-out both; animation-delay:.2s; }
@media (prefers-reduced-motion: reduce) { html.js .hero-copy > *, html.js #graph { animation:none; } }
/* reveals: inner elements only, gated on JS, quick */
.reveal { opacity:1; transform:none; transition:none; }
html.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity:1; transform:none; }
/* the mono voice: labels and counts only */
.hint { font:500 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); opacity:.75; }
@media (hover:none) { .hint { display:none; } }
/* terminal grows as it types; the caret rides the last line */
.term-frame .term { min-height:0; }
/* numbers: a measured section with a label */
#numbers .eyebrow { margin-bottom:var(--s5); }
/* how it works: bigger stage, stronger lighting, tighter steps */
.story { grid-template-columns:3fr 9fr; column-gap:var(--s4); }
.stage { top:max(88px, calc(50vh - 190px)); }
.step { min-height:min(50vh, 440px); padding:0 0 var(--s4); }
.step:first-child { min-height:min(36vh, 320px); }
.step:last-child { min-height:0; padding-bottom:var(--s3); }
svg.stepping .mem-stage.on { filter:brightness(1.35); }
.memory-viz-wrap { scrollbar-color:#2A3550 transparent; }
.memory-viz-wrap::-webkit-scrollbar { height:6px; } .memory-viz-wrap::-webkit-scrollbar-thumb { background:#2A3550; border-radius:3px; } .memory-viz-wrap::-webkit-scrollbar-track { background:transparent; }
/* ghost button */
.btn.ghost { background:transparent; border:1px solid rgba(111,179,255,.45); color:var(--accent); }
.btn.ghost:hover { background:rgba(111,179,255,.1); box-shadow:none; }
/* Labs: the figure is a display number in blue, not an amber card (amber is for memory objects) */
.labs-figure .big { font:300 clamp(64px, 7vw, 104px)/1 "Space Grotesk", sans-serif; letter-spacing:-.03em; color:var(--accent); margin-bottom:var(--s2); }
.labs-figure p { font-size:15px; line-height:24px; }
footer .container { column-gap:20px; row-gap:12px; }
@media (max-width:820px) {
  .story { grid-template-columns:1fr; }
  .step { min-height:0; padding:var(--s3) 0; } .step:first-child, .step:last-child { min-height:0; }
}

#how .memory-viz-wrap { margin-top:var(--s4); }

/* the belt: the seven tools pass slowly right to left under the hero; fades at both ends; still under reduced motion */
.belt { overflow:hidden; position:relative; margin:var(--s5) 0 var(--s6); padding:10px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.belt-track { display:flex; gap:56px; width:max-content; animation:belt 90s linear infinite; font:500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.belt-lab { text-align:center; font:500 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:#5A6580; margin:var(--s5) 0 0; }
.belt-track .sep { color:#3A4560; }
.belt-track .lab { color:var(--accent); font-weight:600; }
.belt-track .sep.bar { color:#4A5470; }
.belt:hover .belt-track { animation-play-state:paused; }
@keyframes belt { to { transform:translateX(calc(-100% / 3)); } }
@media (prefers-reduced-motion: reduce) { .belt-track { animation:none; } }
@media (max-width:820px) { .belt { margin-top:var(--s3); } }

/* ── how it works, v2: a scrolling list on the left, a vertical pipeline held on the right, stars behind the section ── */
#how { position:relative; overflow:hidden; }
#how .stars { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:.9;
  -webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent); }
#how .container { position:relative; }
.story { grid-template-columns:6fr 6fr; column-gap:var(--s6); }
.stage { top:96px; }
.pipe { width:min(100%, 420px, calc((100vh - 150px) * 320 / 760)); margin:0 auto; }   /* never taller than the viewport, so it can stay pinned */
.pipe svg { width:100%; height:auto; display:block; overflow:visible; }
.pipe .st { transition:opacity .5s; }
.pipe.stepping .st { opacity:.28; } .pipe.stepping .st.on { opacity:1; }
.pipe .st.on .ring { filter:brightness(1.4); }
.step { min-height:min(50vh, 440px); }
@media (max-width:820px) { .story { grid-template-columns:1fr; } .stage { position:static; order:-1; } .pipe { width:min(100%, 300px); } .step { min-height:0; padding:var(--s3) 0; opacity:1; } }

/* in practice, stacked: one focal point, then the proof */
.see-head { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gut); align-items:start; }   /* the lead sits to the right, centred on the headline alone */
.see-head .eyebrow { grid-column:1 / -1; }
.see-head h2 { grid-column:span 7; max-width:none; margin:0; }
.see-head .lead { grid-column:span 5; margin:0; max-width:none; }
@media (max-width:820px) { .see-head { display:block; } .see-head .lead { margin-top:var(--s2); } }
#anamnesis .grid, #trust .grid { align-items:start; }
#anamnesis .grid .eyebrow { grid-column:1 / -1; margin-bottom:0; }
#anamnesis .grid h2 { margin:0; }
.term-frame figcaption { font-size:13px; color:var(--muted); padding:10px 24px 12px; border-top:1px solid var(--border); }
.term-frame figcaption a { color:var(--accent); margin-left:6px; }

/* ── how it works: one thing you said, becoming memory (pinned; the list and the story scroll together) ── */
#how-gist { height:760vh; position:relative; padding:0; }
#how-gist .pin { position:sticky; top:0; height:100vh; overflow:hidden; }
#how-gist #gist-sky { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.9; -webkit-mask-image:linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(transparent, #000 10%, #000 90%, transparent); }
#how-gist #gist { position:absolute; inset:0; width:100%; height:100%; display:block; -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 90%, transparent); mask-image:linear-gradient(transparent, #000 14%, #000 90%, transparent); }
#how-gist .head { position:absolute; top:106px; left:0; right:0; width:min(var(--container), calc(100% - 48px)); margin:0 auto; pointer-events:none; }
#how-gist .head h2 { margin:0; max-width:560px; pointer-events:auto; }   /* two lines, clear of the river; selectable */
#how-gist .over { position:sticky; top:0; height:100vh; margin-top:-100vh; pointer-events:none; display:grid; grid-template-columns:5fr 7fr; --cap-top:300px; column-gap:48px; width:min(var(--container), calc(100% - 48px)); margin-left:auto; margin-right:auto; }
.gwin { position:relative; height:100vh; }
.glist { position:absolute; left:0; right:0; top:var(--cap-top); list-style:none; margin:0; padding:0 0 0 28px; min-height:220px; }   /* the caption slot: directly under the title, fixed */
.glist > li { position:absolute; left:28px; right:0; top:0; opacity:0; transform:translateY(10px); transition:opacity .38s cubic-bezier(.2,.7,.2,1), transform .38s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.glist > li.gone { transform:translateY(-10px); }
.glist > li.on { opacity:1; transform:none; pointer-events:auto; }
.grail { position:absolute; left:0; top:var(--cap-top); width:12px; height:220px; }                                       /* eleven ticks on a hairline; the lit one is where you are */
.grail i { position:absolute; left:5px; width:1px; background:var(--border); top:0; height:100%; }
.grail i.fill { background:var(--accent); height:0; transition:height .35s cubic-bezier(.2,.7,.2,1); }
.grail b { position:absolute; left:6px; width:4px; height:4px; border-radius:50%; background:#2A3348; transform:translate(-50%,-50%); transition:background .3s, transform .3s, box-shadow .3s; }
.grail b.state { width:6px; height:6px; background:#3A4358; }
.grail b.on { background:var(--text); transform:translate(-50%,-50%) scale(1.35); box-shadow:0 0 0 3px rgba(111,179,255,.18); }
.grail b.proc.on { background:var(--warm); }
.gstate > b { font:500 26px/32px "Space Grotesk", sans-serif; color:var(--text); display:block; margin-bottom:8px; letter-spacing:-.01em; }
.gstate > p { font-size:14px; line-height:21px; margin:0; max-width:400px; color:var(--muted); }
.gproc > b { font:600 12px/16px ui-monospace, Menlo, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--warm); display:block; margin-bottom:8px; }
.gproc > p { font-size:13px; line-height:20px; margin:0; max-width:380px; color:var(--muted); }
.gproc i { font-style:normal; color:#5A6580; }
@media (max-width:700px) {                                   /* phones: the picture stays at the top; the list simply reads below it */
  #how-gist { height:auto; }
  #how-gist .pin { height:52vh; z-index:2; background:var(--bg); }          /* an opaque band: the list slides under it */
  #how-gist #gist, #how-gist #gist-sky { -webkit-mask-image:linear-gradient(transparent, #000 10%, #000 84%, transparent); mask-image:linear-gradient(transparent, #000 10%, #000 84%, transparent); }
  #how-gist .head { top:24px; }
  #how-gist .over { position:static; height:auto; margin-top:0; display:block; pointer-events:auto; padding:var(--s3) 0 var(--s6); width:min(var(--container), calc(100% - 48px)); }
  .gwin { height:auto; }
  .glist { position:static; padding:0; min-height:0; }
  .glist > li { position:static; opacity:1; transform:none; margin-bottom:var(--s4); pointer-events:auto; }
  .grail { display:none; }
}
@media (prefers-reduced-motion: reduce) { .glist, .glist > li { transition:none; } }

/* ── contact form (home #trust and contact.html) ── */
.contact-form { padding:28px; }
.contact-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.contact-form textarea { resize:vertical; min-height:120px; }
.contact-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form .form-foot { display:flex; align-items:center; gap:16px; margin-top:4px; }
.contact-form .form-note { margin:0; font-size:13px; line-height:19px; color:var(--muted); }
.contact-form .form-note.ok { color:#9FD3A8; } .contact-form .form-note.err { color:#F2A3A3; }
.contact-form button[disabled] { opacity:.6; }
@media (max-width:820px) { .contact-form .row2 { grid-template-columns:1fr; } .contact-form .form-foot { flex-direction:column; align-items:flex-start; } }

.stack { display:grid; gap:var(--s3); align-content:start; }
[data-sky] { position:relative; overflow:hidden; }
[data-sky] > .container { position:relative; z-index:1; }
[data-sky] > canvas.sky { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ── vertical rhythm: every section carries the same padding, and nothing inside adds to it ── */
section .container > :first-child { margin-top:0; }
section .container > :last-child, section .container > :last-child > :last-child, section .container > :last-child > * > :last-child, section .container > :last-child > * > * > :last-child { margin-bottom:0; }
section.hero { padding:var(--s6) 0 var(--s7); }

/* ── the blue label is always a row of its own; headlines and side columns align at the top ── */
.grid > .eyebrow.c12, .grid > .eyerow { margin-bottom:0; }
.grid .eyerow { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gut); }
.grid .eyerow .eyebrow { margin:0; }
.grid > * > h2:first-child, .grid > .c12 > h2 { margin-top:0; }
@media (max-width:820px) { .grid .eyerow { display:block; } .grid .eyerow .eyebrow + .eyebrow { display:none; } }