/* ============================================================================
   StartupAPI — "Obsidian" design system
   One token-driven stylesheet shared by the customer portal (/) and the
   superadmin console (/console). Subject: a precision metering instrument for
   resold API capacity. The signature is the meter itself.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no external CDN) ---------- */
@font-face { font-family: "Geist"; src: url("/fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg:        #08090B;
  --bg-2:      #0B0D11;
  --surface:   #101216;
  --surface-2: #15181E;
  --surface-3: #1A1E25;
  --line:      #1E2127;
  --line-2:    #282C34;

  --ink:       #EDEEF0;
  --ink-dim:   #9AA0AA;
  --ink-faint: #686E78;

  /* Emerald-teal signature (matches the premium reference dashboard). */
  --accent:        #2DD4BF;
  --accent-dim:    #14B8A6;
  --accent-deep:   #06231F;
  --accent-glow:   rgba(45, 212, 191, 0.22);
  --on-accent:     #04231E;

  --ok:     #46D39A;
  --ok-bg:  rgba(70, 211, 154, 0.12);
  --warn:   #F5B544;
  --warn-bg:rgba(245, 181, 68, 0.12);
  --tip:    #A78BFA;
  --tip-bg: rgba(167, 139, 250, 0.12);
  --danger: #F2645A;
  --danger-bg: rgba(242, 100, 90, 0.12);

  --display: "Geist", system-ui, -apple-system, sans-serif;
  --sans:    "Geist", system-ui, -apple-system, sans-serif;
  --mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:    0 12px 32px -14px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 40px 90px -28px rgba(0, 0, 0, 0.85);
  --hairline:  inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --ease: cubic-bezier(0.22, 0.7, 0.25, 1);
  --sidebar-w: 252px;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* instrument-panel atmosphere: faint engraved grid + one cool pool of light */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 540px at 78% -8%, rgba(45,212,191, 0.05), transparent 60%),
    radial-gradient(800px 600px at -6% 108%, rgba(80, 120, 200, 0.04), transparent 55%),
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.015) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.015) 100%);
  background-size: 100% 100%, 100% 100%, 100% 44px, 44px 100%;
}
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.num  { font-variant-numeric: tabular-nums; }
.key-cell { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.key-cell .muted { color: var(--ink-dim); font-size: 0.82em; }

/* keyboard focus, everywhere */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Icons ---------- */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -3px; }
.ico-sm { width: 15px; height: 15px; }
.ico-lg { width: 22px; height: 22px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 10px 15px; font-family: inherit; font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
  transition: transform 0.08s var(--ease), background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn .ico { width: 16px; height: 16px; vertical-align: middle; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--on-accent);
  border-color: transparent; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(45,212,191,0.14), 0 8px 24px -12px var(--accent-glow);
}
.btn-primary:hover { background: linear-gradient(135deg, #3fe3cd, #17c3af); box-shadow: 0 0 0 1px rgba(45,212,191,0.28), 0 12px 30px -10px var(--accent-glow); }
.btn-outline { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); box-shadow: var(--hairline); }
.btn-outline:hover { border-color: var(--ink-faint); background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--ink-dim); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-danger { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 7px 11px; font-size: 13px; border-radius: 7px; }
.btn-block { width: 100%; }

/* ---------- Inputs ---------- */
.input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--ink); padding: 11px 13px;
  font-family: inherit; font-size: 14px; letter-spacing: -0.01em;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.input:hover { border-color: var(--ink-faint); }
.input:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-glow); }
.input::placeholder { color: var(--ink-faint); }
.input.mono { font-family: var(--mono); }
.field { display: grid; gap: 7px; }
.field-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- Wordmark ---------- */
.brand-logo {
  display: block;
  flex: none;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
}
.wordmark { display: inline-flex; align-items: center; gap: 11px; user-select: none; }
.wordmark .mark {
  width: 28px;
  height: 28px;
}
.wordmark .name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.wordmark .name .tick { color: var(--accent); }
.wordmark.lg .mark { width: 38px; height: 38px; }
.wordmark.lg .name { font-size: 19px; }

/* ---------- Auth ---------- */
.auth { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 392px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 32px; box-shadow: var(--shadow-lg), var(--hairline);
}
.auth-sub { color: var(--ink-dim); margin: 20px 0 22px; font-size: 14px; }
.auth-links { margin: 16px 0 0; text-align: center; font-size: 14px; }
.auth-links a { color: var(--accent); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-tabs {
  display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; margin-bottom: 22px;
}
.auth-tabs button {
  flex: 1; background: transparent; border: none; color: var(--ink-dim);
  padding: 9px; border-radius: 7px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: color 0.16s, background 0.16s;
}
.auth-tabs button:hover { color: var(--ink); }
.auth-tabs button.is-active { background: var(--surface-3); color: var(--ink); box-shadow: var(--hairline); }
.form { display: grid; gap: 16px; }
.form-hint { color: var(--ink-dim); font-size: 12.5px; margin: -4px 0 0; }
.form-error { margin: 14px 0 0; color: var(--danger); font-size: 13px; }
.auth-foot { margin: 22px 0 0; color: var(--ink-faint); font-size: 12px; letter-spacing: 0.04em; }

/* Login and registration use a self-contained dark brand canvas. Password
   recovery keeps the compact shared auth card above unchanged. */
#auth.auth-experience {
  --auth-bg: #05070b;
  --auth-panel: rgba(12, 16, 23, 0.94);
  --auth-panel-raised: #111721;
  --auth-line: rgba(141, 168, 194, 0.17);
  --auth-line-bright: rgba(72, 224, 215, 0.34);
  --auth-text: #f2f7f8;
  --auth-muted: #9aaab6;
  --auth-faint: #6d7d89;
  isolation: isolate;
  overflow: hidden auto;
  padding: clamp(36px, 5vw, 64px) 24px;
  background:
    radial-gradient(ellipse 58% 44% at 50% 38%, rgba(35, 121, 132, 0.11), transparent 72%),
    linear-gradient(180deg, #06080d 0%, var(--auth-bg) 58%, #05060a 100%);
  color: var(--auth-text);
}
#auth.auth-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126, 185, 193, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 185, 193, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.42) 72%, transparent 100%);
}
#auth.auth-experience::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--auth-bg), transparent 17%, transparent 83%, var(--auth-bg)),
    linear-gradient(180deg, transparent 72%, rgba(5,7,11,0.82));
}
#auth .auth-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
#auth .auth-orbit {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0.72;
}
#auth .auth-orbit-cyan {
  width: min(760px, 64vw);
  aspect-ratio: 1.45;
  left: -24%;
  top: 8%;
  border: 1px solid rgba(43, 221, 209, 0.17);
  box-shadow: inset -42px 0 90px rgba(25, 198, 190, 0.055), 0 0 80px rgba(34, 211, 203, 0.055);
  transform: rotate(-18deg);
}
#auth .auth-orbit-violet {
  width: min(700px, 58vw);
  aspect-ratio: 1.35;
  right: -22%;
  top: 18%;
  border: 1px solid rgba(133, 102, 255, 0.16);
  box-shadow: inset 38px 0 100px rgba(111, 75, 255, 0.06), 0 0 100px rgba(111, 75, 255, 0.05);
  transform: rotate(17deg);
}
#auth .auth-grid-mark {
  position: absolute;
  width: 17px;
  height: 17px;
  opacity: 0.42;
}
#auth .auth-grid-mark::before,
#auth .auth-grid-mark::after {
  content: "";
  position: absolute;
  background: rgba(69, 225, 215, 0.72);
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.24);
}
#auth .auth-grid-mark::before { left: 8px; top: 0; width: 1px; height: 17px; }
#auth .auth-grid-mark::after { left: 0; top: 8px; width: 17px; height: 1px; }
#auth .auth-grid-mark-a { left: calc(50% - 336px); top: 22%; }
#auth .auth-grid-mark-b { right: calc(50% - 348px); bottom: 18%; opacity: 0.24; }

#auth .auth-stage {
  width: min(100%, 468px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#auth .auth-home {
  color: var(--auth-text);
  margin-bottom: 31px;
}
#auth .auth-home .mark {
  filter: drop-shadow(0 0 18px rgba(45, 212, 191, 0.12));
}
#auth .auth-home .name { font-size: 18px; font-weight: 600; }
#auth .auth-brand {
  width: min(100%, 660px);
  max-width: 660px;
  margin-bottom: 29px;
  text-align: center;
}
#auth .auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  color: #75ddd5;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#auth .auth-kicker span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #45e1d6;
  box-shadow: 0 0 10px rgba(69, 225, 214, 0.7);
}
#auth .auth-brand h1 {
  margin: 0;
  color: var(--auth-text);
  font-family: var(--display);
  font-size: clamp(35px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0;
}
#auth .auth-title-line {
  display: block;
  white-space: nowrap;
}
#auth .auth-brand > p:last-child {
  max-width: 43ch;
  margin: 15px auto 0;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 1.65;
}

#auth .auth-panel {
  position: relative;
  width: 100%;
  max-width: none;
  overflow: hidden;
  padding: 29px;
  color: var(--auth-text);
  background:
    radial-gradient(110% 64% at 100% 0%, rgba(115, 82, 255, 0.07), transparent 54%),
    radial-gradient(90% 55% at 0% 0%, rgba(45, 212, 191, 0.055), transparent 58%),
    var(--auth-panel);
  border: 1px solid var(--auth-line);
  border-radius: 16px;
  box-shadow:
    0 32px 90px -42px rgba(0, 0, 0, 0.96),
    24px 0 82px -56px rgba(114, 76, 255, 0.78),
    -18px 0 72px -58px rgba(38, 219, 207, 0.66),
    inset 0 1px 0 rgba(255,255,255,0.055);
}
#auth .auth-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(65, 228, 216, 0.62), rgba(139, 103, 255, 0.48), transparent);
  box-shadow: 0 0 18px rgba(66, 221, 214, 0.24);
}
#auth .auth-panel::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -88px;
  top: 22px;
  border-radius: 50%;
  background: rgba(127, 86, 255, 0.12);
  filter: blur(32px);
  pointer-events: none;
}
#auth .auth-panel > * { position: relative; z-index: 1; }
#auth .auth-panel-head { margin-bottom: 22px; text-align: left; }
#auth .auth-panel-label {
  margin: 0 0 8px;
  color: #72d9d2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#auth .auth-panel-head h2 {
  margin: 0;
  color: var(--auth-text);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
#auth .auth-panel-head > p:last-child {
  margin: 8px 0 0;
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.55;
}
#auth .auth-tabs {
  gap: 3px;
  margin-bottom: 23px;
  padding: 4px;
  background: rgba(5, 8, 13, 0.82);
  border-color: rgba(123, 156, 179, 0.15);
  border-radius: 9px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.38);
}
#auth .auth-tabs button {
  min-height: 39px;
  padding: 9px 12px;
  color: #7f909c;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
}
#auth .auth-tabs button:hover { color: #d6e0e4; }
#auth .auth-tabs button.is-active {
  color: #ecfbfa;
  background: linear-gradient(180deg, rgba(26, 42, 49, 0.94), rgba(15, 28, 34, 0.94));
  border-color: rgba(67, 218, 208, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 16px -12px rgba(45,212,191,0.7);
}
#auth .auth-form { gap: 17px; }
#auth .field { gap: 8px; }
#auth .field-label {
  color: #a8b5bd;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
#auth .input {
  min-height: 49px;
  padding: 13px 14px;
  color: var(--auth-text);
  background: rgba(4, 8, 13, 0.8);
  border-color: rgba(132, 160, 180, 0.2);
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.38);
}
#auth .input:hover { border-color: rgba(115, 178, 188, 0.38); }
#auth .input:focus {
  color: var(--auth-text);
  background: rgba(4, 9, 14, 0.96);
  border-color: rgba(63, 222, 211, 0.72);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.11), 0 0 24px -14px rgba(45, 212, 191, 0.7);
}
#auth .input::placeholder { color: #566672; }
#auth #forgotPasswordLink {
  justify-self: end;
  margin: -6px 0 -2px;
  font-size: 12px;
}
#auth .auth-links a { color: #65d8d0; }
#auth .auth-links a:hover { color: #94ebe5; text-decoration: none; }
#auth #authHint { margin: -7px 0 -2px; color: var(--auth-faint); }
#auth #authSubmit {
  min-height: 50px;
  margin-top: 2px;
  color: #032a28;
  background: linear-gradient(135deg, #5aeadf 0%, #2dd4bf 54%, #21b9ad 100%);
  border-color: rgba(121, 246, 235, 0.58);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 14px 32px -18px rgba(45,212,191,0.82), inset 0 1px 0 rgba(255,255,255,0.34);
}
#auth #authSubmit:hover {
  background: linear-gradient(135deg, #76f2e8 0%, #3ee0cc 54%, #28c4b7 100%);
  box-shadow: 0 16px 36px -17px rgba(45,212,191,0.94), 0 0 0 1px rgba(73,231,219,0.22), inset 0 1px 0 rgba(255,255,255,0.42);
}
#auth .form-error {
  padding: 10px 12px;
  border: 1px solid rgba(242,100,90,0.24);
  border-radius: 8px;
  background: rgba(242,100,90,0.07);
}
#auth #authSuccess { margin-top: 14px; color: #69d8b0; }
#auth .auth-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 23px -29px -29px;
  padding: 17px 29px;
  color: var(--auth-faint);
  background: rgba(4, 7, 11, 0.42);
  border-top: 1px solid rgba(131, 159, 179, 0.12);
  font-size: 11.5px;
}
#auth .auth-panel-foot a { color: #6bded6; font-weight: 500; }
#auth .auth-panel-foot a:hover { color: #a0f3ed; }
#auth .auth-page-foot {
  margin: 20px 0 0;
  color: #53616b;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 600px) {
  #auth.auth-experience {
    min-height: 100svh;
    place-items: start center;
    padding: 28px 16px 32px;
  }
  #auth.auth-experience::before {
    background-size: 42px 42px;
    background-image:
      linear-gradient(rgba(126, 185, 193, 0.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(126, 185, 193, 0.075) 1px, transparent 1px);
  }
  #auth .auth-orbit-cyan { width: 112vw; left: -62%; top: 5%; opacity: 0.54; }
  #auth .auth-orbit-violet { width: 108vw; right: -66%; top: 28%; opacity: 0.48; }
  #auth .auth-grid-mark-a { left: 7%; top: 16%; }
  #auth .auth-grid-mark-b { right: 6%; bottom: 8%; }
  #auth .auth-home { margin-bottom: 23px; }
  #auth .auth-brand { width: 100%; max-width: 100%; margin-bottom: 23px; }
  #auth .auth-brand h1 { font-size: clamp(28px, 8.8vw, 39px); line-height: 1.06; }
  #auth .auth-title-line { white-space: normal; }
  #auth .auth-brand > p:last-child { margin-top: 12px; padding: 0 5px; font-size: 13px; line-height: 1.55; }
  #auth .auth-panel { padding: 24px 20px; border-radius: 14px; }
  #auth .auth-panel-head { margin-bottom: 20px; }
  #auth .auth-panel-head h2 { font-size: 21px; }
  #auth .auth-panel-head > p:last-child { font-size: 12.5px; }
  #auth .auth-tabs button { min-height: 42px; }
  #auth .input { min-height: 50px; font-size: 16px; }
  #auth #authSubmit { min-height: 51px; }
  #auth .auth-panel-foot {
    margin: 21px -20px -24px;
    padding: 16px 20px;
  }
}

@media (max-width: 360px) {
  #auth.auth-experience { padding-inline: 12px; }
  #auth .auth-panel { padding-inline: 17px; }
  #auth .auth-panel-foot { margin-inline: -17px; padding-inline: 17px; }
  #auth .auth-panel-foot span { display: none; }
  #auth .auth-panel-foot { justify-content: center; }
}

/* ============================================================================
   APP SHELL  — shared by both portals
   ========================================================================== */
.shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr;
  gap: 20px; padding: 22px 16px; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,18,22,0.6), rgba(8,9,11,0.6));
  backdrop-filter: blur(10px);
}
.sidebar-brand {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px 2px;
}
.nav { display: grid; align-content: start; gap: 3px; }
.nav-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--ink-dim);
  font-family: inherit; font-size: 14px; font-weight: 500; padding: 9px 11px; border-radius: 9px; cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-item .ico { color: var(--ink-faint); transition: color 0.15s; }
.nav-item:hover { color: var(--ink); background: var(--surface-2); }
.nav-item:hover .ico { color: var(--ink-dim); }
.nav-item.is-active { color: var(--ink); background: var(--surface-2); border-color: var(--line-2); box-shadow: var(--hairline); }
.nav-item.is-active .ico { color: var(--accent); }

/* ---- Sidebar tools (compact theme + collapse buttons) ---- */
.sidebar-tools {
  display: flex; align-items: center; gap: 4px;
}
.sidebar-tool-btn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--ink-dim); cursor: pointer; transition: all 0.15s;
}
.sidebar-tool-btn .ico { width: 16px; height: 16px; color: var(--ink-faint); }
.sidebar-tool-btn:hover {
  background: var(--surface-2); border-color: var(--line); color: var(--ink);
}
.sidebar-tool-btn:hover .ico { color: var(--ink-dim); }
.sidebar-tool-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ---- Account menu dropdown ---- */
.acct-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 180px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.4);
  padding: 6px; display: grid; gap: 2px;
}
.acct-menu-item {
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 6px;
  background: transparent; border: none; color: var(--ink); font-size: 14px;
  font-family: inherit; cursor: pointer; transition: background 0.12s;
}
.acct-menu-item:hover { background: var(--surface-2); }
.acct-menu-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

.sidebar-foot { display: grid; gap: 10px; }
.acct {
  display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface);
}
.acct-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.acct-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--accent-deep); color: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 600; text-transform: uppercase;
}
.acct-meta { min-width: 0; display: grid; }
.acct-label { font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.acct-email { font-size: 12.5px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { min-width: 0; max-width: 1200px; width: 100%; margin: 0 auto; padding: 30px 36px 90px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.page-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.page-title { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; margin: 9px 0 0; }
.page-note { color: var(--ink-dim); font-size: 14px; margin: 7px 0 0; max-width: 60ch; }
.page-note code, .table-foot code { font-family: var(--mono); color: var(--ink); font-size: 0.92em; }

.view { animation: rise 0.4s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view-head { margin-bottom: 22px; }

/* status dot in sidebar / headers */
.status-dot { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ok); }
.status-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.status-dot.is-down { color: var(--danger); }
.status-dot.is-down i { background: var(--danger); box-shadow: 0 0 9px var(--danger); }

/* ============================================================================
   SIGNATURE — the meter
   ========================================================================== */
.instrument {
  position: relative; border-radius: var(--r-lg); padding: 24px 26px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(45,212,191,0.06), transparent 55%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2); box-shadow: var(--shadow), var(--hairline);
  overflow: hidden;
}
.instrument::after { /* faint scanline texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.06) 3px 4px);
}
.instrument > * { position: relative; }
.inst-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.inst-readout { font-family: var(--mono); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.inst-readout.xl { font-size: 46px; }
.inst-readout.lg { font-size: 30px; }
.inst-readout.is-zero { color: var(--danger); }

.meter {
  position: relative; height: 16px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line-2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); overflow: hidden; display: flex;
}
.meter.tall { height: 22px; }
.meter-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  box-shadow: 0 0 18px var(--accent-glow); position: relative;
  transition: width 0.9s var(--ease);
}
.meter-fill.is-low  { background: linear-gradient(90deg, #c9921f, var(--warn)); box-shadow: 0 0 16px var(--warn-bg); }
.meter-fill.is-empty{ background: linear-gradient(90deg, #b23a33, var(--danger)); box-shadow: none; }
/* two-segment (admin: cost vs margin) */
.meter-seg { height: 100%; transition: width 0.9s var(--ease); }
.meter-seg.cost   { background: linear-gradient(180deg, #f0b54a, #c98a1e); }
.meter-seg.margin { background: linear-gradient(180deg, var(--accent), var(--accent-dim)); box-shadow: 0 0 18px var(--accent-glow); }
.meter-ticks {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(8,9,11,0.7) calc(10% - 1px) 10%);
}
.meter-foot { margin-top: 12px; color: var(--ink-dim); font-size: 12px; font-family: var(--mono); letter-spacing: 0.02em; }

.meter-legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.leg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-dim); }
.leg i { width: 10px; height: 10px; border-radius: 3px; }
.leg i.cost { background: var(--warn); }
.leg i.margin { background: var(--accent); }
.leg-total { margin-left: auto; font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--ink); }

.inst-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.inst-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.live-stamp { margin-left: 8px; color: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
.inst-facts { display: flex; gap: 28px; }
.inst-fact { display: grid; gap: 5px; }
.inst-fact .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.inst-fact .v { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.inst-fact .v.ok { color: var(--ok); }
@media (max-width: 720px) { .inst-grid { grid-template-columns: 1fr; gap: 20px; } .inst-facts { flex-wrap: wrap; gap: 16px 28px; } }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; box-shadow: var(--hairline);
}
.card + .card { margin-top: 14px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h3, .card h3 { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.card-head .note, .note { color: var(--ink-dim); font-size: 13px; margin: 4px 0 0; }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 18px; display: grid; gap: 9px; box-shadow: var(--hairline);
}
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-dim); border: 1px solid var(--line-2); }
.stat-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.stat-value { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stat-sub { font-size: 12px; color: var(--ink-faint); }
.stat.is-accent { border-color: rgba(45,212,191,0.3); background: linear-gradient(180deg, rgba(45,212,191,0.07), var(--surface)); }
.stat.is-accent .stat-value { color: var(--accent); }
.stat.is-accent .stat-ico { color: var(--accent); background: var(--accent-deep); border-color: rgba(45,212,191,0.25); }

/* ---------- Layout grids ---------- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: 14px; }
.grid-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack { display: grid; gap: 14px; }
.mb { margin-bottom: 14px; }

/* ---------- Tables ---------- */
/* overflow-x:auto (not overflow:hidden) so a table wider than its container
   scrolls horizontally instead of silently clipping trailing columns/actions
   off-screen; overflow-y:hidden preserves the rounded-corner clip. */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; overflow-y: hidden; box-shadow: var(--hairline); }
.table-wrap.bare { background: transparent; border-color: var(--line); }
.usage-table-wrap { max-height: min(430px, 52vh); overflow: auto; }
.usage-table-wrap .table thead th { position: sticky; top: 0; z-index: 1; }
.table { width: 100%; border-collapse: collapse; }
/* Wide tables with many columns (customers: checkbox + 9 data columns +
   2-button actions) need a min-width so the browser is forced to lay them
   out at their natural size and let .table-wrap's overflow-x:auto actually
   scroll, instead of squeezing every column (and the action buttons) down
   to illegibility inside width:100%. */
#usersTable { min-width: 1180px; }
.table th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; padding: 13px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.table td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.clickable { cursor: pointer; transition: background 0.12s; }
.table tbody tr.clickable:hover { background: var(--surface-2); }
.table .num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.table-foot { padding: 12px 18px; color: var(--ink-faint); font-size: 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.cell-main { display: flex; flex-direction: column; gap: 2px; }
.cell-main b { font-weight: 600; }
.cell-sub { color: var(--ink-faint); font-size: 12px; font-family: var(--mono); }
.customer-telegram-column { min-width: 142px; }
.customer-telegram-inline { display: none; }
.telegram-handle { overflow-wrap: anywhere; }

/* ---------- Empty / skeleton ---------- */
.empty { padding: 40px 18px; color: var(--ink-dim); text-align: center; font-size: 14px; display: grid; gap: 10px; justify-items: center; }
.empty .ico { width: 26px; height: 26px; color: var(--ink-faint); }
.empty.compact { padding: 22px 14px; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 6px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 12px; margin: 9px 0; }
.sk-row { height: 44px; margin: 0; border-radius: 0; border-bottom: 1px solid var(--line); }

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill); letter-spacing: 0.02em; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-ok   { background: var(--ok-bg);     color: var(--ok); }
.pill-off  { background: var(--danger-bg); color: var(--danger); }
.pill-warn { background: var(--warn-bg);   color: var(--warn); }
.pill-mute { background: var(--surface-3); color: var(--ink-dim); }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--ink-dim); border-radius: 6px; padding: 7px 11px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color 0.15s, background 0.15s; }
.seg button:hover { color: var(--ink); }
.seg button.is-active { background: var(--surface-3); color: var(--ink); box-shadow: var(--hairline); }
.seg-count { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: var(--bg-2); color: var(--ink-dim); font-size: 11px; font-weight: 600; line-height: 17px; vertical-align: middle; }
.seg button.is-active .seg-count { background: var(--surface-2, var(--bg-2)); color: var(--ink); }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pager-info { color: var(--ink-dim); font-size: 13px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.row-form { display: flex; gap: 10px; }
.row-form .input { flex: 1; min-width: 200px; }
.spacer { flex: 1; }

/* ---------- Redeem code form ---------- */
#view-redeem { width: 100%; max-width: 1040px; margin: 0 auto; }
.redeem-card { max-width: none; margin: 0; }
.redeem-form {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 12px; margin-top: 16px;
}
.redeem-label {
  font-size: 13px; font-weight: 500; color: var(--ink-dim);
  letter-spacing: -0.01em; text-align: center;
}
.redeem-input {
  text-align: center; font-size: 16px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 14px 16px;
}
.redeem-input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.redeem-input.is-success { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.redeem-btn { width: 100%; }
.redeem-feedback {
  margin: 4px auto 0; text-align: center; font-size: 13px; font-weight: 500;
  color: var(--ink-dim); letter-spacing: -0.01em;
}
.redeem-feedback.is-error { color: var(--danger); }
.redeem-feedback.is-success { color: var(--accent); }

/* ---------- Telegram trial reward rail ---------- */
.telegram-trial-card {
  max-width: none; margin: 20px 0 0; padding: 0; overflow: hidden;
  border-color: var(--line-2); border-radius: var(--r-lg); box-shadow: var(--hairline), var(--shadow);
}
.tg-trial-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr); grid-template-areas: "main reward" "main progress"; }
.tg-trial-main { grid-area: main; min-width: 0; padding: 36px 38px; align-self: center; }
.tg-trial-badge, .tg-trial-progress-label {
  display: inline-flex; color: var(--accent); font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: 0; line-height: 1; text-transform: uppercase;
}
.tg-trial-badge { padding: 6px 9px; background: var(--accent-deep); border: 1px solid var(--accent-glow); border-radius: var(--r-pill); }
.tg-trial-title { max-width: 570px; margin: 16px 0 0; font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: 0; }
.tg-trial-title span { color: var(--accent); font-family: var(--mono); font-size: 1.08em; }
.tg-trial-copy { max-width: 570px; margin: 14px 0 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.65; }
.tg-trial-benefits { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.tg-trial-benefits li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: var(--ink-dim);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 11.5px;
}
.tg-trial-benefits li span { color: var(--ok); font-size: 11px; font-weight: 700; }
.tg-trial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.tg-trial-actions .btn { min-height: 48px; }
.tg-trial-state-message { flex-basis: 100%; margin: 0; color: var(--ink-dim); font-size: 13px; }
.tg-trial-state-message.is-connecting { padding-left: 14px; border-left: 2px solid var(--accent); }
.tg-trial-success { flex-basis: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.tg-trial-success-icon {
  width: 34px; height: 34px; display: grid; place-items: center; color: var(--ok); background: var(--ok-bg);
  border: 1px solid var(--ok); border-radius: 50%; font-weight: 700;
}
.tg-trial-success strong { display: block; color: var(--ink); font-size: 16px; }
.tg-trial-success p { margin: 4px 0 0; color: var(--ink-dim); font-size: 13px; line-height: 1.5; }
.tg-trial-reward { grid-area: reward; min-width: 0; padding: 30px 28px 24px; background: var(--bg-2); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tg-trial-reward-amount { display: block; color: var(--accent); font-family: var(--mono); font-size: 58px; font-weight: 600; line-height: 0.95; letter-spacing: 0; }
.tg-trial-reward strong { display: block; margin-top: 8px; color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.tg-trial-reward p { max-width: 220px; margin: 8px 0 0; color: var(--ink-dim); font-size: 12.5px; line-height: 1.5; }
.tg-trial-progress-wrap { grid-area: progress; min-width: 0; padding: 22px 28px 30px; background: var(--bg-2); border-left: 1px solid var(--line); }
.tg-trial-progress-label { color: var(--ink-dim); }
.tg-trial-progress { position: relative; display: grid; gap: 0; list-style: none; margin: 16px 0 0; padding: 0; }
.tg-trial-progress::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 13px; width: 1px; background: var(--line-2); }
.tg-trial-progress-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; align-items: start; padding: 0 0 18px; color: var(--ink-dim); }
.tg-trial-progress-step:last-child { padding-bottom: 0; }
.tg-trial-progress-mark {
  position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line-2); border-radius: 50%;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.tg-trial-progress-step strong { display: block; color: inherit; font-size: 13px; font-weight: 500; line-height: 1.35; }
.tg-trial-progress-step p { margin: 3px 0 0; color: var(--ink-dim); font-size: 11.5px; line-height: 1.35; }
.tg-trial-progress-step.is-current { color: var(--ink); }
.tg-trial-progress-step.is-current .tg-trial-progress-mark { color: var(--accent); background: var(--accent-deep); border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-glow); }
.tg-trial-progress-step.is-complete { color: var(--ink-dim); }
.tg-trial-progress-step.is-complete .tg-trial-progress-mark { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); font-size: 0; }
.tg-trial-progress-step.is-complete .tg-trial-progress-mark::after { content: "\2713"; font-size: 12px; }
.telegram-trial-card[data-state="claimed"] { border-color: var(--ok); }
.telegram-trial-card[data-state="claimed"] .tg-trial-reward-amount { color: var(--ok); }
@media (max-width: 760px) {
  .telegram-trial-card { margin-top: 16px; }
  .tg-trial-layout { grid-template-columns: 1fr; grid-template-areas: "reward" "main" "progress"; }
  .tg-trial-main { grid-area: main; padding: 28px 22px; }
  .tg-trial-reward { grid-area: reward; padding: 25px 22px 22px; border-left: 0; }
  .tg-trial-reward-amount { font-size: 48px; }
  .tg-trial-progress-wrap { grid-area: progress; padding: 22px; border-top: 1px solid var(--line); border-left: 0; }
  .tg-trial-title { font-size: 26px; }
  .tg-trial-benefits { gap: 7px; }
  .tg-trial-actions, .tg-trial-actions .btn { width: 100%; }
}

/* ---------- Redeem confirmation modal ---------- */
.redeem-confirm-card { max-width: 420px; text-align: center; }
.redeem-confirm-card .modal-head { text-align: left; }
/* THE HERO: the amount about to be credited, large and obvious. */
.rc-amount {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); margin: 10px auto 6px; white-space: nowrap;
  text-shadow: 0 0 34px var(--accent-glow);
}
.rc-amount .rc-cur { color: var(--ink-dim); font-size: 0.5em; font-weight: 600; }
.rc-breakdown {
  display: grid; gap: 2px; margin: 14px 0 4px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  text-align: left;
}
.rc-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.rc-row dt { color: var(--ink-dim); font-size: 13px; margin: 0; }
.rc-row dd { margin: 0; font-size: 14px; color: var(--ink); }
.rc-row-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.rc-row-total dt { color: var(--ink); font-weight: 600; }
.rc-row-total dd { color: var(--accent); font-weight: 600; }
.redeem-confirm-card .modal-actions { margin-top: 6px; }
@media (max-width: 480px) {
  .rc-amount { font-size: 42px; }
  .redeem-confirm-card .modal-actions { flex-direction: column-reverse; }
  .redeem-confirm-card .modal-actions .btn { width: 100%; }
}

/* ---------- Balance gauge (compact, in tables) ---------- */
.gauge { height: 6px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; }
.gauge > i { display: block; height: 100%; background: var(--ok); transition: width 0.6s var(--ease); }
.gauge > i.is-low { background: var(--warn); }
.gauge > i.is-empty { background: var(--danger); }
.balance-cell { min-width: 150px; display: grid; gap: 6px; }
.balance-amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.balance-amt.is-zero { color: var(--danger); }

/* ---------- Recent / mini list ---------- */
.mini-list { display: grid; gap: 8px; }
.mini-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); padding: 11px 13px;
}
.mini-item .m-l { display: grid; gap: 2px; min-width: 0; }
.mini-item b { font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item span { color: var(--ink-faint); font-size: 12px; }
.mini-item strong { font-family: var(--mono); font-size: 13px; }

/* ---------- Endpoint / code ---------- */
.endpoint { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--r-sm); padding: 11px 13px; margin-bottom: 12px; }
.endpoint .e-k { color: var(--ink-dim); font-size: 13px; }
.endpoint code { color: var(--accent); font-family: var(--mono); font-size: 13px; word-break: break-all; }
.codeblock { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 15px 16px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); overflow-x: auto; white-space: pre; line-height: 1.75; }
.codeblock .tok-cmd { color: var(--accent); }
.codeblock .tok-var { color: var(--ink); }

/* ---------- Banner ---------- */
.banner { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(245,181,68,0.35); background: var(--warn-bg); color: var(--warn); border-radius: var(--r-sm); padding: 12px 15px; font-size: 13.5px; margin-bottom: 16px; }
.banner .ico { flex: none; }

