/* =======================================================================
   app.css — BLUE COMMAND. The entire stylesheet, one file, one request,
   served with a long cache lifetime.

   The look is a mission-control console: near-black navy, royal blue,
   scanlines, cut corners, corner brackets, monospace chrome. Deliberately
   not the dark-navy fintech screen every other copier ships.

   Three rules shaped everything below.

   1. The Content-Security-Policy has no 'unsafe-inline', font-src is 'self'
      and connect-src is 'self'. So: no inline <style>, no web font from a
      CDN, no framework. Every glow, bracket and sweep here is written by
      hand out of gradients, clip-paths, filters and SVG. That is not a
      limitation worked around; it is why the page has nothing running on it
      that we did not put there.

   2. The chrome is allowed to shout. The data is not. Blue and violet are
      structure — rules, brackets, glow. Meaning is carried by four reserved
      status colours, each of which always ships with a WORD beside it, and
      by three chart series colours. A console where six things glow red
      teaches people to ignore red.

   3. Monospace for anything that is scanned — headings, labels, nav,
      buttons, tables, every number. A humanist sans for anything that is
      READ — paragraphs, the legal pages, help text. Mono prose at length is
      a costume, not a design.

   THREE BLUES, and the reason there are three rather than one:

     --neon   #3d84ff  what gets READ — links, the rule under a page title,
                       a gauge arc, the block before a card heading.
                       5.29:1 on the panel.
     button   #1763e8  the filled primary button ONLY. There the blue is the
                       background and the label is white, and white on
                       #3d84ff measures 3.5:1 — a fail. On #1763e8 it is
                       5.27:1. Same hue, opposite job, different step.
     hairline #6da4ff  every rgba() border, glow wash and backdrop tint.
                       Those sit at 5–16% alpha; the old cyan was luminous
                       enough to survive that, a royal blue is not, so the
                       low-alpha work uses a lighter step.

   Collapse those three into one and you lose either the button label or
   every border on the page. They were measured, not guessed.

   The chart series are the validated set for this surface:
       teal #0fa89c · violet #9b6bff · amber #bb8317   on #06080e
   All three clear the OKLab lightness band (0.48-0.67), the chroma floor,
   all-pairs CVD separation (worst dE 14.9 deutan / 12.4 tritan), the
   normal-vision floor (worst dE 19.9) and 3:1 contrast against the panel
   (re-checked after the surfaces were darkened; every margin went up).
   They do NOT follow the brand: a chart colour identifies a series, and
   repainting it every time marketing changes its mind is how a dashboard
   stops being readable. Do not "fix" these by eye.
   ======================================================================= */

/* ============================================================== tokens == */

:root {
  color-scheme: dark;

  /* surfaces, darkest first */
  --bg:         #020408;
  --bg-2:       #04060a;
  --surface:    #06080e;   /* the validated chart/panel surface */
  --surface-2:  #080c13;
  --surface-3:  #0d111b;
  --line:       rgba(109,164,255, .22);
  --line-2:     rgba(109,164,255, .40);
  --line-soft:  rgba(109,164,255, .10);

  /* text */
  --ink:        #e8eefc;
  --ink-2:      #9aa6bd;
  --ink-3:      #7c8aa3;

  /* the two structural accents. Never the sole carrier of meaning. */
  --neon:       #3d84ff;
  --neon-2:     #7c5cff;
  --neon-ink:   #ffffff;
  --neon-dim:   rgba(109,164,255, .09);
  --neon-glow:  0 0 18px -2px rgba(109,164,255, .75);
  --neon-glow2: 0 0 18px -2px rgba(124,92,255, .7);

  /* reserved status. Always printed with a word. */
  --ok:         #22c55e;
  --ok-dim:     rgba(0, 229, 143, .12);
  --warn:       #f5a524;
  --warn-dim:   rgba(255, 176, 32, .12);
  --err:        #ff5470;
  --err-dim:    rgba(255, 77, 109, .12);
  --live:       #22c55e;

  /* chart series — validated, charts only */
  --series-1:   #0fa89c;
  --series-2:   #9b6bff;
  --series-3:   #bb8317;
  --grid:       rgba(109,164,255, .12);

  /* geometry. Small radii only: this language cuts corners, it does not
     round them. */
  --r-xs:  2px;
  --r-sm:  3px;
  --r:     4px;
  --cut:   14px;          /* the diagonal on a panel corner */
  --cut-sm: 8px;
  --gap:   16px;
  --maxw:  1280px;
  --nav-h: 58px;

  --sh-1: 0 1px 2px rgba(0,0,0,.6);
  --sh-2: 0 8px 26px -10px rgba(0,0,0,.85);
  --sh-3: 0 24px 60px -24px #000;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* The daylight console. Same language — mono chrome, cut corners, brackets
   — inverted onto paper, for anyone who cannot work on a black screen. The
   accent steps down to a deep teal because #3d84ff on white is unreadable. */
:root[data-theme="light"] {
  color-scheme: light;

  /* The page is deliberately a good deal deeper than the cards. The cards stay
     pure white, so every contrast ratio measured against a card surface is
     unchanged; only the paper around them gets darker. */
  --bg:         #dde3ee;
  --bg-2:       #d3dbe9;
  --surface:    #ffffff;
  --surface-2:  #eef2f9;
  --surface-3:  #dfe6f2;
  --line:       rgba(15, 40, 90, .14);
  --line-2:     rgba(15, 40, 90, .28);
  --line-soft:  rgba(15, 40, 90, .07);

  --ink:        #0b1220;
  --ink-2:      #465268;
  /* Stepped down from #64708a with the page: the footer and every .muted line
     sit on --bg, and on the deeper paper #64708a fell to 3.86:1. #5a6579 is
     4.56:1 there and 5.88:1 on a card. */
  --ink-3:      #5a6579;

  /* On white the same hue has to go the other way: #3d84ff is only 2.6:1 on
     white, so the daylight accent steps down to #1257c9 (5.9:1) and the
     button fill goes deeper still. */
  --neon:       #1257c9;
  --neon-2:     #6134d6;
  --neon-ink:   #ffffff;
  --neon-dim:   rgba(18, 87, 201, .09);
  --neon-glow:  0 0 0 1px rgba(18, 87, 201, .28);
  --neon-glow2: 0 0 0 1px rgba(97, 52, 214, .28);

  --ok:         #0f7a3d;
  --ok-dim:     rgba(15, 122, 61, .10);
  --warn:       #8a5600;
  --warn-dim:   rgba(138, 86, 0, .12);
  --err:        #c1123a;
  --err-dim:    rgba(193, 18, 58, .10);
  --live:       #0f7a3d;

  --series-1:   #0d7f77;
  --series-2:   #6c3fd6;
  --series-3:   #96650f;
  --grid:       rgba(15, 40, 90, .12);

  --sh-1: 0 1px 2px rgba(11,18,32,.07);
  --sh-2: 0 8px 22px -12px rgba(11,18,32,.22);
  --sh-3: 0 24px 50px -24px rgba(11,18,32,.3);
}

/* =============================================================== reset == */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Read, not scanned: prose gets the sans. */
p, li, dd, .lead, .sub, .prose, .feature p, .callout p, blockquote {
  font-family: var(--sans);
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--mono);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
h1 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); letter-spacing: .01em; }
h2 { font-size: 1.02rem; letter-spacing: .06em; }
h3 { font-size: .92rem; letter-spacing: .06em; }
h4 { font-size: .84rem; letter-spacing: .06em; }

