/* PhishStick site: enterprise design system (single light theme) */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Neutrals: cool slate, the enterprise default */
  --navy-950: #070d18;
  --navy-900: #0b1526;
  --navy-800: #132238;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #eef2f7;
  --slate-50: #f7f9fc;

  /* Accent: steel blue. One accent, used sparingly. */
  --accent: #1d4ed8;
  --accent-hover: #1a3fb0;
  --accent-soft: #eef3fe;
  --accent-border: #c7d7fb;

  /* Brand red stays reserved for the wordmark and risk signals only */
  --brand-red: #e11d2e;

  --bg: #ffffff;
  --bg-muted: var(--slate-50);
  --bg-dark: var(--navy-900);
  --surface: #ffffff;
  --text: #0f1b2d;
  --text-muted: var(--slate-500);
  --text-on-dark: #e8eef7;
  --text-on-dark-muted: #9fb0c7;
  --border: var(--slate-200);
  --border-strong: #cfd9e6;

  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
  --shadow: 0 1px 3px rgba(15, 27, 45, 0.08), 0 8px 24px rgba(15, 27, 45, 0.05);
  --shadow-lg: 0 2px 6px rgba(15, 27, 45, 0.08), 0 18px 48px rgba(15, 27, 45, 0.10);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 10px;
  --radius-sm: 6px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
p { margin: 0; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.accent { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--slate-50); border-color: var(--slate-400); }
.btn-lg { padding: 14px 26px; font-size: 16px; }

/* ---------- Nav (structure/behaviour unchanged) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 16px;
  transition: padding 0.25s ease;
}
.nav-shell {
  position: relative;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  margin: 0 auto;
  transition: max-width 0.25s ease, border-radius 0.25s ease,
    box-shadow 0.25s ease, border-color 0.25s ease, margin 0.25s ease;
}
.nav-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-radius: inherit;
}
.site-header[data-scrolled] { padding: 12px 16px 0; }
.site-header[data-scrolled] .nav-shell {
  max-width: 1060px;
  border-color: var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  padding: 0 8px;
}
.site-header[data-scrolled] .nav-shell .container { padding: 0 20px; }
.site-header[data-scrolled] .nav { height: 60px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  transition: height 0.25s ease;
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--text); }
.nav-logo svg { height: 22px; width: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--slate-700);
}
.nav-links a:hover { color: var(--accent); }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--slate-700);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  cursor: pointer;
}
.nav-dropdown-trigger:hover { color: var(--accent); }
.nav-dropdown-trigger .chevron { transition: transform 0.15s ease; }
.nav-dropdown:hover .nav-dropdown-trigger .chevron,
.nav-dropdown.open .nav-dropdown-trigger .chevron { transform: rotate(180deg); }

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 200;
}
.nav-shell.dropdown-open .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
}
.nav-dropdown-item:hover { background: var(--slate-50); }
.nav-dropdown-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-dropdown-icon svg { width: 16px; height: 16px; }
.nav-dropdown-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.nav-dropdown-sub { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { padding: 9px 18px; font-size: 14px; }
.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 8px 32px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 12px 4px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 88px 0 72px;
  background:
    linear-gradient(180deg, var(--slate-50) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Faint engineering grid: structure, not decoration */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--slate-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate-200) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.45;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  letter-spacing: -0.03em;
  max-width: 720px;
  overflow-wrap: break-word;
}
.hero h1 .accent { white-space: nowrap; }
.hero p.lead {
  max-width: 560px;
  font-size: 18px;
  color: var(--text-muted);
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-note { font-size: 13px; color: var(--text-muted); }
.hero-media { width: 100%; max-width: 620px; }
.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-video-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 960px) {
  .hero-inner {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 56px;
  }
  .hero-copy { align-items: flex-start; flex: 1 1 auto; min-width: 0; }
  .hero-ctas { justify-content: flex-start; }
  .hero h1, .hero p.lead { max-width: none; }
  .hero-media { flex: 0 0 560px; width: 560px; max-width: 560px; }
}

/* ---------- Logo strip ---------- */
.logo-strip { padding: 40px 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.logo-strip .label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 26px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 44px;
}
.logo-grid img {
  height: 26px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.15s, filter 0.15s;
  user-select: none;
  -webkit-user-drag: none;
}
.logo-grid img:hover { opacity: 1; filter: none; }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-muted { background: var(--bg-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
  margin: 0 0 48px;
}
.section-head.center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(26px, 3.2vw, 38px); }
.section-head p { color: var(--text-muted); font-size: 17px; }