/* ---------- Key cards ---------- */
.keys { display: grid; gap: 10px; }
.key-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); padding: 16px; display: grid; gap: 14px; }
.key-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.key-card .k-prefix { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.key-card h3 { margin: 4px 0 0; font-size: 15px; }
.key-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key-stats span { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; display: grid; gap: 3px; background: var(--surface); }
.key-stats b { font-family: var(--mono); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-stats small { color: var(--ink-faint); font-size: 11px; }
.key-policy code { display: block; color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key-policy { display: flex; flex-wrap: wrap; gap: 8px; }
.key-guard { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px; }
.key-guard svg { width: 14px; height: 14px; opacity: .7; flex: none; }
.key-card-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- Pricing cards ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; box-shadow: var(--hairline); }
.price-card .p-name { font-family: var(--mono); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-card .p-badge { justify-self: start; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--accent-deep); color: var(--accent); border: 1px solid var(--accent-dim); }
.price-card .p-official { color: var(--ink-faint); font-size: 11.5px; font-family: var(--mono); }
.price-card .p-rows { display: grid; gap: 10px; margin-top: 2px; }
.price-card .p-tier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.price-card .p-tier .p-conn { display: block; width: 100%; color: var(--accent); font-size: 11px; font-weight: 600; font-style: normal; }
.price-card .p-tier b { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.price-card .p-tier small { color: var(--ink-faint); font-size: 11px; }

/* ---------- SVG chart ---------- */
.chart { width: 100%; height: 190px; display: block; }
.chart .area { fill: url(#meter-grad); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .dot { fill: var(--accent); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .glabel { fill: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.chart-empty { height: 190px; display: grid; place-items: center; color: var(--ink-faint); font-size: 13px; }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(4,5,7,0.66); backdrop-filter: blur(3px); animation: fade 0.2s ease; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); background: var(--surface); border-left: 1px solid var(--line-2); padding: 26px 28px 48px; overflow-y: auto; box-shadow: var(--shadow-lg); animation: slideIn 0.32s var(--ease); }
@keyframes slideIn { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.drawer-balance { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; margin-bottom: 18px; }
.drawer-balance .balance-big { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.billing-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; color: var(--ink-faint); font-size: 12px; }
.billing-mini b { display: block; margin-top: 2px; color: var(--ink); font-family: var(--mono); font-weight: 600; }
.drawer-title { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 7px 0 0; word-break: break-all; letter-spacing: -0.01em; }
.drawer-section { margin-bottom: 26px; }
.drawer-section h3 { font-family: var(--display); font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.drawer-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer-section-head h3 { margin: 0; }
.telegram-detail { min-height: 20px; }
.telegram-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.telegram-detail-grid > div { min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.telegram-detail-grid > div:nth-child(odd) { border-right: 1px solid var(--line); }
.telegram-detail-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
.telegram-detail-grid dt { color: var(--ink-faint); font: 500 10px/1.2 var(--mono); text-transform: uppercase; }
.telegram-detail-grid dd { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 13px; }
.telegram-not-connected { margin: 0; color: var(--ink-dim); font-size: 13px; }
.customer-control-plane { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.control-plane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.control-plane-head h3 { margin: 6px 0 0; font-size: 20px; }
.control-plane-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); overflow: hidden; }
.control-plane-metric { min-width: 0; padding: 13px 14px; border-right: 1px solid var(--line); }
.control-plane-metric:last-child { border-right: 0; }
.control-plane-metric span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.control-plane-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.control-plane-warnings { display: grid; gap: 8px; margin-top: 12px; }
.control-plane-warning { border-left: 3px solid var(--amber); background: var(--bg-2); padding: 10px 12px; color: var(--text-2); font-size: 12px; }
.control-plane-tabs { display: flex; gap: 4px; margin: 18px 0 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.control-plane-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 9px 10px; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.control-plane-tabs button.is-active { color: var(--text); border-bottom-color: var(--accent); }
.control-plane-section { min-height: 170px; }
.control-plane-section[hidden] { display: none; }
.control-plane-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.control-plane-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.control-plane-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; min-width: 0; background: var(--surface); }
.control-plane-item b, .control-plane-item span { display: block; overflow-wrap: anywhere; }
.control-plane-item span { color: var(--muted); font-size: 11px; margin-top: 5px; }
.control-plane-json { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; font: 11px/1.55 var(--mono); color: var(--text-2); }
.custom-override { display: inline-flex; width: fit-content; margin-top: 6px; color: var(--amber); border: 1px solid color-mix(in srgb,var(--amber),transparent 58%); padding: 2px 6px; font-size: 10px; font-weight: 700; }
.control-plane-advanced { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.control-plane-advanced summary { cursor: pointer; color: var(--danger); font-weight: 600; font-size: 13px; margin-bottom: 12px; }

/* ---------- Superadmin subscription control center ---------- */
.subscription-control-head { align-items: center; }
.subscription-control-head .btn { min-height: 42px; }
.subscription-control-tabs { margin-bottom: 20px; }
[data-subscription-panel] { display: grid; gap: 18px; }
[data-subscription-panel][hidden] { display: none; }
.subscription-control-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--line); box-shadow: var(--hairline);
}
.subscription-control-metric { min-width: 0; padding: 16px; background: var(--surface); }
.subscription-control-metric span { display: block; color: var(--ink-dim); font-size: 12px; }
.subscription-control-metric strong { display: block; margin-top: 4px; font: 600 24px/1.15 var(--mono); }
.subscription-control-filters {
  display: grid; grid-template-columns: minmax(260px, 2fr) repeat(7, minmax(125px, 1fr));
  align-items: end; gap: 10px; margin-bottom: 14px;
}
.subscription-control-filters .input { min-width: 0; padding: 9px 10px; }
.subscription-control-table { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.subscription-control-table .table { min-width: 1500px; }
.subscription-control-row { cursor: pointer; }
.subscription-control-row td { vertical-align: top; }
.subscription-control-row td > strong, .subscription-control-row td > span { display: block; }
.subscription-control-row .pill { width: fit-content; margin-top: 6px; }
.subscription-control-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.subscription-plan-versions { margin-top: 24px; }
.subscription-plan-versions h2 { margin: 4px 0 0; font-size: 20px; }
.subscription-plan-version-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.subscription-plan-version { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--hairline); }
.subscription-plan-version > div:first-child { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.subscription-plan-version h3 { margin: 4px 0 10px; }
.subscription-plan-version dl, .subscription-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 14px 0 0; background: var(--line); }
.subscription-plan-version dl div, .subscription-facts div { min-width: 0; padding: 10px; background: var(--bg-2); }
.subscription-plan-version dt, .subscription-facts dt { color: var(--ink-dim); font-size: 11px; }
.subscription-plan-version dd, .subscription-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; font: 500 12px/1.45 var(--mono); }
.subscription-api-facts > div:last-child { grid-column: 1 / -1; }
.subscription-operations { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.subscription-operations > summary { cursor: pointer; color: var(--ink-dim); font-weight: 600; }
.subscription-operations .subadmin-grid { margin-top: 14px; }
.subscription-detail { display: grid; gap: 14px; }
.subscription-detail-hero { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r); background: linear-gradient(145deg, var(--surface-2), var(--surface)); }
.subscription-detail-hero h3 { margin: 5px 0 2px; font-size: 24px; }
.subscription-detail-hero p { margin: 0; color: var(--ink-dim); overflow-wrap: anywhere; font-size: 11px; }
.subscription-status-stack { display: grid; justify-items: end; gap: 7px; color: var(--ink-dim); font-size: 12px; }
.subscription-detail-grid, .subscription-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.subscription-manage-section { display: grid; gap: 12px; }
.subscription-detail-panel, .subscription-action-group { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.subscription-detail-panel h4, .subscription-action-group h4 { margin: 0; font-size: 14px; }
.subscription-null-state { margin: 14px 0 0; padding: 14px; border-left: 2px solid var(--accent); background: var(--surface); color: var(--ink-dim); font-size: 12.5px; }
.subscription-progress { height: 6px; margin-top: 12px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.subscription-progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.subscription-entitlements { background: var(--surface); }
.subscription-entitlement-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 14px; background: var(--line); }
.subscription-entitlement-item { min-width: 0; padding: 12px; background: var(--bg-2); }
.subscription-entitlement-item > span, .subscription-entitlement-item > strong, .subscription-entitlement-item > small { display: block; overflow-wrap: anywhere; }
.subscription-entitlement-item > span, .subscription-entitlement-item > small { color: var(--ink-dim); font-size: 10.5px; }
.subscription-entitlement-item > strong { margin: 5px 0; font: 600 12px/1.4 var(--mono); }
.subscription-action-group > p { min-height: 38px; margin: 7px 0 12px; color: var(--ink-dim); font-size: 12px; }
.subscription-action-group > div { display: flex; flex-wrap: wrap; gap: 7px; }
.subscription-key-list { display: grid; min-width: 0; gap: 8px; margin-top: 12px; }
.subscription-key-item { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; gap: 12px; align-items: center; padding: 11px; border: 1px solid var(--line); background: var(--surface); }
.subscription-key-details { min-width: 0; }
.subscription-key-details strong, .subscription-key-details small { display: block; overflow-wrap: break-word; word-break: normal; }
.subscription-key-prefix { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.subscription-key-item span, .subscription-key-item small { margin-top: 3px; color: var(--ink-dim); font-size: 10.5px; }
.subscription-key-actions { display: flex; min-width: 0; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.subscription-timeline { position: relative; display: grid; margin-top: 14px; padding-left: 14px; }
.subscription-timeline::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 4px; width: 1px; background: var(--line-2); }
.subscription-timeline article { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; padding: 0 0 16px 12px; }
.subscription-timeline article::before { content: ""; position: absolute; top: 5px; left: -13px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.subscription-timeline time { color: var(--ink-dim); font: 10.5px/1.4 var(--mono); }
.subscription-timeline p { margin: 3px 0; color: var(--ink-dim); font-size: 12px; }
.subscription-empty-state { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r); }
.subscription-empty-state h3, .subscription-empty-state p { margin: 5px 0 0; }
.subscription-log-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-top: 4px; }
.subscription-log-head h2 { margin: 5px 0 0; font-size: 21px; }
.subscription-log-filters { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(130px, .75fr) minmax(130px, .75fr); align-items: end; gap: 10px; }
.subscription-payment-filters { grid-template-columns: minmax(280px, 2fr) minmax(180px, 1fr) minmax(150px, .75fr); }
.subscription-control-table td small { display: block; max-width: 360px; overflow-wrap: anywhere; color: var(--ink-dim); }
.subscription-grant-card { width: min(680px, calc(100vw - 32px)); max-height: min(900px, calc(100vh - 32px)); overflow-y: auto; }
.subscription-grant-results { display: grid; max-height: 190px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.subscription-grant-results:empty { display: none; }
.subscription-grant-results > p { margin: 0; padding: 12px; }
.subscription-grant-customer { display: grid; gap: 3px; width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg-2); color: var(--ink); text-align: left; cursor: pointer; }
.subscription-grant-customer:last-child { border-bottom: 0; }
.subscription-grant-customer:hover { background: var(--surface-2); }
.subscription-grant-customer span, .subscription-grant-selected span { color: var(--ink-dim); font-size: 10.5px; overflow-wrap: anywhere; }
.subscription-grant-selected { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--accent), transparent 56%); border-radius: var(--r-sm); background: var(--accent-deep); }
.subscription-validity-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.subscription-validity-presets .is-active { border-color: var(--accent); color: var(--accent); }
.subscription-grant-validity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.action-modal-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--line); }
.action-modal-preview[hidden] { display: none; }
.action-modal-preview > div { min-width: 0; padding: 11px 12px; background: var(--bg-2); }
.action-modal-preview span, .action-modal-preview strong { display: block; overflow-wrap: anywhere; }
.action-modal-preview span { color: var(--ink-dim); font-size: 10.5px; }
.action-modal-preview strong { margin-top: 4px; font: 600 12px/1.45 var(--mono); }
.action-modal-preview .action-preview-impact { grid-column: 1 / -1; color: var(--ink-dim); font-size: 11.5px; }
@media (max-width: 620px) {
  .drawer-panel { width: 100%; padding: 20px 16px 40px; }
  .control-plane-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .control-plane-metric:nth-child(2) { border-right: 0; }
  .control-plane-metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .control-plane-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .subscription-control-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-control-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-control-search { grid-column: 1 / -1; }
  .subscription-plan-version-grid, .subscription-detail-grid, .subscription-action-grid { grid-template-columns: 1fr; }
  .subscription-entitlement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-log-filters, .subscription-payment-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .subscription-control-metrics, .subscription-control-filters, .subscription-entitlement-grid { grid-template-columns: 1fr; }
  .subscription-control-search { grid-column: auto; }
  .subscription-detail-hero, .subscription-empty-state { flex-direction: column; }
  .subscription-status-stack { justify-items: start; }
  .subscription-facts { grid-template-columns: 1fr; }
  .subscription-timeline article { grid-template-columns: 1fr; gap: 3px; }
  .subscription-action-group > p { min-height: 0; }
  .action-modal-preview { grid-template-columns: 1fr; }
  .action-modal-preview .action-preview-impact { grid-column: auto; }
  .subscription-control-head { align-items: stretch; flex-direction: column; }
  .subscription-control-head .btn { width: 100%; }
  .subscription-log-filters, .subscription-payment-filters, .subscription-grant-validity-grid { grid-template-columns: 1fr; }
}
.topup { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 9px; margin-bottom: 26px; }
.stacked-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.keyrow { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; }
.keyrow .kp { font-family: var(--mono); font-size: 13px; }
.keyrow .kn { color: var(--ink-faint); font-size: 12px; }
.keyrow .ks { margin-left: auto; }
.audit-list { display: grid; gap: 8px; }
.audit-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 3px; }
.audit-item b { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.audit-item span { color: var(--ink-faint); font-size: 12px; word-break: break-word; }
.small-code { margin-top: 10px; white-space: pre-wrap; word-break: break-all; }

/* ---------- Request transcripts ---------- */
.transcript-filter-grid { display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(150px, 0.8fr)) repeat(4, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.transcript-filter-actions { display: flex; gap: 8px; grid-column: 1 / -1; }
.transcript-customer-picker { position: relative; }
.transcript-customer-results { position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; right: 0; max-height: 240px; overflow-y: auto; padding: 5px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.transcript-customer-results button { display: block; width: 100%; border: 0; border-radius: 6px; padding: 10px 11px; background: transparent; color: var(--ink); font: 13px var(--sans); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.transcript-customer-results button:hover, .transcript-customer-results button:focus-visible { background: var(--surface-3); }
.transcript-table { min-width: 980px; }
.logs-subhead { margin: 26px 0 10px; font-size: 15px; font-weight: 600; }
.modal .transcript-modal-card { max-width: min(1100px, 96vw); width: 100%; height: min(820px, 92vh); padding: 24px; grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; }
.transcript-modal-head, .transcript-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.transcript-controls { align-items: center; }
.transcript-controls .doc-tabs { flex: 1; }
.transcript-content { min-height: 0; margin: 0; padding: 20px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #07090d; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font: 13px/1.65 var(--mono); letter-spacing: 0; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(4,5,7,0.74); backdrop-filter: blur(3px); animation: fade 0.2s ease; }
.modal-card { position: relative; width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-lg), var(--hairline); display: grid; gap: 9px; animation: pop 0.26s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-title { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 7px 0 0; letter-spacing: -0.01em; }
.modal-sub { color: var(--ink-dim); font-size: 13px; margin: 0 0 6px; }
.modal-form { gap: 14px; }
.modal-fields { display: grid; gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.modal-danger .modal-card, .modal-card.is-danger { border-color: rgba(242,100,90,0.45); }
.modal-card.is-danger .modal-title { color: var(--danger); }
.key-reveal { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid rgba(45,212,191,0.4); border-radius: var(--r-sm); padding: 12px 14px; margin: 4px 0 8px; box-shadow: 0 0 0 3px var(--accent-glow); }
.key-reveal code { flex: 1; font-family: var(--mono); font-size: 13px; color: var(--accent); word-break: break-all; }
.use-key-reveal { align-items: center; justify-content: space-between; margin: 0; }
.use-key-reveal > div { min-width: 0; display: grid; gap: 5px; }
.use-key-reveal code { display: block; max-width: 100%; }
.use-key-card { max-width: min(960px, 96vw); max-height: min(860px, 92vh); overflow: auto; gap: 16px; padding: 30px 36px 34px; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-faint); font-size: 32px; line-height: 1; cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.doc-tabs { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.doc-tabs button { position: relative; appearance: none; border: 0; background: transparent; color: var(--ink-dim); font: 600 15px var(--sans); padding: 12px 2px 13px; cursor: pointer; white-space: nowrap; }
.doc-tabs button:hover { color: var(--ink); }
.doc-tabs button.is-active { color: var(--accent); }
.doc-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: var(--r-pill); }
.doc-tabs-sub { gap: 24px; }
.use-key-input { margin-top: -4px; }
.snippet-stack { display: grid; gap: 16px; }
.snippet-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.snippet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); color: var(--ink-dim); font-family: var(--mono); font-size: 13px; }
.snippet-hint { color: var(--ink-faint); font-weight: 400; font-size: 0.85em; }
.snippet-card pre { margin: 0; padding: 22px 24px; overflow-x: auto; background: #070B15; }
.snippet-card code { font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--ink); white-space: pre; letter-spacing: 0; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; width: max-content; max-width: 92vw; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--ok); border-radius: var(--r-sm); padding: 11px 16px; font-size: 14px; box-shadow: var(--shadow); animation: toastin 0.24s var(--ease) both; }
.toast.err { border-left-color: var(--danger); }
.toast .ico { width: 16px; color: var(--ok); }
.toast.err .ico { color: var(--danger); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

[hidden] { display: none !important; }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .shell { display: block; }
  .sidebar {
    position: sticky; top: 0; height: auto; z-index: 20;
    grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 10px 14px;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px;
  }
  .sidebar-brand { grid-column: 1 / -1; grid-row: 1; padding: 0; justify-content: space-between; }
  .nav { grid-column: 1 / -1; grid-row: 2; grid-auto-flow: column; justify-content: start; overflow-x: auto; gap: 2px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { white-space: nowrap; padding: 8px 12px; scroll-snap-align: center; }
  .nav-item .ico { display: none; }
  .nav-label { display: none; }
  .main { padding: 22px 18px 70px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-equal { grid-template-columns: 1fr; }
  .table-wrap { overflow-x: auto; }
  .table { min-width: 560px; }
  #usersTable { min-width: 1040px; }
  .customer-telegram-column { display: none; }
  .customer-telegram-inline { display: grid; gap: 2px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
  .transcript-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Collapsing on mobile becomes a compact fixed chrome bar. The desktop
     collapsed rail rules must not turn into a tall vertical sidebar. */
  .shell.is-collapsed .sidebar {
    position: fixed; inset: 0 0 auto; width: 100%; height: 56px; z-index: 40;
    display: block; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line);
    background: var(--surface); box-shadow: var(--shadow);
  }
  .shell.is-collapsed .sidebar-brand { flex-direction: row; align-items: center; gap: 12px; height: 32px; padding: 0; }
  .shell.is-collapsed .sidebar-tools { flex-direction: row; align-items: center; gap: 4px; }
  .shell.is-collapsed .nav { display: none; }
}
@media (max-width: 540px) {
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .page-title { font-size: 25px; }
  .stats { grid-template-columns: 1fr; }
  .inst-readout.xl { font-size: 38px; }
  .key-stats { grid-template-columns: 1fr; }
  .topup { grid-template-columns: 1fr; }
  .row-form { flex-direction: column; }
  .leg-total { margin-left: 0; }
  .transcript-filter-grid { grid-template-columns: 1fr; }
  .transcript-filter-actions { flex-direction: column; }
  .transcript-controls { align-items: stretch; flex-direction: column; }
  .transcript-modal-card { height: 96vh; padding: 16px; }
  .telegram-detail-grid { grid-template-columns: 1fr; }
  .telegram-detail-grid > div, .telegram-detail-grid > div:nth-child(odd), .telegram-detail-grid > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .telegram-detail-grid > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================================
   STARTUPAPI LANDING 2026 (landing-*). Public homepage only.
   ============================================================================ */
.landing-page,
.support-theme {
  --landing-bg: #05070b;
  --landing-panel: #090d15;
  --landing-panel-2: #0d121c;
  --landing-line: rgba(157, 177, 205, 0.13);
  --landing-line-strong: rgba(152, 124, 255, 0.3);
  --landing-cyan: #54e7dd;
  --landing-cyan-bright: #87fff4;
  --landing-violet: #8b6cff;
  --landing-violet-bright: #ad8cff;
  --landing-grid-line: rgba(112, 140, 145, 0.037);
  --landing-text: #f5f7fb;
  --landing-muted: #9aa4b5;
  --landing-faint: #687386;
  --landing-radius: 8px;
  --landing-section: clamp(92px, 9vw, 142px);
  --landing-ease: cubic-bezier(0.22, 0.7, 0.25, 1);
}
.landing-document { scroll-behavior: smooth; }
.landing-page {
  min-width: 0;
  overflow-x: clip;
  color: var(--landing-text);
  background: var(--landing-bg);
  letter-spacing: 0;
}
body.landing-page::before {
  background:
    radial-gradient(920px 560px at 86% 8%, rgba(126, 79, 255, 0.055), transparent 70%),
    radial-gradient(780px 520px at 3% 56%, rgba(45, 214, 206, 0.035), transparent 72%),
    linear-gradient(var(--landing-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--landing-grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 72px 72px, 72px 72px;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.support-theme *,
.support-theme *::before,
.support-theme *::after { letter-spacing: 0; }
:root[data-theme="light"] body.landing-page { background: var(--landing-bg); color: var(--landing-text); }
.landing-page-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
.landing-page-atmosphere::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(900px 600px at 84% 8%, rgba(126, 79, 255, 0.115), transparent 68%),
    radial-gradient(760px 520px at 4% 48%, rgba(45, 214, 206, 0.065), transparent 70%);
}
.landing-page-atmosphere::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(to bottom, transparent 64%, rgba(5, 7, 11, 0.5) 84%, var(--landing-bg) 100%);
}
.landing-wave-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.98; }
.landing-page *, .landing-page *::before, .landing-page *::after { letter-spacing: 0; }
.landing-page main, .landing-page .site-footer, .landing-nav-wrap { position: relative; z-index: 1; }
.landing-page h1, .landing-page h2, .landing-page h3, .landing-page p { margin-top: 0; }
.landing-page h1, .landing-page h2, .landing-page h3 { color: var(--landing-text); }
.landing-page button { font: inherit; }
.landing-shell { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.landing-section { position: relative; isolation: isolate; padding: var(--landing-section) 0 0; }
.landing-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 20px 0 -70px;
  pointer-events: none;
  background: radial-gradient(700px 360px at 14% 48%, rgba(49, 205, 199, 0.035), transparent 72%);
}
#models::before { background: radial-gradient(780px 430px at 78% 44%, rgba(118, 77, 255, 0.085), transparent 72%); }
#pricing::before { background: radial-gradient(920px 460px at 50% 54%, rgba(56, 142, 255, 0.07), transparent 73%); }
#build::before, #faq::before { background: radial-gradient(720px 360px at 18% 50%, rgba(50, 221, 208, 0.045), transparent 72%); }
.landing-section-heading { max-width: 680px; margin-bottom: 46px; }
.landing-section-heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.landing-section-heading h2, .landing-section-copy h2 {
  margin: 12px 0 16px;
  font-size: clamp(38px, 4.1vw, 60px);
  line-height: 1.04;
  font-weight: 560;
}
.landing-section-heading > p, .landing-section-heading > div > p:last-child, .landing-section-copy > p {
  color: var(--landing-muted);
  font-size: 16px;
  line-height: 1.7;
}
.landing-kicker, .landing-plan-label {
  margin: 0;
  color: var(--landing-cyan);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}
.landing-kicker-center { text-align: center; }
.landing-kicker-marked { display: inline-flex; align-items: center; gap: 10px; }
.landing-kicker-marker {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(116, 232, 224, 0.28);
  border-radius: 6px;
  color: var(--landing-cyan-bright);
  background: linear-gradient(145deg, rgba(84,231,221,0.085), rgba(139,108,255,0.1));
  box-shadow: 0 0 18px rgba(84,231,221,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
  font-size: 12px;
  line-height: 1;
}
.landing-card {
  border: 1px solid var(--landing-line);
  border-radius: var(--landing-radius);
  background: linear-gradient(150deg, rgba(15, 20, 31, 0.97), rgba(7, 10, 17, 0.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  transition: transform 200ms var(--landing-ease), border-color 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .landing-card:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 207, 229, 0.28);
    box-shadow: 0 20px 50px -36px rgba(78, 226, 221, 0.55), 0 15px 50px -38px rgba(139,108,255,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
  }
}

/* Navigation */
.landing-nav-wrap {
  z-index: 50;
  height: 68px;
  border-bottom: 1px solid rgba(143, 164, 193, 0.09);
  background: rgba(5, 7, 11, 0.76);
  backdrop-filter: blur(16px);
}
.landing-nav { width: min(1280px, calc(100% - 64px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 38px; }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 15px; font-weight: 600; color: #f5f8fb; }
.landing-logo {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 12px rgba(56, 174, 255, 0.18));
}
.landing-brand-name { letter-spacing: 0; }
.landing-nav-menu { min-width: 0; flex: 1; display: flex; align-items: center; }
.landing-nav-links { display: flex; align-items: center; gap: 29px; margin: 0 auto; }
.landing-nav-links a, .landing-signin { color: #a9b1c0; font-size: 13px; font-weight: 500; transition: color 180ms ease; }
.landing-nav-links a:hover, .landing-signin:hover { color: #fff; }
.landing-nav-actions { display: flex; align-items: center; gap: 20px; }
.landing-nav-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--landing-line); border-radius: 6px; color: white; background: rgba(255,255,255,0.025); cursor: pointer; }
.landing-nav-toggle span { display: block; width: 19px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
.landing-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.landing-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.landing-nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

/* Buttons and links */
.landing-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 180ms var(--landing-ease), filter 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.landing-button-primary { color: #071011; background: linear-gradient(105deg, #62ebdf 0%, #7ee7ef 54%, #9f8cff 145%); box-shadow: 0 13px 28px -18px rgba(74, 239, 225, 0.85); }
.landing-button-secondary { color: #e8edf6; border-color: rgba(171, 185, 208, 0.2); background: rgba(255,255,255,0.025); }
.landing-button-small { min-height: 38px; padding: 0 15px; font-size: 12px; }
.landing-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.landing-button-primary:hover { box-shadow: 0 18px 35px -20px rgba(74, 239, 225, 0.9), 0 12px 30px -23px rgba(139,108,255,0.8); }
.landing-button-secondary:hover { border-color: rgba(159, 187, 222, 0.38); background: rgba(255,255,255,0.055); }
.landing-button:active { transform: translateY(0) scale(0.985); }
.landing-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--landing-cyan); font-size: 14px; font-weight: 600; white-space: nowrap; }
.landing-text-link span, .landing-workflow-grid a span { transition: transform 180ms ease; }
.landing-text-link:hover span, .landing-workflow-grid a:hover span { transform: translateX(3px); }

/* Hero */
.landing-hero {
  position: relative;
  min-height: 710px;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(700px 500px at 77% 36%, rgba(117, 77, 255, 0.09), transparent 70%),
    radial-gradient(520px 380px at 29% 36%, rgba(39, 190, 194, 0.045), transparent 70%);
}
.landing-hero::after { content: ''; position: absolute; z-index: 3; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(109, 226, 220, 0.12), rgba(139, 108, 255, 0.14), transparent 95%); pointer-events: none; }
.landing-hero-grid { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(520px, 1.16fr); align-items: center; gap: clamp(52px, 7vw, 102px); padding: 78px 0 96px; }
.landing-hero-copy { min-width: 0; position: relative; z-index: 2; }
.landing-pill {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 23px;
  padding: 7px 11px;
  border: 1px solid rgba(139, 108, 255, 0.22);
  border-radius: 999px;
  color: #aeb7c8;
  background: rgba(112, 79, 210, 0.055);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}
.landing-pill > span { width: 5px; height: 5px; border-radius: 50%; background: var(--landing-violet-bright); box-shadow: 0 0 10px rgba(173, 140, 255, 0.9); }
.landing-title { max-width: 650px; margin: 0; font-size: clamp(58px, 5.4vw, 82px); font-weight: 560; line-height: 0.98; }
.landing-typeword { position: relative; display: block; width: 11ch; max-width: 100%; white-space: nowrap; }
#heroTypeword { color: var(--landing-cyan); background: linear-gradient(110deg, #61eee2 10%, #80eaf2 52%, #aa8cff 112%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.landing-type-caret { display: inline-block; width: 0.045em; height: 0.78em; margin-left: 0.07em; vertical-align: -0.04em; border-radius: 2px; background: #76ece6; box-shadow: 0 0 12px rgba(101, 232, 228, 0.34); animation: landing-caret-pulse 1.05s steps(2, end) infinite; }
@keyframes landing-caret-pulse { 0%, 42% { opacity: 0.92; } 43%, 100% { opacity: 0.2; } }
.landing-hero-lede { max-width: 570px; margin: 0; padding-top: 60px; color: #98a4b5; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.landing-inline-proof { display: flex; flex-wrap: wrap; gap: 11px 19px; list-style: none; margin: 25px 0 0; padding: 0; color: #7f899a; font-size: 11px; }
.landing-inline-proof li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.landing-proof-icon { color: var(--landing-cyan); font-size: 12px; }
.landing-code-stage { position: relative; min-width: 0; padding: 88px 0 20px; }
.landing-code-stage::before { content: ''; position: absolute; width: 74%; aspect-ratio: 1; left: 16%; top: -10%; border-radius: 50%; background: rgba(110, 74, 255, 0.11); filter: blur(82px); pointer-events: none; }
.landing-hand-note { position: absolute; z-index: 3; left: 12px; top: 2px; width: 190px; margin: 0; color: rgba(226, 229, 241, 0.78); font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.42; transform: rotate(-4deg); pointer-events: none; }
.landing-hand-note svg { position: absolute; left: 145px; top: 30px; width: 108px; height: 50px; overflow: visible; fill: none; stroke: rgba(175, 159, 255, 0.72); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.landing-code-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 425px;
  border: 1px solid rgba(142, 115, 255, 0.28);
  border-radius: 8px;
  background: rgba(7, 10, 17, 0.93);
  box-shadow: 0 36px 90px -45px rgba(77, 218, 229, 0.46), 0 35px 100px -50px rgba(124, 77, 255, 0.76), inset 0 1px 0 rgba(255,255,255,0.035);
}
.landing-code-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(79, 228, 220, 0.035), transparent 30%, transparent 70%, rgba(139,108,255,0.045)); }
.landing-code-top { position: relative; min-height: 51px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--landing-line); }
.landing-window-dots { display: flex; gap: 7px; }
.landing-window-dots i { width: 9px; height: 9px; border-radius: 50%; background: #f15f57; }
.landing-window-dots i:nth-child(2) { background: #e7b444; }
.landing-window-dots i:nth-child(3) { background: #43c685; }
.landing-copy { min-width: 70px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--landing-line); border-radius: 5px; color: #909bab; background: rgba(255,255,255,0.02); font-family: var(--mono); font-size: 10px; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.landing-copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.landing-copy:hover, .landing-copy.is-copied { color: var(--landing-cyan); border-color: rgba(84,231,221,0.28); background: rgba(84,231,221,0.045); }
.landing-code-tabs { min-height: 44px; display: flex; align-items: stretch; padding: 0 13px; border-bottom: 1px solid var(--landing-line); overflow-x: auto; scrollbar-width: none; }
.landing-code-tabs::-webkit-scrollbar { display: none; }
.landing-code-tabs button { position: relative; flex: 0 0 auto; padding: 0 12px; border: 0; color: #707b8d; background: transparent; font-family: var(--mono); font-size: 10px; cursor: pointer; }
.landing-code-tabs button[aria-selected="true"] { color: #e8edf5; }
.landing-code-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: var(--landing-cyan); box-shadow: 0 0 8px var(--landing-cyan); }
.landing-code-scroll { min-height: 278px; overflow-x: auto; overscroll-behavior-inline: contain; }
.landing-code-scroll pre { min-width: 590px; margin: 0; padding: 27px 27px 25px; color: #c1c9d7; font-family: var(--mono); font-size: 11.5px; line-height: 1.85; }
.tok-command { color: #bb9cff; } .tok-url { color: #6de6dc; } .tok-flag { color: #7fb7ff; } .tok-string { color: #b8d9a2; } .tok-number { color: #efa4de; } .tok-comment { color: #657186; }
.landing-code-foot { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; border-top: 1px solid var(--landing-line); color: #6d788a; font-family: var(--mono); font-size: 9px; }
.landing-code-foot > span { display: flex; align-items: center; gap: 7px; }
.landing-code-foot i { width: 5px; height: 5px; border-radius: 50%; background: var(--landing-cyan); box-shadow: 0 0 8px var(--landing-cyan); }
.landing-code-foot a { color: #9b88ef; }

/* Proof and ecosystem */
.landing-proof-band { position: relative; border-top: 1px solid rgba(139,108,255,0.1); border-bottom: 1px solid var(--landing-line); background: rgba(8, 11, 18, 0.9); }
.landing-proof-grid { min-height: 108px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.landing-proof-grid > div { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 12px 25px; border-right: 1px solid var(--landing-line); }
.landing-proof-grid > div:first-child { padding-left: 0; }
.landing-proof-grid > div:last-child { border-right: 0; }
.landing-mini-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(120, 101, 238, 0.22); border-radius: 6px; color: var(--landing-cyan); background: rgba(99, 78, 215, 0.07); font-family: var(--mono); }
.landing-proof-grid p { display: grid; gap: 2px; margin: 0; }
.landing-proof-grid strong { font-size: 12px; font-weight: 600; }
.landing-proof-grid p span { color: var(--landing-faint); font-size: 10px; line-height: 1.4; }
.landing-ecosystem { padding: 70px 0 12px; }
.landing-ecosystem-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px clamp(30px, 5vw, 68px); margin-top: 33px; }
.landing-ecosystem-row a { display: inline-flex; align-items: center; gap: 9px; color: #717c8d; font-size: 12px; font-weight: 500; transition: color 180ms ease; }
.landing-ecosystem-row a:hover { color: #c7d0dd; }
.landing-tool-mark { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(166, 180, 205, 0.18); border-radius: 5px; color: #8d98aa; font-family: var(--mono); font-size: 10px; }

/* Feature and model cards */
.landing-feature-layout { display: grid; grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.08fr); align-items: start; gap: clamp(58px, 7vw, 96px); }
.landing-section-copy { max-width: 455px; padding-top: 0; }
.landing-section-copy h2 { margin-top: 20px; }
.landing-section-copy > p { max-width: 420px; margin-bottom: 0; }
.landing-section-copy .landing-text-link { margin-top: 29px; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.landing-feature-card { min-height: 196px; padding: 25px; }
.landing-card-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 24px; border: 1px solid rgba(139,108,255,0.24); border-radius: 6px; color: var(--landing-cyan); background: linear-gradient(135deg, rgba(84,231,221,0.08), rgba(139,108,255,0.09)); }
.landing-card-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.landing-feature-card h3, .landing-model-card h3, .landing-workflow-grid h3 { margin: 0 0 8px; font-size: 16px; font-weight: 560; }
.landing-feature-card p, .landing-model-card > p:not(.landing-plan-label), .landing-workflow-grid article > p { margin: 0; color: var(--landing-muted); font-size: 12px; line-height: 1.6; }
.landing-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.landing-model-card { position: relative; overflow: hidden; min-height: 306px; padding: 29px; }
.landing-model-card::before { content: ''; position: absolute; inset: 0 16% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(84,231,221,0.38), rgba(139,108,255,0.3), transparent); opacity: 0.65; }
.landing-model-top { min-height: 50px; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 35px; }
.landing-model-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(139,108,255,0.3); border-radius: 7px; color: var(--landing-cyan); background: linear-gradient(145deg, rgba(84,231,221,0.09), rgba(139,108,255,0.16)); box-shadow: 0 12px 32px -22px rgba(84,231,221,0.7); font-size: 19px; font-weight: 600; }
.landing-status { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgba(77, 211, 158, 0.17); border-radius: 999px; color: #77d9b0; background: rgba(77,211,158,0.035); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.landing-status i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.landing-model-card .landing-plan-label { margin-bottom: 7px; color: var(--landing-faint); }
.landing-model-card h3 { margin-bottom: 11px; font-size: clamp(20px, 1.55vw, 25px); line-height: 1.2; font-weight: 600; }
.landing-model-card > p:not(.landing-plan-label) { min-height: 42px; margin-top: 0; }
.landing-model-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }
.landing-model-chips span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 5px 8px; border: 1px solid var(--landing-line); border-radius: 4px; color: #929cad; background: rgba(255,255,255,0.018); font-family: var(--mono); font-size: 9px; white-space: nowrap; }
.landing-loading-card { min-height: 262px; padding: 27px; }
.landing-loading-card span { display: block; height: 11px; margin: 22px 0; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.085), rgba(255,255,255,0.035)); background-size: 220% 100%; animation: landingShimmer 1.8s linear infinite; }
.landing-loading-card span:nth-child(2) { width: 62%; }.landing-loading-card span:nth-child(3) { width: 82%; }
@keyframes landingShimmer { to { background-position: -220% 0; } }

/* Pricing */
#pricing { overflow: clip; scroll-margin-top: 88px; }
#pricing .landing-shell { width: min(1120px, calc(100% - 64px)); }
.landing-pricing-stage { position: relative; isolation: isolate; padding: 42px 0 34px; }
.landing-pricing-stage::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -14px -86px -48px;
  pointer-events: none;
  border-top: 1px solid rgba(154, 177, 214, 0.08);
  border-bottom: 1px solid rgba(89, 217, 220, 0.045);
  background:
    radial-gradient(720px 220px at 50% 0, rgba(207, 229, 255, 0.075), transparent 70%),
    radial-gradient(620px 430px at 12% 58%, rgba(48, 211, 205, 0.07), transparent 72%),
    radial-gradient(680px 460px at 88% 52%, rgba(125, 83, 255, 0.105), transparent 74%),
    linear-gradient(180deg, rgba(16, 23, 34, 0.22), rgba(5, 7, 11, 0.04) 32%, rgba(7, 10, 17, 0.22));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.landing-pricing-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -14px;
  left: 12%;
  right: 12%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(92, 224, 220, 0.32), rgba(185, 160, 255, 0.42), transparent);
  box-shadow: 0 0 28px rgba(129, 101, 255, 0.25);
}
.landing-pricing-heading { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; padding: 0 6px; flex-wrap: wrap; }
.landing-pricing-heading > div:first-child { max-width: 680px; min-width: 0; }
.landing-pricing-tools { display: inline-flex; align-items: stretch; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.landing-pricing-tools .landing-segmented { padding: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); }
.landing-pricing-tools .landing-segmented button { min-height: 34px; padding: 0 13px; font-size: 12px; }
.landing-pricing-tools .landing-segmented button[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(155,132,255,0.2); }
.landing-pricing-tools .landing-currency-toggle { background: rgba(10,14,22,0.6); box-shadow: none; }
.landing-pricing-tools .landing-currency-btn { letter-spacing: 0.02em; }
.landing-pricing-stage > .landing-currency-note { margin: 0 6px 18px; color: rgba(190, 200, 220, 0.55); font-size: 12px; }
.landing-segmented { flex: none; display: flex; padding: 4px; border: 1px solid rgba(149, 166, 195, 0.15); border-radius: 7px; background: rgba(10,14,22,0.82); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 18px 40px -30px rgba(109,81,255,0.7); }
.landing-segmented button { min-height: 40px; padding: 0 17px; border: 0; border-radius: 5px; color: #788497; background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.landing-segmented button[aria-selected="true"] { color: #eff4fa; background: linear-gradient(135deg, rgba(70,212,207,0.12), rgba(139,108,255,0.18)); box-shadow: inset 0 0 0 1px rgba(155,132,255,0.2), 0 10px 28px -20px rgba(84,231,221,0.55); }
.landing-pricing-panel[hidden] { display: none; }
.landing-pricing-panel.is-active { animation: landingPanelIn 320ms var(--landing-ease) both; }
@keyframes landingPanelIn { from { opacity: 0; transform: translateY(7px); } }
.landing-pricing-panel { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 13px; }
#subscriptionsPanel { grid-template-columns: minmax(0, 1fr); }
.landing-pricing-panel::before, .landing-pricing-panel::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: -24px;
  bottom: -30px;
  width: clamp(34px, 6vw, 86px);
  pointer-events: none;
  filter: blur(12px);
}
.landing-pricing-panel::before { left: calc(clamp(34px, 6vw, 86px) * -0.72); background: linear-gradient(90deg, var(--landing-bg) 22%, rgba(5,7,11,0.78) 55%, transparent); }
.landing-pricing-panel::after { right: calc(clamp(34px, 6vw, 86px) * -0.72); background: linear-gradient(270deg, var(--landing-bg) 22%, rgba(5,7,11,0.78) 55%, transparent); }
.landing-credits-card { padding: 30px; }
.landing-credits-main h3, .landing-rate-head h3 { margin: 8px 0 8px; font-size: 22px; font-weight: 560; }
.landing-credits-main > p:last-child { max-width: 480px; color: var(--landing-muted); font-size: 12px; line-height: 1.6; }
.landing-credit-amount { margin: 24px 0 12px; color: var(--landing-cyan); font-size: 19px; font-weight: 600; }
.landing-plan-list { display: grid; gap: 11px; list-style: none; margin: 25px 0 28px; padding: 0; color: #acb6c5; font-size: 11px; }
.landing-plan-list li { position: relative; padding-left: 18px; }
.landing-plan-list li::before { content: '✓'; position: absolute; left: 0; color: var(--landing-cyan); }
.landing-rate-preview { overflow: hidden; padding: 0; }
.landing-rate-head { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--landing-line); }
.landing-rate-head h3 { margin-bottom: 0; font-size: 16px; }
.landing-rate-head .landing-live-saving { margin: 4px 0 0; color: var(--landing-faint); font-size: 8px; }
.landing-rate-head a { color: var(--landing-violet-bright); font-size: 10px; }
.landing-rate-list { min-height: 250px; }
.landing-rate-row { min-height: 63px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 24px; border-bottom: 1px solid rgba(157,177,205,0.08); }
.landing-rate-row:last-child { border-bottom: 0; }
.landing-rate-row > div { min-width: 0; display: grid; gap: 2px; }
.landing-rate-row strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; white-space: nowrap; }
.landing-rate-row > div span { color: var(--landing-faint); font-size: 9px; }
.landing-rate-row p { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; text-align: right; color: #bcc4d1; font-family: var(--mono); font-size: 9px; }
.landing-rate-row small { grid-column: 1 / -1; color: var(--landing-faint); font-size: 8px; }
.landing-data-note { margin: 0; padding: 28px; color: var(--landing-muted); font-size: 12px; }
.landing-data-note a, .landing-data-empty a { color: var(--landing-cyan); }
.landing-plan-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px; }
.landing-plan-card { position: relative; height: 100%; min-height: 570px; overflow: hidden; display: flex; flex-direction: column; padding: 0; border-color: rgba(129, 151, 183, 0.19); background: linear-gradient(152deg, rgba(18,25,38,0.99), rgba(7,10,17,0.995) 62%); box-shadow: 0 28px 78px -58px rgba(73,216,222,0.58), inset 0 1px 0 rgba(255,255,255,0.04); }
.landing-plan-card::before { content: ''; position: absolute; z-index: 0; inset: 0 11% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,236,255,0.5), rgba(84,231,221,0.24), transparent); box-shadow: 0 0 28px rgba(184,220,255,0.16); pointer-events: none; }
.landing-plan-card::after { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(540px 210px at 50% -8%, rgba(116,226,231,0.14), transparent 68%), radial-gradient(390px 340px at 100% 88%, rgba(118,79,255,0.095), transparent 76%); opacity: 0.48; pointer-events: none; transition: opacity 220ms ease; }
.landing-plan-card > * { position: relative; z-index: 1; }
.landing-plan-card.is-featured { border-color: rgba(139,108,255,0.46); background: linear-gradient(152deg, rgba(23,25,45,0.995), rgba(8,10,18,0.995) 62%); box-shadow: 0 30px 88px -54px rgba(139,108,255,0.78), 0 24px 72px -58px rgba(84,231,221,0.62), inset 0 1px 0 rgba(255,255,255,0.055); }
.landing-plan-card.is-featured::before { background: linear-gradient(90deg, transparent, rgba(182,163,255,0.62), rgba(84,231,221,0.3), transparent); box-shadow: 0 0 34px rgba(139,108,255,0.28); }
.landing-plan-head { min-height: 105px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 32px 34px 0; }
.landing-plan-head > div { min-width: 0; }
.landing-plan-badge { flex: none; margin-top: 1px; padding: 6px 9px; border: 1px solid rgba(139,108,255,0.36); border-radius: 999px; color: #c0b3ff; background: linear-gradient(135deg, rgba(139,108,255,0.14), rgba(84,231,221,0.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px -22px rgba(139,108,255,0.8); font-family: var(--mono); font-size: 8px; }
.landing-plan-card h3 { margin: 10px 0 0; font-size: 29px; font-weight: 590; }
.landing-plan-price-block { padding: 7px 34px 27px; }
.landing-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.landing-plan-price strong { font-size: 46px; line-height: 1; font-weight: 590; }
.landing-plan-price span { color: var(--landing-faint); font-size: 11px; }
.landing-plan-capacity { min-height: 116px; display: grid; align-content: center; gap: 5px; margin: 0 34px; padding: 18px 20px; border: 1px solid rgba(84,231,221,0.19); border-radius: 7px; background: linear-gradient(135deg, rgba(31,149,148,0.105), rgba(48,71,130,0.07) 58%, rgba(111,79,216,0.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; }
.landing-plan-capacity > span { color: #75cfc9; font-family: var(--mono); font-size: 8px; font-weight: 600; }
.landing-plan-capacity strong { color: #eaf7f7; font-size: 22px; font-weight: 590; }
.landing-plan-capacity small { color: #788798; font-size: 10px; }
.landing-plan-card.is-featured .landing-plan-capacity { border-color: rgba(150,123,255,0.28); background: linear-gradient(135deg, rgba(64,177,174,0.105), rgba(77,66,146,0.12) 62%, rgba(124,83,229,0.1)); }
.landing-plan-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 24px 34px 0; }
.landing-plan-specs > div { min-width: 0; min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(157,177,205,0.085); }
.landing-plan-specs dt { color: #758194; font-size: 10px; }
.landing-plan-specs dd { margin: 0; color: #cbd4e0; font-family: var(--mono); font-size: 10px; font-weight: 600; text-align: right; }
.landing-plan-specs .landing-plan-spec-wide { grid-column: 1 / -1; }
.landing-plan-specs .landing-plan-spec-wide dd { color: var(--landing-cyan-bright); }
.landing-plan-action { margin-top: auto; padding: 28px 34px 32px; }
.landing-plan-action::before { content: ''; position: absolute; top: 0; left: 34px; right: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(158,178,207,0.15), transparent); }
.landing-plan-card .landing-button { width: 100%; min-height: 50px; }
.landing-data-empty { grid-column: 1 / -1; padding: 30px; }
@media (hover: hover) and (pointer: fine) {
  .landing-plan-card:hover { transform: translateY(-2px); border-color: rgba(84,231,221,0.42); box-shadow: 0 32px 82px -45px rgba(84,231,221,0.5), 0 36px 94px -54px rgba(139,108,255,0.68), inset 0 1px 0 rgba(255,255,255,0.07); }
  .landing-plan-card:hover::after { opacity: 0.9; }
  .landing-plan-card:hover .landing-plan-capacity { border-color: rgba(84,231,221,0.34); background: linear-gradient(135deg, rgba(31,169,164,0.14), rgba(48,71,130,0.09) 58%, rgba(111,79,216,0.11)); box-shadow: 0 16px 42px -32px rgba(84,231,221,0.7), inset 0 1px 0 rgba(255,255,255,0.035); }
  .landing-plan-card:hover .landing-button-secondary { border-color: rgba(84,231,221,0.32); background: rgba(84,231,221,0.055); }
  .landing-plan-card.is-featured:hover { border-color: rgba(166,137,255,0.62); box-shadow: 0 34px 90px -44px rgba(139,108,255,0.78), 0 30px 82px -48px rgba(84,231,221,0.46), inset 0 1px 0 rgba(255,255,255,0.075); }
  .landing-plan-card.is-featured:hover .landing-button-primary { box-shadow: 0 14px 34px -17px rgba(84,231,221,0.74), 0 14px 36px -20px rgba(139,108,255,0.72); }
}

/* CTA and workflows */
.landing-cta-banner { position: relative; min-height: 226px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 38px; padding: 42px 50px; border: 1px solid rgba(139,108,255,0.25); border-radius: 8px; background: #090d15; box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); }
.landing-cta-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 48%, rgba(106,74,232,0.07)); pointer-events: none; }
.landing-cta-banner > div:not(.landing-cta-art) { position: relative; z-index: 2; }
.landing-cta-banner h2 { margin: 9px 0 8px; font-size: clamp(28px, 3.2vw, 43px); font-weight: 560; }
.landing-cta-banner p:last-child { margin: 0; color: var(--landing-muted); font-size: 12px; }
.landing-cta-side { flex: none; display: grid; justify-items: center; gap: 9px; }
.landing-cta-side > span { color: var(--landing-faint); font-size: 9px; }
.landing-cta-art { position: absolute; inset: 0 0 0 48%; overflow: hidden; opacity: 0.8; pointer-events: none; }
.landing-cta-art::before { content: ''; position: absolute; width: 300px; height: 200px; right: 8%; top: -10%; border-radius: 50%; background: rgba(115,69,255,0.16); filter: blur(65px); }
.landing-cta-art i { position: absolute; width: 135%; height: 90px; right: -22%; top: 34%; border: solid rgba(137, 105, 255, 0.25); border-width: 1px 0 0; border-radius: 50%; transform: rotate(-10deg); }
.landing-cta-art i:nth-child(2) { top: 50%; border-color: rgba(67,225,221,0.21); transform: rotate(8deg); }
.landing-cta-art i:nth-child(3) { top: 66%; border-color: rgba(176, 113, 255, 0.18); transform: rotate(-4deg); }
.landing-workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.landing-workflow-grid article { min-height: 240px; display: flex; flex-direction: column; align-items: flex-start; padding: 25px; }
.landing-workflow-grid article > span:first-child { margin-bottom: 47px; color: #705cd0; font-family: var(--mono); font-size: 10px; }
.landing-workflow-grid article > p { flex: 1; }
.landing-workflow-grid article > a { display: inline-flex; align-items: center; gap: 7px; margin-top: 23px; color: var(--landing-cyan); font-size: 10px; font-weight: 600; }

/* FAQ */
.landing-faq-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 38px; align-items: start; }
.landing-faq { border-top: 1px solid var(--landing-line); }
.landing-faq-item { border-bottom: 1px solid var(--landing-line); }
.landing-faq-item h3 { margin: 0; }
.landing-faq-button { width: 100%; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 2px; border: 0; color: #dfe4ed; background: transparent; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.landing-faq-button i { position: relative; flex: none; width: 20px; height: 20px; border: 1px solid var(--landing-line); border-radius: 50%; }
.landing-faq-button i::before, .landing-faq-button i::after { content: ''; position: absolute; left: 5px; right: 5px; top: 9px; height: 1px; background: #8b96a8; transition: transform 180ms ease; }
.landing-faq-button i::after { transform: rotate(90deg); }
.landing-faq-button[aria-expanded="true"] { color: #fff; }
.landing-faq-button[aria-expanded="true"] i { border-color: rgba(84,231,221,0.28); }
.landing-faq-button[aria-expanded="true"] i::after { transform: rotate(0); }
.landing-faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 220ms var(--landing-ease), opacity 180ms ease; }
.landing-faq-item.is-open .landing-faq-answer { grid-template-rows: 1fr; opacity: 1; }
.landing-faq-answer > div { min-height: 0; overflow: hidden; padding: 0 48px 23px 2px; }
.landing-faq-answer p { max-width: 650px; margin: 0; color: var(--landing-muted); font-size: 12px; line-height: 1.7; }
.landing-support-card { position: sticky; top: 94px; overflow: hidden; min-height: 330px; display: flex; align-items: flex-end; padding: 30px; }
.landing-support-card > div:last-child { position: relative; z-index: 2; }
.landing-support-card h3 { margin: 9px 0 9px; font-size: 25px; font-weight: 560; }
.landing-support-card p:not(.landing-kicker) { margin: 0 0 23px; color: var(--landing-muted); font-size: 12px; line-height: 1.6; }
.landing-support-art { position: absolute; inset: 0; background: radial-gradient(260px 180px at 80% 4%, rgba(129, 76, 255, 0.24), transparent 72%); }
.landing-support-art i { position: absolute; width: 150%; height: 120px; left: -15%; top: 27px; border-top: 1px solid rgba(92,226,221,0.21); border-radius: 50%; transform: rotate(-12deg); }

/* Footer */
.landing-page .site-footer { margin-top: clamp(100px, 10vw, 150px); padding: 69px 0 25px; border-top: 1px solid var(--landing-line); background: rgba(5,7,11,0.94); }
.landing-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 0.7fr); gap: 48px; padding-bottom: 67px; }
.landing-footer-brand > p { margin: 20px 0 0; color: var(--landing-faint); font-size: 11px; line-height: 1.7; }
.landing-page .site-footer nav { display: grid; align-content: start; gap: 12px; }
.landing-page .site-footer nav h2 { margin: 0 0 7px; color: #dce2ec; font-size: 11px; font-weight: 600; }
.landing-page .site-footer nav a { width: max-content; color: #707b8d; font-size: 10px; transition: color 160ms ease; }
.landing-page .site-footer nav a:hover { color: var(--landing-cyan); }
.landing-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(157,177,205,0.08); color: #596477; font-size: 9px; }

/* Motion */
.landing-reveal { opacity: 0; transform: translateY(20px); transition: opacity 650ms var(--landing-ease), transform 650ms var(--landing-ease); }
.landing-reveal.is-visible { opacity: 1; transform: translateY(0); }
.landing-reveal-child { transition-delay: 80ms; }
.landing-reveal-child:nth-child(2) { transition-delay: 140ms; }
.landing-reveal-child:nth-child(3) { transition-delay: 200ms; }
.landing-reveal-child:nth-child(4) { transition-delay: 260ms; }

@media (max-width: 1100px) {
  .landing-nav-links { gap: 20px; }
  .landing-hero-grid { grid-template-columns: minmax(0, 0.78fr) minmax(480px, 1.22fr); gap: 45px; }
  .landing-hand-note { display: none; }
}

@media (max-width: 1024px) {
  .landing-shell, .landing-nav { width: min(100% - 48px, 900px); }
  #pricing .landing-shell { width: min(100% - 48px, 900px); }
  .landing-hero { min-height: 0; }
  .landing-hero-grid { grid-template-columns: 1fr; gap: 50px; padding: 82px 0 94px; }
  .landing-hero-copy { max-width: 660px; }
  .landing-title { font-size: clamp(58px, 9vw, 76px); }
  .landing-code-stage { width: 100%; max-width: 760px; margin: 0 auto; padding-top: 0; }
  .landing-proof-grid { grid-template-columns: repeat(2, 1fr); padding: 12px 0; }
  .landing-proof-grid > div { min-height: 68px; }
  .landing-proof-grid > div:nth-child(2) { border-right: 0; }
  .landing-feature-layout { grid-template-columns: 1fr; align-items: start; gap: 48px; }
  .landing-section-copy { max-width: 650px; padding-top: 0; }
  .landing-section-copy h2 br { display: none; }
  .landing-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-model-card { min-height: 292px; }
  .landing-pricing-panel { grid-template-columns: 1fr; }
  .landing-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .landing-plan-card { min-height: 552px; }
  .landing-plan-head { padding-left: 28px; padding-right: 28px; }
  .landing-plan-price-block { padding-left: 28px; padding-right: 28px; }
  .landing-plan-capacity { margin-left: 28px; margin-right: 28px; }
  .landing-plan-specs { margin-left: 28px; margin-right: 28px; gap: 0 18px; }
  .landing-plan-action { padding-left: 28px; padding-right: 28px; }
  .landing-plan-action::before { left: 28px; right: 28px; }
  .landing-faq-layout { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); gap: 25px; }
  .landing-footer-grid { grid-template-columns: 1.4fr repeat(3, 0.7fr); gap: 30px; }
}

@media (max-width: 720px) {
  .landing-page { --landing-section: clamp(70px, 20vw, 88px); }
  body.landing-page::before { background-size: 100% 100%, 100% 100%, 54px 54px, 54px 54px; }
  .landing-page-atmosphere::before { opacity: 0.72; }
  .landing-page-atmosphere::after { opacity: 0.72; }
  .landing-wave-canvas { opacity: 0.82; }
  .landing-section::before { inset: 10px 0 -35px; opacity: 0.7; }
  .landing-shell, .landing-nav { width: calc(100% - 36px); }
  #pricing .landing-shell { width: calc(100% - 36px); }
  .landing-nav-wrap { height: 62px; }
  .landing-nav { justify-content: space-between; }
  .landing-nav-toggle { display: grid; align-content: center; gap: 4.5px; }
  .landing-nav-menu {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    display: grid;
    gap: 20px;
    padding: 17px;
    border: 1px solid rgba(145, 159, 185, 0.15);
    border-radius: 7px;
    background: rgba(8, 11, 18, 0.98);
    box-shadow: 0 25px 70px -25px rgba(0,0,0,0.95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms var(--landing-ease);
  }
  .landing-nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .landing-nav-links { display: grid; gap: 0; margin: 0; }
  .landing-nav-links a { min-height: 45px; display: flex; align-items: center; border-bottom: 1px solid rgba(157,177,205,0.08); font-size: 14px; }
  .landing-nav-actions { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 9px; }
  .landing-signin { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--landing-line); border-radius: 6px; }
  .landing-nav-actions .landing-button { min-height: 42px; }
  .landing-menu-open { overflow: hidden; }
  .landing-hero-grid { gap: 44px; padding: 68px 0 82px; }
  .landing-title { font-size: clamp(48px, 13vw, 68px); line-height: 0.99; }
  .landing-hero-lede { padding-top: 34px; font-size: 16px; line-height: 1.58; }
  .landing-actions { margin-top: 27px; }
  .landing-inline-proof { display: grid; grid-template-columns: repeat(2, max-content); gap: 9px 16px; }
  .landing-inline-proof li:last-child { grid-column: 1 / -1; }
  .landing-code-card { min-height: 396px; }
  .landing-code-tabs { padding: 0 7px; }
  .landing-code-tabs button { padding: 0 9px; }
  .landing-code-scroll { min-height: 250px; }
  .landing-code-scroll pre { padding: 22px 20px; font-size: 10.5px; }
  .landing-code-foot { padding: 0 13px; }
  .landing-proof-grid { grid-template-columns: 1fr; padding: 8px 0; }
  .landing-proof-grid > div, .landing-proof-grid > div:first-child { min-height: 63px; padding: 10px 0; border-right: 0; border-bottom: 1px solid rgba(157,177,205,0.08); }
  .landing-proof-grid > div:last-child { border-bottom: 0; }
  .landing-ecosystem { padding-top: 61px; }
  .landing-ecosystem-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .landing-ecosystem-row a { min-width: 0; font-size: 10px; line-height: 1.35; }
  .landing-section-heading, .landing-section-heading-row, .landing-pricing-heading { margin-bottom: 34px; }
  .landing-section-heading-row, .landing-pricing-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .landing-section-heading h2, .landing-section-copy h2 { font-size: clamp(34px, 10vw, 46px); }
  .landing-feature-grid { gap: 10px; }
  .landing-feature-card { min-height: 190px; padding: 21px; }
  .landing-card-icon { margin-bottom: 25px; }
  .landing-model-grid, .landing-workflow-grid { grid-template-columns: 1fr; }
  .landing-plan-grid { grid-template-columns: 1fr; }
  .landing-model-card { min-height: 276px; padding: 25px; }
  .landing-model-top { margin-bottom: 28px; }
  .landing-model-card h3 { font-size: clamp(20px, 6vw, 24px); }
  .landing-pricing-panel { gap: 10px; }
  .landing-pricing-panel::before, .landing-pricing-panel::after { width: 28px; filter: blur(8px); opacity: 0.7; }
  .landing-plan-grid { gap: 12px; }
  .landing-pricing-stage { padding-top: 30px; }
  .landing-pricing-stage::before { left: -38px; right: -38px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .landing-plan-card { min-height: 550px; }
  .landing-rate-row { padding-left: 18px; padding-right: 18px; }
  .landing-cta-banner { align-items: flex-start; flex-direction: column; min-height: 305px; padding: 32px 26px; }
  .landing-cta-side { align-items: start; justify-items: start; }
  .landing-cta-art { inset: 35% -20% 0 30%; }
  .landing-workflow-grid article { min-height: 215px; }
  .landing-workflow-grid article > span:first-child { margin-bottom: 36px; }
  .landing-faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .landing-support-card { position: relative; top: auto; min-height: 290px; }
  .landing-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 39px 26px; }
  .landing-footer-brand { grid-column: 1 / -1; }
  .landing-footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .landing-page { --landing-grid-line: rgba(123, 158, 164, 0.058); }
  .landing-hero-grid { gap: 0; padding: 58px 0 68px; }
  .landing-code-stage { display: none; }
  .landing-section-copy h2 { max-width: 15ch; line-height: 1.07; }
}

@media (max-width: 430px) {
  .landing-shell, .landing-nav { width: calc(100% - 28px); }
  #pricing .landing-shell { width: calc(100% - 28px); }
  .landing-brand { font-size: 14px; }
  .landing-title { font-size: clamp(42px, 13vw, 56px); }
  .landing-pill { padding: 6px 9px; font-size: 8.5px; }
  .landing-actions { display: grid; grid-template-columns: 1fr; }
  .landing-actions .landing-button { width: 100%; }
  .landing-inline-proof { grid-template-columns: 1fr; }
  .landing-inline-proof li:last-child { grid-column: auto; }
  .landing-code-stage { width: calc(100% + 2px); }
  .landing-code-top { padding: 0 12px; }
  .landing-code-tabs button { padding: 0 8px; font-size: 9px; }
  .landing-code-tabs button:nth-child(4) { display: none; }
  .landing-code-scroll pre { font-size: 10px; }
  .landing-code-foot > span { display: none; }
  .landing-code-foot { justify-content: flex-end; }
  .landing-feature-grid { grid-template-columns: 1fr; }
  .landing-feature-card { min-height: 174px; }
  .landing-credits-card { padding: 24px 20px; }
  .landing-plan-card { min-height: 530px; }
  .landing-plan-head { min-height: 98px; padding: 27px 22px 0; }
  .landing-plan-badge { padding: 5px 7px; }
  .landing-plan-price-block { padding: 5px 22px 23px; }
  .landing-plan-capacity { min-height: 106px; margin: 0 22px; padding: 16px 17px; }
  .landing-plan-specs { grid-template-columns: 1fr; margin: 21px 22px 0; gap: 0 16px; }
  .landing-plan-specs > div { min-height: 48px; }
  .landing-plan-action { padding: 25px 22px 27px; }
  .landing-plan-action::before { left: 22px; right: 22px; }
  .landing-rate-head { padding: 16px 18px; }
  .landing-rate-row { grid-template-columns: 1fr; gap: 5px; }
  .landing-rate-row p { justify-content: start; text-align: left; }
  .landing-plan-price strong { font-size: 31px; }
  .landing-segmented { width: 100%; }
  .landing-segmented button { flex: 1; padding: 0 7px; }
  .landing-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 340px) {
  .landing-shell, .landing-nav { width: calc(100% - 24px); }
  .landing-title { font-size: 42px; }
  .landing-code-tabs button { padding: 0 7px; font-size: 8.5px; }
  .landing-ecosystem-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-document { scroll-behavior: auto; }
  .landing-reveal { opacity: 1; transform: none; }
  .landing-card:hover, .landing-button:hover { transform: none; }
  .landing-loading-card span { animation: none; }
  .landing-type-caret { animation: none; display: none; }
}

/* ============================================================================
   ANALYTICS DASHBOARD  (additive — reuses Obsidian tokens)
   ========================================================================== */

/* ---- Top bar ---- */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.topbar-titles .page-title { margin: 0; }
.topbar-sub { color: var(--ink-dim); font-size: 13.5px; margin: 6px 0 0; }
.topbar-right { position: relative; display: flex; align-items: center; gap: 12px; }
.topbar-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: 13.5px; background: transparent; border: none; cursor: pointer; padding: 6px 4px; }
.topbar-link:hover { color: var(--ink); }
.balance-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--ok-bg); color: var(--ok); border: 1px solid rgba(70,211,154,0.28); border-radius: var(--r-pill); padding: 6px 13px; font-size: 13px; font-weight: 600; }
.acct-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px 4px 4px; }
.acct-avatar.sm { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
.acct-chip-name { font-size: 13px; color: var(--ink-dim); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Panels ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--hairline); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-title { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.panel-note { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; }
.poll-status { color: var(--ink-faint); font-size: 12px; white-space: nowrap; }

/* ---- Main stat cards ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--hairline);
  transition: border-color 0.16s, transform 0.08s var(--ease);
}
.stat-card:hover { border-color: var(--line-2); }
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--card-accent, var(--accent)); opacity: 0.9; }

/* Subscription dashboard: usage-first, customer-safe terminology. */
.subscription-dashboard { display: grid; gap: 16px; margin-top: 22px; }
.subscription-usage-hero { border-color: rgba(45,212,191,0.28); }
.subscription-usage-title { margin: 8px 0 0; font-size: clamp(22px, 3vw, 34px); font-weight: 600; letter-spacing: 0; }
.subscription-progress { height: 12px; margin-top: 22px; overflow: hidden; border-radius: var(--r-pill); background: var(--line-2); }
.subscription-progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 360ms var(--ease); }
.subscription-usage-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: var(--ink-faint); font-size: 12px; }
.subscription-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.subscription-card { min-width: 0; }
.subscription-plan-name, .subscription-balance { margin: 6px 0 4px; font-family: var(--display); font-size: 21px; font-weight: 600; }
.subscription-models { display: grid; gap: 8px; }
.subscription-model { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.subscription-model::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.subscription-plan-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.subscription-queued { display: grid; gap: 4px; margin-top: 14px; color: var(--ink-dim); font-size: 12px; }
.subscription-recent { overflow: hidden; }
.subadmin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.subadmin-grid .table-wrap { max-height: 280px; overflow: auto; }
@media (max-width: 900px) { .subadmin-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .subscription-card-grid { grid-template-columns: 1fr; } .subscription-usage-meta { flex-direction: column; gap: 6px; } }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.stat-label { font-size: 12.5px; color: var(--ink-dim); }
.stat-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--card-accent, var(--accent)); background: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent); }
.stat-ico .ico { width: 18px; height: 18px; }
.stat-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.stat-sub { margin-top: 6px; font-size: 12px; color: var(--ink-faint); font-family: var(--mono); }

/* ---- Billing meter cards ---- */
.meter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.meter-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 8px; }
.meter-card-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.meter-card-value { font-size: 19px; font-weight: 600; }
.meter.mini { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; position: relative; }
.meter.mini .meter-fill { height: 100%; border-radius: var(--r-pill); transition: width 0.9s var(--ease); }

/* ---- Per-platform breakdown ---- */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.provider-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.provider-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.provider-name { font-family: var(--display); font-size: 15px; font-weight: 600; }
.provider-total { font-size: 15px; font-weight: 600; color: var(--accent); }
.provider-rows { display: grid; gap: 7px; }
.prow { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-dim); }
.prow .mono { color: var(--ink); }

/* ---- Filters ---- */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px; margin-top: 22px; box-shadow: var(--hairline); }
.filter-group { display: flex; align-items: center; gap: 10px; }
.filter-group label { font-size: 13px; color: var(--ink-dim); }
.select { appearance: none; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 30px 8px 12px; font-family: inherit; font-size: 13.5px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0AA' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
.select:hover { border-color: var(--ink-faint); }

/* ---- Charts ---- */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.chart-frame { min-height: 210px; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut { width: 170px; height: 170px; flex: none; }
.donut-total { fill: var(--ink); font-family: var(--mono); font-size: 22px; font-weight: 600; }
.donut-cap { fill: var(--ink-faint); font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.donut-legend { display: grid; gap: 8px; flex: 1; min-width: 160px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legend-name { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.legend-val { color: var(--ink); }

/* ---- Settings + usage helpers ---- */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.empty-cell { text-align: center; color: var(--ink-dim); padding: 30px 18px; }

/* ---------- Customer Usage & Analytics ---------- */
#view-usage {
  --usage-blue: #5B8DEF;
  --usage-blue-soft: rgba(91, 141, 239, 0.12);
  --usage-green: #4DCEA1;
  --usage-green-soft: rgba(77, 206, 161, 0.12);
  --usage-amber: #F0A93B;
  --usage-amber-soft: rgba(240, 169, 59, 0.12);
  --usage-violet: #9A78F2;
  --usage-violet-soft: rgba(154, 120, 242, 0.12);
  --usage-cyan: #49BBDD;
  --usage-cyan-soft: rgba(73, 187, 221, 0.12);
  --usage-red: #F06464;
  --usage-red-soft: rgba(240, 100, 100, 0.12);
  min-width: 0;
}
.usage-analytics-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 20px;
}
.usage-analytics-head .page-title,
.usage-analytics-head .page-note { letter-spacing: 0; }
.usage-head-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.usage-error {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 14px; padding: 13px 15px; color: var(--danger); border-color: rgba(242,100,90,0.35);
}
.usage-filter-panel {
  min-width: 0; padding: 15px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--hairline), 0 18px 34px -32px rgba(91, 141, 239, 0.7);
}
.usage-filter-grid {
  display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 10px;
  min-width: 0;
}
.usage-filter-field { display: grid; min-width: 0; gap: 6px; }
.usage-filter-field > span,
.usage-page-size > span {
  color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0; text-transform: uppercase;
}
.usage-filter-field .select,
.usage-filter-field .input { min-width: 0; width: 100%; letter-spacing: 0; }
.usage-custom-range {
  display: grid; grid-template-columns: repeat(2, minmax(180px, 260px)) auto;
  align-items: end; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.usage-custom-range[hidden] { display: none; }
.usage-kpi-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 14px;
}
.usage-kpi {
  --usage-tone: var(--usage-blue);
  --usage-tone-soft: var(--usage-blue-soft);
  display: grid; min-width: 0; min-height: 118px; align-content: space-between; gap: 8px;
  position: relative; overflow: hidden; padding: 16px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: inset 0 2px 0 var(--usage-tone), var(--hairline), 0 20px 38px -34px var(--usage-tone);
}
.usage-kpi[data-tone="violet"] { --usage-tone: var(--usage-violet); --usage-tone-soft: var(--usage-violet-soft); }
.usage-kpi[data-tone="green"] { --usage-tone: var(--usage-green); --usage-tone-soft: var(--usage-green-soft); }
.usage-kpi[data-tone="amber"] { --usage-tone: var(--usage-amber); --usage-tone-soft: var(--usage-amber-soft); }
.usage-kpi[data-tone="cyan"] { --usage-tone: var(--usage-cyan); --usage-tone-soft: var(--usage-cyan-soft); }
.usage-kpi-label {
  display: flex; align-items: center; gap: 8px; color: var(--ink-dim);
  font-family: var(--mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0; text-transform: uppercase;
}
.usage-kpi-label::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 2px;
  background: var(--usage-tone); box-shadow: 0 0 0 4px var(--usage-tone-soft);
}
.usage-kpi-value {
  min-width: 0; color: var(--usage-tone); font-size: 24px; font-weight: 600;
  line-height: 1.1; letter-spacing: 0; overflow-wrap: normal; word-break: normal;
}
.usage-kpi-detail {
  min-width: 0; color: var(--ink-faint); font-size: 11.5px; line-height: 1.35;
  letter-spacing: 0; overflow-wrap: break-word; word-break: normal;
}
.usage-distribution-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 14px;
}
.usage-distribution-grid > .usage-panel {
  display: grid; grid-template-columns: 176px minmax(0, 1fr); column-gap: 16px;
  align-items: center;
}
.usage-distribution-grid > .usage-panel:last-child { grid-column: 1 / -1; }
.usage-distribution-grid > .usage-panel > .usage-panel-head { grid-column: 1 / -1; }
.usage-panel {
  min-width: 0; padding: 17px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--hairline), 0 20px 42px -38px rgba(73, 187, 221, 0.55);
}
.usage-panel-head {
  display: flex; min-width: 0; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.usage-panel-head h2 {
  margin: 0; font-family: var(--display); font-size: 14px; font-weight: 600;
  line-height: 1.35; letter-spacing: 0;
}
.usage-panel-head .panel-note { margin: 4px 0 0; color: var(--ink-faint); font-size: 11.5px; letter-spacing: 0; }
.usage-metric-select { flex: none; max-width: 158px; min-width: 122px; letter-spacing: 0; }
.usage-donut { display: grid; min-height: 182px; place-items: center; }
.usage-donut .donut-wrap { justify-content: center; }
.usage-donut .donut { width: 172px; height: 172px; }
.usage-donut .donut circle { opacity: 0.96; transition: opacity 120ms var(--ease); }
.usage-donut .donut:hover circle { opacity: 0.82; }
.usage-donut .donut circle:hover { opacity: 1; }
.usage-donut .donut-legend { display: none; }
.usage-summary-list {
  display: grid; min-width: 0; gap: 0; overflow-x: auto;
  border-top: 1px solid var(--line);
}
.usage-summary-head,
.usage-summary-row {
  display: grid; grid-template-columns: 10px minmax(92px, 1fr) 58px 62px 92px;
  min-width: 0; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 11.5px; letter-spacing: 0;
}
.usage-summary-head {
  min-width: 390px; padding-top: 0; color: var(--ink-faint); font-family: var(--mono);
  font-size: 9px; font-weight: 500; text-transform: uppercase;
}
.usage-summary-head > span:nth-child(n+3) { text-align: right; }
.usage-summary-row { min-width: 390px; }
.usage-summary-row .legend-dot { background: var(--usage-series); box-shadow: 0 0 0 3px color-mix(in srgb, var(--usage-series) 18%, transparent); }
.usage-summary-row:last-child { border-bottom: 0; }
.usage-summary-name { min-width: 0; overflow: hidden; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }
.usage-summary-number { color: var(--ink); text-align: right; }
.usage-summary-usage { display: grid; justify-items: end; min-width: 0; line-height: 1.25; }
.usage-summary-usage b { color: var(--usage-green); font-size: 11px; font-weight: 600; }
.usage-summary-usage small { color: var(--usage-violet); font-size: 9.5px; white-space: nowrap; }
.usage-empty { display: grid; min-height: 92px; place-items: center; color: var(--ink-faint); font-size: 12px; }
.usage-trend-panel { margin-bottom: 14px; }
.usage-trend-chart { min-width: 0; min-height: 245px; overflow: hidden; }
.usage-trend-chart .chart { height: 215px; }
.usage-trend-chart .chart-legend { row-gap: 7px; }
.usage-trend-chart .chart-key { letter-spacing: 0; }
.usage-trend-chart .legend-dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
.usage-trend-chart .chart-grid-line { stroke: var(--line); stroke-width: 1; }
.usage-trend-chart .chart-series-line { filter: drop-shadow(0 0 3px rgba(255,255,255,0.08)); }
.usage-trend-chart .chart-point { stroke: var(--surface); stroke-width: 1.4; }
.usage-records-panel { padding: 0; overflow: hidden; }
.usage-records-panel > .usage-panel-head { align-items: center; margin: 0; padding: 15px 17px; }
.usage-page-size { display: flex; flex: none; align-items: center; gap: 8px; }
.usage-page-size .select { min-width: 72px; letter-spacing: 0; }
.usage-records-scroll { width: 100%; max-width: 100%; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.usage-records-table { min-width: 1180px; table-layout: fixed; }
.usage-records-table th,
.usage-records-table td { padding: 12px 14px; vertical-align: top; letter-spacing: 0; }
.usage-records-table thead { background: var(--surface-2); }
.usage-records-table tbody tr { transition: background-color 120ms var(--ease); }
.usage-records-table tbody tr:hover { background: rgba(91, 141, 239, 0.045); }
.usage-records-table th:nth-child(1) { width: 145px; }
.usage-records-table th:nth-child(2) { width: 190px; }
.usage-records-table th:nth-child(3) { width: 120px; }
.usage-records-table th:nth-child(4) { width: 145px; }
.usage-records-table th:nth-child(5) { width: 125px; }
.usage-records-table th:nth-child(6) { width: 115px; }
.usage-records-table th:nth-child(7) { width: 105px; }
.usage-records-table th:nth-child(8) { width: 150px; }
.usage-records-table th:nth-child(9) { width: 165px; }
.usage-records-table th button {
  display: inline-flex; padding: 0; color: inherit; background: none; border: 0;
  font: inherit; letter-spacing: 0; text-transform: inherit; cursor: pointer;
}
.usage-records-table th button[aria-sort="ascending"]::after { content: " \2191"; color: var(--accent); }
.usage-records-table th button[aria-sort="descending"]::after { content: " \2193"; color: var(--accent); }
.usage-cell-stack,
.usage-token-stack { display: grid; min-width: 0; gap: 3px; line-height: 1.3; letter-spacing: 0; }
.usage-cell-stack > *,
.usage-token-stack > * { min-width: 0; overflow-wrap: break-word; word-break: normal; }
.usage-cell-stack > span,
.usage-token-stack > span { color: var(--ink-faint); font-size: 11px; }
.usage-cell-stack > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-route-stack { justify-items: start; }
.usage-route-badge,
.usage-billing-badge {
  display: inline-flex; max-width: 100%; align-items: center; width: fit-content;
  border: 1px solid var(--line-2); border-radius: 5px; white-space: nowrap;
}
.usage-route-badge { padding: 3px 7px; font-family: var(--mono); font-size: 10.5px; }
.usage-billing-badge { padding: 2px 6px; font-size: 9.5px !important; }
.usage-route-badge.is-standard { color: var(--usage-blue); border-color: rgba(91,141,239,0.3); background: var(--usage-blue-soft); }
.usage-route-badge.is-max { color: var(--usage-violet); border-color: rgba(154,120,242,0.3); background: var(--usage-violet-soft); }
.usage-route-badge.is-payg { color: var(--usage-green); border-color: rgba(77,206,161,0.3); background: var(--usage-green-soft); }
.usage-route-badge.is-unknown { color: var(--ink-dim); background: var(--surface-2); }
.usage-billing-badge.is-subscription { color: var(--usage-violet) !important; border-color: rgba(154,120,242,0.24); background: var(--usage-violet-soft); }
.usage-billing-badge.is-payg { color: var(--usage-green) !important; border-color: rgba(77,206,161,0.24); background: var(--usage-green-soft); }
.usage-billing-badge.is-none { color: var(--ink-faint) !important; background: var(--surface-2); }
.usage-token { display: inline-flex; align-items: center; gap: 4px; }
.usage-token::before { content: ""; width: 3px; height: 12px; flex: none; border-radius: 1px; background: currentColor; opacity: 0.72; }
.usage-token.is-input { color: var(--usage-blue); }
.usage-token.is-output { color: var(--usage-green); }
.usage-token.is-cache-write { color: var(--usage-amber); }
.usage-token.is-cache-read { color: var(--usage-cyan); }
.usage-charge.is-payg { color: var(--usage-green); }
.usage-charge.is-subscription { color: var(--usage-violet); }
.usage-charge.is-none { color: var(--ink-faint); }
.usage-status-code.is-success { box-shadow: 0 0 0 3px var(--usage-green-soft); }
.usage-status-code.is-failed { color: var(--usage-red); border-color: rgba(240,100,100,0.3); background: var(--usage-red-soft); }
.usage-error-code { color: var(--usage-red) !important; }
.usage-client { display: block; overflow: hidden; color: var(--ink-dim); text-overflow: ellipsis; white-space: nowrap; }
.usage-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 17px; color: var(--ink-dim); font-size: 12px; letter-spacing: 0;
}
.usage-pagination > div { display: flex; gap: 8px; }

@media (max-width: 1180px) {
  .usage-filter-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
  .usage-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .usage-analytics-head { align-items: flex-start; flex-direction: column; }
  .usage-head-actions { width: 100%; flex-wrap: wrap; }
  .usage-head-actions .btn { flex: 1 1 auto; }
  .usage-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-custom-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-custom-range .btn { grid-column: 1 / -1; }
  .usage-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-distribution-grid { grid-template-columns: minmax(0, 1fr); }
  .usage-distribution-grid > :last-child { grid-column: auto; }
  .usage-trend-chart { overflow-x: auto; }
  .usage-trend-chart > .chart-legend { min-width: 560px; }
  .usage-trend-chart > .chart { min-width: 620px; }
}
@media (max-width: 480px) {
  .usage-head-actions .btn { flex-basis: calc(50% - 4px); }
  .usage-filter-grid,
  .usage-custom-range,
  .usage-kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .usage-custom-range .btn { grid-column: auto; }
  .usage-kpi { min-height: 105px; }
  .usage-distribution-grid > .usage-panel { grid-template-columns: minmax(0, 1fr); }
  .usage-distribution-grid > .usage-panel > .usage-panel-head { grid-column: auto; }
  .usage-summary-list { margin-top: 8px; }
  .usage-panel-head { align-items: stretch; flex-direction: column; }
  .usage-metric-select { width: 100%; max-width: none; }
  .usage-records-panel > .usage-panel-head { align-items: flex-start; }
  .usage-pagination { align-items: stretch; flex-direction: column; }
  .usage-pagination > div, .usage-pagination .btn { flex: 1; }
}

/* ---- Collapsed sidebar ---- */
.shell.is-collapsed { grid-template-columns: 74px minmax(0, 1fr); }
.shell.is-collapsed .wordmark .name,
.shell.is-collapsed .nav-item span,
.shell.is-collapsed .nav-label { display: none; }
.shell.is-collapsed .nav-item { justify-content: center; padding: 10px 0; }
/* Stack brand mark + tool buttons vertically so they fit the narrow rail. */
.shell.is-collapsed .sidebar-brand {
  flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 2px;
}
.shell.is-collapsed .sidebar-tools { flex-direction: column; gap: 4px; }

/* ---- Light theme ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6F9; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F5F8; --surface-3: #E9ECF1;
  --line: #E3E7ED; --line-2: #D3D8E0;
  --ink: #161A20; --ink-dim: #515866; --ink-faint: #8B93A1;
  --accent-deep: #EEF6D6; --on-accent: #1A2103;
  --shadow: 0 12px 32px -18px rgba(20, 30, 50, 0.28);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] body { background: var(--bg); }
:root[data-theme="light"] body::before {
  background:
    radial-gradient(900px 540px at 78% -8%, rgba(45,212,191, 0.10), transparent 60%),
    radial-gradient(800px 600px at -6% 108%, rgba(80, 120, 200, 0.06), transparent 55%);
}
:root[data-theme="light"] .sidebar { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(244,246,249,0.9)); }
:root[data-theme="light"] .donut-total { fill: var(--ink); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .topbar-right { width: 100%; justify-content: space-between; flex-wrap: wrap; }
}

/* ============================================================================
   PREMIUM DASHBOARD v2 — reference-matched chrome + live metering
   ========================================================================== */

/* ---- Reference-style active nav: emerald text, tinted fill, left accent ---- */
.nav-item.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item.is-active .ico { color: var(--accent); }

/* ---- Top bar: notification bell + language selector ---- */
.topbar-icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-dim); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.topbar-icon-btn:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.topbar-icon-btn .ico { width: 18px; height: 18px; }
.topbar-icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.lang-select {
  appearance: none; background: var(--surface); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 28px 8px 12px; font-family: inherit; font-size: 13px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0AA' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.lang-select:hover { color: var(--ink); border-color: var(--line-2); }
.balance-pill .ico { width: 15px; height: 15px; }
.acct-chip { cursor: pointer; transition: border-color 0.12s; }
.acct-chip:hover { border-color: var(--line-2); }
.acct-chip .chip-role { font-size: 10.5px; color: var(--ink-faint); }
.acct-chip-meta { display: grid; line-height: 1.15; min-width: 0; }

/* ---- Live streaming strip ---- */
.live-strip {
  display: grid; gap: 14px; margin-top: 22px; padding: 18px 20px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background:
    radial-gradient(140% 160% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    var(--surface);
  box-shadow: var(--hairline);
}
.live-strip.is-active { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 15px; font-weight: 600; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); }
.live-strip.is-active .live-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: live 1.4s var(--ease) infinite; }
.live-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.live-metric { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 12px 14px; display: grid; gap: 6px; }
.live-metric .lm-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.live-metric .lm-v { font-family: var(--mono); font-size: 20px; font-weight: 600; }
.live-metric.accent .lm-v { color: var(--accent); }
.live-streams { display: grid; gap: 8px; }
.live-stream-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); padding: 10px 13px; font-size: 13px;
}
.live-stream-row .lsr-model { font-family: var(--mono); color: var(--ink); }
.live-stream-row .lsr-meta { color: var(--ink-faint); font-family: var(--mono); font-size: 12px; }
.live-stream-row .lsr-spacer { flex: 1; }

/* stream / lifecycle status badges */
.sbadge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; padding: 3px 9px; border-radius: var(--r-pill); text-transform: none; }
.sbadge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sbadge.active   { background: var(--accent-glow); color: var(--accent); }
.sbadge.settling { background: var(--warn-bg); color: var(--warn); }
.sbadge.settled  { background: var(--ok-bg); color: var(--ok); }
.sbadge.stopped, .sbadge.debt { background: var(--danger-bg); color: var(--danger); }
.sbadge.mute { background: var(--surface-3); color: var(--ink-dim); }

/* ---- Provider card: avg-response footer + colored dot ---- */
.provider-head .provider-name { display: inline-flex; align-items: center; gap: 8px; }
.provider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.provider-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-faint); }
.provider-foot .mono { color: var(--ink-dim); }

