/* Client OS look: glass panels over an aurora background. Tokens match site-preview. */
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(fonts/inter-latin-400-normal.C38fXH4l.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(fonts/inter-latin-500-normal.Cerq10X2.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(fonts/inter-latin-600-normal.LgqL8muc.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/space-grotesk-latin-500-normal.lFbtlQH6.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:700;src:url(fonts/space-grotesk-latin-700-normal.RjhwGPKo.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:500;src:url(fonts/jetbrains-mono-latin-500-normal.BWZEU5yA.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --acc:#3df0a8;--acc-rgb:61,240,168;--acc2:#f6c445;--acc2-rgb:246,196,69;--acc-ink:#03140d;
  --bg:#04070a;--ink:#e9f1ee;--muted:#a3b0ac;--muted-2:#7f8c88;
  --glass:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  --edge:rgba(var(--acc-rgb),.18);--edge-soft:rgba(255,255,255,.09);
  --ok:#3df0a8;--warn:#f6c445;--bad:#ff6b6b;--info:#4fb8ff;
  --head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:16px;--max:1180px;
}
:root[data-accent=blue]{--acc:#4fb8ff;--acc-rgb:79,184,255;--acc2:#a993ff;--acc2-rgb:169,147,255;--acc-ink:#03111d;--bg:#03060c;--ink:#e8eef6;--muted:#a1adbb}
:root[data-accent=orange]{--acc:#ff9b3d;--acc-rgb:255,155,61;--acc2:#ffd166;--acc2-rgb:255,209,102;--acc-ink:#1a0c02;--bg:#080504;--ink:#f4ece6;--muted:#b5a79c}

*,*:before,*:after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(120% 70% at 72% 118%,rgba(var(--acc-rgb),.26),transparent 60%),radial-gradient(60% 45% at 92% 6%,rgba(var(--acc-rgb),.12),transparent 70%),radial-gradient(50% 40% at 8% 0%,rgba(var(--acc2-rgb),.05),transparent 70%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,255,255,.55),transparent 1.5px),radial-gradient(1px 1px at 140px 90px,rgba(255,255,255,.35),transparent 1.5px),radial-gradient(1px 1px at 260px 200px,rgba(255,255,255,.45),transparent 1.5px),radial-gradient(1px 1px at 330px 60px,rgba(255,255,255,.25),transparent 1.5px);background-size:360px 260px}
a{color:var(--acc);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.15;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(1.5rem,4vw,2.1rem)}h2{font-size:1.25rem}h3{font-size:1.05rem}
p{margin:0 0 .8em}
.muted{color:var(--muted)}.small{font-size:.86rem}.mono{font-family:var(--mono)}
.num{font-family:var(--head);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--acc);color:var(--acc-ink);padding:8px 12px;z-index:100;border-radius:8px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;z-index:40;background:rgba(4,7,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--edge-soft)}
.topbar .wrap{display:flex;align-items:center;gap:12px;min-height:60px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 1.05rem/1 var(--head)}
.logo-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid rgba(var(--acc-rgb),.5);box-shadow:0 0 16px rgba(var(--acc-rgb),.25),inset 0 0 10px rgba(var(--acc-rgb),.15);flex:none}
.logo-mark svg{fill:var(--acc);width:16px;height:16px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.92rem;padding:8px 10px;border-radius:10px}
.nav a[aria-current=page],.nav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.themes{display:flex;gap:7px;align-items:center;margin-left:8px}
.sw{width:20px;height:20px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer}
.sw[data-a=green]{background:radial-gradient(circle at 35% 35%,#9ff8d2,#3df0a8 55%,#0f7a52)}
.sw[data-a=blue]{background:radial-gradient(circle at 35% 35%,#b9e3ff,#4fb8ff 55%,#1a5d93)}
.sw[data-a=orange]{background:radial-gradient(circle at 35% 35%,#ffd3a8,#ff9b3d 55%,#9a4b0a)}
.sw[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 12px rgba(var(--acc-rgb),.6)}
.client-pill{font-size:.8rem;color:var(--muted);border:1px solid var(--edge-soft);border-radius:999px;padding:3px 10px;white-space:nowrap;max-width:40vw;overflow:hidden;text-overflow:ellipsis}

main{padding:24px 0 64px}
.panel{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);padding:18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 40px rgba(0,0,0,.35);min-width:0}
.panel.soft{border-color:var(--edge-soft)}
.grid{display:grid;gap:14px}
.tiles{grid-template-columns:1fr}
@media(min-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
.summary{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:14px}
@media(min-width:720px){.summary{grid-template-columns:repeat(4,1fr)}}
.stat{padding:14px 16px}
.stat .label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat .value{font:700 1.7rem/1.1 var(--head);margin-top:4px;font-variant-numeric:tabular-nums}
.stat .value.warn{color:var(--warn)}
.stat .sub{font-size:.8rem;color:var(--muted);margin-top:2px}

.tile{display:flex;flex-direction:column;gap:10px}
.tile-head{display:flex;align-items:flex-start;gap:10px}
.tile-head h3{margin:0;font-size:1.08rem}
.tile-head a{color:var(--ink);text-decoration:none}
.tile-head a:hover{color:var(--acc)}
.tile .promise{color:var(--muted);font-size:.9rem;margin:0}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 .74rem/1 var(--body);letter-spacing:.02em;border-radius:999px;padding:5px 9px;border:1px solid var(--edge-soft);color:var(--muted);white-space:nowrap}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.active{color:var(--ok);border-color:rgba(var(--acc-rgb),.35)}
.badge.trial{color:var(--info);border-color:rgba(79,184,255,.35)}
.badge.paused,.badge.cancelling{color:var(--warn);border-color:rgba(246,196,69,.35)}
.badge.off{color:var(--muted-2)}
.badge.healthy{color:var(--ok)}.badge.needs_you{color:var(--warn);border-color:rgba(246,196,69,.4)}
.badge.setting_up{color:var(--info)}.badge.error{color:var(--bad);border-color:rgba(255,107,107,.4)}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;margin:2px 0}
.metric .mv{font:700 1.35rem/1.1 var(--head);font-variant-numeric:tabular-nums}
.metric .ml{font-size:.78rem;color:var(--muted);line-height:1.25}
.delta{font-size:.76rem;font-family:var(--mono);margin-left:6px}
.delta.up{color:var(--ok)}.delta.down{color:var(--bad)}.delta.flat{color:var(--muted-2)}
.tile-foot{display:flex;gap:10px;align-items:center;margin-top:auto;flex-wrap:wrap}
.tile-foot .status-note{font-size:.84rem;color:var(--muted);flex:1 1 auto}
.would{margin:0;padding-left:18px;color:var(--muted);font-size:.9rem}
.would li{margin:2px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:42px;padding:9px 16px;border-radius:999px;font:600 .92rem/1.2 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;background:rgba(255,255,255,.06);color:var(--ink)}
.btn:hover{border-color:rgba(var(--acc-rgb),.5)}
.btn-primary{background:var(--acc);color:var(--acc-ink);box-shadow:0 0 18px rgba(var(--acc-rgb),.25)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-danger{color:var(--bad);border-color:rgba(255,107,107,.35)}
.btn-sm{min-height:34px;padding:6px 12px;font-size:.84rem}
.btn[disabled]{opacity:.55;cursor:default}
.btn-link{background:none;border:0;color:var(--acc);text-decoration:underline;padding:0;min-height:0;font-weight:500}

.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--edge-soft)}
.list li:first-child{border-top:0;padding-top:0}
.list .when{font-family:var(--mono);font-size:.74rem;color:var(--muted-2);flex:none;min-width:5.5em;padding-top:3px}
.approval{display:flex;flex-direction:column;gap:8px}
.approval .who{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--acc)}
.approval .actions{display:flex;gap:6px;flex-wrap:wrap}

.section-head{display:flex;align-items:baseline;gap:12px;margin:22px 0 10px}
.section-head h2{margin:0}.section-head .muted{margin-left:auto}
.two{display:grid;gap:14px}
@media(min-width:900px){.two{grid-template-columns:2fr 1fr}}

.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--edge-soft);align-items:flex-start}
.steps li:first-child{border-top:0}
.steps .n{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 .82rem/1 var(--head);border:1px solid var(--edge-soft);color:var(--muted)}
.steps li.done .n{background:rgba(var(--acc-rgb),.14);color:var(--acc);border-color:rgba(var(--acc-rgb),.5)}
.steps li.current .n{border-color:var(--info);color:var(--info);box-shadow:0 0 12px rgba(79,184,255,.3)}
.steps .t{font-weight:600}.steps .w{color:var(--muted);font-size:.88rem}
.progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 2px}
.progress>i{display:block;height:100%;background:var(--acc);border-radius:999px}

.spark{width:100%;height:56px;display:block}
.spark path{fill:none;stroke:var(--acc);stroke-width:1.6}
.spark .area{fill:rgba(var(--acc-rgb),.12);stroke:none}
.history{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.history{grid-template-columns:repeat(2,1fr)}}

form.stack{display:grid;gap:12px;max-width:420px}
label{display:grid;gap:4px;font-weight:500;font-size:.9rem}
input,select,textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--edge-soft);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
input:focus,select:focus{border-color:var(--acc)}
.error{color:var(--bad);font-size:.9rem}
.notice{background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.35);border-radius:12px;padding:10px 14px;font-size:.92rem}
.trial-banner{border-radius:12px;padding:10px 14px;margin:0 0 10px;font-size:.92rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid rgba(79,184,255,.4);background:rgba(79,184,255,.08)}
.trial-banner.soon{border-color:rgba(246,196,69,.6);background:rgba(246,196,69,.12)}
.trial-banner.urgent{border-color:rgba(255,107,107,.7);background:rgba(255,107,107,.14);font-weight:600}
.trial-banner .actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.badge.trial.soon{color:var(--warn);border-color:rgba(246,196,69,.5)}
.badge.trial.urgent{color:var(--bad);border-color:rgba(255,107,107,.6)}
.terms{margin:0 0 12px;padding-left:1.1em}.terms li{margin:6px 0}
.agree{display:flex;gap:10px;align-items:flex-start;font-weight:500}.agree input{width:auto;min-height:auto;margin-top:4px}
.demo-banner{background:rgba(246,196,69,.14);border:1px solid rgba(246,196,69,.55);color:var(--ink);border-radius:12px;padding:10px 14px;margin:0 0 14px;font-size:.92rem}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{text-align:left;padding:8px 6px;border-top:1px solid var(--edge-soft);vertical-align:top}
.table th{color:var(--muted);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;border-top:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.signin{min-height:80vh;display:grid;place-items:center;padding:24px 0}
.signin .panel{width:100%;max-width:400px}
.toast{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:480px;background:#0b1410;border:1px solid var(--edge);border-radius:12px;padding:12px 16px;z-index:60;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.empty{color:var(--muted);font-size:.92rem;padding:8px 0}
.kbd{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
@media(max-width:600px){.nav a{padding:8px}.topbar .wrap{gap:8px}.hide-sm{display:none}}