/* Nimbopanel marketing — design system ("Stratus": atmospheric teal + apricot).
   Bricolage Grotesque (display) + IBM Plex Sans (body) + IBM Plex Mono (data).
   Neutrals carry a green-teal "ink" undertone (not navy) so the storefront reads
   as the same brand as the panel. Light is the base; dark via system + toggle. */


/* Fonts are served from THIS origin, not a CDN.
   They were already self-hosted in the panel; the storefront still asked
   fonts.bunny.net for the same eight files, which meant every visitor's browser
   announced itself to a third party before the page could render its own text.
   Moving off Google to Bunny was a privacy step; this finishes it — nobody outside
   this server sees the request at all, the page renders when the CDN is down, and
   the CSP can drop the exception entirely (font-src 'self').
   Bricolage Grotesque and IBM Plex are both SIL OFL 1.1 (see public/fonts/NOTICE). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/bricolage-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/bricolage-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexsans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexsans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plexsans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/plexsans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500.woff2') format('woff2')}

:root{
  --accent:#0C8E84; --accent-2:#2CC3B4; --accent-deep:#0A736B; --tint:#E1EEEC;
  /* --accent-text is the brand colour for TEXT, and it is a different value on
     purpose. #0C8E84 reads 4.02:1 on white and 3.59:1 on the page background —
     both under the 4.5:1 minimum for body text, so every brand-coloured link,
     eyebrow and active nav item was failing. The panel had already been fixed
     this way and the storefront had not, which is exactly the kind of drift a
     shared design system is supposed to prevent.
     Icons, borders and focus rings keep --accent: non-text UI needs only 3:1,
     which it passes, and darkening them would cost brand identity for no
     readability gain. */
  /* Measured against every background these actually sit on — white, the page
     background, and the translucent brand/status tints. #0A736B passes on white
     (5.71) but only reaches 4.13 on an 18% teal tint, which is where the eyebrow,
     the step badges and the "Popular" tag live. One value has to clear all of
     them, so it is the darkest requirement that sets it. */
  --accent-text:#085C55;
  /* Signal colours need the same treatment, and for the same reason the panel
     needed it: a status word is TEXT, so 4.5:1, while the dot or icon beside it
     is not and keeps the brighter --success / --warning. */
  --success-text:#076B4A; --warning-text:#7A5408;
  /* text/icon colour on an accent-filled surface, + the primary-button fill.
     Light uses deep teal + white (AA); dark uses bright teal + dark ink (AA). */
  --on-accent:#ffffff; --btn-primary-bg:#0A736B;
  --bg:#EEF3F2; --surface:#ffffff; --surface-2:#E7EEEC;
  --text:#0E1A18; --muted:#54635F; --border:#D9E4E1;
  --success:#0E9E6E; --warning:#B67C0C; --danger:#CF3F3F; --track:#DBE7E4;
  --glass:rgba(255,255,255,.72); --glass-brd:rgba(12,142,132,.16);
  --shadow:0 20px 50px -28px rgba(12,142,132,.28);
  --glow:radial-gradient(55% 45% at 82% -10%,rgba(44,195,180,.18),transparent 60%),
         radial-gradient(45% 40% at 0% 4%,rgba(217,118,47,.10),transparent 60%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent:#2CC3B4; --accent-2:#4CD8C9; --accent-deep:#0C8E84; --tint:rgba(44,195,180,.16);
    /* In dark mode the bright teal already reads 7.90:1 on the surface, so text
       and non-text share one value here. Defining it anyway keeps the token's
       MEANING identical in both themes — a token that exists in one theme only
       is how a dark-mode-only regression gets written. */
    --accent-text:#2CC3B4; --success-text:#3AD69B; --warning-text:#E7B34A;
    --on-accent:#06231F; --btn-primary-bg:#2CC3B4;
    --bg:#081211; --surface:#0F1D1B; --surface-2:#152623;
    --text:#E9F0EE; --muted:#93A39F; --border:#233531;
    --success:#3AD69B; --warning:#E7B34A; --danger:#E86B6B; --track:rgba(147,163,159,.16);
    --glass:rgba(147,163,159,.06); --glass-brd:rgba(255,255,255,.09);
    --shadow:0 20px 50px -24px rgba(0,0,0,.8);
    --glow:radial-gradient(60% 50% at 80% -10%,rgba(44,195,180,.26),transparent 60%),
           radial-gradient(45% 40% at 0% 5%,rgba(12,142,132,.18),transparent 60%);
  }
}
:root[data-theme="dark"]{
  --accent:#2CC3B4; --accent-2:#4CD8C9; --accent-deep:#0C8E84; --tint:rgba(44,195,180,.16);
  --accent-text:#2CC3B4; --success-text:#3AD69B; --warning-text:#E7B34A;
  /* Dark mode already clears the threshold on its own surfaces, so text and
     non-text share a value here. They are still declared, so the token means the
     same thing in every theme — a token defined in one theme only is how a
     dark-mode-only regression gets written. */
  --on-accent:#06231F; --btn-primary-bg:#2CC3B4;
  --bg:#081211; --surface:#0F1D1B; --surface-2:#152623;
  --text:#E9F0EE; --muted:#93A39F; --border:#233531;
  --success:#3AD69B; --warning:#E7B34A; --danger:#E86B6B; --track:rgba(147,163,159,.16);
  --glass:rgba(147,163,159,.06); --glass-brd:rgba(255,255,255,.09);
  --shadow:0 20px 50px -24px rgba(0,0,0,.8);
  --glow:radial-gradient(60% 50% at 80% -10%,rgba(44,195,180,.26),transparent 60%),
         radial-gradient(45% 40% at 0% 5%,rgba(12,142,132,.18),transparent 60%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .25s,color .25s}
h1,h2,h3,h4,.brand,.font-head{font-family:'Bricolage Grotesque','IBM Plex Sans',sans-serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* backdrop */
.bgglow{position:fixed;inset:0;z-index:0;background:var(--glow);pointer-events:none}
.hexes{display:none}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.narrow{max-width:820px}
main{position:relative;z-index:1;min-height:60vh}
.accent{color:var(--accent-text)}
.muted{color:var(--muted)}
.glass{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
svg.i{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* skip link (a11y) */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--surface);color:var(--text);
  padding:10px 16px;border-radius:10px;border:1px solid var(--border);font-weight:600}
.skip:focus{left:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'IBM Plex Sans',sans-serif;
  font-weight:700;font-size:15px;padding:11px 18px;min-height:44px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;transition:transform .16s,background .16s,color .16s,border-color .16s;white-space:nowrap}
.btn-primary{background:var(--btn-primary-bg);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--glass-brd);color:var(--text)}
.btn-ghost:hover{background:var(--tint);border-color:var(--accent);color:var(--accent-text)}
.btn-sm{font-size:14px;padding:8px 14px;min-height:38px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--border)}
.navin{max-width:1120px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
.brand .cp{color:var(--muted);font-weight:500}
.brand svg{flex:none}
.navlinks{display:flex;gap:20px;margin-left:8px;color:var(--muted);font-weight:600;font-size:14px}
.navlinks a{padding:6px 2px;position:relative}
.navlinks a:hover{color:var(--text)}
.navlinks a.active{color:var(--accent-text)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);border-radius:2px}
.navspacer{flex:1}
.tbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;cursor:pointer;
  color:var(--muted);background:transparent;border:1px solid transparent}