/* ---- Model distribution: donut + table side by side ---- */
.model-split { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0,1fr); gap: 20px; align-items: start; }
.model-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.model-table th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.model-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.model-table tbody tr:last-child td { border-bottom: none; }
.model-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.model-table .m-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); color: var(--ink); }
.model-table .m-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.share-bar { position: relative; height: 5px; margin-top: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.share-bar > i { display: block; height: 100%; border-radius: var(--r-pill); }
@media (max-width: 820px) { .model-split { grid-template-columns: 1fr; } }

/* ---- Dashboard recent-usage table ---- */
.dash-usage-wrap { max-height: 460px; overflow: auto; }
.dash-usage-wrap .table { min-width: 860px; }
.dash-usage-wrap .table thead th { position: sticky; top: 0; z-index: 1; }
.stream-tag { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: var(--r-pill); }
.stream-tag.on { background: var(--accent-glow); color: var(--accent); }
.stream-tag.off { background: var(--surface-3); color: var(--ink-dim); }

/* ---- Loading / error states for panels ---- */
.dash-error { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 40px 18px; color: var(--ink-dim); }
.dash-error .ico { width: 26px; height: 26px; color: var(--danger); }

@media (max-width: 1080px) { .live-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .live-metrics { grid-template-columns: 1fr; } }

/* ============================================================
   PUBLIC PRICING PAGE (/pricing)
   ============================================================ */
.pricing-page { display: block; background: var(--bg); color: var(--ink); overflow-x: hidden; }
.pricing-page #main { max-width: 1120px; margin: 0 auto; padding: 0 max(22px, env(safe-area-inset-left)) 80px max(22px, env(safe-area-inset-left)); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-sm); z-index: 50; }
.skip-link:focus { left: 12px; top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; max-width: 1120px; margin: 0 auto; padding: 18px max(22px, env(safe-area-inset-left)); }

/* /pricing only: a wider content canvas than the other pages sharing
   .pricing-page (credits, add-credits), which keep their own narrower
   layouts unchanged. */
.pricing-page-wide #main { max-width: 1280px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.pricing-page-wide .pp-top { max-width: 1280px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.pp-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pp-nav a:not(.btn) { color: var(--ink-dim); text-decoration: none; font-size: 14px; }
.pp-nav a:not(.btn):hover { color: var(--ink); }
.pp-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.pp-cta-group { display: flex; gap: 8px; }

.pp-hero { text-align: center; padding: 56px 0 40px; }
.pp-hero h1, .pp-hero h2 { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0 12px; }
.pp-lede { color: var(--ink-dim); font-size: 17px; max-width: 620px; margin: 0 auto 26px; line-height: 1.55; }
.pp-hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pp-hero-note { color: var(--accent); font-weight: 600; margin-top: 18px; }
.pp-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-deep); color: var(--accent); border: 1px solid rgba(45,212,191,0.3); padding: 6px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.pp-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.pp-section { padding: 34px 0; border-top: 1px solid var(--line); }
.pp-section > h2 { font-size: 24px; letter-spacing: -0.01em; margin: 0 0 6px; }
.pp-muted { color: var(--ink-dim); font-size: 14px; }

