/* Prism — Refract. Shared stylesheet.
   Near-white paper, ink-black type, one functional blue (link only),
   a six-stop refraction spectrum confined to the hero gradient. */

/* ============================================================= Fonts */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/fonts/inter-600.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");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* ============================================================ Tokens */
:root {
  /* Surfaces & ink */
  --canvas: #ffffff;
  --page: #fafafa;
  --inset: #f5f5f5;
  --ink: #171717;
  --body: #4d4d4d;
  --mute: #888888;
  --hairline: #ebebeb;
  --hairline-strong: #a1a1a1;

  /* Functional blue — link only */
  --link: #0070f3;
  --link-deep: #0761d1;

  /* On the dark ink band */
  --on-ink: #ffffff;
  --on-ink-soft: #a1a1a1;

  /* Refraction spectrum — gradient only, never a UI color */
  --spectrum-red: #ff4d4d;
  --spectrum-amber: #f9cb28;
  --spectrum-green: #50e3c2;
  --spectrum-blue: #007cf0;
  --spectrum-violet: #7928ca;

  /* Type families */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale (4px base) */
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s40: 40px;
  --s64: 64px;
  --s96: 96px;
  --s128: 128px;

  /* Radii */
  --r-input: 6px;
  --r-card: 8px;
  --r-large: 12px;
  --r-pill: 100px;

  /* Elevation — one stacked-shadow token */
  --shadow: rgba(0, 0, 0, 0.06) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 4px,
    rgba(0, 0, 0, 0.04) 0 8px 16px -4px;
  --shadow-lift: rgba(0, 0, 0, 0.08) 0 0 0 1px, rgba(0, 0, 0, 0.06) 0 4px 8px,
    rgba(0, 0, 0, 0.06) 0 16px 32px -8px;

  --container: 1200px;
  --container-docs: 960px;
}

/* ============================================================= Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--link-deep);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  font-family: inherit;
}

/* Branded focus — 2px --link ring, 2px offset, never removed */
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==================================================== Layout helpers */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--s24);
}
.container-docs {
  max-width: var(--container-docs);
}
.band {
  padding-block: var(--s96);
}
.band-hero {
  padding-block: var(--s128) var(--s96);
}
.surface-page {
  background: var(--page);
}
.surface-canvas {
  background: var(--canvas);
}
.surface-inset {
  background: var(--inset);
}

/* ========================================================= Type roles */
.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: 0;
  font-feature-settings: "zero";
  color: var(--body);
  margin: 0 0 var(--s16);
}
.eyebrow--ink {
  color: var(--ink);
}
.eyebrow--on-ink {
  color: var(--on-ink-soft);
}

.display-xl {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -2.4px;
  margin: 0;
}
.display-l {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -1.28px;
  margin: 0;
}
.display-m {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.96px;
  margin: 0;
}
.display-s {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
  margin: 0;
}
.readout {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -1.6px;
  font-feature-settings: "tnum";
  margin: 0;
}
.lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}
.body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  margin: 0;
}
.body-s {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.28px;
  color: var(--body);
  margin: 0;
}
.strong {
  font-weight: 500;
  color: var(--ink);
}

/* Mono technical roles */
.mono-param {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  font-feature-settings: "zero";
  color: var(--ink);
}
.mono-url {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "zero";
}
.mono-code {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  font-feature-settings: "zero";
}

/* ============================================================ Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  height: 48px;
  padding-inline: var(--s24);
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  transition: box-shadow 120ms ease-out, background-color 120ms ease-out;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--on-ink);
}
.btn-primary:hover {
  text-decoration: none;
}
.btn-primary:active {
  background: #000000;
}
.btn-secondary {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.btn-secondary:hover {
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ink);
}
/* Secondary inverted — white pill on the dark flip */
.btn-secondary--inverted {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: none;
}
.btn-tertiary {
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0;
  height: auto;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
}
.btn-tertiary:hover {
  color: var(--link-deep);
  text-decoration: underline;
}
/* Nav-scale square buttons — 6px radius, 32px tall */
.btn-nav {
  height: 32px;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.28px;
  padding-inline: var(--s16);
  border-radius: var(--r-input);
}
.btn-block {
  width: 100%;
}

/* =============================================================== Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--s24);
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--s24);
}
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover {
  text-decoration: none;
}
.nav-tabs {
  display: flex;
  align-items: center;
  gap: var(--s8);
  margin: 0 auto;
}
.nav-tab {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.28px;
  color: var(--body);
  text-decoration: none;
  padding: var(--s8) var(--s12);
  border-radius: var(--r-input);
  position: relative;
}
.nav-tab:hover {
  color: var(--ink);
  text-decoration: none;
}
.nav-tab[aria-current="page"] {
  color: var(--ink);
}
.nav-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s12);
  right: var(--s12);
  bottom: -1px;
  height: 2px;
  background: var(--ink);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s8);
}
.nav-toggle {
  display: none;
  width: 40px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  border-radius: var(--r-input);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  margin: 4px auto;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
/* Mobile dropdown panel — hidden at all widths until the mobile breakpoint opens it */
.nav-menu {
  display: none;
}