.tbtn:hover{background:var(--tint);color:var(--accent-text)}
.login{color:var(--muted);font-weight:600;font-size:14px}
.login:hover{color:var(--text)}
.navtoggle{display:none;width:40px;height:40px;place-items:center;border-radius:10px;background:transparent;
  border:1px solid var(--glass-brd);color:var(--text);cursor:pointer}

/* generic section */
section{padding:44px 0;position:relative;z-index:1}
.kicker{text-align:center;color:var(--accent-text);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:10px}
.h2{text-align:center;font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.lead{text-align:center;color:var(--muted);max-width:54ch;margin:0 auto 22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--accent-text);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);padding:6px 13px;border-radius:999px;margin-bottom:18px}

/* Shared marketing page hero — the "Strata" signature for inner pages: left-
   anchored (not centred), Bricolage display, and a full-bleed strata top-band
   (horizontal atmospheric layers + a teal wash) that echoes the home hero. */
.pagehero{position:relative;text-align:left;padding:66px 0 34px}
.pagehero::before,.hero::before{content:"";position:absolute;top:-34px;left:50%;width:100vw;height:360px;margin-left:-50vw;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 80% at 22% 0%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%),
    repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent) 24%,var(--border)) 0 1px,transparent 1px 40px);
  -webkit-mask-image:radial-gradient(120% 92% at 44% 0%,#000,transparent 66%);
          mask-image:radial-gradient(120% 92% at 44% 0%,#000,transparent 66%)}
.pagehero>*,.hero>*{position:relative;z-index:1}
.pagehero h1{font-family:'Bricolage Grotesque','IBM Plex Sans',sans-serif;font-size:clamp(38px,5.6vw,62px);
  font-weight:800;letter-spacing:-.04em;line-height:1.02;margin-bottom:16px;max-width:18ch;text-wrap:balance}
.pagehero .lead{text-align:left;margin-left:0;max-width:58ch}
.pagehero .eyebrow{margin-bottom:16px}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:66px 0 40px}
.hero h1{font-size:clamp(32px,5.2vw,46px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.hero p.sub{font-size:17px;color:var(--muted);margin-bottom:26px;max-width:38ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.trust{display:flex;gap:18px;color:var(--muted);font-size:12.5px;flex-wrap:wrap}
.trust b{color:var(--text)}

/* hero product preview */
.preview{border-radius:12px;padding:16px;position:relative}
.pv-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pv-dot{width:9px;height:9px;border-radius:50%;background:var(--track)}
.pv-title{margin-left:6px;font-size:12px;color:var(--muted);font-family:'IBM Plex Mono',ui-monospace,monospace}
.pv-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.pv-g{border-radius:12px;padding:10px;display:flex;align-items:center;gap:9px;background:var(--tint)}
.ring{width:40px;height:40px;position:relative;flex:none}
.ring .p{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;font-family:'IBM Plex Sans',sans-serif}
.pv-g .l{font-size:10px;color:var(--muted)}.pv-g .v{font-size:11px;font-weight:700}
.pv-svc{border-radius:12px;padding:10px 12px;background:var(--tint)}
.pv-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px}
.pv-row .d{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 7px var(--success)}
.pv-row .nm{font-weight:600}.pv-row .st{margin-left:auto;color:var(--success-text);font-size:10.5px;font-weight:600}
.pv-lean{position:absolute;right:-10px;bottom:-10px;background:linear-gradient(135deg,var(--accent-2),var(--accent-deep));
  color:var(--on-accent);font-weight:800;font-size:12px;font-family:'IBM Plex Sans',sans-serif;padding:8px 12px;border-radius:12px;
  box-shadow:0 12px 26px -10px var(--accent)}

/* pillars / feature grid */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pillar{position:relative;overflow:hidden;border-radius:12px;padding:22px;transition:border-color .2s,transform .2s,box-shadow .2s}
.pillar:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));transform:translateY(-2px);
  box-shadow:0 20px 40px -30px rgba(0,0,0,.5)}