/* offer */
.pp-offer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-top: 18px; }
.pp-offer-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.pp-offer-card h3 { margin: 0 0 10px; font-size: 18px; }
.pp-offer-card p { color: var(--ink-dim); line-height: 1.55; margin: 0 0 10px; }
.pp-offer-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; align-content: start; }
.pp-offer-points li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; color: var(--ink-dim); }
.pp-offer-points strong { color: var(--ink); }

/* calculator */
.pp-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.pp-calc-controls { display: grid; gap: 16px; align-content: start; }
.pp-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.pp-field > span, .pp-field legend { font-size: 13px; color: var(--ink-dim); font-weight: 600; }
.pp-help { font-size: 12px; color: var(--ink-faint); }
.pp-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; width: max-content; }
.pp-seg-btn { border: 0; background: transparent; color: var(--ink-dim); padding: 6px 18px; border-radius: var(--r-pill); cursor: pointer; font: inherit; font-weight: 600; }
.pp-seg-btn.is-active { background: var(--accent); color: var(--on-accent); }
.pp-seg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pp-fx-note { font-size: 12px; color: var(--warn); margin: 4px 0 0; }
.pp-amount { display: flex; align-items: center; gap: 6px; }
.pp-amount-sym { color: var(--ink-dim); font-weight: 600; }
.pp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pp-preset { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-dim); border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.pp-preset:hover { border-color: var(--accent-dim); color: var(--ink); }
.pp-ratio input[type=range] { width: 100%; accent-color: var(--accent); }
.pp-calc-result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.pp-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-res { display: grid; gap: 2px; }
.pp-res-k { font-size: 12px; color: var(--ink-faint); }
.pp-res-v { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.pp-assumptions { margin-top: 14px; }

/* model table */
.pp-model-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.pp-search { flex: 1 1 200px; }
.pp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.pp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 780px; }
.pp-table th, .pp-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pp-table thead th { background: var(--surface-2); color: var(--ink-dim); font-size: 12px; font-weight: 600; position: sticky; top: 0; }
.pp-table tbody tr:hover, .pp-table tr:hover { background: var(--surface-2); }
.pp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pp-mname { font-weight: 600; }
.pp-mid { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.pp-ref { color: var(--ink-faint); text-decoration: line-through; }
.pp-save { color: var(--accent); font-weight: 600; font-size: 13px; }
.pp-copy { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-dim); border-radius: var(--r-sm); padding: 4px 9px; cursor: pointer; font: inherit; font-size: 12px; margin-right: 4px; }
.pp-copy:hover { border-color: var(--accent-dim); color: var(--ink); }

/* mobile cards (hidden on desktop) */
.pp-cards { display: none; gap: 12px; margin-top: 4px; }
.pp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.pp-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pp-card-rows { display: grid; gap: 6px; margin: 12px 0 0; }
.pp-card-rows > div { display: flex; justify-content: space-between; }
.pp-card-rows dt { color: var(--ink-faint); font-size: 13px; margin: 0; }
.pp-card-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-card-copy { margin-top: 12px; }

/* features */
.pp-features { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pp-features li { position: relative; padding-left: 26px; color: var(--ink-dim); line-height: 1.5; }
.pp-features li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-deep); border: 1px solid var(--accent-dim); }

/* faq */
.pp-faq { display: grid; gap: 8px; margin-top: 16px; }
.pp-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 16px; }
.pp-faq-item summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style-position: inside; }
.pp-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.pp-faq-item p { color: var(--ink-dim); margin: 0 0 12px; line-height: 1.55; }

.pp-foot { padding-top: 30px; border-top: 1px solid var(--line); display: grid; gap: 8px; }

.pp-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink); padding: 10px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow); z-index: 60; font-size: 14px; }

/* focus visibility everywhere on the page */
.pricing-page a:focus-visible, .pricing-page button:focus-visible, .pricing-page select:focus-visible, .pricing-page input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* responsive */
@media (max-width: 860px) {
  .pp-offer-grid, .pp-calc, .pp-res-grid { grid-template-columns: 1fr; }
  .pp-features { grid-template-columns: 1fr; }
  .pp-table-wrap { display: none; }
  .pp-cards { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page * { transition: none !important; animation: none !important; }
}

/* admin pricing presentation editor */
.pp-admin-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.pp-admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 12px; align-content: start; }
.pp-admin-card h3 { margin: 0; font-size: 16px; }
.pp-admin-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.pp-admin-card .check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: 14px; }
@media (max-width: 860px) { .pp-admin-grid { grid-template-columns: 1fr; } }

/* ============================================================
   BUY CREDITS PAGE (/credits)
   ============================================================ */
.cr-accent { color: var(--accent); }
.btn-lg { padding: 14px 26px; font-size: 15px; }

/* Center every section's heading/intro block on this conversion page. */
.pricing-page .pp-section { text-align: center; }
.pricing-page .pp-section > h2 { font-size: clamp(24px, 3.2vw, 32px); }
.pricing-page .pp-section > .pp-muted { max-width: 560px; margin-left: auto; margin-right: auto; }

.cr-hero h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.02; }
.cr-hero .cr-accent {
  background: linear-gradient(120deg, #5eead4, var(--accent) 55%, var(--accent-dim));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---- Package grid: centered, balanced, capped width ---- */
.cr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 244px));
  gap: 18px;
  margin: 30px auto 0;
  max-width: 1000px;
  justify-content: center;
  align-items: stretch;
}

/* ---- Package card: a metering readout. The PAYABLE price is the hero. ---- */
.cr-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px;
  padding: 30px 22px 24px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(45,212,191,0.06), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--hairline);
  transition: transform 0.14s var(--ease), border-color 0.16s, box-shadow 0.16s;
}
.cr-card:hover { transform: translateY(-4px); border-color: var(--accent-dim); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-glow); }

/* Featured card (JS adds .is-featured to the middle package). */
.cr-card.is-featured { border-color: rgba(45,212,191,0.45); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-glow), 0 24px 60px -30px var(--accent-glow); }
.cr-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--on-accent);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 6px 18px -8px var(--accent-glow);
}

/* Discount ribbon — a solid, confident chip (not a faint outline). */
.cr-off {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--on-accent);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: var(--r-pill); margin-bottom: 12px;
}

.cr-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
/* What you receive. */
.cr-face { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.cr-face b { color: var(--accent); font-weight: 700; }

.cr-rule { width: 34px; height: 1px; background: var(--line-2); margin: 13px 0 11px; }

.cr-pay-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.cr-orig { color: var(--ink-faint); font-size: 15px; text-decoration: line-through; text-decoration-color: var(--danger); margin-top: 3px; }
/* THE HERO: what you actually pay. */
.cr-pay-hero {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 2px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); margin-top: 1px; white-space: nowrap;
  text-shadow: 0 0 34px var(--accent-glow);
}
.cr-pay-hero .cur { color: var(--ink-dim); font-size: 0.5em; font-weight: 600; letter-spacing: 0; }

.cr-save { display: inline-block; color: var(--accent); background: var(--accent-deep); border: 1px solid rgba(45,212,191,0.25); font-weight: 600; font-size: 12.5px; padding: 4px 12px; border-radius: var(--r-pill); margin: 14px 0 0; white-space: nowrap; }
/* The save chip begins the bottom cluster; margin-top:auto pushes the chip+button
   pair to the card floor so buttons align across cards even if one runs taller. */
.cr-card .cr-save { margin-top: auto; }
.cr-card .cr-buy { width: 100%; margin-top: 18px; }

/* ---- Custom calculator ---- */
.cr-calc { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; margin: 28px auto 0; max-width: 760px; text-align: left; align-items: stretch; }
.cr-calc-input { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; align-content: center; }
.cr-calc-out { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 11px; align-content: center; box-shadow: var(--hairline); }
.cr-res { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cr-res-k { color: var(--ink-dim); font-size: 13.5px; }
.cr-res-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; }
.cr-res.is-hero .cr-res-k { color: var(--ink); font-weight: 600; }
.cr-res.is-hero .cr-res-v { font-size: 30px; color: var(--accent); text-shadow: 0 0 28px var(--accent-glow); }
.cr-calc-out .cr-buy { margin-top: 6px; }

/* ---- How it works: an ordered, numbered sequence (order carries meaning) ---- */
.cr-steps { list-style: none; padding: 0; margin: 26px auto 0; max-width: 860px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
.cr-steps li { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px; }
.cr-step-n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-deep); color: var(--accent); border: 1px solid rgba(45,212,191,0.3); font-family: var(--mono); font-weight: 700; }
.cr-steps strong { display: block; margin-bottom: 2px; }
.cr-steps p { margin: 0; color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; }

/* Pricing page "How credits work": a full-width connected timeline. The
   page container itself is now 1400px (see .pricing-page #main above), so
   this section just needs left alignment — no separate breakout needed. */
.pp-section-wide { text-align: left; }
.pp-section-wide > h2 { text-align: left; }
.cr-timeline {
  list-style: none; margin: 44px 0 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: left;
}
.cr-timeline li { position: relative; padding: 0 32px 0 0; }
.cr-timeline li:not(:first-child) { padding-left: 32px; }
.cr-timeline li::before {
  content: ""; position: absolute; top: 21px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--line-2) 90%);
}
.cr-timeline li:first-child::before { left: 32px; }
.cr-timeline li:last-child::before { right: 32px; }
.cr-tl-num {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--accent);
  color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 6px var(--bg); margin-bottom: 20px;
}
.cr-timeline strong { display: block; font-size: 18px; margin-bottom: 8px; }
.cr-timeline p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; max-width: 30em; }

/* Center the remaining shared sections on this page. */
.pricing-page .pp-features { max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
.pricing-page .pp-faq { max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
.pricing-page .pp-hero-cta { justify-content: center; }

/* /pricing only: widen the features list and FAQ to use the wider 1400px
   container instead of the old narrow 720px cap (which would strand them
   in the middle of the page), while keeping the lede paragraph readable.
   The features 2-column override is gated to min-width:861px so it never
   fights the max-width:860px mobile collapse below, regardless of source
   order or selector specificity. */
.pricing-page-wide .pp-features { max-width: none; }
@media (min-width: 861px) {
  .pricing-page-wide .pp-features { grid-template-columns: repeat(2, 1fr); }
}
.pricing-page-wide .pp-faq { max-width: 860px; }
.pricing-page-wide .pp-lede { max-width: 680px; }

@media (max-width: 860px) {
  .cr-steps { grid-template-columns: repeat(2, 1fr); }
  .cr-timeline { grid-template-columns: 1fr; gap: 32px; }
  .cr-timeline li, .cr-timeline li:not(:first-child) { padding-left: 0; padding-right: 0; }
  .cr-timeline li::before { display: none; }
}
@media (max-width: 560px) {
  .cr-steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cr-calc { grid-template-columns: 1fr; }
}
/* Mobile: keep TWO package columns (never collapse to one); scale the card
   internals so a full readout fits a ~360px phone. Extra row-gap gives the
   'Most popular' flag clearance so it never overlaps the card above. */
@media (max-width: 560px) {
  .pricing-page #main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  /* minmax(0,1fr) lets columns shrink below content width — prevents overflow. */
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; max-width: 100%; }
  .cr-card { padding: 20px 12px 18px; gap: 2px; }
  .cr-off { margin-bottom: 8px; font-size: 10px; padding: 4px 9px; }
  .cr-eyebrow, .cr-pay-label { font-size: 9.5px; letter-spacing: 0.1em; }
  .cr-face { font-size: 17px; }
  .cr-rule { margin: 9px 0 7px; }
  .cr-orig { font-size: 12.5px; }
  .cr-pay-hero { font-size: 34px; }
  .cr-save { font-size: 11px; padding: 3px 9px; }
  .cr-card .cr-buy { margin-top: 13px; padding: 11px 6px; font-size: 12.5px; }
  .cr-flag { font-size: 9px; padding: 3px 9px; top: -10px; }
  .cr-steps { grid-template-columns: 1fr; }
}
/* Very narrow phones (<=330px): two columns would genuinely overflow, so fall
   back to a single column. The payable hero can breathe at full size again. */
@media (max-width: 330px) {
  .cr-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 320px; }
}

/* ============================================================================
   PUBLIC HOMEPAGE (/) — approved marketing design (hp-*). Scoped under .hp.
   ============================================================================ */
.home-page {
  --bg: #050807;
  --bg-2: #080d0c;
  --surface: #0b1110;
  --surface-2: #0e1614;
  --surface-3: #14201d;
  --line: rgba(176, 219, 210, 0.1);
  --line-2: rgba(176, 219, 210, 0.18);
  --ink: #f3f7f6;
  --ink-dim: #9aa9a5;
  --ink-faint: #687773;
  background: var(--bg);
  color: var(--ink);
}
.hp { position: relative; z-index: 1; min-height: 100vh; width: 100%; overflow-x: hidden; }
.hp-main { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px 72px; }
/* grid/flex children must be allowed to shrink below content width, else the
   terminal's nowrap lines blow the track out past the viewport on mobile. */
.hp-hero-copy, .hp-term-wrap { min-width: 0; }

/* ---- Nav ---- */
.hp-nav {
  position: relative;
  z-index: 20;
  width: 100%; max-width: 1320px; min-height: 76px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; gap: 32px;
  letter-spacing: 0;
}
.hp-brand { display: inline-flex; align-items: center; gap: 11px; }
.hp-wordmark { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0; }
.hp-wordmark .tick { color: var(--accent); }
.hp-nav-links { min-width: 0; flex: 1; display: flex; align-items: center; gap: 28px; }
.hp-nav-primary { margin: 0 auto; display: flex; align-items: center; gap: 30px; }
.hp-nav-actions { display: flex; align-items: center; gap: 22px; }
.hp-nav-links a:not(.btn) { color: var(--ink-dim); font-size: 14px; font-weight: 500; letter-spacing: 0; transition: color 0.18s var(--ease); }
.hp-nav-links a:not(.btn):hover { color: var(--ink); }
.hp-nav-cta { min-height: 40px; padding: 8px 15px; font-size: 14px; letter-spacing: 0; }

/* ---- Mobile menu toggle (hidden on desktop; shown <=900px) ---- */
.hp-nav-toggle {
  display: none; flex: none; width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r); color: var(--ink); cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}
.hp-nav-toggle:hover { border-color: var(--line-3, var(--accent)); }
.hp-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp-nav-toggle-box { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.hp-nav-toggle-bar {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: currentColor; transition: transform 0.2s, opacity 0.2s;
}
.hp-nav-toggle[aria-expanded="true"] .hp-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hp-nav-toggle[aria-expanded="true"] .hp-nav-toggle-bar:nth-child(2) { opacity: 0; }
.hp-nav-toggle[aria-expanded="true"] .hp-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero ---- */
.hp-hero {
  position: relative; isolation: isolate; min-height: calc(100svh - 140px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0; letter-spacing: 0;
}
.hp-hero + .hp-sec { margin-top: 32px; }
.hp-hero-grid-bg {
  position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(ellipse 46% 54% at 78% 40%, rgba(45, 212, 191, 0.11), transparent 70%),
    radial-gradient(ellipse 34% 44% at 14% 26%, rgba(45, 212, 191, 0.035), transparent 72%),
    linear-gradient(rgba(165, 211, 202, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 211, 202, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.92), rgba(0,0,0,0.3) 82%, transparent);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.92), rgba(0,0,0,0.3) 82%, transparent);
}
.hp-hero-grid {
  width: 100%; flex: 1; display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(44px, 5vw, 76px); align-items: center; padding: 50px 0 44px;
}
.hp-hero-copy { position: relative; z-index: 2; min-width: 0; }
.hp-badge {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: rgba(10, 17, 15, 0.86); color: var(--ink-dim);
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 10px 30px rgba(0,0,0,0.2);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.hp-badge:hover { transform: translateY(-1px); border-color: rgba(45,212,191,0.34); box-shadow: 0 12px 30px rgba(0,0,0,0.28); }
.hp-badge-label, .hp-badge-offer { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; }
.hp-badge-offer { color: var(--accent); border-left: 1px solid var(--line-2); background: rgba(45,212,191,0.045); }
.hp-badge-offer strong { color: inherit; font-weight: 600; }
.hp-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(45,212,191,0.65); }
.hp-title {
  margin: 24px 0 0; max-width: 720px; font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 5.15vw, 66px); line-height: 1.02; letter-spacing: 0;
}
.hp-title-accent { color: var(--accent); text-shadow: 0 0 34px rgba(45,212,191,0.12); }
.hp-sub { margin: 22px 0 0; color: var(--ink-dim); font-size: 16px; line-height: 1.65; max-width: 35em; }
.hp-sub b { color: var(--ink); font-weight: 600; }
.hp-checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 22px; }
.hp-checks li { position: relative; min-width: 0; padding-left: 24px; color: #d6dedc; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.hp-checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: 13px; font-weight: 700;
}

.hp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }
.hp-btn-lg { min-height: 48px; padding: 12px 22px; font-size: 14.5px; border-radius: 7px; letter-spacing: 0; }
.btn-primary.hp-btn-lg { box-shadow: 0 10px 30px -12px rgba(45,212,191,0.65), inset 0 1px 0 rgba(255,255,255,0.28); }
.hp-hero .hp-btn-lg:hover { transform: translateY(-2px); }
.hp-hero .hp-btn-lg:active { transform: translateY(0); }
.hp-arrow { transition: transform 0.16s var(--ease); }
.hp-btn-lg:hover .hp-arrow { transform: translateX(3px); }
.hp-trustline { margin: 21px 0 0; color: var(--ink-faint); font-size: 12px; letter-spacing: 0; }

