/* Oakey app visual language, matched to the approved app drafts (oakey-shots): stone-50 page, white 12px cards with a hairline border, near-black 8px buttons, amber Demo tag, green progress. Dark "Oakey OS" tree panel kept as the one showcase surface. */
:root{--bg:#fafaf9;--ink:#1c1917;--muted:#57534e;--line:#e7e5e4;--edge:#a8a29e;--ok:#008236;--r:12px;--rb:8px;--shadow:0 1px 2px rgba(28,25,23,.05);--leaf:#5f8f7a;--glow:#8fd4b5;--cyan:#7dd3fc;--os:#05070d;--os2:#0c1626;--tint:#0c1626;--gold:#e3a84a;
--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
body[data-season=spring]{--tint:#1a2a33}
body[data-season=summer]{--tint:#10282a}
body[data-season=fall]{--tint:#2a1d14}
body[data-season=winter]{--tint:#142235}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.55 var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--rb)}
.os-root :focus-visible{outline-color:var(--cyan)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:var(--rb);z-index:9}
.skip:focus{left:8px}
.banner{background:var(--ink);color:#f5f5f4;text-align:center;font-size:14px;padding:7px 12px}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;gap:12px;max-width:1320px;margin:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px}
.brand img{border-radius:8px}
nav a{color:var(--muted);text-decoration:none;margin-left:4px;padding:6px 10px;border-radius:var(--rb);font-size:15px;font-weight:500;transition:background .15s,color .15s}
nav a:hover{color:var(--ink);background:#f0efee}
.eyebrow{font-size:15px;font-weight:600;color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:4px;padding:2px 8px;font-size:13px;font-weight:600;background:#f0efee;color:#44403c}
.chip.on{background:#dcfce7;color:#14532d}
.chip.demo{background:#fef3c7;color:#78350f}
.card{background:#fff;border-radius:var(--r);padding:20px;border:1px solid var(--line);box-shadow:var(--shadow)}
.btn,.btn-secondary{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:8px;border-radius:var(--rb);padding:12px 20px;font:inherit;font-weight:600;text-decoration:none;border:0;transition:transform .15s,background .15s}
.btn{background:var(--ink);color:#fff}
.btn:hover{background:#292524}
.btn:active{transform:scale(.97)}
.btn-secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.btn-secondary[disabled]{color:var(--muted);cursor:not-allowed}
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start;padding:28px 5vw 64px;max-width:1320px;margin:auto}
h1{text-wrap:balance;font-size:clamp(34px,4.4vw,52px);font-weight:700;line-height:1.08;margin:0 0 16px;letter-spacing:-.02em}
.lede{font-size:18px;color:#44403c;max-width:46ch;margin:0}
.value{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card.mini{padding:14px;font-size:14px;text-align:left;line-height:1.4}
.mini b{display:block;font-size:15px;margin-bottom:2px}.mini span{color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 10px}
.cta.center{justify-content:center}
.fine{font-size:14px;color:var(--muted)}
/* OS panel */
.demo-col{display:grid;gap:14px}
.os-root{position:relative;height:500px;border-radius:16px;overflow:hidden;color:#e2e8f0;isolation:isolate;
 background:radial-gradient(ellipse at 50% 30%,var(--tint) 0%,var(--os) 70%);transition:background 1.2s;box-shadow:var(--shadow)}
.canvas-wrap{position:absolute;inset:0}
.canvas-wrap canvas{display:block;width:100%!important;height:100%!important;touch-action:pan-y}
.fallback{position:absolute;inset:90px 12% 80px;width:76%;height:calc(100% - 170px);object-fit:contain}
.has-3d .fallback{opacity:0;pointer-events:none;transition:opacity .6s}
.os-glass{border-radius:12px;background:rgba(12,20,33,.55);border:1px solid rgba(148,163,184,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 40px -20px rgba(0,0,0,.8);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.os-label{font-size:12px;font-weight:500;color:rgba(103,232,249,.85)}
.os-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.level{display:flex;gap:10px;align-items:center;padding:8px 14px 8px 8px;font-size:15px}
.ring{display:grid;place-items:center;width:38px;height:38px;border-radius:99px;font:600 13px var(--mono);border:2px solid rgba(143,212,181,.35);box-shadow:0 0 14px -2px rgba(143,212,181,.6)}
.season-switch{display:flex;gap:2px;padding:4px;border-radius:12px}
.season-switch button{font:500 13px var(--mono);color:#cbd5e1;background:none;border:0;padding:7px 11px;border-radius:8px;cursor:pointer;min-height:36px;transition:background .3s,color .3s}
.season-switch button:hover{color:#fff}
.season-switch button[aria-checked=true]{background:#f5f5f4;color:#1c1917;font-weight:600}
.hint-drag{position:absolute;right:16px;top:50%;margin:0;color:#94a3b8}
.chips{position:absolute;left:14px;right:14px;bottom:86px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0;padding:0;list-style:none}.chips li{font:12px var(--mono);color:#e2e8f0;padding:5px 10px;border-radius:8px;background:rgba(12,20,33,.6);border:1px solid rgba(148,163,184,.2);display:flex;gap:6px;align-items:center}.chips i{width:7px;height:7px;border-radius:99px;background:#2a3a44;transition:background .4s,box-shadow .4s}.chips i.on{background:var(--glow);box-shadow:0 0 10px var(--glow)}
.core-msg{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:12px;align-items:center;padding:12px 14px;font-size:15px}
.os-core-dot{width:16px;height:16px;flex:none;border-radius:99px;background:radial-gradient(circle at 40% 35%,#e0f7ff,var(--cyan) 45%,#0e7490 100%);box-shadow:0 0 12px rgba(125,211,252,.8);animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 22px rgba(125,211,252,1),0 0 0 6px rgba(125,211,252,.08)}}
/* steps card, like the app's Steps screen */
.steps-card{padding:18px 18px 10px}
.steps-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:0 0 10px}
.bar span{display:block;height:100%;background:var(--ok);transform-origin:left;transform:scaleX(0);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.h3{font-size:18px;margin:0}.muted{color:var(--muted);font-size:15px}
.areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.areas li{padding:6px 0}
.areas .name{display:block;font-size:15px;font-weight:700;color:var(--ink);margin:4px 0 2px}
.areas label{display:flex;gap:10px;align-items:center;cursor:pointer;font-size:14px;line-height:1.3;padding:6px 0;border-top:1px solid var(--line)}
.areas input{appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:3px;border:1.5px solid #78716c;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.areas input:checked{background:var(--ink);border-color:var(--ink)}
.areas input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.areas input:checked+span{text-decoration:line-through;color:var(--muted)}
/* sections */
.band{padding:72px 5vw;max-width:1320px;margin:auto}
.band.alt{max-width:none;background:#fff;border-block:1px solid var(--line)}
.band.alt>*{max-width:1320px;margin-left:auto;margin-right:auto}
h2{text-wrap:balance;font-size:clamp(28px,3.2vw,38px);margin:0 0 8px;letter-spacing:-.02em;line-height:1.15}
.sub{color:var(--muted);max-width:62ch;margin:0 0 28px}
.grid{display:grid;gap:14px}
.five{grid-template-columns:repeat(5,1fr)}.four{grid-template-columns:repeat(4,1fr)}.three{grid-template-columns:repeat(3,1fr)}
article h3{margin:6px 0 6px;font-size:17px}
article p{margin:0;color:var(--muted);font-size:15px}
.band.alt .card{background:var(--bg);box-shadow:none}
.phones:focus-visible{outline-offset:6px}
.mode.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* phone showcase */
.phones{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.phones figure{margin:0}
.phone{aspect-ratio:9/19;border-radius:34px;padding:7px;background:#1c1917;box-shadow:0 24px 40px -24px rgba(0,0,0,.45),inset 0 0 0 1px #44403c;position:relative}
.phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:28%;height:14px;border-radius:99px;background:#1c1917;z-index:1}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:28px;display:block;background:#f5f5f4}
figcaption{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.4}
figcaption b{display:block;color:var(--ink);font-size:15px}
.final{text-align:center}.final .sub{margin-left:auto;margin-right:auto}
.foot{padding:32px 5vw;border-top:1px solid var(--line);font-size:14px;color:var(--muted);text-align:center}
.foot p{margin:4px 0}
@media (max-width:1100px){.phones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.hero{grid-template-columns:1fr}.five{grid-template-columns:repeat(2,1fr)}.four{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:1fr}nav{display:none}}
@media (max-width:620px){.chips{bottom:112px;gap:4px}.chips li{padding:4px 8px;font-size:11px}.os-root{height:500px;border-radius:24px}.hint-drag{display:none}.areas{grid-template-columns:1fr}.value{gap:8px}.card.mini{padding:10px;font-size:13px}.mini b{font-size:14px}
 .phones{grid-template-columns:repeat(6,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.phones figure{scroll-snap-align:start}
 .five,.four{grid-template-columns:1fr}.band{padding:56px 5vw}.season-switch button{padding:7px 8px;font-size:12px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (max-width:620px){.cta .btn,.cta .btn-secondary{width:100%}}