p { margin: 0 0 .85em; }
p:last-child { margin-bottom: 0; }

a { color: var(--neon); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

img, svg { max-width: 100%; }
small { font-size: .84rem; }

code, .mono, .key { font-family: var(--mono); font-size: .89em; }

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

::selection { background: rgba(109,164,255,.3); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid transparent; background-clip: content-box; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--neon); color: var(--neon-ink);
  padding: 10px 18px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* =========================================================== the field == */
/* Four decorative layers on one fixed element: a colour wash, a drifting
   aurora, the survey grid, and CRT scanlines. All aria-hidden, all
   composited, no script. The radar on the marketing hero is a separate
   element in the page that wants one. */

.backdrop {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1000px 560px at 8% -6%,  rgba(109,164,255,.16), transparent 62%),
    radial-gradient(900px 520px at 92% 4%,   rgba(124,92,255,.11), transparent 62%),
    radial-gradient(700px 480px at 50% 106%, rgba(109,164,255,.07), transparent 64%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 42%);
}
:root[data-theme="light"] .backdrop {
  background:
    radial-gradient(1000px 560px at 8% -6%,  rgba(18,87,201,.13), transparent 62%),
    radial-gradient(900px 520px at 92% 4%,   rgba(97,52,214,.09), transparent 62%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 42%);
}

.backdrop::before {
  content: ""; position: absolute; inset: -35%;
  background: conic-gradient(from 200deg at 32% 34%,
     rgba(109,164,255,.16), rgba(124,92,255,.10), rgba(109,164,255,.14), rgba(109,164,255,.16));
  filter: blur(96px);
  animation: drift 52s linear infinite;
}
:root[data-theme="light"] .backdrop::before { opacity: .5; }