/* shared hover language with the home bento: a thin accent seam lights the top */
.pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;opacity:0;transition:opacity .2s;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.pillar:hover::before{opacity:.85}
.pillar .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--accent-text);margin-bottom:12px;transition:border-color .2s,background .2s}
.pillar:hover .ic{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:var(--tint)}
.pillar h3{font-size:16px;margin-bottom:6px}
.pillar p{font-size:13.5px;color:var(--muted)}

/* compare */
.compare{border-radius:12px;overflow:hidden}
.crow{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center}
.crow>div{padding:14px 20px;border-bottom:1px solid var(--glass-brd)}
.chead{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:14px}
.chead.us{color:var(--accent-text)}
.cfeat{color:var(--muted);font-size:14px}
.cyes{color:var(--success-text);font-weight:700;display:flex;align-items:center;gap:6px}
.cno{color:var(--muted)}
.crow:last-child>div{border-bottom:0}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:1000px){.tiers .tier{padding:20px 18px}}
@media (max-width:640px){.tiers{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.tiers{grid-template-columns:1fr}}
.tier{border-radius:14px;padding:26px;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.tier:hover{transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(0,0,0,.5)}
.tier.hot{border:1.5px solid var(--accent);position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));
  box-shadow:0 28px 60px -34px color-mix(in srgb,var(--accent) 55%,transparent)}
