/* ==========================================================================
   NexoAI — D2 "Signal Gradient" skin
   Tokens, type and components per design-brief/DESIGN_SYSTEM.md (LOCKED).
   Near-black world, glass surfaces, one static periwinkle→mint glow,
   hairline structure, no drop shadows.
   ========================================================================== */

:root {
  /* -- LOCKED palette — DESIGN.md :root tokens (authoritative) ------------- */
  --bg: #0A0C0F;
  --bg-elev: #13161B;
  --bg-elev-2: #191D23;
  --border: #242A32;
  --border-strong: #333B45;
  --text: #EDEFF2;
  --text-muted: #7E8894;
  --accent: #6D8BFF;
  --accent-hover: #849DFF;
  --credit: #3ECF8E;          /* mint — balance / credit / success ONLY */
  --amber: #E8B84B;           /* manual-rail / pending ONLY */
  --danger: #F87171;

  /* legacy aliases → mapped onto the locked tokens so the existing rules
     inherit the DESIGN.md palette without a risky global rename. */
  --surface: var(--bg-elev);
  --surface-raised: var(--bg-elev-2);
  --sidebar: var(--bg);
  --line: var(--border);
  --warn: var(--amber);
  --dim: var(--text-muted);

  --brand-gradient: var(--accent);

  --accent-wash: rgb(109 139 255 / 0.12);
  --accent-soft: rgb(109 139 255 / 0.35);
  --credit-wash: rgb(62 207 142 / 0.12);
  --credit-soft: rgb(62 207 142 / 0.35);
  --warn-wash: rgb(232 184 75 / 0.12);
  --warn-soft: rgb(232 184 75 / 0.35);
  --danger-wash: rgb(248 113 113 / 0.12);
  --danger-soft: rgb(248 113 113 / 0.4);
  --glass: rgb(17 20 25 / 0.6);
  --focus-ring: rgb(109 139 255 / 0.45);

  /* -- type ---------------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --fs-display: 3.5rem;
  --fs-h1: 2.5rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  /* -- space / shape ------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --section-padding: 96px;
  --section-padding-mobile: 56px;
  --container-max: 1120px;
  --container-gutter: 24px;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 999px;
}

/* == SPEC V5: streamed public and dashboard chat ========================= */

.landing-chat-cta {
  padding-block: var(--section-padding-mobile);
}

.landing-chat-cta-inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.landing-chat-cta h2 {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h2);
}

.landing-chat-cta p:not(.eyebrow) {
  max-width: 58ch;
  color: var(--dim);
}

.landing-chat-cta-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.model-badge {
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  white-space: nowrap;
}

.public-chat-page {
  min-height: calc(100dvh - 64px);
  padding-block: var(--space-8) var(--section-padding-mobile);
}

.public-chat-content,
.public-chat-intro {
  display: grid;
  gap: var(--space-3);
}

.public-chat-intro {
  margin-bottom: var(--space-6);
}

.public-chat-intro .eyebrow {
  margin: 0;
}

.public-chat-intro h1 {
  max-width: 18ch;
  font-size: var(--fs-h1);
}

.public-chat-intro > p:last-child {
  max-width: 62ch;
  color: var(--dim);
}