.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(1100px 700px at 50% 0%, #000 0%, transparent 80%);
          mask-image: radial-gradient(1100px 700px at 50% 0%, #000 0%, transparent 80%);
}

/* The scanlines. A separate fixed element rather than another pseudo on
   .backdrop, because it sits ABOVE the content — that is what makes it read
   as a screen you are looking at rather than a texture behind things. It is
   1.5% black; anything stronger and body text starts to shimmer. */
.scanlines {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  background: repeating-linear-gradient(
      0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity: .5;
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .scanlines { display: none; }

@keyframes drift {
  from { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.14); }
  to   { transform: rotate(360deg) scale(1);    }
}

/* ============================================================== layout == */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.main { padding: 28px 22px 70px; position: relative; flex: 1 0 auto; }
.narrow { max-width: 580px; margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 18px; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
@media (min-width: 880px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

.pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  position: relative;
}
/* The rule under a page title runs out into a bright cyan tick — the eye
   picks up where the header ends without another box being drawn. */
.pagehead::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 62px; height: 1px;
  background: var(--neon); box-shadow: var(--neon-glow);
}
.pagehead h1 { margin: 0; }
.pagehead .sub { margin-top: 5px; }

.row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline { display: inline; }
.compact { font-size: .88rem; }
.muted { color: var(--ink-3); }
.sub { color: var(--ink-2); font-size: .86rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.pos { color: var(--ok); }
.neg { color: var(--err); }
.danger { color: var(--err); }
.lead { font-size: 1.02rem; color: var(--ink-2); line-height: 1.65; }
.hp { position: absolute; left: -9999px; }

/* =============================================================== header = */

.top {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h); flex: none;
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.top.stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  border-bottom-color: var(--line-2);
  box-shadow: 0 1px 0 rgba(109,164,255,.12), 0 10px 30px -20px #000;
}
.topwrap { display: flex; align-items: center; gap: 20px; width: 100%; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .92rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .dot {
  width: 9px; height: 9px; flex: none;
  background: var(--neon);
  box-shadow: 0 0 12px 1px var(--neon);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: beat 2.6s ease-in-out infinite;
}

.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
/* :not(.btn) matters. `.navright a` is one class plus one type, which OUTRANKS
   `.btn-primary` — without the exclusion this rule repaints the header's
   "Create account" button in --ink-2, i.e. pale grey text on a cyan fill, and
   the site's main conversion button becomes the least readable thing on the
   page. Buttons in the bar are buttons; only bare links are nav links. */
.nav a, .navright a:not(.btn), .navright .linkish {
  position: relative;
  padding: 7px 11px;
  color: var(--ink-2);
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.nav a:hover, .navright a:not(.btn):hover, .navright .linkish:hover {
  color: var(--neon); background: var(--neon-dim); text-decoration: none;
}
.nav a.on { color: var(--neon); }
.nav a.on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0;
  height: 2px; background: var(--neon); box-shadow: var(--neon-glow);
}

.navright { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.navright .who {
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-3); font-size: .72rem; letter-spacing: .06em; text-transform: none;
}

.linkish {
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink-2);
}

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  cursor: pointer; transition: color .15s, border-color .15s, box-shadow .2s;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.iconbtn:hover { color: var(--neon); border-color: var(--neon); box-shadow: var(--neon-glow); }
.iconbtn svg { width: 16px; height: 16px; display: block; }
.iconbtn .i-sun { display: none; }
:root[data-theme="light"] .iconbtn .i-sun  { display: block; }
:root[data-theme="light"] .iconbtn .i-moon { display: none; }

.menubtn { display: none; }

.drawer {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 55;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: 18px 22px 40px; overflow-y: auto; display: none;
}
.drawer.open { display: block; animation: fade .18s var(--ease); }
.drawer a, .drawer .linkish {
  display: block; width: 100%; text-align: left;
  padding: 14px 12px; color: var(--ink);
  font-size: .88rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.drawer a.on { color: var(--neon); }
.drawer a::before { content: "› "; color: var(--neon); }
.drawer .row-actions { margin-top: 20px; }
.drawer .row-actions .btn { flex: 1; justify-content: center; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================== strips == */

.strip {
  position: relative; z-index: 50;
  padding: 9px 22px; text-align: center;
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.strip a { text-decoration: underline; text-underline-offset: 3px; }
.strip-err  { background: var(--err-dim);  color: var(--err);  border-bottom-color: var(--err); }
.strip-err a { color: var(--err); }
.strip-warn { background: var(--warn-dim); color: var(--warn); border-bottom-color: var(--warn); }
.strip-warn a { color: var(--warn); }
.strip-info { background: var(--neon-dim); color: var(--neon); border-bottom-color: var(--line-2); }
.strip-info a { color: var(--neon); }

.flash {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; margin-bottom: 20px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  font-size: .88rem;
  animation: rise .3s var(--ease) both;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.flash::before {
  content: ""; width: 7px; height: 7px; margin-top: 7px; flex: none;
  background: currentColor; box-shadow: 0 0 10px 1px currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.flash-ok   { color: var(--ok);   border-color: var(--ok);   background: var(--ok-dim); }
.flash-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-dim); }
.flash-err  { color: var(--err);  border-color: var(--err);  background: var(--err-dim); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.callout {
  border: 1px solid var(--line-2); background: var(--neon-dim);
  border-left: 2px solid var(--neon);
  padding: 15px 17px; margin: 0 0 16px;
}
.callout:last-child { margin-bottom: 0; }
.callout-quiet { background: var(--surface-2); border-left-color: var(--line-2); }
.rowmsg { font-size: .84rem; color: var(--ink-2); margin-top: 8px; }

/* ============================================================= buttons == */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 20px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink);
  font: 600 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s, box-shadow .2s, background .15s, transform .1s;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.btn:hover { text-decoration: none; color: var(--neon); border-color: var(--neon); box-shadow: var(--neon-glow); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  background: var(--neon); border-color: var(--neon); color: var(--neon-ink);
  box-shadow: 0 0 24px -6px var(--neon);
}
.btn-primary:hover { color: var(--neon-ink); filter: brightness(1.12); box-shadow: 0 0 34px -4px var(--neon); }
.btn-ghost { background: transparent; }
.btn-danger { border-color: var(--err); background: var(--err-dim); color: var(--err); }
.btn-danger:hover { color: #fff; background: var(--err); border-color: var(--err); box-shadow: 0 0 22px -6px var(--err); }
.btn-lg { padding: 14px 28px; font-size: .84rem; --cut-sm: 11px; }
.btn-block { display: flex; width: 100%; }

/* =============================================================== cards == */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
  margin: 0 0 var(--gap);
  box-shadow: var(--sh-1);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.card:last-child { margin-bottom: 0; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

/* The corner brackets. Two 1px L-shapes in cyan, at the two square corners
   — the panel reads as a framed instrument rather than a div, and it costs
   two pseudo-elements and no markup. */
.card::before, .card::after {
  content: ""; position: absolute; width: 15px; height: 15px; pointer-events: none;
}
.card::before {
  top: -1px; right: -1px;
  border-top: 1px solid var(--neon); border-right: 1px solid var(--neon);
  box-shadow: 0 0 10px -2px var(--neon);
}
.card::after {
  bottom: -1px; left: -1px;
  border-bottom: 1px solid var(--neon); border-left: 1px solid var(--neon);
  box-shadow: 0 0 10px -2px var(--neon);
}

.card-glass {
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
}
.card-lift { transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.card-lift:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--sh-2); }

.card-alert { border-color: var(--err); }
.card-alert::before, .card-alert::after { border-color: var(--err); box-shadow: 0 0 10px -2px var(--err); }
.card-note { border-color: var(--warn); }

.cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 15px;
  padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.cardhead h2, .cardhead h3 { margin: 0; }
.cardhead h2::before, .cardhead h3::before {
  content: "▍"; color: var(--neon); margin-right: 8px;
  text-shadow: 0 0 10px var(--neon);
}
.cardhead .sub { margin-top: 3px; }
/* The "Manage" / "All" links in a panel header are chrome, so they wear the
   chrome's type rather than reading as body copy dropped into a title bar. */
.cardhead a, .cardhead .linkish {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding: 4px 8px; border: 1px solid transparent;
}
.cardhead a:hover, .cardhead .linkish:hover {
  color: var(--neon); border-color: var(--line-2); background: var(--neon-dim); text-decoration: none;
}
.cardhead .sub::before { content: none; }

.card.narrow, .tile.narrow { margin-left: auto; margin-right: auto; }

.bare { background: none; border: 0; box-shadow: none; padding: 0; clip-path: none; }
.bare::before, .bare::after { display: none; }

/* One MT5 account, as a panel. The left edge carries the state so a wall of
   eight can be scanned without reading a word. */
.acc { border-left: 2px solid var(--line-2); }
.acc:has(.pill-live) { border-left-color: var(--ok); box-shadow: -6px 0 20px -14px var(--ok); }
.acc:has(.pill-err)  { border-left-color: var(--err); box-shadow: -6px 0 20px -14px var(--err); }
.acc:has(.pill-warn) { border-left-color: var(--warn); box-shadow: -6px 0 20px -14px var(--warn); }
.acc .cardhead h2 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .95rem; }
.acc .kv { max-width: 470px; }
.acc .row-actions { margin-top: 16px; }

/* The destructive blocks. Collapsed, and deliberately plain: a delete
   control that looks exciting gets clicked. */
details.danger { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
details.danger > summary {
  cursor: pointer; color: var(--err); list-style: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
details.danger > summary::-webkit-details-marker { display: none; }
details.danger > summary::before {
  content: "▸"; transition: transform .18s var(--ease); display: inline-block;
}
details.danger[open] > summary::before { transform: rotate(90deg); }
details.danger > *:not(summary) { margin-top: 12px; }
details.danger p { color: var(--ink-2); font-size: .88rem; max-width: 70ch; }

/* =============================================================== pills == */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  vertical-align: middle;
}
.pill::before {
  content: ""; width: 5px; height: 5px; flex: none; background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.pill-ok    { color: var(--ok);    background: var(--ok-dim);   border-color: var(--ok); }
.pill-warn  { color: var(--warn);  background: var(--warn-dim); border-color: var(--warn); }
.pill-err   { color: var(--err);   background: var(--err-dim);  border-color: var(--err); }
.pill-muted { color: var(--ink-3); }
.pill-live  { color: var(--live);  background: var(--ok-dim);   border-color: var(--live); box-shadow: 0 0 16px -8px var(--live); }
.pill-live::before { animation: beat 2s ease-in-out infinite; }

@keyframes beat {
  0%, 100% { opacity: 1;  filter: drop-shadow(0 0 3px currentColor); }
  50%      { opacity: .35; filter: none; }
}

.dot { width: 7px; height: 7px; background: var(--ink-3); display: inline-block;
       clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ============================================================== tables == */

.tablewrap { overflow-x: auto; margin: 0 -20px -20px; padding: 0 20px 4px; }

.table { width: 100%; border-collapse: collapse; font-size: .82rem; font-family: var(--mono); }
.table th, .table td {
  padding: 10px 12px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
}
.table th {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--neon); white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.table tbody tr { transition: background .12s, box-shadow .12s; }
.table tbody tr:hover { background: var(--neon-dim); box-shadow: inset 2px 0 0 var(--neon); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; }
.table .mono { font-size: .78rem; color: var(--ink-2); }
.table .sub { font-family: var(--mono); font-size: .72rem; }

/* =============================================================== forms == */

label { display: block; font-size: .74rem; font-weight: 600; margin-bottom: 7px;
        letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=datetime-local], input[type=date], select, textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink);
  font: 14px/1.4 var(--mono);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
:root[data-theme="light"] input, :root[data-theme="light"] select,
:root[data-theme="light"] textarea { background: var(--surface); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--neon);
  box-shadow: 0 0 0 1px var(--neon), var(--neon-glow);
  background: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
/* The native date picker paints its own widget. color-scheme on :root already
   flips it to the dark set; this just stops the calendar button being the one
   bright white thing on the page. */
::-webkit-calendar-picker-indicator { filter: invert(1) hue-rotate(150deg) saturate(3); cursor: pointer; }
:root[data-theme="light"] ::-webkit-calendar-picker-indicator { filter: none; }
textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--neon) 50%),
                    linear-gradient(135deg, var(--neon) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* The form-field wrapper: <label class="field"><span>…</span><input><small>…</small></label> */
.field { display: block; margin-bottom: 17px; }
.field:last-child { margin-bottom: 0; }
.field > span {
  display: block; margin-bottom: 7px;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
}
.field > span em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.field > small {
  display: block; margin-top: 7px; font-family: var(--sans);
  font-size: .82rem; font-weight: 400; color: var(--ink-3); line-height: 1.55;
  text-transform: none; letter-spacing: 0;
}
.field-row { margin-bottom: 17px; }
.field-row:last-child { margin-bottom: 0; }
.field-row .sub { margin-top: 6px; display: block; }

.check {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font-family: var(--sans); font-size: .9rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  margin-bottom: 11px;
}
.check:last-child { margin-bottom: 0; }
.check input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--neon); }

fieldset { border: 0; padding: 0; margin: 0 0 18px; }
fieldset:last-child { margin-bottom: 0; }
legend {
  padding: 0; margin-bottom: 11px;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--neon);
}

/* A radio card — the whole block is the target, not a 13px circle. */
.pickers { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.picker {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin: 0;
  padding: 14px 15px; border: 1px solid var(--line-2); background: var(--surface-2);
  font-weight: 400; letter-spacing: 0; text-transform: none;
  transition: border-color .15s, background .15s, box-shadow .2s;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.picker:hover { border-color: var(--ink-3); }
.picker input { width: auto; flex: none; margin: 2px 0 0; accent-color: var(--neon); }
.picker > span { min-width: 0; }
.picker:has(input:checked) {
  border-color: var(--neon); background: var(--neon-dim); box-shadow: var(--neon-glow);
}
.picker strong {
  display: block; font-family: var(--mono); font-size: .8rem; color: var(--ink);
  letter-spacing: .08em; text-transform: uppercase;
}
.picker .sub { margin-top: 4px; }

/* ================================================= key/value and tiles == */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: .84rem; margin: 0;
      font-family: var(--mono); }
.kv dt { color: var(--ink-3); letter-spacing: .06em; }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.kv-wide { grid-template-columns: 1fr auto; }
.kv-inline { display: flex; flex-wrap: wrap; gap: 7px 22px; }
.kv-inline > div { display: flex; gap: 9px; align-items: baseline; }
.kv-inline dt, .kv-inline .k { color: var(--ink-3); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }

.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  padding: 16px 18px; box-shadow: var(--sh-1);
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.tile::before {
  content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 2px;
  background: var(--neon); box-shadow: var(--neon-glow);
}
.tile-k {
  display: block; font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 9px;
}
.tile-v {
  display: block; font-family: var(--mono);
  font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em;
  color: var(--ink); text-shadow: 0 0 22px rgba(109,164,255,.28);
}
:root[data-theme="light"] .tile-v { text-shadow: none; }
.tile .sub { margin-top: 6px; }
.tile .spark { margin-top: 12px; }
/* A stat tile reads label-above-value down the left edge. .num right-aligns
   inside table columns, which is correct there and wrong here. */
.tile .tile-v.num, .tile .muted { text-align: left; }

.stat-hero .tile-v { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); }

/* =============================================================== charts = */

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .axis text {
  fill: var(--ink-3); font-size: 10px; font-family: var(--mono);
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.chart .line {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px currentColor);
}
.chart .area { stroke: none; opacity: .1; }
.chart .end { stroke: var(--surface); stroke-width: 2; }
.chart .s1 { stroke: var(--series-1); color: var(--series-1); }
.chart .s1.area, .chart .s1.end { fill: var(--series-1); }
.chart .s2 { stroke: var(--series-2); color: var(--series-2); }
.chart .s2.area, .chart .s2.end { fill: var(--series-2); }
.chart .s3 { stroke: var(--series-3); color: var(--series-3); }
.chart .s3.area, .chart .s3.end { fill: var(--series-3); }
.chart .bar { fill: var(--series-1); }
:root[data-theme="light"] .chart .line { filter: none; }

.chart .cross { stroke: var(--neon); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.charttip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -118%);
  background: var(--surface-3); border: 1px solid var(--neon);
  padding: 8px 11px; font-family: var(--mono);
  font-size: .74rem; line-height: 1.5; white-space: nowrap;
  box-shadow: var(--sh-2), var(--neon-glow);
  opacity: 0; transition: opacity .12s;
}
.charttip.on { opacity: 1; }
.charttip b { font-variant-numeric: tabular-nums; font-weight: 600; }
.charttip .k { display: inline-block; width: 7px; height: 7px; margin-right: 7px; }
.charttip .muted { letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 11px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
}
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 3px; background: var(--ink-3); }
.legend .k1 { background: var(--series-1); box-shadow: 0 0 8px -1px var(--series-1); }
.legend .k2 { background: var(--series-2); box-shadow: 0 0 8px -1px var(--series-2); }
.legend .k3 { background: var(--series-3); box-shadow: 0 0 8px -1px var(--series-3); }

.spark { display: block; width: 100%; height: auto; overflow: visible; }
.spark polyline {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px currentColor);
}
.spark-bal { stroke: var(--series-1); color: var(--series-1); }
.spark-eq  { stroke: var(--series-2); color: var(--series-2); }
.spark .fill { stroke: none; opacity: .12; filter: none; }
:root[data-theme="light"] .spark polyline { filter: none; }