.badge-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  /* Was a gradient from --accent-2 to --accent-deep. White on the LIGHT end read
     2.19:1 — failing across most of the badge — and a gradient hides that from any
     detector, because a background-image has no backgroundColor to measure. The
     design system already carries a fill/text pair chosen to pass in both themes;
     this simply uses it. */
  background:var(--btn-primary-bg);color:var(--on-accent);font-size:11px;font-weight:700;
  font-family:'IBM Plex Sans',sans-serif;padding:4px 12px;border-radius:999px;white-space:nowrap}
/* The plan name is an h2, not an h3: it sat directly under the page h1 and
   skipped a level, which reads to a screen-reader user as a missing section.
   The size is unchanged — a semantic fix must not move anything on screen. */
.tier h2.tier-name{font-size:18px;margin-bottom:4px;font-weight:700}
.tier h3{font-size:18px;margin-bottom:4px}
.tier .desc{font-size:13px;color:var(--muted);min-height:34px}
.tier .price{font-family:'Bricolage Grotesque','IBM Plex Sans',sans-serif;font-weight:800;font-size:36px;letter-spacing:-.02em;margin:10px 0;font-variant-numeric:tabular-nums}
.tier .price small{font-size:13px;color:var(--muted);font-weight:600}
.tier ul{list-style:none;margin:14px 0 22px;display:flex;flex-direction:column;gap:10px}
.tier li{font-size:13.5px;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.tier li svg{color:var(--success);margin-top:2px}
.tier .btn{width:100%;margin-top:auto}
.pricetoggle{display:flex;justify-content:center;gap:10px;align-items:center;margin-bottom:26px;color:var(--muted);font-size:14px;font-weight:600}
.switch{width:46px;height:26px;border-radius:999px;background:var(--track);border:1px solid var(--border);position:relative;cursor:pointer}
.switch[aria-checked="true"]{background:var(--accent)}
.switch .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .18s}
.switch[aria-checked="true"] .knob{left:22px}
.save{color:var(--success-text);font-weight:700;font-size:12px}

/* steps (migrate) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.step{border-radius:12px;padding:22px;position:relative}
.step .n{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-family:'IBM Plex Sans',sans-serif;
  font-weight:800;display:grid;place-items:center;margin-bottom:12px}
.step h3{font-size:15px;margin-bottom:6px}
.step p{font-size:13px;color:var(--muted)}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:14px;padding:4px 18px;border:1px solid var(--glass-brd)}
.faq summary{list-style:none;cursor:pointer;padding:14px 0;font-family:'IBM Plex Sans',sans-serif;font-weight:700;
  font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{transition:transform .2s;color:var(--muted)}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq details p{color:var(--muted);font-size:14px;padding:0 0 16px}

/* CTA band */
.cta-band{position:relative;overflow:hidden;border-radius:18px;padding:52px 44px;text-align:center;margin:10px 0;
  background:radial-gradient(120% 140% at 50% -20%,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface))}
/* echo the home hero's nimbus grid so the marketing pages share one atmosphere */
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--glass-brd) 1px,transparent 1px),linear-gradient(90deg,var(--glass-brd) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% -10%,#000,transparent 62%);
          mask-image:radial-gradient(90% 70% at 50% -10%,#000,transparent 62%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-family:'Bricolage Grotesque','IBM Plex Sans',sans-serif;font-size:clamp(22px,4vw,30px);margin-bottom:10px;text-wrap:balance}
.cta-band p{color:var(--muted);margin-bottom:22px}

/* forms */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field .req{color:var(--danger)}
.input{width:100%;padding:12px 14px;min-height:46px;border-radius:11px;background:var(--surface);
  border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:15px;transition:border-color .16s}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--tint)}
textarea.input{min-height:130px;resize:vertical}
.err{color:var(--danger);font-size:13px;margin-top:6px}
.form-note{color:var(--muted);font-size:12.5px}
.alert{border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:18px;border:1px solid transparent}
.alert-ok{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success-text);border-color:var(--success)}