/* Plain grid: text only, no icon badges, no card chrome. A hairline top
   rule per item is the only structure, deliberately understated. */
.plain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 40px;
}
.plain-grid > div { padding-top: 20px; border-top: 2px solid var(--accent); }
.plain-grid h3 { font-size: 16px; margin-bottom: 8px; }
.plain-grid p { color: var(--text-muted); font-size: 14.5px; }

/* ---------- Steps: a spec-sheet list, deliberately unlike the card grid ---------- */
/* Spec sheet: key/value rows, the way enterprise datasheets state facts. */
.spec {
  margin: 20px 0 0;
  padding: 4px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.spec > div + div { border-top: 1px solid var(--border); }
.spec dt { font-size: 13.5px; color: var(--text-muted); }
.spec dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.steps-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 940px) {
  .steps-layout { grid-template-columns: 380px 1fr; gap: 72px; align-items: start; }
  .steps-layout .section-head { position: sticky; top: 120px; margin-bottom: 0; }
}
.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step .num {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--text-muted); font-size: 14.5px; }

/* ---------- Stats: dark band, high-contrast credibility ---------- */
.stats-band {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 56px 40px;
  border-radius: var(--radius);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px 32px;
}
/* Cells stretch to the tallest in the row and the source is pushed to the
   bottom, so every attribution sits on one baseline regardless of how many
   lines the label above it runs to. */
.stats-grid > div {
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}
.stats-grid .value { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.stats-grid .label { margin-top: 8px; font-size: 14px; color: var(--text-on-dark-muted); line-height: 1.5; }
.stats-grid .source {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7ea6ff;
}

/* ---------- Split panel (product callout) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split-copy h2 { font-size: clamp(24px, 3vw, 34px); margin: 14px 0 16px; }
.split-copy p { color: var(--text-muted); font-size: 16px; }
.split-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.split-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.split-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.split-list strong { display: block; font-weight: 600; }
.split-list span { color: var(--text-muted); font-size: 14.5px; }

/* Placeholder for real product media (screenshot / short clip) not built yet.
   Deliberately inert: no fake UI, just a marker of what belongs here. */
.media-placeholder {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.media-placeholder span {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  max-width: 32ch;
}

/* ---------- Testimonial / quote ---------- */
.quote-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 44px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.quote-card p.q { font-size: 20px; font-weight: 500; line-height: 1.5; margin-bottom: 20px; }
.quote-card .who { display: flex; align-items: center; justify-content: center; gap: 12px; }
.quote-card .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ---------- Pricing ---------- */
.pricing-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 40px;
}
.pricing-intro div { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.pricing-intro svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.price-card.highlight { border-color: var(--accent); box-shadow: var(--shadow-lg); position: relative; }
.price-card.highlight::before {
  content: "Meest gekozen";
  position: absolute;
  top: -11px;
  left: 28px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.price-card h3 { font-size: 18px; }
.price-card .price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.price-card .price span { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-card li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-muted); align-items: flex-start; }
.price-card li svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }

/* The plan this visitor already pays for. Takes over the corner label from
   .highlight so a card never carries two badges at once, and goes green
   rather than accent-coloured: this is a statement of fact, not the thing
   we are steering them towards. */
.price-card.current {
  border-color: #0f9d58;
  box-shadow: none;
  position: relative;
}
.price-card.current::before {
  content: "Uw abonnement";
  position: absolute;
  top: -11px;
  left: 28px;
  background: #0f9d58;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.price-card .current-note {
  font-size: 13px;
  font-weight: 600;
  color: #0f9d58;
  margin: -8px 0 0;
}
.switch-note {
  max-width: 720px;
  margin: 0 auto 20px;
  text-align: center;
  font-size: 14px;
  min-height: 20px;
}
.switch-note.ok { color: #0f6b3c; }
.switch-note.error { color: var(--brand-red); }

.pricing-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.pricing-chips .chip-label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.pricing-chips .chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 4px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p { padding: 0 4px 22px; color: var(--text-muted); font-size: 15px; max-width: 70ch; }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: 64px 48px;
  border-radius: var(--radius);
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.cta-band h2 { font-size: clamp(24px, 3.4vw, 36px); margin-bottom: 14px; color: #fff; }
/* Matches the wordmark red; on the navy band it reads brighter than the
   #e11d2e used on white surfaces, so the brand cue survives the dark bg. */
.cta-band .accent { color: #ff3e3e; }
.cta-band p { color: var(--text-on-dark-muted); margin-bottom: 28px; font-size: 16px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 64px 0 28px; background: var(--bg-muted); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand svg { color: var(--text); }
.footer-brand p { color: var(--text-muted); font-size: 14px; margin-top: 14px; max-width: 280px; }
.footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin: 0 0 14px;
}
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--text-muted); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Status badge ---------- */
.status-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.status-badge:hover { color: var(--text); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-400); flex-shrink: 0; }
.status-dot.up { background: #0f9d58; }
.status-dot.partial { background: #e8a33d; }
.status-dot.down { background: var(--brand-red); }

/* ---------- Content pages ---------- */
.page-hero { padding: 64px 0 28px; }
.page-hero h1 { font-size: clamp(28px, 4vw, 42px); margin-top: 12px; }
.page-hero p { color: var(--text-muted); margin-top: 12px; max-width: 70ch; }
.prose { max-width: 820px; margin: 0 auto; padding: 24px 32px 88px; display: flex; flex-direction: column; gap: 28px; }
.prose h2 { font-size: 20px; margin-bottom: 10px; }
.prose p, .prose li { color: var(--text-muted); font-size: 15.5px; line-height: 1.7; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--accent); text-decoration: underline; }

.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 64px 24px;
}
.error-page .code { font-size: 84px; font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -0.04em; }
.error-page h1 { font-size: 24px; }
.error-page p { color: var(--text-muted); max-width: 460px; }

.leaderboard { width: 100%; border-collapse: collapse; }
.leaderboard th, .leaderboard td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; }
.leaderboard th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
.leaderboard .rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 56px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-state .icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.empty-state .icon svg { width: 22px; height: 22px; }
.empty-state h2 { font-size: 19px; }
.empty-state p { color: var(--text-muted); font-size: 15px; max-width: 46ch; }

/* ---------- Forms (demo / contact / sales) ---------- */
.demo-section { padding-top: 56px; }
.demo-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 900px) { .demo-layout { grid-template-columns: 1fr 1fr; gap: 64px; } }
.demo-copy h1 { font-size: clamp(28px, 4vw, 40px); margin: 14px 0; }
.demo-copy .lead { color: var(--text-muted); font-size: 17px; margin-bottom: 24px; }
.demo-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.demo-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-muted); }
.demo-points svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.demo-points a { color: var(--accent); text-decoration: underline; }