/* .key alone is the typed-out TOTP secret — mono text, no swatch.
   .key-bal / .key-eq are the legend swatches beside a sparkline. */
.key-bal, .key-eq {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.key-bal::before, .key-eq::before { content: ""; width: 14px; height: 3px; }
.key-bal::before { background: var(--series-1); box-shadow: 0 0 8px -1px var(--series-1); }
.key-eq::before  { background: var(--series-2); box-shadow: 0 0 8px -1px var(--series-2); }

/* A radial gauge. The arc is one stroked circle with a dash offset — no
   script, no library, and the value is printed in the middle so the ring is
   never the only place the number lives. */
.gauge { display: block; width: 100%; height: auto; }
.gauge .track { fill: none; stroke: var(--line); stroke-width: 6; }
.gauge .arc {
  fill: none; stroke: var(--neon); stroke-width: 6; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--neon));
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .9s var(--ease);
}
.gauge.is-warn .arc { stroke: var(--warn); filter: drop-shadow(0 0 6px var(--warn)); }
.gauge.is-err  .arc { stroke: var(--err);  filter: drop-shadow(0 0 6px var(--err)); }
.gauge .val {
  fill: var(--ink); font-family: var(--mono); font-size: 15px; font-weight: 600;
  text-anchor: middle; dominant-baseline: middle;
}
.gauge .cap {
  fill: var(--ink-3); font-family: var(--mono); font-size: 7px;
  letter-spacing: .16em; text-anchor: middle;
}
.gaugerow { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gaugecell { text-align: center; }
.gaugecell .tile-k { margin-top: 10px; margin-bottom: 0; }

/* A linear meter. The track is a dim step of the fill's own colour, so the
   state reads across the whole bar and not only where it is filled. */
.meter {
  display: block; height: 6px; overflow: hidden;
  background: var(--neon-dim); border: 1px solid var(--line-2);
}
.meter > span {
  display: block; height: 100%;
  background: var(--neon); box-shadow: 0 0 12px -2px var(--neon);
  transition: width .7s var(--ease);
}
.meter.is-warn > span { background: var(--warn); box-shadow: 0 0 12px -2px var(--warn); }
.meter.is-err  > span { background: var(--err);  box-shadow: 0 0 12px -2px var(--err); }

/* The fill width, as classes. style-src is 'self' with no 'unsafe-inline',
   so a style="width:75%" would be dropped by the browser and every bar would
   read empty. Five-percent steps are plenty for a plan ceiling. */
.meter > .w0 { width: 0; }
.meter > .w5 { width: 5%; }
.meter > .w10 { width: 10%; }
.meter > .w15 { width: 15%; }
.meter > .w20 { width: 20%; }
.meter > .w25 { width: 25%; }
.meter > .w30 { width: 30%; }
.meter > .w35 { width: 35%; }
.meter > .w40 { width: 40%; }
.meter > .w45 { width: 45%; }
.meter > .w50 { width: 50%; }
.meter > .w55 { width: 55%; }
.meter > .w60 { width: 60%; }
.meter > .w65 { width: 65%; }
.meter > .w70 { width: 70%; }
.meter > .w75 { width: 75%; }
.meter > .w80 { width: 80%; }
.meter > .w85 { width: 85%; }
.meter > .w90 { width: 90%; }
.meter > .w95 { width: 95%; }
.meter > .w100 { width: 100%; }

.usagebar { display: grid; gap: 8px; margin-bottom: 4px; max-width: 400px; }
.usagebar p { margin: 0; }

/* A checklist. The tick is drawn from two borders rather than a glyph, so it
   inherits the accent and never becomes a font-dependent box. */
.ticks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.ticks:last-child { margin-bottom: 0; }
.ticks li { position: relative; padding-left: 27px; color: var(--ink-2); font-size: .9rem; }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: .42em; width: 10px; height: 6px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.ticks .sub { display: block; }

/* The provisioning status line on an account panel — a sentence, not a bar. */
.progress {
  padding: 13px 15px; border: 1px solid var(--line-2);
  border-left: 2px solid var(--neon); background: var(--neon-dim);
  font-family: var(--sans); font-size: .89rem;
}
.progress strong { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--neon); }
.progress .muted { display: block; margin-top: 5px; font-size: .82rem; }