/* ---- Hero terminal ---- */
.hp-term-stage { position: relative; min-width: 0; padding: 48px 18px 28px 20px; }
.hp-term-wrap { position: relative; min-width: 0; perspective: 900px; }
.hp-term-glow {
  position: absolute; inset: -18% -12% -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 52% 48%, rgba(45,212,191,0.18), transparent 66%);
  filter: blur(30px); opacity: 0.72;
}
.hp-term-depth {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: 1px solid rgba(139,196,185,0.1); border-radius: 8px;
  background: rgba(8,14,13,0.64); box-shadow: 0 20px 70px rgba(0,0,0,0.24);
}
.hp-term-depth-back { transform: translate(24px, 24px) rotate(0.7deg); opacity: 0.42; }
.hp-term-depth-mid { transform: translate(12px, 12px) rotate(0.3deg); opacity: 0.68; }
.hp-term {
  position: relative; z-index: 2; overflow: hidden;
  background: rgba(7, 12, 11, 0.96); border: 1px solid rgba(156,209,199,0.2); border-radius: 8px;
  box-shadow: 0 38px 100px -34px rgba(0,0,0,0.94), inset 0 1px 0 rgba(255,255,255,0.035);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.hp-term:hover { border-color: rgba(45,212,191,0.42); box-shadow: 0 42px 110px -34px rgba(0,0,0,0.96), 0 0 46px rgba(45,212,191,0.08), inset 0 1px 0 rgba(255,255,255,0.05); transform: translateY(-2px); }
.hp-term-bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 47px; padding: 11px 15px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.018);
}
.hp-term-dots { display: inline-flex; gap: 7px; }
.hp-term-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); display: block; }
.hp-term-dots i:first-child { background: #F2645A; }
.hp-term-dots i:nth-child(2) { background: #F5B544; }
.hp-term-dots i:nth-child(3) { background: #46D39A; }
.hp-term-tab { min-width: 0; color: var(--ink-dim); font-size: 11.5px; font-family: var(--mono); letter-spacing: 0; }
.hp-term-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 8px; color: #6de0b2; border: 1px solid rgba(70,211,154,0.24); border-radius: var(--r-pill); background: rgba(70,211,154,0.055); font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0; }
.hp-term-state > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }

.hp-term-body { min-height: 312px; padding: 26px 26px 24px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
.hp-term-line { margin: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.hp-term-cmd { color: var(--ink); }
.hp-term-prompt { color: var(--accent); margin-right: 8px; font-weight: 600; }
.hp-term-thinking { margin-top: 8px; color: var(--ink-faint); }
.hp-term-caret { color: var(--accent); margin-right: 8px; }
.hp-term-response { margin-top: 22px; color: #d5dddb; overflow-wrap: anywhere; }
.hp-term-response p { margin: 0 0 12px; }
.hp-term-response ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.hp-term-response li { position: relative; padding-left: 18px; }
.hp-term-response li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); }
.hp-meter { display: grid; grid-template-columns: 0.82fr 0.82fr 1.36fr; border-top: 1px solid var(--line); font-family: var(--mono); }
.hp-meter-cell { min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--line); }
.hp-meter-cell:last-child { border-right: 0; }
.hp-meter-k { color: var(--ink-faint); font-size: 9px; font-weight: 500; letter-spacing: 0; }
.hp-meter-v { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.hp-meter-cost .hp-meter-v { color: var(--accent); }
.hp-meter-cost-row { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hp-saving-badge { display: inline-flex; gap: 3px; padding: 3px 6px; border: 1px solid rgba(45,212,191,0.2); border-radius: var(--r-pill); color: var(--accent); background: rgba(45,212,191,0.055); font-family: var(--sans); font-size: 9px; font-weight: 600; white-space: nowrap; }
.hp-term-footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.012); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0; }
.hp-term-footer p { min-width: 0; margin: 0; color: var(--ink-faint); }
.hp-term-footer a { flex: none; color: var(--accent); transition: color 160ms var(--ease); }
.hp-term-footer a:hover { color: #76eadb; }
.hp-complete-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(70,211,154,0.6); vertical-align: 1px; }
.hp-term-note { position: absolute; z-index: 4; top: 0; right: 30px; margin: 0; color: #9ed8ce; font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 14px; line-height: 1.25; transform: rotate(-4deg); letter-spacing: 0; }
.hp-term-note-arrow { position: absolute; top: 30px; right: -28px; width: 46px; height: 30px; border-right: 1px solid rgba(45,212,191,0.6); border-bottom: 1px solid rgba(45,212,191,0.6); border-radius: 0 0 26px 0; transform: rotate(19deg); }
.hp-term-note-arrow::after { content: ""; position: absolute; right: -3px; bottom: -2px; width: 7px; height: 7px; border-right: 1px solid rgba(45,212,191,0.75); border-bottom: 1px solid rgba(45,212,191,0.75); transform: rotate(17deg); }

.hp-credibility { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hp-credibility li { min-width: 0; display: grid; gap: 3px; padding: 17px 22px; border-left: 1px solid var(--line); }
.hp-credibility li:first-child { padding-left: 0; border-left: 0; }
.hp-credibility strong { color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; }
.hp-credibility span { color: var(--ink-faint); font-size: 11.5px; }

/* ---- Feature strip ---- */
.hp-features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 40px 0 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); overflow: hidden;
  box-shadow: var(--hairline);
}
.hp-feature { padding: 30px 26px; border-left: 1px solid var(--line); }
.hp-feature:first-child { border-left: 0; }
.hp-feature-ic {
  width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--accent-deep); border: 1px solid var(--line-2); color: var(--accent);
}
.hp-feature-ic .ico { width: 21px; height: 21px; }
.hp-feature h2 { margin: 18px 0 7px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.hp-feature p { margin: 0; color: var(--ink-dim); font-size: 14px; line-height: 1.55; }

/* ---- Trust band ---- */
.hp-trust { margin: 56px 0 0; text-align: center; }
.hp-trust-head { margin: 0; color: var(--ink-dim); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; }
.hp-trust-row {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: center;
  gap: 20px 56px; margin: 26px 0 0; flex-wrap: wrap;
}
.hp-trust-item { display: inline-flex; align-items: center; gap: 11px; }
.hp-trust-ic {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--accent);
}
.hp-trust-ic .ico { width: 19px; height: 19px; }
.hp-trust-label { color: var(--ink); font-size: 14.5px; font-weight: 500; }

/* ---- Homepage responsive ---- */
@media (max-width: 1024px) {
  .hp-hero { min-height: auto; }
  .hp-hero-grid { grid-template-columns: 1fr; gap: 42px; padding: 48px 0 38px; }
  .hp-hero-copy { max-width: 720px; }
  .hp-term-stage { width: 100%; max-width: 760px; margin: 0 auto; }
  .hp-features { grid-template-columns: repeat(2, 1fr); }
  .hp-feature:nth-child(3) { border-left: 0; }
  .hp-feature:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .hp-nav { padding: 16px 20px; }
  .hp-nav-toggle { display: inline-flex; }
  .hp-nav-links {
    position: absolute; top: calc(100% + 8px); right: 20px; left: 20px;
    z-index: 40; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px; border: 1px solid var(--line-2); border-radius: 8px;
    background: rgba(8,13,12,0.98); box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
  }
  .hp-nav-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .hp-nav-primary, .hp-nav-actions { display: grid; gap: 4px; margin: 0; }
  .hp-nav-actions { padding-top: 4px; border-top: 1px solid var(--line); }
  .hp-nav-links a:not(.btn) {
    padding: 11px 12px; border-radius: 6px; font-size: 15px;
  }
  .hp-nav-links a:not(.btn):hover { background: var(--surface-2); }
  .hp-nav-cta { margin-top: 4px; text-align: center; padding: 11px 12px; font-size: 15px; }
  .hp-trust-row { grid-template-columns: repeat(2, auto); gap: 22px 40px; }
}
body.hp-nav-open { overflow: hidden; }
@media (max-width: 760px) {
  .hp-main { padding: 0 20px 56px; }
  .hp-hero-grid { padding-top: 36px; }
  .hp-title { font-size: clamp(40px, 11vw, 52px); }
  .hp-term-stage { padding-inline: 4px 14px; }
  .hp-credibility { grid-template-columns: 1fr; }
  .hp-credibility li, .hp-credibility li:first-child { padding: 13px 0; border-left: 0; border-top: 1px solid var(--line); }
  .hp-credibility li:first-child { border-top: 0; }
}
@media (max-width: 620px) {
  .hp-checks { grid-template-columns: 1fr; gap: 11px; }
  .hp-features { grid-template-columns: 1fr; }
  .hp-feature { border-left: 0; border-top: 1px solid var(--line); }
  .hp-feature:first-child { border-top: 0; }
  .hp-cta-row .hp-btn-lg { flex: 1 1 auto; }
  .hp-term-stage { padding-top: 76px; }
  .hp-term-note { left: 8px; right: auto; }
  .hp-term-note-arrow { right: -36px; }
  .hp-term-body { min-height: 0; padding: 20px 18px; font-size: 11.5px; }
  .hp-meter { grid-template-columns: 1fr 1fr; }
  .hp-meter-cost { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .hp-meter-cell:nth-child(2) { border-right: 0; }
  .hp-term-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  .hp-trust-row { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 380px) {
  .hp-nav { padding: 14px 16px; }
  .hp-nav-links { right: 16px; left: 16px; }
  .hp-title { font-size: 37px; }
  .hp-badge { max-width: 100%; font-size: 10.5px; }
  .hp-badge-label, .hp-badge-offer { padding-inline: 8px; }
  .hp-cta-row { display: grid; grid-template-columns: 1fr; }
  .hp-term-body { font-size: 10.5px; padding: 18px 14px 20px; }
 }
@media (prefers-reduced-motion: reduce) {
  .home-page * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   STARTUPAPI WELCOME - server-driven homepage onboarding and customer home
   ========================================================================== */
.welcome-page {
  min-height: 100vh;
  letter-spacing: 0;
  background: var(--bg);
}
.welcome-page .btn,
.welcome-page h1,
.welcome-page h2,
.welcome-page h3,
.welcome-page p,
.welcome-page a,
.welcome-page button,
.welcome-page span,
.welcome-page small { letter-spacing: 0; }

.welcome-nav {
  position: relative;
  z-index: 5;
  width: min(1260px, calc(100% - 48px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.welcome-nav-links { display: flex; align-items: center; gap: 24px; color: var(--ink-dim); }
.welcome-nav-links > a,
.welcome-nav-links > span > a { min-height: 44px; display: inline-flex; align-items: center; }
.welcome-nav-links > a:hover,
.welcome-nav-links > span > a:not(.btn):hover { color: var(--ink); }
#homeAccountLink { display: inline-flex; align-items: center; gap: 12px; }
.welcome-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.welcome-nav-toggle span { width: 18px; height: 1px; background: var(--ink); }

.welcome-page #main {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 72px 0 88px;
}
.welcome-hero { max-width: 850px; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; }
.welcome-eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.welcome-hero h1 { margin: 0; font-size: 56px; line-height: 1.05; font-weight: 600; }
.welcome-lede { margin: 16px 0 0; color: var(--ink-dim); font-size: 20px; }
.welcome-motivation { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; color: var(--accent); }
.welcome-motivation strong { font-size: 14px; font-weight: 500; }
.welcome-motivation span { color: var(--ink-dim); font-size: 13px; }
.welcome-loading {
  width: min(560px, 100%);
  height: 120px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  animation: welcome-pulse 1.4s var(--ease) infinite;
}
@keyframes welcome-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.8; } }

.welcome-status {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--ok);
  background: var(--ok-bg);
  border: 0 solid transparent;
  border-radius: var(--r-sm);
  transition: grid-template-rows 180ms var(--ease), opacity 180ms var(--ease), margin 180ms var(--ease), padding 180ms var(--ease);
}
.welcome-status.is-visible {
  grid-template-rows: 1fr;
  margin: 22px 0 0;
  padding: 12px 14px;
  opacity: 1;
  border-width: 1px;
  border-color: rgba(70, 211, 154, 0.35);
}

.welcome-region { margin-top: 34px; }
.welcome-card,
.welcome-success {
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow), var(--hairline);
  padding: 28px;
}
.welcome-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.welcome-card-head h2 { margin: 0; font-size: 18px; }
.welcome-card-head > span { color: var(--ink-dim); font-size: 12px; }
.welcome-progress { height: 6px; margin-top: 18px; overflow: hidden; background: var(--line-2); border-radius: var(--r-pill); }
.welcome-progress > span { display: block; height: 100%; background: var(--accent); transition: width 360ms var(--ease); }

.welcome-step-summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.welcome-step-summary li {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  color: var(--ink-dim);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.welcome-step-summary li.is-complete span:first-child { color: var(--ok); }
.welcome-step-summary li.is-current { color: var(--ink); border-color: rgba(45, 212, 191, 0.45); }

.welcome-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: 18px;
  margin-top: 18px;
}
.welcome-current {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px;
  background: var(--bg-2);
  border: 1px solid rgba(45, 212, 191, 0.4);
  border-radius: var(--r-sm);
  animation: welcome-rise 220ms var(--ease) both;
}
@keyframes welcome-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.welcome-current h2 { margin: 0; font-size: 32px; line-height: 1.15; }
.welcome-why-label { margin: 22px 0 0; color: var(--ink-dim); font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.welcome-why { margin: 7px 0 0; color: var(--ink-dim); font-size: 16px; }
.welcome-eta { margin: 14px 0 0; color: var(--accent); font-size: 13px; }
.welcome-primary { min-height: 46px; margin-top: auto; }
.welcome-tip { width: 100%; display: grid; gap: 3px; margin-top: 14px; padding: 11px 12px; border: 1px solid rgba(245, 181, 68, 0.28); border-radius: var(--r-sm); color: var(--ink-dim); background: var(--warn-bg); font-size: 12px; }
.welcome-tip strong { color: var(--warn); font-size: 11px; }

.welcome-visual {
  margin: 0;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.browser-frame { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.browser-frame span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.welcome-visual img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.welcome-visual figcaption { margin: 10px 2px 0; color: var(--ink-dim); font-size: 11px; }
.welcome-terminal { min-height: 316px; display: flex; flex-direction: column; gap: 6px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-family: var(--mono); font-size: 13px; }
.terminal-command::before { content: "$ "; color: var(--ink-faint); }
.terminal-success { margin-top: 16px; color: var(--ok); font-weight: 600; }
.terminal-detail { color: var(--ink-dim); }
.terminal-prompt { margin-top: 18px; color: var(--ink); }
.terminal-prompt::before { content: "> "; color: var(--accent); }

.welcome-support-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; margin-top: 18px; }
.welcome-unlocked,
.welcome-help {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.welcome-unlocked h3,
.welcome-help h3 { margin: 0 0 12px; font-size: 14px; }
.welcome-unlocked ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; }
.welcome-unlocked li { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; background: var(--surface); color: var(--ink-dim); font-size: 12px; border-left: 2px solid var(--ok); }
.welcome-unlocked li span { color: var(--ok); }
.welcome-help-link { min-height: 38px; display: flex; align-items: center; color: var(--ink-dim); border-top: 1px solid var(--line); font-size: 12px; }
.welcome-help-link:first-of-type { border-top: 0; }
.welcome-help-link:hover { color: var(--accent); }

.welcome-success { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; animation: welcome-rise 220ms var(--ease) both; }
.welcome-success-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: var(--accent-deep); font-size: 25px; font-weight: 700; }
.welcome-success-copy h2 { margin: 0; font-size: 30px; }
.welcome-success-copy > p:last-child { margin: 8px 0 0; color: var(--ink-dim); }
.welcome-quick-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.welcome-quick-action { min-height: 46px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg-2); }
.welcome-quick-action:hover { border-color: var(--accent); }
.welcome-complete-summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.welcome-complete-summary p { margin: 3px 0 0; color: var(--ink-dim); font-size: 12px; }
.welcome-review { margin-top: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.welcome-review[hidden] { display: none; }
.welcome-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.welcome-review-head h2 { margin: 0; font-size: 22px; }
.welcome-review-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.welcome-review-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.welcome-review-check { color: var(--ok); }
.welcome-review-step h3 { margin: 0; font-size: 14px; }
.welcome-review-step p { margin: 5px 0; color: var(--ink-dim); font-size: 12px; }
.welcome-review-step small { color: var(--accent); font-size: 11px; }

.customer-home { margin-top: 14px; }
.customer-home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 14px; }
.customer-snapshot,
.home-update,
.home-feed-error { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.customer-snapshot > h2,
.home-update h2,
.home-feed-error h2 { margin: 0; font-size: 17px; }
.customer-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.customer-metrics > div { min-height: 76px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.customer-metrics span { display: block; color: var(--ink-dim); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.customer-metrics strong { display: block; margin-top: 8px; overflow-wrap: anywhere; font-size: 17px; }
.customer-snapshot > h3 { margin: 20px 0 10px; font-size: 14px; }
.customer-activity { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.customer-activity li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.customer-activity li > span { display: grid; gap: 2px; }
.customer-activity small,
.customer-activity time { color: var(--ink-dim); font-size: 11px; }
.customer-activity .is-empty { color: var(--ink-dim); }
.customer-updates { display: grid; align-content: start; gap: 10px; }
.home-update { position: relative; }
.home-update > div { padding-right: 36px; }
.home-update > p { margin: 12px 0 0; color: var(--ink-dim); font-size: 13px; }
.home-update > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font-size: 13px; }
.home-update-dismiss { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 20px; }

.welcome-footer {
  position: relative;
  z-index: 1;
  width: min(1260px, calc(100% - 48px));
  min-height: 90px;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
}
.welcome-footer nav { display: flex; flex-wrap: wrap; gap: 20px; color: var(--ink-dim); }
.welcome-footer a { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 940px) {
  .welcome-focus-grid { grid-template-columns: 1fr; }
  .welcome-current { min-height: 320px; }
  .welcome-support-grid { grid-template-columns: 1fr; }
  .customer-home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .welcome-nav { width: min(100% - 32px, 1260px); }
  .welcome-nav-toggle { display: flex; }
  .welcome-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .welcome-nav-links.is-open { display: flex; }
  .welcome-nav-links > a,
  .welcome-nav-links > span > a { padding: 0 10px; }
  #homeAccountLink { display: flex; flex-direction: column; align-items: stretch; }
  .welcome-page #main { width: min(100% - 32px, 1120px); padding: 46px 0 64px; }
  .welcome-hero { min-height: 190px; }
  .welcome-hero h1 { font-size: 40px; }
  .welcome-lede { font-size: 17px; }
  .welcome-region { margin-top: 24px; }
  .welcome-card,
  .welcome-success { padding: 18px; }
  .welcome-step-summary { display: grid; padding-left: 12px; border-left: 1px solid var(--line-2); }
  .welcome-step-summary li { border: 0; background: transparent; padding: 4px 0; }
  .welcome-current { min-height: 0; padding: 22px; }
  .welcome-current h2 { font-size: 28px; }
  .welcome-primary { width: 100%; margin-top: 24px; }
  .welcome-visual img { aspect-ratio: 4 / 3; }
  .welcome-terminal { min-height: 260px; padding: 18px; font-size: 12px; }
  .welcome-unlocked ul { grid-template-columns: 1fr; }
  .welcome-success { grid-template-columns: 1fr; }
  .welcome-quick-actions { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-complete-summary { align-items: flex-start; }
  .welcome-review-steps { grid-template-columns: 1fr; }
  .customer-metrics { grid-template-columns: 1fr; }
  .customer-activity li { flex-direction: column; }
  .welcome-footer { width: min(100% - 32px, 1260px); align-items: flex-start; flex-direction: column; }
}

@media (max-width: 360px) {
  .welcome-hero h1 { font-size: 34px; }
  .welcome-card,
  .welcome-success,
  .welcome-review,
  .customer-snapshot,
  .home-update { padding: 15px; }
  .welcome-quick-actions { grid-template-columns: 1fr; }
  .welcome-complete-summary { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-page *,
  .welcome-page *::before,
  .welcome-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   CLAUDE CODE GUIDES - shared StartupAPI product language
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* ============================================================================
   STARTUPAPI DOCS — two-tone split (dark instrument rail + light paper canvas)
   All tokens scoped to .docs-page so the homepage is untouched.
   ========================================================================== */
.docs-page {
  min-height: 100vh;
  /* Full dark mode. Content canvas is one step lighter than the rail so the two
     panels read as distinct surfaces without any bright flash. Tokens keep their
     --doc-* names (same structure as before) but resolve to dark values. */
  --doc-paper:   #0C0E12;      /* content canvas — slightly above the near-black rail */
  --doc-raised:  #14171D;      /* raised blocks (callouts, model readout, prereq) */
  --doc-ink:     #ECEEF1;      /* primary text */
  --doc-ink-2:   #A2A8B2;      /* body / secondary — AA on the canvas */
  --doc-ink-3:   #7B818B;      /* meta / captions */
  --doc-line:    #1D2027;      /* hairline dividers */
  --doc-line-2:  #2A2E36;      /* stronger hairline */
  --doc-accent:  #2DD4BF;      /* bright teal reads well on dark */
  --doc-accent-soft: rgba(45, 212, 191, 0.12);
  --doc-code-bg: #07080A;      /* code sits a touch darker than the canvas */
  --doc-code-ink:#E7E9EC;
  --doc-rail-w:  264px;
  background: var(--doc-paper);
  color: var(--doc-ink);
}
.docs-page h1, .docs-page h2, .docs-page h3,
.docs-page p, .docs-page a, .docs-page button, .docs-page span { letter-spacing: 0; }

/* Programmatic scroll targets must never paint a keyboard focus ring. */
.docs-page [tabindex="-1"]:focus,
.docs-page [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ---- Top bar: part of the dark chrome ---- */
.docs-topbar {
  position: sticky; top: 0; z-index: 10;
  min-height: 64px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #08090B; border-bottom: 1px solid #1E2127;
}
.docs-topbar .wordmark .name { color: #EDEEF0; }
.docs-top-actions { display: flex; align-items: center; gap: 20px; }
.docs-top-actions > a { min-height: 44px; display: inline-flex; align-items: center; color: #9AA0AA; font-size: 13px; }
.docs-top-actions > a:hover { color: #EDEEF0; }
/* Topbar buttons keep the app's default light-on-dark treatment (no override). */
.docs-menu-button {
  display: none; min-width: 44px; min-height: 40px; padding: 0 14px;
  border: 1px solid #282C34; border-radius: 8px;
  background: #101216; color: #EDEEF0; font: inherit; cursor: pointer;
}

/* ---- Split layout: dark rail meets paper at a seam, no gutter ---- */
.docs-layout {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--doc-rail-w) minmax(0, 1fr);
  align-items: start;
}
.docs-sidebar {
  position: sticky; top: 64px; align-self: start;
  height: calc(100vh - 64px); overflow-y: auto;
  padding: 34px 22px 40px;
  background: #08090B; border-right: 1px solid #1E2127;
}
.docs-sidebar-label {
  margin: 0 0 22px; color: var(--ink-dim);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.docs-sidebar nav { display: grid; gap: 1px; }
.docs-nav-group {
  margin: 24px 0 8px; color: #EDEEF0;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.docs-nav-group:first-of-type { margin-top: 0; }
.docs-sidebar a {
  position: relative; min-height: 34px; display: flex; align-items: center;
  padding: 6px 10px 6px 14px; border-radius: 6px;
  color: #9AA0AA; font-size: 13.5px; line-height: 1.35;
  transition: color .15s var(--ease, ease), background .15s var(--ease, ease);
}
.docs-sidebar a:hover { color: #EDEEF0; background: #101216; }
.docs-sidebar a[aria-current="page"] { color: #FFFFFF; background: #101216; }
.docs-sidebar a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 2px; background: var(--accent);
}
.docs-sidebar .docs-mobile-dashboard { display: none; }

/* ---- Content canvas ---- */
.docs-page #docsContent {
  min-width: 0; min-height: calc(100vh - 64px);
  padding: 64px 0 128px; outline: none; background: var(--doc-paper);
}
.docs-page #docsContent > * { width: min(860px, calc(100% - 120px)); margin-left: auto; margin-right: auto; }

/* ---- Hero: eyebrow readout, title, lede, instrument meta ---- */
.docs-hero, .docs-product-hero, .docs-index-hero { padding: 0 0 32px; border-bottom: 1px solid var(--doc-line); }
.welcome-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  color: var(--doc-accent); font-family: var(--mono); font-size: 11px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.welcome-eyebrow::before { content: ""; width: 14px; height: 2px; background: var(--doc-accent); }
.docs-hero h1, .docs-product-hero h1, .docs-index-hero h1 {
  max-width: 640px; margin: 0; color: var(--doc-ink);
  font-family: var(--display); font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;
}
.docs-lede { max-width: 620px; margin: 16px 0 0; color: var(--doc-ink-2); font-size: 18px; line-height: 1.6; }
.docs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 24px; }
.docs-meta span {
  padding: 0 14px 0 0; margin-right: 14px; border: 0;
  border-right: 1px solid var(--doc-line-2); background: none;
  color: var(--doc-ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
}
.docs-meta span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.docs-meta-updated { color: var(--doc-ink-3) !important; border-style: none !important; }

/* ---- Prose sections: hairline rhythm, no boxes ---- */
.docs-prose-section { padding: 34px 0; border-bottom: 1px solid var(--doc-line); scroll-margin-top: 88px; }
.docs-prose-section:last-child { border-bottom: 0; }
.docs-prose-section h2 { margin: 0; color: var(--doc-ink); font-size: 23px; font-weight: 600; letter-spacing: -0.01em; }
.docs-prose-section > p { max-width: 680px; margin: 12px 0 0; color: var(--doc-ink-2); font-size: 16px; line-height: 1.7; }
.docs-prose-section > p strong { color: var(--doc-ink); font-weight: 600; }
.docs-list { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 9px; color: var(--doc-ink-2); font-size: 15px; line-height: 1.6; }
.docs-list li::marker { color: var(--doc-accent); }

/* ---- Steps ---- */
.docs-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 20px; padding: 36px 0; border-bottom: 1px solid var(--doc-line); scroll-margin-top: 88px; }
.docs-step-number { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--doc-line-2); border-radius: 50%; background: var(--doc-paper); color: var(--doc-accent); font-family: var(--mono); font-size: 12px; }
.docs-step-body { min-width: 0; }
.docs-step-body > h2 { margin: 2px 0 0; font-size: 21px; color: var(--doc-ink); }
.docs-step-body > p { margin: 10px 0 0; color: var(--doc-ink-2); line-height: 1.65; }

/* ---- Command / code: stays dark for terminal contrast ---- */
.docs-command { margin-top: 18px; overflow: hidden; border: 1px solid var(--doc-code-bg); border-radius: 10px; background: var(--doc-code-bg); box-shadow: 0 12px 30px -18px rgba(0,0,0,.5); }
.docs-command-head { min-height: 42px; padding: 0 8px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #1E2127; color: var(--ink-dim); font-family: var(--mono); font-size: 11px; }
.docs-command-head button { min-width: 60px; min-height: 32px; border: 1px solid #282C34; border-radius: 6px; background: #15181E; color: #EDEEF0; font: inherit; cursor: pointer; }
.docs-command-head button:hover { border-color: var(--accent); color: #fff; }
.docs-command pre, .docs-expected pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: var(--doc-code-ink); font: 13px/1.75 var(--mono); white-space: pre; }
.docs-expected { border-top: 1px solid #1E2127; background: #0B0D11; }
.docs-expected > span { display: block; padding: 12px 20px 0; color: var(--ok); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.docs-expected pre { color: #9AA0AA; padding-top: 6px; }
.docs-cmd-intro { margin: 16px 0 0; color: var(--doc-ink-2); font-size: 15px; line-height: 1.6; }
.docs-cmd-intro + .docs-command { margin-top: 10px; }

/* ---- Callouts: quiet, tinted, hairline left-rule ---- */
.docs-callout { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--doc-line); border-left: 3px solid var(--doc-ink-3); border-radius: 8px; background: var(--doc-raised); }
.docs-callout strong { display: block; color: var(--doc-ink); font-size: 13px; }
.docs-callout p { margin: 5px 0 0; color: var(--doc-ink-2); font-size: 13.5px; line-height: 1.6; }
.docs-callout-success { border-left-color: #0F9D6B; background: rgba(15,157,107,0.08); }
.docs-callout-warning { border-left-color: #C77E12; background: rgba(199,126,18,0.09); }
.docs-callout-info    { border-left-color: var(--doc-accent); background: var(--doc-accent-soft); }
.docs-callout-tip     { border-left-color: #7C5CDB; background: rgba(124,92,219,0.08); }

/* ---- Tables: hairline, no heavy frame ---- */
.docs-table-wrap { margin: 20px 0 0; overflow-x: auto; border: 0; border-top: 1px solid var(--doc-line-2); }
.docs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-table th, .docs-table td { padding: 13px 18px 13px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--doc-line); }
.docs-table thead th { color: var(--doc-ink-3); font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: none; }
.docs-table tbody td { color: var(--doc-ink-2); line-height: 1.6; }
.docs-table tbody td:first-child { color: var(--doc-ink); font-weight: 500; }
.docs-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Flow list (request lifecycle) ---- */
.docs-flow-list { margin: 22px 0 0; padding: 0; display: grid; gap: 0; list-style: none; counter-reset: flow; }
.docs-flow-list li { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--doc-line); }
.docs-flow-list li:last-child { border-bottom: 0; }
.docs-flow-list strong { color: var(--doc-ink); font-size: 15px; }
.docs-flow-list span { color: var(--doc-ink-2); line-height: 1.6; }

/* ---- Model family / prompt / model readout ---- */
.docs-model-family { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 22px; border-top: 1px solid var(--doc-line-2); }
.docs-model-family article { padding: 20px 20px 20px 0; border-right: 1px solid var(--doc-line); }
.docs-model-family article:last-child { border-right: 0; }
.docs-model-family h3 { margin: 0; color: var(--doc-ink); font-size: 16px; }
.docs-model-family p { margin: 8px 0 0; color: var(--doc-ink-2); font-size: 14px; line-height: 1.6; }
.docs-model { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--doc-line); border-left: 3px solid var(--doc-accent); border-radius: 8px; background: var(--doc-raised); color: var(--doc-ink-2); font-size: 14px; }
.docs-model strong { color: var(--doc-ink); font-family: var(--mono); }
.docs-manual-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 26px; margin-top: 24px; }
.docs-manual-model-item { min-width: 0; padding-top: 18px; border-top: 1px solid var(--doc-line-2); }
.docs-manual-model-item h3 { margin: 8px 0 0; color: var(--doc-ink); font-size: 17px; }
.docs-manual-model-item > p { margin: 7px 0 0; color: var(--doc-ink-2); font-size: 14px; line-height: 1.55; }
.docs-manual-model-item code { overflow-wrap: anywhere; }
.docs-manual-model-item .docs-command { margin-top: 12px; }
.docs-manual-model-badge { display: inline-block; padding: 4px 7px; border: 1px solid var(--doc-accent); border-radius: 4px; color: var(--doc-accent); font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1.35; }
.docs-routing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; margin-top: 24px; }
.docs-routing-block { min-width: 0; padding: 24px; border: 1px solid var(--doc-line-2); border-top: 2px solid var(--doc-accent); border-radius: 8px; background: var(--doc-raised); box-shadow: 0 14px 34px -30px rgba(0,0,0,.8); }
.docs-routing-max { border-top-color: #7C5CDB; }
.docs-routing-label, .docs-tier-label { display: block; color: var(--doc-ink-3); font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1.4; text-transform: uppercase; }
.docs-routing-block h3 { margin: 8px 0 0; color: var(--doc-ink); font-size: 19px; }
.docs-routing-block p { max-width: 48ch; margin: 12px 0 0; color: var(--doc-ink-2); font-size: 14px; line-height: 1.65; }
.docs-routing-note { margin: 16px 0 0; padding: 13px 16px; border-left: 3px solid var(--doc-accent); border-radius: 0 6px 6px 0; background: var(--doc-accent-soft); color: var(--doc-ink); font-size: 14px; font-weight: 600; }
.docs-tier-section > p { max-width: 70ch; }
.docs-tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; margin-top: 24px; }
.docs-tier-panel { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--doc-line-2); border-top: 2px solid var(--doc-accent); border-radius: 8px; background: var(--doc-raised); }
.docs-tier-max { border-top-color: #7C5CDB; }
.docs-tier-panel h3 { margin: 8px 0 0; color: var(--doc-ink); font-size: 20px; }
.docs-tier-panel > p { max-width: 50ch; margin: 11px 0 0; color: var(--doc-ink-2); font-size: 14px; line-height: 1.62; }
.docs-tier-lede { color: var(--doc-ink) !important; font-size: 15px !important; font-weight: 600; }
.docs-tier-models { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--doc-line); }
.docs-tier-models > h4, .docs-tier-use h4 { margin: 0; color: var(--doc-ink); font-size: 13px; }
.docs-tier-model-group { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.docs-tier-model-group h4 { margin: 2px 0 0; color: var(--doc-ink-3); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.docs-tier-model-group ul, .docs-tier-use ul { margin: 0; padding: 0; list-style: none; }
.docs-tier-model-group li + li { margin-top: 5px; }
.docs-tier-model-group code { color: var(--doc-ink); font-size: 12px; overflow-wrap: anywhere; }
.docs-tier-includes { margin-top: 20px; padding: 13px 14px; border: 1px solid rgba(124,92,219,.32); border-radius: 6px; background: rgba(124,92,219,.08); }
.docs-tier-includes strong, .docs-tier-includes span { display: block; }
.docs-tier-includes strong { color: var(--doc-ink); font-size: 13px; }
.docs-tier-includes span { margin-top: 3px; color: var(--doc-ink-3); font-size: 12px; }
.docs-tier-use { margin-top: auto; padding-top: 20px; }
.docs-tier-use ul { margin-top: 10px; }
.docs-tier-use li { position: relative; padding-left: 16px; color: var(--doc-ink-2); font-size: 13px; line-height: 1.55; }
.docs-tier-use li + li { margin-top: 7px; }
.docs-tier-use li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--doc-accent); }
.docs-tier-max .docs-tier-use li::before { background: #7C5CDB; }
.docs-prompt { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--doc-accent); border-radius: 0 8px 8px 0; background: var(--doc-raised); color: var(--doc-ink); font-family: var(--mono); font-size: 14px; }

/* Buttons: inherit the app's dark-mode .btn / .btn-primary / .btn-outline
   (teal-gradient primary, light-on-dark outline). Docs only sets spacing. */
.docs-action { margin-top: 22px; }

/* ---- Overview page ---- */
.docs-product-hero { padding: 4px 0 40px; }
.docs-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.docs-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; margin-top: 8px; border-top: 1px solid var(--doc-line); }
.docs-navcard { display: flex; flex-direction: column; gap: 7px; padding: 24px 28px 24px 0; border-bottom: 1px solid var(--doc-line); border-right: 1px solid var(--doc-line); transition: background .15s var(--ease,ease); }
.docs-product-grid .docs-navcard:nth-child(2n) { border-right: 0; padding-right: 0; }
.docs-product-grid .docs-navcard { padding-left: 4px; }
.docs-navcard:hover { background: var(--doc-raised); }
.docs-navcard[hidden] { display: none; }
.docs-navcard-head { display: flex; align-items: center; gap: 10px; }
.docs-navcard-head strong { color: var(--doc-ink); font-size: 16px; }
.docs-navcard span { color: var(--doc-ink-2); font-size: 14px; line-height: 1.55; }
.docs-navcard::after { content: "→"; margin-top: 4px; color: var(--doc-accent); font-size: 14px; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.docs-navcard:hover::after { opacity: 1; transform: translateX(0); }
.docs-navcard-tag { padding: 2px 8px; border: 1px solid var(--doc-line-2); border-radius: 999px; color: var(--doc-ink-3); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }

/* Quickcard (deep-link cards) */
.docs-quickcard { position: relative; padding: 22px 0; border-bottom: 1px solid var(--doc-line); scroll-margin-top: 88px; outline: none; }
.docs-quickcard-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--doc-line-2); border-radius: 50%; color: var(--doc-accent); font-family: var(--mono); font-size: 12px; }
.docs-quickcard h3 { margin: 14px 0 0; color: var(--doc-ink); font-size: 17px; }
.docs-quickcard p { margin: 7px 0 0; color: var(--doc-ink-2); font-size: 14px; line-height: 1.6; }
.docs-quickcard-link { display: inline-flex; align-items: center; margin-top: 14px; color: var(--doc-accent); font-size: 13px; font-weight: 500; }

/* Prerequisites */
.docs-prereq { margin-top: 30px; padding: 18px 20px; border: 1px solid var(--doc-line); border-left: 3px solid var(--doc-accent); border-radius: 8px; background: var(--doc-raised); }
.docs-prereq-label { margin: 0; color: var(--doc-ink-3); font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.docs-prereq ul { margin: 12px 0 0; padding-left: 18px; color: var(--doc-ink-2); font-size: 13.5px; }
.docs-prereq a { display: inline-block; margin-top: 12px; color: var(--doc-accent); font-size: 13px; font-weight: 500; }

/* Mistakes / help / return / contact / legacy */
.docs-mistakes, .docs-help, .docs-return, .docs-contact, .docs-legacy { margin-top: 40px; padding: 24px 0 0; border-top: 1px solid var(--doc-line-2); }
.docs-mistakes h2, .docs-help h2, .docs-return h2, .docs-contact h2, .docs-legacy h2 { margin: 0 0 14px; color: var(--doc-ink); font-size: 18px; }
.docs-mistakes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.docs-mistakes li { display: grid; gap: 3px; }
.docs-mistakes strong { color: var(--doc-ink); font-size: 14px; }
.docs-mistakes span { color: var(--doc-ink-2); font-size: 14px; }
.docs-help p, .docs-return > p, .docs-contact > p, .docs-legacy > p { margin: 0 0 14px; color: var(--doc-ink-2); font-size: 14px; line-height: 1.6; }
.docs-help a, .docs-return a, .docs-faq a { color: var(--doc-accent); font-size: 14px; font-weight: 500; }
.docs-return ol { color: var(--doc-ink-2); }

/* FAQ / troubleshooting */
.docs-troubleshooting, .docs-faq { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--doc-line-2); }
.docs-troubleshooting section, .docs-faq section { padding: 22px 0; border-bottom: 1px solid var(--doc-line); scroll-margin-top: 88px; }
.docs-troubleshooting h2, .docs-faq h2 { margin: 0; color: var(--doc-ink); font-size: 17px; }
.docs-troubleshooting p, .docs-faq p { margin: 8px 0 0; color: var(--doc-ink-2); line-height: 1.65; }

/* Product shot */
.docs-product-shot { margin: 22px 0 0; padding: 8px; border: 1px solid var(--doc-line); border-radius: 10px; background: var(--doc-raised); }
.docs-product-shot img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; border: 1px solid var(--doc-line); border-radius: 6px; background: var(--doc-code-bg); }
.docs-product-shot figcaption { margin: 10px 4px 2px; color: var(--doc-ink-2); font-size: 11px; }

/* Breadcrumbs */
.docs-breadcrumbs { margin-bottom: 24px; }
.docs-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.docs-breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--doc-ink-3); }
.docs-breadcrumbs li:not(:first-child)::before { content: "/"; color: var(--doc-line-2); }
.docs-breadcrumbs a { color: var(--doc-ink-3); }
.docs-breadcrumbs a:hover { color: var(--doc-accent); }
.docs-breadcrumbs [aria-current="page"] { color: var(--doc-ink); }

/* Pager + footer */
.docs-next-label { margin: 0 0 16px; color: var(--doc-ink-3); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.docs-pager { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--doc-line-2); }
.docs-pager-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.docs-pager-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--doc-line); border-radius: 10px; background: var(--doc-paper); transition: border-color .15s ease, background .15s ease; }
.docs-pager-card:hover { border-color: var(--doc-accent); background: var(--doc-raised); }
.docs-pager-next { text-align: right; }
.docs-pager-dir { color: var(--doc-ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.docs-pager-card strong { color: var(--doc-ink); font-size: 15px; }
.docs-footer { margin-top: 64px; padding: 26px 0 8px; border-top: 1px solid var(--doc-line-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.docs-footer .wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--doc-ink-3); }
.docs-footer .wordmark .name { color: var(--doc-ink-2); }
.docs-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.docs-footer a { color: var(--doc-ink-3); font-size: 13px; }
.docs-footer a:hover { color: var(--doc-accent); }
.docs-copy-status { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translateX(-50%); min-height: 24px; padding: 8px 14px; color: #fff; background: #101216; border-radius: 8px; font-size: 13px; pointer-events: none; }
.docs-copy-status:empty { display: none; }

/* Search (overview) */
.docs-search { margin-top: 26px; max-width: 520px; }
.docs-search-field { position: relative; }
.docs-search input { width: 100%; min-height: 46px; padding: 0 16px; border: 1px solid var(--doc-line-2); border-radius: 8px; background: var(--doc-raised); color: var(--doc-ink); font: 15px/1.4 var(--sans, inherit); }
.docs-search input:focus-visible { outline: none; border-color: var(--doc-accent); box-shadow: 0 0 0 3px var(--doc-accent-soft); }
.docs-search input::placeholder { color: var(--doc-ink-3); }
.docs-search-kbd { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); padding: 2px 8px; border: 1px solid var(--doc-line-2); border-radius: 6px; background: var(--doc-raised); color: var(--doc-ink-3); font-family: var(--mono); font-size: 12px; pointer-events: none; }
.docs-search-hint { margin: 12px 2px 8px; color: var(--doc-ink-3); font-size: 12px; }
.docs-search-hint kbd { padding: 1px 6px; border: 1px solid var(--doc-line-2); border-radius: 5px; background: var(--doc-raised); color: var(--doc-ink-2); font-family: var(--mono); font-size: 11px; }
.docs-search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-search-chip { padding: 7px 14px; border: 1px solid var(--doc-line-2); border-radius: 999px; background: var(--doc-paper); color: var(--doc-ink-2); font-size: 13px; cursor: pointer; }
.docs-search-chip:hover { border-color: var(--doc-accent); color: var(--doc-accent); }
.docs-search-empty { margin: 12px 2px 0; color: var(--doc-ink-2); font-size: 13px; }

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .docs-page { --doc-rail-w: 224px; }
  .docs-page #docsContent > * { width: min(760px, calc(100% - 88px)); margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
  .docs-topbar { padding: 0 16px; }
  .docs-top-actions > a:first-child { display: none; }
  .docs-menu-button { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .docs-layout { display: block; }
  .docs-sidebar {
    display: none; position: fixed; z-index: 9; inset: 64px 16px auto 16px;
    height: auto; max-height: calc(100vh - 88px); overflow-y: auto;
    padding: 16px; border: 1px solid #1E2127; border-radius: 10px;
    background: #08090B; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  }
  .docs-sidebar.is-open { display: block; }
  .docs-page #docsContent { min-height: 0; padding: 40px 0 72px; }
  .docs-page #docsContent > * { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .docs-hero h1, .docs-product-hero h1, .docs-index-hero h1 { font-size: 32px; }
  .docs-lede { font-size: 16px; }
  .docs-step { grid-template-columns: 30px minmax(0,1fr); gap: 14px; padding: 30px 0; }
  .docs-product-grid { grid-template-columns: 1fr; }
  .docs-product-grid .docs-navcard { border-right: 0; padding-right: 0; padding-left: 0; }
  .docs-model-family { grid-template-columns: 1fr; }
  .docs-model-family article { border-right: 0; border-bottom: 1px solid var(--doc-line); padding-right: 0; }
  .docs-model-family article:last-child { border-bottom: 0; }
  .docs-manual-model-grid { grid-template-columns: 1fr; gap: 18px; }
  .docs-routing-grid { grid-template-columns: 1fr; gap: 14px; }
  .docs-tier-grid { grid-template-columns: 1fr; gap: 14px; }
  .docs-routing-block { padding: 20px; }
  .docs-tier-panel { padding: 20px; }
  .docs-tier-model-group { grid-template-columns: 64px minmax(0, 1fr); }
  .docs-flow-list li { grid-template-columns: 1fr; gap: 4px; }
  .docs-pager-grid { grid-template-columns: 1fr; }
  .docs-command pre, .docs-expected pre { padding: 15px; font-size: 12px; }
  .docs-footer { flex-direction: column; align-items: flex-start; gap: 18px; }
  .docs-copy-status { left: 16px; right: 16px; bottom: 12px; transform: none; text-align: center; }
}
@media (max-width: 360px) {
  .docs-top-actions { display: none; }
  .docs-sidebar .docs-mobile-dashboard { display: flex; margin-top: 12px; padding-top: 12px; border-top: 1px solid #1E2127; color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .docs-page *, .docs-page *::before, .docs-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   STARTUPAPI HOMEPAGE — extended marketing sections (dev)
   ========================================================================== */
.hp-sec { max-width: 1200px; margin: 96px auto 0; padding: 0 32px; }
.hp-sec-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.hp-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--accent); background: var(--accent-glow); border: 1px solid var(--line-2);
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 16px;
}
.hp-sec-title { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; margin: 0 0 12px; }
.hp-sec-lede { color: var(--ink-dim); font-size: 16px; line-height: 1.6; margin: 0; }
#switchHead strong { color: var(--accent); font-weight: inherit; }
.hp-switch-lede strong { color: var(--ink); font-weight: 600; }
#howHead strong { color: var(--accent); font-weight: inherit; }
#whyHead strong { color: var(--accent); font-weight: inherit; }
.hp-benefit-grid strong { color: var(--accent); font-weight: 600; }

/* Why: two-column compare */
.hp-why { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hp-why-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--hairline); }
.hp-why-us { border-color: var(--line-2); box-shadow: var(--hairline), 0 0 0 1px var(--accent-glow); }
.hp-why-tag { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; margin: 0 0 16px; }
.hp-why-tag-accent { color: var(--accent); }
.hp-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hp-why-list li { position: relative; padding-left: 28px; color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
.hp-why-list li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--ink-faint); font-size: 13px; }
.hp-why-list-ok li { color: var(--ink); }
.hp-why-list-ok li::before { content: "✓"; color: var(--accent); }

/* How it works: 4 steps */
.hp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.hp-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; box-shadow: var(--hairline); }
.hp-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--accent-glow); border: 1px solid var(--line-2);
  color: var(--accent); font-family: var(--mono); font-weight: 600; font-size: 15px; margin-bottom: 14px;
}
.hp-step h3 { font-size: 16px; font-weight: 600; margin: 0 0 7px; }
.hp-step p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; margin: 0; }
.hp-step:not(:last-child)::after {
  content: "→"; position: absolute; top: 50%; right: -14px; transform: translateY(-50%);
  color: var(--line-2); font-size: 16px; z-index: 1;
}

/* Built for: audience cards */
.hp-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-aud-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--hairline); transition: border-color 0.18s var(--ease), transform 0.18s var(--ease); }
.hp-aud-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.hp-aud-ic, .hp-fcard-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--accent); margin-bottom: 15px;
}
.hp-aud-ic .ico, .hp-fcard-ic .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hp-aud-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 7px; }
.hp-aud-card p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; margin: 0; }

/* Feature grid */
.hp-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-fcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--hairline); transition: border-color 0.18s var(--ease); }
.hp-fcard:hover { border-color: var(--line-2); }
.hp-fcard h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; }
.hp-fcard p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* Trust grid */
.hp-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-trust-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--hairline); }
.hp-trust-card h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; }
.hp-trust-card p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* Major developer questions: split editorial briefing */
.hp-major-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: end;
}
.hp-major-intro { min-width: 0; }
.hp-major-intro .hp-eyebrow { margin-bottom: 18px; }
.hp-major-title {
  max-width: 780px;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 650;
  line-height: 1.08;
}
.hp-major-lede { max-width: 640px; margin: 16px 0 0; font-size: 15px; line-height: 1.6; }
.hp-major-proof {
  list-style: none;
  margin: 0;
  padding: 0 0 2px 24px;
  border-left: 1px solid var(--line-2);
}
.hp-major-proof li {
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.hp-major-proof li:last-child { border-bottom: 0; }
.hp-major-proof-index { color: var(--accent); font-family: var(--mono); font-size: 9px; font-variant-numeric: tabular-nums; }
.hp-major-proof-text { color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.35; }

.hp-major-rail { min-width: 0; }
.hp-major-list {
  margin-top: clamp(30px, 4vw, 52px);
  border-top: 1px solid var(--line-2);
}
.hp-major-row {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background-color 240ms var(--ease);
}
.hp-major-row:last-child { border-bottom: 0; }
.hp-major-row.is-open { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.hp-major-row.is-open::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.hp-major-toggle {
  width: 100%;
  min-height: 68px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 112px 20px;
  gap: 16px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hp-major-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.hp-major-number {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.hp-major-question { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.35; transition: color 240ms var(--ease); }
.hp-major-toggle:hover .hp-major-question { color: var(--accent); }
.hp-major-category { color: var(--accent); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-align: right; text-transform: uppercase; }
.hp-major-control { position: relative; width: 18px; height: 18px; }
.hp-major-control::before,
.hp-major-control::after { content: ""; position: absolute; background: var(--accent); transition: transform 240ms var(--ease), opacity 240ms var(--ease); }
.hp-major-control::before { left: 2px; top: 8px; width: 14px; height: 1px; }
.hp-major-control::after { left: 8px; top: 2px; width: 1px; height: 14px; }
.hp-major-row.is-open .hp-major-control::after { transform: rotate(90deg); opacity: 0; }
.hp-major-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows 240ms var(--ease), opacity 240ms var(--ease), transform 240ms var(--ease);
}
.hp-major-row.is-open .hp-major-answer-wrap { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.hp-major-answer-inner {
  min-height: 0;
  overflow: hidden;
  margin: 0 18px 24px 80px;
  padding: 2px 24px 2px 22px;
  border-left: 1px solid var(--accent);
}
.hp-major-answer-copy p { max-width: 760px; margin: 0; color: var(--ink-dim); font-size: 15px; line-height: 1.7; }
.hp-major-answer-copy a { color: var(--accent); }
.hp-major-actions { margin-top: 24px; display: grid; grid-template-columns: max-content max-content; align-items: center; gap: 10px; }
.hp-major-actions .btn { min-height: 42px; }
.hp-major-faq-link { color: var(--accent); }
.hp-major-faq-link:hover { color: var(--ink); }

@media (max-width: 980px) {
  .hp-major-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .hp-major-lede { max-width: 680px; }
  .hp-major-proof { padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 0; }
  .hp-major-proof li { min-height: 48px; padding: 0 14px; border-right: 1px solid var(--line); border-bottom: 0; }
  .hp-major-proof li:first-child { padding-left: 0; }
  .hp-major-proof li:last-child { padding-right: 0; border-right: 0; }
}

@media (max-width: 760px) {
  .hp-major-intro .hp-eyebrow { margin-bottom: 14px; }
  .hp-major-title { font-size: 32px; }
  .hp-major-lede { margin-top: 12px; font-size: 14px; }
  .hp-major-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-major-proof li { min-height: 54px; padding: 8px; grid-template-columns: 1fr; gap: 3px; align-content: center; }
  .hp-major-proof li:first-child { padding-left: 0; }
  .hp-major-proof li:last-child { padding-right: 0; }
  .hp-major-proof-index { font-size: 8px; }
  .hp-major-proof-text { font-size: 10.5px; }
  .hp-major-list { margin-top: 30px; }
  .hp-major-toggle { min-height: 66px; padding: 0 10px; grid-template-columns: 34px minmax(0, 1fr) 18px; column-gap: 10px; row-gap: 2px; }
  .hp-major-number { grid-row: 1 / span 2; font-size: 10px; }
  .hp-major-question { align-self: end; font-size: 15px; }
  .hp-major-category { grid-column: 2; align-self: start; font-size: 8px; text-align: left; }
  .hp-major-control { grid-column: 3; grid-row: 1 / span 2; }
  .hp-major-answer-inner { margin: 0 10px 20px 54px; padding: 0 10px 0 16px; }
  .hp-major-answer-copy p { font-size: 14px; line-height: 1.65; }
  .hp-major-actions { margin-top: 20px; }
}

@media (max-width: 440px) {
  .hp-major-actions { grid-template-columns: 1fr 1fr; }
  .hp-major-actions .btn { min-width: 0; width: 100%; padding-inline: 10px; font-size: 11.5px; }
}

@media (max-width: 340px) {
  .hp-major-actions { grid-template-columns: 1fr; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-major-row,
  .hp-major-question,
  .hp-major-control::before,
  .hp-major-control::after,
  .hp-major-answer-wrap { transition: none !important; }
}

/* Docs preview */
.hp-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-doc-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--hairline); transition: border-color 0.18s var(--ease), transform 0.18s var(--ease); }
.hp-doc-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.hp-doc-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-doc-card p { color: var(--ink-dim); font-size: 14px; line-height: 1.5; margin: 0; }
.hp-doc-card .hp-arrow { color: var(--accent); transition: transform 0.18s var(--ease); }
.hp-doc-card:hover .hp-arrow { transform: translateX(3px); }

/* Testimonials placeholder */
.hp-testi-placeholder {
  max-width: 720px; margin: 0 auto; text-align: center; position: relative;
  background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 40px 32px; color: var(--ink-dim); font-size: 15px;
}
.hp-testi-glyph { display: block; font-family: var(--display); font-size: 46px; line-height: 1; color: var(--accent); opacity: 0.5; margin-bottom: 8px; }

/* FAQ accordion */
.hp-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.hp-faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.hp-faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 20px; font-size: 15.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }
.hp-faq-mark { position: relative; flex: none; width: 14px; height: 14px; }
.hp-faq-mark::before, .hp-faq-mark::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform 0.2s var(--ease); }
.hp-faq-mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.hp-faq-mark::after { top: 0; left: 6px; width: 2px; height: 14px; }
.hp-faq-item[open] .hp-faq-mark::after { transform: scaleY(0); }
.hp-faq-body { padding: 0 20px 18px; }
.hp-faq-body p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin: 0; }
.hp-faq-body a { color: var(--accent); }