/* ======================================================== Cards */
.card {
  background: var(--canvas);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s24);
}
.card-lift {
  transition: box-shadow 120ms ease-out;
}
.card-lift:hover {
  box-shadow: var(--shadow-lift);
}
.card-thumb {
  border-radius: var(--r-input);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--s16);
  background: var(--inset);
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-title {
  margin: var(--s8) 0;
}
.card-example {
  margin-top: var(--s16);
  display: inline-block;
  background: var(--inset);
  border-radius: var(--r-input);
  padding: var(--s4) var(--s8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
}
.section-head {
  max-width: 720px;
  margin-bottom: var(--s40);
}
.section-head .lead {
  margin-top: var(--s16);
}

/* ========================================= Hero + refraction band */
.hero {
  position: relative;
  overflow: hidden;
}
.refraction {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 66%;
  z-index: 0;
  pointer-events: none;
  filter: blur(72px) saturate(1.02);
  opacity: 0.62;
  background:
    radial-gradient(38% 60% at 16% 34%, var(--spectrum-red) 0%, transparent 70%),
    radial-gradient(36% 58% at 38% 20%, var(--spectrum-amber) 0%, transparent 70%),
    radial-gradient(40% 62% at 55% 60%, var(--spectrum-green) 0%, transparent 68%),
    radial-gradient(38% 60% at 74% 26%, var(--spectrum-blue) 0%, transparent 70%),
    radial-gradient(40% 64% at 92% 54%, var(--spectrum-violet) 0%, transparent 70%);
  animation: drift 28s ease-in-out infinite alternate;
}
@keyframes drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1.02);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.05);
  }
}
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-inner .display-xl {
  max-width: 15ch;
}
.hero-inner .lead {
  max-width: 60ch;
  margin-top: var(--s24);
}
.hero-actions {
  display: flex;
  gap: var(--s12);
  margin-top: var(--s32);
  flex-wrap: wrap;
  justify-content: center;
}
.url-badge {
  margin-top: var(--s24);
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  background: var(--canvas);
  border-radius: var(--r-input);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  padding: var(--s12) var(--s16);
  color: var(--ink);
}
.url-badge .mono-url {
  white-space: nowrap;
}
.hero-preview {
  margin-top: var(--s64);
  width: 100%;
  max-width: 900px;
}
.preview-pane {
  background: var(--canvas);
  border-radius: var(--r-large);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-preview .preview-pane {
  aspect-ratio: 16 / 9;
}
.hero-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================ Live-transform demo */
.demo {
  display: grid;
  gap: var(--s24);
}
.demo-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s24);
  align-items: start;
}
.demo-col {
  min-width: 0;
  display: grid;
  gap: var(--s12);
}
.demo-col > .eyebrow {
  margin: 0;
}
.demo-frame {
  background: var(--canvas);
  border-radius: var(--r-large);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}
.demo-frame img {
  display: block;
}
.demo-frame--source img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Result: an inner output frame reshaped by w:h, image drawn per params */
.demo-result-box {
  overflow: hidden;
  border-radius: var(--r-input);
  max-width: 100%;
  max-height: 100%;
  background: var(--canvas);
  transition: none;
}
.demo-result-box img {
  width: 100%;
  height: 100%;
  display: block;
}