/* ============================================================ the flow == */

.flow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .88rem; }
.flow-end {
  display: inline-flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 12px 16px; border: 1px solid var(--line-2); background: var(--surface-2);
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.flow-end strong {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-arrow {
  position: relative; flex: 1 1 70px; min-width: 70px; height: 1px;
  background: var(--line-2);
}
.flow-arrow::after {
  content: ""; position: absolute; right: -1px; top: -3.5px;
  border-left: 8px solid var(--line-2);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.flow-live .flow-arrow { background: var(--neon); box-shadow: var(--neon-glow); }
.flow-live .flow-arrow::after { border-left-color: var(--neon); }
.flow-live .flow-arrow::before {
  content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px;
  background: #fff; box-shadow: 0 0 14px 3px var(--neon);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: travel 2.2s var(--ease) infinite;
}
@keyframes travel {
  0%   { left: 0; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

/* ============================================================ marketing = */

.hero { position: relative; isolation: isolate; padding: clamp(46px, 6.5vw, 92px) 0 clamp(32px, 4.5vw, 56px); }

/* The radar. One conic gradient rotating inside a circle, plus three rings.
   It says "this thing is watching your terminals" in a way no paragraph
   does, and it is nine lines of CSS with no image and no script. */
.radar {
  position: absolute; right: 0; top: -10px; width: 420px; height: 420px;
  border-radius: 50%; pointer-events: none; opacity: .95;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 52px, var(--line-2) 52px 53px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.5) 68%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.5) 68%, transparent 80%);
}
.radar::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(109,164,255,.55), rgba(109,164,255,.06) 34%, transparent 46%);
  animation: sweep 5s linear infinite;
}
.radar::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
@keyframes sweep { to { transform: rotate(360deg); } }
/* The hero text must always win: the radar sits behind it, and it is the
   first thing dropped when there is not room for both. */
.radar { z-index: -1; }
@media (max-width: 1080px) { .radar { display: none; } }

.hero h1 {
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
  line-height: 1.04; letter-spacing: .005em; margin: 0 0 .5em; max-width: 19ch;
  text-shadow: 0 0 40px rgba(109,164,255,.28);
}
:root[data-theme="light"] .hero h1 { text-shadow: none; }
.hero .lead { max-width: 58ch; margin: 0 0 26px; font-size: clamp(.98rem, .92rem + .3vw, 1.1rem); }
.hero .muted { max-width: 62ch; margin: 26px 0 0; font-size: .86rem; font-family: var(--sans); }

/* Gradient type. Without background-clip support the text simply renders in
   --neon, which is the whole point of the @supports guard. */
.grad {
  background: linear-gradient(100deg, var(--neon) 0%, var(--neon) 45%, var(--neon-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { color: var(--neon); -webkit-text-fill-color: currentColor; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 6px; margin-bottom: 22px;
  border: 1px solid var(--line-2); background: var(--neon-dim);
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.eyebrow b {
  padding: 3px 9px; background: var(--neon); color: var(--neon-ink);
  font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  box-shadow: 0 0 14px -3px var(--neon);
}

.statband {
  display: grid; gap: 1px; margin: 40px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  border: 1px solid var(--line); background: var(--line);
}
.statband > div {
  background: var(--surface); padding: 20px 18px; text-align: center; position: relative;
}
.statband b {
  display: block; font-family: var(--mono); font-size: 1.65rem; font-weight: 600;
  color: var(--neon); text-shadow: 0 0 20px rgba(109,164,255,.5);
}
:root[data-theme="light"] .statband b { text-shadow: none; }
.statband span {
  display: block; margin-top: 6px;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}

.feature .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 15px;
  border: 1px solid var(--line-2); background: var(--neon-dim); color: var(--neon);
  box-shadow: inset 0 0 18px -8px var(--neon);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.feature .ico svg { width: 20px; height: 20px; }
.feature.f-ok   .ico { color: var(--ok);   box-shadow: inset 0 0 18px -8px var(--ok);   background: var(--ok-dim); }
.feature.f-warn .ico { color: var(--warn); box-shadow: inset 0 0 18px -8px var(--warn); background: var(--warn-dim); }
.feature h2, .feature h3 { font-size: .9rem; }
.feature p { color: var(--ink-2); font-size: .9rem; margin: 0; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li {
  counter-increment: s; position: relative;
  padding: 16px 18px 16px 62px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.steps li::before {
  content: "0" counter(s);
  position: absolute; left: 16px; top: 15px;
  width: 30px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--neon); color: var(--neon); background: var(--neon-dim);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  box-shadow: inset 0 0 14px -6px var(--neon);
}
.steps strong {
  display: block; margin-bottom: 4px; font-family: var(--mono);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
}
.steps p { margin: 0; color: var(--ink-2); font-size: .89rem; }

/* The offer band. A promotion is chrome pretending to be data, so it gets the
   magenta accent — the second structural colour, used nowhere that carries
   state — and never the status greens and reds. The discount amount is the
   loud part; the code is set in mono so it can be read back over the phone. */
.offerband { display: grid; gap: 10px; margin: 0 0 var(--gap); }
.offer {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid rgba(124,92,255, .38);
  background: linear-gradient(100deg, rgba(124,92,255,.11), rgba(124,92,255,.02) 60%), var(--surface);
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}
.offer > div { flex: 1 1 260px; min-width: 0; }
.offer strong { display: block; font-family: var(--mono); font-size: .86rem; letter-spacing: .04em; }
.offer .sub { display: block; margin-top: 3px; }
.offer-tag {
  flex: none; padding: 5px 11px;
  background: var(--neon-2); color: #fff;
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--neon-glow2);
}
.offer-code {
  flex: none; padding: 7px 13px;
  border: 1px dashed rgba(124,92,255, .6); color: var(--neon-2);
  font-size: .88rem; font-weight: 700; letter-spacing: .18em;
  -webkit-user-select: all; user-select: all;
}
:root[data-theme="light"] .offer-tag { color: #fff; }

/* Pricing */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; }
.plan.best { border-color: var(--neon); box-shadow: 0 0 40px -22px var(--neon); }
.plan.best::before, .plan.best::after { box-shadow: 0 0 14px -1px var(--neon); }
.plan .tag {
  position: absolute; top: 0; right: 0;
  padding: 4px 11px; background: var(--neon); color: var(--neon-ink);
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; z-index: 2;
}
.plan .price {
  font-family: var(--mono); font-size: 1.9rem; font-weight: 600;
  line-height: 1; margin: 6px 0 3px; color: var(--ink);
  text-shadow: 0 0 20px rgba(109,164,255,.25);
}
:root[data-theme="light"] .plan .price { text-shadow: none; }
.plan .price small {
  font-size: .74rem; font-weight: 400; color: var(--ink-3);
  letter-spacing: .1em; text-transform: uppercase;
}
.plan ul { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 10px; font-size: .86rem; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.plan li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--ok); }
.plan .btn { margin-top: auto; }

/* FAQ */
.faq { display: grid; gap: 9px; }
.faq details { border: 1px solid var(--line); background: var(--surface-2); }
.faq summary {
  padding: 15px 18px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--neon); font-size: 1.1rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--neon-dim); color: var(--neon); }
.faq .body {
  padding: 0 18px 16px; color: var(--ink-2); font-family: var(--sans); font-size: .9rem;
  border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: -1px;
}

.cta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(34px, 5vw, 58px) 24px;
  border: 1px solid var(--line-2);
  background: radial-gradient(680px 300px at 50% -40%, rgba(109,164,255,.2), transparent 70%), var(--surface);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.cta h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }
.cta p { color: var(--ink-2); max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta .row-actions { justify-content: center; margin-top: 22px; }

/* ================================================================ auth == */

.authshell { min-height: calc(100vh - var(--nav-h) - 130px); display: grid; place-items: center; padding: 30px 0; }
.authcard {
  width: 100%; max-width: 440px; padding: 30px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3), 0 0 60px -30px var(--neon);
  animation: rise .38s var(--ease) both;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  position: relative;
}
.authcard::before, .authcard::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.authcard::before {
  top: -1px; right: -1px;
  border-top: 1px solid var(--neon); border-right: 1px solid var(--neon);
  box-shadow: 0 0 12px -2px var(--neon);
}
.authcard::after {
  bottom: -1px; left: -1px;
  border-bottom: 1px solid var(--neon); border-left: 1px solid var(--neon);
  box-shadow: 0 0 12px -2px var(--neon);
}
.authcard h1 { font-size: 1.3rem; margin-bottom: 8px; }
.authcard .sub { margin-bottom: 24px; }
.authcard .btn-block { margin-top: 8px; }
.authfoot {
  text-align: center; margin-top: 18px; font-size: .82rem; color: var(--ink-3);
  font-family: var(--mono); letter-spacing: .04em;
}

.codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px; margin: 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: .92rem;
}
.codes li {
  padding: 10px 12px; border: 1px solid var(--line-2); background: var(--bg-2);
  text-align: center; letter-spacing: .1em; color: var(--neon);
}
.qrwrap { display: inline-block; padding: 14px; background: #fff; border: 1px solid var(--line-2); }
.qr { display: block; width: 190px; height: 190px; }

/* =============================================================== prose == */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1em; }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--ink); }

