/* ==========================================================================
   developer.atob.com — v2
   Scroll-driven product story in three chapters (Spend, Payments, Trip
   Credit), each closing on the slice of the Partner API that powers it.

   Motion model: every .scene is N beats tall. JS writes --p (0..1) and
   data-beat on the scene; CSS does all the choreography from those two
   values. No JS, or prefers-reduced-motion, collapses the page to a static,
   fully readable layout.
   ========================================================================== */

:root {
  --black:   #0b0e14;
  --navy:    #1c2436;
  --navy-2:  #232d44;
  --lime:    #d9f99d;
  --green:   #00b67a;
  --paper:   #f9fafb;
  --paper-2: #eef0f3;
  --ink:     #0f141c;
  --fog:     #a7b0bf;
  --line:    rgba(255,255,255,.1);

  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Overpass Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --shell: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #e9edf4;
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 2px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 300;
  background: var(--lime); color: var(--ink); padding: .7rem 1.1rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: .75rem; }

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1; letter-spacing: -.025em; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  --bg: var(--lime); --fg: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.4rem;
  border: 2px solid var(--bg); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 700 .95rem/1 var(--sans); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--quiet { --bg: transparent; --fg: #e9edf4; border-color: rgba(233,237,244,.3); }
.btn--quiet:hover { border-color: var(--lime); color: var(--lime); }
.btn--lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; }
.btn--sm { padding: .55rem 1rem; font-size: .86rem; }
.btn--ink { --bg: var(--ink); --fg: var(--paper); }
.btn--paper { --bg: transparent; --fg: var(--ink); border-color: rgba(15,20,28,.3); }
.btn--paper:hover { border-color: var(--ink); }

/* ==========================================================================
   header
   ========================================================================== */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(11,14,20,.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 60px; }

.logo { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; text-decoration: none; color: #fff; }
.logo svg { display: block; height: 26px; width: auto; }
.logo span { font-weight: 600; font-size: .95rem; color: var(--fog); letter-spacing: -.01em; padding-left: .7rem; border-left: 1px solid var(--line); }

.masthead__nav { display: flex; gap: 1.5rem; }
.masthead__nav a { font-size: .9rem; font-weight: 600; color: var(--fog); text-decoration: none; transition: color .15s var(--ease); }
.masthead__nav a:hover { color: #fff; }
@media (max-width: 860px) { .masthead__nav { display: none; } }

/* ==========================================================================
   scenes — the pinned storytelling engine
   ========================================================================== */
.scene {
  --p: 0;
  position: relative;
  height: calc(var(--beats) * 100vh);
  height: calc(var(--beats) * 100svh);
}

.scene__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: 80px var(--gutter) 2rem;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
}

.stage__object { position: relative; order: 2; display: grid; place-items: center; min-height: 0; perspective: 1600px; }
@media (max-width: 860px) { .stage__object { order: 0; } }
.stage__copy { position: relative; min-height: 0; }

/* Copy column: beat indicator above a fixed-height box in which steps stack;
   the active beat's step is the visible one. */
.stage__copy { display: grid; align-content: center; gap: 1.4rem; }
.steps { position: relative; min-height: 19rem; }
.step {
  position: absolute; inset: 0 0 auto 0;
  transform: translateY(22px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.step.on { opacity: 1; transform: none; pointer-events: auto; }

.step h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -.035em; line-height: 1.02; max-width: 16ch; }
.step p { margin: 1.1rem 0 0; max-width: 40ch; color: var(--fog); font-size: clamp(1rem, 1.3vw, 1.125rem); }
.step p code { font-family: var(--mono); font-size: .9em; color: var(--lime); }

/* Beat indicator. The chapters are real sequences, so a real progress mark. */
.beats { display: flex; gap: .4rem; transition: opacity .4s var(--ease); }
.scene[data-beat="0"] .beats { opacity: 0; }
.beats i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); transition: background-color .3s var(--ease), width .3s var(--ease); }
.beats i.on { background: var(--lime); width: 34px; }

@media (max-width: 860px) {
  .scene__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    padding-top: 72px;
    padding-bottom: 1.25rem;
    gap: .5rem;
  }
  .stage__copy { gap: .8rem; align-content: end; }
  .steps { min-height: 12.5rem; }
  .step { transform: translateY(18px); }
  .step h3 { font-size: clamp(1.45rem, 6vw, 2rem); }
  .step p { font-size: .98rem; margin-top: .7rem; }
}

/* Object parts: JS adds .on when data-from <= beat <= data-until. */
.rev { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .55s var(--ease), transform .7s var(--ease); pointer-events: none; }
.rev.on { opacity: 1; transform: none; pointer-events: auto; }

/* Chips: small labelled API events that attach to the objects. */
.chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .75rem;
  background: rgba(11,14,20,.86);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  font-family: var(--mono); font-size: .74rem; color: #dfe5ee;
  white-space: nowrap;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
  backdrop-filter: blur(8px);
}
.chip b { font-weight: 700; color: var(--lime); }
.chip .ok { color: var(--green); font-weight: 700; }
.chip .no { color: #ff7a7a; font-weight: 700; }
.chip .verb { padding: .1rem .4rem; border-radius: 4px; background: var(--lime); color: var(--ink); font-weight: 700; }

/* ==========================================================================
   chapter 1 — the fleet card
   ========================================================================== */
.ch-spend { background: radial-gradient(90% 70% at 70% 30%, rgba(35,45,68,.9) 0%, var(--black) 62%); }

/* Hero copy sits over the stage at beat 0 only. */
.hero-copy {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-content: center;
  padding: 80px var(--gutter) 0;
  max-width: calc(var(--shell) + 2 * var(--gutter)); margin-inline: auto;
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.hero-copy.off { opacity: 0; transform: translateY(-30px); }
.hero-copy h1 { font-size: clamp(2.7rem, 5.7cqi, 4.7rem); letter-spacing: -.03em; line-height: .96; max-width: 12ch; text-wrap: balance; }
.hero-copy h1 span { display: block; color: var(--lime); }
.hero-copy p { margin: 1.4rem 0 0; max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--fog); }
.hero-copy .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; pointer-events: auto; }
.hero-copy .cue { position: absolute; left: var(--gutter); bottom: 1.6rem; font-family: var(--mono); font-size: .72rem; color: var(--fog); letter-spacing: .06em; display: flex; align-items: center; gap: .6rem; }
.hero-copy .cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--lime), transparent); }

@media (max-width: 860px) {
  .hero-copy { align-content: end; padding-bottom: 5rem; }
  .hero-copy h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero-copy p { font-size: 1rem; max-width: 34ch; }
}

/* The card. Rotation reads --p: it swings face-on over the first beat. */
.card-wrap {
  position: relative;
  width: min(100%, 520px);
  transform-style: preserve-3d;
  transform:
    translateX(calc((1 - min(1, var(--p) * 5)) * clamp(2rem, 6vw, 5.5rem)))
    rotateY(calc((1 - min(1, var(--p) * 5)) * -34deg))
    rotateX(calc((1 - min(1, var(--p) * 5)) * 10deg))
    translateY(calc((1 - min(1, var(--p) * 5)) * 6vh))
    scale(calc(1.06 - min(1, var(--p) * 5) * .12));
}
.card { display: block; width: 100%; height: auto; }
.card text { font-family: var(--sans); }
.card .mono, .wallet .mono { font-family: var(--mono); }
.card__print { opacity: 0; transition: opacity .8s var(--ease) .1s; }
.scene[data-beat]:not([data-beat="0"]) .card__print { opacity: 1; }

@media (max-width: 860px) {
  .card-wrap { width: min(86%, 440px); }
  .scene[data-beat="0"] .stage__object { opacity: .35; }
}

/* Chip positions around the card, per beat. */
.ch-spend .chip--issue  { left: -4%; top: -16%; }
.ch-spend .chip--stamp  { right: -4%; bottom: -16%; }
.tags { position: absolute; inset: 0; pointer-events: none; }
.tags .chip { font-family: var(--sans); font-size: .82rem; font-weight: 600; }
.tags .chip:nth-child(1) { left: -6%; top: -16%; }
.tags .chip:nth-child(2) { right: -8%; top: -6%; }
.tags .chip:nth-child(3) { left: -2%; bottom: -16%; }
.tags .chip:nth-child(4) { right: -8%; bottom: 2%; }

.receipts { position: absolute; inset: 0; pointer-events: none; }
.receipt {
  position: absolute; width: min(300px, 78%);
  padding: .8rem .95rem;
  background: var(--paper); color: var(--ink);
  border-radius: 6px;
  font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.9);
}
.receipt strong { display: block; font-size: .8rem; }
.receipt .row { display: flex; justify-content: space-between; gap: .75rem; }
.receipt .status { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed rgba(15,20,28,.35); font-weight: 700; }
.receipt .status.ok { color: #067a4c; }
.receipt .status.no { color: #b42323; }
.receipt--a { left: -12%; top: -28%; }
.receipt--b { right: -12%; bottom: -30%; }
.receipt--a.rev.on { transform: rotate(-3deg); }
.receipt--b.rev.on { transform: rotate(2.5deg); }

.ch-spend .chip--gps { left: -6%; top: -16%; }
.ch-spend .chip--shield { right: -6%; bottom: -16%; }

@media (max-width: 860px) {
  .tags .chip, .receipt, .ch-spend .chip { font-size: .68rem; }
  .tags .chip:nth-child(2), .tags .chip:nth-child(3) { display: none; }
  .receipt { width: 62%; padding: .6rem .7rem; }
}

/* ==========================================================================
   chapter 2 — the wallet
   ========================================================================== */
.ch-pay { background: radial-gradient(90% 70% at 30% 40%, rgba(0,182,122,.16) 0%, var(--black) 60%); }

.statement {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-content: center;
  padding: 80px var(--gutter) 0;
  max-width: calc(var(--shell) + 2 * var(--gutter)); margin-inline: auto;
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.statement.off { opacity: 0; transform: translateY(-30px); }
/* Both overlays mirror the stage grid so their copy stays in the left column,
   clear of the object in the right one. */
.hero-copy, .statement {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap: clamp(1rem, 4vw, 4rem);
  container-type: inline-size; /* headline sizes above use cqi so they track the column */
}
.hero-copy > *, .statement > * { grid-column: 1; min-width: 0; }
@media (max-width: 860px) { .hero-copy, .statement { grid-template-columns: minmax(0, 1fr); } }
.scene[data-beat="0"] .wallet-wrap, .scene[data-beat="0"] .ratecon { opacity: .55; }
.wallet-wrap, .ratecon { transition: opacity .6s var(--ease); }
.statement h2 { font-size: clamp(2.5rem, 4.7cqi, 3.7rem); letter-spacing: -.03em; line-height: .98; max-width: 14ch; text-wrap: balance; }
.statement h2 span { display: block; color: var(--lime); }
.statement p { margin: 1.3rem 0 0; max-width: 44ch; color: var(--fog); font-size: clamp(1rem, 1.5vw, 1.2rem); }
@media (max-width: 860px) {
  .statement { align-content: end; padding-bottom: 4.5rem; }
  .statement h2 { font-size: clamp(2.1rem, 10vw, 3.4rem); }
}

.wallet-wrap {
  position: relative;
  width: min(100%, 500px);
  transform: translateY(calc((1 - min(1, var(--p) * 4)) * 8vh)) scale(calc(.94 + min(1, var(--p) * 4) * .06));
}
.wallet { display: block; width: 100%; height: auto; overflow: visible; }
.card { overflow: visible; }
.wallet text { font-family: var(--sans); }

/* The fleet card slides down into the wallet as the statement gives way. */
.wallet__card { transform: translateY(calc((1 - min(1, var(--p) * 4)) * -70px)); }

.ch-pay .chip--fund { left: -4%; top: -9%; }
.ch-pay .chip--hook { right: -4%; top: 30%; }
.ch-pay .chip--payout { right: -2%; bottom: 10%; }

.rails {
  position: absolute; left: -2%; top: 100%; margin-top: 1rem;
  display: grid; gap: .3rem;
  padding: .7rem .8rem;
  background: rgba(11,14,20,.86); border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  font-size: .78rem; font-weight: 600; color: #dfe5ee;
  backdrop-filter: blur(8px);
}
.rails span { display: flex; align-items: center; gap: .5rem; }
.rails span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.rails small { color: var(--fog); font-weight: 500; }

.ledger {
  position: absolute; left: -2%; right: -2%; top: 100%; margin-top: 1rem;
  padding: .6rem .8rem .7rem;
  background: rgba(11,14,20,.9); border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  font-family: var(--mono); font-size: .7rem; color: #dfe5ee;
  backdrop-filter: blur(8px);
}
.ledger .row { display: grid; grid-template-columns: 1fr auto auto; gap: .9rem; padding: .32rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.ledger .row:first-child { border-top: 0; color: var(--fog); }
.ledger .in { color: var(--green); font-weight: 700; }
.ledger .out { color: #ff9c9c; font-weight: 700; }

@media (max-width: 860px) {
  .wallet-wrap { width: min(80%, 400px); margin-bottom: 7.5rem; }
  .rails, .ledger { font-size: .64rem; }
  .rails { padding: .5rem .6rem; }
}

/* ==========================================================================
   chapter 3 — trip credit
   ========================================================================== */
.ch-trip { background: radial-gradient(80% 60% at 60% 70%, rgba(217,249,157,.1) 0%, var(--black) 60%); }

.ratecon-wrap { position: relative; width: min(100%, 470px); }

.ratecon {
  position: relative;
  padding: 1.3rem 1.4rem 1.2rem;
  background: var(--paper); color: var(--ink);
  border-radius: 8px;
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.9);
  transform: translateY(calc((1 - min(1, var(--p) * 5)) * 10vh)) rotate(calc((1 - min(1, var(--p) * 5)) * -3deg));
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
}
.ratecon header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--ink); }
.ratecon header strong { font-family: var(--sans); font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.ratecon dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.2rem; margin: .8rem 0 0; }
.ratecon dt { color: #5d6675; }
.ratecon dd { margin: 0; font-weight: 700; }
.ratecon .lane { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; font-family: var(--sans); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.ratecon .lane i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); }

.ribbon {
  position: absolute; right: -8%; top: 50%;
  padding: .55rem .9rem;
  background: var(--lime); color: var(--ink);
  border-radius: 6px;
  font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.8);
}
.ribbon small { display: block; font-family: var(--mono); font-weight: 600; font-size: .66rem; letter-spacing: .04em; opacity: .8; }
.ribbon.rev { transform: rotate(6deg) scale(.9); }
.ribbon.rev.on { transform: rotate(6deg); }

.route { position: absolute; left: -4%; right: -4%; top: 100%; margin-top: 1.75rem; }
.route svg { display: block; width: 100%; height: auto; overflow: visible; }
.route text { font-family: var(--mono); font-size: 10px; fill: #dfe5ee; }
.route .price { font-weight: 700; fill: var(--lime); }

.repay {
  position: absolute; left: -2%; right: -2%; top: 100%; margin-top: 1.25rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  padding: .75rem .85rem .85rem;
  background: rgba(11,14,20,.9); border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  backdrop-filter: blur(8px);
}
.repay div { font-family: var(--mono); font-size: .68rem; color: var(--fog); }
.repay b { display: block; font-size: .8rem; color: #fff; margin-bottom: .35rem; }
.repay i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.repay i::after { content: ""; display: block; height: 100%; width: 0; background: var(--green); transition: width .9s var(--ease); }
.repay.on i::after { width: 100%; }
.repay.on div:nth-child(2) i::after { transition-delay: .25s; }
.repay.on div:nth-child(3) i::after { transition-delay: .5s; }
.repay.on div:nth-child(4) i::after { transition-delay: .75s; }

.ch-trip .chip--risk { left: -2%; top: -10%; font-family: var(--sans); font-size: .82rem; font-weight: 600; }
.ch-trip .chip--factor { right: -2%; bottom: -10%; font-family: var(--sans); font-size: .82rem; font-weight: 600; }

@media (max-width: 860px) {
  .ratecon-wrap { width: min(86%, 380px); margin-bottom: 6rem; }
  .ratecon { padding: .9rem 1rem; font-size: .68rem; }
  .ribbon { font-size: .9rem; }
  .repay div, .route text { font-size: .6rem; }
}

/* ==========================================================================
   docs strips — where each chapter lives in the API
   ========================================================================== */
.docs {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--ink);
  padding-block: clamp(4rem, 8vw, 7rem); /* same rhythm as .hooks and .ref */
}
.docs__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .docs__grid { grid-template-columns: minmax(0, 1fr); } }

.docs h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.025em; max-width: 16ch; }
.docs__lead { margin: 1rem 0 0; max-width: 46ch; color: #4a5361; }

.resources { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 2px solid var(--ink); }
.resources li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid rgba(15,20,28,.16); }
.resources a { font-weight: 700; text-decoration: none; color: var(--ink); }
.resources a:hover { color: #0b5a3a; }
.resources small { display: block; font-weight: 500; font-size: .86rem; color: #5d6675; }
.resources .n { font-family: var(--mono); font-size: .82rem; color: #4a5361; white-space: nowrap; }
.resources .n b { color: var(--ink); }

.docs__cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .7rem; }

.note { margin: 1.4rem 0 0; padding: .9rem 1rem; border-left: 3px solid var(--ink); background: rgba(15,20,28,.05); font-size: .93rem; color: #3a424f; }

/* The code sample, a dark printout on the paper. */
.sample { border-radius: 10px; overflow: hidden; background: #0f141c; color: #d7dfeb; box-shadow: 0 30px 60px -30px rgba(15,20,28,.6); }
.sample__bar { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); font-family: var(--mono); font-size: .74rem; color: var(--fog); }
.sample__bar .verb { padding: .12rem .45rem; border-radius: 4px; background: var(--lime); color: var(--ink); font-weight: 700; }
.sample__bar .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dfe5ee; }
.copy-btn { margin-left: auto; padding: .3rem .6rem; background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; font: 600 .7rem var(--mono); color: var(--fog); cursor: pointer; }
.copy-btn:hover { color: var(--lime); border-color: var(--lime); }
.sample pre { margin: 0; padding: 1.1rem 1.2rem 1.3rem; overflow-x: auto; font-family: var(--mono); font-size: .8rem; line-height: 1.7; tab-size: 2; }
.sample pre i { color: #7f8b9d; font-style: normal; }
.sample__note { padding: .8rem 1.2rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .86rem; color: var(--fog); }
.sample__note code { font-family: var(--mono); font-size: .8rem; color: var(--lime); }

/* ==========================================================================
   webhooks + reference + close
   ========================================================================== */
.hooks { padding-block: clamp(4rem, 8vw, 7rem); }
.hooks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hooks h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.03em; max-width: 12ch; text-wrap: balance; }
.hooks h2 span { display: block; color: var(--lime); }
.hooks__copy p { margin: 1.2rem 0 0; max-width: 44ch; color: var(--fog); }
.hooks__copy p a, .sample__note a { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(217,249,157,.4); }

.ref { padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.ref h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }
.ref__lead { margin: 1.1rem 0 0; max-width: 50ch; color: var(--fog); }
.refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: .6rem; margin-top: 2.5rem; }
.refgrid a {
  display: grid; gap: .3rem;
  padding: 1rem 1.05rem .95rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.025);
  text-decoration: none;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.refgrid a:hover { border-color: rgba(217,249,157,.55); background: rgba(217,249,157,.05); }
.refgrid strong { font-weight: 700; letter-spacing: -.01em; }
.refgrid small { font-family: var(--mono); font-size: .7rem; color: var(--fog); }
.refgrid em { font-style: normal; font-family: var(--mono); font-size: .7rem; color: var(--lime); }

.finish { text-align: center; padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 8vw, 6rem); background: radial-gradient(70% 60% at 50% 100%, rgba(217,249,157,.12) 0%, transparent 60%); }
.finish h2 { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -.03em; max-width: 12ch; margin-inline: auto; text-wrap: balance; }
.finish p { margin: 1.3rem auto 0; max-width: 48ch; color: var(--fog); font-size: 1.1rem; }
.finish__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; margin-top: 2.4rem; }
.envs { display: inline-grid; gap: .25rem 1.2rem; grid-template-columns: auto auto; margin: 3rem auto 0; font-family: var(--mono); font-size: .78rem; text-align: left; }
.envs dt { color: var(--fog); }
.envs dd { margin: 0; color: var(--lime); overflow-wrap: anywhere; }