.demo-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.demo-form-card form[hidden] { display: none; }
.demo-form-card form { display: flex; flex-direction: column; gap: 18px; }
.demo-form-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.demo-form-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--slate-700); }
.demo-form-card input,
.demo-form-card select,
.demo-form-card textarea {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.demo-form-card input:focus,
.demo-form-card select:focus,
.demo-form-card textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.demo-form-card textarea { resize: vertical; }
.form-note { font-size: 12px; color: var(--text-muted); text-align: center; }
.form-note a { color: var(--accent); text-decoration: underline; }
.form-error { font-size: 13px; color: var(--brand-red); }
.form-error a { color: var(--brand-red); text-decoration: underline; }
.form-error[hidden] { display: none; }
/* honeypot: off-screen, never focusable by real users */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.demo-success[hidden] { display: none; }
.demo-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 24px 0; }
.demo-success .icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.demo-success .icon svg { width: 22px; height: 22px; }
.demo-success h3 { font-size: 19px; }
.demo-success p { color: var(--text-muted); font-size: 15px; }

/* ---------- Hall of Fame list (rendered by hall-of-fame.js) ---------- */
.hof-list[hidden], .empty-state[hidden] { display: none; }
.hof-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.hof-entry {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border);
}
.hof-rank { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.hof-body { min-width: 0; }
.hof-name { font-size: 15px; font-weight: 600; color: var(--text); }
.hof-name a { color: var(--accent); text-decoration: underline; }
.hof-finding { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.hof-severity {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--slate-100);
  color: var(--slate-700);
  white-space: nowrap;
}
.hof-severity[data-severity="critical"] { background: #fdecee; color: var(--brand-red); }
.hof-severity[data-severity="high"] { background: #fef2e6; color: #b45309; }
.hof-severity[data-severity="medium"] { background: var(--accent-soft); color: var(--accent); }
.hof-date { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 640px) {
  .hof-entry { grid-template-columns: 36px 1fr; row-gap: 8px; }
  .hof-severity, .hof-date { grid-column: 2; justify-self: start; }
}

/* ---------- Cookie consent ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  display: none;
  flex-direction: column;
  gap: 16px;
}
.cookie-banner.show { display: flex; }
.cookie-banner p { font-size: 14px; color: var(--text-muted); }
.cookie-banner .actions { display: flex; gap: 10px; justify-content: flex-end; }
.cookie-banner .actions .btn { padding: 9px 16px; font-size: 14px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .hero { padding: 56px 0 48px; }
  .stats-band { padding: 40px 24px; }
  .cta-band { padding: 48px 24px; }
  .demo-form-card { padding: 24px 20px; }
  .demo-form-card .form-row { grid-template-columns: 1fr; }
  .prose { padding: 24px 20px 64px; }
}

/* ---------- Meldknop (consumer site) additions ----------
   The rest of this file is copied verbatim from src/site so both properties
   look like the same company. Only what the consumer site genuinely needs
   extra lives below. */

/* The `hidden` attribute has to actually hide. The UA rule behind it is only
   `[hidden] { display: none }`, which loses to any author rule that sets a
   display, and this file sets plenty (`.btn` is inline-flex, `.account-grid`
   is grid). So `el.hidden = true` in JS silently did nothing on exactly the
   elements it mattered for: the logged-out account page rendered its whole
   content grid, and a member saw the owner-only "Beheer betaling" button.
   One rule here beats a per-component `[hidden]` patch every time it bites
   (there are already three of those above, in the shared block). */
[hidden] { display: none !important; }

/* Store cards. Before launch these are inert rather than links that 404:
   promising an install and not delivering one is exactly the behaviour this
   product teaches people to distrust. Built as cards rather than greyed-out
   buttons, because a disabled button reads as something being broken, while a
   card with a status reads as something on its way.

   At launch: swap each <div class="store-card"> for an <a href> to the store
   listing, and replace .store-state with a call to action. .store-card:hover
   already anticipates that. */
/* Browser logos are the official marks (public/images/browsers/), sourced the
   same way as the vendor logos on src/site. They are trademarks of Mozilla,
   Google and Microsoft, used here only to indicate which browsers the extension
   runs in, which is nominative use rather than endorsement.

   Grey until hovered: three saturated logos side by side would out-shout the
   page and pull attention away from the copy, while grey-to-colour makes the
   row feel alive without permanently competing with the accent colour. */
/* Sized so "Binnenkort beschikbaar" stays on one line. When it wrapped, the
   status dot ended up centred against a two-line block and drifted away from
   the text it belongs to, which read as a layout bug. */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}
.store-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.store-card:hover { border-color: var(--border-strong); }
a.store-card { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
a.store-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow); }

.store-logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  /* Slight fade with the desaturation so a grey logo does not read as a
     disabled or failed image. */
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.2s ease, opacity 0.2s ease;
  /* Deliberately left draggable and selectable. src/site sets
     draggable="false" on its vendor logos to stop accidental drags while
     scrolling a long logo strip; here there are only three and they behave
     like any normal image on the page. */
  -webkit-user-drag: element;
  user-select: auto;
  -webkit-user-select: auto;
}
.store-card:hover .store-logo,
.store-logo:hover {
  filter: none;
  opacity: 1;
}
/* Keyboard users get the same reveal, since hover alone would hide it.
   :focus-visible rather than :focus-within: a mouse click also focuses the
   link, and that focus outlives the click (the tab it opened doesn't take
   it away), so :focus-within kept the logo colored long after the cursor
   had moved on. :focus-visible only matches keyboard-driven focus. */