/* Final CTA */
.hp-final { max-width: 1200px; margin: 100px auto 0; padding: 0 32px 96px; }
.hp-final-inner {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2);
  border-radius: 22px; padding: 56px 32px; box-shadow: var(--shadow);
}
.hp-final-glow { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 520px; height: 320px; background: radial-gradient(closest-side, var(--accent-glow), transparent 70%); pointer-events: none; }
.hp-final-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 65% 90% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 90% at 50% 40%, #000 20%, transparent 75%);
  opacity: 0.6; pointer-events: none;
}
.hp-final-tag {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 20px;
}
.hp-final-title { position: relative; font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; margin: 0 0 12px; }
.hp-final-sub { position: relative; max-width: 560px; margin: 0 auto 26px; color: var(--ink-dim); font-size: 16px; line-height: 1.6; }
.hp-final-cta { position: relative; justify-content: center; }

/* Section 2 — Why developers switch: an editorial divided strip (large
   ghost-numerals + vertical rules) instead of another rounded-card grid. */
.hp-switch-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 48px 0 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hp-switch-item { position: relative; padding: 8px 26px 4px 0; border-left: 1px solid var(--line); }
.hp-switch-item:first-child { border-left: 0; padding-left: 0; }
.hp-switch-item:not(:first-child) { padding-left: 26px; }
.hp-switch-num {
  display: block; font-family: var(--mono); font-weight: 700; font-size: 40px;
  line-height: 1; letter-spacing: -0.02em; color: var(--accent); opacity: 0.55;
  margin-bottom: 18px;
}
.hp-switch-item h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.hp-switch-item p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; margin: 0; }

/* Section 4 — Getting started: steps should fill the section width, not float in a narrow column */
.hp-sec .cr-steps { max-width: none; margin: 40px 0 0; }

/* Section 5 — Why StartupAPI: benefit checklist as a full-width, evenly filled grid */
.hp-benefit-grid { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 16px; }

/* Section 6 — Trust: 5 Q&A cards as a centered, wrapping flex row so an
   uneven last row never trails off to the left with dead space beside it */
.hp-trust-grid-5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.hp-trust-grid-5 .hp-trust-card { flex: 1 1 300px; max-width: calc(33.333% - 12px); }

/* Section 7 — FAQ: fill the sticky sidebar so it doesn't sit empty next to the accordion */
.hp-faq-side-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.hp-faq-side-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
.hp-faq-side-list li::before { content: "✓"; flex: none; color: var(--accent); font-weight: 700; margin-top: 1px; }
.hp-faq-side-cta { margin-top: 28px; }
.hp-faq-snippet { margin-top: 40px; min-width: 0; max-width: 100%; }
.hp-faq-snippet-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 10px; }
.hp-faq-code { margin: 0; }
.hp-faq-code code { display: block; }

/* Section spacing helpers (savings / getting-started / trust sections) */
.hp-cta-center { justify-content: center; }
.hp-cta-spaced { margin-top: 36px; }
.hp-tr-caption-spaced { text-align: center; margin-top: 20px; }

/* Extended homepage — responsive */
@media (max-width: 1024px) {
  .hp-fgrid, .hp-trust-grid, .hp-doc-grid, .hp-audience { grid-template-columns: repeat(2, 1fr); }
  .hp-steps { grid-template-columns: repeat(2, 1fr); }
  .hp-step:nth-child(2)::after { display: none; }
  .hp-benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-trust-grid-5 .hp-trust-card { max-width: calc(50% - 9px); }
  .hp-switch-strip { grid-template-columns: repeat(2, 1fr); }
  .hp-switch-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .hp-switch-item:nth-child(3), .hp-switch-item:nth-child(4) { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 8px; }
}
@media (max-width: 760px) {
  .hp-sec { margin-top: 72px; padding: 0 20px; }
  .hp-sec-title, .hp-final-title { font-size: 25px; }
  .hp-why { grid-template-columns: 1fr; }
  .hp-final { padding: 0 20px 72px; }
  .hp-final-inner { padding: 44px 24px; }
}
@media (max-width: 560px) {
  .hp-fgrid, .hp-trust-grid, .hp-doc-grid, .hp-audience, .hp-steps { grid-template-columns: 1fr; }
  .hp-step::after { display: none !important; }
  .hp-sec-head { margin-bottom: 32px; }
  .hp-benefit-grid { grid-template-columns: 1fr; }
  .hp-trust-grid-5 .hp-trust-card { max-width: 100%; }
  .hp-switch-strip { grid-template-columns: 1fr; }
  /* :not(:first-child) in the base rule has specificity (0,2,0) — a plain
     .hp-switch-item here can't beat it, so item 2 kept its 26px left
     padding while :nth-child(3)/(4) below (also (0,2,0), winning on source
     order) correctly reset to 0. Match specificity for every item so none
     are left stranded regardless of index. */
  .hp-switch-item:not(:first-child) {
    border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 0; margin-top: 20px;
  }
  .hp-switch-item:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
}

/* ============================================================================
   THE OPEN METER — homepage identity (dev). Emerald = live only.
   ========================================================================== */
.hp-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); margin-right:2px; vertical-align:middle; animation:hp-pulse 2s var(--ease) infinite; }
@keyframes hp-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.hp-trustline b { color: var(--ink); font-family: var(--mono); font-weight: 600; }

/* Section 2 — The Problem */
.hp-problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px; }
.hp-meta { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--hairline); }
.hp-meta-on { border-color:var(--line-2); }
.hp-meta-vis { height:96px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.hp-meta figcaption h3 { font-size:18px; font-weight:600; margin:0 0 8px; }
.hp-meta figcaption p { color:var(--ink-dim); font-size:14.5px; line-height:1.6; margin:0; }
/* Turnstile (dim, static — represents paying to stand still) */
.hp-turnstile { position:relative; width:64px; height:64px; border-radius:50%; border:1px dashed var(--line-2); display:flex; align-items:center; justify-content:center; }
.hp-turnstile i { position:absolute; width:2px; height:26px; background:var(--ink-faint); border-radius:2px; top:50%; left:50%; transform-origin:top center; }
.hp-turnstile i:nth-child(1){ transform:translate(-50%,0) rotate(0deg);} 
.hp-turnstile i:nth-child(2){ transform:translate(-50%,0) rotate(120deg);} 
.hp-turnstile i:nth-child(3){ transform:translate(-50%,0) rotate(240deg);} 
/* Gauge (emerald, live — represents the meter moving with use) */
.hp-gauge { position:relative; width:132px; height:66px; overflow:hidden; }
.hp-gauge::before { content:""; position:absolute; inset:0 0 0 0; border:8px solid var(--surface-3); border-bottom:0; border-radius:132px 132px 0 0; box-sizing:border-box; }
.hp-gauge-fill { position:absolute; left:0; bottom:0; width:66px; height:66px; margin-left:0; transform-origin:100% 100%; transform:rotate(0deg); }
.hp-gauge-fill::before { content:""; position:absolute; inset:0; border:8px solid var(--accent); border-bottom:0; border-right:0; border-radius:132px 0 0 0; box-sizing:border-box; }
.hp-gauge-num { position:absolute; left:50%; bottom:2px; transform:translateX(-50%); font-family:var(--mono); font-weight:600; font-size:15px; color:var(--accent); font-variant-numeric:tabular-nums; }

/* Section 3 — Cost Explorer (the centerpiece) */
.hp-explorer { display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; margin-top:40px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow), var(--hairline); }
.hp-exp-controls { padding:30px; display:flex; flex-direction:column; gap:26px; border-right:1px solid var(--line); }
.hp-exp-field { display:flex; flex-direction:column; gap:12px; }
.hp-exp-label { font-size:13px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.hp-exp-num { font-family:var(--mono); font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.hp-exp-hint { margin:0; font-size:12.5px; color:var(--ink-dim); }
.hp-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:4px; }
.hp-seg-btn { appearance:none; background:transparent; border:0; color:var(--ink-dim); font:inherit; font-size:13.5px; font-weight:500; padding:9px 0; border-radius:var(--r-sm); cursor:pointer; transition:background .16s var(--ease), color .16s var(--ease); }
.hp-seg-btn:hover { color:var(--ink); }
.hp-seg-btn.is-active { background:var(--surface-3); color:var(--ink); box-shadow:var(--hairline); }
.hp-range { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:var(--surface-3); outline:none; }
.hp-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line-2), 0 2px 8px rgba(0,0,0,.5); cursor:pointer; transition:transform .12s var(--ease); }
.hp-range::-webkit-slider-thumb:active { transform:scale(1.15); }
.hp-range::-moz-range-thumb { width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); cursor:pointer; }
.hp-range:focus-visible { box-shadow:0 0 0 3px var(--accent-glow); }
.hp-exp-presets { display:flex; gap:8px; }
.hp-chip { appearance:none; background:var(--bg-2); border:1px solid var(--line); color:var(--ink-dim); font:inherit; font-size:12px; padding:5px 12px; border-radius:var(--r-pill); cursor:pointer; transition:border-color .16s, color .16s; }
.hp-chip:hover, .hp-chip.is-active { border-color:var(--line-2); color:var(--ink); }
/* readout */
.hp-exp-readout { padding:30px; display:flex; flex-direction:column; gap:20px; background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.hp-exp-total { display:flex; flex-direction:column; gap:4px; }
.hp-exp-total-k { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--mono); }
.hp-exp-total-v { font-family:var(--mono); font-weight:600; font-size:40px; letter-spacing:-0.01em; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1; }
.hp-exp-total-per { font-size:12.5px; color:var(--ink-dim); }
.hp-exp-break { display:flex; flex-direction:column; gap:10px; }
.hp-exp-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; font-family:var(--mono); font-size:13px; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.hp-exp-row span:last-child { color:var(--ink); }
.hp-exp-bar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--bg-2); margin-top:2px; }
.hp-exp-bar-in { background:var(--accent-dim); }
.hp-exp-bar-out { background:var(--accent); }
.hp-exp-foot { margin:0; font-size:12px; color:var(--ink-faint); line-height:1.5; }
.hp-exp-foot a, .hp-tr-caption a, .hp-exp-foot a:visited { color:var(--accent); }

/* Section 4 — Receipt */
.hp-receipt { max-width:420px; margin:40px auto 0; background:var(--surface); border:1px solid var(--line-2); border-radius:6px; padding:22px 24px 0; font-family:var(--mono); box-shadow:var(--shadow); position:relative; }
.hp-rc-head { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.1em; color:var(--ink-faint); padding-bottom:14px; border-bottom:1px dashed var(--line-2); }
.hp-rc-line { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px dashed var(--line); opacity:0; transform:translateY(6px); }
.hp-rc-line.is-printed { opacity:1; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.hp-rc-i { color:var(--accent); font-size:12px; font-weight:600; }
.hp-rc-t { color:var(--ink); font-size:14px; }
.hp-rc-d { color:var(--ink-dim); font-size:11.5px; }
.hp-rc-perf { height:16px; margin:0 -24px; background:radial-gradient(circle at 8px -4px, transparent 6px, var(--surface) 6px) repeat-x; background-size:16px 16px; border-top:1px dashed var(--line-2); }
.hp-rc-key { margin:0 -24px; padding:16px 24px 22px; background:var(--bg-2); display:flex; flex-direction:column; gap:6px; border-radius:0 0 6px 6px; opacity:0; }
.hp-rc-key.is-printed { opacity:1; transition:opacity .5s var(--ease); }
.hp-rc-key-label { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.hp-rc-key-val { color:var(--accent); font-size:14px; letter-spacing:.02em; }
.hp-receipt-note { text-align:center; color:var(--ink-faint); font-size:12.5px; margin:18px 0 0; }

/* Section 5 — Editorial */
.hp-editorial { text-align:center; max-width:900px; }
.hp-editorial-head { font-family:var(--display); font-weight:600; font-size:clamp(30px,5vw,52px); line-height:1.1; letter-spacing:-0.02em; margin:0; color:var(--ink); }
.hp-editorial-accent { color:var(--accent); }
.hp-editorial-sub { max-width:34em; margin:24px auto 0; color:var(--ink-dim); font-size:16px; line-height:1.6; }
.hp-editorial-list { list-style:none; margin:32px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; }
.hp-editorial-list li { font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 14px; }

/* Section 6 — Transparency */
.hp-tr-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.hp-tr-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--hairline); }
.hp-tr-card h3 { font-size:15px; font-weight:600; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.hp-tr-mark { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; font-size:13px; }
.hp-tr-yes .hp-tr-mark { background:var(--accent-glow); color:var(--accent); }
.hp-tr-no .hp-tr-mark { background:var(--surface-3); color:var(--ink-faint); }
.hp-tr-card ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.hp-tr-card li { color:var(--ink-dim); font-size:14px; line-height:1.5; padding-left:16px; position:relative; }
.hp-tr-card li::before { content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--line-2); }
.hp-tr-yes li::before { background:var(--accent); }
.hp-tr-philosophy { margin-top:22px; text-align:center; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.hp-tr-formula { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0; font-size:16px; color:var(--ink); }
.hp-tr-formula .hp-mono, .hp-mono { font-family:var(--mono); color:var(--ink); }
.hp-tr-eq, .hp-tr-op { color:var(--accent); font-family:var(--mono); }
.hp-tr-formula > span:first-child { color:var(--accent); font-family:var(--mono); }
.hp-tr-caption { max-width:44em; margin:16px auto 0; color:var(--ink-dim); font-size:13.5px; line-height:1.6; }

/* FAQ (compact) */
.hp-faq-sec .hp-faq { max-width:720px; margin:36px auto 0; display:grid; gap:10px; }
.hp-faq-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.hp-faq-item summary { cursor:pointer; padding:16px 18px; font-size:14.5px; font-weight:500; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.hp-faq-item summary::-webkit-details-marker { display:none; }
.hp-faq-item summary::after { content:"+"; color:var(--accent); font-family:var(--mono); font-size:18px; transition:transform .2s var(--ease); }
.hp-faq-item[open] summary::after { transform:rotate(45deg); }
.hp-faq-item summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r); }
.hp-faq-item p { margin:0; padding:0 18px 16px; color:var(--ink-dim); font-size:14px; line-height:1.6; }
.hp-faq-item a { color:var(--accent); }

/* Section 8 — Final CTA (mirrors hero meter) */
.hp-final { text-align:center; padding-bottom:20px; }
.hp-final-meter { display:inline-flex; flex-direction:column; align-items:center; gap:6px; padding:22px 40px; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface); margin:0 auto 28px; }
.hp-final-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint); }
.hp-final-readout { font-family:var(--mono); font-weight:600; font-size:44px; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.hp-final-wait { font-size:12.5px; color:var(--ink-dim); }
.hp-final-title { font-family:var(--display); font-weight:600; font-size:clamp(28px,4vw,40px); letter-spacing:-0.01em; margin:0; }
.hp-final-sub { max-width:40em; margin:14px auto 26px; color:var(--ink-dim); font-size:16px; line-height:1.6; }

/* Meter Spine — page-edge live meter */
.hp-spine { position:fixed; top:0; left:0; height:100vh; width:56px; z-index:30; pointer-events:none; display:flex; flex-direction:column; align-items:center; opacity:0; transition:opacity .4s var(--ease); }
.hp-spine.is-on { opacity:1; }
.hp-spine-track { position:relative; width:2px; height:100%; background:linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent); }
.hp-spine-fill { position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(180deg, var(--accent-dim), var(--accent)); box-shadow:0 0 10px var(--accent-glow); }
.hp-spine-readout { position:absolute; top:14px; left:64px; white-space:nowrap; font-family:var(--mono); font-size:11px; color:var(--ink-faint); transform:rotate(0deg); }
.hp-spine-readout b { color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width:1180px){ .hp-spine{ display:none; } }

/* Open Meter — responsive */
@media (max-width:900px){
  .hp-explorer { grid-template-columns:1fr; }
  .hp-exp-controls { border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width:760px){
  .hp-problem-grid, .hp-tr-grid { grid-template-columns:1fr; }
  .hp-exp-total-v { font-size:34px; }
  .hp-meter-v { font-size:14px; }
  .hp-meter-cell { padding:11px 12px; }
  .hp-final-readout { font-size:36px; }
}
@media (max-width:420px){
  .hp-exp-controls, .hp-exp-readout { padding:22px; }
  .hp-receipt { padding-left:18px; padding-right:18px; }
}

/* Reduced motion — calm static twins for every metered animation */
@media (prefers-reduced-motion: reduce){
  .hp-live-dot { animation:none !important; }
  .hp-rc-line, .hp-rc-key { opacity:1 !important; transform:none !important; transition:none !important; }
  .hp-spine-fill { transition:none !important; }
}

/* ---- Fix pass: wordmark + balanced receipt/faq layouts ---- */
.hp-hero-brand { display:flex; align-items:center; gap:9px; margin:0 0 20px; font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-0.01em; color:var(--ink); }
.hp-hero-brand-tld { color:var(--accent); }

/* Receipt section — two columns so it fills the width */
.hp-receipt-grid { display:grid; grid-template-columns:1fr 0.85fr; gap:56px; align-items:center; }
.hp-receipt-copy .hp-sec-title { margin-top:12px; }
.hp-receipt-copy .hp-sec-lede { margin-bottom:22px; }
.hp-receipt-points { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; }
.hp-receipt-points li { position:relative; padding-left:26px; color:var(--ink-dim); font-size:14.5px; line-height:1.5; }
.hp-receipt-points li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-size:13px; }
.hp-receipt-points b { color:var(--ink); font-weight:600; }
.hp-receipt-sec .hp-receipt { margin:0; }

/* FAQ section — copy left, accordion right */
.hp-faq-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start; min-width: 0; }
.hp-faq-copy { position:sticky; top:100px; min-width: 0; }
.hp-faq-copy .hp-sec-lede { margin-top:12px; }
.hp-faq-copy .hp-sec-lede a { color:var(--accent); }
.hp-faq-sec .hp-faq { margin:0; }

@media (max-width:860px){
  .hp-receipt-grid, .hp-faq-grid { grid-template-columns:1fr; gap:32px; }
  .hp-faq-copy { position:static; }
  .hp-receipt-sec .hp-receipt { max-width:420px; }
}

/* Lower FAQ: Knowledge Workspace */
.hp-knowledge-sec { position: relative; }
.hp-knowledge-sec::before {
  content: "";
  position: absolute;
  inset: -28px 12px;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.hp-knowledge-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.38fr);
  gap: 56px;
  align-items: start;
  min-width: 0;
}
.hp-knowledge-intro { position: sticky; top: 100px; min-width: 0; }
.hp-knowledge-intro .hp-sec-title { margin-top: 12px; max-width: 420px; }
.hp-knowledge-intro .hp-sec-lede { margin-top: 14px; max-width: 400px; }
.hp-knowledge-highlights {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
}
.hp-knowledge-highlights li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.5;
}
.hp-knowledge-highlights li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 8px var(--accent-glow);
}
.hp-knowledge-support { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.hp-knowledge-support-label {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
}
.hp-knowledge-support > p:not(.hp-knowledge-support-label) { margin: 0; color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; }
.hp-knowledge-support-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
.hp-knowledge-support-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 13px; font-weight: 600; }
.hp-knowledge-support-links a::after { content: " ->"; color: var(--accent); font-family: var(--mono); }
.hp-knowledge-support-links a:hover { color: var(--accent); }
.hp-knowledge-support-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.hp-knowledge-workspace {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-2);
  box-shadow: var(--hairline), 0 24px 70px rgba(0, 0, 0, 0.2);
}
.hp-knowledge-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
}
.hp-knowledge-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.hp-knowledge-tabs::-webkit-scrollbar { display: none; }
.hp-knowledge-tab {
  position: relative;
  flex: none;
  min-height: 54px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.hp-knowledge-tab span { margin-left: 5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hp-knowledge-tab::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 180ms var(--ease);
}
.hp-knowledge-tab:hover { color: var(--ink); background: var(--surface-2); }
.hp-knowledge-tab.is-active { color: var(--accent); }
.hp-knowledge-tab.is-active::after { transform: scaleX(1); }
.hp-knowledge-tab:focus-visible { z-index: 1; outline: 2px solid var(--accent); outline-offset: -4px; }
.hp-knowledge-count { flex: none; color: var(--ink-faint); font: 600 9px/1 var(--mono); letter-spacing: 0; }

.hp-knowledge-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1.14fr);
  grid-template-rows: repeat(8, minmax(64px, auto));
  min-height: 628px;
  min-width: 0;
}
.hp-knowledge-index,
.hp-knowledge-item { display: contents; }
.hp-knowledge-item[hidden] { display: none !important; }
.hp-knowledge-question {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 64px;
  padding: 13px 16px 13px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 var(--accent);
  transition: color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.hp-knowledge-row-copy { display: grid; gap: 5px; min-width: 0; }
.hp-knowledge-row-label,
.hp-knowledge-answer-label { color: var(--ink-faint); font: 600 9px/1.2 var(--mono); letter-spacing: 0; text-transform: uppercase; }
.hp-knowledge-question-text { color: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.38; }
.hp-knowledge-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  color: var(--ink-faint);
  transform: rotate(45deg);
  transition: color 180ms var(--ease), transform 180ms var(--ease);
}
.hp-knowledge-question:hover { color: var(--ink); background: var(--surface); }
.hp-knowledge-item.is-open .hp-knowledge-question { color: var(--ink); background: var(--surface-2); box-shadow: inset 2px 0 var(--accent); }
.hp-knowledge-item.is-open .hp-knowledge-chevron { color: var(--accent); transform: translateX(2px) rotate(45deg); }
.hp-knowledge-question:focus-visible { z-index: 2; outline: 2px solid var(--accent); outline-offset: -3px; }

.hp-knowledge-answer {
  grid-column: 2;
  grid-row: 1 / span 8;
  display: grid;
  grid-template-rows: 1fr;
  min-width: 0;
  border-left: 1px solid var(--line-2);
  background: var(--surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms var(--ease);
}
.hp-knowledge-item.is-open .hp-knowledge-answer { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.hp-knowledge-answer-inner { min-height: 0; overflow: hidden; align-self: start; padding: 46px 42px; }
.hp-knowledge-answer-label { display: block; margin-bottom: 16px; color: var(--accent); }
.hp-knowledge-answer h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.32; }
.hp-knowledge-answer p { margin: 18px 0 0; color: var(--ink-dim); font-size: 15px; line-height: 1.72; }
.hp-knowledge-answer a { color: var(--accent); font-weight: 600; }
.hp-knowledge-answer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-knowledge-answer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .hp-knowledge-layout { grid-template-columns: minmax(230px, 0.64fr) minmax(0, 1.36fr); gap: 34px; }
  .hp-knowledge-toolbar { padding-inline: 10px; }
  .hp-knowledge-tab { padding-inline: 8px; font-size: 9px; }
  .hp-knowledge-count { display: none; }
  .hp-knowledge-panel { grid-template-columns: minmax(205px, 0.86fr) minmax(0, 1.14fr); }
  .hp-knowledge-answer-inner { padding: 38px 30px; }
  .hp-knowledge-answer h3 { font-size: 20px; }
}

@media (max-width: 860px) {
  .hp-knowledge-sec::before { inset-inline: 0; }
  .hp-knowledge-layout { grid-template-columns: 1fr; gap: 34px; }
  .hp-knowledge-intro { position: static; }
  .hp-knowledge-intro .hp-sec-title,
  .hp-knowledge-intro .hp-sec-lede { max-width: 620px; }
  .hp-knowledge-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hp-knowledge-workspace { border-radius: 4px; }
  .hp-knowledge-toolbar { display: block; padding: 0; }
  .hp-knowledge-tabs { padding-inline: 8px; }
  .hp-knowledge-tab { min-height: 52px; padding-inline: 11px; }
  .hp-knowledge-count { display: none; }
  .hp-knowledge-panel { display: block; min-height: 0; }
  .hp-knowledge-index { display: block; }
  .hp-knowledge-item { display: block; }
  .hp-knowledge-question { width: 100%; min-height: 68px; padding: 15px 18px; }
  .hp-knowledge-chevron { transform: rotate(135deg); }
  .hp-knowledge-item.is-open .hp-knowledge-chevron { transform: translateY(2px) rotate(-45deg); }
  .hp-knowledge-answer {
    display: grid;
    grid-template-rows: 0fr;
    border: 0;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: grid-template-rows 220ms var(--ease), opacity 180ms var(--ease), transform 220ms var(--ease), visibility 220ms var(--ease);
  }
  .hp-knowledge-item.is-open .hp-knowledge-answer { grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: translateY(0); }
  .hp-knowledge-answer-inner { padding: 0 48px 0 18px; }
  .hp-knowledge-item.is-open .hp-knowledge-answer-inner { padding-top: 5px; padding-bottom: 24px; }
  .hp-knowledge-answer-label,
  .hp-knowledge-answer h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hp-knowledge-answer p { margin: 0; font-size: 14px; line-height: 1.68; }
  .hp-knowledge-answer a { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
}

@media (max-width: 560px) {
  .hp-knowledge-highlights { grid-template-columns: 1fr; }
  .hp-knowledge-support-links { display: grid; justify-items: start; }
  .hp-knowledge-question-text { font-size: 13px; }
  .hp-knowledge-answer-inner { padding-right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-knowledge-tab,
  .hp-knowledge-tab::after,
  .hp-knowledge-question,
  .hp-knowledge-chevron,
  .hp-knowledge-answer { transition: none !important; }
  .hp-knowledge-item.is-open .hp-knowledge-chevron { transform: rotate(-45deg); }
}

/* ---- Full-viewport brand cover (first screen) ---- */
.hp-cover { position:relative; min-height:calc(100vh - 68px); min-height:calc(100svh - 68px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin:0 calc(50% - 50vw); padding:40px 24px 0; overflow:hidden; }
.hp-cover-grid { position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 78%); mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 78%); opacity:.5; pointer-events:none; }
.hp-cover-brand { position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.5vw,32px); margin:0; font-family:var(--display); font-weight:600; line-height:0.9; letter-spacing:-0.03em; }
.hp-cover-name { font-size:clamp(52px,13vw,190px); color:var(--ink); white-space:nowrap; }
.hp-cover-tld { color:var(--accent); }
.hp-cover-tag { position:relative; margin:clamp(20px,3vw,36px) 0 0; color:var(--ink-dim); font-size:clamp(14px,1.6vw,19px); letter-spacing:0.01em; }
.hp-cover-tag .hp-badge-glyph { font-family:var(--mono); color:var(--accent); font-weight:600; margin-right:8px; }
.hp-cover-scroll { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:inline-flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-faint); font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; transition:color .2s var(--ease); }
.hp-cover-scroll:hover { color:var(--ink-dim); }
.hp-cover-chev { width:11px; height:11px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); animation:hp-chev 1.8s var(--ease) infinite; }
@keyframes hp-chev { 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5 } 50%{ transform:rotate(45deg) translate(3px,3px); opacity:1 } }
.hp-hero { scroll-margin-top:72px; }
@media (prefers-reduced-motion: reduce){ .hp-cover-chev { animation:none !important; } }
@media (max-width:600px){ .hp-cover-brand { flex-direction:column; gap:20px; } .hp-cover { min-height:calc(100svh - 60px); } }

