:root{color-scheme:dark;--bg:oklch(0.165 0.014 280);--panel:oklch(0.215 0.018 280);--sunken:oklch(0.135 0.012 280);--line:oklch(0.97 0.005 280 / 0.1);--lineStrong:oklch(0.97 0.005 280 / 0.18);--ink:oklch(0.97 0.005 280);--soft:oklch(0.79 0.012 280);--faint:oklch(0.62 0.016 282);--accent:oklch(0.66 0.2 280);--accentText:oklch(0.16 0.02 280);--live:oklch(0.78 0.17 150)}
/* The signature display face + palette in ONE place, matching the app's OKLCH tokens
   (globals.css) so the public shell reads as the SAME product as the interior — not a
   plainer parallel stylesheet. Self-hosted (CSP font-src 'self'), font-display:swap. */
@font-face{font-family:"Clash Display";src:url("/fonts/ClashDisplay-Variable.woff2") format("woff2");font-weight:200 700;font-display:swap}
h1,h2,.brand,.footer-brand{font-family:"Clash Display",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em}
*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}/* Static CSS mesh (zero JS, no-hydration): a layered accent glow that reads as the same
   atmosphere as the interior MeshField. Tinted through var(--accent) via color-mix, so the
   per-topic <style> retint (public-document.ts) flows into the background too. */
body{margin:0;min-height:100vh;background:radial-gradient(115% 78% at 50% -12%,color-mix(in oklch,var(--accent) 13%,transparent),transparent 60%),radial-gradient(75% 55% at 100% 2%,color-mix(in oklch,var(--accent) 8%,transparent),transparent 55%),radial-gradient(85% 60% at 0% 8%,color-mix(in oklch,var(--live) 5%,transparent),transparent 58%),var(--bg)}a{color:inherit;text-decoration:none}button,input{font:inherit}
.shell{min-height:100vh}.nav{border-bottom:1px solid var(--line);background:var(--sunken)}.nav-inner,.section,.site-footer{width:100%;max-width:1050px;margin:auto;padding-left:20px;padding-right:20px}.nav-inner{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand,.footer-brand{font-size:1.12rem;font-weight:800;letter-spacing:0}.brand span,.footer-brand span,.accent{color:var(--accent)}.nav-links{display:flex;gap:18px;align-items:center;color:var(--soft);font-size:.92rem}
.eyebrow,.small-meta,.meta-link,.site-footer nav,.copyright{color:var(--faint);font:700 .76rem/1.45 ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:0;text-transform:uppercase}.section{padding-top:44px;padding-bottom:44px}.hero{padding-top:78px}
h1,h2,p{margin:0}h1{max-width:850px;font-size:4.9rem;line-height:.96;letter-spacing:0}.apex h1{font-size:4.8rem}.directory h1{font-size:3.4rem}h2{font-size:1.9rem;line-height:1.08}.lede{max-width:690px;margin-top:22px;color:var(--soft);font-size:1.18rem;line-height:1.5}.divider{border-top:1px solid var(--line)}
.finder,.planner-form{max-width:760px;margin-top:34px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px}.finder-grid{display:flex;gap:8px;align-items:end}.field{flex:1}.field label{display:block;margin-bottom:8px;color:var(--faint);font:700 .72rem ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:0;text-transform:uppercase}.field input,.planner-form input{width:100%;min-height:48px;border:1px solid var(--lineStrong);background:var(--sunken);color:var(--ink);padding:0 16px;outline:none}.field input:focus,.planner-form input:focus{border-color:var(--accent)}.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--accent);color:var(--accentText);font-weight:800;padding:0 24px;white-space:nowrap;cursor:pointer}
.examples,.chips,.link-row{display:flex;flex-wrap:wrap;gap:9px}.examples{margin-top:12px;align-items:center}.chip{display:inline-flex;align-items:center;min-height:34px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--soft);padding:7px 13px}.link-row{margin-top:24px}.proof{display:flex;gap:38px}.proof>*{flex:1}.proof-grid{display:flex;gap:22px;color:var(--soft);line-height:1.45}.cards{margin-top:20px;display:flex;flex-wrap:wrap;gap:14px}.card{flex:1 1 320px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:16px 18px}.card strong{display:block}.card span span{display:block;margin-top:4px;color:var(--faint);font:700 .8rem ui-monospace,"SFMono-Regular",Menlo,monospace}
.status{display:inline-flex;align-items:center;gap:10px;max-width:100%;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:10px 16px}.dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--live)}.planner-form{display:flex;gap:10px}.planner-form input{border-radius:999px}.planner-form .button{min-width:64px}
.site-footer{display:flex;flex-wrap:wrap;gap:28px;border-top:1px solid var(--line);padding-top:34px;padding-bottom:34px}.site-footer>div{max-width:270px}.site-footer p{margin-top:10px;color:var(--soft);line-height:1.45}.site-footer nav{display:flex;flex-wrap:wrap;gap:14px 24px;flex:1}.copyright{width:100%}.toast{position:fixed;top:16px;left:50%;z-index:5;transform:translateX(-50%);width:min(92vw,34rem);border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--soft);padding:10px 14px;text-align:center}
@media(max-width:960px){h1,.apex h1{font-size:4rem}.directory h1{font-size:3rem}}
@media(max-width:760px){.nav-inner,.section,.site-footer{padding-left:20px;padding-right:20px}.nav-links .optional{display:none}.hero{padding-top:64px}h1,.apex h1{font-size:3.2rem}.directory h1{font-size:2.55rem}h2{font-size:1.72rem}.lede{font-size:1.1rem}.finder-grid,.proof,.proof-grid,.cards{display:block}.finder .button{width:100%;margin-top:10px}.field+.field{margin-top:8px}.site-footer{display:block}.site-footer nav{margin-top:24px}.card+.card{margin-top:12px}.chips{margin-top:10px}}
@media(max-width:420px){h1,.apex h1{font-size:2.85rem}.directory h1{font-size:2.25rem}.lede{font-size:1.06rem}}
/* #17 — the conversational way-in IS the apex hero (no-JS form POST → the cell's Concierge). */
.ask{margin-top:1.6rem}
.ask-row{display:flex;gap:.6rem;flex-wrap:wrap}
.ask-row input{flex:1 1 22rem;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:.75rem;padding:.95rem 1.1rem;color:var(--ink);font:inherit;font-size:1.05rem}
.ask-row input::placeholder{color:var(--faint)}
.ask-row input:focus{outline:2px solid var(--accent);outline-offset:2px}
.ask-row .button{flex:0 0 auto}
.ask-again{margin-top:.7rem;color:var(--soft);font-size:.95rem}
.finder-fold{margin-top:1.1rem}
.finder-fold summary{cursor:pointer;color:var(--faint)}
.finder-fold summary:hover{color:var(--soft)}
.finder-fold[open] summary{margin-bottom:.6rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}