.statusline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.statusline .pill { font-size: .78rem; padding: 6px 14px; }

/* ============================================================== footer == */

.foot {
  flex: none; margin-top: 56px; padding: 28px 0 38px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 74%, transparent);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--ink-3);
}
.footwrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footwrap nav { display: flex; gap: 4px; flex-wrap: wrap; }
.footwrap a { color: var(--ink-3); padding: 4px 9px; text-transform: uppercase; }
.footwrap a:hover { color: var(--neon); background: var(--neon-dim); text-decoration: none; }
.footnote {
  margin-top: 16px; font-family: var(--sans); font-size: .8rem;
  letter-spacing: 0; color: var(--ink-3); max-width: 80ch; line-height: 1.6;
}

/* ============================================================== motion == */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.d1.in { transition-delay: .07s; }
.reveal.d2.in { transition-delay: .14s; }
.reveal.d3.in { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .radar::before, .backdrop::before { animation: none; }
  .scanlines { display: none; }
}

/* ========================================================== responsive == */

@media (max-width: 900px) {
  .nav, .navright .who, .navright a, .navright .inline { display: none; }
  .navright .iconbtn { display: inline-flex; }
  .menubtn { display: inline-flex; }
  .main { padding-top: 22px; }
  .kv { grid-template-columns: 1fr auto; }
}

@media (max-width: 560px) {
  :root { --gap: 12px; --cut: 10px; }
  .wrap, .main { padding-left: 15px; padding-right: 15px; }
  .card { padding: 16px; }
  .tablewrap { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .table th, .table td { padding: 9px 10px; }
  .hero { padding-top: 32px; }
  .hero .row-actions .btn { width: 100%; }
  .statband > div { padding: 15px 12px; }
  .statband b { font-size: 1.3rem; }
}

/* ====================================================== print & a11y ==== */

@media print {
  .top, .drawer, .foot, .backdrop, .scanlines, .radar, .skip, .row-actions, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .tile { border: 1px solid #999; box-shadow: none; clip-path: none; break-inside: avoid; }
  .card::before, .card::after { display: none; }
}

/* Windows high-contrast strips colour, so anything carrying meaning through
   colour alone needs a border to survive. */
@media (forced-colors: active) {
  .pill, .btn, .card, .tile { border: 1px solid CanvasText; }
  .backdrop, .scanlines, .radar { display: none; }
  .chart .line, .spark polyline, .gauge .arc { stroke: CanvasText; filter: none; }
}


/* =======================================================================
   The filled primary button.

   It is the one place the accent is a BACKGROUND rather than ink, so it
   needs its own step: white on #3d84ff is 3.5:1 and fails, white on
   #1763e8 is 5.27:1 and passes. See the note at the top of this file.
   ======================================================================= */
.btn-primary {
  background: #1763e8;
  border-color: #1763e8;
  color: #ffffff;
  box-shadow: 0 0 24px -8px #1763e8;
}
.btn-primary:hover {
  background: #1a6dff;
  border-color: #1a6dff;
  color: #ffffff;
  box-shadow: 0 0 30px -6px #1a6dff;
}
.eyebrow b, .plan .tag, .offer-tag { color: #ffffff; }
.skip { background: #1763e8; color: #ffffff; }
:root[data-theme="light"] .btn-primary {
  background: #1257c9; border-color: #1257c9;
  box-shadow: 0 6px 18px -8px rgba(18,87,201,.6);
}
:root[data-theme="light"] .btn-primary:hover { background: #0f4bad; border-color: #0f4bad; }