/* ---- API key connector selector (dashboard) ---- */
.key-connector { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.k-conn-label { font-size:12.5px; color:var(--ink-dim); font-weight:500; }
.k-conn-select { max-width:190px; }
.k-conn-static { font-family:var(--mono); font-size:13px; color:var(--ink); }
.k-conn-hint { flex-basis:100%; font-size:11.5px; color:var(--ink-faint); text-align:right; }
.key-connector-notice { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:12px 14px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius:var(--r); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--ink-dim); font-size:12.5px; line-height:1.5; }
.key-connector-notice strong { color:var(--ink); white-space:nowrap; }
.admin-emergency-control { display:grid; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.toggle-field { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.toggle-field input { margin-top:3px; accent-color:var(--accent); }
.toggle-field span { display:grid; gap:3px; }
.toggle-field small { color:var(--ink-faint); line-height:1.4; }

/* ===================== In-app announcements ===================== */
.ann-unread-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
}
.ann-modal-scrim {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,7,0.74); backdrop-filter: blur(3px); padding: 20px; animation: annFade .18s ease;
}
@keyframes annFade { from { opacity: 0; } to { opacity: 1; } }
.ann-modal-card {
  width: 100%; max-width: 540px; max-height: min(86vh, 720px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7); overflow: hidden;
}
.ann-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 0; }
.ann-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ann-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
}
.ann-cat { background: var(--surface-2, #15181E); color: var(--ink-dim); border: 1px solid var(--line); }
.ann-prio-info { background: var(--surface-2, #15181E); color: var(--ink-dim); border: 1px solid var(--line); }
.ann-prio-update { background: rgba(45,212,191,0.12); color: var(--accent); border: 1px solid var(--accent-deep); }
.ann-prio-important { background: rgba(242,180,90,0.14); color: #F2B45A; border: 1px solid rgba(242,180,90,0.3); }
.ann-prio-critical { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(242,100,90,0.35); }
.ann-close {
  background: transparent; border: none; color: var(--ink-dim); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; margin: -4px -4px 0 8px;
}
.ann-close:hover { color: var(--ink); }
.ann-title { margin: 12px 18px 0; font-size: 20px; font-weight: 650; color: var(--ink); }
.ann-summary { margin: 6px 18px 0; color: var(--ink-dim); font-size: 14px; }
.ann-meta { display: flex; gap: 10px; align-items: center; margin: 8px 18px 0; }
.ann-date { color: var(--ink-faint); font-size: 12px; }
.ann-read-flag { color: var(--ok); font-size: 11px; font-weight: 600; }
.ann-modal-body { margin: 14px 18px; overflow-y: auto; color: var(--ink); font-size: 14px; line-height: 1.6; }
.ann-modal-body h3 { font-size: 16px; margin: 14px 0 6px; }
.ann-modal-body h4 { font-size: 14px; margin: 12px 0 6px; }
.ann-modal-body p { margin: 0 0 10px; }
.ann-modal-body ul { margin: 0 0 10px; padding-left: 20px; }
.ann-modal-body li { margin: 3px 0; }
.ann-modal-body code { font-family: var(--mono); background: var(--surface-2, #15181E); padding: 1px 5px; border-radius: 5px; font-size: 0.9em; }
.ann-modal-body a { color: var(--accent); text-decoration: underline; }
/* Inline emphasis — explicit so the dark theme never flattens bold/italic. */
.ann-modal-body strong { font-weight: 700; color: var(--ink); }
.ann-modal-body em { font-style: italic; }
.ann-modal-body mark { background: var(--accent-glow); color: var(--ink); padding: 0 4px; border-radius: 5px; }
.ann-modal-body del { color: var(--ink-faint); text-decoration: line-through; }
.ann-modal-body blockquote { margin: 0 0 10px; padding: 4px 0 4px 12px; border-left: 3px solid var(--accent); color: var(--ink-dim, var(--ink)); }
.ann-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface); flex-wrap: wrap;
}
.ann-btn { padding: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.ann-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dim, #14B8A6)); color: var(--on-accent); }
.ann-btn-ghost { background: transparent; color: var(--ink-dim); border-color: var(--line); text-decoration: none; }
.ann-btn-ghost:hover { color: var(--ink); }
.ann-btn:focus-visible, .ann-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ann-panel {
  position: absolute; top: 46px; right: 0; width: min(360px, 92vw); max-height: 70vh; z-index: 90;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 20px 50px -18px rgba(0,0,0,0.65); overflow: hidden;
}
.ann-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ann-panel-title { font-weight: 650; font-size: 14px; }
.ann-panel-close { background: transparent; border: none; color: var(--ink-dim); font-size: 20px; cursor: pointer; }
.ann-panel-list { overflow-y: auto; }
.ann-centre-empty { padding: 22px 14px; color: var(--ink-faint); font-size: 13px; text-align: center; }
.ann-centre-row {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px;
  background: transparent; border: none; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink);
}
.ann-centre-row:hover { background: var(--surface-2, #15181E); }
.ann-centre-row.is-unread { background: rgba(45,212,191,0.05); }
.ann-centre-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none; }
.ann-centre-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ann-centre-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-centre-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ann-centre-cat, .ann-centre-date { color: var(--ink-faint); font-size: 11px; }
.ann-centre-badge { color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ann-panel-more { padding: 10px; background: transparent; border: none; border-top: 1px solid var(--line); color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 560px) {
  .ann-modal-scrim { padding: 0; align-items: flex-end; }
  .ann-modal-card { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .ann-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 80vh; border-radius: 16px 16px 0 0; }
}


/* ============================================================
   Public site footer + legal / business pages
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 72px; }
.site-footer-inner { width: min(100% - 40px, 1180px); margin: 0 auto; padding: 40px 0 48px; display: flex; flex-direction: column; gap: 18px; }
.site-footer-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-dim); }
.site-footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-footer-nav a { color: var(--ink-dim); font-size: 14px; text-decoration: none; min-height: 30px; display: inline-flex; align-items: center; }
.site-footer-nav a:hover { color: var(--accent); }
.site-footer-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.site-footer-legal { color: var(--ink-faint); font-size: 12.5px; line-height: 1.6; max-width: 78ch; margin: 0; }
.site-footer-legal a { color: var(--ink-dim); }
.site-footer-legal a:hover { color: var(--accent); }

/* ---- Legal page shell ---- */
.legal-page { background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
.legal-topbar { width: min(100% - 40px, 1180px); margin: 0 auto; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.legal-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.legal-logo { width: 20px; height: 20px; filter: drop-shadow(0 0 9px var(--accent-glow)); }
.legal-wordmark { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
.legal-wordmark .tick { color: var(--accent); }
.legal-top-actions { display: flex; align-items: center; gap: 16px; }
.legal-top-actions a:not(.btn) { color: var(--ink-dim); text-decoration: none; font-size: 14px; }
.legal-top-actions a:not(.btn):hover { color: var(--accent); }
.legal-main { width: min(100% - 40px, 900px); margin: 0 auto; padding: 36px 0 24px; flex: 1 0 auto; }
.legal-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.legal-subnav a { font-size: 13px; color: var(--ink-dim); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); }
.legal-subnav a:hover { color: var(--accent); border-color: var(--accent-dim); }
.legal-subnav a.is-active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.legal-subnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Legal article typography ---- */
.legal-article { max-width: 74ch; }
.legal-article h1 { font-family: var(--display); font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }
.legal-updated { color: var(--ink-faint); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; margin: 0 0 22px; }
.legal-lede { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 28px; }
.legal-article section { margin: 0 0 26px; padding-top: 4px; }
.legal-article h2 { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ink); }
.legal-article h3 { font-size: 16px; margin: 18px 0 8px; color: var(--ink); }
.legal-article p { color: var(--ink-dim); line-height: 1.7; margin: 0 0 12px; }
.legal-article ul { color: var(--ink-dim); line-height: 1.7; margin: 0 0 12px; padding-left: 22px; }
.legal-article li { margin: 0 0 8px; }
.legal-article strong { color: var(--ink); font-weight: 600; }
.legal-article a { color: var(--accent); text-decoration: none; }
.legal-article a:hover { text-decoration: underline; }
.legal-article a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.legal-contact { list-style: none; padding-left: 0; }
.legal-contact li { padding: 4px 0; }

/* ---- Contact / support page ---- */
.support-page { width: min(900px, calc(100vw - 40px)); }
.support-eyebrow {
  margin: 0 0 12px; color: var(--accent); font: 600 11px/1.2 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.support-page .legal-updated { margin-bottom: 18px; }
.support-page .support-lede { max-width: 66ch; color: var(--ink-dim); margin-bottom: 20px; }
.support-status { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 13px; margin-bottom: 38px; }
.support-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-glow); flex: none; }
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.legal-article .support-grid { margin-bottom: 0; }
.support-card {
  min-width: 0; min-height: 244px; margin: 0; padding: 24px;
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--hairline); transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.support-card:hover { border-color: #355a55; transform: translateY(-2px); }
.support-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.support-glyph {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid #31514e; border-radius: 7px; background: var(--accent-deep);
  color: var(--accent); font: 700 14px/1 var(--mono);
}
.support-external { color: var(--ink-faint); font-size: 17px; }
.legal-article .support-card h2 { margin: 22px 0 7px; font-size: 20px; }
.legal-article .support-detail { min-height: 44px; margin: 0 0 18px; color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
.support-email { overflow-wrap: anywhere; }
.legal-article .support-action {
  margin-top: auto; min-height: 44px; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #35514f; border-radius: 7px; background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 600; text-align: center; text-decoration: none;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.legal-article .support-action:hover { background: var(--surface-3); border-color: var(--accent-dim); text-decoration: none; }
.legal-article .support-action-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.legal-article .support-action-primary:hover { background: #3fe3cd; border-color: #3fe3cd; }
.legal-article .support-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 7px; }
.support-foot {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  color: var(--ink-faint); font-size: 12px; line-height: 1.5;
}

/* The contact route reuses the landing tokens without carrying the hero canvas. */
.support-theme {
  min-width: 0;
  overflow-x: clip;
  color: var(--landing-text);
  background: var(--landing-bg);
  letter-spacing: 0;
}
:root[data-theme="light"] body.support-theme { color: var(--landing-text); background: var(--landing-bg); }
.support-theme::before {
  content: '';
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(112, 140, 145, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 140, 145, 0.034) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.support-theme::after {
  content: '';
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(780px 520px at 86% 12%, rgba(126, 79, 255, 0.13), transparent 68%),
    radial-gradient(700px 480px at 4% 68%, rgba(45, 214, 206, 0.075), transparent 70%);
}
.support-theme .legal-topbar,
.support-theme .legal-main,
.support-theme .site-footer { position: relative; z-index: 1; }
.support-theme .legal-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: none;
  min-height: 68px;
  padding: 0 max(32px, calc((100vw - 1280px) / 2));
  border-bottom: 1px solid rgba(143, 164, 193, 0.09);
  background: rgba(5, 7, 11, 0.76);
  backdrop-filter: blur(16px);
}
.support-theme .legal-brand { gap: 10px; color: var(--landing-text); }
.support-theme .legal-logo {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 12px rgba(62, 226, 218, 0.14));
}
.support-theme .legal-wordmark { color: var(--landing-text); font-size: 15px; letter-spacing: 0; }
.support-theme .legal-top-actions a:not(.btn) { color: var(--landing-muted); }
.support-theme .legal-top-actions a:not(.btn):hover { color: var(--landing-text); }
.support-theme .legal-top-actions .btn {
  min-height: 38px;
  border-color: var(--landing-line);
  border-radius: 6px;
  color: var(--landing-text);
  background: rgba(255,255,255,0.025);
}
.support-theme .legal-top-actions .btn:hover { border-color: rgba(84,231,221,0.3); background: rgba(84,231,221,0.055); }
.support-theme .legal-main { width: min(1120px, calc(100% - 64px)); padding: 48px 0 42px; }
.support-theme .legal-subnav { gap: 8px; margin-bottom: clamp(48px, 6vw, 76px); }
.support-theme .legal-subnav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-color: var(--landing-line);
  border-radius: 6px;
  color: var(--landing-muted);
  background: rgba(9,13,21,0.7);
  font-size: 11px;
}
.support-theme .legal-subnav a:hover { color: var(--landing-cyan); border-color: rgba(84,231,221,0.3); }
.support-theme .legal-subnav a.is-active {
  color: var(--landing-text);
  border-color: rgba(139,108,255,0.36);
  background: linear-gradient(145deg, rgba(84,231,221,0.08), rgba(139,108,255,0.13));
}
.support-theme .legal-article { max-width: none; }
.support-theme .support-page { width: 100%; }
.support-theme .support-eyebrow { margin-bottom: 14px; color: var(--landing-cyan); font-size: 11px; letter-spacing: 0; }
.support-theme .support-page h1 {
  max-width: 760px;
  margin: 0 0 14px;
  color: var(--landing-text);
  font-size: clamp(42px, 5.5vw, 68px);
  line-height: 1.02;
  font-weight: 560;
  letter-spacing: 0;
}
.support-theme .support-page .legal-updated { color: var(--landing-faint); }
.support-theme .support-page .support-lede { max-width: 680px; margin-bottom: 22px; color: var(--landing-muted); font-size: 16px; line-height: 1.7; }
.support-theme .support-status { margin-bottom: 42px; color: var(--landing-muted); }
.support-theme .support-status-dot { background: var(--landing-cyan); box-shadow: 0 0 0 5px rgba(84,231,221,0.1), 0 0 18px rgba(84,231,221,0.28); }
.support-theme .support-grid { gap: 18px; }
.support-theme .support-card {
  min-height: 272px;
  padding: 28px;
  border-color: var(--landing-line);
  border-radius: var(--landing-radius);
  background: linear-gradient(150deg, rgba(15, 20, 31, 0.97), rgba(7, 10, 17, 0.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 24px 60px -50px rgba(0,0,0,0.9);
  transition: transform 200ms var(--landing-ease), border-color 200ms ease, box-shadow 200ms ease;
}
.support-theme .support-card:hover {
  transform: translateY(-3px);
  border-color: rgba(120, 207, 229, 0.3);
  box-shadow: 0 22px 56px -40px rgba(78,226,221,0.5), 0 20px 60px -44px rgba(139,108,255,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
}
.support-theme .support-glyph {
  width: 46px;
  height: 46px;
  border-color: rgba(139,108,255,0.3);
  border-radius: 7px;
  color: var(--landing-cyan);
  background: linear-gradient(145deg, rgba(84,231,221,0.09), rgba(139,108,255,0.16));
  box-shadow: 0 12px 32px -22px rgba(84,231,221,0.7);
}
.support-theme .support-external { color: var(--landing-faint); }
.support-theme .legal-article .support-card h2 { margin-top: 27px; color: var(--landing-text); font-size: 22px; }
.support-theme .legal-article .support-detail { color: var(--landing-muted); }
.support-theme .legal-article .support-action {
  border-color: var(--landing-line);
  border-radius: 6px;
  color: var(--landing-text);
  background: rgba(255,255,255,0.025);
}
.support-theme .legal-article .support-action:hover { border-color: rgba(84,231,221,0.32); background: rgba(84,231,221,0.055); }
.support-theme .legal-article .support-action-primary {
  border-color: rgba(84,231,221,0.64);
  color: #041817;
  background: linear-gradient(135deg, var(--landing-cyan), #2acfc4);
  box-shadow: 0 12px 30px -16px rgba(84,231,221,0.55);
}
.support-theme .legal-article .support-action-primary:hover { border-color: var(--landing-cyan-bright); background: linear-gradient(135deg, var(--landing-cyan-bright), var(--landing-cyan)); }
.support-theme .support-foot { border-color: var(--landing-line); color: var(--landing-faint); }
.support-theme .site-footer { margin-top: 52px; border-color: var(--landing-line); background: rgba(5,7,11,0.82); }
.support-theme .site-footer-inner { width: min(1120px, calc(100% - 64px)); padding: 42px 0 50px; }
.support-theme .site-footer-nav a { color: var(--landing-muted); }
.support-theme .site-footer-nav a:hover,
.support-theme .site-footer-legal a:hover { color: var(--landing-cyan); }
.support-theme .site-footer-legal { color: var(--landing-faint); }
.support-theme .site-footer-legal a { color: var(--landing-muted); }

@media (max-width: 760px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-card { min-height: 214px; }
  .support-status { margin-bottom: 30px; }
  .support-theme::before { background-size: 54px 54px, 54px 54px; opacity: 0.72; }
  .support-theme::after { opacity: 0.75; }
  .support-theme .legal-main,
  .support-theme .site-footer-inner { width: calc(100% - 36px); }
  .support-theme .support-grid { gap: 12px; }
  .support-theme .support-card { min-height: 224px; padding: 24px; }
}

@media (max-width: 640px) {
  .legal-topbar { padding: 16px 0; }
  .legal-top-actions { gap: 12px; }
  .legal-main { padding: 24px 0 12px; }
  .legal-article h1 { font-size: 26px; }
  .support-card { padding: 20px; }
  .support-foot { align-items: flex-start; flex-direction: column; gap: 8px; }
  .site-footer-inner { padding: 32px 0 40px; }
  .support-theme .legal-topbar { min-height: 62px; padding: 0 18px; }
  .support-theme .legal-main { padding-top: 30px; }
  .support-theme .legal-subnav { margin-bottom: 48px; }
  .support-theme .support-page h1 { font-size: clamp(39px, 12vw, 52px); }
  .support-theme .support-page .support-lede { font-size: 15px; }
  .support-theme .site-footer { margin-top: 34px; }
}

@media screen and (max-width: 360px) {
  .support-theme .legal-topbar { padding: 0 12px; }
  .support-theme .legal-brand { gap: 7px; }
  .support-theme .legal-wordmark { font-size: 13px; }
  .support-theme .legal-top-actions { gap: 8px; }
  .support-theme .legal-top-actions a:not(.btn) { font-size: 12px; }
  .support-theme .legal-top-actions .btn { padding: 6px 9px; }
  .support-theme .legal-main,
  .support-theme .site-footer-inner { width: calc(100% - 28px); }
}

/* ── Add Credits page (Razorpay) ─────────────────────────────────────────── */
.ac-wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.ac-balance {
  display: flex; flex-direction: column; gap: 4px; margin: 20px 0 24px;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
}
.ac-balance-label { color: var(--ink-dim); font-size: 13px; }
.ac-balance-value { font: 600 28px/1.1 var(--mono); color: var(--accent); }
.ac-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; }
.ac-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.ac-sub { font-size: 15px; margin: 0 0 12px; }
.ac-rate { color: var(--ink-dim); font-size: 13px; margin: 8px 0 14px; }
.ac-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.ac-summary-row { display: flex; justify-content: space-between; padding: 4px 0; }
.ac-error { color: var(--danger); background: var(--danger-bg); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-size: 14px; }
.ac-legal-links { margin-top: 10px; }
.ac-legal-links a { color: var(--ink-dim); }
.ac-history { display: flex; flex-direction: column; gap: 10px; }
.ac-hrow { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ac-hmeta { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ac-badge { font: 600 11px/1 var(--mono); text-transform: uppercase; padding: 4px 8px; border-radius: 999px; }
.ac-badge-ok { background: var(--ok-bg); color: var(--ok); }
.ac-badge-bad { background: var(--danger-bg); color: var(--danger); }
.ac-badge-neu { background: var(--surface-3); color: var(--ink-dim); }
.ac-processing { position: fixed; inset: 0; background: rgba(4,6,8,0.72); display: flex; align-items: center; justify-content: center; z-index: 50; }
.ac-processing-box { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 28px 34px; text-align: center; }
.ac-spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: ac-spin 0.8s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .ac-grid { grid-template-columns: 1fr; } }

/* ── Subscription checkout: focused premium purchase flow ──────────────── */
body.subscription-checkout {
  min-height: 100vh;
  background:
    radial-gradient(780px 480px at 50% 42%, rgba(45, 212, 191, 0.065), transparent 68%),
    var(--bg);
}
.subscription-checkout .pp-top {
  max-width: none; padding: 22px 46px; border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 11, 0.72); backdrop-filter: blur(16px);
}
.subscription-checkout .ac-wrap-new { width: 100%; max-width: none; padding: 0 20px 54px; }
.subscription-checkout-view { position: relative; z-index: 1; width: min(100%, 940px); margin: 0 auto; padding-top: 36px; }
.subscription-checkout-head { text-align: center; margin-bottom: 26px; }
.subscription-secure-badge {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px;
  border: 1px solid rgba(45, 212, 191, 0.36); border-radius: var(--r-pill);
  background: rgba(45, 212, 191, 0.055); color: var(--accent); font-size: 12.5px; font-weight: 500;
}
.subscription-secure-badge .ico { width: 15px; height: 15px; }
.subscription-checkout-head h1 {
  margin: 17px 0 0; font-family: var(--display); font-size: 38px; line-height: 1.1; font-weight: 650;
}
.subscription-checkout-head > p { margin: 10px 0 0; color: var(--ink-dim); font-size: 16px; }
.subscription-checkout-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 38px 44px 30px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line-2));
  border-radius: var(--r-lg); background: rgba(12, 15, 20, 0.94);
  box-shadow: 0 34px 80px -48px rgba(45, 212, 191, 0.45), inset 0 1px 0 rgba(255,255,255,0.045);
  animation: subscriptionCardIn 320ms var(--ease) both;
}
.subscription-checkout-card::before {
  content: ""; position: absolute; z-index: -1; inset: -44% 22% auto; height: 72%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(45, 212, 191, 0.095), transparent 68%);
  animation: subscriptionGlow 6s ease-in-out infinite alternate;
}
@keyframes subscriptionCardIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes subscriptionGlow { to { transform: translateY(15%) scale(1.08); opacity: 0.7; } }
.subscription-plan-top {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr); align-items: center;
  gap: 38px; min-height: 156px; margin-bottom: 26px;
}
.subscription-plan-identity { display: flex; align-items: center; gap: 24px; min-width: 0; }
.subscription-plan-icon {
  display: grid; place-items: center; width: 104px; height: 104px; flex: none;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-2)); border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(45, 212, 191, 0.08), rgba(10, 13, 18, 0.45));
  color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 18px 34px -28px var(--accent);
}
.subscription-plan-icon .ico { width: 52px; height: 52px; stroke-width: 1.45; }
.subscription-plan-identity h2 { margin: 0; font-family: var(--display); font-size: 29px; line-height: 1.1; font-weight: 650; }
.subscription-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px; margin: 16px 0 0; }
.subscription-plan-price strong {
  color: var(--accent); font-family: var(--display); font-size: 43px; line-height: 0.95; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.subscription-plan-price span { color: var(--ink-dim); font-size: 16px; white-space: nowrap; }
.subscription-plan-benefits {
  list-style: none; display: grid; gap: 16px; min-width: 0; margin: 0; padding: 5px 0 5px 34px;
  border-left: 1px solid var(--line-2);
}
.subscription-plan-benefits li { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); font-size: 14px; }
.subscription-benefit-icon { display: grid; place-items: center; flex: none; color: var(--accent); }
.subscription-benefit-icon .ico { width: 19px; height: 19px; }
.subscription-credit-note {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding: 17px 18px;
  border: 1px solid rgba(47, 140, 255, 0.32); border-radius: var(--r);
  background: rgba(47, 140, 255, 0.055); color: var(--ink);
}
.subscription-credit-note > span { color: #45a0ff; flex: none; }
.subscription-credit-note .ico { width: 22px; height: 22px; }
.subscription-credit-note p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.subscription-status {
  margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-dim); font-size: 13px; line-height: 1.45;
}
.subscription-status[data-tone="error"] { border-color: rgba(242,100,90,0.38); background: var(--danger-bg); color: #ffaaa4; }
.subscription-status[data-tone="pending"] { border-color: rgba(245,181,68,0.35); background: var(--warn-bg); color: #ffd58a; }
.subscription-pay-btn, .subscription-dashboard-btn {
  width: 100%; min-height: 58px; border-radius: 10px;
  background: linear-gradient(180deg, #2de0c9, #13bba8); color: #021b17;
  border-color: rgba(87, 245, 223, 0.65); box-shadow: 0 16px 34px -18px rgba(45,212,191,0.78), inset 0 1px 0 rgba(255,255,255,0.34);
  font-size: 17px; font-weight: 650; transition: transform 150ms var(--ease), box-shadow 170ms var(--ease), filter 170ms var(--ease);
}
.subscription-pay-btn:hover, .subscription-dashboard-btn:hover {
  transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 20px 38px -17px rgba(45,212,191,0.88), inset 0 1px 0 rgba(255,255,255,0.38);
}
.subscription-pay-btn .ico, .subscription-dashboard-btn .ico { width: 21px; height: 21px; transition: transform 150ms var(--ease); }
.subscription-pay-btn:hover .ico, .subscription-dashboard-btn:hover .ico { transform: translateX(4px); }
.subscription-pay-btn.is-loading::before {
  content: ""; width: 17px; height: 17px; border: 2px solid rgba(2,27,23,0.35); border-top-color: #021b17;
  border-radius: 50%; animation: ac-spin 0.7s linear infinite;
}
.subscription-pay-btn.is-loading [data-sub-icon] { display: none; }
.subscription-trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 25px; }
.subscription-trust-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0 18px; }
.subscription-trust-item:first-child { padding-left: 4px; }
.subscription-trust-item:last-child { padding-right: 4px; }
.subscription-trust-item + .subscription-trust-item { border-left: 1px solid var(--line-2); }
.subscription-trust-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: rgba(45,212,191,0.09); color: var(--accent);
}
.subscription-trust-icon .ico { width: 21px; height: 21px; }
.subscription-trust-item strong, .subscription-trust-item small { display: block; }
.subscription-trust-item strong { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.subscription-trust-item small { margin-top: 3px; color: var(--ink-faint); font-size: 11px; line-height: 1.3; }
.subscription-security-line {
  display: flex; align-items: center; gap: 10px; margin: 27px 0 0; padding-top: 20px;
  border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11.5px; line-height: 1.5;
}
.subscription-security-line .ico { width: 15px; height: 15px; flex: none; }
.subscription-loading { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 22px; min-height: 320px; padding: 40px; }
.subscription-loading-mark { width: 82px; height: 82px; border-radius: var(--r); background: var(--surface-2); animation: pbShimmer 1.4s ease-in-out infinite; }
.subscription-loading-lines { display: grid; gap: 11px; }
.subscription-loading-lines i { display: block; height: 15px; border-radius: 5px; background: var(--surface-2); animation: pbShimmer 1.4s ease-in-out infinite; }
.subscription-loading-lines i:nth-child(1) { width: 42%; }
.subscription-loading-lines i:nth-child(2) { width: 66%; }
.subscription-loading-lines i:nth-child(3) { width: 54%; }
.subscription-loading p { grid-column: 1 / -1; margin: 0; color: var(--ink-faint); text-align: center; font-size: 13px; }
.subscription-success { display: grid; justify-items: center; min-height: 420px; align-content: center; padding: 48px 20px; text-align: center; }
.subscription-success-icon {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: rgba(70,211,154,0.12); color: var(--ok); box-shadow: 0 0 34px -12px rgba(70,211,154,0.72);
}
.subscription-success-icon .ico { width: 34px; height: 34px; }
.subscription-success h2 { margin: 20px 0 0; font-family: var(--display); font-size: 29px; font-weight: 650; }
.subscription-success p { margin: 8px 0 24px; color: var(--ink-dim); font-size: 14px; }
.subscription-dashboard-btn { width: auto; min-width: 240px; padding-inline: 24px; }
.subscription-checkout .ac-processing { backdrop-filter: blur(5px); }
.subscription-checkout .ac-processing-box { min-width: 270px; border-color: rgba(45,212,191,0.25); box-shadow: var(--shadow-lg); }

@media (max-width: 760px) {
  .subscription-checkout .pp-top { padding: 17px 20px; }
  .subscription-checkout-view { padding-top: 26px; }
  .subscription-checkout-head h1 { font-size: 31px; }
  .subscription-checkout-card { padding: 27px 26px 24px; }
  .subscription-plan-top { grid-template-columns: 1fr; gap: 24px; }
  .subscription-plan-benefits { padding: 20px 0 0; border-top: 1px solid var(--line-2); border-left: 0; }
  .subscription-trust-row { grid-template-columns: 1fr; gap: 0; }
  .subscription-trust-item { padding: 14px 4px; }
  .subscription-trust-item + .subscription-trust-item { border-top: 1px solid var(--line-2); border-left: 0; }
}
@media (max-width: 640px) {
  .subscription-checkout .pp-top { flex-wrap: nowrap; }
  .subscription-checkout .pp-nav { gap: 15px; }
  .subscription-checkout .pp-nav a { font-size: 13px; }
  .subscription-checkout .ac-wrap-new { padding: 0 14px 36px; }
  .subscription-checkout-view { padding-top: 22px; }
  .subscription-checkout-head { margin-bottom: 20px; }
  .subscription-secure-badge { min-height: 32px; }
  .subscription-checkout-head h1 { margin-top: 14px; font-size: 27px; }
  .subscription-checkout-head > p { margin-top: 7px; font-size: 14px; }
  .subscription-checkout-card { padding: 23px 18px 21px; border-radius: 14px; }
  .subscription-plan-top { min-height: 0; margin-bottom: 21px; }
  .subscription-plan-identity { align-items: flex-start; gap: 15px; }
  .subscription-plan-icon { width: 72px; height: 72px; border-radius: 13px; }
  .subscription-plan-icon .ico { width: 36px; height: 36px; }
  .subscription-plan-identity h2 { font-size: 23px; }
  .subscription-plan-price { gap: 7px; margin-top: 11px; }
  .subscription-plan-price strong { font-size: 34px; }
  .subscription-plan-price span { font-size: 13px; }
  .subscription-plan-benefits { gap: 13px; font-size: 13px; }
  .subscription-credit-note { align-items: flex-start; padding: 14px; }
  .subscription-credit-note p { font-size: 12.5px; }
  .subscription-pay-btn { min-height: 54px; font-size: 15px; }
  .subscription-security-line { align-items: flex-start; font-size: 11px; }
  .subscription-loading { grid-template-columns: 60px 1fr; min-height: 280px; padding: 24px 8px; }
  .subscription-loading-mark { width: 60px; height: 60px; }
  .subscription-success { min-height: 360px; padding-inline: 0; }
  .subscription-dashboard-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-checkout-card, .subscription-checkout-card::before, .subscription-loading-mark,
  .subscription-loading-lines i, .subscription-pay-btn.is-loading::before { animation: none !important; }
  .subscription-pay-btn, .subscription-dashboard-btn, .subscription-pay-btn .ico, .subscription-dashboard-btn .ico { transition: none !important; }
  .subscription-pay-btn:hover, .subscription-dashboard-btn:hover { transform: none; }
}

/* ── Pricing page: fixed-rate hero card ──────────────────────────────────── */
.pp-rate-card {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 18px 0 8px; padding: 18px 32px;
  background: var(--accent-deep); border: 1px solid var(--accent-dim); border-radius: 16px;
}
.pp-rate-big { font: 700 34px/1 var(--mono); color: var(--accent); letter-spacing: -0.02em; }
.pp-rate-sub { color: var(--ink-dim); font-size: 13px; }

/* ── Add Credits: USD presets + currency selector ────────────────────────── */
.ac-field-label { display: block; font-size: 13px; color: var(--ink-dim); margin: 14px 0 8px; }
.ac-presets, .ac-currency { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-preset, .ac-cur {
  flex: 1 1 auto; min-width: 96px; padding: 10px 12px; cursor: pointer;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 10px; font: 600 14px/1 var(--sans);
}
.ac-cur { font-size: 13px; }
.ac-preset:hover, .ac-cur:hover { border-color: var(--accent-dim); }
.ac-preset.is-active, .ac-cur.is-active {
  background: var(--accent-deep); border-color: var(--accent-dim); color: var(--accent);
}
.ac-preset:focus-visible, .ac-cur:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-region-hint {
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; color: var(--ink-dim); margin: 0 0 14px;
}
.ac-linkbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline;
}
.ac-linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Add Credits: crypto (NOWPayments) payment box ───────────────────────── */
.ac-crypto {
  margin-top: 16px; padding: 16px; border: 1px solid var(--accent-dim);
  background: var(--accent-deep); border-radius: 12px;
}
.ac-crypto-head { font-size: 15px; margin-bottom: 12px; }
.ac-addr-row { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 12px; flex-wrap: wrap; }
.ac-addr {
  flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 10px 12px; font: 600 13px/1.4 var(--mono); color: var(--ink);
}

/* ── Admin overview (business KPIs) ── */
.monitor-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.monitor-admin-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.monitor-admin-total { min-width: 0; padding: 17px 18px; display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.monitor-admin-total span { color: var(--ink-dim); font-size: 11px; }
.monitor-admin-total strong { overflow: hidden; font: 600 20px/1.15 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.monitor-admin-table { min-width: 1180px; }
.monitor-admin-sub { display: block; margin-top: 4px; color: var(--ink-faint); font: 10px var(--mono); }
.monitor-admin-status, .monitor-admin-mode { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 650; border: 1px solid var(--line-2); color: var(--ink-dim); background: var(--surface-2); }
.monitor-admin-status.is-operational, .monitor-admin-mode.is-on { color: var(--ok); background: var(--ok-bg); border-color: rgba(45, 212, 191, 0.26); }
.monitor-admin-status.is-degraded { color: var(--warn); background: var(--warn-bg); border-color: rgba(245, 181, 68, 0.28); }
.monitor-admin-status.is-down { color: var(--danger); background: var(--danger-bg); border-color: rgba(242, 100, 90, 0.28); }
@media (max-width: 820px) {
  .monitor-admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-admin-head { align-items: flex-start; }
}

.ov-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; gap: 20px;
}
.ov-title { margin: 8px 0 6px; }
.ov-subtitle { font-size: 14px; color: var(--ink-dim); margin: 0; max-width: 420px; }
.ov-hero-right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding-top: 36px;
}
.ov-live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--mono); color: var(--accent); letter-spacing: 0.1em;
}
.ov-live-dot::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(45,212,191,0.18);
  animation: ov-pulse 2.5s ease-in-out infinite;
}
.ov-live-dot::after { content: "LIVE"; }
@keyframes ov-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(45,212,191,0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(45,212,191,0.06); }
}
.ov-live-dot-pulse::before { animation: ov-flash 0.7s ease-out; }
@keyframes ov-flash { 0% { box-shadow: 0 0 0 10px rgba(45,212,191,0.35); } 100% { box-shadow: 0 0 0 3px rgba(45,212,191,0.18); } }
.ov-refresh-ts { font-size: 12px; color: var(--ink-faint); }

/* Primary KPI cards */
.ov-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px;
}
.ov-kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--hairline);
}
.ov-kpi-star {
  border-color: rgba(45,212,191,0.18);
  background: linear-gradient(160deg, rgba(45,212,191,0.07) 0%, var(--surface) 60%);
  box-shadow: 0 0 0 1px rgba(45,212,191,0.06), var(--hairline);
}
.ov-kpi-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.ov-kpi-value {
  font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent);
}
.ov-kpi-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* Section layout */
.ov-section { margin-bottom: 32px; }
.ov-section-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px;
  color: var(--ink-dim); text-transform: none;
}
.ov-section-note { font-size: 13px; color: var(--ink-faint); margin: -8px 0 14px; }
.ov-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ov-section-head .ov-section-title { margin: 0; }

/* Growth pills */
.ov-growth-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.ov-growth-pill {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 18px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); min-width: 130px;
}
.ov-growth-val {
  font-family: var(--mono); font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--accent);
}
.ov-growth-lbl { font-size: 11.5px; color: var(--ink-faint); text-align: center; }

/* Chart */
.ov-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ov-chart-head .ov-section-title { margin: 0; }
.ov-chart-tabs { display: flex; gap: 4px; }
.ov-tab {
  padding: 5px 12px; font: 600 12px/1 var(--mono); border-radius: 6px;
  background: var(--surface-2); color: var(--ink-dim); border: 1px solid var(--line-2); cursor: pointer;
}
.ov-tab:hover { background: var(--surface-3); color: var(--ink); }
.ov-tab.is-active { background: var(--accent-deep); color: var(--accent); border-color: rgba(45,212,191,0.35); }
.ov-chart-wrap {
  min-height: 200px; border-radius: var(--r); overflow: hidden;
  background: var(--surface); border: 1px solid rgba(45,212,191,0.12);
}
.ov-chart-wrap .chart { width: 100%; height: 200px; display: block; }
.ov-chart-wrap .chart-empty { padding: 60px 0; text-align: center; color: var(--ink-faint); font-size: 14px; }

/* Platform activity grid */
.ov-activity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ov-act-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.ov-act-label { font-size: 12px; color: var(--ink-dim); }
.ov-act-value { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }

/* Economics section — secondary, visually quieter */
.ov-section-economics { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.ov-econ-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.ov-meter-wrap { margin-bottom: 0; }
.ov-econ-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ---------- SUPERADMIN customer pricing controls ---------- */
.customer-pricing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.customer-pricing-live { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(45,212,191,.28); border-radius: 6px; padding: 8px 11px; color: var(--ink-dim); font: 500 12px/1 var(--mono); background: rgba(45,212,191,.05); }
.customer-pricing-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.customer-pricing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.customer-pricing-card { border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); box-shadow: var(--hairline); overflow: hidden; transition: border-color .16s, box-shadow .16s; }
.customer-pricing-card.is-draft { border-color: rgba(245,181,68,.52); box-shadow: 0 0 0 1px rgba(245,181,68,.08); }
.customer-pricing-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.customer-pricing-card h2 { margin: 0; font-size: 16px; font-weight: 600; }
.customer-pricing-card header .mono { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 10px; }
.customer-pricing-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: 11px; }
.customer-pricing-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.customer-pricing-status.is-operational { color: var(--ok); }
.customer-pricing-status.is-operational i { background: var(--ok); }
.customer-pricing-status.is-degraded { color: var(--warn); }
.customer-pricing-status.is-degraded i { background: var(--warn); }
.customer-pricing-status.is-down { color: var(--danger); }
.customer-pricing-status.is-down i { background: var(--danger); }
.customer-pricing-metrics { display: grid; grid-template-columns: 1fr 1fr; padding: 20px 18px; }
.customer-pricing-metrics > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.customer-pricing-metrics span, .customer-pricing-edit label > span:first-child { display: block; color: var(--ink-dim); font: 500 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.customer-pricing-metrics strong { display: block; margin-top: 8px; font-size: 30px; line-height: 1; }
.customer-pricing-metrics strong.is-saving, .customer-pricing-saving { color: var(--accent); }
.customer-pricing-edit { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }
.customer-pricing-input { display: grid; grid-template-columns: 1fr 38px; margin-top: 7px; }
.customer-pricing-input .input { border-radius: 6px 0 0 6px; min-width: 0; }
.customer-pricing-input b { display: grid; place-items: center; border: 1px solid var(--line-2); border-left: 0; border-radius: 0 6px 6px 0; color: var(--ink-dim); background: var(--surface-2); font-size: 12px; }
.customer-pricing-card > footer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 10px; }
.customer-pricing-review { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(245,181,68,.42); border-radius: 8px; background: rgba(245,181,68,.06); }
.customer-pricing-review-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--warn); border-radius: 50%; color: var(--warn); font: 700 12px/1 var(--mono); }
.customer-pricing-review strong { font-size: 13px; }
.customer-pricing-review p { margin: 4px 0 0; color: var(--ink-dim); font-size: 12px; }
.customer-pricing-review .customer-pricing-consequence { color: var(--warn); }
.customer-pricing-review-actions { display: flex; gap: 8px; }
.customer-pricing-history-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 28px 0 10px; }
.customer-pricing-history-head h2 { margin: 0; font-size: 15px; }
.customer-pricing-history-head p { margin: 4px 0 0; color: var(--ink-faint); font-size: 12px; }
.customer-pricing-row-sub { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.customer-pricing-active { color: var(--accent); font: 600 10px/1 var(--mono); text-transform: uppercase; }
@media (max-width: 900px) {
  .customer-pricing-cards { grid-template-columns: 1fr; }
  .customer-pricing-review { grid-template-columns: auto 1fr; }
  .customer-pricing-review-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ============================================================================
   Plans & Billing — customer billing + subscription experience
   One page, two tabs (Subscriptions / Usage Credits) sharing the Obsidian
   tokens above. Layered surfaces, restrained gradients, one accent. All motion
   is short and gated on prefers-reduced-motion at the end of this block.
   ========================================================================== */
.pb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.pb-currency-tools { display: inline-flex; align-items: stretch; gap: 0; flex: none; }
.pb-currency-tools .pp-segmented { padding: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); }
.pb-currency-tools .pp-segmented .pp-currency-btn { min-height: 34px; padding: 0 13px; font-size: 12px; letter-spacing: 0.02em; }
.public-subscription-head .pb-currency-tools { align-self: center; }
.public-subscription-head + .pp-currency-note { margin: 0 0 16px; color: rgba(190, 200, 220, 0.55); font-size: 12px; }
.pb-head-titles { min-width: 0; }
.pb-head-sub { margin: 6px 0 0; color: var(--ink-dim); font-size: 14px; }
.pb-head-sales { margin-top: 7px; }
.pb-head-sales h2 { margin: 0; font-family: var(--display); font-size: 23px; line-height: 1.15; font-weight: 600; }
.pb-head-sales p { margin: 6px 0 0; color: var(--ink-dim); font-size: 14px; }
.pb-trust {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: center;
  min-width: 430px; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--hairline);
}
.pb-trust[hidden] { display: none; }
.pb-trust-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0 14px; }
.pb-trust-item + .pb-trust-item { border-left: 1px solid var(--line-2); }
.pb-trust-icon { display: grid; place-items: center; color: var(--accent); flex: none; }
.pb-trust-icon .ico { width: 25px; height: 25px; }
.pb-trust-item strong, .pb-trust-item small { display: block; }
.pb-trust-item strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.pb-trust-item small { margin-top: 2px; color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }
.public-subscription-pricing { padding: 52px 0 64px; }
.public-subscription-head { margin-bottom: 30px; }
.public-subscription-head .pb-head-sales { margin-top: 0; }
.public-subscription-head .pb-head-sales h1 {
  margin: 0; font-family: var(--display); font-size: 23px; line-height: 1.15; font-weight: 600;
}
.public-usage-credits { margin-top: 10px; border-top: 1px solid var(--line); }
.pb-eyebrow {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pb-section-h { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pb-section-sub { margin: 5px 0 0; color: var(--ink-dim); font-size: 13px; }
.pb-fine { margin: 12px 0 0; color: var(--ink-faint); font-size: 12px; }
.pb-credits-note { margin: 20px 0 0; color: var(--ink-faint); font-size: 12.5px; text-align: center; }

/* ---------- Segmented tab control ---------- */
.pb-tabs {
  position: relative; display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 26px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--hairline);
}
/* The moving pill sits behind the labels and slides between the two tabs. */
.pb-tabs-indicator {
  position: absolute; top: 4px; left: 4px; z-index: 0;
  width: calc(50% - 4px); height: calc(100% - 8px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface-3)), var(--surface-3));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line-2));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 6px 18px -10px var(--accent-glow);
  transition: transform 260ms var(--ease);
}
.pb-tabs[data-active="payg"] .pb-tabs-indicator { transform: translateX(100%); }
.pb-tab {
  position: relative; z-index: 1; appearance: none; cursor: pointer;
  padding: 9px 20px; border: 0; background: transparent; border-radius: var(--r-pill);
  color: var(--ink-dim); font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em; white-space: nowrap;
  transition: color 180ms var(--ease);
}
.pb-tab:hover { color: var(--ink); }
.pb-tab.is-active { color: var(--ink); font-weight: 600; }
.pb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Panels + entrance transition ---------- */
.pb-panel[hidden] { display: none; }
.pb-panel.is-active { animation: pbFadeIn 240ms var(--ease) both; }
.pb-panel:focus { outline: none; }
@keyframes pbFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- PAYG layout ---------- */
.pb-payg-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 18px; align-items: start; margin-bottom: 22px;
}

/* ---------- Wallet / balance card ---------- */
.pb-wallet {
  position: relative; overflow: hidden; min-width: 0;
  padding: 24px; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow), var(--hairline);
}
/* One hairline of accent along the top edge — the only glow on this card. */
.pb-wallet::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}
.pb-wallet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pb-wallet-label { color: var(--ink-dim); font-size: 13px; font-weight: 500; }
.pb-wallet-amount {
  margin: 14px 0 0; font-size: clamp(34px, 5vw, 46px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pb-wallet-amount.is-zero { color: var(--ink-faint); }
.pb-wallet.is-ready .pb-wallet-amount { animation: pbRise 420ms var(--ease) both; }
@keyframes pbRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pb-wallet-foot { margin: 12px 0 0; color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
.pb-wallet-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.pb-wallet-cta { min-width: 148px; justify-content: center; }
.pb-wallet-stamp { color: var(--ink-faint); font-size: 11.5px; font-family: var(--mono); }
.pb-wallet-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.pb-wallet-facts-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; padding-top: 14px; }
.pb-fact { min-width: 0; margin: 0; }
.pb-fact dt { color: var(--ink-faint); font-size: 11.5px; }
.pb-fact dd {
  margin: 5px 0 0; font-size: 15px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.pb-wallet-status-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px;
}
.pb-wallet-status-k { color: var(--ink-faint); }

/* ---------- Add balance ---------- */
.pb-topup {
  min-width: 0; padding: 24px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--hairline);
}
.pb-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.pb-amount {
  appearance: none; cursor: pointer; padding: 15px 8px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--ink);
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.pb-amount:hover { border-color: var(--line-2); background: var(--surface-3); transform: translateY(-1px); }
.pb-amount:active { transform: translateY(0); }
.pb-amount.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset;
}
.pb-amount:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-custom { display: block; margin-top: 16px; }
.pb-custom-label { display: block; margin-bottom: 7px; color: var(--ink-dim); font-size: 12.5px; }
.pb-custom-field { position: relative; display: block; }
.pb-custom-sym {
  position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
  color: var(--ink-faint); font-size: 15px; pointer-events: none;
}
.pb-custom-input { width: 100%; padding-left: 30px; font-variant-numeric: tabular-nums; }
.pb-amount-help { margin: 9px 0 0; color: var(--ink-faint); font-size: 12px; }
.pb-amount-help.is-err { color: var(--danger); }
.pb-topup-cta { width: 100%; justify-content: center; margin-top: 20px; }