.store-card:focus-visible .store-logo { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .store-logo { transition: none; }
}

.store-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.store-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Status dot carries the "not yet" state, so the label does not have to shout
   it. Amber rather than red: pending, not broken. */
.store-state {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
}
.store-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9a441;
  flex-shrink: 0;
}
/* Live state, once a store card links out for real: green dot instead of
   amber, and the logo stays full colour rather than waiting for hover. */
.store-state.is-live::before { background: #3fa564; }

/* Numbered recovery steps in the FAQ. An ordered procedure, so it keeps its
   numbers instead of borrowing .split-list's checkmarks. */
.faq-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-muted);
  font-size: 15px;
}
.faq-steps li::marker { color: var(--accent); font-weight: 600; }

/* The consumer clip is 1920x1080. The enterprise hero box is 4:3, which would
   crop a 16:9 source top and bottom, so match the source ratio instead and let
   it fill the frame edge to edge. */
.hero-video { aspect-ratio: 16 / 9; }

/* "e-mail" was breaking across lines at the hyphen, which reads as a typo in a
   headline. Applied to headings and the hero lead only; body paragraphs are
   left alone, since the word is short and forcing it everywhere would just make
   narrow columns rag worse for no visible gain. */
.nowrap { white-space: nowrap; }

/* ---------- Login dialog (shared: upgrade, account, uitnodiging) ---------- */
dialog[data-login-dialog],
dialog[data-confirm-dialog] {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: 380px;
  width: calc(100% - 40px);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  background: var(--surface);
}
dialog[data-login-dialog]::backdrop,
dialog[data-confirm-dialog]::backdrop { background: rgba(10, 10, 10, 0.5); }
.login-dialog-inner { padding: 28px; }
.login-dialog-inner h3 { margin: 0 0 6px; font-size: 18px; }
.login-dialog-inner > p { margin: 0 0 18px; font-size: 14px; color: var(--text-muted); }
.login-dialog-inner input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  margin-bottom: 12px;
}
.login-dialog-inner input[readonly] { color: var(--text-muted); }
.login-dialog-inner .actions { display: flex; gap: 10px; margin-top: 6px; }
.login-dialog-inner .actions button { flex: 1; cursor: pointer; }
.login-dialog-inner .status { font-size: 13px; margin: 12px 0 0; min-height: 18px; }
.login-dialog-inner .status.error { color: var(--brand-red); }
.login-dialog-inner .status.ok { color: #0f9d58; }

/* ---------- Confirm dialog (shared: upgrade plan switch, etc.) ---------- */
.confirm-dialog-inner { padding: 28px; }
.confirm-dialog-inner h3 { margin: 0 0 10px; font-size: 18px; }
.confirm-dialog-inner p { margin: 0 0 10px; font-size: 14.5px; color: var(--text-muted); line-height: 1.5; }
.confirm-dialog-inner p:last-of-type { margin-bottom: 0; }
.confirm-dialog-inner .actions { display: flex; gap: 10px; margin-top: 20px; }
/* .btn is nowrap, which pushed a label carrying an amount straight out of
   the dialog. In here the button can grow taller instead. */
.confirm-dialog-inner .actions button {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  white-space: normal;
}

/* ---------- Account page ---------- */
.account-grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid item defaults to min-width:auto and so
     refuses to shrink below its own min-content, which let a long email
     address in the seat list push the whole card wider than the phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}