/* content pages (docs/blog/legal) */
.prose{max-width:760px;margin:0 auto;color:var(--text)}
.prose h2{font-size:24px;margin:28px 0 10px;text-align:left}
.prose h3{font-size:18px;margin:22px 0 8px}
.prose p{color:var(--muted);margin-bottom:14px}
.prose ul,.prose ol{color:var(--muted);margin:0 0 16px 22px;display:flex;flex-direction:column;gap:8px}
.prose code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;background:var(--surface-2);padding:2px 6px;border-radius:6px}
.prose pre{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px;overflow-x:auto;margin-bottom:16px}
.prose pre code{background:transparent;padding:0}

/* footer */
footer{border-top:1px solid var(--glass-brd);margin-top:40px;padding:34px 0;color:var(--muted);font-size:13px;position:relative;z-index:1}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
/* h2, not h4: the footer column headings sat under the page h1/h2 and skipped a
   level. Same size and weight as before — the fix is for how the page is READ,
   not how it looks. */
.footgrid h2.foot-h,.footgrid h4{font-size:13px;color:var(--text);margin-bottom:12px;font-weight:700}
.footgrid a{display:block;padding:4px 0;color:var(--muted)}
.footgrid a:hover{color:var(--accent-text)}
.footbottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--glass-brd)}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:30px}
  .grid4,.steps{grid-template-columns:repeat(2,1fr)}
  .grid3,.grid2{grid-template-columns:1fr}
  .navlinks,.login-desktop{display:none}
  .navtoggle{display:grid}
  .footgrid{grid-template-columns:1fr 1fr}
  .crow{grid-template-columns:1.3fr .8fr .8fr}
  .crow>div{padding:12px 14px}
}
@media (max-width:560px){
  .grid4,.steps,.footgrid{grid-template-columns:1fr}
  .wrap{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* mobile menu */
.mobilemenu{display:none;padding:12px 24px 18px;border-bottom:1px solid var(--border);background:var(--surface)}
.mobilemenu.open{display:block}
.mobilemenu a{display:block;padding:11px 0;color:var(--text);font-weight:600;border-bottom:1px solid var(--glass-brd)}
.mobilemenu a:last-child{border-bottom:0}

/* ---- auth (login / register / password) ---- */
.auth-wrap{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;gap:16px}
.auth-card{width:100%;max-width:420px;border-radius:14px;padding:30px}
.auth-title{font-size:22px;font-weight:800;text-align:center;margin:8px 0 2px}
.auth-sub{text-align:center;font-size:14px;margin-bottom:20px}
.auth-foot{font-size:13px}
.auth-foot a{color:var(--accent-text);font-weight:600}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 16px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.auth-card .btn{width:100%}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;
  color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;padding:6px 8px;border-radius:8px}
.pw-toggle:hover{color:var(--accent-text);background:var(--tint)}

/* ---- portal (after login): quiet, panel-like ---- */
.portal{display:grid;grid-template-columns:240px 1fr;min-height:100dvh;position:relative;z-index:1}
/* Mobile off-canvas backdrop — hidden on desktop; only the mobile media query shows it. */
.scrim{display:none}
.pside{border-right:1px solid var(--border);background:var(--surface);padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100dvh}
.pside .brand{padding:8px 10px 14px;font-size:18px}
.pnav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--muted);
  font-weight:600;font-size:14px;min-height:42px}
.pnav a:hover{background:var(--tint);color:var(--text)}
.pnav a.active{background:var(--tint);color:var(--accent-text)}
.pnav a.disabled{opacity:.5;cursor:default}
.pnav a.disabled:hover{background:transparent;color:var(--muted)}
.pnav .soon{margin-left:auto;font-size:10px;font-weight:700;color:var(--muted);background:var(--surface-2);
  padding:2px 7px;border-radius:999px}
.pside .pfoot{margin-top:auto;border-top:1px solid var(--glass-brd);padding-top:8px;display:flex;flex-direction:column;gap:2px}
.pside .pfoot form{margin:0}
.pside .pfoot a,.pside .pfoot button{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;
  padding:10px 12px;border-radius:11px;font:inherit;font-size:14px;font-weight:600;text-align:left;text-decoration:none;
  color:var(--muted);background:transparent;border:0;cursor:pointer;transition:background .15s,color .15s}
