/* polish.css — shared refinement layer for the hand-crafted pages (converter,
   pricing, api, docs, about, changelog, 404, and the two long-form article
   pages). Linked just before </head>, AFTER each page's inline <style>, so
   equal-specificity rules here win — that's what lets this one file unify the
   token palette without editing nine large inline style blocks.

   Phase 2 of the 2026-07 visual upgrade (phase 1 = landing.css, which covers
   the ~127 generated pages). Goals: one palette everywhere (#0d0d0f family —
   the theme-color metas already declared it; the :root vars lagged behind),
   the converter's grid texture + a faint aurora on every page, card-style
   FAQ on pricing, glow CTAs, and the a11y polish (focus rings, selection,
   scrollbar, reduced-motion) the generated pages already got. */

/* ── 1. Token unification ── */
:root{
  --bg:#0d0d0f;--bg2:#141417;--bg3:#1c1c21;
  --accent:#c8f03c;--accent-soft:rgba(200,240,60,.12);
  --text:#f0f0ec;--muted:#8a8a93;--muted2:#5a5a63;
  --border:rgba(255,255,255,0.08);--border-h:rgba(255,255,255,0.18);
}
/* Base text: the hand-crafted pages set body{color:#fff}; the converter + the ~127
   generated pages use the softer off-white #f0f0ec (less glare on dark, more refined).
   Unify to it here so every page shares one base text colour. Per-element colours
   (headings, muted, paragraph greys) set their own value and still win. */
body{color:var(--text)}
::selection{background:rgba(200,240,60,.28);color:#fff}

/* ── 2. Texture + aurora ──
   z-index:-1 (not 0) so they sit above the canvas background but below ALL
   content regardless of each page's stacking — no per-page z-index surgery.
   converter.html's own grid (z-index:0) is overridden by this identical one. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px}
body::after{content:'';position:fixed;top:-260px;left:50%;transform:translateX(-50%);width:1100px;height:640px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(200,240,60,.10) 0%,rgba(200,240,60,.035) 38%,transparent 68%)}

/* ── 3. Nav CTA glow (same treatment as landing.css) ── */
.nav-cta{box-shadow:0 0 0 1px rgba(200,240,60,.25),0 4px 14px rgba(200,240,60,.16);transition:transform .15s,box-shadow .15s,filter .15s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 0 0 1px rgba(200,240,60,.35),0 6px 20px rgba(200,240,60,.22)}

/* ── 4. FAQ — card rows (pricing + any page using .faq-q) ── */
.faq-q{border:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:12px;background:var(--bg2);padding:4px 22px;margin-bottom:10px;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.faq-q:hover{border-color:var(--border-h)}
.faq-q[open]{border-color:rgba(200,240,60,.28);background:#15151a}
.faq-q summary{padding:16px 0;list-style:none}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";color:var(--accent);font-size:22px;flex-shrink:0;transition:transform .2s ease}
.faq-q[open] summary::after{content:"+";transform:rotate(45deg)}
.faq-q p{margin:0 0 18px}

/* ── 5. Pricing: primary plan CTA glow ── */
.plan-cta.pro{box-shadow:0 0 0 1px rgba(200,240,60,.3),0 8px 24px rgba(200,240,60,.18);transition:transform .18s,box-shadow .18s,filter .18s}
.plan-cta.pro:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 0 0 1px rgba(200,240,60,.4),0 12px 32px rgba(200,240,60,.26)}

/* ── 6. Gentle hover lift on per-page card components (rules no-op on pages
       without the class). Border-only — no transform, so nothing jumps. ── */
.endpoint,.entry,.contact-card,.fact{transition:border-color .2s ease}
.endpoint:hover,.entry:hover,.contact-card:hover,.fact:hover{border-color:var(--border-h)}

/* ── 7. Footer: match landing.css (token bg + top hairline gradient) ── */
.fmly-ft{border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.015) 0%,transparent 40%),var(--bg)}

/* ── 8. A11y + chrome polish ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html{scrollbar-color:#2e2e35 var(--bg)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a3a42}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── "Coming soon" pill ───────────────────────────────────────────────────────
   Enterprise is BUILT — tierOf, the provisioning endpoints and the admin deal
   calculator all work — but it is not open for sale yet. Every surface that
   presents it as a tier you could buy today shows this pill instead.

   Blue on purpose. Lime is the accent for things you CAN do (Start free, Most
   popular), and the Enterprise price badge beside this one is violet — a third
   hue keeps "not yet" from reading as either an action or a price.

   Shared here rather than inlined per page so the four surfaces cannot drift. */
.badge-soon{
  display:inline-block;
  font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  line-height:1.45;
  letter-spacing:.04em;
  white-space:nowrap;
  vertical-align:middle;
  color:#a9ccff;
  background:rgba(110,170,255,.13);
  border:1px solid rgba(110,170,255,.34);
  border-radius:100px;
  padding:3px 10px;
}
/* In prose (a tier bullet) it needs a little air and must not inherit the
   bold/colour of the <strong> it follows. */
li > .badge-soon{margin-left:8px;font-weight:400}
/* In a plan feature list the <li> is already display:flex with the ✓ marker as
   the first child, so the pill lands beside the two-line feature-text column.
   Pin it to the first line rather than letting it centre against both. */
.features li > .badge-soon{align-self:flex-start;margin-top:1px}
/* A plan feature <li> is display:flex with the ✓ as its first child; adding the
   pill made a third item that could not wrap, so on a 360px screen it pushed
   past the viewport edge. polish.css loads AFTER each page's inline <style>,
   so this wins without !important. */
.features li{flex-wrap:wrap}