:root{--navy:#0b1f3a;--navy2:#13305a;--gold:#b8955a;--gold2:#d4ad6a;--line:#dfe5ef;--muted:#5b6575;--bg:#f4f6fa;--card:#fff;--text:#14202f;
--red:#b42318;--redbg:#fdecea;--amber:#9a5b00;--amberbg:#fff4e0;--yellow:#7a6400;--yellowbg:#fffbe0;--green:#1d6b3f;--greenbg:#e8f5ee}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--navy2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:16px;min-height:60px}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--gold);color:var(--navy);font-size:15px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{color:#cfd8e6;text-decoration:none;padding:8px 12px;border-radius:6px;font-size:14px}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.1);color:#fff}
.nav.pub a.btn{color:var(--navy)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:6px;padding:6px 10px;font-size:18px}
.trialbar{background:var(--amberbg);color:var(--amber);text-align:center;padding:8px 16px;font-size:14px;border-bottom:1px solid #f2d9a8}
.main{padding-top:24px;padding-bottom:48px;min-height:70vh}
.foot{color:var(--muted);font-size:13px;padding:20px 0;border-top:1px solid var(--line);background:#fff}
h1{font-size:26px;margin:0 0 4px;color:var(--navy)} h2{font-size:18px;margin:0 0 12px;color:var(--navy)} h3{margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 20px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:18px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:7px;border:1px solid var(--navy);background:var(--navy);color:#fff;text-decoration:none;font:inherit;font-weight:600;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--navy2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}.btn.gold:hover{background:var(--gold2)}
.btn.ghost{background:#fff;color:var(--navy)}.btn.ghost:hover{background:#f1f4f9}
.btn.danger{background:#fff;color:var(--red);border-color:#f0c4bf}.btn.danger:hover{background:var(--redbg)}
.btn.sm{padding:6px 11px;font-size:13px}.btn.block{width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.inline{display:inline}
label{display:block;font-size:13px;font-weight:600;color:#33415a;margin:0 0 5px}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid #cdd6e3;border-radius:7px;font:inherit;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid #c9d8f0;border-color:var(--navy2)}
textarea{min-height:80px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto}
.field{margin-bottom:14px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:14px;border:1px solid}
.flash.ok{background:var(--greenbg);border-color:#bfe3cd;color:var(--green)}
.flash.error{background:var(--redbg);border-color:#f0c4bf;color:var(--red)}
.flash.warn{background:var(--amberbg);border-color:#f2d9a8;color:var(--amber)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:9px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:#fafbfd}
.muted{color:var(--muted)}.small{font-size:13px}.nowrap{white-space:nowrap}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.s-expired{background:var(--redbg);color:var(--red);border-color:#f0c4bf}
.s-critical{background:var(--amberbg);color:var(--amber);border-color:#f2d9a8}
.s-due{background:var(--yellowbg);color:var(--yellow);border-color:#ece0a0}
.s-valid{background:var(--greenbg);color:var(--green);border-color:#bfe3cd}
.s-none{background:#eef1f6;color:var(--muted)}
.stat{border-radius:10px;padding:16px 18px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;display:block}
.stat .n{font-size:30px;font-weight:700;line-height:1.1}.stat .l{font-size:13px;color:var(--muted)}
.stat.s-expired .n{color:var(--red)}.stat.s-critical .n{color:var(--amber)}.stat.s-due .n{color:var(--yellow)}.stat.s-valid .n{color:var(--green)}
.stat.s-expired,.stat.s-critical,.stat.s-due,.stat.s-valid{background:#fff}
.stat:hover{box-shadow:0 2px 10px rgba(11,31,58,.08)}
.empty{text-align:center;padding:30px;color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.filters input,.filters select{width:auto;min-width:160px}
.pill{display:inline-block;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--text);font-size:13px}
.pill.on{background:var(--navy);border-color:var(--navy);color:#fff}
details.add>summary{list-style:none;cursor:pointer}details.add>summary::-webkit-details-marker{display:none}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:14px}.kv div:nth-child(odd){color:var(--muted)}
.auth{max-width:440px;margin:30px auto}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan{border:2px solid var(--line);border-radius:12px;padding:20px;background:#fff;position:relative;cursor:pointer;display:block}
.plan input{position:absolute;opacity:0}
.plan:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,149,90,.15)}
.plan .price{font-size:30px;font-weight:800;color:var(--navy)}.plan .per{color:var(--muted);font-size:14px}
.plan .tag{position:absolute;top:-11px;right:14px;background:var(--gold);color:var(--navy);font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px}
/* public landing */
.hero{background:linear-gradient(135deg,#0b1f3a,#13305a);color:#fff;padding:64px 0 72px}
.hero h1{color:#fff;font-size:42px;line-height:1.15;max-width:720px;margin-bottom:14px}
.hero p{color:#cfd8e6;font-size:18px;max-width:640px;margin:0 0 26px}
.hero .eyebrow{color:var(--gold2);text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;margin-bottom:12px}
body.public .main{padding-top:0}
.section{padding:56px 0}.section h2{font-size:28px;text-align:center;margin-bottom:8px}.section .lead{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 32px}
.feat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}.feat .ic{font-size:24px;margin-bottom:8px}.feat h3{color:var(--navy);font-size:17px}.feat p{color:var(--muted);margin:0;font-size:14px}
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:0 auto}
.pcard{background:#fff;border:2px solid var(--line);border-radius:14px;padding:28px;position:relative}
.pcard.best{border-color:var(--gold)}
.ptag{position:absolute;top:-12px;right:16px;background:var(--gold);color:var(--navy);font-size:12px;font-weight:700;padding:3px 11px;border-radius:20px}
.pcard .price{font-size:40px;font-weight:800;color:var(--navy)}.pcard ul{padding-left:18px;color:#33415a;font-size:14px}
.mock{background:#fff;border-radius:12px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);color:var(--text);font-size:13px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:900px){.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:32px}}
@media (max-width:720px){
 .menu-btn{display:block}
 .top .nav:not(.pub){display:none;position:absolute;top:60px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;padding:8px 16px 14px;border-top:1px solid rgba(255,255,255,.1)}
 body.nav-open .top .nav{display:flex}
 .nav.pub a:not(.btn){display:none}
 .g2,.plans,.pricing{grid-template-columns:1fr}
 .kv{grid-template-columns:110px 1fr}
 h1{font-size:22px}.card{padding:16px}
 .filters input,.filters select{min-width:0;flex:1 1 140px}
 table.stack thead{display:none}
 table.stack tr{display:block;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#fff}
 table.stack td{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #eef1f6;padding:8px 12px;text-align:right}
 table.stack td::before{content:attr(data-l);color:var(--muted);font-size:12px;text-align:left;font-weight:600}
 table.stack td:last-child{border-bottom:0}
}
@media print{.top,.foot,.trialbar,.actions,.no-print{display:none!important}body{background:#fff}.card{border:0;padding:0}}

/* plan picker */
.cycle{display:inline-flex;border:1px solid var(--line);border-radius:30px;padding:3px;background:#f1f4f9;margin-bottom:14px}
.cycle label{margin:0;padding:7px 14px;border-radius:30px;cursor:pointer;font-weight:600;font-size:14px;display:flex;gap:6px;align-items:center}
.cycle input{position:absolute;opacity:0;width:1px}
.cycle label:has(input:checked){background:var(--navy);color:#fff}
.cycle .save{background:var(--gold);color:var(--navy);font-size:11px;padding:1px 7px;border-radius:10px}
.plans3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plans3 .plan{padding:16px}.plans3 .price{font-size:24px}
.pname{font-weight:800;color:var(--navy);font-size:17px}.limits{font-size:13px;color:var(--muted);margin-bottom:8px}
form:has(input[name=cycle][value=monthly]:checked) .pa,form:has(input[name=cycle][value=annual]:checked) .pm{display:none}
.pricing4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pricing4 .pcard{padding:22px;display:flex;flex-direction:column}.pricing4 .pcard .btn{margin-top:auto}
.pricing4 .price{font-size:32px}
.yr{font-size:13px;color:var(--muted);margin:4px 0 10px}
.usage{height:8px;background:#eef1f6;border-radius:6px;overflow:hidden;margin:4px 0 10px}.usage span{display:block;height:100%;background:var(--navy2)}
.usage.hi span{background:var(--amber)}
@media (max-width:1000px){.pricing4{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.plans3,.pricing4{grid-template-columns:1fr}}
.main:has(+ .hero){min-height:0;padding:0}