.pside .pfoot a:hover,.pside .pfoot button:hover{background:var(--tint);color:var(--text)}
.pside .pfoot .i{width:18px;height:18px;flex:none}
.pside .pfoot .danger-row{color:var(--danger)}
.pside .pfoot .danger-row:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.pmain{padding:22px 28px 40px;max-width:1000px}
.ptop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.ptop h1{font-size:22px;font-weight:800}
.ptop .who{color:var(--muted);font-size:13px}
.pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pcard{border-radius:12px;padding:20px}
.pcard h3{font-size:15px;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.pcard h3 svg{color:var(--accent)}
.pcard .big{font-family:'IBM Plex Sans',sans-serif;font-weight:800;font-size:24px;margin:6px 0}
.pcard p{font-size:13.5px;color:var(--muted)}
.pcard .kv{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--glass-brd)}
.pcard .kv:last-child{border-bottom:0}
.pcard .kv b{font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.chip-none{background:var(--surface-2);color:var(--muted)}
.chip-ok{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success-text)}
.empty{border:1px dashed var(--border);border-radius:14px;padding:22px;text-align:center;color:var(--muted);font-size:14px}
.pmobtop{display:none}
@media (max-width:820px){
  .portal{grid-template-columns:1fr}
  .pside{position:fixed;left:0;top:0;width:250px;transform:translateX(-100%);transition:transform .2s;z-index:50;height:100dvh}
  .pside.open{transform:translateX(0)}
  .pmobtop{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);
    background:var(--surface);position:sticky;top:0;z-index:20}
  .pmain{padding:18px 16px 40px}
  .pcards{grid-template-columns:1fr}
  .scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
  .scrim.open{display:block}
}

/* ---- Checkout / store (Stage 4) ---- */
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.co-switch{display:inline-flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:4px;margin:2px 0 14px}
.co-switch a{padding:7px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;line-height:1}
.co-switch a.on{background:var(--accent);color:var(--on-accent)}
.co-switch .save{font-size:10.5px;opacity:.85}
.co-total{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;font-size:16px}
.co-total b{font-size:19px}
.co-total small{font-size:12px;color:var(--muted);font-weight:600}
.co-method{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-weight:600;font-size:14px;min-height:46px;cursor:pointer}
.co-methods{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.co-methods .co-method input{accent-color:var(--accent);width:18px;height:18px}

/* ---- Invoice table ---- */
.itable{width:100%;border-collapse:collapse;font-size:13.5px}
.itable th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--border)}
.itable td{padding:13px 14px;border-bottom:1px solid var(--border)}
.itable tr:last-child td{border-bottom:0}
.itable tbody tr:hover{background:var(--surface-2)}

@media (max-width:720px){
  .co-grid{grid-template-columns:1fr}
}

/* ---- Docs + blog (Stage 5) ---- */
.doclink{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--text);padding:8px;margin:-8px;border-radius:9px}
.doclink:hover{background:var(--surface-2)}
.doclink .i{color:var(--accent);flex:none;margin-top:3px}
.doclink b{display:block;font-size:14.5px;font-weight:600}
.doclink small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.5}

.docs-layout{display:grid;grid-template-columns:230px 1fr;gap:34px;padding-top:34px;align-items:start}
.docs-side{position:sticky;top:84px;font-size:14px}
.docs-side .docs-sec{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:16px 0 8px}
.docs-side ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.docs-side a{display:block;text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:8px;border-left:2px solid transparent}
.docs-side a:hover{color:var(--text);background:var(--surface-2)}
.docs-side a.on{color:var(--accent-text);border-left-color:var(--accent-text);background:var(--tint);font-weight:600}
.docs-main{min-width:0;max-width:760px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-text)}
.crumbs span{opacity:.5;margin:0 4px}
.docs-title{font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.docs-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:36px;padding-top:20px;border-top:1px solid var(--border);font-weight:600;font-size:14px}

