/* infra-quote — public site styles. Light + dark via data-theme. */
:root{
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc; --border:#e4e8f0;
  --text:#141b2d; --muted:#5b6577; --brand:#0069ff; --brand-2:#00b3ff;
  --accent:#0069ff; --ok:#12b76a; --warn:#f79009; --danger:#e5484d;
  --shadow:0 1px 3px rgba(20,30,60,.06),0 8px 24px rgba(20,30,60,.06);
  --radius:14px;
}
:root[data-theme="dark"]{
  --bg:#0a0e1a; --surface:#111827; --surface-2:#0f1626; --border:#1e2a44;
  --text:#e8edf7; --muted:#93a0b8; --brand:#3b95ff; --brand-2:#00d4ff;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.min0{min-width:0}

/* Top bar */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text)}
.brand:hover{text-decoration:none}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-weight:800}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.topbar nav a{color:var(--muted);padding:8px 12px;border-radius:9px;font-weight:600;font-size:.95rem}
.topbar nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.iconbtn{cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);width:38px;height:38px;border-radius:10px;display:grid;place-items:center}

/* Hero */
.hero{padding:56px 0 28px;text-align:center}
.hero h1{font-size:2.35rem;line-height:1.12;margin:0 0 14px;letter-spacing:-.02em}
.hero p{color:var(--muted);font-size:1.12rem;max-width:680px;margin:0 auto}

/* Package cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:26px 0 40px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 34px rgba(20,30,60,.12)}
.card.feat{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent),var(--shadow)}
.card h3{margin:0 0 4px;font-size:1.28rem}
.card .sub{color:var(--muted);font-size:.95rem;min-height:2.6em}
.card .price{margin:16px 0 2px;font-size:2rem;font-weight:800;letter-spacing:-.02em}
.card .price small{font-size:.9rem;color:var(--muted);font-weight:600}
.card .annual{color:var(--muted);font-size:.9rem}
.provlist{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.chip{font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff}
.card .actions{margin-top:auto;display:flex;gap:8px;padding-top:16px}
.badge{position:absolute;top:14px;right:14px;background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:.12s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:7px 12px;font-size:.86rem}
.btn.full{width:100%}

/* Detail / breakdown */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin:30px 0 8px}
.pagehead h1{margin:0;font-size:2rem;letter-spacing:-.02em}
.pagehead .sub{color:var(--muted)}
.toolbar{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin:18px 0}
.tblwrap{overflow-x:auto}
table.breakdown{width:100%;border-collapse:collapse;font-size:.94rem}
table.breakdown th,table.breakdown td{padding:11px 16px;text-align:right;white-space:nowrap}
table.breakdown th:first-child,table.breakdown td:first-child{text-align:left;white-space:normal}
table.breakdown thead th{background:var(--surface-2);color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
table.breakdown tbody tr+tr td{border-top:1px solid var(--border)}
.cat-row td{background:var(--surface-2);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-top:1px solid var(--border)}
.line td{border-top:1px solid var(--border)}
.svc{display:flex;flex-direction:column}
.svc .opt{color:var(--muted);font-size:.82rem}
.subtotal td{font-weight:700;background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.grand td{font-weight:800;font-size:1.02rem;background:color-mix(in srgb,var(--brand) 10%,var(--surface));border-top:2px solid var(--brand)}
.provbadge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;color:#fff}
.muted{color:var(--muted)}
.note{font-size:.86rem;color:var(--muted)}
.save-badge{display:inline-block;background:#e6f6ee;color:#0a7b46;font-weight:700;font-size:.78rem;padding:2px 9px;border-radius:999px;white-space:nowrap}
:root[data-theme="dark"] .save-badge{background:rgba(18,183,106,.18);color:#3ddc97}
.card .yearly{color:var(--muted);font-size:.86rem;margin-top:2px}
.card .yearly .save-badge{margin-left:2px}

/* Totals strip */
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0}
.tot{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.tot .k{color:var(--muted);font-size:.82rem;font-weight:600}
.tot .v{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.tot.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none}
.tot.primary .k{color:rgba(255,255,255,.85)}

/* Notes / pros-cons */
.notes{padding:20px 22px}
.notes h3{margin:0 0 8px}
.notes .body{color:var(--text)}
.notes .body ul{margin:.4em 0;padding-left:1.2em}

/* Compare */
.cmp{overflow-x:auto}
table.cmp-tbl{border-collapse:collapse;width:100%;min-width:620px;font-size:.92rem}
table.cmp-tbl th,table.cmp-tbl td{border:1px solid var(--border);padding:11px 14px;text-align:right;vertical-align:top}
table.cmp-tbl th:first-child,table.cmp-tbl td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
table.cmp-tbl thead th{background:var(--surface-2);text-align:center;font-size:1rem}
table.cmp-tbl thead th .p{font-size:.8rem;color:var(--muted);font-weight:600}
table.cmp-tbl .cat td{background:var(--surface-2);font-weight:800;text-transform:uppercase;font-size:.76rem;letter-spacing:.05em;color:var(--muted);text-align:left}
table.cmp-tbl tr.tot-r td{font-weight:800;background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.check{color:var(--ok);font-weight:800}
.dash{color:var(--muted)}
.pickbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 4px}
.pickbar label{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);padding:8px 13px;border-radius:10px;font-weight:600;cursor:pointer}

/* Footer */
.site-foot{border-top:1px solid var(--border);margin-top:44px;padding:26px 0;color:var(--muted);font-size:.9rem;text-align:center}
.site-foot a{font-weight:600}

@media(max-width:640px){
  .hero h1{font-size:1.8rem}
  .topbar nav a.hidesm{display:none}
}
@media print{
  .topbar,.toolbar,.pickbar,.site-foot .noprint,.no-print{display:none!important}
  body{background:#fff}
  .panel,.card,.tot{box-shadow:none}
}