/* ---------- Billing history ---------- */
.pb-history {
  padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--hairline); margin-bottom: 22px;
}
.pb-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pb-hist-list { display: grid; gap: 2px; }
.pb-hist-row {
  display: grid; grid-template-columns: 130px 100px 1fr auto auto;
  align-items: center; gap: 14px; padding: 14px 12px;
  border-radius: var(--r-sm); transition: background 160ms var(--ease);
}
.pb-hist-row:hover { background: var(--surface-2); }
.pb-hist-row + .pb-hist-row { border-top: 1px solid var(--line); }
.pb-hist-type {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.pb-hist-type::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pb-hist-type.is-payg::before { background: var(--accent); }
.pb-hist-type.is-sub::before { background: var(--tip); }
.pb-hist-amount { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-hist-method { color: var(--ink-dim); font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.pb-hist-date { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
.pb-hist-status { justify-self: end; }
.pb-quickstart { margin-bottom: 0; }

/* ---------- Empty + error states ---------- */
.pb-empty { padding: 34px 20px; text-align: center; }
.pb-empty-title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pb-empty-sub { margin: 7px 0 0; color: var(--ink-faint); font-size: 13px; }
.pb-empty .btn { margin-top: 16px; }
.pb-error {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 15px 18px; margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line));
  border-radius: var(--r); background: var(--danger-bg);
  color: var(--ink); font-size: 13.5px;
}

/* ---------- Loading skeletons (geometry matches final content) ---------- */
.pb-skel, .pb-skel-row, .pb-skel-card {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: pbShimmer 1.4s ease-in-out infinite;
}
.pb-skel-amt { display: block; height: 50px; border-radius: var(--r); }
.pb-skel-row { height: 48px; margin-bottom: 2px; }
.pb-skel-card { height: 336px; border-radius: var(--r-lg); }
@keyframes pbShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Plan discovery cards ---------- */
.pb-subs-intro { max-width: 820px; margin: 0 auto 22px; text-align: center; }
/* Keep the sales heading more specific than shared eyebrow/section rules. */
.pb-subs-intro .pb-subs-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(38px, 4vw, 64px); line-height: 1.05; font-weight: 750; letter-spacing: -0.01em; text-transform: none; }
.pb-subs-intro p { max-width: 720px; margin: 10px auto 0; color: var(--ink-dim); font-size: 19px; line-height: 1.45; }
.pb-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 20px; align-items: stretch; }
.pb-plan {
  --plan-accent: #2f8cff; --plan-accent-2: #175ad9; --plan-glow: rgba(47, 140, 255, 0.22);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
  padding: 24px; border: 1px solid color-mix(in srgb, var(--plan-accent) 72%, var(--line-2)); border-radius: var(--r-lg);
  background:
    radial-gradient(85% 76% at 96% 2%, color-mix(in srgb, var(--plan-accent) 13%, transparent), transparent 64%),
    linear-gradient(150deg, color-mix(in srgb, var(--surface-2) 94%, var(--plan-accent)), var(--surface) 62%);
  box-shadow: 0 24px 60px -42px var(--plan-accent), inset 0 1px 0 rgba(255,255,255,0.055);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pb-plan--pro { --plan-accent: #31e88b; --plan-accent-2: #08a95c; --plan-glow: rgba(49, 232, 139, 0.2); }
.pb-plan::before {
  content: ""; position: absolute; z-index: -1; inset: -20% -12% auto 35%; height: 48%;
  background: radial-gradient(ellipse, var(--plan-glow), transparent 68%); opacity: 0.75;
  transform: translate3d(0,0,0); animation: pbPlanGlow 7s ease-in-out infinite alternate;
}
.pb-plan:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--plan-accent) 90%, white 10%);
  box-shadow: 0 30px 76px -40px var(--plan-accent), inset 0 1px 0 rgba(255,255,255,0.07);
}
@keyframes pbPlanGlow { to { transform: translate3d(-4%, 8%, 0); opacity: 1; } }
.pb-plan-hero { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 16px; min-width: 0; margin-bottom: 16px; }
.pb-plan-identity { min-width: 0; }
.pb-plan-audience {
  display: inline-flex; padding: 5px 10px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 35%, transparent); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--plan-accent) 13%, transparent);
  color: color-mix(in srgb, var(--plan-accent) 78%, white); font-size: 11px; font-weight: 600;
}
.pb-plan-name { margin: 0; font-family: var(--display); font-size: 33px; line-height: 1; font-weight: 600; }
.pb-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.pb-plan-price-amt {
  font-family: var(--display); font-size: 43px; font-weight: 650;
  line-height: 0.95; color: var(--plan-accent); font-variant-numeric: tabular-nums;
}
.pb-plan-price-per { color: var(--ink-dim); font-size: 14px; }
.pb-plan-models { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pb-plan-model {
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--plan-accent) 28%, var(--line-2));
  background: color-mix(in srgb, var(--plan-accent) 10%, var(--surface-3));
  color: color-mix(in srgb, var(--plan-accent) 62%, white); font-size: 12px; font-weight: 600;
  transition: transform 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
}
.pb-plan-model:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--plan-accent) 58%, var(--line-2)); }
.pb-plan-model--haiku { color: #68e8c1; border-color: rgba(45, 212, 191, 0.28); background: rgba(45, 212, 191, 0.09); }
.pb-plan-model--sonnet { color: #68c7ff; border-color: rgba(47, 140, 255, 0.3); background: rgba(47, 140, 255, 0.1); }
.pb-plan-model--opus { color: #eba4ff; border-color: rgba(207, 115, 255, 0.3); background: rgba(207, 115, 255, 0.11); }
.pb-plan-capacity { position: relative; display: grid; place-items: center; justify-self: end; width: 210px; aspect-ratio: 1; color: var(--plan-accent); }
.pb-capacity-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 225deg, var(--plan-accent) 0 var(--capacity-fill), color-mix(in srgb, var(--plan-accent) 13%, var(--surface-3)) var(--capacity-fill) 270deg, transparent 270deg);
  filter: drop-shadow(0 0 13px var(--plan-glow)); animation: pbGaugeIn 720ms var(--ease) both;
}
.pb-capacity-ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--surface); }
@keyframes pbGaugeIn { from { opacity: 0; transform: rotate(-8deg) scale(0.94); } }
.pb-capacity-copy { position: relative; z-index: 1; display: grid; justify-items: center; margin-top: 7px; line-height: 1; }
.pb-capacity-copy strong { color: var(--ink); font-family: var(--display); font-size: 48px; font-weight: 650; }
.pb-capacity-copy span { margin-top: 5px; color: var(--plan-accent); font-size: 16px; font-weight: 650; }
.pb-capacity-copy small { margin-top: 7px; color: var(--ink); font-size: 12px; font-weight: 600; }
.pb-plan-value-panel {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch;
  min-height: 76px; margin-bottom: 14px; padding: 10px 8px; border: 1px solid color-mix(in srgb, var(--plan-accent) 15%, var(--line-2));
  border-radius: var(--r); background: rgba(5, 10, 18, 0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.pb-plan-value { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 9px; }
.pb-plan-value + .pb-plan-value { border-left: 1px solid color-mix(in srgb, var(--plan-accent) 18%, var(--line)); }
.pb-plan-value-icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 30%, transparent); border-radius: 8px;
  background: color-mix(in srgb, var(--plan-accent) 9%, transparent); color: var(--plan-accent);
}
.pb-plan-value-icon .ico { width: 18px; height: 18px; }
.pb-plan-value span > strong, .pb-plan-value span > b, .pb-plan-value span > small { display: block; overflow-wrap: anywhere; }
.pb-plan-value span > strong { color: var(--ink); font-size: 13.5px; line-height: 1.12; font-weight: 650; }
.pb-plan-value span > b { margin-top: 3px; color: var(--ink-dim); font-size: 11.5px; line-height: 1.15; font-weight: 500; }
.pb-plan-value span > small { margin-top: 2px; color: var(--ink-faint); font-size: 10.5px; line-height: 1.15; }
.pb-plan-note { margin: 0 0 18px; color: var(--ink-faint); font-size: 12px; }
.pb-coverage-note { margin: 18px 0 0; text-align: center; }
.pb-plan-cta {
  width: 100%; min-height: 52px; justify-content: center; margin-top: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 92%, white), var(--plan-accent-2));
  color: #03130e; border-color: color-mix(in srgb, var(--plan-accent) 75%, white 25%);
  box-shadow: 0 14px 28px -18px var(--plan-accent), inset 0 1px 0 rgba(255,255,255,0.3); font-size: 15px; font-weight: 650;
}
.pb-plan--developer .pb-plan-cta { color: white; }
.pb-plan-cta:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 80%, white), var(--plan-accent-2)); box-shadow: 0 18px 34px -17px var(--plan-accent), inset 0 1px 0 rgba(255,255,255,0.34); }
.pb-plan-cta .ico { width: 19px; height: 19px; transition: transform 160ms var(--ease); }
.pb-plan-cta:hover .ico { transform: translateX(4px); }
.pb-plan-cta[disabled] { opacity: 0.5; cursor: not-allowed; }
.pb-tabs { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
.pb-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 46px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.pb-why-column { min-width: 0; }
.pb-why-column + .pb-why-column { padding-left: 48px; border-left: 1px solid var(--line-2); }
.pb-why-column--pro { --why-accent: #31e88b; }
.pb-why-column--developer { --why-accent: #2f8cff; }
.pb-why-label { display: block; color: var(--why-accent); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
.pb-why-column h3 { margin: 9px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; font-weight: 700; }
.pb-why-intro { max-width: 520px; margin: 12px 0 0; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
.pb-why-list { display: grid; gap: 24px; margin-top: 28px; }
.pb-why-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; min-width: 0; }
.pb-why-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--why-accent); }
.pb-why-icon .ico { width: 22px; height: 22px; }
.pb-why-item h4 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.2; font-weight: 700; }
.pb-why-item strong { display: block; margin-top: 4px; color: var(--why-accent); font-size: 13px; line-height: 1.3; font-weight: 650; }
.pb-why-item p { max-width: 520px; margin: 5px 0 0; color: var(--ink-dim); font-size: 12.5px; line-height: 1.45; }

/* ---------- Active subscription management ---------- */
.pb-plan-status {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--hairline);
}
.pb-plan-status-main { min-width: 0; }
.pb-plan-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.pb-plan-status-name { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.pb-plan-status-meta { margin: 9px 0 0; color: var(--ink-dim); font-size: 13px; }
.pb-queued { display: grid; gap: 5px; }
.pb-queued-row { color: var(--ink-faint); font-size: 12px; }

/* Rolling allowance — the most important number on the screen. */
.pb-usage-hero {
  position: relative; overflow: hidden;
  padding: 24px; margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line-2));
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow), var(--hairline);
}
.pb-usage-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pb-usage-headline {
  margin: 8px 0 0; font-family: var(--display); font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.15;
}
.pb-usage-of { color: var(--ink-dim); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.pb-usage-pct { flex: none; color: var(--accent); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-usage-foot { margin: 12px 0 0; color: var(--ink-faint); font-size: 12.5px; line-height: 1.55; }

/* Progress bar: fills from 0 on first paint. */
.pb-bar {
  position: relative; overflow: hidden; height: 12px;
  border-radius: var(--r-pill); background: var(--surface-3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
}
.pb-bar-sm { height: 7px; }
.pb-bar-fill {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  box-shadow: 0 0 14px -3px var(--accent-glow);
  transition: width 620ms var(--ease);
}
.pb-bar-fill.is-low { background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 80%, var(--danger)), var(--warn)); box-shadow: none; }
.pb-bar-fill.is-muted { background: var(--line-2); box-shadow: none; }

.pb-term {
  padding: 18px 24px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--hairline);
}
.pb-term-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pb-term-figure { color: var(--ink-dim); font-size: 13px; font-variant-numeric: tabular-nums; }

.pb-manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.pb-manage-card {
  min-width: 0; padding: 22px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--hairline);
}
.pb-manage-h { margin: 0 0 4px; font-family: var(--display); font-size: 15px; font-weight: 600; }
.pb-manage-sub { margin: 0 0 16px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
.pb-model-list { list-style: none; display: grid; gap: 14px; margin: 16px 0 0; padding: 0; }
.pb-model-item { display: grid; gap: 3px; padding-left: 15px; position: relative; }
.pb-model-item::before {
  content: ""; position: absolute; top: 7px; left: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.pb-model-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pb-model-blurb { color: var(--ink-faint); font-size: 12.5px; }
.pb-limit-list { display: grid; gap: 16px; margin: 16px 0 0; }
.pb-limit { margin: 0; }
.pb-limit dt { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.pb-limit dd { margin: 3px 0 0; color: var(--ink-faint); font-size: 12.5px; }
.pb-manage-card .select { width: 100%; margin-top: 7px; }
.pb-usage-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pb-usage-mode-current { color: var(--accent); font-size: 13px; font-weight: 600; }
.pb-usage-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}
.pb-usage-mode-option {
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pb-usage-mode-option.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.16); }
.pb-usage-mode-option:focus-visible, .pb-fallback-toggle input:focus-visible + .pb-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-fallback-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 16px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.pb-fallback-toggle input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.pb-toggle-track { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; display: block; width: 36px; height: 20px; padding: 2px; border-radius: 10px; background: var(--line-strong); transition: background .16s ease; }
.pb-fallback-toggle > span:last-child { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: normal; word-break: normal; }
.pb-toggle-track span { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .16s ease; }
.pb-fallback-toggle input:checked + .pb-toggle-track { background: var(--accent); }
.pb-fallback-toggle input:checked + .pb-toggle-track span { transform: translateX(16px); }
.pb-fallback-toggle[hidden] { display: none; }
.pb-payg-bal {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 12.5px;
}
.pb-payg-bal .mono { color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Purchase review sheet ---------- */
.pb-review-card { max-width: 440px; animation: pbSheetIn 220ms var(--ease) both; }
@keyframes pbSheetIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.pb-review-body {
  display: grid; gap: 2px; margin: 6px 0 0;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.pb-review-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 16px;
}
.pb-review-line + .pb-review-line { border-top: 1px solid var(--line); }
.pb-review-k { color: var(--ink-faint); font-size: 12.5px; }
.pb-review-v { font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pb-review-err { margin: 14px 0 0; color: var(--danger); font-size: 13px; }
.pb-review-actions { display: flex; gap: 10px; margin-top: 20px; }
.pb-review-actions .btn { flex: 1; justify-content: center; }

/* ---------- Dashboard billing summary (summary only, no purchase CTA) ---------- */
.dash-billing {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px 22px; margin-top: 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--hairline);
}
.dash-billing-cards { display: flex; gap: 40px; flex-wrap: wrap; min-width: 0; }
.dash-billing-card { min-width: 0; }
.dash-billing-k { display: block; color: var(--ink-faint); font-size: 11.5px; }
.dash-billing-v {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.dash-billing-sub { margin: 4px 0 0; color: var(--ink-faint); font-size: 12px; }
.dash-billing-cta { flex: none; }

/* ---------- Responsive ----------
   Mobile is laid out for mobile, not a narrowed desktop: the history table
   becomes stacked records, tabs stretch full width, and CTAs go full-bleed. */
@media (max-width: 1080px) {
  .pb-payg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1160px) {
  .pb-head { flex-direction: column; }
  .pb-trust { align-self: stretch; min-width: 0; max-width: 620px; }
  .pb-plan-grid { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .pb-plan-hero { grid-template-columns: minmax(0, 1fr) 230px; }
  .pb-why-grid { grid-template-columns: 1fr; gap: 34px; }
  .pb-why-column + .pb-why-column { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2); padding-top: 34px; }
}
@media (min-width: 1081px) {
  /* The full Add balance panel owns the desktop purchase action. */
  .pb-wallet-cta { display: none; }
}
@media (max-width: 860px) {
  .pb-hist-row { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 15px 12px; }
  .pb-hist-type { grid-column: 1; }
  .pb-hist-amount { grid-column: 2; grid-row: 1; justify-self: end; font-size: 15px; }
  .pb-hist-method { grid-column: 1; grid-row: 2; }
  .pb-hist-date { grid-column: 1; grid-row: 3; }
  .pb-hist-status { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .pb-hist-row:hover { background: transparent; }
}
@media (max-width: 640px) {
  .pb-head { margin-bottom: 18px; }
  .pb-head-sales h2 { font-size: 20px; }
  .public-subscription-pricing { padding: 34px 0 48px; }
  .public-subscription-head .pb-head-sales h1 { font-size: 20px; }
  .pb-trust { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .pb-trust-item { padding: 0; }
  .pb-trust-item + .pb-trust-item { padding-top: 12px; border-top: 1px solid var(--line-2); border-left: 0; }
  /* Tabs stay obvious and thumb-sized, filling the width evenly. */
  .pb-tabs { display: flex; width: 100%; margin-bottom: 20px; }
  /* Tabs are primary controls: give them the full 44px touch height, not the
     40px the old padding happened to produce. */
  .pb-tab { flex: 1; min-height: 44px; padding: 12px; text-align: center; }
  .pb-wallet, .pb-topup, .pb-history, .pb-plan, .pb-manage-card, .pb-plan-status, .pb-usage-hero { padding: 20px 18px; }
  /* Comfortable tap targets on mobile: small buttons get a 40px minimum and
     every primary CTA in this view clears the 44px touch guideline. */
  #view-overview .btn-sm { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  #view-overview .btn, .pb-review .btn { min-height: 44px; }
  .pb-wallet-amount { font-size: 36px; }
  .pb-wallet-actions { gap: 10px; }
  .pb-wallet-cta { width: 100%; }
  .pb-wallet-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .pb-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-amount { padding: 16px 8px; }
  .pb-plan-grid { grid-template-columns: 1fr; }
  .pb-plan { padding: 20px 18px; }
  .pb-plan-hero { grid-template-columns: minmax(0, 1fr) 134px; gap: 10px; margin-bottom: 18px; }
  .pb-plan-audience { margin-bottom: 11px; padding: 4px 8px; font-size: 10.5px; }
  .pb-plan-name { font-size: 27px; }
  .pb-plan-price { gap: 6px; margin-top: 11px; }
  .pb-plan-price-amt { font-size: 34px; }
  .pb-plan-price-per { font-size: 11px; }
  .pb-plan-models { gap: 5px; margin-top: 14px; }
  .pb-plan-model { padding: 5px 9px; font-size: 10.5px; }
  .pb-plan-capacity { width: 134px; }
  .pb-capacity-ring::after { inset: 10px; }
  .pb-capacity-copy strong { font-size: 35px; }
  .pb-capacity-copy span { font-size: 12.5px; }
  .pb-capacity-copy small { margin-top: 5px; font-size: 10.5px; }
  .pb-plan-value-panel { grid-template-columns: 1fr; gap: 0; padding: 4px 14px; }
  .pb-plan-value { padding: 10px 0; }
  .pb-plan-value + .pb-plan-value { border-top: 1px solid color-mix(in srgb, var(--plan-accent) 18%, var(--line)); border-left: 0; }
  .pb-plan-value span > strong { font-size: 15px; }
  .pb-subs-intro .pb-subs-title { font-size: clamp(34px, 9vw, 40px); line-height: 1.05; }
  .pb-subs-intro p { font-size: 16px; }
  .pb-why-grid { margin-top: 36px; padding-top: 26px; }
  .pb-usage-top { flex-direction: column; gap: 8px; }
  .pb-usage-pct { align-self: flex-start; }
  .pb-manage-grid { grid-template-columns: 1fr; }
  .dash-billing { flex-direction: column; align-items: stretch; gap: 18px; }
  .dash-billing-cards { gap: 18px; justify-content: space-between; }
  .dash-billing-cta { width: 100%; justify-content: center; }
  /* Scoped to this sheet only, so the shared .icon-btn size is untouched. */
  .pb-review .icon-btn { width: 44px; height: 44px; }
  /* Review becomes a bottom sheet on small screens. The shared .modal wrapper
     centres and pads its child, so both are reset here to let the sheet reach
     the screen edges. */
  .pb-review { padding: 0; place-items: end stretch; }
  .pb-review .pb-review-card {
    max-width: none; width: 100%; margin: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92vh; overflow-y: auto;
  }
  @keyframes pbSheetIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 380px) {
  .pb-wallet-facts { grid-template-columns: 1fr; }
  .pb-review-actions { flex-direction: column; }
}

/* ---------- Reduced motion ----------
   Every Plans & Billing animation is opt-out. The UI stays fully usable: bars
   and amounts render at their final values instantly. */
@media (prefers-reduced-motion: reduce) {
  .pb-tabs-indicator, .pb-bar-fill, .pb-amount, .pb-plan, .pb-plan-model, .pb-plan-cta .ico, .pb-hist-row, .pb-tab { transition: none !important; }
  .pb-panel.is-active, .pb-wallet.is-ready .pb-wallet-amount, .pb-review-card, .pb-plan::before, .pb-capacity-ring { animation: none !important; }
  .pb-skel, .pb-skel-row, .pb-skel-card { animation: none !important; background: var(--surface-2); }
  .pb-plan:hover, .pb-amount:hover { transform: none; }
}

/* ========================================================================
   LIGHT THEME POLISH + RESTRAINED MOTION
   Documents declare dark before this file loads; theme.js restores an explicit
   saved preference. Motion never changes data or layout geometry.
   ======================================================================== */

:root[data-theme="light"] {
  --bg: #F7F9FC;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F2F5F8;
  --surface-3: #E8EDF2;
  --line: #DDE3EA;
  --line-2: #C7D0DA;
  --ink: #17202B;
  --ink-dim: #4C5968;
  --ink-faint: #657284;
  --accent: #0F766E;
  --accent-dim: #0D9488;
  --accent-deep: #E3F4F1;
  --accent-glow: rgba(15, 118, 110, 0.16);
  --on-accent: #FFFFFF;
  --ok: #08775A;
  --ok-bg: rgba(8, 119, 90, 0.10);
  --warn: #9A6700;
  --warn-bg: rgba(154, 103, 0, 0.10);
  --tip: #6D4FC2;
  --tip-bg: rgba(109, 79, 194, 0.10);
  --danger: #C43D36;
  --danger-bg: rgba(196, 61, 54, 0.09);
  --shadow-sm: 0 1px 3px rgba(31, 42, 55, 0.10);
  --shadow: 0 18px 45px -30px rgba(31, 42, 55, 0.42);
  --shadow-lg: 0 30px 80px -42px rgba(31, 42, 55, 0.42);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

:root[data-theme="light"] body::before {
  background:
    radial-gradient(800px 460px at 82% -10%, rgba(15, 118, 110, 0.08), transparent 64%),
    radial-gradient(700px 520px at -8% 105%, rgba(59, 130, 246, 0.045), transparent 60%),
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(23,32,43,0.018) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(23,32,43,0.018) 100%);
  background-size: 100% 100%, 100% 100%, 100% 48px, 48px 100%;
}
:root[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.88);
  border-right-color: var(--line);
  box-shadow: 8px 0 28px -28px rgba(31, 42, 55, 0.42);
}
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .key-card,
:root[data-theme="light"] .filter-bar,
:root[data-theme="light"] .pb-wallet,
:root[data-theme="light"] .pb-topup,
:root[data-theme="light"] .pb-history,
:root[data-theme="light"] .pb-manage-card,
:root[data-theme="light"] .pb-plan-status,
:root[data-theme="light"] .dash-billing {
  border-color: var(--line);
  box-shadow: var(--shadow-sm), var(--hairline);
}
:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] .lang-select {
  background-color: #FFFFFF;
  border-color: var(--line-2);
  box-shadow: inset 0 1px 2px rgba(31, 42, 55, 0.035);
}
:root[data-theme="light"] .input:focus,
:root[data-theme="light"] .select:focus {
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}
:root[data-theme="light"] .btn-primary {
  background: linear-gradient(180deg, #14877E, #0F766E);
  border-color: #0F6B64;
  color: #FFFFFF;
  box-shadow: 0 10px 24px -15px rgba(15, 118, 110, 0.65);
}
:root[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(180deg, #0F766E, #0B625C);
  color: #FFFFFF;
}
:root[data-theme="light"] .btn-outline { background: #FFFFFF; }
:root[data-theme="light"] .nav-item:hover,
:root[data-theme="light"] .acct-menu-item:hover,
:root[data-theme="light"] .table tbody tr:hover,
:root[data-theme="light"] .pp-table tbody tr:hover { background: #EEF3F6; }
:root[data-theme="light"] .acct-menu,
:root[data-theme="light"] .modal-card {
  background: #FFFFFF;
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg), var(--hairline);
}
:root[data-theme="light"] .modal-scrim,
:root[data-theme="light"] .drawer-scrim { background: rgba(30, 41, 55, 0.30); backdrop-filter: blur(4px); }
:root[data-theme="light"] .toast {
  background: #FFFFFF;
  box-shadow: 0 16px 44px -24px rgba(31, 42, 55, 0.5);
}
:root[data-theme="light"] .meter {
  background: #E7ECF1;
  box-shadow: inset 0 1px 3px rgba(31, 42, 55, 0.14);
}
:root[data-theme="light"] .meter-ticks {
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,0.72) calc(10% - 1px) 10%);
}
:root[data-theme="light"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.82), transparent);
}

/* A terminal remains intentionally dark in light mode: it is inspectable
   developer chrome rather than an inverted application surface. */
:root[data-theme="light"] .hp-term {
  --ink: #E8EEF3;
  --ink-dim: #A8B4C0;
  --ink-faint: #788694;
  --line: #222B34;
  --line-2: #34404B;
  --surface: #0B1015;
  --surface-2: #111820;
  background: linear-gradient(180deg, #111820, #0B1015);
  border-color: #2A3540;
  box-shadow: 0 28px 70px -40px rgba(16, 35, 42, 0.72);
}
:root[data-theme="light"] .hp-term-bar { background: rgba(255,255,255,0.025); }
:root[data-theme="light"] .hp-nav-links.is-open { box-shadow: var(--shadow-lg); }

/* Docs use a calm paper canvas in light mode while code examples retain their
   dark command chrome for legibility and visual continuity. */
:root[data-theme="light"] .docs-page {
  --doc-paper: #FFFFFF;
  --doc-raised: #F4F7F9;
  --doc-ink: #17202B;
  --doc-ink-2: #465465;
  --doc-ink-3: #657284;
  --doc-line: #DDE3EA;
  --doc-line-2: #C7D0DA;
  --doc-accent: #0F766E;
  --doc-accent-soft: rgba(15, 118, 110, 0.09);
}
:root[data-theme="light"] .docs-topbar { background: #FFFFFF; border-color: var(--doc-line); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .docs-topbar .wordmark .name { color: var(--doc-ink); }
:root[data-theme="light"] .docs-top-actions > a { color: var(--doc-ink-2); }
:root[data-theme="light"] .docs-top-actions > a:hover { color: var(--doc-ink); }
:root[data-theme="light"] .docs-menu-button { background: #F4F7F9; border-color: var(--doc-line-2); color: var(--doc-ink); }
:root[data-theme="light"] .docs-sidebar { background: #F4F7F9; border-color: var(--doc-line); }
:root[data-theme="light"] .docs-nav-group { color: var(--doc-ink); }
:root[data-theme="light"] .docs-sidebar a { color: var(--doc-ink-2); }
:root[data-theme="light"] .docs-sidebar a:hover,
:root[data-theme="light"] .docs-sidebar a[aria-current="page"] { color: var(--doc-ink); background: #E6EFEE; }

/* Checkout and plan cards had deliberately hard-coded dark materials. */
:root[data-theme="light"] body.subscription-checkout { background: var(--bg); }
:root[data-theme="light"] .subscription-checkout .pp-top { background: rgba(255,255,255,0.88); }
:root[data-theme="light"] .subscription-checkout-card {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 32px 76px -48px rgba(15,118,110,0.42), var(--hairline);
}
:root[data-theme="light"] .subscription-plan-icon {
  background: linear-gradient(145deg, rgba(15,118,110,0.08), #F7FAFB);
}
:root[data-theme="light"] .subscription-credit-note { background: rgba(47, 140, 255, 0.055); }
:root[data-theme="light"] .subscription-status[data-tone="error"] { color: var(--danger); }
:root[data-theme="light"] .subscription-status[data-tone="pending"] { color: var(--warn); }
:root[data-theme="light"] .ac-processing { background: rgba(30,41,55,0.3); }
:root[data-theme="light"] .pb-plan-value-panel,
:root[data-theme="light"] .pb-plan-model--haiku { color: #08775A; }
:root[data-theme="light"] .pb-plan-model--sonnet { color: #1769AA; }
:root[data-theme="light"] .pb-plan-model--opus { color: #8246A5; }
:root[data-theme="light"] .pb-plan--pro { --plan-accent: #08775A; --plan-accent-2: #056246; }

/* Motion: stable dimensions are retained; only opacity, transform, color,
   border, and shadow animate. */
@keyframes premiumEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes premiumToastOut { to { opacity: 0; transform: translateY(6px); } }

.auth-card,
.view:not([hidden]),
.pp-hero,
.docs-layout,
.legal-article,
.monitor-status { animation: premiumEnter 320ms var(--ease) both; }
.hp-hero-copy { animation: premiumEnter 360ms var(--ease) both; }
.hp-term-wrap { animation: premiumEnter 380ms 70ms var(--ease) both; }
.stat-grid > *, .keys-grid > *, .pb-plan-grid > *, .cr-grid > * { animation: premiumEnter 300ms var(--ease) both; }
.stat-grid > :nth-child(2), .keys-grid > :nth-child(2), .pb-plan-grid > :nth-child(2), .cr-grid > :nth-child(2) { animation-delay: 45ms; }
.stat-grid > :nth-child(3), .keys-grid > :nth-child(3), .cr-grid > :nth-child(3) { animation-delay: 90ms; }

.motion-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 340ms var(--ease), transform 340ms var(--ease);
  transition-delay: calc(var(--motion-order, 0) * 34ms);
}
.motion-reveal.is-revealed { opacity: 1; transform: translateY(0); }

.card, .stat, .key-card, .provider-card, .pb-wallet, .pb-topup, .pb-history,
.pb-manage-card, .ac-panel, .pp-offer-card, .cr-card, .hp-switch-item,
.hp-step, .hp-aud-card, .hp-fcard, .hp-trust-card, .support-card, .gate-console {
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), background-color 180ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .stat:hover, .key-card:hover, .provider-card:hover,
  .pb-wallet:hover, .pb-topup:hover, .pb-history:hover, .pb-manage-card:hover,
  .ac-panel:hover, .pp-offer-card:hover, .cr-card:hover, .hp-switch-item:hover,
  .hp-step:hover, .hp-aud-card:hover, .hp-fcard:hover, .hp-trust-card:hover,
  .support-card:hover, .gate-console:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line-2));
    box-shadow: var(--shadow), var(--hairline);
  }
  .btn:hover .ico:last-child, .btn:hover .hp-arrow { transform: translateX(2px); }
}
.btn { transition-duration: 140ms, 180ms, 180ms, 180ms, 180ms; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn[aria-busy="true"], .btn.is-loading { cursor: wait; }
.btn .ico, .nav-item .ico { transition: transform 180ms var(--ease), color 180ms var(--ease); }
.nav-item, .pb-tab, .auth-tabs button, .pp-nav a, .hp-nav-links a { transition: color 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); }
.nav-item:hover { transform: translateX(2px); }
.pb-tabs-indicator, .pb-bar-fill, .meter-fill, .share-bar > i { transition: width 560ms var(--ease), transform 220ms var(--ease); }

.modal {
  opacity: 1;
  transition: opacity 180ms ease, display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.modal[hidden] { display: none; opacity: 0; }
.modal-card { transition: opacity 200ms ease, transform 200ms var(--ease); }
@starting-style {
  .modal:not([hidden]) { opacity: 0; }
  .modal:not([hidden]) .modal-card { opacity: 0; transform: translateY(6px) scale(0.985); }
  .acct-menu:not([hidden]) { opacity: 0; transform: translateY(-5px); }
}
.acct-menu {
  opacity: 1; transform: translateY(0);
  transition: opacity 150ms ease, transform 150ms var(--ease), display 150ms allow-discrete;
}
.acct-menu[hidden] { display: none; opacity: 0; transform: translateY(-5px); }
.toast { animation: toastin 220ms var(--ease) both; transition: opacity 220ms ease, transform 220ms var(--ease); }
.pp-toast:not([hidden]), .docs-copy-status:not(:empty) { animation: toastin 220ms var(--ease) both; }
.skeleton, .pb-skel, .pb-skel-row, .pb-skel-card { transition: opacity 180ms ease; }

@media (max-width: 760px) {
  .hp-nav-links { transition: opacity 180ms ease, visibility 180ms ease, transform 180ms var(--ease); }
  .shell, .main { transition: grid-template-columns 220ms var(--ease), padding 220ms var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .motion-reveal { opacity: 1; transform: none; }
  .card:hover, .stat:hover, .key-card:hover, .provider-card:hover,
  .pb-plan:hover, .pb-amount:hover, .support-card:hover, .gate-console:hover { transform: none !important; }
}

/* Currency toggle (landing + pricing) */
.pp-segmented { flex: none; display: flex; padding: 4px; border: 1px solid rgba(149, 166, 195, 0.15); border-radius: 7px; background: rgba(10, 14, 22, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); }
.pp-segmented .pp-currency-btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: 5px; color: #788497; background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease; letter-spacing: 0.02em; }
.pp-segmented .pp-currency-btn[aria-pressed="true"] { color: #eff4fa; background: linear-gradient(135deg, rgba(70, 212, 207, 0.12), rgba(139, 108, 255, 0.18)); box-shadow: inset 0 0 0 1px rgba(155, 132, 255, 0.2); }
.pp-currency-note { margin: 0; color: rgba(190, 200, 220, 0.6); font-size: 12px; }
@media (max-width: 640px) {
  .pp-segmented { width: 100%; }
  .pp-segmented .pp-currency-btn { flex: 1; }
}

/* Email-first paid checkout modal (shared between / and /pricing) */
.pp-modal-open { overflow: hidden; }
.pp-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 7, 12, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 180ms ease;
  opacity: 1;
}
.pp-modal-shell.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.pp-modal-card {
  width: min(440px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 28px 28px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(15, 20, 31, 0.98), rgba(7, 10, 17, 0.98));
  border: 1px solid rgba(143, 164, 193, 0.18);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 12px 60px -30px rgba(139, 108, 255, 0.45);
  color: #eff4fa;
  position: relative;
}
.pp-modal-header {
  margin: 0 0 18px;
}
.pp-modal-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -36px;
}
.pp-modal-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #eff4fa;
}
.pp-modal-subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(190, 200, 220, 0.7);
  line-height: 1.45;
}
.pp-modal-close {
  background: transparent;
  border: 1px solid rgba(143, 164, 193, 0.18);
  color: rgba(190, 200, 220, 0.7);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.pp-modal-close:hover {
  color: #fff;
  border-color: rgba(143, 164, 193, 0.4);
  background: rgba(255, 255, 255, 0.04);
}
.pp-modal-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 110, 110, 0.32);
  background: rgba(255, 110, 110, 0.08);
  color: #ffd2d2;
  font-size: 13px;
  line-height: 1.4;
}
.pp-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-modal-form label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(190, 200, 220, 0.62);
  margin-top: 4px;
}
.pp-modal-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(143, 164, 193, 0.22);
  background: rgba(255, 255, 255, 0.02);
  color: #eff4fa;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  outline: none;
}
.pp-modal-input:focus {
  border-color: rgba(106, 226, 217, 0.55);
  box-shadow: 0 0 0 3px rgba(106, 226, 217, 0.15);
  background: rgba(255, 255, 255, 0.04);
}
.pp-modal-code {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.45em;
  text-align: center;
  font-size: 22px;
  padding-left: calc(14px + 0.45em * 3);
}
.pp-modal-hint {
  margin: -6px 0 4px;
  font-size: 12px;
  color: rgba(190, 200, 220, 0.55);
}
.pp-modal-plan-line {
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(106, 226, 217, 0.07);
  border: 1px solid rgba(106, 226, 217, 0.22);
  color: #eff4fa;
  font-size: 13px;
}
.pp-modal-success {
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(106, 226, 217, 0.12);
  border: 1px solid rgba(106, 226, 217, 0.32);
  color: #eff4fa;
  font-size: 14px;
  line-height: 1.4;
}
.pp-modal-submit {
  margin-top: 6px;
  width: 100%;
}
.pp-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.pp-modal-actions-end {
  justify-content: flex-end;
}
.pp-modal-secondary {
  flex: 1;
}
.pp-modal-link {
  background: transparent;
  border: 0;
  color: rgba(106, 226, 217, 0.85);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  font-family: inherit;
}
.pp-modal-link:hover { color: #62ebdf; text-decoration: underline; }
.pp-modal-spinner {
  width: 36px;
  height: 36px;
  margin: 8px auto 12px;
  border-radius: 50%;
  border: 3px solid rgba(106, 226, 217, 0.18);
  border-top-color: rgba(106, 226, 217, 0.85);
  animation: pp-modal-spin 0.9s linear infinite;
}
@keyframes pp-modal-spin { to { transform: rotate(360deg); } }
.pp-modal-loading-text {
  margin: 0 0 12px;
  text-align: center;
  font-size: 14px;
  color: rgba(190, 200, 220, 0.85);
}
.pp-modal-shell[data-busy="1"] .pp-modal-input,
.pp-modal-shell[data-busy="1"] .pp-modal-submit,
.pp-modal-shell[data-busy="1"] .pp-modal-secondary,
.pp-modal-shell[data-busy="1"] .pp-modal-link,
.pp-modal-shell[data-busy="1"] .pp-modal-close {
  opacity: 0.6;
}
@media (max-width: 520px) {
  .pp-modal-shell { padding: 12px; }
  .pp-modal-card { padding: 22px 18px 18px; }
  .pp-modal-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-modal-shell,
  .pp-modal-input,
  .pp-modal-close { transition: none; }
  .pp-modal-spinner { animation: none; }
}

@media (max-width: 720px) {
  .landing-pricing-heading { flex-direction: column; align-items: flex-start; }
  .landing-pricing-tools { justify-content: flex-start; }
  .landing-pricing-stage > .landing-currency-note { text-align: left; }
  .pb-head { flex-direction: column; align-items: flex-start; }
  .pb-currency-tools { align-self: flex-start; }
}