.control-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s16);
  background: var(--canvas);
  border-radius: var(--r-large);
  box-shadow: var(--shadow);
  padding: var(--s24);
}
.control {
  min-width: 0;
  display: grid;
  gap: var(--s8);
}
.control-label {
  display: flex;
  align-items: baseline;
  gap: var(--s8);
}
.control-label .mono-param {
  color: var(--ink);
}
.control-label .body-s {
  color: var(--body);
}
.stepper {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-input);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  overflow: hidden;
  width: fit-content;
}
.stepper button {
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.stepper button:hover {
  background: var(--inset);
}
.stepper output {
  font-family: var(--mono);
  font-size: 14px;
  font-feature-settings: "zero";
  color: var(--ink);
  min-width: 64px;
  text-align: center;
  padding-inline: var(--s8);
}
.optgroup {
  display: inline-flex;
  border-radius: var(--r-input);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  overflow: hidden;
  flex-wrap: wrap;
}
.optgroup button {
  border: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--mono);
  font-size: 13px;
  font-feature-settings: "zero";
  padding: var(--s8) var(--s12);
  cursor: pointer;
  border-right: 1px solid var(--hairline);
}
.optgroup button:last-child {
  border-right: 0;
}
.optgroup button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
}
.slider {
  width: 100%;
  accent-color: var(--link);
}
.hexfield {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
}
.hexfield input {
  font-family: var(--mono);
  font-size: 14px;
  font-feature-settings: "zero";
  color: var(--ink);
  width: 110px;
  height: 34px;
  padding-inline: var(--s12);
  border: 0;
  border-radius: var(--r-input);
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.hexfield input::placeholder {
  color: var(--mute);
}
.hexfield input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--link);
  outline: none;
}
.control[data-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.field-note {
  color: var(--ink);
  font-weight: 500;
}
.field-note[hidden] {
  display: none;
}

.demo-url {
  background: var(--canvas);
  border-radius: var(--r-large);
  box-shadow: var(--shadow);
  padding: var(--s16) var(--s24);
  overflow-x: auto;
  min-width: 0;
}
.demo-url .mono-url {
  white-space: nowrap;
  color: var(--ink);
}
.demo-url .tok-negotiated {
  color: var(--body);
}

/* NEGOTIATED tag */
.negotiated-tag {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-feature-settings: "zero";
  color: var(--body);
  background: var(--inset);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  display: inline-block;
  vertical-align: middle;
}

/* ======================================================= Stats band */
.stats {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  pointer-events: none;
  opacity: 0.18;
  filter: blur(48px);
  background:
    radial-gradient(40% 120% at 12% 0%, var(--spectrum-red) 0%, transparent 70%),
    radial-gradient(40% 120% at 36% 0%, var(--spectrum-amber) 0%, transparent 70%),
    radial-gradient(40% 120% at 56% 0%, var(--spectrum-green) 0%, transparent 70%),
    radial-gradient(40% 120% at 76% 0%, var(--spectrum-blue) 0%, transparent 70%),
    radial-gradient(40% 120% at 94% 0%, var(--spectrum-violet) 0%, transparent 70%);
}
.stats .container {
  position: relative;
  z-index: 1;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s40);
}
.stat .readout {
  color: var(--on-ink);
}
.stat .stat-label {
  margin-top: var(--s12);
  color: var(--on-ink-soft);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.28px;
}

/* ====================================================== CTA band */
.cta-band {
  text-align: center;
}
.cta-band .display-l {
  max-width: 24ch;
  margin: 0 auto;
}
.cta-band .lead {
  max-width: 52ch;
  margin: var(--s16) auto 0;
}
.cta-band .hero-actions {
  margin-top: var(--s32);
}

/* ====================================================== Code mockup */
.code-mockup {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s24);
  position: relative;
  overflow-x: auto;
  min-width: 0;
}
.code-mockup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  margin-bottom: var(--s16);
}
.code-mockup .eyebrow {
  color: var(--on-ink-soft);
  margin: 0;
}
.code-copy {
  background: transparent;
  color: var(--on-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  height: 28px;
  font-size: 13px;
  padding-inline: var(--s12);
  border-radius: var(--r-input);
}
.code-copy:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.code-mockup pre {
  margin: 0;
  overflow-x: auto;
}
.code-mockup code {
  color: var(--on-ink);
  white-space: pre;
  font-family: var(--mono);
  font-feature-settings: "zero" 1;
}
.code-mockup .kw {
  font-weight: 500;
  color: var(--on-ink);
}
.code-mockup .cmt {
  color: var(--on-ink-soft);
}

/* ========================================================= Quickstart */
.steps {
  display: grid;
  gap: var(--s24);
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s24);
  align-items: start;
}
.step-num {
  font-family: var(--mono);
  font-size: 14px;
  font-feature-settings: "zero";
  color: var(--ink);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-input);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  flex-shrink: 0;
}
.step-body {
  min-width: 0;
  display: grid;
  gap: var(--s8);
}
.step-body .display-s {
  margin: 0;
}

/* ==================================================== Parameter table */
.table-wrap {
  overflow-x: auto;
  min-width: 0;
}
.param-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.param-table thead th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-feature-settings: "zero";
  color: var(--body);
  text-align: left;
  background: var(--inset);
  padding: var(--s12) var(--s16);
}
.param-table thead th:first-child {
  border-top-left-radius: var(--r-input);
  border-bottom-left-radius: var(--r-input);
}
.param-table thead th:last-child {
  border-top-right-radius: var(--r-input);
  border-bottom-right-radius: var(--r-input);
}
.param-table td {
  padding: var(--s16);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.param-table td.col-name .mono-param {
  color: var(--ink);
}
.param-table td.col-values {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.28px;
  color: var(--body);
}
.param-table td.col-values .mono-param {
  font-size: 13px;
}
.param-table td.col-desc {
  color: var(--body);
  font-size: 14px;
  line-height: 1.43;
}

/* =================================================== Caching & limits */
.figrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
}
.figrow .card .eyebrow {
  margin-bottom: var(--s12);
}
.figrow .figure-value {
  font-weight: 500;
  color: var(--ink);
}

