:root{--bg:#fffdf6;--card:#f4f7fc;--primary:#1e3a8a;--accent:#fbbf24;--green:#059669;--red:#dc2626;--text:#0f1b33;--dim:#5b6b86;--border:#dbe3f0;--ink:#0f1a2b}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
section,footer,header{position:relative;z-index:1}
.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:linear-gradient(#ffffffee,#ffffff00);z-index:10}
.brand img{height:44px;}
nav{display:flex;gap:22px;align-items:center}
nav a{color:var(--dim);text-decoration:none;font-size:.95rem}nav a:hover{color:var(--primary)}
.btn{display:inline-block;background:var(--accent);color:#1b1500;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:14px 32px;border-radius:12px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:1rem;transition:.2s}
.btn:hover{background:#f5b400;transform:translateY(-2px)}
.btn-sm{padding:8px 20px;font-size:.9rem;color:#1b1500!important}
.btn-ghost{color:var(--text);background:transparent;border:1px solid var(--border)}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:100px 24px 60px}
.eyebrow{color:var(--primary);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;margin-bottom:18px}
h1 em{font-style:normal;background:linear-gradient(transparent 60%,var(--accent) 60%)}
h1{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.08;font-weight:800;margin-bottom:22px}
.red{color:var(--red)}.green{color:var(--green)}
.lead{color:var(--dim);font-size:1.15rem;max-width:620px;margin:0 auto 32px}
.story{height:600vh}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#scene{position:absolute;top:0;bottom:0;right:0;left:34%;width:66%;height:100%}
.road{fill:none;stroke:#ffd21f;stroke-width:64;stroke-linecap:round}
.lane{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 9;opacity:.9}
.card-step{position:absolute;left:5vw;top:50%;transform:translateY(-50%);width:min(430px,38vw);background:#fff;border:2px solid var(--ink);border-radius:20px;padding:26px;box-shadow:8px 8px 0 var(--accent);z-index:3}
.card-step h2{font-size:1.6rem;line-height:1.15;margin-bottom:10px;color:var(--ink)}
.lead2{color:var(--dim);margin-bottom:16px;font-size:.98rem}
.cmp{padding:11px 14px;border-radius:12px;margin-bottom:8px;font-size:.9rem;display:grid;gap:2px}
.cmp b{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.cmp.r{background:#fef0f0;border-left:4px solid var(--red)}.cmp.r b{color:var(--red)}
.cmp.g{background:#e9f9f2;border-left:4px solid var(--green)}.cmp.g b{color:var(--green)}
.meta{font-family:ui-monospace,Menlo,monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:12px}
.times{position:absolute;right:4vw;bottom:72px;display:flex;gap:12px;z-index:3}
.t{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px 16px;min-width:120px;box-shadow:4px 4px 0 var(--accent)}
.t small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.t b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.t.r small,.t.r b{color:var(--red)}.t.g small,.t.g b{color:var(--green)}
.dots{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;gap:14px;z-index:3}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#fff;transition:.3s}
.dots i.on{background:var(--accent);transform:scale(1.4)}
.ill{position:absolute;left:5vw;bottom:14px;margin:0;font-size:.75rem}
.st-label{font:600 15px -apple-system,sans-serif;fill:var(--ink)}
.st-pill{fill:#fff;stroke:var(--ink);stroke-width:2}
.pin-t{font:700 15px -apple-system,sans-serif;fill:#fff}
@media(max-width:820px){.card-step{left:4vw;right:4vw;width:auto;top:auto;bottom:90px;transform:none;padding:16px}.card-step h2{font-size:1.2rem}.lead2{font-size:.85rem;margin-bottom:8px}.cmp{font-size:.8rem;padding:8px 10px}.times{left:4vw;right:auto;top:calc(50% - 10px);bottom:auto}.t{padding:4px 10px;min-width:90px}.t b{font-size:1.1rem}.ill{display:none}#scene{left:0;width:100%;height:50%}}
.demo,.enter{padding:100px 24px;text-align:center}
.demo h2,.enter h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:12px}
.doc-card{max-width:640px;margin:0 auto 24px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;text-align:left}
.doc-file{display:flex;gap:10px;align-items:center;font-weight:600}
.doc-file i{margin-left:auto;font-style:normal;font-weight:500;color:var(--dim);font-size:.85rem}
.bar{height:6px;background:#e6ecf7;border-radius:3px;margin:16px 0;overflow:hidden}
#bar{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--green))}
#findings{list-style:none;display:grid;gap:10px}
#findings li{padding:10px 14px;border-radius:10px;background:#e6ecf7;border-left:3px solid var(--primary);opacity:0;transform:translateY(8px);animation:in .4s forwards;font-size:.92rem}
#findings li.warn{border-color:#f59e0b}#findings li.bad{border-color:var(--red)}#findings li.ok{border-color:var(--green)}
@keyframes in{to{opacity:1;transform:none}}
.note{color:var(--dim);font-size:.8rem;margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:860px;margin:36px auto 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:34px 28px;text-align:left;text-decoration:none;color:var(--text);transition:.25s}
.card:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 14px 40px #1e3a8a22}
.card h3{font-size:1.6rem;margin-bottom:10px}.card p{color:var(--dim);margin-bottom:18px}
.go{color:var(--primary);font-weight:600}
footer{text-align:center;padding:40px;color:var(--dim);font-size:.85rem}footer a{color:var(--dim)}
@media(max-width:640px){.top{padding:10px 16px}nav a:not(.btn){display:none}.house{width:60px;height:52px}.stops{font-size:.6rem}.caption{min-height:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.page-hero{padding:130px 24px 30px;text-align:center}
.page-hero h1{font-size:clamp(1.8rem,4.5vw,3rem)}
.who,.docs{max-width:880px;margin:0 auto;padding:20px 24px 50px;text-align:center}
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.tabs button{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:10px 20px;font-weight:600;cursor:pointer;font-size:.95rem;color:var(--text)}
.tabs button.on{background:var(--accent)}
.card-step.static{position:static;transform:none;width:auto;text-align:left}
.chk{list-style:none;margin:0 0 18px}.chk li{padding:6px 0 6px 26px;position:relative}.chk li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.docs h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:10px}
.doc-grid{text-align:left;display:grid;gap:12px;margin-top:24px}
.doc-item{background:#fff;border:2px solid var(--ink);border-radius:16px;overflow:hidden}
.doc-item button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:none;border:0;padding:16px 20px;cursor:pointer;text-align:left;font:inherit;color:var(--text)}
.doc-item small{display:block;color:var(--dim);font-size:.85rem;margin-top:2px}
.doc-item i{font-style:normal;font-size:1.6rem;transition:.2s}
.doc-item.open i{transform:rotate(45deg)}
.doc-item ul{display:none;list-style:none;padding:0 20px 18px 40px}.doc-item.open ul{display:block}
.doc-item li{padding:4px 0;list-style:disc;color:var(--dim)}
.blog{max-width:1100px;margin:0 auto;padding:10px 24px 70px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
.bcard{display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--text);transition:.2s;box-shadow:5px 5px 0 var(--accent)}
.bcard:hover{transform:translateY(-4px)}
.bcard img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:2px solid var(--ink)}
.bcard div{padding:18px}.bcard h3{font-size:1.1rem;margin:8px 0}.bcard p{color:var(--dim);font-size:.9rem;margin-bottom:10px}.bcard small{color:var(--dim)}
.tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primary)}
.post{max-width:760px;margin:0 auto;padding:120px 24px 60px}
.post h1{font-size:clamp(1.7rem,4vw,2.5rem);margin:6px 0 20px;text-align:left}
.post .meta{color:var(--dim);font-size:.85rem}.back{color:var(--primary);text-decoration:none;font-weight:600;display:inline-block;margin-bottom:12px}
.cover{width:100%;border:2px solid var(--ink);border-radius:18px;margin-bottom:28px}
.prose p,.prose li{font-size:1.06rem;line-height:1.75;margin-bottom:16px}.prose h2{font-size:1.5rem;margin:34px 0 12px;color:var(--ink)}.prose h3{font-size:1.2rem;margin:24px 0 10px}
.prose ul,.prose ol{margin:0 0 16px 24px}.prose a{color:var(--primary)}
.post-cta{margin-top:40px;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:26px;box-shadow:8px 8px 0 var(--accent);text-align:center}.post-cta p{color:var(--dim);margin:8px 0 18px}