/* Prose (rendered Markdown) */
.prose{color:var(--text);font-size:15.5px;line-height:1.75;max-width:70ch}
.prose h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:32px 0 12px}
.prose h3{font-size:17px;font-weight:700;margin:24px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.prose li{padding-left:2px}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:700}
.prose code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.86em;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.prose pre{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:0 0 18px}
.prose pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.6}
.prose blockquote{border-left:3px solid var(--accent);padding-left:14px;margin:0 0 16px;color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
.prose th,.prose td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
.prose hr{border:0;border-top:1px solid var(--border);margin:24px 0}

/* Blog */
.bloglist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;padding-top:20px}
.blogcard{display:flex;flex-direction:column;padding:22px;text-decoration:none;color:var(--text)}
.blogcard:hover{border-color:var(--accent)}
.blogdate{font-size:12.5px;color:var(--muted);font-weight:600}
.blogcard h2{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:8px 0}
.blogcard p{color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.readmore{color:var(--accent-text);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;margin-top:12px}
.post{max-width:720px;margin-inline:auto;padding-top:40px}
.post-title{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.post-meta{color:var(--muted);font-size:13.5px;margin-bottom:24px;display:flex;gap:6px}

@media (max-width:860px){
  .docs-layout{grid-template-columns:1fr}
  .docs-side{position:static;top:auto;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:8px}
}

/* ---- Admin dashboard (Stage 7) ---- */
.alert-err{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger)}
.btn.danger,.btn-ghost.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.admin-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);background:var(--tint);border:1px solid var(--glass-brd);border-radius:6px;padding:2px 6px;margin-left:4px}
.pnav-sec{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:14px 12px 6px}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:6px}
.stat{display:flex;align-items:center;gap:14px;padding:18px;text-decoration:none;color:var(--text)}
.stat:hover{border-color:var(--accent)}
.stat .ic{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--tint);color:var(--accent-text)}
.stat-v{font-size:24px;font-weight:800;letter-spacing:-.02em;font-family:'IBM Plex Sans',sans-serif}
.stat-l{font-size:13px;color:var(--muted);font-weight:600}

.admin-form{margin-bottom:18px}
.admin-form-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.admin-form-head h3{display:flex;align-items:center;gap:8px;font-size:15px}
.admin-form-foot{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fgrid .field{margin-bottom:14px}

.rep-list{display:flex;flex-direction:column;gap:12px}
.rep-row{position:relative;display:grid;grid-template-columns:150px 1fr;gap:10px 12px;padding:14px;padding-right:38px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.rep-row-3{grid-template-columns:1fr 1fr 1fr}
.rep-del{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.rep-del:hover{color:var(--danger);border-color:var(--danger)}

.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--border)}
.toggle-row:first-of-type{border-top:0}
.toggle-row .form-note{margin-top:2px}
.toggle-row b{font-size:14.5px}
.logo-preview{min-width:120px;min-height:52px;display:grid;place-items:center;padding:10px 16px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)}
.msg-list{display:flex;flex-direction:column;gap:14px}

@media (max-width:640px){ .fgrid{grid-template-columns:1fr} .rep-row,.rep-row-3{grid-template-columns:1fr} }

/* Announcement banner */
.annbar{background:var(--accent);color:var(--on-accent);text-align:center;font-size:13.5px;font-weight:600;padding:9px 16px}

/* ---- Audit fixes ---- */
.footbottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.footlegal{display:inline-flex;gap:16px}
.footlegal a{color:var(--muted)}
.footlegal a:hover{color:var(--accent-text)}
.btn-sm{min-height:44px}                 /* comfortable mobile touch target */
.tbtn,.navtoggle,#portalMenu{width:44px;height:44px}
.pricetoggle .save{visibility:hidden}    /* revealed by JS on Annual; hidden with no JS (monthly default) */
/* semantic comparison table */
table.compare{width:100%;border-collapse:collapse}
table.compare th,table.compare td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--border)}
table.compare thead th{font-size:13px;color:var(--muted);font-weight:700}
table.compare .us{color:var(--accent-text);font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
table.compare tbody th{font-weight:600;color:var(--text)}
table.compare td.cno{color:var(--muted)}
table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{border-bottom:0}

/* Language switcher (partials/lang-switcher) — was referenced with no styles. */
.langswitch{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:600}
.langswitch .langopt{padding:3px 8px;border-radius:6px;color:var(--muted);text-decoration:none;transition:.15s;line-height:1}
.langswitch a.langopt:hover{color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.langswitch a.langopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* --btn-primary-bg, not --accent: white on --accent is 4.02:1 in light mode. The
   two tokens differ for exactly this reason, and using the wrong one is the whole
   failure. */
.langswitch .langopt.active{color:var(--on-accent);background:var(--btn-primary-bg);cursor:default}