.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.account-card h2 { font-size: 19px; margin: 0 0 4px; }
.account-card > p.sub { margin: 0 0 20px; font-size: 14px; color: var(--text-muted); }

/* Seats card gets its own icon-badge header instead of a bare <h2>, to match
   the weight of the seat rows below it. */
.account-card h2.with-icon { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.account-card h2.with-icon .icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.account-card h2.with-icon .icon-badge svg { width: 16px; height: 16px; }

.plan-headline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.plan-headline .tier { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.plan-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.plan-badge[data-status="active"] { background: #e7f7ee; color: #0f6b3c; }
.plan-badge[data-status="past_due"] { background: #fdf3e2; color: #8a5a10; }
.plan-badge[data-status="canceled"] { background: #fdecee; color: var(--brand-red); }

.account-meta { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--text-muted); margin-bottom: 22px; }
.account-meta strong { color: var(--text); font-weight: 600; }

/* Leaving a shared plan is the one destructive action on this page, so it
   reads as one: outlined rather than filled, since it is not the thing most
   people came here to do. */
.btn-danger { color: var(--brand-red); border-color: #f3c6cb; }
.btn-danger:hover { background: #fdecee; border-color: var(--brand-red); }
.account-card .btn:disabled { opacity: 0.6; }

/* Seat list. Each row is one person's own account, never a shared login,
   so the address is the identity shown rather than any nickname. */
.seat-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Four fixed columns rather than a flex row with space-between: that let the
   badge sit wherever the address happened to end, so no two rows lined up.
   Here the badge column and the action column are the same width on every
   row, and the address takes whatever is left. */
.seat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 14.5px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.seat-row:hover { border-color: var(--border-strong); }
.seat-row .seat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  text-transform: uppercase;
}
.seat-ident { display: flex; flex-direction: column; min-width: 0; }
.seat-row .seat-email { overflow-wrap: anywhere; line-height: 1.35; }
.seat-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
/* Reserved even when empty, so the addresses in rows with and without a
   button still start and end on the same vertical lines. */
.seat-action { display: flex; justify-content: flex-end; }

/* The owner is the person reading this page, so their row is marked rather
   than left to be picked out of the list by address. */
.seat-row[data-kind="owner"] { background: var(--accent-soft); border-color: var(--accent-border); }
.seat-row[data-kind="owner"] .seat-avatar { background: var(--accent); color: #fff; }

.seat-remove {
  appearance: none;
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-400);
  transition: background 0.15s ease, color 0.15s ease;
}
.seat-remove svg { width: 15px; height: 15px; }
/* Always visible: a control nobody can see is a control nobody can use. It
   sits in a muted grey so it reads as available rather than as a warning,
   and only turns red on hover/focus, at the point it is about to be used. */
.seat-remove:hover,
.seat-remove:focus-visible { background: #fdecee; color: var(--brand-red); }
.seat-remove:disabled { cursor: default; opacity: 0.4; }

.seat-state {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.seat-state[data-state="owner"] { color: var(--accent); background: #fff; }
.seat-state[data-state="active"] { color: #0f6b3c; background: #e7f7ee; }
.seat-state[data-state="pending"] { color: #8a5a10; background: #fdf3e2; }
.seat-state[data-state="noseat"] { color: var(--brand-red); background: #fdecee; }

/* Over the plan's capacity: still on the plan, but without a place on it, so
   the row reads as needing attention rather than as an error. */
.seat-row[data-kind="noseat"] { border-color: #f3c6cb; background: #fffafa; }
.seat-row[data-kind="noseat"] .seat-avatar { background: #fdecee; color: var(--brand-red); }

.seat-warning {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fdf3e2;
  border: 1px solid #f0dcb4;
  color: #8a5a10;
  font-size: 13.5px;
  line-height: 1.5;
}
.seat-row[data-kind="empty"] {
  border-style: dashed;
  color: var(--text-muted);
  background: transparent;
}
.seat-row[data-kind="empty"] .seat-avatar {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
}

/* Narrow screens: the badge drops under the address rather than squeezing
   the address down to a few characters. */
@media (max-width: 520px) {
  .seat-row { grid-template-columns: auto minmax(0, 1fr) 28px; }
  .seat-state { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* The owner's own seat, kept out of the list itself: it is a statement about
   the reader rather than another row of the same kind, and the control needs
   more room than the list's 28px action column. */
.seat-self {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--slate-50);
  font-size: 13.5px;
  color: var(--text-muted);
}
.seat-self-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.seat-self-btn:hover { color: var(--accent-hover); }
.seat-self-btn:disabled { color: var(--text-muted); cursor: default; }

.invite-form {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.invite-form:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.invite-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.invite-form input:focus { outline: none; }
.invite-form button {
  cursor: pointer;
  border-radius: 0;
  flex: none;
}
.invite-form button:disabled { cursor: not-allowed; }
/* The shared .form-note centres itself, which suits the login dialog but not
   a card whose heading, buttons and lists are all left-aligned. */
.form-note { font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.account-card .form-note { text-align: left; }
.form-note.error { color: var(--brand-red); }
.form-note.ok { color: #0f9d58; }

/* Usage meter: a plain bar, no percentages shouted at the user. */
.usage-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 12px; }
.usage-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }

.account-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.state-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 18px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: account-spin 0.8s linear infinite;
}
@keyframes account-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .state-spinner { animation-duration: 2.4s; }
}
.account-state h2 { color: var(--text); font-size: 20px; margin: 0 0 8px; }
.account-state p { margin: 0 0 20px; font-size: 15px; }

/* Post-checkout confirmation and the activating/canceled variants. */
.checkout-banner {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 14.5px;
  text-align: center;
}
.checkout-banner.success { background: #e7f7ee; color: #0f6b3c; border: 1px solid #b6e6cb; }
.checkout-banner.pending { background: #fdf3e2; color: #8a5a10; border: 1px solid #f0dcb4; }
.checkout-banner.canceled { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }