/* ============================================================================
   soldout — design system
   ----------------------------------------------------------------------------
   Midnight-navy canvas, cool paper text, one red accent off the mark,
   monospace for anything numeric. The product is a machine tool, so the interface reads like an
   instrument: hairlines instead of boxes, oversized figures, colour reserved
   for state and action. Nothing decorative earns a colour.
   ========================================================================= */

:root {
  /* surfaces — midnight navy rather than black: the blue keeps the page from
     going flat and dead, and every level is lifted enough to read as a
     surface instead of a hole */
  --ink:        #0b1020;
  --ink-2:      #121a2e;
  --ink-3:      #18223b;
  --ink-4:      #212d4b;

  /* hairlines do the structural work; lifted to stay visible on navy */
  --line:       rgba(160, 190, 255, .11);
  --line-2:     rgba(160, 190, 255, .2);

  /* cool paper, never pure white */
  --paper:      #eef2fb;
  --dim:        #9aa6c2;
  --faint:      #6b7797;

  /* one accent: the red off the mark. Against navy it carries every action
     and every alarm, and it is nobody else's colour in this market */
  --red:      #ff3b2b;
  --red-2:    #ff6a4d;
  --red-ink:  #1a0503;
  --red-glow: rgba(255, 59, 43, .14);
  --mint:       #3ddc97;
  --coral:      #ff5f56;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  background-color: var(--ink);
  /* A dot grid, barely there: gives the black some tooth without becoming a
     pattern you notice. */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(180,205,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* one soft acid bloom, top-right, so the page is not flat black */
body::before {
  content: "";
  position: fixed;
  inset: -30vh -30vw auto auto;
  width: 70vw; height: 70vh;
  background: radial-gradient(circle, rgba(255,59,43,.09), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
/* Lift our own content above the bloom. Scoped by element rather than
   `body > *`, which also caught anything a browser extension injects at body
   level: forcing `position: relative` on a password manager's notification
   drops it out of its own fixed positioning and under the sticky header. */
body > header,
body > main,
body > footer,
body > #panel { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--red-ink); }

/* ---------------------------------------------------------------- type ---- */
h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.display { font-size: clamp(2.7rem, 6.6vw, 5.2rem); letter-spacing: -.05em; }
/* one gradient, on the phrase that carries the promise */
.grad {
  background: linear-gradient(98deg, #ff8a6b 0%, #ff3b2b 45%, #e01f5a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.08rem; letter-spacing: -.02em; }
p  { margin: 0 0 1rem; color: var(--dim); }

/* the micro-label is the workhorse of this system */
.label {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dim  { color: var(--dim); }
.faint{ color: var(--faint); }
code, pre { font-family: var(--mono); font-size: 12.5px; }

/* live dot — the one animated thing on the page */
.live { display: inline-flex; align-items: center; gap: .45rem; }
.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 0 rgba(92,228,160,.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(92,228,160,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(92,228,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,228,160,0); }
}

/* ------------------------------------------------------------ controls ---- */
/* Rounded rectangle, not a pill: a 6px radius reads as a control rather than a
   tag, and keeps a row of them visually quiet next to the display type. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px;
  background: var(--paper); color: var(--ink);
  font: 500 14px/1 var(--sans); letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover  { background: #fff; }
/* reserved for the one action that should pull the eye on a page */
.btn.red   { background: var(--red); color: var(--red-ink); font-weight: 600; }
.btn.red:hover { background: #ff5741; }
.btn.ghost  { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.1);
              color: var(--paper); }
.btn.ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
/* Discord keeps its own colour: people scan for it, and a neutral button in a
   row of neutral buttons is one they miss. */
.btn.discord { background: rgba(255,255,255,.03); border-color: var(--line-2);
               color: var(--paper); }
.btn.discord:hover { background: rgba(255,255,255,.07); border-color: rgba(255,59,43,.45); }
.btn.quiet  { background: transparent; border-color: transparent; color: var(--dim);
              height: 32px; padding: 0 10px; }
.btn.quiet:hover { color: var(--paper); background: rgba(255,255,255,.05); }
/* the sign-in affordance is a link, not a button: only one thing per screen
   should look like the primary action */
.btn.plain  { background: transparent; border-color: transparent; color: var(--dim);
              height: 32px; padding: 0 10px; }
.btn.plain:hover { color: var(--paper); background: transparent; }
.btn.danger { background: transparent; border-color: transparent; color: var(--coral);
              height: 30px; padding: 0 10px; }
.btn.danger:hover { background: rgba(255,95,86,.12); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  width: 100%; padding: .72rem .9rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--ink-3); color: var(--paper);
  font: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(255,59,43,.55); box-shadow: 0 0 0 3px var(--red-glow);
}
label { display: block; margin: 0 0 .4rem; font: 600 10.5px/1 var(--mono);
        letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.field { margin-bottom: 1.05rem; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .7rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
}
.chip.red { color: var(--red-2); border-color: rgba(255,59,43,.4); background: var(--red-glow); }
.chip.ok   { color: var(--mint); border-color: rgba(92,228,160,.4); }
.chip.bad  { color: var(--coral); border-color: rgba(255,107,74,.4); }

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent 55%), var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.panel.pad { padding: 1.4rem 1.5rem; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--line);
}

.notice { padding: .75rem .95rem; border-radius: var(--r-sm); font-size: 13.5px; margin-bottom: 1rem;
          border: 1px solid transparent; }
.notice.bad { background: rgba(255,107,74,.1); border-color: rgba(255,107,74,.3); color: #ffb5a2; }
.notice.ok  { background: rgba(92,228,160,.1); border-color: rgba(92,228,160,.3); color: #a7f0cd; }

table { width: 100%; border-collapse: collapse; }
thead th {
  padding: .7rem 1.5rem; text-align: left; border-bottom: 1px solid var(--line);
  font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  white-space: nowrap;
}
tbody td { padding: .82rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255,255,255,.022); }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------- shell ---- */
.wrap { width: min(1180px, 100% - 3rem); margin-inline: auto; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(14px);
  background: rgba(11,16,32,.78);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 1.6rem; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.03em; font-size: 15.5px; }
.brand { font-size: 16px; letter-spacing: -.045em; }
.brand .mark {
  width: 25px; height: 25px; border-radius: 50%; display: block;
  /* the mark is already a red disc — no plate behind it */
  box-shadow: 0 0 0 1px rgba(255,59,43,.35), 0 3px 12px rgba(255,59,43,.28);
}
.brand small { color: var(--faint); font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }

.tabs { display: flex; gap: .25rem; margin-left: auto; }
.tabs a {
  padding: .48rem .9rem; border-radius: 999px; font-size: 13.5px; color: var(--dim);
  transition: color .15s, background .15s;
}
.tabs a:hover { color: var(--paper); background: rgba(255,255,255,.045); }
.tabs a.on { color: var(--paper); background: var(--ink-3);
             box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; }

.nav-right { display: flex; align-items: center; gap: .7rem; margin-left: auto; }

/* ------------------------------------------------------------ marketing --- */
/* Centred: the promise is two words and it earns the whole width, with the
   request sitting underneath as the proof. Top padding stays under 6rem so the
   headline never floats halfway down the viewport. */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 3rem; text-align: center; }
.hero-lead { font-size: 1.06rem; max-width: 44rem; margin-inline: auto; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
/* proof line: small, mono, factual — no badges, no logos we do not have */
.hero-term { max-width: 860px; margin: 3.2rem auto 0; text-align: left; }

/* A real request and a real response shape. Deliberately not dressed up as a
   macOS window: fake chrome would make an honest code sample look like a
   screenshot of something that does not exist. */
.term { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
        background: #070b17; box-shadow: 0 30px 80px -40px rgba(0,0,0,.75); }
.term-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.term-title { font: 600 12px/1 var(--mono); letter-spacing: .12em;
              text-transform: uppercase; color: var(--faint); }
.term pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; line-height: 1.75; }
.c-comment { color: #4b463e; }
.c-str     { color: #d8c391; }   /* sand: readable, and warm like the accent */
.c-key     { color: var(--red); }
.c-punc    { color: #6d675d; }
.caret { display: inline-block; width: 7px; height: 15px; background: var(--red);
         vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: blink 1.1s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }

.marquee { display: flex; gap: 0; border-block: 1px solid var(--line); }
.marquee div { flex: 1; padding: 1.35rem 0 1.35rem 1.6rem; border-left: 1px solid var(--line); }
.marquee div:first-child { border-left: none; padding-left: 0; }
.marquee .v { font: 800 1.5rem/1 var(--mono); letter-spacing: -.03em; }
.marquee .k { margin-top: .7rem; }

.section { padding: 4.5rem 0; }

/* The three-up used to be three filled cards, which is the shape every API
   landing page has. Hairlines carry it instead — same idiom as the figures
   strip above, and the endpoint gets to be the loudest thing in the column. */
.surface { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.surface article { padding: 1.9rem 2rem 0 2rem; border-left: 1px solid var(--line); }
.surface article:first-child { border-left: none; padding-left: 0; }
.surface article:last-child { padding-right: 0; }
/* a short accent stub, sitting on the hairline it interrupts */
.surface .rule { display: block; width: 30px; height: 2px; background: var(--red); margin: -1.9rem 0 1.6rem; }
.surface .rule.quiet { background: var(--line-2); }
.surface .route { font: 800 1.45rem/1 var(--mono); letter-spacing: -.03em; }
.surface .route.dim { color: var(--faint); font-size: 1.15rem; }
.surface h3 { margin: 1.1rem 0 .55rem; font-size: 1.02rem; letter-spacing: -.02em; }

/* The closing band is a full-bleed rule, not a floating card: the page ends on
   a line rather than on one more rounded rectangle. */
.closer { border-block: 1px solid var(--line); margin-top: 1.5rem;
          background: radial-gradient(60% 150% at 0% 50%, rgba(255,59,43,.08), transparent 72%); }
.closer-inner { display: flex; align-items: center; justify-content: space-between;
                gap: 2rem; padding: 3.2rem 0; }
/* nudged off the left edge so the copy is not flush against the rule */
.closer-inner > div { max-width: 52ch; padding-left: 10px; }
.closer .cta-title { font-size: 1.9rem; }

@media (max-width: 860px) {
  .surface { grid-template-columns: 1fr; }
  /* stacked, the columns need the breathing room the vertical rules gave them */
  .surface article { border-left: none; border-top: 1px solid var(--line); padding: 1.9rem 0 2.1rem; }
  .surface article:last-child { padding-bottom: 0; }
  .surface article:first-child { border-top: none; }
  .closer-inner { flex-direction: column; align-items: flex-start; }
}
.section-head { max-width: 40rem; margin-bottom: 2.2rem; }

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }

.plan { display: flex; flex-direction: column; gap: 1.05rem; padding: 1.7rem; }
.plan-cta { margin-top: auto; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.plan-cta .btn { width: 100%; }
.plan-cta p { font-size: 12.5px; margin: 0 0 .85rem; }
.plan .price { font: 800 3rem/1 var(--mono); letter-spacing: -.05em; }
.plan .price span { font-size: 1rem; font-weight: 600; color: var(--faint); letter-spacing: 0; }
/* "from" carries real meaning: 500 is where a quote starts, not a fixed price */
.plan .price .from { font-size: 1.15rem; color: var(--dim); margin-right: .3rem; }
.title-hero { margin: 0 auto 1.4rem; max-width: 17ch; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.plan li { position: relative; padding-left: 1.35rem; font-size: 13.5px; color: var(--dim); }
.plan li::before { content: "→"; position: absolute; left: 0; color: var(--red); font-family: var(--mono); }
.plan.hi { border-color: rgba(255,59,43,.38); background:
  linear-gradient(180deg, rgba(255,59,43,.08), transparent 42%), var(--ink-2); }

.faq { display: grid; gap: 1.6rem; max-width: 46rem; }
.faq h3 { margin-bottom: .3rem; }

footer.site { border-top: 1px solid var(--line); padding: 2.2rem 0; margin-top: 3rem; }
.foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ------------------------------------------------------------- app ui ----- */
.page { padding: 2.4rem 0 4rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
             margin-bottom: 1.8rem; flex-wrap: wrap; }

/* the stat strip: oversized mono figures separated by hairlines */
.meter { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.meter > div { padding: 1.7rem 1.8rem; }
.meter > div + div { border-left: 1px solid var(--line); }
.meter .huge { font: 800 3.4rem/1 var(--mono); letter-spacing: -.055em; margin-top: .7rem; }
.meter .huge small { font-size: 1rem; font-weight: 600; color: var(--faint);
                     letter-spacing: 0; margin-left: .5rem; }
.spark { display: block; width: 100%; height: 54px; margin-top: 1.1rem; }
.spark path.fill { fill: var(--red-glow); }
.spark path.line { fill: none; stroke: var(--red); stroke-width: 1.6; }
.bar { height: 6px; border-radius: 999px; background: var(--ink-4); overflow: hidden; margin-top: .9rem; }
.bar i { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.split { display: flex; gap: 1.6rem; margin-top: 1.3rem; }
.split div { flex: 1; }
.split .v { font: 700 1.15rem/1 var(--mono); margin-top: .45rem; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 1.35rem 1.5rem; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat .v { margin-top: .5rem; font: 800 1.85rem/1 var(--mono); letter-spacing: -.045em; }
.stat .v.accent { color: var(--red-2); }
/* a figure that is simply money coming in, not a warning */
.stat .v.good { color: var(--mint); }
.accent { color: var(--red-2); }
.stat .sub { margin-top: .4rem; font-size: 12px; color: var(--faint); }

.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line);
       border-radius: 999px; background: var(--ink-2); }
.seg button {
  border: 0; background: transparent; color: var(--dim); cursor: pointer;
  padding: .38rem .85rem; border-radius: 999px; font: 600 12.5px/1 var(--sans);
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--paper); }
.seg button.on { background: var(--ink-4); color: var(--paper); }

.chart { display: block; width: 100%; height: 280px; }
.chart .gridline { stroke: rgba(255,255,255,.06); }
.chart .axis { fill: var(--faint); font: 500 10.5px var(--mono); }
.chart .line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot  { fill: var(--red); }

.keyval { font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
/* Copy button: a glyph, not a word. It sits beside a value that is already the
   widest thing in its row, so it has to take almost no space. */
.copy {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--faint); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.copy:hover { color: var(--paper); background: rgba(255,255,255,.07); border-color: var(--line-2); }
.copy:active { transform: translateY(1px); }
.copy:focus-visible { outline: none; border-color: var(--red); color: var(--paper); }
/* Feedback has to be visible without moving anything: the button is next to a
   value the reader is mid-way through selecting. */
.copy.done { color: var(--mint); border-color: rgba(61,220,151,.4); }
.copy.failed { color: var(--coral); border-color: rgba(255,95,86,.45); }
.copy.done svg, .copy.failed svg { display: none; }
.copy.done::after { content: "✓"; font: 700 13px/1 var(--sans); }
.copy.failed::after { content: "⌘C"; font: 600 9px/1 var(--mono); }

/* Always visible. Revealing it on hover hides the one affordance the column
   has from anyone who is not already pointing at the right row, and on a touch
   screen there is no hover to reveal it with. */
.key-cell { display: inline-flex; align-items: center; gap: .35rem; }
.key-cell code { background: none; padding: 0; font-size: inherit; color: inherit; }
.key-cell .copy { width: 22px; height: 22px; }
/* The truncation is information, not decoration: it is what tells a reader the
   value is cut rather than simply short. */
.key-cell .cut { color: var(--faint); letter-spacing: .12em; user-select: none; }
/* A full key is 46 characters and would set the column width on its own, so it
   is clipped visually. The value copied is the whole thing regardless. */
.key-cell code.full { display: inline-block; max-width: 20ch; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* The clipboard fallback needs a real, selectable node that nobody can see. */
.offscreen { position: fixed; top: 0; left: -9999px; opacity: 0; }

.reveal { display: flex; gap: .6rem; align-items: center; padding: .9rem 1rem;
          border: 1px dashed rgba(255,59,43,.4); border-radius: var(--r);
          background: var(--red-glow); }
.reveal code { flex: 1; word-break: break-all; color: var(--red); }

.empty { padding: 3rem 1.5rem; text-align: center; color: var(--faint); font-size: 13.5px; }

/* -------------------------------------------------------------- modal ----- */
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem;
         background: rgba(6,9,20,.76); backdrop-filter: blur(6px); }
.modal { width: min(500px, 100%); padding: 1.6rem; border: 1px solid var(--line-2);
         border-radius: var(--r-lg); background: var(--ink-2);
         box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }

/* --------------------------------------------------------------- auth ----- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.auth-card { width: min(408px, 100%); }
.auth-card > .panel { padding: 1.9rem; }
/* the spec strip under the card keeps the page from being a lone box in the
   dark, and says something true while it is there */
.auth-spec { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center;
             margin-top: 1.4rem; }
.auth-spec span { font: 500 11.5px/1 var(--mono); color: var(--faint); }
.auth-spec b { color: var(--dim); font-weight: 600; }

@media (max-width: 940px) {
  .cols-2, .cols-3, .meter { grid-template-columns: 1fr; }
  .meter > div + div { border-left: none; border-top: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: none; }
  .marquee { flex-wrap: wrap; }
  .marquee div { flex: 1 1 45%; border-left: none; padding-left: 0; }
  .tabs { order: 3; width: 100%; margin: 0 0 .6rem; overflow-x: auto; }
  .topbar-inner { height: auto; padding: .8rem 0; flex-wrap: wrap; }
}

/* ============================================================================
   Utilities
   ----------------------------------------------------------------------------
   The CSP is `style-src 'self'` — no `style=""` attribute is applied, by
   design: inline style is the same injection surface as inline script, and a
   dashboard that renders user-chosen strings should not open it. So every
   one-off adjustment lives here instead.
   ========================================================================= */
.w-full   { width: 100%; }
.center   { text-align: center; }
.right    { text-align: right; }
.nowrap   { white-space: nowrap; }
.acid     { color: var(--red); }
.push     { margin-top: auto; }
.flat     { margin: 0; }
.small    { font-size: 13.5px; }
.tiny     { font-size: 12px; color: var(--faint); }

.mt-1 { margin-top: .55rem; }
.mt-2 { margin-top: .9rem; }
.mt-3 { margin-top: 1.2rem; }
.mt-4 { margin-top: 1.6rem; }
.mb-2 { margin-bottom: .9rem; }
.mb-3 { margin-bottom: 1.3rem; }

.row        { display: flex; align-items: center; gap: .7rem; }
.row-top    { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.row-wrap   { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.row-spread { display: flex; align-items: center; justify-content: space-between;
              gap: 2rem; flex-wrap: wrap; }
.stack      { display: grid; gap: .55rem; }

.brand-center { display: flex; justify-content: center; margin-bottom: 1.6rem; }
.hero-note    { margin-top: 1.4rem; font-size: 12.5px; color: var(--dim); }
.chart-pad    { padding: 1.2rem 1rem .6rem; }
.card-foot    { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: auto; }
.card-foot .num { font-size: 1.7rem; margin-top: .4rem; }
.cta          { padding: 2.4rem; }
.cta > div    { max-width: 56ch; }
.menu-card    { width: min(340px, 100%); }
.key-line     { margin: .6rem 0 1.2rem; font-size: 13px; word-break: break-all; }
.note         { margin-top: 1rem; font-size: 13px; max-width: 52ch; }
.sub-line     { margin-top: .3rem; }
.title-lg     { font-size: 1.75rem; }
.head-gap     { margin-top: .7rem; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.lead-narrow  { max-width: 36rem; }
.title-tight  { margin: 1rem 0 1.2rem; max-width: 16ch; }
.pane-pad-0   { padding-top: 0; }
.pane-pad-b   { padding-bottom: 2.5rem; }
.center-page  { min-height: 100vh; display: grid; place-items: center; }
.form-note    { margin: .5rem 0 0; font-size: 12px; color: var(--faint); }
.sub-title    { margin: .75rem 0 .6rem; font-size: 1.75rem; }
.sub-title-lg { margin: .75rem 0 1.5rem; font-size: 1.75rem; }
.done-title   { margin: 1rem 0 .6rem; font-size: 1.75rem; }
.gate-title   { margin: .8rem 0 1rem; }
.cta-title    { margin: 0 0 .5rem; }
.link-line    { margin: 1.2rem 0 0; font-size: 13.5px; }
.plan-note    { font-size: 13px; margin: .2rem 0 0; }
.plan-note-0  { font-size: 13px; margin: 0; }

/* The three claims that decide a purchase here. Stated plainly, one line each —
   a promise in a marketing voice reads as one you will not keep. */
/* Three commitments. The plans above are already cards and the FAQ below is a
   stack, so these are rows: the promise carries itself, the body only
   qualifies it. One hairline per row, never top and bottom both. */
.promises { display: grid; border-top: 1px solid var(--line); }
.promises > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                  gap: 2.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.promises h3 { margin: 0; font-size: 1.12rem; letter-spacing: -.025em; }
.promises p  { margin: 0; font-size: 13.5px; color: var(--dim); max-width: 62ch; }
@media (max-width: 860px) {
  .promises > div { grid-template-columns: 1fr; gap: .45rem; }
}
}

/* top-up chooser: four fixed steps, each showing what it buys */
.topups { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1.1rem 0 0; }
.topup { position: relative; display: block; padding: .8rem .9rem; cursor: pointer;
         border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--ink-3); }
.topup input { position: absolute; opacity: 0; pointer-events: none; }
.topup .v { display: block; font: 700 1.05rem/1 var(--mono); }
.topup .k { display: block; margin-top: .3rem; font: 500 11px/1 var(--mono); color: var(--faint); }
.topup:has(input:checked) { border-color: var(--red); background: var(--red-glow); }
.topup:has(input:checked) .v { color: var(--red); }


.plan-name { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }
/* gap instead of middle-dots: the separator tic reads as decoration */
.foot-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- motion --- */
/* One device, one reason: sections arrive in reading order, so the eye is led
   down the page instead of meeting all of it at once. Scroll-driven, so there
   is no scroll listener and nothing to clean up; where the browser lacks
   `view()` the content is simply already there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .enter {
      animation: enter-in linear both;
      animation-timeline: view();
      /* the whole animation happens during entry, so anything already on
         screen at load is past it and simply visible */
      animation-range: entry 0% entry 100%;
    }
    @keyframes enter-in {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }
}


/* ------------------------------------------------------- operator traffic --- */
/* Five windows, so the four-column stat grid does not apply here. */
.rates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rates .stat { padding: 1.2rem 1.3rem; border-left: 1px solid var(--line); }
.rates .stat:first-child { border-left: none; }
.rates .v { font-size: 1.55rem; }

.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-4 .v, .stats-2 .v { font-size: 1.5rem; }

.chart-sm { height: 200px; }
/* The error line rides the same scale as requests; it is deliberately thinner
   and dimmer, because it is context for the shape rather than a second story. */
.chart .line-2 { fill: none; stroke: var(--dim); stroke-width: 1.3;
                 stroke-dasharray: 3 3; stroke-linejoin: round; }
.chart .col { fill: var(--red); opacity: .85; }
.chart .col.warn { fill: var(--coral); }
.chart .axis.strong { fill: var(--dim); font-weight: 700; }

/* Legend keys, so the two lines are identifiable without a hover target. */
.key-req, .key-err { display: inline-block; width: 14px; height: 2px;
                     vertical-align: middle; margin-right: .25rem; }
.key-req { background: var(--red); }
.key-err { background: var(--dim); }

/* Share of total. No filled track behind it: the row is the track, and a grey
   trough on every line turns a table into a bar chart nobody asked for. */
.share { display: inline-block; width: 96px; height: 4px; border-radius: 999px;
         background: rgba(160,190,255,.1); vertical-align: middle; overflow: hidden; }
.share i { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.share-cell { white-space: nowrap; }
.share-cell .label { margin-left: .5rem; }
td.n.bad { color: var(--coral); }
td.n .label { margin-left: .4rem; }
td.empty { padding: 2.2rem 1.5rem; text-align: center; color: var(--faint); }
td.mono { font-family: var(--mono); font-size: 12.5px; }

@media (max-width: 1080px) {
  .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rates .stat:nth-child(odd) { border-left: none; }
  .rates .stat { border-top: 1px solid var(--line); }
  .rates .stat:first-child, .rates .stat:nth-child(2) { border-top: none; }
  .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A six-column table cannot fit a phone. It scrolls inside its own card rather
   than pushing the whole page sideways, which is what it was doing. */
.panel:has(> table) { overflow-x: auto; }
.panel > table { min-width: 620px; }

/* ------------------------------------------------------------------ docs --- */
/* One container width for the whole site. The reference page is denser than the
   marketing pages, so it earns its room by tightening its own tracks rather
   than by widening the page and shifting the header out from under the logo. */
.docs { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 1.9rem;
        align-items: start; padding-bottom: 4rem; }

/* ---- table of contents ---- */
.docs-nav { position: sticky; top: 86px; }
.docs-nav nav { display: grid; gap: 1px; }
.docs-nav .label { padding: 0 0 .5rem; }
.docs-nav .label.nav-gap { padding-top: 1.4rem; }
.docs-nav a {
  display: flex; align-items: center; gap: .45rem;
  padding: .34rem .6rem; margin-left: -.6rem; border-radius: 6px;
  font-size: 13.5px; color: var(--dim);
  transition: color .15s, background .15s;
}
.docs-nav a:hover { color: var(--paper); background: rgba(255,255,255,.04); }
/* The current section is marked with the accent, not a filled pill: a sidebar
   of blocks competes with the content for attention. */
.docs-nav a.on { color: var(--paper); font-weight: 600;
                 box-shadow: inset 2px 0 0 var(--red); background: rgba(255,59,43,.06); }
.verb-mini { font: 700 9px/1 var(--mono); letter-spacing: .1em; color: var(--faint);
             font-style: normal; }
.docs-nav a.on .verb-mini { color: var(--red-2); }

/* ---- prose on the left, code on the right ---- */
.docs-body { display: grid; min-width: 0; }
.block {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.1rem; align-items: start;
  padding: 3.2rem 0; border-top: 1px solid var(--line);
}
.block:first-child { border-top: none; padding-top: 2.6rem; }
/* Anchor jumps must clear the sticky header, or the method badge lands
   underneath it and the section looks like it starts at its own title. */
.block[id] { scroll-margin-top: 86px; }
.block-end { border-top: 1px solid var(--line); }
.prose { min-width: 0; }
/* The sample sticks while its own prose scrolls past, then releases at the end
   of the section. Long parameter lists otherwise leave the code offscreen. */
.code { min-width: 0; position: sticky; top: 86px; display: grid; gap: 1rem; }

.prose h1 { font-size: 2.5rem; letter-spacing: -.04em; margin-bottom: .8rem; }
.prose h2 { font-size: 1.6rem; letter-spacing: -.03em; margin-bottom: .7rem; }
.prose h3 { font-size: .82rem; margin: 2.2rem 0 .9rem; text-transform: uppercase;
            letter-spacing: .14em; font-family: var(--mono); color: var(--faint); }
.prose p { max-width: 60ch; margin: 0 0 .9rem; }
.prose .lead { font-size: 1.02rem; color: var(--paper); }
.prose .note { margin-top: 1.4rem; font-size: 13px; color: var(--faint); }

/* ---- method + path heading ---- */
.endpoint { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.endpoint .verb {
  padding: .24rem .5rem; border-radius: 5px; background: var(--red-glow);
  border: 1px solid rgba(255,59,43,.35); color: var(--red-2);
  font: 700 10px/1 var(--mono); letter-spacing: .12em;
}
.endpoint code { font-size: 14.5px; color: var(--paper); background: none; padding: 0; }

/* ---- parameter list ---- */
/* A definition list rather than a table: the description is the long part, and
   a table forces it into a narrow third column. */
.params { display: grid; margin: 0 0 .4rem; }
.param { padding: .95rem 0; border-top: 1px solid var(--line); }
.param:first-child { border-top: none; padding-top: .2rem; }
.param-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.param-head code { font-size: 13px; color: var(--paper); background: none; padding: 0;
                   font-weight: 600; }
.param-head code.status { color: var(--red-2); }
.param .type { font: 500 11px/1 var(--mono); color: var(--faint); }
.param .req { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
              color: var(--red-2); }
.param .req.soft { color: var(--faint); }
.param .maps { font-size: 11.5px; color: var(--faint); }
.param p { margin: .4rem 0 0; font-size: 13.5px; color: var(--dim); max-width: 58ch; }
.params.compact .param { padding: .55rem 0; }

/* ---- code panel ---- */
.code .term { margin: 0; }
.code pre { font-size: 12px; line-height: 1.65; max-height: 60vh; overflow: auto; }
.tabs-mini { display: inline-flex; gap: 1px; margin-left: auto; }
.tabs-mini button {
  border: 0; background: transparent; cursor: pointer; border-radius: 5px;
  padding: .2rem .5rem; font: 600 11px/1.4 var(--sans); color: var(--faint);
  transition: color .15s, background .15s;
}
.tabs-mini button:hover { color: var(--paper); }
.tabs-mini button.on { color: var(--paper); background: rgba(255,255,255,.07); }
.term-bar { justify-content: flex-start; }

@media (max-width: 1180px) {
  .docs { grid-template-columns: 1fr; gap: 0; }
  /* The sidebar becomes a scrollable strip above the content rather than
     disappearing: it is the only way to jump between endpoints. */
  /* min-width:0 or the grid item sizes to its widest child and the scrolling
     strip pushes the whole page sideways instead of scrolling itself. */
  .docs-nav { position: static; min-width: 0; padding: 1.2rem 0 .4rem;
              border-bottom: 1px solid var(--line); }
  .docs-nav nav { grid-auto-flow: column; grid-auto-columns: max-content;
                  gap: .3rem; overflow-x: auto; padding-bottom: .4rem; }
  .docs-nav .label { display: none; }
  .docs-nav a { margin-left: 0; white-space: nowrap; }
  .docs-nav a.on { box-shadow: inset 0 -2px 0 var(--red); border-radius: 6px; }
}
@media (max-width: 900px) {
  .block { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.4rem 0; }
  .code { position: static; }
  .code pre { max-height: none; }
}

/* Payment states. Only two carry colour: money in, and money that failed to
   arrive. Pending and expired are facts, not events. */
.chip.good { color: var(--mint); border-color: rgba(61,220,151,.35); background: rgba(61,220,151,.08); }
.chip.bad  { color: var(--coral); border-color: rgba(255,95,86,.35); background: rgba(255,95,86,.08); }
.chip.wait { color: var(--dim); }

/* Tables inside the operator modal: denser than a page table, and they have to
   fit two of them plus their headings in one dialog. */
.modal table.mini th, .modal table.mini td { padding: .45rem .6rem; font-size: 12.5px; }
.modal table.mini thead th { padding-top: 0; }
.modal { max-height: 84vh; overflow-y: auto; }
.modal .reveal code { word-break: break-all; }

/* The key under an alias in the operator panel: small, and clipped so a
   46-character value does not set the column width. */
.modal .key-cell code.tiny { font-size: 11px; color: var(--faint); }
.modal .key-cell code.full { max-width: 17ch; }

/* ---------------------------------------------------------------- legal ---
   Privacy / Refund / Terms: a single readable prose column. Reuses the site
   palette; nothing here is interactive beyond links. */
.legal { max-width: 44rem; padding: 5.5rem 0 4rem; }

/* Title block sits apart from the body: a lifted eyebrow line, a large title,
   then generous air before the first section. */
.legal h1 {
  font-size: 2.2rem; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 2.6rem; padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.legal h2 {
  font-size: 1.05rem; letter-spacing: .005em; color: var(--paper);
  margin: 3.4rem 0 1rem; scroll-margin-top: 6rem;
}
.legal h3 { font-size: .95rem; color: var(--paper); margin: 2rem 0 .7rem; }

.legal p, .legal li { color: var(--dim); font-size: 15px; line-height: 1.78; }
.legal p { margin: 0 0 1.15rem; }
.legal strong { color: var(--paper); font-weight: 600; }
.legal em { color: var(--dim); }
.legal a { color: var(--red-2); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .12s ease; }
.legal a:hover { border-bottom-color: currentColor; }

.legal ul, .legal ol { margin: 0 0 1.3rem; padding-left: 1.35rem; }
.legal li { margin: .45rem 0; padding-left: .2rem; }
.legal li::marker { color: var(--faint); }

/* Section dividers: lots of breathing room, and a hairline that fades at its
   ends rather than a hard rule edge-to-edge. */
.legal hr {
  border: 0; height: 1px; margin: 3.4rem 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}

.legal .table-wrap { overflow-x: auto; margin: 1.4rem 0 1.8rem; border: 1px solid var(--line); border-radius: var(--r); }
.legal table { min-width: 480px; border-collapse: collapse; }
.legal thead { background: rgba(160, 190, 255, .04); }
.legal th { text-align: left; font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.legal td, .legal th { padding: .72rem 1rem; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.legal tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 620px) {
  .legal { padding: 3.5rem 0 3rem; }
  .legal h1 { font-size: 1.7rem; margin-bottom: 2rem; }
  .legal hr { margin: 2.6rem 0; }
}