:root{
  color-scheme:dark;
  --bg:#0a0f18;--bg-glow:#10213b;--surface:#111a28;--surface-2:#172336;--surface-3:#1e2c42;
  --border:#30435d;--border-strong:#506b8e;--text:#f4f7fb;--muted:#aebbd0;
  --accent:#78a9ff;--accent-strong:#2f6fe4;--accent-soft:#172d51;
  --success:#61d6a4;--warning:#ffd27a;--danger:#ff9aa8;--danger-bg:#5a2934;
  --focus:#ffd27a;--shadow:0 24px 60px rgba(0,0,0,.28);
  --radius:18px;--radius-sm:10px;--space:24px;
  font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text)
}
*{box-sizing:border-box}html{scrollbar-color:var(--border-strong) var(--bg);scroll-behavior:smooth}
main *,header *,footer *{min-width:0}p,li,span,strong{overflow-wrap:anywhere}
.device-list li{flex-wrap:wrap}.device-list li button{flex-shrink:0}
::selection{background:var(--accent);color:var(--bg)}input,textarea{caret-color:var(--accent)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 15% -10%,var(--bg-glow),transparent 36rem),
  linear-gradient(180deg,var(--bg),#0b121d 60%,var(--bg));color:var(--text)}
header,main,footer{width:min(1180px,100%);margin:auto;padding:28px}
.site-header{display:flex;align-items:flex-end;gap:24px;justify-content:space-between;border-bottom:1px solid var(--border);position:relative;z-index:1}
.brand-copy{margin:0;font-weight:650}.eyebrow{margin:0 0 6px;letter-spacing:.14em;color:var(--accent);font-size:.75rem;font-weight:800}
nav{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
nav a,a{color:#a9c9ff;text-underline-offset:4px;text-decoration-thickness:1px}
nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;border-bottom:2px solid transparent}
nav a:hover{color:var(--text)}nav a[aria-current]{font-weight:750;color:var(--text);border-bottom-color:var(--accent)}
.ui-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

main{position:relative;z-index:1}.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:28px;align-items:stretch;
  padding:42px 0 24px;border:0;background:transparent;margin:0}
.hero h1{font-size:clamp(2.5rem,7vw,5.4rem);line-height:.98;letter-spacing:-.035em;max-width:900px;margin:14px 0 20px}
.lead{font-size:1.15rem;color:var(--muted);max-width:72ch}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.trust-card{align-self:end;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.status-pill{display:inline-flex;width:max-content;max-width:100%;padding:7px 12px;border-radius:999px;background:var(--accent-soft);border:1px solid #345b96;color:#c9ddff;font-size:.88rem;font-weight:700}
.check-list{padding-left:20px;margin-bottom:0}.check-list li{margin:10px 0}

section{padding:var(--space);margin:22px 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:0 12px 34px rgba(0,0,0,.12)}
section section{box-shadow:none}h1,h2,h3{line-height:1.15;text-wrap:balance}h1{font-size:2.35rem;margin:.2rem 0}h2{font-size:1.45rem;margin:.25rem 0 14px}h3{font-size:1.05rem;margin:.2rem 0 12px}
p{max-width:76ch}.muted{color:var(--muted)}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap;margin-bottom:18px}
.section-heading>p{color:var(--muted);margin:4px 0}.auth-card{max-width:820px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}.form-grid .actions,.form-grid>div{grid-column:1/-1}
label{display:block;margin:10px 0;max-width:650px;font-weight:650}input,select,textarea{display:block;width:100%;min-height:44px;margin-top:6px;padding:11px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#0c1420;color:var(--text);font:inherit}
input::placeholder{color:var(--muted)}.inline-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.inline-form label{flex:1 1 240px}

button,.button-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:750;padding:10px 16px;margin:4px 6px 4px 0;border:1px solid #4b83df;border-radius:10px;background:var(--accent-strong);color:white;cursor:pointer;text-decoration:none}
button:hover,.button-link:hover{filter:brightness(1.12)}button:disabled{cursor:not-allowed;opacity:.5;filter:none}.button-secondary,.button-link.secondary{background:var(--surface-3);border-color:var(--border-strong);color:var(--text)}
.button-ghost{background:transparent;border-color:var(--border);color:var(--text)}.danger{background:var(--danger-bg);border-color:#a95b6a;color:#ffe5e9}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.actions,.heading{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.heading{justify-content:space-between}
.summary-grid,.feature-grid,.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid>article,.feature-grid>article{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:18px}
.metric{display:flex;flex-direction:column;gap:6px;min-height:96px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:16px}
.metric span{font-size:.82rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.metric strong{font-size:1.05rem;overflow-wrap:anywhere}.metric.good{border-color:#2e795e}.metric.warn{border-color:#8a6c31}.metric.bad{border-color:#8c4552}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.plan{border:1px solid var(--border);padding:20px;border-radius:15px;background:var(--surface-2)}.price{font-size:1.45rem;font-weight:800;margin:12px 0}
.callout{border:1px solid var(--border);padding:12px 16px;background:var(--accent-soft);border-radius:10px}.callout p{margin-bottom:0}
.code-output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#080e17;border:1px solid var(--border);border-radius:10px;padding:12px}
.totp-qr{display:block;width:min(240px,100%);height:auto;margin:16px 0;background:#fff;border:10px solid #fff;border-radius:12px;image-rendering:pixelated}
output,code{overflow-wrap:anywhere}output{display:block;white-space:pre-wrap;margin-top:10px}.device-list{list-style:none;padding:0}.device-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.status-list{list-style:none;padding:0}.status-list li{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin:8px 0;background:var(--surface-2)}.status-list small{font-family:ui-monospace,monospace;color:var(--muted)}

#notice:empty{display:none}#notice{padding:14px 16px;border:1px solid var(--border);background:var(--accent-soft);border-radius:10px;max-width:none}
footer{position:relative;z-index:1;color:var(--muted);font-size:.9rem;display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;border-top:1px solid var(--border)}
[hidden]{display:none!important}.table-scroll{width:100%;max-width:100%;overflow:auto;border:1px solid var(--border);border-radius:12px;margin:15px 0}
table{border-collapse:collapse;width:100%;min-width:880px;font-size:.86rem}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
td{min-width:120px;max-width:240px;overflow-wrap:anywhere}th{background:#0c1420;white-space:nowrap;position:sticky;top:0}details{margin-top:14px}summary{cursor:pointer;font-weight:700}
dl{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr);gap:10px 18px}dt{color:var(--muted);font-weight:700}dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.checkbox{display:flex;gap:12px;align-items:start}.checkbox input{width:20px;height:20px;min-height:20px;flex-shrink:0}

:root[data-theme=light]{color-scheme:light;--bg:#f4f7fb;--bg-glow:#dbe8ff;--surface:#fff;--surface-2:#f7f9fd;--surface-3:#e9eff8;--border:#c9d4e3;--border-strong:#8ca0bb;--text:#152238;--muted:#52647d;--accent:#245fbd;--accent-strong:#215fbd;--accent-soft:#e5efff;--focus:#8b5d00;--shadow:0 22px 50px rgba(32,55,88,.12)}
:root[data-theme=light] body{background:radial-gradient(circle at 15% -10%,var(--bg-glow),transparent 36rem),var(--bg)}
:root[data-theme=light] input,:root[data-theme=light] select,:root[data-theme=light] textarea,:root[data-theme=light] th{background:#fff;color:var(--text)}
:root[data-theme=light] .code-output{background:#eef3fa}:root[data-theme=light] a{color:#184f9c}:root[data-theme=light] .status-pill{color:#174f98;border-color:#9dbdeb}
:root[data-theme=light] .button-link:not(.secondary){color:#fff}

@media(prefers-color-scheme:light){
  :root:not([data-theme]){color-scheme:light;--bg:#f4f7fb;--bg-glow:#dbe8ff;--surface:#fff;--surface-2:#f7f9fd;--surface-3:#e9eff8;--border:#c9d4e3;--border-strong:#8ca0bb;--text:#152238;--muted:#52647d;--accent:#245fbd;--accent-strong:#215fbd;--accent-soft:#e5efff;--focus:#8b5d00;--shadow:0 22px 50px rgba(32,55,88,.12)}
  :root:not([data-theme]) body{background:radial-gradient(circle at 15% -10%,var(--bg-glow),transparent 36rem),var(--bg)}
  :root:not([data-theme]) input,:root:not([data-theme]) select,:root:not([data-theme]) textarea,:root:not([data-theme]) th{background:#fff;color:var(--text)}
  :root:not([data-theme]) .code-output{background:#eef3fa}:root:not([data-theme]) a{color:#184f9c}
  :root:not([data-theme]) .button-link:not(.secondary){color:#fff}
}
:root[data-density=compact]{--space:16px}:root[data-density=compact] button,:root[data-density=compact] .button-link{min-height:44px;padding:7px 12px}:root[data-density=compact] input,:root[data-density=compact] select{min-height:44px;padding:8px 10px}
:root[data-density=compact] section{margin:14px 0}:root[data-density=compact] .metric{min-height:76px;padding:12px}
@media(prefers-reduced-motion:no-preference){:root:not([data-motion=reduce]) main{animation:arrive .25s cubic-bezier(.16,1,.3,1)}@keyframes arrive{from{opacity:.82;transform:translateY(4px)}to{opacity:1;transform:none}}}
:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:900px){.hero{grid-template-columns:1fr}.trust-card{align-self:auto}.summary-grid,.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.site-header{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){header,main,footer{padding:18px}.hero{padding-top:28px}.hero h1{font-size:clamp(2.35rem,15vw,3.7rem)}section{padding:16px}.plans,.summary-grid,.feature-grid,.form-grid{grid-template-columns:1fr}.form-grid .actions,.form-grid>div{grid-column:auto}dl{grid-template-columns:1fr;gap:3px}.section-heading{gap:8px}.status-list li{align-items:flex-start;flex-direction:column}}