:root{--ink:#20222a;--muted:#667085;--paper:#f7f6f2;--panel:#fff;--line:#e2e2e6;--accent:#5846e8;--soft:#efedff;--good:#147d58}html{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}body{margin:0}.computer-page{box-sizing:border-box;max-width:1180px;margin:0 auto;padding:18px 24px 80px}.account-line{display:flex;justify-content:flex-end;min-height:24px;color:var(--muted);font-size:13px}.computer-page a{color:var(--accent);text-underline-offset:3px}.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);gap:40px;align-items:center;padding:68px 0 80px}.hero h1,.page-intro h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.03;letter-spacing:-.055em;max-width:720px;margin:12px 0 20px}.hero p,.page-intro p{max-width:660px;color:var(--muted);font-size:1.08rem;line-height:1.65}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--accent)}.button-primary,.button-secondary,.button-danger,.button-quiet{display:inline-flex;min-height:44px;align-items:center;justify-content:center;box-sizing:border-box;padding:0 18px;border:1px solid transparent;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer}.button-primary{background:var(--accent);color:white!important}.button-secondary{background:var(--panel);border-color:var(--line)}.button-danger{background:#a52f36;color:white}.button-quiet{background:var(--panel);border-color:var(--line);min-height:40px}.button-primary:disabled,.button-danger:disabled{opacity:.55;cursor:not-allowed}.hero-art{min-height:250px;display:grid;place-content:center;filter:drop-shadow(0 26px 34px #24205224)}.screen{width:min(390px,75vw);height:220px;border:11px solid #25263a;border-radius:22px;background:linear-gradient(140deg,#c9c1ff,#f5e9db 52%,#a6e1ce);overflow:hidden}.screen-top{height:25px;background:#292a40}.screen-content{padding:45px 34px;display:grid;gap:12px}.screen-content i{height:14px;border-radius:20px;background:#fff9}.screen-content i:nth-child(2){width:70%}.screen-content i:nth-child(3){width:45%}.screen-base{height:14px;width:110%;margin-left:-5%;border-radius:0 0 22px 22px;background:#45465d}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px}.section-heading h2,.mode-panel h2,.timeline h2{margin:8px 0 0;letter-spacing:-.03em;font-size:1.8rem}.section-heading p{max-width:390px;color:var(--muted);line-height:1.55}.kind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.kind-card,.template-card,.price-grid article,.sign-in-callout,.timeline,.mode-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;min-width:0}.kind-card h3,.template-card h2{margin:9px 0;font-size:1.25rem}.kind-card p,.template-card p{color:var(--muted);line-height:1.5}.kind-card .runs{font-size:.9rem}.kind-card .price{min-height:54px;font-size:.84rem;color:var(--ink)}.availability{display:inline-flex;padding:10px 0;color:var(--muted);font-size:.86rem}.your-computers,.sign-in-callout,#start{margin-top:74px}.computer-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.computer-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line)}.computer-list li>span,.computer-list li>form{color:var(--muted);font-size:.88rem}.computer-list li>form{grid-column:2;grid-row:1/3}.status{color:var(--good)!important}.page-intro{padding:50px 0 34px}.page-intro h1{font-size:clamp(2.2rem,4vw,3.4rem)}.template-grid,.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.template-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--accent);font-weight:800}.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-grid h2{font-size:1.15rem}.price-grid p{line-height:1.55;color:var(--muted)}.fine-print{font-size:.86rem;line-height:1.5;color:var(--muted)}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:#232438;color:#fff;border-radius:16px}.title-row{display:flex;justify-content:space-between;gap:16px;align-items:center}.screen-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr);gap:16px}.screen-placeholder{min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px dashed #b8b4d6;border-radius:18px;background:linear-gradient(140deg,#e7e4fb,#eff7f3);padding:26px}.screen-placeholder h2{margin:18px 0 6px}.screen-placeholder p{max-width:410px;color:var(--muted);line-height:1.5}.screen-led{width:12px;height:12px;border-radius:50%;background:#b98b27;box-shadow:0 0 0 7px #b98b271a}.mode-panel{display:flex;flex-direction:column}.mode-list{list-style:none;margin:16px 0;padding:0}.mode-list li{display:flex;justify-content:space-between;gap:8px;padding:12px 10px;border-radius:10px;border-bottom:1px solid var(--line);font-size:.88rem;line-height:1.35}.mode-list li.selected{background:var(--soft);color:var(--accent);font-weight:700}.mode-list li span{font-size:.72rem;color:var(--muted);white-space:nowrap}.timeline{margin-top:18px}.timeline p{color:var(--muted)}.sign-in-callout{padding:32px}@media(prefers-color-scheme:dark){:root{--ink:#f0eff6;--muted:#aaaaba;--paper:#11121a;--panel:#1b1c27;--line:#353642;--accent:#a89cff;--soft:#302b4a;--good:#79d4ac}.hero-art{filter:drop-shadow(0 26px 34px #0008)}.screen{border-color:#070812}.screen-top{background:#10101c}.screen-base{background:#262638}.screen-placeholder{background:linear-gradient(140deg,#29243e,#1d302d);border-color:#50496b}.button-secondary,.button-quiet{color:var(--ink)}}@media(max-width:760px){.computer-page{padding:12px 16px 56px}.hero{grid-template-columns:1fr;padding:44px 0 54px;gap:22px}.hero-art{min-height:180px;justify-self:center}.screen{height:160px;width:min(330px,76vw)}.kind-grid,.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{display:block}.section-heading p{margin-bottom:0}.screen-panel{grid-template-columns:1fr}.screen-placeholder{min-height:260px}.title-row{align-items:flex-start;flex-direction:column}.price-grid{grid-template-columns:1fr}}@media(max-width:480px){.kind-grid,.template-grid{grid-template-columns:1fr}.computer-list li{grid-template-columns:minmax(0,1fr) auto}.computer-list li>span:nth-of-type(2){grid-column:1;overflow-wrap:anywhere}.computer-list li>form{grid-column:2;grid-row:1/4}.account-line{justify-content:flex-start}.button-primary,.button-secondary,.button-danger{max-width:100%}}

/* Theme tokens (Shared presets: a person's theme and light/dark follow), over the first palette above. */
:root{--ink:var(--text-primary,#e6edf7);--muted:var(--text-secondary,#96a7c2);--paper:var(--bg-primary,#0a0f1c);--panel:var(--bg-card,#131c2e);--line:var(--border,#26344d);--accent:var(--accent-light,#60a5fa);--soft:color-mix(in srgb,var(--accent,#3b82f6) 12%,transparent);--good:var(--success,#22c55e)}
html{background:var(--paper);color:var(--ink)}
/* The hero is words and two buttons now (the drawn screen was a picture of nothing) */
.hero{grid-template-columns:1fr;max-width:760px}
/* One price sentence for the whole page */
.price-line{margin:-4px 0 16px;color:var(--muted);font-size:15px;line-height:1.5;max-width:70ch}
/* The one kind you can start today, then the six that are coming, compact */
.kind-grid:has(.kind-card--ready:only-child){grid-template-columns:minmax(0,560px)}
.soon-h{margin:28px 0 10px;font-size:15px;font-weight:750;color:var(--ink)}
.soon-h .muted{color:var(--muted);font-weight:600}
.kind-soon-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.kind-soon{display:grid;gap:3px;padding:12px 14px;border:1px dashed var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.kind-soon b{font-size:15px}
.kind-soon span{font-size:13.5px;line-height:1.4;color:var(--muted)}
.kind-soon small{font-size:12px;color:var(--muted);opacity:.85}
@media (max-width:520px){.kind-soon-grid{grid-template-columns:1fr 1fr;gap:8px}.kind-soon{padding:10px 12px}}
button[disabled][title]{cursor:not-allowed;opacity:.6}

/* Less air under the hero now that it is words only (11-08) */
.hero{padding-bottom:20px}
#start{padding-top:8px}
