/* ===================== Apex Billing UK — Vault design system ===================== */
*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#0a0c10; --bg2:#0c0f14; --panel:#12151b; --panel2:#171b22;
  --ink:#eef2f6; --mint:#4fe3c1; --mint-d:#33c6a4; --steel:#828d9b;
  --steel-2:#5c6572; --line:#232a35; --line-2:#2c3542;
  --warn:#f2c14e; --bad:#f2766e;
}
html,body{ background:var(--bg); color:var(--ink); }
body{ font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.shell{ max-width:1180px; margin:0 auto; padding:0 28px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.brand .m{ width:27px; height:27px; border-radius:8px; background:linear-gradient(145deg,var(--mint),#2f9d84); display:grid; place-items:center; color:#04120e; font-weight:800; font-size:15px; }
.brand .uk{ font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--mint); background:rgba(79,227,193,.12); border:1px solid rgba(79,227,193,.28); padding:2px 6px; border-radius:6px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:11px 20px; border-radius:9px; cursor:pointer; border:0; font-family:inherit; text-decoration:none; }
.btn-mint{ background:var(--mint); color:#04120e; } .btn-mint:hover{ background:var(--mint-d); }
.btn-glass{ border:1px solid var(--line-2); color:var(--ink); background:rgba(255,255,255,.03); } .btn-glass:hover{ border-color:var(--steel); }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-sm{ padding:8px 14px; font-size:13px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-block{ width:100%; justify-content:center; }

/* flash + alerts */
.flash{ position:fixed; right:22px; bottom:22px; z-index:80; background:var(--panel); border:1px solid rgba(79,227,193,.4); border-radius:12px; padding:14px 18px; display:flex; gap:12px; align-items:center; box-shadow:0 24px 50px -20px rgba(0,0,0,.7); max-width:400px; }
.flash .ti{ width:30px; height:30px; border-radius:8px; background:rgba(79,227,193,.14); color:var(--mint); display:grid; place-items:center; flex:0 0 auto; }
.flash p{ font-size:13.5px; }
.alert-err{ background:rgba(242,118,110,.08); border:1px solid rgba(242,118,110,.35); color:#ffd7d2; border-radius:10px; padding:12px 15px; font-size:13.5px; margin-bottom:16px; }
.alert-ok{ background:rgba(79,227,193,.08); border:1px solid rgba(79,227,193,.35); color:#c8f7ea; border-radius:10px; padding:12px 15px; font-size:13.5px; margin-bottom:16px; }
.kicker{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--mint); background:rgba(79,227,193,.09); border:1px solid rgba(79,227,193,.25); padding:6px 13px; border-radius:999px; }

/* ============ marketing nav / footer ============ */
.nav{ position:sticky; top:0; z-index:100; background:rgba(10,12,16,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav .in{ display:flex; align-items:center; gap:30px; height:66px; }
.nav .links{ display:flex; gap:6px; margin-left:8px; }
.nav .links a{ font-size:14px; font-weight:500; color:var(--steel); padding:8px 13px; border-radius:8px; }
.nav .links a:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.nav .links a.active{ color:var(--ink); background:rgba(255,255,255,.05); }
.nav .right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.nav .right .signin{ font-size:14px; font-weight:600; }
/* mobile hamburger + menu */
.nav-toggle{ display:none; width:42px; height:38px; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin-left:auto; background:none; border:1px solid var(--line-2); border-radius:9px; cursor:pointer; }
.nav-toggle .bar{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav-mobile{ display:none; border-top:1px solid var(--line); background:var(--bg2); }
.nav-mobile.open{ display:block; }
.nav-mobile .shell{ display:flex; flex-direction:column; padding-top:6px; padding-bottom:18px; }
.nav-mobile > .shell > a{ padding:14px 2px; font-size:15px; font-weight:500; color:var(--steel); border-bottom:1px solid var(--line); text-decoration:none; }
.nav-mobile > .shell > a.active, .nav-mobile > .shell > a:hover{ color:var(--ink); }
.nav-mobile-cta{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
@media (max-width:860px){ .nav .links{ display:none; } .nav .right{ display:none; } .nav-toggle{ display:flex; } }

.footer{ border-top:1px solid var(--line); margin-top:20px; background:var(--bg2); }
.footer .top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; padding:52px 0 40px; }
.footer .blurb{ font-size:14px; color:var(--steel); line-height:1.6; max-width:34ch; margin-top:14px; }
.footer h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--steel-2); margin-bottom:14px; }
.footer .col a{ display:block; font-size:14px; color:var(--steel); padding:6px 0; }
.footer .col a:hover{ color:var(--ink); }
.footer .bottom{ border-top:1px solid var(--line); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer .bottom p{ font-size:12.5px; color:var(--steel-2); }
@media (max-width:860px){ .footer .top{ grid-template-columns:1fr 1fr; } }

/* glow wrapper */
.glow{ position:relative; }
.glow::before{ content:""; position:absolute; top:-240px; left:50%; transform:translateX(-50%); width:920px; height:560px; background:radial-gradient(ellipse at center, rgba(79,227,193,.15), transparent 62%); pointer-events:none; z-index:0; }
.glow > *{ position:relative; z-index:1; }

/* hero */
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:34px 0 18px; }
.hero h1{ font-size:50px; line-height:1.03; letter-spacing:-.03em; font-weight:700; margin:16px 0 16px; text-wrap:balance; }
.hero h1 .g{ background:linear-gradient(120deg,var(--mint),#8ff0dc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ font-size:17.5px; line-height:1.5; color:var(--steel); max-width:44ch; }
.cta-row{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.cluster{ margin-top:34px; font-size:13px; color:var(--steel); }
.hero-right{ display:flex; flex-direction:column; gap:12px; }
.hero-note{ align-self:flex-end; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--steel); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }
.hero-note svg{ color:var(--mint); flex:0 0 auto; }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; gap:28px; padding:28px 0 36px; } .hero h1{ font-size:38px; } .hero-note{ align-self:flex-start; } }

/* glass panel card */
.glass{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(8px); box-shadow:0 40px 80px -40px rgba(0,0,0,.7); overflow:hidden; }
.glass .gh{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.glass .mk{ font-size:10.5px; font-weight:700; letter-spacing:.13em; color:#04120e; background:var(--mint); padding:5px 10px; border-radius:5px; }
.glass .st{ font-size:12px; color:var(--mint); display:flex; align-items:center; gap:7px; }
.glass .st .dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(79,227,193,.18); }
.glass .gbody{ padding:20px; }
.glass .grow{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.glass .grow:last-child{ border-bottom:0; }
.glass .grow .k{ color:var(--steel); }
.glass .grow .v{ font-variant-numeric:tabular-nums; font-weight:600; }
.glass .grow.total .v{ color:var(--mint); font-size:17px; }
.glass .meter{ height:8px; border-radius:6px; background:var(--panel2); margin:16px 0 6px; overflow:hidden; }
.glass .meter i{ display:block; height:100%; width:72%; background:linear-gradient(90deg,var(--mint),#2f9d84); }
.glass .mlabel{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--steel); }

/* sections */
.sec{ padding:52px 0; }
.sec-head{ max-width:64ch; margin:0 auto 32px; text-align:center; }
.sec-head.left{ margin-left:0; text-align:left; }
.sec-head .k{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mint); }
.sec-head h2{ font-size:38px; letter-spacing:-.025em; font-weight:700; margin:12px 0 14px; text-wrap:balance; line-height:1.08; }
.sec-head p{ font-size:17px; color:var(--steel); line-height:1.6; }
.pintro{ padding:42px 0 8px; text-align:center; }
.pintro h1{ font-size:48px; font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:16px auto 16px; max-width:20ch; text-wrap:balance; }
.pintro p{ font-size:18px; color:var(--steel); line-height:1.6; max-width:60ch; margin:0 auto; }

.cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cell{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 24px; transition:border-color .18s, transform .18s; }
.cell:hover{ border-color:rgba(79,227,193,.4); transform:translateY(-3px); }
.cell .ic{ width:44px; height:44px; border-radius:11px; background:rgba(79,227,193,.1); border:1px solid rgba(79,227,193,.22); color:var(--mint); display:grid; place-items:center; margin-bottom:16px; }
.cell h3{ font-size:17.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:8px; }
.cell p{ font-size:14.5px; color:var(--steel); line-height:1.55; }
@media (max-width:860px){ .cells{ grid-template-columns:1fr; } }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step{ position:relative; padding-top:26px; }
.step .n{ position:absolute; top:0; left:0; font-size:13px; font-weight:700; color:var(--mint); }
.step .bar{ height:2px; background:var(--line-2); margin-bottom:16px; }
.step:first-child .bar{ background:var(--mint); }
.step h4{ font-size:16.5px; font-weight:600; margin-bottom:7px; }
.step p{ font-size:14px; color:var(--steel); line-height:1.55; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }

.sectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sector{ display:flex; gap:13px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
.sector .si{ color:var(--mint); flex:0 0 auto; margin-top:2px; }
.sector h4{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
.sector p{ font-size:13.5px; color:var(--steel); line-height:1.5; }
@media (max-width:860px){ .sectors{ grid-template-columns:1fr; } }

.band{ background:linear-gradient(135deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:20px; padding:38px 42px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.band h2{ font-size:32px; font-weight:700; letter-spacing:-.02em; margin-bottom:12px; text-wrap:balance; }
.band p{ color:var(--steel); font-size:16px; line-height:1.6; max-width:54ch; }
@media (max-width:860px){ .band{ grid-template-columns:1fr; padding:36px 26px; } }

/* feature rows */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:44px 0; border-top:1px solid var(--line); }
.frow.alt .txt{ order:2; }
.frow .tag{ font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mint); }
.frow h3{ font-size:27px; font-weight:700; letter-spacing:-.02em; margin:12px 0 12px; text-wrap:balance; }
.frow p{ font-size:16px; color:var(--steel); line-height:1.6; }
.frow ul{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.frow li{ display:flex; gap:11px; font-size:14.5px; }
.frow li svg{ color:var(--mint); flex:0 0 auto; margin-top:2px; }
.mock{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; }
.mock .mrow{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:9px; font-size:13px; background:var(--bg2); }
.mock .mrow:last-child{ margin-bottom:0; }
.mock .mrow .who{ font-weight:600; } .mock .mrow .sub{ font-size:11.5px; color:var(--steel); }
.pill{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.02em; }
.pill.ok{ background:rgba(79,227,193,.14); color:var(--mint); }
.pill.warn{ background:rgba(242,193,78,.14); color:var(--warn); }
.pill.rc{ background:rgba(130,141,155,.16); color:var(--steel); }
@media (max-width:860px){ .frow{ grid-template-columns:1fr; gap:28px; } .frow.alt .txt{ order:0; } }

/* VAT page */
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.check{ display:flex; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; }
.check .cnum{ font-size:13px; font-weight:700; color:var(--mint); flex:0 0 auto; }
.check h4{ font-size:15.5px; font-weight:600; margin-bottom:5px; }
.check p{ font-size:13.5px; color:var(--steel); line-height:1.5; }
@media (max-width:860px){ .checklist{ grid-template-columns:1fr; } }
.note{ margin-top:20px; font-size:13.5px; color:var(--steel); background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:10px; padding:16px 18px; line-height:1.6; }

/* tables (shared) */
.tablewrap{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); }
.scroll{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--steel); font-weight:600; padding:14px 16px; background:var(--panel2); border-bottom:1px solid var(--line); white-space:nowrap; }
table.data tbody td{ padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.data tbody tr:last-child td{ border-bottom:0; }
table.data .num{ font-variant-numeric:tabular-nums; text-align:right; } table.data th.num{ text-align:right; }
table.data tfoot td{ padding:14px 16px; font-weight:700; background:var(--panel2); border-top:1px solid var(--line-2); }
.who b{ font-weight:600; } .who span{ display:block; font-size:12px; color:var(--steel); }
.badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.02em; white-space:nowrap; }
.badge.exist,.badge.active,.badge.ok{ background:rgba(79,227,193,.14); color:var(--mint); }
.badge.new,.badge.warn{ background:rgba(242,193,78,.14); color:var(--warn); }
.badge.rc,.badge.paused,.badge.muted{ background:rgba(130,141,155,.16); color:var(--steel); }

/* pricing */
.toggle{ display:flex; justify-content:center; gap:10px; align-items:center; margin-bottom:14px; font-size:14px; color:var(--steel); }
.toggle .sw{ width:46px; height:26px; border-radius:999px; background:var(--panel2); border:1px solid var(--line-2); position:relative; cursor:pointer; }
.toggle .sw i{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--mint); transition:left .18s; }
.toggle .sw.on i{ left:22px; }
.toggle b{ color:var(--ink); }
.save{ font-size:12px; color:var(--mint); background:rgba(79,227,193,.1); padding:3px 9px; border-radius:999px; }
.trialline{ display:flex; align-items:center; justify-content:center; gap:9px; margin:0 auto 34px; font-size:14px; color:var(--steel); }
.trialline svg{ color:var(--mint); } .trialline b{ color:var(--ink); }
.prices{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; }
.price{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 20px; position:relative; }
.price.feat{ border-color:rgba(79,227,193,.5); box-shadow:0 0 0 1px rgba(79,227,193,.25), 0 30px 60px -40px rgba(79,227,193,.4); }
.price .badge-pop{ position:absolute; top:-11px; left:26px; font-size:11px; font-weight:700; background:var(--mint); color:#04120e; padding:4px 11px; border-radius:999px; }
.price .pn{ font-size:15px; font-weight:600; }
.price .pd{ font-size:13.5px; color:var(--steel); margin:6px 0 20px; min-height:38px; }
.price .amt{ font-size:36px; font-weight:800; letter-spacing:-.03em; }
.price .pbill{ font-size:12px; color:var(--steel); margin-top:5px; }
.price .amt .per{ font-size:14px; font-weight:500; color:var(--steel); letter-spacing:0; }
.price .amt .cur{ font-size:22px; vertical-align:top; }
.price .btn{ width:100%; justify-content:center; margin:18px 0 16px; }
.price ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.price li{ display:flex; gap:11px; font-size:14px; color:var(--steel); }
.price li svg{ color:var(--mint); flex:0 0 auto; margin-top:2px; }
.price li b{ color:var(--ink); font-weight:600; }
@media (max-width:980px){ .prices{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .prices{ grid-template-columns:1fr; } }
.faq{ max-width:760px; margin:0 auto; }
.qa{ border-bottom:1px solid var(--line); padding:22px 0; }
.qa h4{ font-size:17px; font-weight:600; margin-bottom:9px; }
.qa p{ font-size:15px; color:var(--steel); line-height:1.6; }

/* dedicated FAQ page */
.faq-nav{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 4px; }
.faq-nav a{ font-size:13px; font-weight:600; color:var(--steel); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 14px; text-decoration:none; }
.faq-nav a:hover{ color:var(--ink); border-color:var(--line-2); }
.faq-cat{ margin-bottom:40px; scroll-margin-top:84px; }
.faq-cat h2{ font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.qa-item{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; scroll-margin-top:84px; }
.qa-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; font-size:16px; font-weight:600; color:var(--ink); }
.qa-item summary::-webkit-details-marker{ display:none; }
.qa-item summary:hover{ color:var(--mint); }
.qa-item .chev{ flex:0 0 auto; width:9px; height:9px; border-right:2px solid var(--steel); border-bottom:2px solid var(--steel); transform:rotate(45deg); transition:transform .18s; margin-right:2px; }
.qa-item[open] .chev{ transform:rotate(-135deg); }
.qa-item p{ padding:0 18px 18px; font-size:15px; color:var(--steel); line-height:1.6; margin:0; }
.qa-item[open] summary{ color:var(--mint); }

/* about */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.value{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px 24px; }
.value .vn{ font-size:13px; font-weight:700; color:var(--mint); }
.value h3{ font-size:17px; font-weight:600; margin:8px 0 8px; }
.value p{ font-size:14px; color:var(--steel); line-height:1.55; }
@media (max-width:860px){ .values{ grid-template-columns:1fr; } }

/* ============ auth ============ */
.authwrap{ min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden; }
.authwrap::before{ content:""; position:absolute; top:-260px; left:50%; transform:translateX(-50%); width:900px; height:600px; background:radial-gradient(ellipse at center, rgba(79,227,193,.16), transparent 62%); }
.authcard{ position:relative; width:100%; max-width:420px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:18px; padding:34px 32px; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.authcard.wide{ max-width:560px; }
.authcard .brand{ margin-bottom:22px; }
.authcard h1{ font-size:23px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.authcard .sub{ font-size:14px; color:var(--steel); margin-bottom:22px; }
.authcard .alt{ text-align:center; font-size:13px; color:var(--steel); margin-top:18px; }
.authcard .alt a{ color:var(--mint); font-weight:600; }
.gate{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color:var(--steel-2); margin-top:22px; }
.gate svg{ color:var(--mint); }

/* forms */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color:var(--steel); font-weight:600; margin-bottom:7px; }
.field .hint{ font-weight:400; color:var(--steel-2); font-size:11.5px; }
.field input, .field select, .field textarea{ width:100%; background:var(--bg2); border:1px solid var(--line-2); border-radius:9px; padding:11px 13px; color:var(--ink); font:inherit; font-size:14px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--mint); outline-offset:1px; border-color:transparent; }
.field .err{ color:var(--bad); font-size:12.5px; margin-top:6px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:640px){ .grid2,.grid3{ grid-template-columns:1fr; } }
.plan-picker{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:18px; }
.plan-opt{ border:1px solid var(--line-2); border-radius:12px; padding:14px; cursor:pointer; background:var(--bg2); }
.plan-opt.sel{ border-color:var(--mint); box-shadow:0 0 0 1px var(--mint); }
.plan-opt b{ display:block; font-size:14px; } .plan-opt span{ font-size:12px; color:var(--steel); }
.plan-opt .p{ color:var(--mint); font-weight:700; margin-top:6px; font-size:13px; }
@media (max-width:640px){ .plan-picker{ grid-template-columns:1fr; } }

/* ============ app shell ============ */
.layout{ display:grid; grid-template-columns:244px 1fr; min-height:100vh; }
.side{ background:var(--bg2); border-right:1px solid var(--line); padding:20px 16px; display:flex; flex-direction:column; gap:4px; }
.side .brand{ padding:6px 8px 18px; }
.side .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--steel-2); padding:14px 10px 6px; }
.side-sep{ height:1px; background:var(--line); margin:10px 8px; }
.side .nav-i{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:9px; font-size:14px; font-weight:500; color:var(--steel); }
.side .nav-i:hover{ color:var(--ink); background:rgba(255,255,255,.03); }
.side .nav-i.active{ color:var(--ink); background:rgba(79,227,193,.1); } .side .nav-i.active svg{ color:var(--mint); }
.side .nav-i svg{ color:var(--steel); flex:0 0 auto; }
.side form{ margin-top:auto; }
.side .foot{ display:flex; align-items:center; gap:10px; padding:12px 10px; border-top:1px solid var(--line); font-size:13px; width:100%; background:none; border-left:0; border-right:0; border-bottom:0; color:var(--ink); cursor:pointer; }
.side .foot:hover{ color:var(--mint); }
.side .foot .av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#2a3340,#3d4a5a); flex:0 0 auto; }
.side .foot .who{ text-align:left; } .side .foot .who b{ display:block; font-size:13px; } .side .foot .who span{ font-size:11.5px; color:var(--steel); }
.app-nav-toggle{ display:none; width:40px; height:36px; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:none; border:1px solid var(--line-2); border-radius:9px; cursor:pointer; margin-right:4px; flex:0 0 auto; }
.app-nav-toggle .bar{ width:16px; height:2px; background:var(--ink); border-radius:2px; }
.side-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40; }
.side-overlay.show{ display:block; }
@media (max-width:860px){
  .layout{ grid-template-columns:1fr; }
  .app-nav-toggle{ display:flex; }
  .side{ display:flex; position:fixed; top:0; left:0; bottom:0; width:250px; transform:translateX(-100%); transition:transform .22s ease; z-index:50; overflow-y:auto; }
  .side.open{ transform:translateX(0); }
}

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{ display:flex; align-items:center; gap:16px; padding:18px 30px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(10,12,16,.85); backdrop-filter:blur(10px); z-index:20; }
.topbar h1{ font-size:19px; font-weight:700; letter-spacing:-.01em; } .topbar .crumb{ font-size:13px; color:var(--steel); }
.topbar .right{ margin-left:auto; display:flex; gap:12px; align-items:center; }
.stripe-pill{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mint); background:rgba(79,227,193,.1); border:1px solid rgba(79,227,193,.25); padding:6px 12px; border-radius:999px; }
.stripe-pill.mock{ color:var(--warn); background:rgba(242,193,78,.1); border-color:rgba(242,193,78,.25); }
.stripe-pill .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.content{ padding:28px 30px 70px; max-width:1120px; width:100%; }

.page-head{ display:flex; align-items:flex-end; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.page-head h2{ font-size:24px; font-weight:700; letter-spacing:-.02em; }
.page-head p{ font-size:14.5px; color:var(--steel); margin-top:4px; max-width:64ch; }
.page-head .spacer{ flex:1; }

.chips{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.chip{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; min-width:120px; }
.chip b{ display:block; font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.chip span{ font-size:12.5px; color:var(--steel); }
.chip.good b{ color:var(--mint); } .chip.warn b{ color:var(--warn); }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.card-pad{ padding:22px 24px; }
.h2{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.sub{ font-size:14.5px; color:var(--steel); margin-bottom:22px; }
.muted-note{ font-size:13px; color:var(--steel); background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin-top:16px; display:flex; gap:10px; }

/* raise-invoice: compact meta + line items */
.inv-meta{ display:grid; grid-template-columns:158px 158px 1fr 1fr; gap:12px; margin-bottom:6px; }
@media (max-width:640px){ .inv-meta{ grid-template-columns:1fr 1fr; } }
.lines-table td{ padding:6px 8px; vertical-align:middle; }
.lines-table input{ width:100%; background:var(--bg2); border:1px solid var(--line-2); border-radius:7px; padding:8px 10px; color:var(--ink); font:inherit; font-size:13.5px; }
.lines-table input:focus{ outline:2px solid var(--mint); outline-offset:1px; border-color:transparent; }
.lines-table input.num{ text-align:right; }
.lines-table .l-net, .lines-table .l-vat, .lines-table .l-total{ font-variant-numeric:tabular-nums; color:var(--steel); white-space:nowrap; }
.lines-table .l-total{ color:var(--ink); font-weight:600; }
.l-remove{ background:none; border:1px solid var(--line-2); color:var(--steel); border-radius:7px; width:28px; height:28px; cursor:pointer; font-size:16px; line-height:1; }
.l-remove:hover{ color:var(--bad); border-color:rgba(242,118,110,.4); }
.inv-totals{ margin:16px 0 0 auto; width:330px; max-width:100%; }
.inv-totals .tr{ display:flex; justify-content:space-between; align-items:center; padding:7px 2px; font-size:13.5px; color:var(--steel); }
.inv-totals .tr.grand{ border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-size:17px; font-weight:700; color:var(--ink); }
.inv-totals input{ background:var(--bg2); border:1px solid var(--line-2); border-radius:7px; padding:6px 9px; color:var(--ink); font:inherit; }
.muted-note svg{ color:var(--mint); flex:0 0 auto; margin-top:1px; }

/* stepper */
.stepper{ display:flex; align-items:center; margin-bottom:28px; }
.stepper .s{ display:flex; align-items:center; gap:11px; }
.stepper .s .dot{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; background:var(--panel2); border:1px solid var(--line-2); color:var(--steel); }
.stepper .s .t{ font-size:14px; font-weight:600; color:var(--steel); }
.stepper .s.active .dot{ background:var(--mint); color:#04120e; border-color:var(--mint); }
.stepper .s.active .t{ color:var(--ink); }
.stepper .s.done .dot{ background:rgba(79,227,193,.15); color:var(--mint); border-color:rgba(79,227,193,.4); }
.stepper .bar{ flex:1; height:1px; background:var(--line-2); margin:0 16px; min-width:24px; }
@media (max-width:680px){ .stepper .s .t{ display:none; } }

/* dropzone */
.drop{ border:1.5px dashed var(--line-2); border-radius:14px; padding:46px 30px; text-align:center; background:var(--bg2); }
.drop .ic{ width:56px; height:56px; border-radius:14px; background:rgba(79,227,193,.1); border:1px solid rgba(79,227,193,.22); color:var(--mint); display:grid; place-items:center; margin:0 auto 16px; }
.drop h3{ font-size:17px; font-weight:600; margin-bottom:6px; }
.drop p{ font-size:13.5px; color:var(--steel); margin-bottom:18px; }
.drop .filein{ display:block; margin:0 auto 16px; max-width:320px; font-size:13px; color:var(--steel); }
.actions{ display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap; }
.actions .spacer{ flex:1; }
.sendtoggle{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--steel); }
.sw2{ width:42px; height:24px; border-radius:999px; background:var(--mint); border:1px solid var(--mint-d); position:relative; cursor:pointer; display:inline-block; }
.sw2 i{ position:absolute; top:2px; left:20px; width:18px; height:18px; border-radius:50%; background:#04120e; transition:left .16s; }
.sw2.off{ background:var(--panel2); border-color:var(--line-2); } .sw2.off i{ left:2px; background:var(--steel); }

/* packages editor */
.pkg-name{ font-weight:600; display:flex; align-items:center; gap:9px; }
.rowbtn{ background:none; border:1px solid var(--line-2); color:var(--ink); border-radius:8px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.rowbtn:hover{ border-color:var(--steel); }
.editor{ margin-top:24px; }
.editor .eh{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.editor .eh h3{ font-size:19px; font-weight:700; }
.divider{ height:1px; background:var(--line); margin:22px 0; }
.sublabel{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--steel); font-weight:600; margin-bottom:14px; }
.feats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feat-check{ display:flex; align-items:center; gap:11px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:14px; cursor:pointer; }
.feat-check input{ width:17px; height:17px; accent-color:var(--mint); cursor:pointer; }
@media (max-width:760px){ .feats{ grid-template-columns:1fr; } }
.toggle-row{ display:flex; align-items:center; gap:26px; margin-top:4px; flex-wrap:wrap; }
.tg{ display:flex; align-items:center; gap:10px; font-size:14px; }
.tg input{ width:17px; height:17px; accent-color:var(--mint); }
.tg .lab b{ display:block; } .tg .lab span{ font-size:12px; color:var(--steel); }
.prefix{ position:relative; } .prefix span{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--steel); } .prefix input{ padding-left:26px; }
.del{ color:var(--bad); background:none; border:1px solid rgba(242,118,110,.3); border-radius:9px; padding:10px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.del:hover{ background:rgba(242,118,110,.08); }

/* unified dashboard */
.hello{ display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.hello-name{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.hello-sub{ font-size:14.5px; color:var(--steel); margin-top:3px; }
.hello-sub b{ color:var(--ink); }
.caps{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.cap{ font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; }
.cap-out{ background:rgba(79,227,193,.12); color:var(--mint); border:1px solid rgba(79,227,193,.28); }
.cap-in{ background:rgba(242,193,78,.12); color:var(--warn); border:1px solid rgba(242,193,78,.28); }

.dual{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:26px; }
@media (max-width:760px){ .dual{ grid-template-columns:1fr; } }
.sumcard{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.sumcard.out{ border-top:3px solid var(--mint); }
.sumcard.in{ border-top:3px solid var(--warn); }
.sum-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sumcard .dir{ font-size:13px; font-weight:700; }
.sumcard.out .dir{ color:var(--mint); } .sumcard.in .dir{ color:var(--warn); }
.sum-tag{ font-size:12px; color:var(--steel); }
.sum-amt{ font-size:32px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; display:block; }
.sum-note{ font-size:12.5px; color:var(--steel); }

.side-block{ padding:26px 0; border-top:1px solid var(--line); }
.side-block:first-of-type{ border-top:0; padding-top:0; }
.block-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.block-head h2{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.block-head .spacer{ flex:1; }
.rolelabel{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.rolelabel.out{ background:rgba(79,227,193,.12); color:var(--mint); }
.rolelabel.in{ background:rgba(242,193,78,.12); color:var(--warn); }
.enable-card{ display:flex; align-items:center; gap:24px; background:linear-gradient(135deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:16px; padding:26px 28px; flex-wrap:wrap; }
.enable-card h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:10px 0 6px; }
.enable-card p{ font-size:14.5px; color:var(--steel); max-width:52ch; }
.enable-card .btn{ margin-left:auto; }

/* aging cards */
.aging{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.age{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; transition:border-color .15s, transform .15s; }
.age:hover{ transform:translateY(-2px); }
.age .age-lbl{ font-size:12.5px; color:var(--steel); display:block; margin-bottom:12px; }
.age .age-amt{ font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block; }
.age .age-count{ font-size:12px; color:var(--steel-2); }
.age-bad{ border-top:3px solid var(--bad); } .age-bad .age-amt{ color:var(--bad); }
.age-warn{ border-top:3px solid var(--warn); } .age-warn .age-amt{ color:var(--warn); }
.age-ok{ border-top:3px solid var(--mint); } .age-ok .age-amt{ color:var(--mint); }
.age-muted{ border-top:3px solid var(--line-2); }
.age-bad:hover{ border-color:var(--bad); } .age-warn:hover{ border-color:var(--warn); } .age-ok:hover{ border-color:var(--mint); }
@media (max-width:900px){ .aging{ grid-template-columns:1fr 1fr; } }

/* filter pills */
.filterbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.fpill{ font-size:13px; font-weight:600; color:var(--steel); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 15px; text-decoration:none; }
.fpill:hover{ color:var(--ink); border-color:var(--line-2); }
.fpill.on{ background:var(--mint); color:#04120e; border-color:var(--mint); }

/* generic empty state */
.empty{ text-align:center; padding:56px 24px; color:var(--steel); }
.empty h3{ color:var(--ink); font-size:18px; margin-bottom:8px; }
.empty p{ font-size:14px; margin-bottom:18px; }

/* --- Cookie consent bar --- */
.cookiebar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:120; display:none; gap:18px;
  align-items:center; justify-content:space-between; flex-wrap:wrap;
  max-width:1000px; margin:0 auto; padding:16px 20px; border-radius:16px;
  background:rgba(16,19,26,.92); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.cookiebar.show{ display:flex; }
.cookiebar p{ font-size:13.5px; color:var(--steel); line-height:1.55; margin:0; flex:1 1 320px; }
.cookiebar a{ color:var(--mint); }
.cookiebtns{ flex:0 0 auto; }
@media(max-width:560px){ .cookiebar{ left:10px; right:10px; bottom:10px; padding:14px 16px; } .cookiebtns{ width:100%; } .cookiebtns .btn{ width:100%; } }

/* --- Legal / policy pages --- */
.legal{ max-width:800px; margin:0 auto; padding:12px 0 40px; }
.legal .updated{ font-size:13px; color:var(--steel); margin-bottom:26px; }
.legal h2{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin:34px 0 12px; color:var(--ink); }
.legal h3{ font-size:16px; font-weight:600; margin:22px 0 8px; color:var(--ink); }
.legal p, .legal li{ font-size:15px; line-height:1.7; color:var(--steel); }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 14px; padding-left:20px; }
.legal li{ margin:0 0 7px; }
.legal a{ color:var(--mint); }
.legal strong{ color:var(--ink); }
.legal .callout{ border:1px solid rgba(79,227,193,.25); background:rgba(79,227,193,.07);
  border-radius:14px; padding:16px 18px; margin:18px 0; }
.legal .callout p{ margin:0; color:var(--ink); }