.colophon { border-top: 1px solid var(--line); }
.colophon__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.75rem 2.25rem; font-size: .86rem; color: var(--fog); }
.colophon svg { height: 22px; width: auto; display: block; color: #fff; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-left: auto; }
.colophon a { color: var(--fog); text-decoration: none; font-weight: 600; }
.colophon a:hover { color: var(--lime); }

/* Shorter laptops: keep the statements and objects inside the pinned viewport. */
@media (max-height: 820px) {
  .hero-copy h1 { font-size: clamp(2.4rem, 5.2cqi, 4.4rem); }
  .hero-copy .cue { display: none; }
  .statement h2 { font-size: clamp(2.2rem, 4.4cqi, 3.5rem); }
  .card-wrap, .wallet-wrap, .ratecon-wrap { width: min(100%, 420px); }
}

/* ==========================================================================
   static fallback — no JS, or reduced motion
   Scenes lose pinning; every beat lays out in order and is fully readable.
   ========================================================================== */
.no-js .scene, .static .scene { height: auto; }
.no-js .scene__stage, .static .scene__stage {
  position: static; height: auto; overflow: visible;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 92px; padding-bottom: 3rem; gap: 2rem;
}
.no-js .hero-copy, .static .hero-copy, .no-js .statement, .static .statement {
  position: static; padding: 0 0 2.5rem; opacity: 1 !important; transform: none !important;
}
.no-js .hero-copy .cue, .static .hero-copy .cue { display: none; }
.no-js .stage__copy, .static .stage__copy { display: grid; gap: 2.5rem; }
.no-js .step, .static .step { position: static; opacity: 1; transform: none; pointer-events: auto; }
.no-js .beats, .static .beats { display: none; }
.no-js .rev, .static .rev, .no-js .card__print, .static .card__print { opacity: 1; transform: none; }
.no-js .card-wrap, .static .card-wrap, .no-js .wallet-wrap, .static .wallet-wrap, .no-js .ratecon, .static .ratecon, .no-js .wallet__card, .static .wallet__card { transform: none; }
.no-js .receipt--a, .static .receipt--a { transform: rotate(-3deg); }
.no-js .receipt--b, .static .receipt--b { transform: rotate(2.5deg); }
.no-js .ribbon, .static .ribbon { transform: rotate(6deg); }
.no-js .repay i::after, .static .repay i::after { width: 100%; }
.no-js .stage__object, .static .stage__object { padding-block: 4rem 7rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   404
   ========================================================================== */
.detour { display: grid; place-items: center; min-height: 100vh; text-align: center; padding: 6rem var(--gutter); }
.detour h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.detour p { margin: 1.2rem 0 2rem; color: var(--fog); }
.detour .plate { display: inline-block; padding: .3rem .7rem; border-radius: 4px; background: #e8842a; color: var(--ink); font: 700 .74rem var(--mono); letter-spacing: .06em; margin-bottom: 1.4rem; }
.detour .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }