/* =====================================================================
   Frost — Refract Image API
   Every surface is one frosted pane: a translucent backdrop-filter fill,
   a 1px specular top edge, and a soft ambient shadow. The photograph
   carries all color; the glass tints itself from it. Depth is stacked
   translucency — never a flat drop-shadow card. One luminous blue-violet
   accent, and it lives only on glass, as transmitted light.
   ===================================================================== */

/* ---- Fonts (self-hosted; no CDN) ---- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 500;               /* variable weight axis, capped at 500 */
  font-display: swap;
  src: url("./assets/fonts/figtree-variable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/jetbrains-mono-400.woff2") format("woff2");
}

/* ---- Tokens ---- */
:root {
  /* paper floor */
  --paper: #eef0f3;
  --paper-deep: #e4e7ec;

  /* ink */
  --ink: #181a1f;
  --ink-soft: #3d424a;
  --ink-faint: #6b7078;

  /* glass fills */
  --glass-thin: rgba(255, 255, 255, 0.45);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-ink: rgba(24, 26, 31, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shadow: rgba(18, 22, 38, 0.2);
  --hairline: rgba(24, 26, 31, 0.1);

  /* accent — luminous, on glass only */
  --accent: #4d6bff;
  --accent-deep: #3b53e0;
  --accent-glow: rgba(77, 107, 255, 0.35);

  /* on dark glass */
  --on-glass: #ffffff;
  --on-glass-soft: #c3c8d4;
  --on-accent: #ffffff;

  /* opaque fallbacks (see @supports / reduced-transparency) */
  --glass-solid: #f4f5f7;
  --glass-strong-solid: #f8f9fb;
  --glass-ink-solid: #1c1e24;

  /* type */
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* spacing */
  --s4: 4px;  --s8: 8px;  --s12: 12px; --s16: 16px; --s24: 24px;
  --s32: 32px; --s48: 48px; --s64: 64px; --s96: 96px; --s128: 128px;

  /* radii */
  --r-pane: 20px;
  --r-large: 28px;
  --r-ctrl: 12px;
  --r-cta: 14px;
  --r-pill: 9999px;

  /* pane recipe pieces */
  --pane-blur: blur(24px) saturate(1.2);
  --pane-shadow: inset 0 1px 0 0 var(--glass-edge), 0 16px 40px -12px var(--glass-shadow);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

/* ---- Full-bleed fixed photograph (the color source) ---- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-bg::after {                       /* paper haze so top/bottom margins settle */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(238,240,243,0) 60%, rgba(238,240,243,0.55) 100%);
}
.page-index .page-bg { background-image: url("./assets/hero-backdrop.webp"); }
.page-docs .page-bg {
  background-image: url("./assets/docs-backdrop.webp");
  filter: brightness(0.55) saturate(0.9);
}
.page-pricing .page-bg {
  background-image: url("./assets/pricing-backdrop.webp");
  filter: brightness(0.55) saturate(0.95);
}
.page-docs, .page-pricing { background: var(--paper-deep); }

/* ---- Layout ---- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s24); }
.container-narrow { max-width: 960px; }
.band { position: relative; padding: var(--s96) 0; }
.band-hero { padding: var(--s128) 0 var(--s96); }

/* ---- Type scale ---- */
.display-xl { font-weight: 300; font-size: 60px; line-height: 1.1; letter-spacing: -1.5px; margin: 0; }
.display-l  { font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: -0.8px; margin: 0; }
.display-m  { font-weight: 400; font-size: 28px; line-height: 1.25; letter-spacing: -0.4px; margin: 0; }
.display-s  { font-weight: 500; font-size: 20px; line-height: 1.35; letter-spacing: -0.2px; margin: 0; }
.lead       { font-weight: 400; font-size: 19px; line-height: 1.6; margin: 0; }
.body       { font-weight: 400; font-size: 17px; line-height: 1.7; margin: 0; }
.body-s     { font-weight: 400; font-size: 14px; line-height: 1.6; margin: 0; }
.readout {
  font-weight: 300; font-size: 56px; line-height: 1.05; letter-spacing: -1px;
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin: 0;
}
.label {
  font-weight: 500; font-size: 13px; line-height: 1.3; letter-spacing: 0.6px;
  text-transform: uppercase; font-feature-settings: "case"; margin: 0;
  color: var(--ink-faint);
}
.mono-url   { font-family: var(--mono); font-weight: 400; font-size: 15px; line-height: 1.5; font-feature-settings: "zero"; }
.mono-param { font-family: var(--mono); font-weight: 400; font-size: 14px; line-height: 1.6; font-feature-settings: "zero"; }
.code       { font-family: var(--mono); font-weight: 400; font-size: 14px; line-height: 1.6; font-feature-settings: "zero"; }

.ink-soft { color: var(--ink-soft); }
.stack-s > * + * { margin-top: var(--s12); }
.section-head { max-width: 640px; margin: 0 0 var(--s48); }
.section-head .label { margin-bottom: var(--s16); }
.section-head .lead { margin-top: var(--s16); color: var(--ink); }
/* On the index the full-bleed photo runs behind the heads, so they float on glass. */
.section-head.on-photo {
  width: fit-content; max-width: min(720px, 100%);
  background: var(--glass);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-shadow);
  border-radius: var(--r-large); padding: var(--s24) var(--s32);
}
.section-head.on-photo .label { color: var(--ink); }

/* =====================================================================
   The frosted pane — the atom every surface is built from
   ===================================================================== */
.pane {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: var(--pane-blur);
  backdrop-filter: var(--pane-blur);
  border-radius: var(--r-pane);
  box-shadow: var(--pane-shadow);
  padding: var(--s24);
}
.pane-strong {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  backdrop-filter: blur(26px) saturate(1.2);
}
.pane-lg { border-radius: var(--r-large); padding: var(--s32); }

/* depth variants for the capability trio */
.pane-front { background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(30px) saturate(1.2); backdrop-filter: blur(30px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), 0 24px 56px -14px var(--glass-shadow); }
.pane-mid { background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), 0 18px 44px -14px var(--glass-shadow); }
.pane-back { background: var(--glass-thin);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), 0 12px 32px -14px var(--glass-shadow); }

/* the strong inset that carries text on a thin pane */
.inner-strong {
  background: var(--glass-strong);
  border-radius: var(--r-ctrl);
  padding: var(--s16);
}

/* =====================================================================
   Nav — a frosted sticky pane, content scrolls under it and blurs
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: var(--pane-blur);
  backdrop-filter: var(--pane-blur);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), 0 8px 24px -16px var(--glass-shadow);
}
.nav-inner { height: 64px; display: flex; align-items: center; gap: var(--s24); }
.wordmark {
  font-weight: 500; font-size: 20px; letter-spacing: -0.2px;
  text-decoration: none; color: var(--ink); margin-right: auto;
}
.nav-tabs { display: flex; align-items: center; gap: var(--s8); }
.nav-tab {
  font-weight: 400; font-size: 15px; text-decoration: none; color: var(--ink);
  padding: var(--s8) var(--s12); border-radius: var(--r-pill);
  position: relative; transition: background 160ms ease-out;
}
.nav-tab:hover { background: var(--glass-thin); }
.nav-tab[aria-current="page"] {
  background: var(--glass-strong);
}
.nav-tab[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s12); right: var(--s12); bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav-cta { margin-left: var(--s8); }
.nav-toggle {
  display: none; width: 40px; height: 40px; border: 0; cursor: pointer;
  background: var(--glass-strong); border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 0 var(--glass-edge);
  position: relative; margin-left: auto;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 11px; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
}
.nav-toggle span { top: 19px; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--s24); border: 0; cursor: pointer;
  font-weight: 500; font-size: 16px; line-height: 1.2; text-decoration: none;
  border-radius: var(--r-cta); transition: filter 160ms ease-out, background 160ms ease-out;
}
.btn-primary {
  color: var(--on-accent);
  background: var(--accent-deep);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.35), 0 14px 34px -14px var(--accent-glow), 0 0 30px -6px var(--accent-glow);
}
.btn-primary:hover { background: #3346c9; }
.btn-primary:active { background: #2e40bb; }
.btn-secondary {
  color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-shadow);
}
.btn-secondary:hover { background: var(--glass-strong); }
.btn-block { width: 100%; }
.text-link {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  padding: 0; cursor: pointer; font-family: var(--sans); font-weight: 500; font-size: 15px;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline);
  line-height: 1.4; transition: border-color 160ms ease-out;
}
.text-link:hover { border-bottom-color: var(--ink); }

/* =====================================================================
   Index — hero + floating control
   ===================================================================== */
.hero-grid {
  display: grid; grid-template-columns: 1fr minmax(440px, 560px); gap: var(--s48);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: var(--s24); }
.hero-eyebrow {
  align-self: flex-start;
  background: var(--glass-thin);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 var(--glass-edge);
  border-radius: var(--r-pill); padding: 8px 16px;
}
.hero-eyebrow .label { color: var(--ink); margin: 0; }
.hero-copy .display-xl {
  background: var(--glass);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-shadow);
  border-radius: var(--r-large); padding: var(--s24) var(--s32);
}
.hero-copy .lead {
  background: var(--glass);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-shadow);
  border-radius: var(--r-pane); padding: var(--s16) var(--s24);
  max-width: 30em; color: var(--ink);
}
.hero-cta-row { display: flex; gap: var(--s16); align-items: center; flex-wrap: wrap; }

/* the floating control (builder) */
.builder { border-radius: var(--r-large); padding: var(--s32); }
.builder-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s16); margin-bottom: var(--s16); }
.builder-head .label { color: var(--ink); }

/* the plate the controls mutate, behind the glass */
.plate-frame {
  position: relative; overflow: hidden; border-radius: var(--r-pane);
  aspect-ratio: 4 / 3; background: transparent;
  box-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 0 0 1px var(--hairline);
  display: grid; place-items: center;
}
.plate-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  transition: filter 120ms linear;
}
.plate-box {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  display: grid; place-items: center;
}

.builder-controls { display: flex; flex-direction: column; gap: var(--s16); margin-top: var(--s24); }
.control-row { display: flex; flex-direction: column; gap: var(--s8); }
.control-row > .label { color: var(--ink); }

/* stepper */
.stepper { display: inline-flex; align-items: center; gap: var(--s8); }
.stepper-btn {
  width: 34px; height: 34px; border: 0; cursor: pointer; border-radius: var(--r-pill);
  background: var(--glass-strong); color: var(--ink); font-size: 18px; line-height: 1;
  box-shadow: inset 0 1px 0 0 var(--glass-edge);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms ease-out;
}
.stepper-btn:hover { background: #fff; }
.stepper-field {
  font-family: var(--mono); font-size: 15px; font-feature-settings: "zero";
  min-width: 74px; text-align: center; color: var(--ink);
}

/* option chips */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s8); }
.chip {
  border: 0; cursor: pointer; border-radius: var(--r-ctrl); padding: 8px 14px;
  background: var(--glass-thin); color: var(--ink);
  font-family: var(--mono); font-size: 13px; font-feature-settings: "zero";
  box-shadow: inset 0 1px 0 0 var(--glass-edge);
  transition: background 160ms ease-out;
}
.chip:hover { background: var(--glass); }
.chip[aria-pressed="true"] {
  background: var(--glass-strong);
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  box-shadow: inset 0 2px 0 0 var(--accent), 0 0 18px -6px var(--accent-glow);
}

/* blur slider */
.slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px;
  border-radius: var(--r-ctrl); background: transparent; cursor: pointer; margin: 0;
}
.slider::-webkit-slider-runnable-track {
  height: 12px; border-radius: var(--r-ctrl);
  background:
    linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill, 0%), transparent var(--fill, 0%)),
    var(--glass-thin);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 0 0 1px var(--hairline);
}
.slider::-moz-range-track {
  height: 12px; border-radius: var(--r-ctrl); background: var(--glass-thin);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 0 0 1px var(--hairline);
}
.slider::-moz-range-progress { height: 12px; border-radius: var(--r-ctrl); background: var(--accent); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -5px;
  border-radius: var(--r-pill); background: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 0 #fff, 0 0 0 2px var(--accent), 0 2px 8px -2px var(--glass-shadow);
}
.slider::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 0 #fff, 0 0 0 2px var(--accent), 0 2px 8px -2px var(--glass-shadow);
}
.slider-row { display: flex; align-items: center; gap: var(--s16); }
.slider-val {
  font-family: var(--mono); font-size: 14px; font-feature-settings: "zero";
  min-width: 34px; text-align: right; color: var(--ink);
}

/* bg field */
.bg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); }
.bg-row[data-disabled="true"] { opacity: 0.5; }
.swatch {
  width: 30px; height: 30px; border: 0; cursor: pointer; border-radius: var(--r-ctrl);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 0 0 1px var(--hairline);
}
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px -4px var(--accent-glow); }
.hex-field {
  font-family: var(--mono); font-size: 14px; font-feature-settings: "zero";
  width: 108px; height: 30px; padding: 0 10px; color: var(--ink);
  background: var(--glass-strong); border: 0; border-radius: var(--r-ctrl);
  box-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 0 0 1px var(--hairline);
}
.hex-field:focus { outline: none; box-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 0 0 2px var(--accent); }
.hex-field.rejected { box-shadow: inset 0 1px 0 0 var(--glass-edge), inset 0 0 0 2px var(--ink); }
.hex-field:disabled { cursor: not-allowed; }
.field-note { color: var(--ink); min-height: 1.2em; }

/* url badge — dark glass */
.url-badge {
  margin-top: var(--s24);
  background: var(--glass-ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.14), 0 16px 40px -12px var(--glass-shadow);
  border-radius: var(--r-pane); padding: var(--s16) var(--s16) var(--s16) var(--s24);
  display: flex; align-items: center; gap: var(--s16);
}
.url-badge .mono-url { color: var(--on-glass); word-break: break-all; flex: 1; }
.url-badge .neg { color: var(--on-glass-soft); }
.neg-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px; vertical-align: middle;
  color: var(--on-glass-soft); background: rgba(255,255,255,0.12);
}
.badge-copy {
  flex: none; border: 0; cursor: pointer; border-radius: var(--r-ctrl); padding: 8px 12px;
  color: var(--on-glass); background: rgba(255,255,255,0.12);
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  transition: background 160ms ease-out;
}
.badge-copy:hover { background: rgba(255,255,255,0.22); }
.copy-state { color: var(--ink-faint); font-size: 13px; min-height: 1em; }
.builder .btn { margin-top: var(--s24); }

/* =====================================================================
   Capability trio — three sheets of glass at staggered depth
   ===================================================================== */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); align-items: start; }
.cap-card { border-radius: var(--r-pane); padding: var(--s24); }
.cap-card.pane-front { transform: translateY(0); }
.cap-card.pane-mid { transform: translateY(18px); }
.cap-card.pane-back { transform: translateY(36px); }
.cap-plate { overflow: hidden; border-radius: var(--r-ctrl); aspect-ratio: 16 / 9; margin-bottom: var(--s16);
  box-shadow: inset 0 1px 0 0 var(--glass-edge); }
.cap-plate img { width: 100%; height: 100%; object-fit: cover; }
.cap-card .display-m { margin-bottom: var(--s12); }
.cap-card .body { color: var(--ink); }
.cap-card .mono-param { color: var(--ink); background: var(--glass-strong); padding: 1px 6px; border-radius: 6px; }

/* =====================================================================
   Live-transform demo — before / after behind glass
   ===================================================================== */
.demo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s24); }
.demo-cell { display: flex; flex-direction: column; gap: var(--s12); }
.demo-glass { border-radius: var(--r-large); padding: var(--s16); }
.demo-stage {
  position: relative; overflow: hidden; border-radius: var(--r-pane);
  aspect-ratio: 4 / 3; box-shadow: inset 0 0 0 1px var(--hairline);
}
.demo-stage .demo-box { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; background: transparent; }
.demo-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
/* the frosting sheet — its backdrop-filter blur is the API's blur, live */
.frost-sheet {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(var(--frost, 0px)); backdrop-filter: blur(var(--frost, 0px));
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);
}
.demo-caption { display: flex; align-items: center; justify-content: space-between; }
.demo-caption .label { color: var(--ink); }
.demo-caption .mono-param { color: var(--ink); }

.demo-controls { margin-top: var(--s24); border-radius: var(--r-large); padding: var(--s32); }
.demo-slider-block { display: flex; flex-direction: column; gap: var(--s12); margin-bottom: var(--s24); }
.demo-slider-block .label { color: var(--ink); }
.demo-optrow { display: flex; flex-wrap: wrap; gap: var(--s24); }
.demo-optrow .control-row { min-width: 160px; }
.demo-url { margin-top: var(--s24); }

/* =====================================================================
   Stats band — numbers lit from behind
   ===================================================================== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s24); align-items: start; }
.stat-tile {
  position: relative; overflow: hidden; border-radius: var(--r-pane); padding: var(--s32) var(--s24);
  text-align: left;
}
.stat-tile:nth-child(1) { transform: translateY(0); }
.stat-tile:nth-child(2) { transform: translateY(12px); }
.stat-tile:nth-child(3) { transform: translateY(24px); }
.stat-tile:nth-child(4) { transform: translateY(36px); }
.stat-tile::before {                    /* the accent backlight bloom */
  content: ""; position: absolute; left: 10%; top: 8%; width: 70%; height: 60%;
  background: radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 70%);
  filter: blur(10px); z-index: 0; pointer-events: none;
  animation: glow-breath 14s ease-in-out infinite;
}
.stat-tile .readout, .stat-tile .stat-label { position: relative; z-index: 1; }
.stat-tile .readout { color: var(--ink); }
.stat-label { margin-top: var(--s12); color: var(--ink-soft); }
@keyframes glow-breath { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-pane { border-radius: var(--r-large); padding: var(--s48) var(--s32); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s24); }
.cta-pane .display-m { max-width: 18em; }

/* =====================================================================
   Docs
   ===================================================================== */
.page-opener { margin-bottom: var(--s48); }
.page-opener .glass-title {
  display: inline-block; background: var(--glass);
  -webkit-backdrop-filter: var(--pane-blur); backdrop-filter: var(--pane-blur);
  box-shadow: var(--pane-shadow); border-radius: var(--r-large); padding: var(--s24) var(--s32);
}
.page-opener .lead { margin-top: var(--s16); max-width: 40em; color: var(--on-glass); }
.page-opener.on-dark .glass-title { color: var(--ink); }

/* quickstart steps */
.steps { display: flex; flex-direction: column; gap: var(--s24); }
.step { border-radius: var(--r-pane); padding: var(--s32); display: grid; grid-template-columns: 56px 1fr; gap: var(--s24); align-items: start; }
.step:nth-child(1) { margin-left: 0; }
.step:nth-child(2) { margin-left: 24px; }
.step:nth-child(3) { margin-left: 48px; }
.step-num {
  width: 56px; height: 56px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--glass-strong); box-shadow: inset 0 1px 0 0 var(--glass-edge), 0 0 22px -6px var(--accent-glow);
  font-weight: 300; font-size: 28px; color: var(--ink);
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.step-body { min-width: 0; }
.step-body .display-s { margin-bottom: var(--s8); }
.step-body .body { color: var(--ink-soft); }
.step-body .mono-url { color: var(--ink); word-break: break-all; }

/* code pane — dark glass */
.code-pane {
  position: relative; margin-top: var(--s16);
  background: var(--glass-ink);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.14), 0 18px 44px -14px var(--glass-shadow);
  border-radius: var(--r-large); padding: var(--s32);
}
.code-pane pre { margin: 0; overflow-x: auto; }
.code-pane code { color: var(--on-glass); white-space: pre; }
.code-pane .cmt { color: var(--on-glass-soft); }
.code-copy {
  position: absolute; top: var(--s16); right: var(--s16); border: 0; cursor: pointer;
  color: var(--on-glass); background: rgba(255,255,255,0.12); border-radius: var(--r-ctrl);
  padding: 6px 12px; font-family: var(--sans); font-weight: 500; font-size: 13px;
  transition: background 160ms ease-out;
}
.code-copy:hover { background: rgba(255,255,255,0.22); }

/* parameter table */
.table-pane { border-radius: var(--r-large); padding: var(--s32); margin-top: 0; }
.param-table { width: 100%; border-collapse: collapse; }
.param-table thead th {
  text-align: left; padding: 0 var(--s16) var(--s12);
  font-weight: 500; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--hairline);
}
.param-table tbody td { padding: var(--s16); border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.param-table tbody tr:last-child td { border-bottom: 0; }
.param-table .p-name { font-family: var(--mono); font-size: 14px; font-feature-settings: "zero"; color: var(--ink); white-space: nowrap; }
.param-table .p-values { font-size: 14px; color: var(--ink-soft); }
.param-table .p-values .tok { font-family: var(--mono); font-feature-settings: "zero"; }
.param-table .p-desc { font-size: 14px; color: var(--ink-soft); }
.param-table tr.row-blur {
  background: linear-gradient(90deg, var(--accent-glow), rgba(77,107,255,0.06));
  box-shadow: inset 0 0 0 1px rgba(77,107,255,0.25);
  border-radius: var(--r-ctrl);
}
.param-table tr.row-blur .p-name { color: var(--accent-deep); }
.blur-note { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); font-style: italic; }
.negotiated-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px;
  color: var(--ink-soft); background: var(--glass-thin);
  box-shadow: inset 0 0 0 1px var(--hairline); vertical-align: middle;
}

/* caching & limits */
.limits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); margin-top: var(--s24); }
.limit-item .label { color: var(--ink-soft); margin-bottom: var(--s8); }
.limit-item .display-s { color: var(--ink); margin-bottom: 4px; }
.limit-item .body-s { color: var(--ink-soft); }
.limits-lead { color: var(--ink-soft); max-width: 46em; }

/* =====================================================================
   Pricing
   ===================================================================== */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); align-items: start; }
.tier-card { border-radius: var(--r-large); padding: var(--s32); display: flex; flex-direction: column; gap: var(--s16); }
.tier-card:nth-child(1) { transform: translateY(0); }
.tier-card:nth-child(2) { transform: translateY(16px); }
.tier-card:nth-child(3) { transform: translateY(32px); }
.tier-name { color: var(--ink); }
.tier-price { display: flex; align-items: baseline; gap: 8px; }
.tier-price .readout { color: var(--ink); }
.tier-price .per { font-size: 15px; color: var(--ink-soft); }
.tier-list { list-style: none; margin: var(--s8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s12); }
.tier-list li { font-size: 14px; line-height: 1.6; color: var(--ink-soft); padding-left: var(--s24); position: relative; }
.tier-list li::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent); box-shadow: 0 0 8px -1px var(--accent-glow);
}

/* overage */
.overage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s32); margin-top: var(--s24); }
.overage-grid .body { color: var(--ink-soft); }
.overage-grid .display-s { color: var(--ink); margin-bottom: var(--s8); }
.overage-grid .mono-param { color: var(--ink); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--s16); max-width: 820px; }
.faq-item { border-radius: var(--r-pane); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; border: 0; cursor: pointer; background: transparent;
  padding: var(--s24); display: flex; align-items: center; justify-content: space-between; gap: var(--s16);
  color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: -0.2px;
}
.faq-chevron {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--glass-strong); box-shadow: inset 0 1px 0 0 var(--glass-edge);
  transition: transform 160ms ease-out;
}
.faq-chevron::before {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translate(-1px, -1px);
}
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a { padding: 0 var(--s24) var(--s24); }
.faq-a .body { color: var(--ink); }
.faq-a[hidden] { display: none; }

/* =====================================================================
   Footer — glass over paper, never a dark slab
   ===================================================================== */
.footer { position: relative; background: var(--paper-deep); margin-top: var(--s96); }
.footer-inner {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 0 0 var(--glass-edge);
  padding: var(--s64) 0 var(--s32);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s32); }
.footer-brand .wordmark { font-size: 20px; }
.footer-brand .body-s { color: var(--ink-soft); margin-top: var(--s12); max-width: 24em; }
.footer-col h4 { margin: 0 0 var(--s16); font-weight: 500; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-soft); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s12); }
.footer-col a { font-size: 14px; color: var(--ink); text-decoration: none; opacity: 0.85; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }
.footer-legal { margin-top: var(--s48); padding-top: var(--s24); border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: 14px; }

/* =====================================================================
   Focus — a haloed accent ring built for glass
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--on-glass);
}
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 1px 0 0 #fff, 0 0 0 2px var(--accent), 0 0 0 4px var(--on-glass), 0 0 0 6px var(--accent); }
.slider:focus-visible::-moz-range-thumb { box-shadow: inset 0 1px 0 0 #fff, 0 0 0 2px var(--accent), 0 0 0 4px var(--on-glass), 0 0 0 6px var(--accent); }

/* =====================================================================
   Graceful degradation — solid fallbacks (no glass), no lost text
   ===================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pane, .pane-front, .pane-mid, .nav, .hero-eyebrow, .hero-copy .display-xl, .hero-copy .lead,
  .btn-secondary, .page-opener .glass-title, .footer-inner { background: var(--glass-solid); }
  .pane-strong, .pane-back, .stat-tile, .tier-card, .table-pane, .demo-glass, .demo-controls,
  .inner-strong, .cta-pane, .step, .faq-item { background: var(--glass-strong-solid); }
  .url-badge, .code-pane { background: var(--glass-ink-solid); }
  .frost-sheet { background: rgba(255,255,255,0.35); }
}
@media (prefers-reduced-transparency: reduce) {
  .pane, .pane-front, .pane-mid, .nav, .hero-eyebrow, .hero-copy .display-xl, .hero-copy .lead,
  .btn-secondary, .page-opener .glass-title, .footer-inner {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .pane-strong, .pane-back, .stat-tile, .tier-card, .table-pane, .demo-glass, .demo-controls,
  .inner-strong, .cta-pane, .step, .faq-item, .builder {
    background: var(--glass-strong-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .url-badge, .code-pane { background: var(--glass-ink-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stat-tile::before { display: none; }
  .btn-primary { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.35); }
}

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

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1024px) {
  .display-xl { font-size: 40px; letter-spacing: -0.8px; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s32); }
  .cap-card.pane-mid, .cap-card.pane-back { transform: none; }
  .stat-tile:nth-child(n) { transform: none; }
  .tier-card:nth-child(n) { transform: none; }
}
@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .limits-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .band { padding: var(--s64) 0; }
  .band-hero { padding: var(--s96) 0 var(--s64); }
  .display-xl { font-size: 36px; }
  .display-l { font-size: 30px; }
  .nav-tabs { display: none; position: absolute; top: 64px; left: var(--s16); right: var(--s16);
    flex-direction: column; align-items: stretch; gap: 4px; padding: var(--s12);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2);
    border-radius: var(--r-pane); box-shadow: var(--pane-shadow); }
  .nav-tabs.open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .builder, .builder.pane-lg { padding: var(--s24); }
  .demo-pair { grid-template-columns: 1fr; }
  .demo-optrow { flex-direction: column; gap: var(--s16); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .overage-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: var(--s16); }
  .step:nth-child(n) { margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .table-pane { padding: var(--s16); overflow-x: auto; }
}