:root{color-scheme:dark;--ink:#e9f0f6;--muted:#aab8c8;--panel:#14202e;--line:#293c51;--accent:#79ebca}
*{box-sizing:border-box}
body{margin:0;background:#0c1520;color:var(--ink);font:16px/1.5 system-ui,sans-serif}
header{border-bottom:1px solid var(--line)}
nav,main{max-width:1100px;margin:auto;padding:1.25rem}
nav{display:flex;align-items:center;gap:1rem}
nav .brand{margin-right:auto;font-size:1.35rem;font-weight:850;color:var(--ink)}
.brand small,.kicker{font-size:.75rem;color:var(--accent);letter-spacing:.18em;text-transform:uppercase}
a{color:var(--accent)}
nav a,.button{text-decoration:none}
h1{font-size:clamp(2rem,7vw,4rem);line-height:1.05;margin:.5rem 0 1rem}
h2,h3{line-height:1.2}
section{margin:1.5rem 0}
.hero{padding:4rem 0;max-width:620px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1rem}
.card,details,.notice{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem}
details{margin:1rem 0}
summary{cursor:pointer;font-weight:700}
p,small,label,th{color:var(--muted)}
label{display:grid;gap:.3rem}
.stack,.row{display:grid;gap:.65rem}
.row{grid-template-columns:repeat(auto-fit,minmax(min(135px,100%),1fr));align-items:end}
.stack{max-width:460px}
input,select,textarea,button,.button{font:inherit;border-radius:8px;padding:.55rem .75rem}
input,select,textarea{width:100%;background:#0c1520;color:var(--ink);border:1px solid var(--line)}
button,.button{display:inline-block;background:var(--accent);color:#0c2521;border:1px solid transparent;font-weight:700;cursor:pointer}
button.secondary{background:transparent;border-color:var(--line);color:var(--ink)}
button:disabled{opacity:.5;cursor:wait}
.notice{border-color:#438b75}
.error{border-color:#f2988d;padding-left:2rem}
.scroll{overflow:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{padding:.5rem;border-bottom:1px solid var(--line)}
[hidden]{display:none!important}
details:target::details-content{content-visibility:visible}
details form+form{margin-top:.65rem}

/* Shared visual system */
:root {
    --ink:#edf4f7; --muted:#a3b5c4; --panel:#101d28; --line:#293b48;
    --accent:#87e4c4; --canvas:#0a141d;
}
body {background:var(--canvas); min-height:100vh; display:flex; flex-direction:column}
main {width:100%; flex:1}
nav,main,footer {max-width:1200px; padding-inline:clamp(1rem,4vw,3rem)}
header {background:#0e1923}
nav .brand {display:inline-flex; align-items:center; gap:.55rem; letter-spacing:-.045em}
.brand-mark {display:grid; place-items:center; width:2rem; height:2rem; border-radius:.55rem; background:var(--accent); color:#0a201b; font-size:1.05rem}
nav > a:not(.brand) {color:var(--ink); font-size:.875rem; font-weight:650}
nav > a:not(.brand):hover {color:var(--accent)}
footer {display:flex; width:100%; justify-content:space-between; gap:1rem; margin:3rem auto 0; padding-block:1.25rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem}
h1 {letter-spacing:-.055em}
h2,h3 {letter-spacing:-.025em}
button,.button {border-radius:.55rem; transition:background .15s,color .15s; min-height:42px}
button:hover,.button:hover {background:#a9f6dd;color:#0a201b}
:focus-visible {outline:2px solid var(--accent); outline-offset:4px}
.hero {display:grid; grid-template-columns:1.1fr 1fr; gap:1.5rem; align-items:center; max-width:none; padding:clamp(1.5rem,5vw,4rem); margin-top:2rem; border:1px solid var(--line); border-radius:1.35rem; background:radial-gradient(ellipse at 85% 40%,#183a3b 0%,#101e29 52%,#101d28 80%); overflow:hidden}
.hero h1 {font-size:clamp(3.35rem,7.7vw,6.6rem); margin:.7rem 0 1rem; line-height:.98}
.hero h1 em {color:var(--accent); font-style:normal}
.hero p {max-width:34ch;font-size:clamp(1rem,1.8vw,1.18rem)}
.kicker i {display:inline-block;width:.5rem;height:.5rem;background:var(--accent);border-radius:50%;margin-right:.35rem;vertical-align:.08rem}
.actions {display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.65rem}
.actions .button {padding-inline:1rem}
.actions span {margin-left:.7rem}
.hero-art {color:var(--accent); text-align:center}
.hero-art svg {display:block;width:100%;max-height:340px}
.hero-art span,.index {color:var(--accent);font:600 .68rem/1.4 ui-monospace,monospace;letter-spacing:.14em}
.feature-strip {display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:1rem;background:var(--panel)}
.feature-strip article {padding:1.35rem 1.5rem}
.feature-strip article+article {border-inline-start:1px solid var(--line)}
.feature-strip h2 {font-size:1.15rem;margin:.6rem 0}
.feature-strip p {margin:0;font-size:.9rem}
.page-heading {padding:1.65rem 0 .9rem}
.page-heading h1 {font-size:clamp(2.1rem,6vw,3.55rem);overflow-wrap:anywhere;margin-bottom:.4rem}
.card {padding:1.25rem;border-radius:1rem;min-width:0}
.access-card {background:linear-gradient(135deg,#173832,var(--panel));border-color:#315849}
.metrics a {display:grid;gap:.35rem;color:var(--ink);text-decoration:none}
.metrics a:hover {border-color:var(--accent)}
.metrics strong {font-size:2.1rem;letter-spacing:-.04em}
.section-nav {max-width:none;justify-content:flex-start;overflow:auto;margin-top:1.25rem;padding:.65rem 0;gap:.4rem;border-bottom:1px solid var(--line)}
.section-nav a {padding:.5rem .8rem;border-radius:.5rem;background:var(--panel);white-space:nowrap}
details {scroll-margin-top:1rem;padding:0 1rem 1rem}
details:not([open]) {padding-bottom:0}
summary {padding:1rem 0}
details:target {border-color:#4b917e}
details:target::details-content {content-visibility:revert}
details form.card {background:#0b1720}
.plans {grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr))}
input,textarea {min-width:0}
@media(max-width:670px) {
    .hero {grid-template-columns:1fr;margin-top:.7rem;gap:.6rem}
    .hero-art svg {max-height:200px}
    .feature-strip {grid-template-columns:1fr}
    .feature-strip article+article {border-inline-start:0;border-top:1px solid var(--line)}
    nav {gap:.65rem}
    nav .brand small {display:none}
    .section-nav {padding-inline:0}
}