@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/dm-sans-300.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/dm-sans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/dm-sans-600.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/dm-serif-display-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-mono-400.woff2") format("woff2"); }

/* Embrelon mock-up gallery. Not part of the shipped site. */


/* ---------------- colour schemes ---------------- */
:root, [data-palette="lunar"] { --bg:#111111; --surface:#1a1a1a; --surface-2:#242424; --ink:#ededed; --muted:#b5b5b5; --accent:#a08672; --accent-ink:#111111; --alt:#d6cfc8; --alt-ink:#111111; --line:#2c2c2c; }
[data-palette="porcelain"] { --bg:#f7f6f2; --surface:#eeece6; --surface-2:#e3e0d8; --ink:#141414; --muted:#55524c; --accent:#b4441c; --accent-ink:#ffffff; --alt:#1f1f1f; --alt-ink:#f7f6f2; --line:#d9d5cc; }
[data-palette="circuit"] { --bg:#0a1310; --surface:#101d18; --surface-2:#172a22; --ink:#e6f1ea; --muted:#9fb7aa; --accent:#3ddc84; --accent-ink:#06120c; --alt:#c9f2d8; --alt-ink:#06120c; --line:#1f3a2e; }
[data-palette="blueprint"] { --bg:#0b1530; --surface:#112045; --surface-2:#182a58; --ink:#e9efff; --muted:#a8b6dc; --accent:#7fb0ff; --accent-ink:#081128; --alt:#e9efff; --alt-ink:#0b1530; --line:#22346a; }
[data-palette="silicon"] { --bg:#eef0f3; --surface:#e2e6eb; --surface-2:#d5dbe2; --ink:#0f1720; --muted:#4b5563; --accent:#2f5bff; --accent-ink:#ffffff; --alt:#0f1720; --alt-ink:#eef0f3; --line:#c9d0d9; }
[data-palette="copper"] { --bg:#15100d; --surface:#1f1814; --surface-2:#2a211b; --ink:#f3e9e1; --muted:#c3b1a3; --accent:#d4824a; --accent-ink:#1a0f08; --alt:#f3e9e1; --alt-ink:#15100d; --line:#3a2d24; }
[data-palette="lime"] { --bg:#121212; --surface:#1b1b1b; --surface-2:#252525; --ink:#f2f2f2; --muted:#b0b0b0; --accent:#c8f560; --accent-ink:#121212; --alt:#f2f2f2; --alt-ink:#121212; --line:#2e2e2e; }
[data-palette="cleanroom"] { --bg:#ffffff; --surface:#f2f4f5; --surface-2:#e6e9eb; --ink:#0a0a0a; --muted:#565b60; --accent:#ff4d00; --accent-ink:#ffffff; --alt:#0a0a0a; --alt-ink:#ffffff; --line:#dde1e4; }
[data-palette="phosphor"] { --bg:#050807; --surface:#0c1311; --surface-2:#13201c; --ink:#dff7ef; --muted:#93b3a8; --accent:#59f2c6; --accent-ink:#04110d; --alt:#dff7ef; --alt-ink:#050807; --line:#1b2d27; }
[data-palette="sandstone"] { --bg:#efe9df; --surface:#e5ddd0; --surface-2:#d9cfbf; --ink:#2a241d; --muted:#625849; --accent:#7a5c3e; --accent-ink:#ffffff; --alt:#2a241d; --alt-ink:#efe9df; --line:#d3c8b6; }
[data-palette="forest"] { --bg:#f6f6f1; --surface:#ebf0e6; --surface-2:#dfe7d8; --ink:#213c34; --muted:#5e6b62; --accent:#213c34; --accent-ink:#f6f6f1; --alt:#42624e; --alt-ink:#f6f6f1; --line:#d9ded3; --signal:#d57d57; --leaf:#7a9b57; }

/* ---------------- font pairings ---------------- */
:root, [data-fonts="stack"] { --fd:"Stack Sans Headline", Arial, sans-serif; --ft:"Stack Sans Text", Arial, sans-serif; --fd-w:300; --fd-track:-0.03em; }
[data-fonts="tight"] { --fd:"Inter Tight", Arial, sans-serif; --ft:"Inter", Arial, sans-serif; --fd-w:500; --fd-track:-0.04em; }
[data-fonts="serif"] { --fd:"Instrument Serif", Georgia, serif; --ft:"Inter", Arial, sans-serif; --fd-w:400; --fd-track:-0.01em; }
[data-fonts="grotesk"] { --fd:"Space Grotesk", Arial, sans-serif; --ft:"IBM Plex Sans", Arial, sans-serif; --fd-w:400; --fd-track:-0.035em; }
[data-fonts="manrope"] { --fd:"Fraunces", Georgia, serif; --ft:"Manrope", Arial, sans-serif; --fd-w:300; --fd-track:-0.02em; }
[data-fonts="dm"] { --fd:"DM Sans", Arial, sans-serif; --ft:"DM Sans", Arial, sans-serif; --fd-w:500; --fd-track:-0.04em; --fs:"DM Serif Display", Georgia, serif; --fm:"DM Mono", ui-monospace, monospace; }

:root { --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1); --pad:clamp(20px,4vw,56px); }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-padding-top:120px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--ft); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background-color .4s, color .4s; }
h1,h2,h3,h4,p,figure,ul,ol { margin:0; }
ul,ol { padding:0; list-style:none; }
img,video,svg { display:block; max-width:100%; }
a { color:inherit; }
button,input,textarea,select { font:inherit; color:inherit; }
.muted { color:var(--muted); }
.center { text-align:center; margin-inline:auto; }
.small { font-size:14px; }

/* ---------------- gallery chrome (fixed neutral, unaffected by schemes) ---------------- */
.tb { position:sticky; top:0; z-index:100; background:#0c0c0c; color:#eee; font:14px/1.3 Inter, Arial, sans-serif; padding:10px 16px; display:grid; gap:8px; }
.tb-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.tb-title { font-weight:600; margin-right:8px; }
.tb-group { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 9px 5px 6px; background:#1d1d1d; border:0; color:#eee; cursor:pointer; border-radius:999px; font-size:13px; }
.chip i { width:16px; height:16px; border-radius:50%; background:linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%); }
.chip[aria-pressed="true"] { background:#eee; color:#111; }
.tb-select select { margin-left:6px; background:#1d1d1d; color:#eee; border:0; padding:6px 8px; }
.tb-jump { display:flex; flex-wrap:wrap; gap:4px 14px; }
.tb-jump a { color:#bbb; text-decoration:none; }
.tb-jump a:hover { color:#fff; }
.tb-btn { background:#1d1d1d; color:#eee; border:0; padding:7px 12px; cursor:pointer; }
.tb-btn:hover { background:#2a2a2a; }
.tb-picks-btn { background:#eee; color:#111; font-weight:600; }
.tb-picks-btn span { display:inline-block; min-width:1.4em; padding:0 5px; margin-left:4px; background:#111; color:#eee; border-radius:9px; }
.picks { position:fixed; right:16px; top:110px; z-index:120; width:min(420px, calc(100vw - 32px)); background:#0c0c0c; color:#eee; padding:16px; font:14px/1.45 Inter, Arial, sans-serif; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.picks-head { display:flex; justify-content:space-between; align-items:center; }
.picks-help { margin:8px 0; color:#aaa; }
.picks textarea { width:100%; background:#1a1a1a; color:#eee; border:0; padding:10px; font:13px/1.5 ui-monospace, Menlo, monospace; }
.picks-actions { display:flex; gap:8px; margin-top:8px; }

.gallery { padding:0 var(--pad) 160px; }
.intro { padding:72px 0 24px; max-width:880px; }
.intro h1 { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(2.6rem, 5vw, 4.6rem); line-height:1; }
.intro p { margin-top:18px; font-size:19px; max-width:64ch; }
.intro .intro-note { font-size:15px; color:var(--muted); }
.group { padding-top:96px; }
.group-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; margin-bottom:24px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.group-head h2 { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(1.8rem, 3vw, 2.6rem); }
.group-head p { color:var(--muted); }

.piece { margin-top:28px; }
.piece-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; font:13px/1 Inter, Arial, sans-serif; }
.piece-code { background:var(--ink); color:var(--bg); padding:5px 8px; font-weight:600; letter-spacing:.02em; }
.piece-name { color:var(--muted); }
.star { margin-left:auto; background:var(--surface); color:var(--ink); border:0; padding:6px 10px; cursor:pointer; font-size:13px; }
.star[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.stage { position:relative; background:var(--bg); outline:1px solid var(--line); padding:clamp(28px, 5vw, 72px); overflow:clip; }
.stage-flush { padding:0; }
.stage-tall { min-height:420px; }
.stage-scroll { height:460px; overflow:auto; }
.stage-scroll.short { height:220px; }
.stage-hint, .piece-hint { margin-top:8px; font-size:13px; color:var(--muted); }
.stage-hint { position:absolute; bottom:16px; left:24px; }

/* ---------------- shared atoms ---------------- */
.display { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(2.6rem, 6vw, 6rem); line-height:.98; max-width:16ch; }
.display.center { max-width:18ch; }
.head { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(2rem, 3.6vw, 3.4rem); line-height:1.02; }
.head-sm { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(1.5rem, 2.2vw, 2.1rem); line-height:1.08; }
.giant { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:-0.05em; font-size:19vw; line-height:.85; }
.lead { font-size:clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height:1.45; max-width:34ch; }
.display + .lead, .h4x-copy .lead, .h3x .lead { margin-top:24px; }
.lead.center { max-width:44ch; }
.panel { background:var(--surface); padding:24px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 24px; background:var(--accent); color:var(--accent-ink); border:0; font-weight:500; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .14s var(--ease), filter .18s; }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:scale(.97); }
.btn-ghost { background:var(--surface-2); color:var(--ink); }
.btn-dark { background:var(--alt); color:var(--alt-ink); }
.btn-xl { min-height:72px; padding:0 40px; font-size:20px; }
.link { text-underline-offset:.22em; text-decoration-thickness:.07em; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:32px; }
.actions.center { justify-content:center; }
.wm { display:inline-flex; align-items:center; gap:10px; font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:-0.02em; font-size:24px; text-decoration:none; }
.wm svg { width:1.1em; height:1.1em; }
.wm svg path, .wm svg circle { stroke:var(--accent); }
.wm svg circle { fill:var(--accent); }
.acc { color:var(--accent); }
.caret { display:inline-block; width:2px; height:1.05em; background:var(--accent); vertical-align:-.15em; margin-left:2px; animation:blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---------------- headers ---------------- */
.n1, .n2 { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.n1 nav, .n2 nav { display:flex; gap:28px; font-size:15px; }
.n1 nav a, .n2 nav a { text-decoration:none; }
.n1 > .btn { justify-self:end; min-height:44px; }
.n2 .end { justify-self:end; align-items:center; }
.n2 .wm-big { font-size:30px; }
.n3 { display:flex; justify-content:space-between; align-items:center; position:relative; }
.menu-btn { position:relative; z-index:3; display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; padding:8px; }
.menu-btn span { display:block; width:22px; height:2px; background:var(--ink); transition:transform .4s var(--ease); }
.menu-btn span + span { position:absolute; left:8px; top:22px; }
.menu-btn span:first-child { position:absolute; left:8px; top:14px; }
.menu-btn em { font-style:normal; margin-left:30px; }
.menu-btn[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span + span { transform:translateY(-4px) rotate(-45deg); }
.menu-panel { position:absolute; z-index:2; inset:-72px -72px auto; min-height:420px; padding:120px 72px 48px; background:var(--surface); clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-io); display:flex; flex-direction:column; justify-content:space-between; }
.n3.is-open .menu-panel { clip-path:inset(0); }
.menu-panel nav { display:grid; gap:4px; }
.menu-panel nav a { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.1; text-decoration:none; opacity:0; transform:translateY(24px); transition:opacity .5s, transform .7s var(--ease); }
.n3.is-open .menu-panel nav a { opacity:1; transform:none; }
.n3.is-open .menu-panel nav a:nth-child(2) { transition-delay:.06s; } .n3.is-open .menu-panel nav a:nth-child(3) { transition-delay:.12s; } .n3.is-open .menu-panel nav a:nth-child(4) { transition-delay:.18s; } .n3.is-open .menu-panel nav a:nth-child(5) { transition-delay:.24s; }

/* ---------------- heroes ---------------- */
.h1x-row { margin-top:56px; display:grid; grid-template-columns:5fr 1fr 6fr; gap:24px; align-items:start; }
.h1x-row > .panel { grid-column:3; }
.ex-top { display:flex; justify-content:space-between; font-weight:500; font-size:15px; }
.ex-prompt { margin-top:12px; background:var(--surface-2); padding:16px 18px; font-family:var(--fd); font-weight:var(--fd-w); font-size:20px; line-height:1.3; }
.ex-list { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; font-size:15px; }
.ex-list li { display:flex; justify-content:space-between; padding:5px 0; }

.h2x { display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.prompt-box { margin-top:12px; display:flex; align-items:center; gap:10px; width:min(720px,100%); background:var(--surface); padding:10px 10px 10px 22px; text-align:left; font-family:var(--fd); font-weight:var(--fd-w); font-size:clamp(1.05rem, 1rem + .5vw, 1.4rem); }
.prompt-text { flex:1; }
.prompt-box .caret { margin-right:auto; }
.pipeline-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:760px; font-size:14px; }
.pipeline-chips li { padding:7px 12px; background:var(--surface); color:var(--muted); transition:background-color .3s, color .3s; }
.pipeline-chips li.on { background:var(--accent); color:var(--accent-ink); }

.h3x { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.traces { width:100%; height:auto; }
.traces .die { fill:var(--surface-2); }
.traces .chip-label { fill:var(--accent); font:500 22px var(--ft); }
.traces .paths path, .m-trace .paths path { fill:none; stroke:var(--accent); stroke-width:5; stroke-linejoin:miter; stroke-dasharray:var(--len, 600); stroke-dashoffset:var(--len, 600); }
.traces.is-in .paths path, .m-trace.is-in .paths path { stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--ease); }
.traces .paths path:nth-child(2n) { transition-delay:.2s !important; }
.traces .pads circle, .m-trace .pads circle { fill:var(--accent); }
.traces .pulses circle { fill:var(--alt); }

.h4x { position:relative; height:min(78vh, 720px); color:#f5f5f5; }
.h4x video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.h4x-scrim { position:absolute; inset:0; background:rgba(0,0,0,.52); }
.h4x-copy { position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(32px, 7vh, 72px); }
.h4x .lead { color:#e8e8e8; }

.h5x { padding:clamp(32px,5vw,64px) 0 0; overflow:clip; }
.h5x-kick { padding:0 clamp(24px, 4vw, 56px); font-size:clamp(1.1rem, 1rem + .6vw, 1.5rem); }
.h5x .giant { padding:0 clamp(14px, 2vw, 28px); margin-top:12px; }
.marquee { overflow:clip; border-block:1px solid var(--line); margin-top:24px; }
.marquee-track { display:flex; width:max-content; gap:40px; padding:16px 0; animation:marquee 32s linear infinite; font-family:var(--fd); font-weight:var(--fd-w); font-size:clamp(1.3rem, 2vw, 2rem); white-space:nowrap; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }

.h6x { display:flex; flex-direction:column; align-items:center; gap:40px; }
.pipe { width:100%; position:relative; padding-top:28px; }
.pipe-line { position:absolute; left:5%; right:5%; top:34px; height:2px; background:var(--line); overflow:hidden; }
.pipe-pulse { position:absolute; top:0; left:-20%; width:20%; height:100%; background:var(--accent); animation:pulse 2.8s var(--ease-io) infinite; }
@keyframes pulse { to { left:100%; } }
.pipe ol { display:grid; grid-template-columns:repeat(10, 1fr); text-align:center; font-size:14px; }
.pipe li { position:relative; padding-top:26px; }
.pipe li::before { content:""; position:absolute; top:0; left:50%; width:14px; height:14px; margin-left:-7px; background:var(--surface-2); border-radius:50%; transition:background-color .3s; }
.pipe li.on::before { background:var(--accent); }

/* ---------------- how it works ---------------- */
.w1 { margin-top:48px; display:flex; gap:6px; }
.w1 li { flex:var(--g) 1 0; min-width:12%; }
.w1 b { display:block; height:170px; padding:18px; font-family:var(--fd); font-weight:var(--fd-w); font-size:clamp(1.15rem, 1.8vw, 1.7rem); }
.w1 li:nth-child(1) b { background:var(--surface-2); }
.w1 li:nth-child(2) b { background:var(--accent); color:var(--accent-ink); }
.w1 li:nth-child(3) b { background:var(--alt); color:var(--alt-ink); opacity:.85; }
.w1 li:nth-child(4) b { background:var(--alt); color:var(--alt-ink); }
.w1 p { margin-top:14px; font-size:16px; max-width:26ch; padding-right:10px; }

.w2 { display:grid; grid-template-columns:1fr 3px 2fr; gap:32px; padding-bottom:200px; }
.w2 .head { position:sticky; top:0; }
.w2-track { background:var(--line); position:relative; }
.w2-fill { position:absolute; inset:0 0 auto; height:var(--p, 0%); background:var(--accent); }
.w2 ol { display:grid; gap:96px; }
.w2 li b { display:block; font-family:var(--fd); font-weight:var(--fd-w); font-size:clamp(1.5rem, 2.4vw, 2.2rem); }
.w2 li p { color:var(--muted); margin-top:6px; max-width:40ch; }

.w3 { margin-top:40px; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.w3 div { background:var(--surface); padding:20px; min-height:180px; display:flex; flex-direction:column; justify-content:space-between; transition:background-color .3s; cursor:default; }
.w3 b { font-family:var(--fd); font-weight:var(--fd-w); font-size:22px; }
.w3 p { color:var(--muted); font-size:15px; opacity:0; transform:translateY(10px); transition:opacity .35s, transform .5s var(--ease); }
.w3 div:hover, .w3 div:focus { background:var(--accent); color:var(--accent-ink); outline:0; }
.w3 div:hover p, .w3 div:focus p { opacity:1; transform:none; color:var(--accent-ink); }

.w4-head { display:flex; justify-content:space-between; align-items:end; }
.w4-arrows { display:flex; gap:6px; }
.w4 { margin-top:32px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 30%); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:12px; }
.w4 figure { scroll-snap-align:start; }
.w4 img { width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease); }
.w4 figure:hover img { transform:scale(1.04); }
.w4 figure { overflow:hidden; }
.w4 figcaption { margin-top:12px; font-size:15px; color:var(--muted); }
.w4 figcaption b { display:block; color:var(--ink); font-size:18px; }

.w5 { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; padding-bottom:220px; }
.w5-side { position:sticky; top:0; align-self:start; }
.w5-steps { display:grid; gap:80px; padding-top:40px; }
.w5-steps li { opacity:.35; transition:opacity .4s; }
.w5-steps li.on { opacity:1; }
.w5-steps b { font-family:var(--fd); font-weight:var(--fd-w); font-size:clamp(1.6rem, 2.6vw, 2.4rem); display:block; }
.w5-steps li.on b { color:var(--accent); }

/* ---------------- showcase ---------------- */
.s1-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px; }
.seg-btns { display:flex; gap:4px; }
.seg-btns button { border:0; background:var(--surface-2); padding:10px 14px; cursor:pointer; }
.seg-btns button[aria-pressed="true"] { background:var(--alt); color:var(--alt-ink); }
.s1 { margin-top:28px; display:grid; gap:4px; }
.s1 li { display:grid; grid-template-columns:2fr 2fr 1fr 1fr; align-items:center; gap:8px; background:var(--surface); padding:0 0 0 20px; min-height:60px; animation:rowin .5s var(--ease) backwards; animation-delay:calc(var(--i) * 40ms); }
.s1 b { font-family:var(--fd); font-weight:var(--fd-w); font-size:22px; }
.s1 .st { align-self:stretch; display:flex; align-items:center; padding:0 16px; background:var(--surface-2); font-weight:500; }
.s1 .st.rev { background:var(--accent); color:var(--accent-ink); }
.s1 .st.skip { color:var(--muted); background:transparent; }
@keyframes rowin { from { opacity:0; transform:translateY(10px); } }

.s2 { margin-top:36px; display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:180px; gap:10px; }
.s2 figure { position:relative; overflow:hidden; }
.s2 figure.tall { grid-row:span 2; }
.s2 img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.s2 figure:hover img { transform:scale(1.05); }
.tag { position:absolute; left:0; bottom:0; padding:6px 10px; font-size:13px; }
.tg1 { background:var(--accent); color:var(--accent-ink); } .tg2 { background:var(--alt); color:var(--alt-ink); } .tg3 { background:var(--surface-2); color:var(--ink); } .tg4 { background:var(--ink); color:var(--bg); }
.mini { display:flex; flex-direction:column; gap:6px; font-size:15px; }
.mini span { display:flex; justify-content:space-between; }
.mini i { font-style:normal; }
.mini .tot { background:var(--accent); color:var(--accent-ink); padding:4px 8px; margin-top:auto; }
.mini .big { font-family:var(--fd); font-weight:var(--fd-w); font-size:44px; line-height:1; margin-top:auto; }

.s3 { margin-top:28px; }
.s3-tabs { position:relative; display:flex; gap:28px; border-bottom:1px solid var(--line); }
.s3-tabs button { background:none; border:0; padding:12px 0; cursor:pointer; color:var(--muted); font-size:17px; }
.s3-tabs button[aria-selected="true"] { color:var(--ink); }
.s3-ink { position:absolute; bottom:-1px; height:2px; background:var(--accent); transition:left .45s var(--ease), width .45s var(--ease); }
.s3-panels { margin-top:20px; }
.s3-panels .panel { animation:panelin .5s var(--ease); }
@keyframes panelin { from { opacity:0; transform:translateX(18px); } }
.kv { margin-top:14px; display:grid; grid-template-columns:1fr auto; gap:8px 24px; max-width:520px; font-variant-numeric:tabular-nums; }
.kv i { font-style:normal; }

.s4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.s4 b { display:block; font-family:var(--fd); font-weight:var(--fd-w); font-size:clamp(3rem, 6vw, 5.5rem); line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.s4 span { display:block; margin-top:10px; color:var(--muted); max-width:22ch; }

.s5 { position:relative; margin-top:28px; display:grid; height:300px; }
.s5 > .panel { grid-area:1 / 1; }
.s5-b { clip-path:inset(0 0 0 var(--pos)); background:var(--accent); color:var(--accent-ink); text-align:right; }
.s5-b ol { justify-items:end; }
.s5 ol { display:grid; gap:4px; margin-top:12px; font-size:16px; }
.s5 b { font-family:var(--fd); font-weight:var(--fd-w); font-size:28px; }
.s5 input { position:absolute; inset:auto 0 -28px; width:100%; accent-color:var(--accent); }

/* ---------------- team ---------------- */
.portrait { aspect-ratio:4/5; background:var(--surface-2); display:grid; place-items:center; position:relative; overflow:hidden; }
.portrait::after { content:attr(data-mono); font-family:var(--fd); font-weight:var(--fd-w); font-size:clamp(3rem, 7vw, 6rem); color:var(--accent); letter-spacing:-0.04em; }
.portrait.round { border-radius:50%; aspect-ratio:1; width:min(220px, 100%); }
.t1 { margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.person { display:flex; flex-direction:column; gap:6px; }
.person .portrait { aspect-ratio:5/4; margin-bottom:12px; transition:transform .8s var(--ease); }
.person:hover .portrait { transform:scale(.98); }
.person b { font-family:var(--fd); font-weight:var(--fd-w); font-size:28px; }
.person p { color:var(--muted); max-width:44ch; }

.t2 > div { display:block; padding:18px 0; border-bottom:1px solid var(--line); cursor:default; outline:0; }
.t2-name { display:block; font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(2.6rem, 8vw, 7rem); line-height:1; transition:color .3s, transform .6s var(--ease); }
.t2-bio { display:block; max-height:0; overflow:hidden; color:var(--muted); transition:max-height .5s var(--ease), margin .5s; }
.t2 > div:hover .t2-name, .t2 > div:focus .t2-name { color:var(--accent); transform:translateX(16px); }
.t2 > div:hover .t2-bio, .t2 > div:focus .t2-bio { max-height:60px; margin-top:10px; }

.t3 { margin-top:28px; }
.t3 li { display:grid; grid-template-columns:2fr 1fr 2fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); font-size:18px; transition:padding .4s var(--ease); }
.t3 li:hover { padding-left:12px; }
.t3 b { font-weight:500; }
.t3-float { position:absolute; left:0; top:0; width:160px; height:200px; pointer-events:none; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-family:var(--fd); font-size:56px; opacity:0; transform:translate(-50%, -50%) scale(.8); transition:opacity .25s, transform .35s var(--ease); }
.t3-float.on { opacity:1; transform:translate(-50%, -50%) scale(1); }

.t4 { max-width:760px; margin-inline:auto; padding:clamp(28px, 4vw, 56px); }
.t4 p { margin-top:18px; font-size:19px; }
.sigs { display:flex; gap:48px; margin-top:32px; }
.sig { font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-size:30px; color:var(--accent); }

.t5 { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:32px; align-items:center; text-align:center; }
.t5 figure { display:flex; flex-direction:column; align-items:center; gap:16px; }
.t5 figcaption b { display:block; font-size:20px; }
.t5 figcaption span { color:var(--muted); }
.t5 .muted { margin-top:12px; }

/* ---------------- CTA ---------------- */
.c1 { display:flex; flex-direction:column; align-items:center; gap:24px; padding:clamp(40px, 7vw, 96px) 24px; }
.c1 .head .muted { display:block; }
.field-row { display:flex; width:min(540px, 100%); background:var(--alt); padding:6px; }
.field-row input { flex:1; border:0; background:transparent; color:var(--alt-ink); padding:0 16px; font-size:18px; min-height:52px; outline:0; }
.field-row input::placeholder { color:color-mix(in srgb, var(--alt-ink) 60%, transparent); }
.field-row .btn { min-height:52px; }
.small-row input { min-height:42px; font-size:15px; } .small-row .btn { min-height:42px; padding:0 14px; }
.c2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.c2 .lead { margin-top:18px; }
.c2-form { display:grid; gap:14px; }
.c2-form label { display:grid; gap:6px; font-size:14px; }
.c2-form input, .c2-form textarea { background:var(--surface-2); border:0; padding:12px; font-size:16px; }
.c2-form .btn { justify-self:start; }
.c3 { display:flex; flex-direction:column; align-items:flex-start; gap:40px; }
.c4 { background:var(--accent); color:var(--accent-ink); padding-bottom:40px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.c4 .marquee { border:0; margin:0; }
.marquee-big .marquee-track { font-size:clamp(2.4rem, 7vw, 6rem); gap:48px; padding:32px 0 8px; animation-duration:22s; }

/* ---------------- footers ---------------- */
.f1 { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; font-size:15px; }
.f1 nav { display:flex; gap:24px; }
.f1 > span:last-child { justify-self:end; }
.f2 { padding:48px var(--pad) 24px; overflow:clip; }
.f2 nav { display:flex; flex-wrap:wrap; gap:8px 28px; }
.f2-word { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:-0.05em; font-size:21vw; line-height:.8; margin:48px 0 16px; color:var(--accent); }
.f3 { display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:32px; font-size:15px; }
.f3 > div, .f3-form { display:flex; flex-direction:column; gap:8px; }
.f3 b { margin-bottom:4px; }
.f3 .muted { max-width:28ch; margin-top:8px; }

/* ---------------- motion lab ---------------- */
.lab { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 24px; }
.lab .stage { min-height:220px; display:grid; place-items:center; padding:28px; }
.m-list { display:flex; gap:6px; flex-wrap:wrap; }
.m-list li { background:var(--surface); padding:10px 14px; }
.m-type { font-family:var(--fd); font-size:22px; }
.m-count { font-family:var(--fd); font-weight:var(--fd-w); font-size:64px; color:var(--accent); font-variant-numeric:tabular-nums; }
.m-trace { width:100%; }
.m-shutter { width:100%; overflow:hidden; }
.m-shutter img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.m-tilt { width:220px; padding:28px; transition:transform .25s; transform-style:preserve-3d; }
.m-tilt b { display:block; font-family:var(--fd); font-size:44px; }
.m-spot { width:100%; height:160px; display:grid; place-items:center; background:radial-gradient(160px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), var(--surface); }
.m-links { font-size:20px; display:flex; gap:24px; }
.sweep { text-decoration:none; background:linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 2px; transition:background-size .4s var(--ease); padding-bottom:3px; }
.sweep:hover { background-size:100% 2px; }
.m-progress { position:sticky; top:-28px; height:6px; background:var(--line); margin:-28px -28px 20px; }
.m-progress span { display:block; height:100%; width:var(--p, 0%); background:var(--accent); }
.stage.short { display:block; }

/* ---------------- motion engine (content stays visible without JS) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-split] .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
  .js [data-split] .w > span { display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease); transition-delay:calc(var(--wi) * 45ms); }
  .js [data-split].is-in .w > span { transform:none; }
  .js [data-rise] { opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform 1s var(--ease); transition-delay:calc(var(--d, 0) * 120ms + 250ms); }
  .js [data-rise].is-in { opacity:1; transform:none; }
  .js [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .9s var(--ease); }
  .js [data-reveal].is-in { opacity:1; transform:none; }
  .js [data-reveal-group] > * { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--k) * 80ms); }
  .js [data-reveal-group].is-in > * { opacity:1; transform:none; }
  .js [data-stagger] > * { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--k) * 70ms + 300ms); }
  .js [data-stagger].is-in > * { opacity:1; transform:none; }
  .js [data-shutter] { clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease-io); }
  .js [data-shutter] img { transform:scale(1.15); transition:transform 1.5s var(--ease); }
  .js [data-shutter].is-in { clip-path:inset(0); }
  .js [data-shutter].is-in img { transform:none; }
}

/* ---------------- small screens ---------------- */
@media (max-width: 900px) {
  .lab { grid-template-columns:1fr 1fr; }
  .h1x-row, .h3x, .c2, .w5, .t1, .t5 { grid-template-columns:1fr; }
  .h1x-row > .panel { grid-column:auto; }
  .n1 nav, .n2 nav:not(.end) { display:none; }
  .n1, .n2 { grid-template-columns:1fr auto; }
  .w1 { flex-direction:column; } .w1 b { height:auto; min-height:70px; }
  .w3 { grid-template-columns:1fr 1fr; } .w3 p { opacity:1; transform:none; }
  .s2 { grid-template-columns:1fr 1fr; }
  .s4 { grid-template-columns:1fr 1fr; }
  .pipe ol { grid-template-columns:repeat(5, 1fr); row-gap:24px; } .pipe-line { display:none; }
  .f1, .f3 { grid-template-columns:1fr; } .f1 > span:last-child { justify-self:start; }
  .w2 { grid-template-columns:1fr 3px 2fr; gap:16px; }
  .t3 li { grid-template-columns:1fr; gap:2px; }
}
@media (max-width: 560px) { .lab { grid-template-columns:1fr; } .s1 li { grid-template-columns:1fr auto; } .s1 li span:not(.st) { display:none; } }
.s2 > figure:last-child { grid-column:1 / -1; }
.person .portrait { max-height:400px; }

/* forest scheme extras: italic serif accent lines and mono labels */
.display em, .head em, .giant em, .intro h1 em, body > h1 em { font-family:var(--fs, Georgia, serif); font-style:italic; font-weight:400; letter-spacing:-0.025em; color:var(--alt); }
[data-fonts="dm"] .piece-code, [data-fonts="dm"] .tag, [data-fonts="dm"] .ex-top { font-family:var(--fm); letter-spacing:.06em; }

/* =====================================================================
   NEW HEROES H7–H18 (forest + DM by default, but every scheme works)
   ===================================================================== */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.kicker, .mono-label { font-family:var(--fm, ui-monospace, Menlo, monospace); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.kicker { display:block; margin-bottom:22px; }
.kicker.center { text-align:center; }
.display em, .mega em, .head em, .lead em.serif { font-family:var(--fs, Georgia, serif); font-style:italic; font-weight:400; color:var(--alt); letter-spacing:-0.02em; }
.display em { display:block; }
.text-arrow { display:inline-flex; gap:12px; align-items:center; text-decoration:none; font-weight:500; }
.text-arrow span { transition:transform .3s var(--ease); }
.text-arrow:hover span { transform:translateY(3px); }
.btn span[aria-hidden] { margin-left:6px; transition:transform .3s var(--ease); }
.btn:hover span[aria-hidden] { transform:translate(2px,-2px); }
.status { margin-top:26px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:15px; }
.status.center { justify-content:center; }
.status i { width:9px; height:9px; border-radius:50%; background:var(--leaf, var(--accent)); box-shadow:0 0 0 4px color-mix(in srgb, var(--leaf, var(--accent)) 22%, transparent); animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--leaf, var(--accent)) 10%, transparent); } }
.status span { opacity:.6; }
[data-palette="forest"] .btn { border-radius:6px; }

/* H7 reference style */
.h7x { display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(32px,5vw,72px); align-items:center; }
.h7x .display { font-size:clamp(3rem, 6.4vw, 6.6rem); }
.iso-panel { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px 26px; aspect-ratio:1 / .9; display:flex; flex-direction:column; background-image:radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size:22px 22px; }
.iso-top, .iso-foot { display:flex; justify-content:space-between; align-items:center; font-family:var(--fm, monospace); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.iso-foot { border-top:1px solid var(--line); padding-top:12px; margin-top:auto; }
.iso-chip, .iso-tag { border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 80%, transparent); padding:6px 10px; font-family:var(--fm, monospace); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.iso { flex:1; width:100%; min-height:0; overflow:visible; }
.iso-l { transform-box:fill-box; transition:transform 1.4s var(--ease); }
.iso-tag { position:absolute; }
.iso-tag::before { content:""; display:inline-block; width:6px; height:6px; margin-right:8px; background:var(--leaf, var(--accent)); vertical-align:1px; }
.t-env { right:4%; top:22%; } .t-fw { left:4%; top:53%; } .t-hw { right:4%; bottom:16%; }
@media (prefers-reduced-motion: no-preference) {
  .js .iso-panel:not(.is-in) .iso-l1 { transform:translateY(70px); }
  .js .iso-panel:not(.is-in) .iso-l3 { transform:translateY(-60px); }
  .iso-panel.is-in .iso-l1 { animation:bob 6s ease-in-out 1.4s infinite; }
  .iso-panel.is-in .iso-l2 { animation:bob 6s ease-in-out 1.8s infinite; }
}
@keyframes bob { 50% { transform:translateY(-8px); } }

/* H8 ask box */
.h8x { display:flex; flex-direction:column; align-items:center; text-align:center; }
.ask { margin-top:40px; display:flex; gap:8px; width:min(760px,100%); background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:0 20px 50px -30px color-mix(in srgb, var(--ink) 40%, transparent); }
.ask input { flex:1; border:0; background:transparent; font-size:20px; padding:0 14px; min-height:56px; color:#213c34; outline:0; }
.ask-chips { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; font-size:15px; }
.ask-chips button { border:1px solid var(--line); background:var(--surface); padding:8px 14px; border-radius:999px; cursor:pointer; transition:background-color .2s; }
.ask-chips button:hover { background:var(--surface-2); }

/* H9 photo with readouts */
.h9x { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.h9x-photo { position:relative; border-radius:14px; overflow:visible; }
.h9x-photo img { width:100%; aspect-ratio:4/3.4; object-fit:cover; border-radius:14px; }
.readout { position:absolute; display:grid; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-size:14px; box-shadow:0 16px 40px -24px rgba(0,0,0,.35); animation:bob 5s ease-in-out infinite; }
.readout b { font-family:var(--fm, monospace); font-weight:400; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.r1 { left:-28px; top:12%; } .r2 { right:-22px; top:44%; animation-delay:1.2s; } .r3 { left:12%; bottom:-22px; animation-delay:2.1s; }

/* H10 console */
.h10x { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.console { background:#16271f; color:#d9e6d4; border-radius:12px; padding:0 0 18px; font-family:var(--fm, monospace); font-size:14px; min-height:380px; overflow:hidden; box-shadow:0 30px 60px -35px rgba(0,0,0,.5); }
[data-palette="forest"] .console { background:#213c34; }
.console-top { display:flex; align-items:center; gap:7px; padding:12px 16px; background:rgba(255,255,255,.06); }
.console-top i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.25); }
.console-top span { margin-left:10px; opacity:.7; font-size:12px; }
.console ol { padding:14px 18px 0; display:grid; gap:7px; }
.console li { display:flex; gap:12px; opacity:0; transform:translateY(6px); animation:logline .4s var(--ease) forwards; }
.console li .t { opacity:.5; }
.console li .ok { color:#a8d18a; margin-left:auto; }
.console li .rv { color:#e6a07c; margin-left:auto; }
@keyframes logline { to { opacity:1; transform:none; } }

/* H11 big number */
.h11x { display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,72px); align-items:center; }
.h11x-num { font-family:var(--fs, Georgia, serif); font-style:italic; font-size:clamp(10rem, 26vw, 22rem); line-height:.8; color:var(--alt); font-variant-numeric:tabular-nums; }
.tick-list { margin-top:28px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 24px; max-width:520px; }
.tick-list li { display:flex; align-items:center; gap:10px; color:var(--muted); transition:color .3s; }
.tick-list li::before { content:""; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); transition:background-color .3s, border-color .3s; flex:none; }
.tick-list li.on { color:var(--ink); }
.tick-list li.on::before { background:var(--leaf, var(--accent)); border-color:var(--leaf, var(--accent)); box-shadow:inset 0 0 0 4px var(--bg); }

/* H12 fanned cards */
.h12x { display:flex; flex-direction:column; align-items:center; }
.fan { position:relative; height:330px; width:min(860px,100%); margin-top:48px; }
.fan-card { position:absolute; top:20px; left:50%; width:280px; min-height:260px; margin-left:-140px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:0 30px 60px -40px rgba(0,0,0,.45); transition:transform .7s var(--ease); }
.fan-card p { font-size:16px; }
.fan-card ul { display:grid; gap:6px; font-size:15px; } .fan-card li { display:flex; justify-content:space-between; } .fan-card li b { font-weight:500; }
.fan-card .big-line { font-family:var(--fs, Georgia, serif); font-style:italic; font-size:48px; line-height:1; color:var(--alt); }
.fan-card.c-b { background:var(--accent); color:var(--accent-ink); } .fan-card.c-b .mono-label { color:inherit; opacity:.75; }
.bar { height:6px; background:color-mix(in srgb, currentColor 20%, transparent); border-radius:3px; overflow:hidden; } .bar span { display:block; height:100%; width:0; background:currentColor; transition:width 2.4s var(--ease) .6s; }
.fan.is-in .bar span { width:100%; }
.c-a { transform:translateX(-300px) rotate(-6deg); } .c-c { transform:translateX(300px) rotate(6deg); } .c-b { z-index:2; transform:translateY(-10px); }
.fan:hover .c-a { transform:translateX(-320px) rotate(-3deg) translateY(-6px); } .fan:hover .c-c { transform:translateX(320px) rotate(3deg) translateY(-6px); }
.js .fan:not(.is-in) .c-a, .js .fan:not(.is-in) .c-c { transform:none; }

/* H13 bento */
.h13x { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:repeat(2, minmax(200px, auto)); gap:12px; }
.bt { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:8px; overflow:hidden; position:relative; }
.bt b { font-size:clamp(2rem, 3.6vw, 3.2rem); font-weight:500; letter-spacing:-0.03em; line-height:1; margin-top:auto; font-variant-numeric:tabular-nums; }
.bt-main { grid-column:span 2; grid-row:span 2; justify-content:space-between; }
.bt-main .display { font-size:clamp(2.8rem, 5vw, 5rem); }
.bt-main .btn { align-self:flex-start; }
.bt-prompt { font-family:var(--fs, Georgia, serif); font-style:italic; font-size:24px; line-height:1.2; margin-top:auto; color:var(--alt); }
.bt-dark { background:var(--accent); color:var(--accent-ink); } .bt-dark .mono-label { color:inherit; opacity:.7; }
.bt-leaf { background:color-mix(in srgb, var(--leaf, var(--accent)) 25%, var(--surface)); }
.bt-img { padding:0; } .bt-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform 1s var(--ease); } .bt-img:hover img { transform:scale(1.06); }
.bt-img .mono-label { position:absolute; left:12px; bottom:12px; background:var(--bg); padding:5px 8px; border-radius:4px; color:var(--ink); }

/* H14 stepper */
.h14x { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; }
.stepper { position:relative; display:grid; gap:2px; padding-left:28px; }
.stepper::before { content:""; position:absolute; left:6px; top:10px; bottom:10px; width:2px; background:var(--line); }
.stepper::after { content:""; position:absolute; left:6px; top:10px; width:2px; height:var(--fill, 0%); background:var(--leaf, var(--accent)); transition:height .5s var(--ease); }
.stepper li { position:relative; display:flex; justify-content:space-between; padding:10px 14px; border-radius:8px; transition:background-color .3s, color .3s; color:var(--muted); }
.stepper li::before { content:""; position:absolute; left:-27px; top:15px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--line); transition:all .3s; }
.stepper li.done { color:var(--ink); } .stepper li.done::before { background:var(--leaf, var(--accent)); border-color:var(--leaf, var(--accent)); }
.stepper li.now { background:var(--surface); color:var(--ink); } .stepper li.now::before { border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.stepper b { font-weight:500; } .stepper span { font-family:var(--fm, monospace); font-size:13px; }

/* H15 editorial */
.mega { font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:var(--fd-track); font-size:clamp(3.4rem, 10vw, 10rem); line-height:.92; }
.mega em { display:block; }
.h15x-row { margin-top:40px; display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; }
.h15x-photos { margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.h15x-photos img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.h15x-photos figcaption { margin-top:8px; font-family:var(--fm, monospace); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* H16 prompt wall */
.h16x { position:relative; min-height:min(80vh, 680px); display:grid; place-items:center; overflow:hidden; }
.wall { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:18px; opacity:.55; }
.wall-row { overflow:hidden; }
.wall-track { display:flex; gap:14px; width:max-content; animation:marquee 60s linear infinite; }
.wall-row.rev .wall-track { animation-direction:reverse; animation-duration:70s; }
.wall-track span { white-space:nowrap; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:12px 20px; font-size:18px; color:var(--muted); }
.h16x-card { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:18px; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:clamp(28px,4vw,56px) clamp(28px,5vw,72px); box-shadow:0 40px 80px -40px rgba(0,0,0,.35); }
.h16x-card .head { font-size:clamp(2.4rem, 4.6vw, 4.2rem); }
.h16x-card .head em { display:block; }

/* H17 loops */
.h17x { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; }
.loops { display:grid; gap:28px; }
.loop { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; display:grid; gap:12px; }
.loop ol { display:flex; flex-wrap:wrap; gap:6px; font-size:14px; } .loop li { background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
.loop-bar { height:10px; border-radius:5px; background:var(--surface-2); overflow:hidden; } .loop-bar span { display:block; height:100%; width:0; border-radius:5px; }
.loop-bar.slow span { background:var(--signal, #d57d57); } .loop-bar.fast span { background:var(--leaf, var(--accent)); }
.loops.is-in .loop-bar.slow span { width:100%; transition:width 6s linear .4s; }
.loops.is-in .loop-bar.fast span { width:100%; transition:width .9s var(--ease) .4s; }
.loops .note { font-size:13px; color:var(--muted); }

/* H18 minimal mark */
.h18x { display:flex; flex-direction:column; align-items:center; gap:18px; padding:clamp(24px,6vh,72px) 0; }
.mark-draw { width:clamp(96px, 12vw, 150px); }
.mark-draw .paths path { fill:none; stroke:var(--accent); stroke-width:7; stroke-dasharray:var(--len,100); stroke-dashoffset:var(--len,100); }
.mark-draw.is-in .paths path { stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--ease); }
.mark-draw .pads circle { fill:var(--accent); transform-origin:center; transform-box:fill-box; transform:scale(0); transition:transform .5s var(--ease) 1.2s; }
.mark-draw.is-in .pads circle { transform:none; }
.h18x .display { font-size:clamp(4rem, 12vw, 10rem); }
.scroll-cue { margin-top:24px; font-size:22px; color:var(--muted); animation:bob 2.2s ease-in-out infinite; }

@media (max-width: 900px) {
  .h7x, .h9x, .h10x, .h14x, .h17x { grid-template-columns:1fr; }
  .h11x { grid-template-columns:1fr; } .h11x-num { font-size:9rem; }
  .h13x { grid-template-columns:1fr 1fr; } .bt-main { grid-column:1 / -1; grid-row:auto; }
  .h15x-photos { grid-template-columns:1fr 1fr; }
  .fan { height:auto; display:grid; gap:12px; } .fan-card, .c-a, .c-b, .c-c { position:relative; left:auto; top:auto; margin:0; width:auto; transform:none !important; }
  .r1 { left:8px; } .r2 { right:8px; }
}
.h13x { grid-template-columns:repeat(5, minmax(0,1fr)); grid-template-areas:"main main prompt cost img" "main main test out img"; }
.h13x > .bt-main { grid-area:main; } .h13x > .bt:nth-child(2) { grid-area:prompt; } .h13x > .bt:nth-child(3) { grid-area:cost; } .h13x > .bt:nth-child(4) { grid-area:img; } .h13x > .bt:nth-child(5) { grid-area:test; } .h13x > .bt:nth-child(6) { grid-area:out; }
@media (max-width: 900px) { .h13x { grid-template-columns:1fr 1fr; grid-template-areas:"main main" "prompt cost" "img img" "test out"; } .bt-img { min-height:220px; } }


/* Full-page layout variants built from the gallery pieces. Loaded after ../mock.css. */

/* ---------- motion personalities ---------- */
:root, [data-motion="lively"] { --m-dur:.9s; --m-dist:24px; --m-step:70ms; --m-word:45ms; --m-delay:200ms; --m-ease:cubic-bezier(.22,1,.36,1); }
[data-motion="snappy"]    { --m-dur:.5s;  --m-dist:14px; --m-step:40ms;  --m-word:28ms; --m-delay:60ms;  --m-ease:cubic-bezier(.2,.9,.3,1); }
[data-motion="calm"]      { --m-dur:1.3s; --m-dist:10px; --m-step:110ms; --m-word:60ms; --m-delay:300ms; --m-ease:cubic-bezier(.33,1,.68,1); }
[data-motion="cinematic"] { --m-dur:1.5s; --m-dist:56px; --m-step:130ms; --m-word:80ms; --m-delay:350ms; --m-ease:cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: no-preference) {
  .js [data-split] .w > span { transition:transform calc(var(--m-dur) + .1s) var(--m-ease); transition-delay:calc(var(--wi) * var(--m-word)); }
  .js [data-rise] { transform:translateY(var(--m-dist)); transition:opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); transition-delay:calc(var(--d, 0) * 120ms + var(--m-delay)); }
  .js [data-reveal] { transform:translateY(var(--m-dist)); transition:opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); }
  .js [data-reveal-group] > * { transform:translateY(var(--m-dist)); transition:opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); transition-delay:calc(var(--k) * var(--m-step)); }
  .js [data-stagger] > * { transform:translateY(calc(var(--m-dist) * .6)); transition:opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); transition-delay:calc(var(--k) * var(--m-step) + var(--m-delay)); }
  [data-motion="calm"] .js [data-reveal], [data-motion="calm"] [data-reveal] { filter:none; }
  /* cinematic: headings also un-blur as they arrive */
  [data-motion="cinematic"].js [data-reveal]:not(.is-in) { filter:blur(6px); }
  [data-motion="cinematic"].js [data-reveal] { transition:opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease), filter var(--m-dur) var(--m-ease); }
}

/* ---------- page frame ---------- */
body { font-size:18px; }
.v-header { position:sticky; top:0; z-index:40; padding:16px var(--pad); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:saturate(1.2) blur(10px); transition:box-shadow .3s; }
.v-header.scrolled { box-shadow:0 1px 0 var(--line); }
.v-header .n3 .menu-panel { position:fixed; inset:0; min-height:100vh; padding:120px var(--pad) 48px; }
.v-sec { padding:clamp(96px, 11vw, 176px) var(--pad) 0; }
.v-sec.v-hero { padding-top:clamp(56px, 8vw, 120px); }
.v-sec.flush { padding-inline:0; }
.v-sec.flush-top { padding-top:0; }
.v-sec.tint > * { background:var(--surface); padding:clamp(40px, 6vw, 96px); }
.v-foot { padding:clamp(120px, 12vw, 200px) var(--pad) 32px; }
.v-foot.flush { padding-inline:0; }
.h4x { height:calc(100vh - 80px); }
.h5x .giant { font-size:20.5vw; }
.w2 .head, .w5-side { top:110px; }
.w2, .w5 { padding-bottom:0; }
.t3 { position:relative; }
.t3-float { position:fixed; z-index:30; }
section { position:relative; }

/* ---------- variant switcher ---------- */
.v-switch { position:fixed; z-index:200; right:16px; bottom:16px; display:flex; align-items:center; gap:4px; padding:6px; background:#0c0c0c; color:#eee; font:13px/1 Inter, Arial, sans-serif; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.v-switch a { color:#eee; text-decoration:none; padding:8px 11px; }
.v-switch a[aria-current="page"] { background:#eee; color:#111; }
.v-switch span { padding:0 8px; color:#999; }


/* Production additions for the home page (on top of the mock-up piece styles). */
a.skip { position:absolute; left:16px; top:-100px; z-index:500; background:var(--ink); color:var(--bg); padding:12px 16px; text-decoration:none; border-radius:6px; }
a.skip:focus { top:12px; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } /* taste-skill-ignore: off-screen spam trap */
:focus-visible { outline:2px solid var(--alt); outline-offset:3px; }
.v-header { border-bottom:1px solid var(--line); }
.n3 .wm { font-weight:600; }
.menu-panel { background:var(--bg); }
.menu-panel .menu-foot { display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; }
.menu-panel .status { margin-top:0; }
.v-sec h2.display { font-size:clamp(2.6rem, 5.6vw, 5.4rem); }
.portrait.round { display:block; width:min(220px, 100%); height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; background:var(--surface-2); }
.t5-mid .text-arrow { margin-top:18px; justify-content:center; }
.note-small { margin-top:14px; font-size:14px; color:var(--muted); }
.c1-form { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.c1 .field-row { width:min(540px, 100%); border-radius:8px; }
.field-row input:focus-visible { outline:none; }
.field-row:focus-within { outline:2px solid var(--alt); outline-offset:2px; }
.form-status { min-height:1.4em; font-weight:500; }
.f3-legal { margin-top:40px; font-size:14px; }
.f3 a { text-decoration:none; } .f3 a:hover { text-decoration:underline; }
/* N1 header */
.n1 nav a { color:var(--ink); }
.n1 nav a:hover { text-decoration:underline; text-underline-offset:.25em; }
/* M5: the logo mark draws itself on load */
.wm svg.draw path { stroke:var(--accent); }
.wm svg.draw circle { fill:var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .wm svg.draw path { stroke-dasharray:100; stroke-dashoffset:100; animation:mark-draw 1.4s cubic-bezier(.22,1,.36,1) .15s forwards; }
  .wm svg.draw circle { transform-box:fill-box; transform-origin:center; transform:scale(0); animation:mark-pad .45s cubic-bezier(.22,1,.36,1) 1s forwards; }
}
@keyframes mark-draw { to { stroke-dashoffset:0; } }
@keyframes mark-pad { to { transform:none; } }
/* T1 founder cards */
/* founders: version C, two square photos centred on the page, names centred under each */
.v-t1 { text-align:center; }
.t1 { display:flex; justify-content:center; gap:clamp(20px, 3vw, 40px); }
.t1 .person { width:min(400px, 42vw); align-items:center; gap:2px; }
.person img.portrait { display:block; width:100%; max-height:none; height:auto; aspect-ratio:1; object-fit:cover; object-position:50% 25%; border-radius:14px; background:var(--surface-2); margin-bottom:14px; }
.person:hover .portrait { transform:none; }
.person b { font-size:26px; letter-spacing:-0.02em; }
.t1 .person span { font-size:15px; }
.team-cta { margin-top:32px; }
@media (max-width: 760px) {
  .t1 { gap:12px; }
  .t1 .person { width:calc(50% - 6px); }
  .t1 .person b { font-size:17px; line-height:1.25; letter-spacing:-0.01em; }
  .t1 .person span { font-size:14px; }
}
.head em { display:inline; }
.head-cta .short { display:none; }
@media (max-width: 560px) {
  .head-cta { min-height:42px; padding:0 14px; font-size:15px; }
  .head-cta .long { display:none; } .head-cta .short { display:inline; }
  .v-header { padding:12px 16px; }
  .v-header .wm { font-size:21px; }
}
@media (max-width: 560px) {
  .iso-tag, .iso-chip { display:none; }
  .iso-top, .iso-foot { font-size:11px; letter-spacing:.08em; }
  .iso-panel { padding:16px; aspect-ratio:auto; }
}


/* Zen-style hero: centred serif-accent headline, word-by-word blur rise, product window below the fold. */
.v-sec.v-zh { padding-top:clamp(40px, 5vw, 80px); overflow-x:clip; }
.zh { display:flex; flex-direction:column; align-items:center; text-align:center; }
.zh .kicker { margin-bottom:24px; }
.zh-title { margin:0; font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:-0.045em; font-size:clamp(3.2rem, 9.4vw, 8.6rem); line-height:.98; color:var(--ink); }
.zh-title em { font-family:var(--fs, Georgia, serif); font-style:italic; font-weight:400; letter-spacing:-0.02em; color:#c46a43; padding-right:.04em; } /* --signal darkened to pass 3:1 contrast */
.zh .lead { margin-top:30px; max-width:46ch; text-wrap:balance; color:var(--muted); font-size:clamp(1.05rem, .98rem + .35vw, 1.3rem); }
.zh .actions { margin-top:34px; }
.zh .status { margin-top:28px; }

/* product window */
.zh-window { --zp:1; position:relative; margin:clamp(48px, 5vw, 72px) auto 0; max-width:1216px; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--ink) 35%, transparent); }
.zw-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:12px 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 70%, var(--surface)); }
.zw-dots { display:flex; gap:7px; } .zw-dots i { width:11px; height:11px; border-radius:50%; background:var(--line); }
.zw-title { font-family:var(--fm, monospace); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.zw-title span:not(.zw-run) { opacity:.5; }
.zw-chip { justify-self:end; font-family:var(--fm, monospace); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); transition:background-color .4s, color .4s, border-color .4s; }
.zw-chip.done { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.zw-body { display:grid; grid-template-columns:220px 1fr 220px; min-height:clamp(380px, 40vw, 520px); }
.zw-stages { list-style:none; margin:0; padding:18px 12px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:2px; font-size:15px; }
.zw-stages li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--muted); transition:color .3s, background-color .3s; }
.zw-stages li::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; transition:background-color .3s, border-color .3s; }
.zw-stages li.on { color:var(--ink); background:color-mix(in srgb, var(--bg) 70%, transparent); }
.zw-stages li.done { color:var(--ink); }
.zw-stages li.done::before { background:var(--leaf, var(--accent)); border-color:var(--leaf, var(--accent)); }
.zw-stage { position:relative; display:grid; place-items:center; padding:24px; background-image:radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size:22px 22px; }
.zw-stage .iso { width:min(100%, 520px); height:auto; overflow:visible; }
.zw-stage .t-env { right:6%; top:18%; } .zw-stage .t-fw { left:6%; top:50%; } .zw-stage .t-hw { right:6%; bottom:14%; }
.zw-read { margin:0; padding:18px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.zw-read div { padding:14px 16px; border-radius:10px; background:color-mix(in srgb, var(--bg) 70%, transparent); }
.zw-read dt { font-family:var(--fm, monospace); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.zw-read dd { margin:4px 0 0; font-family:var(--fd); font-weight:var(--fd-w); letter-spacing:-0.03em; font-size:30px; line-height:1.1; font-variant-numeric:tabular-nums; }
.zw-prompt { border-top:1px solid var(--line); padding:14px 20px; font-family:var(--fm, monospace); font-size:13px; color:var(--muted); text-align:left; }
.zw-prompt span { color:var(--signal, var(--accent)); margin-right:6px; }

@media (max-width: 900px) {
  .zw-body { grid-template-columns:1fr; }
  .zw-stages { display:none; }
  .zw-read { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; }
  .zw-bar { grid-template-columns:1fr auto; }
  .zw-dots { display:none; }
  .zw-title { overflow:hidden; text-overflow:ellipsis; }
  .zw-title > span, .zw-title .zw-run { display:none; }
  .zw-stage .iso-tag { display:none; }
}

@keyframes zen-in { from { opacity:0; filter:blur(4px); transform:translateY(20px); } }
@media (prefers-reduced-motion: no-preference) {
  /* the Zen move: each word and line arrives soft, low and blurred, then settles. Words are split at build
     time and the cascade runs in CSS, so the first painted frame is already the start of the animation. */
  .js [data-zen] .zw-word, .js [data-zen] .zr { animation:zen-in .7s var(--ease) both; animation-delay:calc(var(--zi, 0) * 190ms + 150ms); }
  .js [data-zen] .zw-word { display:inline-block; }

  /* the window rises in after the copy, then eases flat and full-size as you scroll */
  .js .zh-window { opacity:0; transform:translateY(80px) scale(.94); transition:opacity 1s var(--ease), transform 1.4s var(--ease); transition-delay:var(--zw-delay, 0s); }
  .js .zh-window.is-in { opacity:1; transform:translateY(calc((1 - var(--zp)) * 36px)) scale(calc(.94 + var(--zp) * .06)); }
  .js .zh-window.is-in.settled { transition:transform .12s linear; transition-delay:0s; }
  .js .zh-window:not(.is-in) .iso-l1 { transform:translateY(70px); }
  .js .zh-window:not(.is-in) .iso-l3 { transform:translateY(-60px); }
  .zh-window.is-in .iso-l1 { animation:bob 6s ease-in-out 3s infinite; }
  .zh-window.is-in .iso-l2 { animation:bob 6s ease-in-out 3.4s infinite; }
}