.chat-shell {
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.public-chat-shell {
  height: min(720px, calc(100dvh - 220px));
  min-height: 520px;
}

.chat-toolbar {
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.chat-messages {
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--space-4);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.chat-empty {
  min-height: 100%;
  padding: var(--space-8) var(--space-4);
  display: grid;
  place-content: center;
  gap: var(--space-3);
  color: var(--dim);
  text-align: center;
}

.chat-empty h2 {
  color: var(--text);
  font-size: var(--fs-h3);
}

.chat-message {
  width: fit-content;
  min-width: 0;
  max-width: min(86%, 720px);
  display: grid;
  gap: var(--space-2);
}

.chat-message-user {
  align-self: flex-end;
}

.chat-message-assistant {
  align-self: flex-start;
}

.chat-message-label {
  color: var(--dim);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.chat-message-user .chat-message-label {
  text-align: right;
}

.chat-message-content {
  max-width: 100%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-message-user .chat-message-content {
  background: var(--accent-wash);
  border-color: var(--accent-soft);
}

.chat-message-content pre {
  max-width: 100%;
  margin: var(--space-3) calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  color: var(--text);
  background: var(--bg);
  border-block: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  white-space: pre;
}

.chat-message-content pre:first-child {
  margin-top: calc(var(--space-3) * -1);
}

.chat-message-content pre:last-child {
  margin-bottom: calc(var(--space-3) * -1);
}

.chat-thinking {
  color: var(--dim);
}

.chat-thinking::after {
  content: '';
  width: 18px;
  height: 4px;
  margin-left: var(--space-2);
  display: inline-block;
  border-top: 4px dotted var(--dim);
}

.chat-error {
  margin: 0;
  color: var(--warn);
  font-size: var(--fs-small);
}

.chat-message-usage {
  margin-top: var(--space-1);
}

.chat-signup-cta {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.chat-signup-cta[hidden] {
  display: none;
}

.chat-signup-cta h2 {
  margin-bottom: var(--space-1);
  font-size: var(--fs-h3);
}

.chat-signup-cta p,
.chat-demo-notice {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.chat-composer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: var(--space-3);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.chat-demo-notice {
  margin: 0 0 var(--space-2);
  text-align: center;
}

.chat-composer {
  display: grid;
  gap: var(--space-3);
}

.chat-composer textarea,
.chat-system-control textarea {
  width: 100%;
  min-height: 72px;
  padding: var(--space-3);
  resize: vertical;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font: inherit;
  line-height: 1.5;
}

.chat-composer textarea,
.chat-system-control textarea,
.dashboard-chat-controls select,
.chat-control-field select {
  font-size: var(--fs-body);
}

.chat-composer textarea:focus,
.chat-system-control textarea:focus {
  outline: 0;
  border-color: var(--accent);
}

.chat-composer textarea::placeholder,
.chat-system-control textarea::placeholder {
  color: var(--dim);
}

.chat-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.chat-coming-soon {
  min-height: 420px;
  padding: var(--space-8);
  display: grid;
  place-content: center;
  justify-items: start;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.chat-coming-soon h2 {
  font-size: var(--fs-h2);
}

.chat-coming-soon p {
  max-width: 54ch;
  color: var(--dim);
}

.dashboard-chat {
  min-height: min(720px, calc(100dvh - 190px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.dashboard-chat-controls {
  padding: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.chat-control-field {
  display: grid;
  gap: var(--space-2);
}

.chat-system-control {
  border-top: 1px solid var(--line);
}

.chat-system-control summary {
  padding-block: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
}

.chat-system-control textarea {
  min-height: 112px;
}

.dashboard-chat-shell {
  min-height: 560px;
  border: 0;
  border-radius: 0;
}

.chat-session-cost {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.chat-session-cost strong {
  color: var(--text);
  font-weight: 500;
}

@media (min-width: 640px) {
  .chat-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .chat-composer-actions {
    min-width: 96px;
  }

  .landing-chat-cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .landing-chat-cta-action {
    justify-content: flex-end;
  }
}

@media (min-width: 900px) {
  .dashboard-chat {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  }

  .dashboard-chat-controls {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-messages {
    scroll-behavior: auto;
  }
}

/* == base ================================================================= */

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--bg);
  background: var(--accent);
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 8vw, var(--fs-display));
  font-weight: 700;
}

h2 {
  font-size: clamp(var(--fs-h2), 5vw, var(--fs-h1));
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

code,
pre,
.mono,
.amount-cell,
.pack-price,
.metric strong,
.balance-value,
.key-value {
  font-family: var(--font-mono);
}

[hidden],
.hidden {
  display: none !important;
}

.muted {
  color: var(--dim);
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* == atmospheric glow (D2) — static, low opacity, behind everything ====== */

.bg-glow {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(560px 480px at 18% -6%, rgb(109 139 255 / 0.14), transparent 68%),
    radial-gradient(640px 560px at 86% 4%, rgb(62 207 142 / 0.09), transparent 70%),
    radial-gradient(520px 420px at 55% 2%, rgb(109 139 255 / 0.07), transparent 72%);
  pointer-events: none;
}

/* == skip link ============================================================ */

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-2);
  left: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--radius-control);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-64px);
  transition: transform 160ms ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

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

.content,
.site-header-inner,
.notice-inner,
.footer-inner {
  width: calc(100% - (var(--container-gutter) * 2));
  max-width: var(--container-max);
  margin-inline: auto;
}

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

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 64px;
  background: rgb(10 12 15 / 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* the canonical PNG lockup, cropped to the wordmark; black padding melts
   into the dark chrome via blend mode */
.brand-logo {
  position: relative;
  width: 106px;
  height: 28px;
  display: block;
  overflow: hidden;
}

.brand-logo img {
  position: absolute;
  top: -82px;
  left: -44px;
  width: 190px;
  max-width: none;
  mix-blend-mode: screen;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-header nav a {
  min-height: 44px;
  padding-inline: var(--space-3);
  display: inline-flex;
  align-items: center;
  color: var(--dim);
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.site-header nav a:hover {
  color: var(--text);
  background: var(--accent-wash);
}

.nav-packs,
.nav-models,
.nav-account,
.nav-admin,
.nav-signup {
  display: none !important;
}

/* == notices ============================================================== */

.notice {
  color: var(--text);
  background: var(--surface);
  border-bottom: 1px solid var(--accent);
  font-size: var(--fs-small);
}

.notice-inner {
  padding-block: var(--space-3);
}

.notice-error {
  border-color: var(--danger);
}

.notice-success {
  border-color: var(--credit);
}

/* == bands / sections ===================================================== */

main {
  overflow: clip;
}

.band {
  border-bottom: 1px solid var(--line);
}

.section-surface {
  padding-block: var(--section-padding-mobile);
}

.eyebrow {
  margin-bottom: var(--space-3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading {
  margin-bottom: var(--space-8);
  display: grid;
  gap: var(--space-4);
}

.section-heading > p,
.checkout-intro > p,
.setup-grid > div > p,
.topup-layout > div > p,
.auth-copy > p,
.empty-state > p {
  color: var(--dim);
}

.section-heading h2,
.checkout-intro h2,
.setup-grid h2,
.topup-layout h2,
.auth-card h2,
.empty-state h2 {
  margin-bottom: var(--space-4);
}

/* scroll reveal — applied only when JS opted in and motion allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .section-surface .content,
  html.js-reveal .hero .content {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 320ms ease-out, transform 320ms ease-out;
  }

  html.js-reveal .section-surface .content.is-revealed,
  html.js-reveal .hero .content.is-revealed {
    opacity: 1;
    transform: none;
  }
}

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

.btn {
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, opacity 160ms ease-out;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* periwinkle primary — near-black label, max one per view */
.btn-primary {
  color: var(--bg);
  background: var(--accent);
}

.btn-primary:not(:disabled):hover {
  background: var(--accent-hover);
}

/* secondary: hairline outline */
.btn-ghost {
  color: var(--text);
  background: transparent;
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--dim);
}

/* Google brand button: white surface + full-color G, per Google guidelines.
   The colored logo needs a light background to read — never invert it. */
.btn-google {
  color: #1f1f1f;
  background: #fff;
  border-color: #dadce0;
}

.btn-google:hover {
  background: #f7f8f8;
  border-color: #d2d3d7;
}

.btn-google img {
  filter: none;
}

/* mint = money-positive action (admin approve) */
.btn-success {
  color: var(--bg);
  background: var(--credit);
}

.btn-success:hover {
  opacity: 0.9;
}

.btn-danger {
  color: var(--danger);
  background: transparent;
  border-color: var(--danger-soft);
}

.btn-danger:hover {
  background: var(--danger-wash);
}

.btn-small {
  min-height: 36px;
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-caption);
}

/* == hero (landing) ======================================================= */

.hero {
  position: relative;
  isolation: isolate;
}

.hero-grid {
  padding-block: var(--section-padding-mobile);
  display: grid;
  align-content: center;
  gap: var(--space-10);
}

.hero h1 {
  margin-bottom: var(--space-5);
}

.lede {
  max-width: 640px;
  color: var(--dim);
  font-size: var(--fs-h3);
  line-height: 1.5;
}

.hero-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* relay / nexus motif — central ring + satellite model-nodes */
.hero-visual {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
}

.relay-motif {
  width: min(100%, 320px);
  display: block;
}

.relay-orbit {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}

.relay-orbit-inner {
  opacity: 0.6;
}

.relay-spokes line {
  stroke: var(--line);
  stroke-width: 1;
}

.relay-packets circle {
  fill: var(--accent);
}

.relay-packets .relay-packet-mint {
  fill: var(--credit);
}

.relay-satellites circle {
  fill: var(--glass);
  stroke: var(--line);
  stroke-width: 1;
}

.relay-satellite-dots circle {
  fill: var(--dim);
}

.relay-satellite-dots .relay-dot-mint {
  fill: var(--credit);
}

.relay-core-fill {
  fill: var(--bg);
  stroke: var(--line);
  stroke-width: 1;
}

/* open periwinkle ring, gap upper-right — echoes the logo's o */
.relay-core {
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 235 41.5;
  animation: node-pulse 4s ease-in-out infinite;
}

@keyframes node-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.status-panel {
  width: 100%;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: var(--space-3);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.status-dot {
  width: 8px;
  height: 8px;
  margin-top: var(--space-2);
  background: var(--credit);
  border-radius: var(--radius-pill);
  animation: node-pulse 4s ease-in-out infinite;
}

.status-panel strong,
.status-panel span {
  display: block;
}

.status-panel strong {
  margin-bottom: var(--space-1);
  font-size: var(--fs-small);
}

.status-panel div > span {
  color: var(--dim);
  font-size: var(--fs-small);
}

.status-panel-paused .status-dot {
  background: var(--warn);
}

/* == value props (landing) =============================================== */

.value-props-grid {
  padding-block: var(--space-8);
  display: grid;
  gap: var(--space-6);
}

.value-prop .eyebrow {
  margin-bottom: var(--space-2);
}

.value-prop p:not(.eyebrow) {
  color: var(--dim);
  font-size: var(--fs-small);
}

/* == glass cards (D2 exception: translucent surface + blur) ============== */

.pack-card,
.model-card,
.balance-card,
.metric,
.key-card,
.checkout-form,
.auth-card,
.review-row,
.account-fact,
.setting-card,
.worked-example,
.admin-stats article,
.empty-state {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

@supports not (backdrop-filter: blur(16px)) {
  .pack-card,
  .model-card,
  .balance-card,
  .metric,
  .key-card,
  .checkout-form,
  .auth-card,
  .review-row,
  .account-fact,
  .setting-card,
  .worked-example,
  .admin-stats article,
  .empty-state,
  .status-panel,
  .setup-console,
  .docs-next {
    background: var(--surface);
  }

  .site-header,
  .catalog-filter-shell {
    background: var(--bg);
  }
}

/* 1px periwinkle→mint top edge on hero-grade glass */
.balance-card,
.pack-card-popular,
.auth-card,
.setup-console,
.setting-card-primary {
  position: relative;
  overflow: hidden;
}

.balance-card::before,
.pack-card-popular::before,
.auth-card::before,
.setup-console::before,
.setting-card-primary::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(109 139 255 / 0.8), rgb(62 207 142 / 0.8));
  pointer-events: none;
}

/* == packs ================================================================ */

.pack-grid {
  display: grid;
  gap: var(--space-4);
}

.pack-card {
  min-height: 272px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 160ms ease-out;
}

.pack-card:hover {
  border-color: var(--dim);
}

.pack-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pack-label {
  color: var(--dim);
  font-size: var(--fs-small);
}

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

.pill,
.state,
.ledger-type {
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-popular {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* mint: automatic rails / success only */
.pill-auto {
  color: var(--credit);
  background: var(--credit-wash);
  border-color: var(--credit-soft);
}

/* amber: a human is in the loop */
.pill-manual,
.state-pending {
  color: var(--warn);
  background: var(--warn-wash);
  border-color: var(--warn-soft);
}

.pack-price {
  margin-block: auto var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.pack-price strong {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
}

.pack-price span {
  color: var(--dim);
  font-size: var(--fs-small);
}

.pack-card > p {
  margin-bottom: var(--space-5);
  color: var(--dim);
  font-size: var(--fs-small);
}

/* == checkout ============================================================= */

.checkout-layout,
.setup-grid,
.topup-layout,
.auth-layout {
  display: grid;
  gap: var(--space-10);
}

.checkout-notes {
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-small);
  list-style: none;
}

.checkout-notes li {
  display: grid;
  grid-template-columns: 8px 1fr;
  align-items: start;
  gap: var(--space-3);
}

.checkout-notes li > span {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--credit);
  border-radius: var(--radius-pill);
}

.checkout-form,
.auth-card {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.field-label,
legend,
.file-field > span {
  color: var(--dim);
  font-size: var(--fs-small);
  font-weight: 500;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: var(--space-2);
}

input:not([type='radio']),
select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

input[type='email'] {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

input::placeholder {
  color: var(--dim);
  opacity: 0.72;
}

input:not([type='radio']):focus,
select:focus {
  border-color: var(--accent);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 19px, calc(100% - 12px) 19px;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
}

input:disabled,
select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.segment-option,
.rail-option {
  position: relative;
  cursor: pointer;
}

.segment-option input,
.rail-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segment-option span {
  min-height: 44px;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  white-space: nowrap;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.segment-option input:checked + span {
  color: var(--text);
  background: var(--accent-wash);
  border-color: var(--accent);
}

.segment-option input:focus-visible + span,
.rail-option input:focus-visible + .rail-tile {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.rail-grid {
  display: grid;
  gap: var(--space-3);
}

.rail-tile {
  min-height: 92px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.rail-tile:hover {
  border-color: var(--dim);
}

.rail-option input:checked + .rail-tile {
  background: var(--accent-wash);
  border-color: var(--accent);
}

.rail-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.rail-tile strong {
  font-size: var(--fs-small);
  font-weight: 600;
}

.rail-tile small {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.file-field {
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
}

.file-field input[type='file'] {
  height: auto;
  padding: var(--space-2);
  font-size: var(--fs-caption);
}

.file-field small {
  color: var(--dim);
  font-size: var(--fs-caption);
}

/* == quickstart meta chips (landing setup) ================================ */

.quickstart-meta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.meta-chip {
  padding: 0.25rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.meta-chip-label {
  color: var(--dim);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.meta-chip code {
  color: var(--text);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}

/* mint credit chip — money only */
.credit-chip {
  padding: 0.25rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--credit-wash);
  border: 1px solid var(--credit-soft);
  border-radius: var(--radius-pill);
}

.credit-chip code {
  color: var(--credit);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.credit-chip span {
  color: var(--dim);
  font-size: var(--fs-caption);
}

/* == mono setup console =================================================== */

.setup-band {
  position: relative;
}

.setup-grid {
  align-items: center;
}

.setup-console {
  min-width: 0;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.code-toolbar {
  padding: var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.code-tabs {
  min-width: 0;
  display: flex;
  gap: var(--space-1);
}

.code-tab {
  min-width: 0;
  min-height: 36px;
  padding: 0 var(--space-2);
  color: var(--dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--fs-caption);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.code-tab[aria-selected='true'] {
  color: var(--text);
  background: var(--bg);
  border-color: var(--line);
}

.copy-button {
  color: var(--dim);
  border-color: transparent;
}

.copy-button:hover {
  color: var(--text);
  border-color: var(--line);
}

.code-panel {
  min-width: 0;
  background: var(--bg);
}

.code-comment {
  padding: var(--space-4) var(--space-4) 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.code-block {
  min-height: 92px;
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-5);
  overflow-x: auto;
  color: var(--text);
  background: transparent;
  font-size: var(--fs-caption);
  line-height: 1.8;
  cursor: copy;
}

.code-block code {
  font-size: inherit;
  white-space: pre;
}

.inline-login {
  display: grid;
  gap: var(--space-6);
}

.inline-login form {
  display: grid;
  gap: var(--space-3);
}

/* == dashboard ============================================================ */

.dashboard-hero,
.admin-head,
.auth-band {
  padding-block: var(--section-padding-mobile);
}

.dashboard-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.dashboard-title h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(var(--fs-h2), 8vw, var(--fs-h1));
}

.balance-layout {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-4);
}

.balance-card {
  padding: var(--space-6);
}

.metric-label {
  display: block;
  color: var(--dim);
  font-size: var(--fs-small);
}

/* money is data; data is mono. mint = credit only */
.balance-value {
  margin-block: var(--space-4) var(--space-6);
  display: block;
  color: var(--credit);
  font-size: clamp(var(--fs-h1), 12vw, var(--fs-display));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.usage-meter progress {
  width: 100%;
  height: 4px;
  display: block;
  overflow: hidden;
  appearance: none;
  background: var(--line);
  border: 0;
  border-radius: var(--radius-pill);
}

.usage-meter progress::-webkit-progress-bar {
  background: var(--line);
  border-radius: var(--radius-pill);
}

/* consumed bar: periwinkle = data-in-motion; amber = <15% remaining */
.usage-meter progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.usage-meter progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.usage-meter-low progress::-webkit-progress-value {
  background: var(--warn);
}

.usage-meter-low progress::-moz-progress-bar {
  background: var(--warn);
}

.usage-meter-labels {
  margin-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.metric-note {
  margin-top: var(--space-5);
  color: var(--dim);
  font-size: var(--fs-caption);
}

.metric-note-error {
  color: var(--warn);
}

.metric-grid {
  display: grid;
  gap: var(--space-4);
}

.metric {
  padding: var(--space-5);
}

.metric strong {
  margin-block: var(--space-3);
  display: block;
  font-size: var(--fs-h2);
  font-weight: 500;
}

.metric small {
  color: var(--dim);
  font-size: var(--fs-caption);
}

/* == balance sparkline (single series — no legend; text wears text tokens) */

.spark-card {
  min-width: 0;
}

.spark {
  width: 100%;
  height: auto;
  margin-block: var(--space-3);
  display: block;
}

.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.spark-area {
  fill: rgb(109 139 255 / 0.1);
}

/* end-dot: 8px mark with a 2px surface ring so it clears the line */
.spark-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 2;
}

.spark-empty {
  margin-top: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-caption);
}

/* == low-balance surfacing (amber = attention, not error) ================= */

.low-balance-banner {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  background: var(--warn-wash);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-card);
}

.low-balance-banner p {
  color: var(--text);
  font-size: var(--fs-small);
}

.low-balance-banner strong {
  color: var(--warn);
}

.low-balance-banner a {
  color: var(--warn);
}

.low-balance-strip {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  background: var(--warn-wash);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-card);
}

.low-balance-strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-small);
}

.low-balance-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.low-balance-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
}

.low-balance-email {
  color: var(--text);
  overflow-wrap: anywhere;
}

.low-balance-list .mono {
  color: var(--dim);
  font-size: var(--fs-caption);
}

/* == docs / quickstart ==================================================== */

.console-label {
  padding-left: var(--space-2);
  overflow: hidden;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-console-grid {
  display: grid;
  gap: var(--space-4);
}

.docs-step {
  max-width: 640px;
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.docs-step > p {
  color: var(--dim);
}

.docs-next-grid {
  display: grid;
  gap: var(--space-4);
}

.docs-next {
  padding: var(--space-6);
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.docs-next h2 {
  margin-bottom: 0;
  font-size: var(--fs-h3);
}

.docs-next p {
  color: var(--dim);
  font-size: var(--fs-small);
}

.docs-link {
  color: var(--accent);
  font-size: var(--fs-small);
}

/* == key card ============================================================= */

.key-section-grid {
  display: grid;
  gap: var(--space-4);
}

.key-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}

.key-card-heading,
.key-card-heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.key-card-heading > div {
  align-items: flex-start;
  flex-direction: column;
}

.key-card-heading > small,
.key-card-footer {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.key-row {
  margin-block: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.key-row .key-value {
  grid-column: 1 / -1;
  margin: 0;
  background: var(--bg);
  font-size: var(--fs-small);
  cursor: copy;
}

.key-card-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border-top: 1px solid var(--line);
}

/* == order states ========================================================= */

.state {
  background: transparent;
}

.state-provisioned {
  color: var(--credit);
  background: var(--credit-wash);
  border-color: var(--credit-soft);
}

.state-rejected {
  color: var(--danger);
  background: var(--danger-wash);
  border-color: var(--danger-soft);
}

.state-paid {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-soft);
}

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

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

th,
td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

tr:last-child td {
  border-bottom: 0;
}

th {
  color: var(--dim);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

td {
  color: var(--dim);
}

td code {
  color: var(--text);
}

td code span {
  color: var(--dim);
}

.amount-cell {
  color: var(--text);
  white-space: nowrap;
}

th.amount-cell,
td.amount-cell {
  text-align: right;
}

.tap-copy {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: copy;
}

.table-empty {
  height: 96px;
  color: var(--dim);
  text-align: center;
}

.compact-form {
  align-content: start;
}

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

.auth-band {
  min-height: calc(100svh - 64px);
  display: flex;
  align-items: center;
}

.auth-copy h1,
.admin-head h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(var(--fs-h2), 8vw, var(--fs-h1));
}

.auth-card h2 {
  font-size: var(--fs-h3);
}

/* == admin ================================================================ */

.queue-summary {
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.queue-summary > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.queue-summary strong {
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
}

.queue-summary span {
  color: var(--dim);
}

.queue-list {
  display: grid;
  gap: var(--space-3);
}

.review-row {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
}

.receipt-thumbnail {
  min-height: 160px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--dim);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.receipt-thumbnail a {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: block;
}

.receipt-thumbnail img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
}

.review-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.review-amount {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 500;
}

.review-meta {
  margin-block: var(--space-3) var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--fs-small);
}

.review-meta span[aria-hidden='true'] {
  color: var(--line);
}

.review-order {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.review-order code {
  color: var(--dim);
  overflow-wrap: anywhere;
}

.queue-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.queue-actions form,
.queue-actions .btn {
  width: 100%;
}

.empty-state {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  border-style: dashed;
}

.empty-state .eyebrow {
  color: var(--credit);
}

.ledger-table {
  min-width: 960px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.ledger-table th,
.ledger-table td {
  padding-block: var(--space-2);
}

.ledger-type {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.ledger-note {
  max-width: 320px;
  color: var(--dim);
  font-family: var(--font-sans);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-actions form {
  margin: 0;
}

/* == model catalog ======================================================== */

.catalog-hero {
  padding-block: var(--section-padding-mobile);
}

.catalog-hero-layout {
  display: grid;
  align-items: end;
  gap: var(--space-8);
}

.catalog-hero-layout > div {
  max-width: 760px;
}

.catalog-hero-layout .lede {
  margin-top: var(--space-5);
}

.catalog-hero-layout > .btn {
  width: fit-content;
}

.catalog-plan-note {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-small);
}

.tier-badge {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-soft);
}

.catalog-filter-shell {
  position: sticky;
  z-index: 40;
  top: 64px;
  padding-block: var(--space-2);
  background: rgb(10 12 15 / 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.catalog-filters {
  display: grid;
  gap: var(--space-3);
}

.catalog-filters label {
  display: grid;
  gap: var(--space-1);
}

.catalog-filters label > span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalog-filters input,
.catalog-filters select {
  background-color: var(--surface);
  font-size: var(--fs-small);
}

.catalog-result-count {
  align-self: end;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.catalog-result-count strong {
  color: var(--text);
  font-size: var(--fs-body);
}

.catalog-groups,
.vendor-group {
  display: grid;
  gap: var(--space-8);
}

.catalog-groups {
  gap: var(--space-16);
}

.vendor-heading {
  padding-bottom: var(--space-4);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.vendor-heading h2 {
  font-size: var(--fs-h2);
}

.vendor-heading .eyebrow {
  margin-bottom: var(--space-2);
}

.vendor-heading > span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.vendor-heading > span strong {
  color: var(--text);
}

.model-grid {
  display: grid;
  gap: var(--space-4);
}

.model-card {
  min-width: 0;
  min-height: 228px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  transition: border-color 160ms ease-out;
}

.model-card:hover {
  border-color: var(--dim);
}

.model-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.model-vendor {
  color: var(--dim);
  font-size: var(--fs-caption);
}

/* relative cost tiers — never raw upstream USD */
.cost-tier {
  padding: var(--space-1) var(--space-2);
  display: inline-flex;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.cost-tier span {
  font-family: var(--font-sans);
  font-weight: 500;
}

.cost-tier-value {
  color: var(--credit);
  background: var(--credit-wash);
  border-color: var(--credit-soft);
}

.cost-tier-standard {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: var(--accent-soft);
}

.cost-tier-premium {
  color: var(--warn);
  background: var(--warn-wash);
  border-color: var(--warn-soft);
}

.cost-tier-flagship {
  color: var(--danger);
  background: var(--danger-wash);
  border-color: var(--danger-soft);
}

.cost-tier-special {
  color: var(--dim);
  background: var(--surface);
}

.model-card h3 {
  margin-block: var(--space-5);
  min-width: 0;
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: 0;
}

.model-card h3 code {
  overflow-wrap: anywhere;
}

.endpoint-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.endpoint-chip {
  padding: var(--space-1) var(--space-2);
  color: var(--dim);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.tool-hint {
  margin-top: auto;
  padding-top: var(--space-5);
  overflow: hidden;
  color: var(--dim);
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-included {
  margin-top: var(--space-3);
  color: var(--credit);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.catalog-empty {
  width: 100%;
}

/* == account ============================================================== */

.account-facts {
  display: grid;
  gap: var(--space-4);
}

.account-fact,
.setting-card {
  min-width: 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-fact > span,
.setting-card > span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-fact strong {
  overflow-wrap: anywhere;
  font-size: var(--fs-body);
  font-weight: 500;
}

.danger-zone {
  margin-top: var(--space-4);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  background: var(--danger-wash);
  border: 1px solid var(--danger-soft);
  border-radius: var(--radius-card);
}

.danger-zone .eyebrow {
  color: var(--danger);
}

.danger-zone h3 {
  font-size: var(--fs-h3);
}

.danger-zone > p {
  color: var(--dim);
  font-size: var(--fs-small);
}

.account-ledger-table {
  min-width: 820px;
}

/* == admin stats / settings =============================================== */

.admin-stats-band {
  padding-block: var(--space-4);
}

.admin-stats {
  display: grid;
  gap: var(--space-3);
}

.admin-stats article {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-radius: var(--radius-control);
}

.admin-stats span {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.admin-stats strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 500;
}

/* amber: manual dial, measure before touching */
.measure-first-banner {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--warn);
  background: var(--warn-wash);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-card);
}

.measure-first-banner strong {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
}

.measure-first-banner p {
  color: var(--text);
  font-size: var(--fs-small);
}

.settings-grid {
  display: grid;
  gap: var(--space-4);
}

.setting-card strong {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
}

.setting-card p,
.worked-example > p {
  color: var(--dim);
  font-size: var(--fs-small);
}

/* kill switch ON: a human paused the gateway — amber, not error */
.switch-on {
  color: var(--warn);
  background: var(--warn-wash);
  border-color: var(--warn-soft);
}

.switch-off {
  color: var(--credit);
  background: var(--credit-wash);
  border-color: var(--credit-soft);
}

.worked-example {
  margin-top: var(--space-8);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.worked-example h2 {
  font-size: var(--fs-h2);
}

.worked-example code {
  padding: var(--space-4);
  overflow-x: auto;
  color: var(--credit);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

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

footer {
  color: var(--dim);
  border-top: 1px solid var(--line);
}

.footer-inner {
  min-height: 88px;
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}


/* == breakpoints ========================================================== */

@media (min-width: 720px) {
  .nav-packs,
  .nav-models,
  .nav-account,
  .nav-admin,
  .nav-signup {
    display: inline-flex !important;
  }

  .section-surface {
    padding-block: var(--section-padding);
  }

  .section-heading {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
    align-items: end;
    gap: var(--space-8);
  }

  .section-heading-compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .section-heading h2 {
    margin-bottom: 0;
  }

  .hero-grid {
    min-height: 560px;
    padding-block: var(--section-padding);
    grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
    align-items: center;
    gap: var(--space-16);
  }

  .value-props-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .pack-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .checkout-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    align-items: start;
    gap: var(--space-16);
  }

  .checkout-form,
  .auth-card {
    padding: var(--space-6);
  }

  .rail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setup-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--space-16);
  }

  .code-tab {
    padding-inline: var(--space-3);
    font-size: var(--fs-small);
  }

  .code-block {
    font-size: var(--fs-small);
  }

  .inline-login {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .inline-login form {
    grid-template-columns: minmax(280px, 400px) auto;
  }

  .dashboard-hero,
  .admin-head,
  .auth-band {
    padding-block: var(--section-padding);
  }

  .dashboard-title {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .balance-layout {
    margin-top: var(--space-12);
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  }

  .spark-card {
    grid-column: 1 / -1;
  }

  .docs-console-grid,
  .docs-next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .key-section-grid {
    grid-template-columns: minmax(300px, 4fr) minmax(0, 6fr);
  }

  .key-card-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .topup-layout {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    align-items: start;
    gap: var(--space-16);
  }

  .auth-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: center;
    gap: var(--space-20);
  }

  .queue-summary {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .review-row {
    min-height: 120px;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
  }

  .receipt-thumbnail,
  .receipt-thumbnail a,
  .receipt-thumbnail img {
    width: 88px;
    min-height: 88px;
    height: 88px;
  }

  .queue-actions {
    width: 184px;
  }

  .catalog-hero {
    padding-block: var(--section-padding);
  }

  .catalog-hero-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-12);
  }

  .catalog-hero-layout > .btn {
    max-width: 300px;
  }

  .catalog-filters {
    grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) minmax(180px, 1fr) auto;
    align-items: end;
  }

  .model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-facts,
  .admin-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .danger-zone {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    align-items: center;
  }

  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1040px) {
  .model-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* == reduced motion: reveals render final, loops stop ===================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* == P4: key management + playground ===================================== */

.keys-grant-note {
  margin-top: var(--space-4);
  color: var(--dim);
  font-size: var(--fs-small);
}

.keys-grid {
  display: grid;
  gap: var(--space-4);
}

.issued-key-result {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--credit-soft);
  border-radius: var(--radius-card);
}

.issued-key-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-small);
}

.issued-key-result .key-row {
  margin-block: var(--space-4);
}

.issue-key-form {
  margin-top: var(--space-6);
}

.issue-models {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  display: grid;
  gap: var(--space-2);
}

.issue-model-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--fs-small);
}

.issue-model-option input[type='checkbox'] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.served-pill {
  margin-bottom: var(--space-3);
  align-self: flex-start;
}

.playground-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.playground-result {
  padding: var(--space-5);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.playground-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.playground-reply {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 480px;
  overflow-y: auto;
}

/* amber = "a human is in the loop", never raw upstream errors */
.playground-error {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  color: var(--warn);
  background: var(--warn-wash);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
}

.usage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.usage-chip {
  padding: var(--space-1) var(--space-3);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
}

.usage-chip .mono {
  color: var(--text);
}

@supports not (backdrop-filter: blur(16px)) {
  .issued-key-result,
  .playground-result {
    background: var(--surface);
  }
}

@media (min-width: 720px) {
  .keys-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .playground-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ==========================================================================
   P5 — pixel replication of the approved reference designs
   (ref-landing.png / ref-dashboard.png)
   ========================================================================== */

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

.anchor-target {
  position: relative;
  top: -72px;
  display: block;
  height: 0;
}

/* -- gradient CTA (the blue→green identity) ------------------------------- */

.btn-gradient {
  color: var(--bg);
  background: var(--brand-gradient);
  border: 0;
  font-weight: 600;
}

.btn-gradient:not(:disabled):hover {
  filter: brightness(1.1);
}

.btn-dark-pill {
  color: var(--bg);
  background: var(--brand-gradient);
  border: 0;
  font-weight: 600;
}

.btn-dark-pill:hover {
  filter: brightness(1.1);
}

.btn-pill {
  min-height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
}

.btn-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* -- marketing header (ref-landing top nav) ------------------------------- */

.site-header-inner {
  justify-content: flex-start;
}

.site-nav {
  min-width: 0;
  margin-inline: auto;
}

.site-header-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.nav-signin {
  min-height: 38px;
  padding-inline: var(--space-3);
  display: none;
  align-items: center;
  color: var(--dim);
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease-out;
}

.nav-signin:hover {
  color: var(--text);
}

@media (min-width: 480px) {
  .nav-signin {
    display: inline-flex;
  }
}

/* -- landing hero ---------------------------------------------------------- */

.hero-badge {
  margin-bottom: var(--space-6);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--dim);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.hero-badge:hover {
  color: var(--text);
  border-color: var(--dim);
}

.hero-badge-new {
  padding: 2px var(--space-3);
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* the nexus artwork: black square melts into the page via screen blend */
.nexus-wrap {
  position: relative;
  width: min(100%, 560px);
  margin: 0;
}

.nexus-img {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

.nexus-core-logo {
  position: absolute;
  top: 49.6%;
  left: 49.8%;
  width: 40%;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.nexus-node {
  position: absolute;
  width: 10.6%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.nexus-node img {
  width: 54%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* -- landing feature row (icon + title + line, status chip right) --------- */

.feature-band {
  background: rgb(10 12 15 / 0.4);
}

.feature-row {
  padding-block: var(--space-6);
  display: grid;
  align-items: center;
  gap: var(--space-5);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.feature-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.feature-icon svg {
  width: 20px;
  height: 20px;
}

.feature-item strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
}

.feature-item small {
  display: block;
  color: var(--dim);
  font-size: var(--fs-caption);
}

.status-chip {
  min-height: 40px;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  color: var(--dim);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-decoration: none;
}

.status-chip .status-dot {
  width: 8px;
  height: 8px;
  margin: 0;
  background: var(--credit);
  border-radius: var(--radius-pill);
}

.status-chip-paused .status-dot {
  background: var(--warn);
}

/* -- landing provider logo strip ------------------------------------------ */

.logo-strip-inner {
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  color: var(--dim);
  font-size: var(--fs-caption);
}

.logo-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.logo-strip-row img {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  transition: opacity 160ms ease-out;
}

.logo-strip-row img:hover {
  opacity: 0.9;
}

/* -- landing pricing cards (ref: PAYG / Studio highlighted / White-label) -- */

.pricing-grid {
  display: grid;
  gap: var(--space-4);
}

.pricing-card {
  min-height: 340px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 160ms ease-out;
}

.pricing-card:hover {
  border-color: var(--dim);
}

.pricing-card-popular {
  background: var(--surface);
  border-color: var(--accent);
}

.pricing-card-popular:hover {
  border-color: transparent;
}

.pricing-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.pricing-card-top h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h3);
}

.pricing-card-top p {
  margin-top: var(--space-2);
  color: var(--dim);
  font-size: var(--fs-small);
}

.pricing-icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--dim);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.pricing-icon svg {
  width: 22px;
  height: 22px;
}

.pricing-price {
  margin-block: var(--space-6) var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.pricing-price strong {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pricing-currency {
  color: var(--dim);
  font-size: var(--fs-h3);
  font-weight: 500;
}

.pricing-price > span {
  color: var(--dim);
  font-size: var(--fs-small);
}

.pricing-checks {
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-small);
  list-style: none;
}

.pricing-checks li {
  position: relative;
  padding-left: 26px;
}

.pricing-checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--credit);
  font-family: var(--font-mono);
  font-weight: 600;
}

.pricing-cta {
  width: 100%;
  margin-top: auto;
}

.checkout-paused {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  color: var(--warn);
  background: var(--warn-wash);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
}

/* -- marketing footer (ref: logo + link columns + hairline) --------------- */

.site-footer .footer-inner {
  min-height: 0;
  padding-block: var(--space-12) 0;
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
}

.footer-brand-col p {
  max-width: 280px;
  margin-top: var(--space-4);
  color: var(--dim);
  font-size: var(--fs-small);
}

.footer-col {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-3);
}

.footer-col-title {
  margin-bottom: var(--space-1);
  color: var(--text);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col a {
  color: var(--dim);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-legal {
  margin-top: var(--space-10);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--dim);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

/* == app shell (ref-dashboard: fixed sidebar + content column) ============ */

.app-shell {
  min-height: 100svh;
}

.app-sidebar {
  position: fixed;
  z-index: 60;
  inset-block: 0;
  left: 0;
  width: 248px;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.app-sidebar-brand {
  margin: 0 var(--space-2);
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-nav-item {
  position: relative;
  min-height: 42px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--dim);
  border-radius: 10px;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.app-nav-item svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.app-nav-item:hover {
  color: var(--text);
  background: var(--surface);
}

.app-nav-item.is-active {
  color: var(--text);
  background: var(--accent-wash);
}

.app-nav-item.is-active::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  left: 0;
  width: 3px;
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.app-nav-divider {
  height: 1px;
  margin: var(--space-3) var(--space-2);
  display: block;
  background: var(--line);
}

.app-nav-status .status-dot-mini {
  width: 7px;
  height: 7px;
  margin-left: auto;
  background: var(--credit);
  border-radius: var(--radius-pill);
}

.app-sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--line);
}

.app-user-card {
  padding: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.app-user-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: var(--brand-gradient);
  border-radius: 8px;
  font-size: var(--fs-caption);
  font-weight: 700;
}

.app-user-email {
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-signout {
  width: 100%;
  min-height: 38px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--dim);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.app-signout:hover {
  color: var(--text);
  background: var(--surface);
}

.app-signout svg {
  width: 16px;
  height: 16px;
}

.app-sidebar-backdrop {
  position: fixed;
  z-index: 55;
  inset: 0;
  background: rgb(10 12 15 / 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.app-sidebar-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.app-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  padding: var(--space-6) var(--space-6) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.app-menu-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.app-menu-toggle svg {
  width: 20px;
  height: 20px;
}

.app-topbar-title h1 {
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  font-weight: 700;
}

.app-topbar-title p {
  margin-top: var(--space-1);
  color: var(--dim);
  font-size: var(--fs-small);
}

.app-topbar-actions {
  width: 100%;
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}

.app-topbar-actions > .btn-primary {
  width: 100%;
}

.credit-pill {
  min-height: 38px;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--dim);
  background: var(--credit-wash);
  border: 1px solid var(--credit-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
}

.credit-pill .mono {
  color: var(--credit);
  font-weight: 600;
}

.app-main {
  width: 100%;
  max-width: 1240px;
  padding: var(--space-5) var(--space-6) var(--space-12);
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.app-main .low-balance-banner {
  margin-top: 0;
}

/* -- credit balance hero (credit-gradient.png under a dark scrim) --------- */

.credit-hero {
  display: grid;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.credit-hero-balance,
.credit-hero-usage {
  min-width: 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.credit-hero-balance {
  border-bottom: 1px solid rgb(231 234 240 / 0.09);
}

.credit-hero-label {
  color: rgb(231 234 240 / 0.8);
  font-size: var(--fs-small);
}

.credit-hero-amount {
  color: var(--credit);
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.credit-hero-remaining {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgb(231 234 240 / 0.75);
  font-size: var(--fs-small);
}

.credit-hero-remaining .dot {
  width: 8px;
  height: 8px;
  background: var(--credit);
  border-radius: var(--radius-pill);
}

.credit-hero-balance .btn {
  margin-top: var(--space-2);
}

.credit-hero-note {
  color: rgb(231 234 240 / 0.55);
  font-size: var(--fs-caption);
}

.credit-hero-spend {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
}

.credit-hero-sub {
  color: rgb(231 234 240 / 0.7);
  font-size: var(--fs-caption);
}

.credit-hero .usage-meter {
  width: 100%;
}

.credit-hero .usage-meter progress {
  background: rgb(231 234 240 / 0.16);
}

.credit-hero .usage-meter progress::-webkit-progress-bar {
  background: rgb(231 234 240 / 0.16);
}

.credit-hero .usage-meter progress::-webkit-progress-value {
  background: var(--brand-gradient);
}

.credit-hero .usage-meter progress::-moz-progress-bar {
  background: var(--accent);
}

.credit-hero .usage-meter-low progress::-webkit-progress-value {
  background: var(--warn);
}

.credit-hero .usage-meter-low progress::-moz-progress-bar {
  background: var(--warn);
}

.credit-hero .usage-meter-labels {
  width: 100%;
  color: rgb(231 234 240 / 0.6);
}

.credit-hero .spark {
  margin-block: var(--space-2) 0;
}

.spark-mint .spark-line {
  stroke: var(--credit);
}

.spark-mint .spark-area {
  fill: rgb(62 207 142 / 0.14);
}

.spark-mint .spark-dot {
  fill: var(--credit);
  stroke: rgb(10 12 15 / 0.8);
}

.credit-hero .spark-empty {
  color: rgb(231 234 240 / 0.6);
}

/* -- stat cards ------------------------------------------------------------ */

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.stat-card {
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.stat-card > span {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.stat-card strong {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
}

.stat-card small {
  color: var(--dim);
  font-size: var(--fs-caption);
}

/* -- panels (ref: raised dark cards with hairline internals) -------------- */

.panel {
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.panel-head {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.panel-head h2 {
  font-size: var(--fs-h3);
}

.panel-head p {
  margin-top: var(--space-1);
  color: var(--dim);
  font-size: var(--fs-small);
}

.panel-pad {
  padding: 0 var(--space-6) var(--space-6);
}

.panel-form {
  padding: 0 var(--space-6) var(--space-6);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
}

.panel-empty {
  margin: 0 var(--space-6) var(--space-6);
}

.panel-duo {
  display: grid;
  gap: var(--space-5);
}

.table-wrap-flush {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.app-table {
  min-width: 680px;
}

.app-table-compact {
  min-width: 560px;
}

.app-table th {
  background: rgb(10 12 15 / 0.45);
}

.cell-strong {
  color: var(--text);
  font-weight: 600;
}

.cell-dim {
  font-size: var(--fs-caption);
}

.cell-actions {
  text-align: right;
}

.cell-actions form {
  display: inline-block;
  margin: 0;
}

.th-actions {
  width: 1%;
}

.table-link {
  color: var(--accent);
  font-size: var(--fs-small);
  text-decoration: none;
}

.table-link:hover {
  text-decoration: underline;
}

.key-chip {
  max-width: 100%;
  padding: 2px var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.key-chip code {
  padding-inline: var(--space-2);
  color: var(--text);
  font-size: var(--fs-caption);
}

.key-chip .key-value {
  width: 24ch;
  min-height: 30px;
  padding-inline: var(--space-2);
  background: transparent;
  border: 0;
  font-size: var(--fs-caption);
}

.icon-btn {
  min-height: 30px;
  padding: 0 var(--space-2);
  color: var(--dim);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: var(--fs-caption);
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.icon-btn:hover {
  color: var(--text);
  background: var(--accent-wash);
}

.app-main .issued-key-result {
  margin-bottom: 0;
}

.app-main .keys-grant-note {
  margin-top: 0;
}

.app-main .danger-zone {
  margin-top: var(--space-4);
}

/* -- app shell breakpoints ------------------------------------------------- */

@media (max-width: 899px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
  }

  .app-sidebar.is-open {
    transform: none;
  }
}

@media (min-width: 900px) {
  .app-menu-toggle,
  .app-sidebar-backdrop {
    display: none;
  }

  .app-content {
    margin-left: 248px;
  }

  .app-topbar {
    padding: var(--space-8) var(--space-10) 0;
  }

  .app-main {
    padding: var(--space-6) var(--space-10) var(--space-16);
  }

  .credit-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .credit-hero-balance {
    padding: var(--space-8);
    border-bottom: 0;
    border-right: 1px solid rgb(231 234 240 / 0.09);
  }

  .credit-hero-usage {
    padding: var(--space-8);
  }

  .stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .panel-duo {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

/* == V4 model marketplace ================================================= */

.marketplace-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.marketplace-card {
  min-height: 430px;
  color: var(--text);
  text-decoration: none;
}

.model-vendor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.model-vendor img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.tier-badge {
  padding: var(--space-1) var(--space-2);
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.4;
  text-transform: capitalize;
  white-space: nowrap;
}

.tier-value {
  color: #3ECF8E;
  background: rgb(62 207 142 / 0.12);
}

.tier-standard {
  color: #6EA8FE;
  background: rgb(110 168 254 / 0.12);
}

.tier-premium {
  color: #E8B84B;
  background: rgb(232 184 75 / 0.12);
}

.tier-flagship {
  color: #6D8BFF;
  background: rgb(109 139 255 / 0.12);
}

.tier-special {
  color: #8A93A3;
  background: rgb(138 147 163 / 0.12);
}

.tier-filter-value.is-active {
  border-color: #3ECF8E !important;
}

.tier-filter-standard.is-active {
  border-color: #6EA8FE !important;
}

.tier-filter-premium.is-active {
  border-color: #E8B84B !important;
}

.tier-filter-flagship.is-active {
  border-color: #6D8BFF !important;
}

.comparison-pricing {
  margin-block: var(--space-5);
  padding-block: var(--space-4);
  display: grid;
  gap: var(--space-3);
  border-block: 1px solid var(--line);
}

.nexo-price-row {
  display: grid;
  gap: var(--space-2);
}

.price-row-heading,
.openrouter-price-row,
.model-card-availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.price-row-heading > span {
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 600;
}

.price-row-heading > small,
.savings-label {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.price-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.price-pair > span {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.price-pair b,
.price-unit,
.mad-equivalent {
  color: var(--dim);
  font-size: var(--fs-caption);
  font-weight: 400;
}

.price-pair strong {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mad-equivalent {
  font-family: var(--font-mono);
}

.openrouter-price-row {
  color: var(--dim);
  font-size: 0.8rem;
}

.or-price {
  font-family: var(--font-mono);
}

.model-card-tags,
.model-detail-endpoints {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.model-card-availability {
  margin-top: auto;
  padding-top: var(--space-4);
}

.model-detail-link {
  color: var(--accent);
  font-size: var(--fs-small);
}

.model-detail-hero {
  padding-block: var(--section-padding-mobile);
}

.model-detail-heading,
.model-detail-content,
.related-models-section {
  display: grid;
  gap: var(--space-6);
}

.model-detail-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.model-detail-title-row h1 {
  margin-top: var(--space-1);
  font-size: var(--fs-h1);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.model-detail-logo {
  width: 56px;
  height: 56px;
}

.model-pricing-table table {
  min-width: 680px;
  border-collapse: collapse;
}

.model-pricing-table th,
.model-pricing-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.model-pricing-table thead th {
  color: var(--dim);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-transform: uppercase;
}

.model-pricing-table td {
  font-family: var(--font-mono);
}

.model-pricing-primary td {
  color: var(--accent);
  font-weight: 600;
}

.model-pricing-reference {
  color: var(--dim);
}

.model-detail-cta {
  padding-block: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border-block: 1px solid var(--line);
}

.model-detail-cta > div {
  display: grid;
  gap: var(--space-2);
}

.model-detail-cta .availability {
  width: fit-content;
}

.model-detail-cta p,
.related-model-card p {
  color: var(--dim);
}

.related-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.related-model-card {
  min-width: 0;
  padding: var(--space-5);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-decoration: none;
}

.related-model-card code {
  overflow-wrap: anywhere;
}

.related-model-card .tier-badge {
  width: fit-content;
}

.related-model-card strong {
  color: var(--accent);
  font-family: var(--font-mono);
}

@media (min-width: 720px) {
  .model-detail-hero {
    padding-block: var(--section-padding);
  }
}

@media (max-width: 520px) {
  .marketplace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .model-detail-title-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .model-detail-title-row > .tier-badge {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

/* -- landing breakpoints ---------------------------------------------------- */

@media (min-width: 720px) {
  .hero-grid {
    grid-template-columns: minmax(0, 11fr) minmax(320px, 9fr);
  }

  .feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 1040px) {
  .feature-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }

  .status-chip {
    justify-self: end;
  }
}

/* ========================================================================
   SPEC V3 — public marketing, marketplace, wallet and logs
   ======================================================================== */

.public-nav {
  display: none !important;
}

.public-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--dim);
  font-size: var(--fs-caption);
}

.public-user > span:last-child {
  display: none;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--radius-control);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.public-mobile-menu {
  position: relative;
}

.public-mobile-menu summary {
  min-height: 38px;
  padding-inline: var(--space-3);
  display: grid;
  place-items: center;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-size: var(--fs-caption);
  cursor: pointer;
  list-style: none;
}

.public-mobile-menu summary::-webkit-details-marker {
  display: none;
}

.public-mobile-menu nav {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(260px, calc(100vw - 32px));
  padding: var(--space-2);
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.v3-hero {
  position: relative;
  min-height: calc(100svh - 64px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.v3-hero-grid {
  padding-block: var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-10);
}

.v3-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 760px;
}

.v3-hero-copy h1 {
  max-width: 13ch;
}

.v3-hero-copy .lede {
  max-width: 720px;
  margin-top: var(--space-6);
  color: var(--dim);
  font-size: clamp(1rem, 2vw, 1.125rem);
}

.v3-hero-copy .hero-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-trust {
  margin-top: var(--space-5);
  color: var(--dim);
  font-size: var(--fs-small);
}

.kill-switch-note {
  width: fit-content;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3);
  color: var(--warn);
  background: var(--warn-wash);
  border: 1px solid var(--warn-soft);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
}

.v3-hero-visual {
  width: 100%;
  min-width: 0;
  margin: -18% auto;
  opacity: 0.72;
  mix-blend-mode: screen;
  pointer-events: none;
}

.trust-strip .content {
  padding-block: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.trust-strip p {
  color: var(--dim);
  font-size: var(--fs-small);
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.trust-logos img {
  width: auto;
  height: 20px;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.42;
  transition: opacity 160ms ease-out;
}

.trust-logos img:hover {
  opacity: 0.78;
}

.v3-section {
  padding-block: var(--section-padding-mobile);
}

.problem-layout {
  max-width: 900px;
  display: grid;
  gap: var(--space-5);
}

.problem-layout > p:last-child,
.solution-grid p,
.section-copy,
.wallet-marketing p,
.final-cta p {
  color: var(--dim);
}

.problem-layout > p:last-child {
  max-width: 760px;
  font-size: 1.125rem;
}

.solution-grid {
  display: grid;
  gap: var(--space-5);
}

.solution-primary,
.solution-stack article {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 160ms ease-out;
}

.solution-primary:hover,
.solution-stack article:hover {
  border-color: var(--dim);
}

.solution-primary {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.solution-primary h2,
.solution-stack h3 {
  margin-block: var(--space-4);
}

.solution-primary code {
  width: 100%;
  margin-top: auto;
  padding: var(--space-4);
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  overflow-wrap: anywhere;
}

.solution-stack {
  display: grid;
  gap: var(--space-5);
}

.solution-number {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.how-section .section-heading {
  align-items: end;
}

.how-steps {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line);
}

.how-steps li {
  padding-block: var(--space-6);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.how-steps li > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
}

.how-steps p {
  padding-top: var(--space-2);
  color: var(--dim);
}

.how-steps strong {
  color: var(--text);
}

.currency-switch {
  width: fit-content;
  padding: 3px;
  display: flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.currency-switch button {
  min-height: 32px;
  padding-inline: var(--space-3);
  color: var(--dim);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  cursor: pointer;
}

.currency-switch button.is-active {
  color: var(--bg);
  background: var(--accent);
}

.section-copy {
  max-width: 720px;
  margin-top: calc(var(--space-8) * -1);
  margin-bottom: var(--space-8);
}

.model-preview-grid {
  display: grid;
  gap: var(--space-3);
}

.preview-model {
  min-width: 0;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 160ms ease-out;
}

.preview-model:hover {
  border-color: var(--dim);
}

.preview-vendor,
.model-vendor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.preview-vendor img,
.model-vendor img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.preview-model code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.preview-price {
  color: var(--credit);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
}

.preview-model small {
  color: var(--dim);
  font-family: var(--font-mono);
}

.text-link {
  margin-top: var(--space-6);
  display: inline-flex;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.wallet-marketing-grid {
  display: grid;
  gap: var(--space-8);
}

.wallet-marketing h2 {
  max-width: 14ch;
}

.wallet-marketing p {
  max-width: 680px;
  margin-block: var(--space-5) var(--space-6);
}

.wallet-benefits {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line);
}

.wallet-benefits li {
  padding: var(--space-5) 0 var(--space-5) var(--space-8);
  position: relative;
  border-bottom: 1px solid var(--line);
}

.wallet-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--credit);
  font-family: var(--font-mono);
}

.final-cta .content {
  max-width: 820px;
  text-align: center;
}

.final-cta p {
  margin: var(--space-5) auto var(--space-6);
}

.marketplace-filters {
  display: grid;
  gap: var(--space-2);
}

.filter-row {
  display: grid;
  gap: var(--space-2);
}

.catalog-search,
.catalog-sort {
  display: grid;
  gap: var(--space-1);
}

.catalog-search > span,
.catalog-sort > span,
.filter-group > span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-group > span {
  min-width: 72px;
  flex: none;
  white-space: nowrap;
}

.filter-chips {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.filter-chips button {
  min-height: 34px;
  padding-inline: var(--space-3);
  flex: none;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  cursor: pointer;
}

.filter-chips button:hover,
.filter-chips button.is-active {
  color: var(--text);
  border-color: var(--accent);
}

.vendor-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.provider-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.provider-logo img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.marketplace-grid {
  display: grid;
  gap: var(--space-4);
}

.marketplace-card {
  min-width: 0;
  min-height: 360px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 160ms ease-out;
}

.marketplace-card:hover {
  border-color: var(--dim);
}

.marketplace-card h3 {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  letter-spacing: 0;
}

.marketplace-card h3 code {
  overflow-wrap: anywhere;
}

.availability {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.availability-live {
  color: var(--credit);
  background: var(--credit-wash);
  border-color: var(--credit-soft);
}

.availability-coming {
  color: var(--dim);
  background: var(--bg);
}

.model-blurb {
  min-height: 4.5em;
  margin-top: var(--space-3);
  color: var(--dim);
  font-size: var(--fs-small);
}

.model-prices {
  margin-block: var(--space-5);
  padding-block: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  border-block: 1px solid var(--line);
}

.model-prices > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.model-prices span,
.model-prices small {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.model-prices strong,
.model-prices small {
  font-family: var(--font-mono);
}

.model-prices strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
}

.marketplace-card .endpoint-list {
  margin-top: auto;
}

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms ease-out var(--reveal-delay, 0ms), transform 320ms ease-out var(--reveal-delay, 0ms);
}

html.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (min-width: 640px) {
  .public-user > span:last-child {
    display: inline;
  }

  .model-preview-grid,
  .marketplace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-row-primary {
    grid-template-columns: minmax(240px, 1fr) minmax(190px, auto) auto auto;
    align-items: end;
  }
}

@media (min-width: 900px) {
  .marketplace-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-row-primary {
    grid-column: 1 / -1;
  }

  .app-topbar-actions {
    width: auto;
    margin-left: auto;
  }

  .app-topbar-actions > .btn-primary {
    width: auto;
  }
}

@media (min-width: 720px) {
  .solution-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .wallet-marketing-grid {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
    align-items: center;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 800px) {
  .public-nav {
    margin-inline: auto;
    display: flex !important;
  }

  .public-mobile-menu {
    display: none;
  }

  .v3-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  }

  .v3-hero-visual {
    width: 720px;
    margin: -25% -58% -25% -15%;
  }

  .trust-strip .content {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .model-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(140px, 1fr));
  }
}

@media (min-width: 1080px) {
  .marketplace-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.app-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.app-topbar {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-6) 1.5rem;
}

.stat-row {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
}

.wallet-overview-card {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.wallet-overview-card > div {
  min-width: 0;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.wallet-overview-card > div:last-child {
  border-bottom: 0;
}

.wallet-overview-card span,
.wallet-overview-card small {
  color: var(--dim);
}

.wallet-overview-card span {
  font-size: var(--fs-small);
}

.wallet-overview-card strong {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 500;
}

.wallet-overview-card small {
  font-size: var(--fs-caption);
}

.wallet-overview-card .usage-meter,
.wallet-overview-card .spark {
  width: 100%;
}

.credit-amount {
  color: var(--credit) !important;
  font-family: var(--font-mono);
}

.wallet-balance-card {
  padding: clamp(1.5rem, 5vw, 3rem);
  display: grid;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.wallet-balance-card > span,
.wallet-balance-card > small {
  color: var(--dim);
}

.wallet-balance-card > strong {
  color: var(--credit);
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.wallet-balance-card > small {
  font-family: var(--font-mono);
}

.wallet-topup-form {
  padding: 0 var(--space-6) var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.wallet-topup-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.wallet-topup-form legend {
  margin-bottom: var(--space-3);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topup-amount-grid,
.wallet-rail-grid {
  display: grid;
  gap: var(--space-3);
}

.topup-amount-grid label,
.wallet-rail-grid label {
  position: relative;
  cursor: pointer;
}

.topup-amount-grid input,
.wallet-rail-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.topup-amount-grid label > span,
.wallet-rail-grid label > span {
  min-height: 92px;
  padding: var(--space-4);
  display: grid;
  align-content: center;
  gap: var(--space-1);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.topup-amount-grid label:hover > span,
.wallet-rail-grid label:hover > span,
.topup-amount-grid input:checked + span,
.wallet-rail-grid input:checked + span {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.topup-amount-grid input:focus-visible + span,
.wallet-rail-grid input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.topup-amount-grid strong,
.topup-amount-grid small {
  font-family: var(--font-mono);
}

.topup-amount-grid strong {
  font-size: var(--fs-h3);
}

.topup-amount-grid small,
.wallet-rail-grid small {
  color: var(--dim);
}

.payment-selector {
  padding-top: var(--space-6);
  display: grid;
  gap: var(--space-5);
  border-top: 1px solid var(--line);
}

.payment-selector > .btn {
  width: fit-content;
}

.rail-auto {
  color: var(--credit) !important;
}

.rail-manual,
.wallet-paused {
  color: var(--warn) !important;
}

.wallet-paused {
  margin: 0 var(--space-6) var(--space-6);
  font-size: var(--fs-small);
}

.log-filters {
  padding: 0 var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.log-filters label {
  display: grid;
  gap: var(--space-1);
}

.log-filters label > span {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logs-key-table td:first-child {
  display: grid;
  gap: var(--space-2);
}

.budget-stack {
  display: grid;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.budget-stack b {
  color: var(--dim);
  font-family: var(--font-sans);
  font-weight: 500;
}

.key-actions {
  min-width: 180px;
}

.key-actions,
.key-actions form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.key-actions details {
  position: relative;
}

.key-actions summary {
  color: var(--accent);
  font-size: var(--fs-small);
  cursor: pointer;
}

.key-actions details form {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 280px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.key-actions details input {
  min-width: 0;
}

.legal-copy {
  max-width: 780px;
  display: grid;
  gap: var(--space-5);
}

.legal-copy h2 {
  margin-top: var(--space-5);
  font-size: var(--fs-h2);
}

.legal-copy > p:not(.eyebrow) {
  color: var(--dim);
}

@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(-100%);
  }

  .app-sidebar.is-open {
    transform: none;
  }

  .app-content {
    margin-left: 0;
  }
}

@media (min-width: 600px) {
  .topup-amount-grid,
  .wallet-rail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .log-filters {
    grid-template-columns: minmax(220px, 1fr) minmax(160px, auto);
  }

  .log-filters-ledger {
    grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(150px, auto));
  }
}

@media (min-width: 769px) {
  .app-sidebar {
    transform: none;
  }

  .app-menu-toggle,
  .app-sidebar-backdrop {
    display: none;
  }

  .app-content {
    margin-left: 248px;
  }

  .wallet-overview-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wallet-overview-card > div {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .wallet-overview-card > div:last-child {
    border-right: 0;
  }
}

@media (min-width: 900px) {
  .topup-amount-grid,
  .wallet-rail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* V4 catalog rules must win over the retained V3 responsive skin. */
.marketplace-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.marketplace-card {
  min-height: 430px;
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 520px) {
  .marketplace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == V4 admin operations ================================================== */

.admin-shell {
  min-height: 100svh;
  padding-block: var(--space-8) var(--section-padding);
}

.admin-shell > .content,
.admin-tab-panel {
  display: grid;
  gap: var(--space-6);
}

.admin-shell-header,
.admin-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.admin-shell-header h1 {
  margin-top: var(--space-1);
  font-size: var(--fs-h1);
}

.admin-section-heading h2 {
  font-size: var(--fs-h2);
}

.admin-section-heading p:not(.eyebrow),
.admin-review-row p {
  margin-top: var(--space-1);
  color: var(--dim);
  font-size: var(--fs-small);
}

.admin-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.admin-tabs a {
  min-height: 42px;
  padding: 0 var(--space-4);
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--dim);
  border-bottom: 2px solid transparent;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}

.admin-tabs a:hover,
.admin-tabs a.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.admin-tab-panel[hidden] {
  display: none;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.admin-kpi-grid article {
  min-width: 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.admin-kpi-grid span {
  color: var(--dim);
  font-size: var(--fs-small);
}

.admin-kpi-grid strong {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.admin-alert-strip {
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
}

.admin-alert-head,
.admin-alert-strip li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.admin-alert-strip ul {
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.admin-alert-strip li a {
  min-width: 220px;
  flex: 1;
}

.admin-table-section,
.admin-customer-detail {
  padding-top: var(--space-6);
  display: grid;
  gap: var(--space-5);
  border-top: 1px solid var(--line);
}

.admin-review-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.admin-review-row {
  padding-block: var(--space-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-row-actions form {
  margin: 0;
}

.admin-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.admin-filters label,
.admin-inline-form label,
.admin-action-menu label {
  display: grid;
  gap: var(--space-1);
  color: var(--dim);
  font-size: var(--fs-caption);
}

.admin-filters .btn {
  width: fit-content;
}

.admin-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.admin-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.admin-table th,
.admin-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.admin-table thead th {
  color: var(--dim);
  background: var(--bg);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-action-menu {
  position: relative;
}

.admin-action-menu summary,
.admin-issue-panel summary {
  color: var(--accent);
  font-size: var(--fs-small);
  cursor: pointer;
}

.admin-action-menu > div {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(320px, 82vw);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.admin-action-menu form {
  display: grid;
  gap: var(--space-2);
}

.admin-customer-detail h3 {
  font-size: var(--fs-h3);
  letter-spacing: 0;
}

.admin-issue-panel {
  padding: var(--space-5);
  border-block: 1px solid var(--line);
}

.admin-inline-form {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.admin-inline-form .metric-note {
  align-self: center;
}

@media (max-width: 640px) {
  .admin-review-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-review-row .admin-row-actions {
    grid-column: 1 / -1;
  }
}

.language-toggle {
  display: inline-flex;
}

.language-toggle button {
  min-width: 38px;
  min-height: 34px;
  padding: 0 var(--space-2);
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  cursor: pointer;
}

.language-toggle button:hover {
  color: var(--text);
  border-color: var(--dim);
}

.app-language-toggle {
  padding-inline: var(--space-2);
}

.auth-data-line {
  padding-block: var(--space-2);
  color: var(--dim);
  border-block: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.legal-section {
  padding-block: var(--space-6);
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--line);
  scroll-margin-top: 80px;
}

.legal-section h2 {
  margin: 0;
}

.legal-section h3 {
  margin-top: var(--space-3);
  font-size: var(--fs-h3);
  letter-spacing: 0;
}

.legal-section p {
  color: var(--dim);
}

.public-status {
  max-width: 780px;
  display: grid;
  gap: var(--space-6);
}

.public-status-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.public-status-dot {
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--credit);
  border-radius: var(--radius-pill);
}

.public-status-dot.is-paused {
  background: var(--warn);
}

.public-status-list {
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
  list-style: none;
}

.public-status-list li {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.public-status-list li > span {
  color: var(--credit);
  font-family: var(--font-mono);
}

.public-status-list small {
  color: var(--dim);
}

/* == Paid-traffic landing (/l/dev) ======================================== */

.lp-page h1,
.lp-page h2,
.lp-page h3 {
  letter-spacing: 0;
}

.lp-hero {
  position: relative;
  overflow: hidden;
}

.lp-hero-grid {
  padding-block: var(--space-6);
  display: grid;
  align-items: center;
  gap: var(--space-6);
}

.lp-hero-copy {
  min-width: 0;
}

.lp-hero-copy h1 {
  max-width: 15ch;
  font-size: var(--fs-h1);
}

.lp-hero-copy .lede {
  max-width: 640px;
  margin-top: var(--space-5);
  color: var(--dim);
  font-size: var(--fs-body);
}

.lp-hero-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.lp-hero-trust {
  max-width: 58ch;
  margin-top: var(--space-4);
  color: var(--dim);
  font-size: var(--fs-small);
}

.lp-hero-visual {
  width: 100%;
  height: 160px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.lp-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lp-section {
  padding-block: var(--section-padding-mobile);
}

.lp-section-copy {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.lp-section-copy .eyebrow {
  margin-bottom: 0;
}

.lp-section-copy > p:last-of-type,
.lp-value-card p,
.lp-final p {
  color: var(--dim);
}

.lp-section-heading {
  max-width: 720px;
  margin-bottom: var(--space-8);
}

.lp-quickstart-grid,
.lp-wallet-grid {
  display: grid;
  gap: var(--space-8);
}

.lp-quickstart .setup-console {
  min-width: 0;
}

.lp-quickstart .code-block {
  min-height: 0;
}

.lp-value-grid {
  display: grid;
  gap: var(--space-4);
}

.lp-value-card {
  min-width: 0;
  padding: var(--space-6);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 160ms ease-out;
}

.lp-value-card:hover {
  border-color: var(--dim);
}

.lp-value-card h3 {
  margin-block: var(--space-4);
}

.lp-value-number {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

.lp-models .section-heading {
  align-items: end;
}

.lp-credit-chip {
  width: fit-content;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--credit);
  background: var(--credit-wash);
  border: 1px solid var(--credit-soft);
  border-radius: var(--radius-pill);
}

.lp-credit-chip span {
  color: var(--dim);
  font-size: var(--fs-caption);
}

.lp-credit-chip code {
  color: var(--credit);
  font-weight: 500;
}

.lp-wallet-benefits {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line);
}

.lp-wallet-benefits li {
  position: relative;
  padding: var(--space-5) 0 var(--space-5) var(--space-8);
  border-bottom: 1px solid var(--line);
}

.lp-wallet-benefits li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--credit);
  font-family: var(--font-mono);
}

.lp-final .content {
  max-width: 820px;
  text-align: center;
}

.lp-final p {
  max-width: 620px;
  margin: var(--space-5) auto var(--space-6);
}

@supports not (backdrop-filter: blur(16px)) {
  .lp-value-card {
    background: var(--surface);
  }
}

@media (min-width: 640px) {
  .lp-hero-visual {
    height: auto;
    aspect-ratio: 16 / 7;
  }
}

@media (min-width: 720px) {
  .lp-value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 800px) {
  .lp-hero-grid {
    min-height: 620px;
    padding-block: var(--space-16);
    grid-template-columns: minmax(0, 6fr) minmax(360px, 5fr);
    gap: var(--space-10);
  }

  .lp-hero-copy h1 {
    font-size: var(--fs-display);
  }

  .lp-hero-copy .lede {
    font-size: 1.125rem;
  }

  .lp-hero-visual {
    aspect-ratio: 1;
  }

  .lp-quickstart-grid,
  .lp-wallet-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-value-card {
    transition: none;
  }
}