/* ========================================================= Tier cards */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
  align-items: start;
}
.tier-card {
  background: var(--canvas);
  border-radius: var(--r-large);
  box-shadow: var(--shadow);
  padding: var(--s32);
  display: grid;
  gap: var(--s16);
}
.tier-card--flip {
  background: var(--ink);
  color: var(--on-ink);
}
.tier-name {
  color: inherit;
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: var(--s8);
}
.tier-price .readout {
  color: inherit;
}
.tier-price .per {
  color: var(--body);
  font-size: 14px;
}
.tier-card--flip .tier-price .per {
  color: var(--on-ink-soft);
}
.tier-quota {
  list-style: none;
  margin: var(--s8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s8);
}
.tier-quota li {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.28px;
  color: var(--body);
  padding-left: var(--s16);
  position: relative;
}
.tier-card--flip .tier-quota li {
  color: var(--on-ink-soft);
}
.tier-quota li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1.5px;
  background: var(--hairline-strong);
}
.tier-card--flip .tier-quota li::before {
  background: var(--on-ink-soft);
}

/* ============================================= Overage / billing note */
.note-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s24);
}
.note-card .eyebrow {
  margin-bottom: var(--s12);
}

/* ================================================================ FAQ */
.faq {
  display: grid;
}
.faq-row {
  border-bottom: 1px solid var(--hairline);
}
.faq-row summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s24);
  padding: var(--s24) 0;
}
.faq-row summary::-webkit-details-marker {
  display: none;
}
.faq-q {
  color: var(--ink);
}
.faq-chevron {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 120ms ease-out;
  margin-right: var(--s8);
}
.faq-row[open] .faq-chevron {
  transform: rotate(-135deg);
}
.faq-a {
  padding: 0 0 var(--s24);
  max-width: 68ch;
}

/* ============================================================= Footer */
.footer {
  background: var(--page);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s64);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s40);
}
.footer-brand .wordmark {
  font-size: 20px;
}
.footer-brand .body-s {
  margin-top: var(--s12);
  max-width: 32ch;
}
.footer-col h3 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-feature-settings: "zero";
  color: var(--body);
  margin: 0 0 var(--s16);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s12);
}
.footer-col a {
  color: var(--body);
  font-size: 14px;
  letter-spacing: -0.28px;
}
.footer-col a:hover {
  color: var(--ink);
}
.footer-legal {
  margin-top: var(--s40);
  padding-top: var(--s24);
  border-top: 1px solid var(--hairline);
  color: var(--body);
}

/* Utility */
.stack-16 > * + * {
  margin-top: var(--s16);
}
.stack-24 > * + * {
  margin-top: var(--s24);
}
.mt-24 {
  margin-top: var(--s24);
}
.mt-40 {
  margin-top: var(--s40);
}
.center {
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================== Responsive */
@media (max-width: 1024px) {
  .display-xl {
    font-size: 40px;
    letter-spacing: -2px;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--s32);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .band {
    padding-block: var(--s64);
  }
  .band-hero {
    padding-block: var(--s96) var(--s64);
  }
  .display-xl {
    font-size: 32px;
    letter-spacing: -1.28px;
  }
  .readout {
    font-size: 40px;
    letter-spacing: -1.2px;
  }
  .nav-tabs,
  .nav-actions {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .nav[data-open="true"] .nav-menu {
    display: flex;
  }
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: var(--s8);
    padding: var(--s16) var(--s24) var(--s24);
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
  }
  .nav-menu .nav-tab {
    padding: var(--s12);
    display: block;
  }
  .nav-menu .nav-tab[aria-current="page"]::after {
    display: none;
  }
  .nav-menu .nav-actions {
    display: flex;
    gap: var(--s8);
    margin-top: var(--s8);
  }
  .nav-menu .btn-nav {
    flex: 1;
  }
  .grid-3,
  .stats-grid,
  .tier-grid,
  .figrow,
  .note-grid {
    grid-template-columns: 1fr;
  }
  .demo-stage {
    grid-template-columns: 1fr;
  }
  .control-row {
    grid-template-columns: 1fr;
  }
  .hero-preview {
    margin-top: var(--s40);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* Reduced motion — drop drift and all easing */
@media (prefers-reduced-motion: reduce) {
  .refraction {
    animation: none;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}