/* ==========================================================================
   ChampPay — PAGE ARCHITECTURE
   Added 2026-08-04 when the site went from one page to fifteen.
   Everything here extends the Day-and-Night system in main.css rather than
   replacing it: same tokens, same two grounds, same engineered type.
   ========================================================================== */

/* ------------------------------------------------------------ 1. Page head
   Interior pages open on a compact night band rather than a full photographic
   hero, so the home page keeps its scale advantage and interior pages get to
   the point inside one screen. */
/* Both of these are night grounds, so they must remap the semantic tokens the
   way .on-night does — not just set `color`. Without this, anything using
   var(--fg-soft) (kickers, breadcrumbs, .code, .t-body) renders in light-mode
   ink on a near-black ground: legible-looking in a screenshot, 2.8:1 in fact. */
.phead, .cta {
  --fg: var(--halide);
  --fg-soft: var(--halide-soft);
  --bg: var(--night);
  --line: var(--rule-night);
  --acc: var(--beam);
  --acc-hi: var(--halide);
  --acc-on: var(--night);
}

.phead {
  position: relative; background: var(--night); color: var(--halide);
  padding-top: 150px; padding-bottom: clamp(56px, 7vw, 92px);
  overflow: hidden; isolation: isolate;
}

/* ---- Day head -------------------------------------------------------------
   Eleven of fourteen interior pages opened on the same flat near-black green
   slab, and a visitor moving between them saw one colour and nothing else.
   Rhythm across a site works exactly like rhythm down a page: it needs a
   counter-beat. This is that counter-beat — a paper ground carrying a daylight
   photograph, with the full day token set so every child (buttons, breadcrumb,
   kicker) inherits correct contrast rather than being patched one by one. */
.phead--day {
  background: var(--paper-alt); color: var(--ink);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --bg: var(--paper);
  --line: var(--rule);
  --acc: var(--accent);
  --acc-hi: var(--accent-hi);
  --acc-on: #fff;
  border-bottom: 1px solid var(--rule);
}
.phead--day .phead__lead { color: var(--ink-soft); }
.phead--day .crumb a { color: var(--ink-soft); }
.phead--day .crumb a:hover { color: var(--accent); }
/* The daylight scrim lifts the paper back over the picture rather than
   darkening it — same job as the night scrim, opposite direction. */
.phead--day .phead__media::after {
  background:
    linear-gradient(100deg, rgba(239,243,240,.97) 0%, rgba(239,243,240,.90) 38%, rgba(239,243,240,.55) 68%, rgba(239,243,240,.28) 100%);
}
.phead--day .phead__media img { filter: saturate(.5) contrast(1.04); }
/* The lattice is a light-on-dark device; on paper it becomes grubby, so the
   day head drops it and lets the photograph carry the texture. */
.phead--day::before { display: none; }
.phead__media { position: absolute; inset: 0; z-index: -2; }
.phead__media img { width: 100%; height: 100%; object-fit: cover; }
.phead__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,16,12,.88) 0%, rgba(5,16,12,.72) 46%, rgba(5,16,12,.93) 100%);
}
/* A single light falloff keeps the header dimensional without the tiled grid
   motif that made every interior page feel generated from the same template. */
.phead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 110% at 82% 4%, rgba(127,227,190,.09), transparent 72%);
}
.phead__title { font-size: clamp(2.125rem, 4.6vw, 4rem); font-variation-settings: "wdth" 110, "wght" 700; letter-spacing: -0.042em; max-width: 20ch; margin-top: var(--s5); }
.phead__lead { margin-top: var(--s5); max-width: 60ch; color: var(--halide-soft); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; }
.phead__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.crumb a { color: var(--halide-soft); text-decoration: none; }
.crumb a:hover { color: var(--beam); }
.crumb i { font-style: normal; opacity: .45; }

/* ------------------------------------------------------- 2. Section headings */
.shead { max-width: 68ch; }
.sec__head--split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr); gap: clamp(28px,5vw,80px); align-items: end; margin-bottom: var(--s8); }

/* --------------------------------------------------- Champion transition
   The home hero does not fall into an empty white field. A hard editorial
   seam turns the emotional first frame into a three-part system explanation. */
.champion-transition { border-top: 1px solid var(--rule); overflow: hidden; }
.champion-transition::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 34%; height: 3px;
  background: var(--accent);
}
.champion-transition__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .72fr);
  gap: clamp(36px, 7vw, 120px); align-items: end;
}
.champion-transition__copy { display: grid; align-content: end; }
.system-line {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(52px, 7vw, 104px);
  border-block: 1px solid var(--rule);
}
.system-line > div { position: relative; display: grid; gap: var(--s2); padding: var(--s6) var(--s6) var(--s6) 0; }
.system-line > div:not(:last-child) { border-right: 1px solid var(--rule); margin-right: var(--s6); }
.system-line span { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em; color: var(--accent); }
.system-line b { font-family: var(--f-display); font-size: clamp(1.2rem, 2vw, 1.75rem); letter-spacing: -.03em; }
.system-line small { color: var(--ink-soft); font-size: .8125rem; line-height: 1.45; }

/* ----------------------------------------------------------------- 3. Cards */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6); background: var(--paper); border: 1px solid var(--line);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.card--link { text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--acc); transform: translateY(-3px); }
.card__title { font-family: var(--f-display); font-size: 1.1875rem; font-variation-settings: "wdth" 104, "wght" 600; letter-spacing: -.022em; line-height: 1.2; }
.card__body { font-size: .9375rem; line-height: 1.6; color: var(--fg-soft); }
.card__more { margin-top: auto; padding-top: var(--s4); font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); display: inline-flex; align-items: center; gap: var(--s2); }
.card--link:hover .arw { transform: translateX(4px); }
.arw { display: inline-block; transition: transform .3s var(--ease-out); }
.on-night .card { background: var(--night-alt); border-color: var(--rule-night); }

/* Icon plate — a lit cell from the array, not a rounded app icon. */
.plate { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--acc); color: var(--acc); margin-bottom: var(--s3); }
.plate svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------- 4. Stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: var(--s6) var(--s5) var(--s6) 0; border-bottom: 1px solid var(--line); }
.stat__fig { font-family: var(--f-mono); font-size: clamp(1.5rem, 2.4vw, 2rem); font-variation-settings: "wght" 600; letter-spacing: -.03em; color: var(--acc); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: var(--s3); font-size: .9375rem; font-variation-settings: "wght" 600; }
.stat__note { margin-top: var(--s2); font-size: .8125rem; line-height: 1.5; color: var(--fg-soft); }
.stats--night { border-top-color: var(--rule-night); }
.stats--night .stat { border-bottom-color: var(--rule-night); }

/* ------------------------------------------------------ 5. The device — 3D
   A phone, rendered in CSS in real perspective, running a tap-to-pay sequence.
   This is the branded object the site was missing: it shows the product rather
   than describing it, and it is drawn rather than screenshotted because there
   is no shipped app to screenshot and a faked screenshot would be a claim. */
.stage { perspective: 1500px; display: grid; place-items: center; padding-block: var(--s6); }
.stage--rig { position: relative; }

/* Rebuilt 2026-08-06. The previous device was a rotated rectangle with a
   border: at an angle it read as a sticker, because a phone seen in
   three-quarter view shows its *edge*, and that one had none.

   This is a real box. --d is the half-depth, so the body is 2×--d thick, and
   the four side rails are genuine faces placed at ±--d and turned 90°. The
   rails carry a three-stop gradient because that is what a chamfered aluminium
   rail does under a single light source — bright at the chamfer, dark in the
   middle, warm at the far chamfer. Rails are inset from the corners so the
   rounded corners of the front face overhang them and there is no seam.

   It stays drawn rather than screenshotted, and captioned illustrative, because
   there is no shipped app and a faked screenshot would be a capability claim. */
.device {
  --d: 8.5px;                     /* half-depth → 17px of visible thickness */
  --r: 34px;
  position: relative; width: 268px; height: 552px; flex: none;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -19deg)) rotateZ(1.5deg);
  transition: transform 1.2s var(--ease-out);
}
/* Contact shadow. On its own plane and flattened, so it does not tilt with the
   body and betray that the whole thing is drawn. */
.device::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -34px; height: 60px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72), transparent 72%);
  transform: translateZ(calc(var(--d) * -1)) rotateX(84deg);
  pointer-events: none;
}

/* Graphite, not green. With silver rails a green-tinted body reads as plastic;
   a near-neutral graphite with only a trace of the brand hue reads as metal and
   glass, and lets the mint accent on the screen do the colour work. */
.device__face {
  position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(152deg, #2b3234 0%, #14191a 44%, #080d0d 100%);
  transform: translateZ(var(--d));
  box-shadow:
    inset 0 0 0 1px rgba(240,245,243,.34),      /* the chamfer catching light */
    inset 0 1px 0 rgba(240,245,243,.46);
}
.device__back {
  position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(152deg, #0a1610 0%, #050d0a 100%);
  transform: translateZ(calc(var(--d) * -1)) rotateY(180deg);
  box-shadow: inset 0 0 0 1px rgba(34,69,58,.8);
}

/* The four rails — brushed silver, not green.
   A real machined phone rail is not one tone: it is a bright chamfer where the
   bevel catches light, a fast fall to mid grey, a dark core down the middle of
   the band, then a second softer chamfer on the far bevel. Six stops render
   that; three read as a flat grey stripe. The tiny bright line at 4% is the
   chamfer itself, and it is the single detail that makes the edge look
   machined rather than drawn. */
.device__side { position: absolute; background: #6d7a75; }
.device__side--l,
.device__side--r {
  top: var(--r); bottom: var(--r); width: calc(var(--d) * 2);
  background: linear-gradient(90deg,
    #f2f5f4 0%, #e6ebe9 4%, #a8b4af 16%, #6f7d78 38%,
    #3e4a46 62%, #7d8a85 84%, #c8d1cd 96%, #94a09b 100%);
}
.device__side--l { left: calc(var(--d) * -1); transform: rotateY(-90deg); }
.device__side--r { right: calc(var(--d) * -1); transform: rotateY(90deg); }
.device__side--t,
.device__side--b {
  left: var(--r); right: var(--r); height: calc(var(--d) * 2);
  background: linear-gradient(180deg,
    #eef2f0 0%, #dfe5e3 5%, #9faba6 18%, #66736e 40%,
    #38443f 64%, #78857f 86%, #bfc8c4 97%, #8b9691 100%);
}
.device__side--t { top: calc(var(--d) * -1); transform: rotateX(90deg); }
.device__side--b { bottom: calc(var(--d) * -1); transform: rotateX(-90deg); }

/* Antenna bands — the two hairlines across the rail on a real handset. Small,
   and exactly the kind of detail that reads as "photographed" rather than
   "drawn" without anybody consciously noticing it. */
.device__side--l::before, .device__side--l::after,
.device__side--r::before, .device__side--r::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: rgba(20,28,25,.55);
}
.device__side--l::before, .device__side--r::before { top: 96px; }
.device__side--l::after,  .device__side--r::after  { bottom: 118px; }

/* Hardware buttons, machined from the same metal as the rail they sit on. */
.device__btn {
  position: absolute; left: calc(var(--d) * -1 - 2px); width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #dfe5e3 0%, #9aa6a1 22%, #55625d 70%, #8e9a95 100%);
  box-shadow: 0 0 0 .5px rgba(10,16,14,.5);
  transform: translateZ(0);
}
.device__btn--vol { top: 120px; height: 56px; }
.device__btn--vol2 { top: 188px; height: 56px; }
.device__btn--pwr { top: 150px; height: 74px; left: auto; right: calc(var(--d) * -1 - 2px); }

.device__screen {
  position: absolute; inset: 8px; border-radius: calc(var(--r) - 9px); overflow: hidden;
  background: radial-gradient(122% 78% at 50% 0%, #0f2c22 0%, #061510 72%);
  transform: translateZ(calc(var(--d) + 0.5px));
}
/* The sheen rides above the screen, on the glass, not on the body. */
.device__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(122deg, rgba(233,245,239,.13) 0%, transparent 34%, transparent 70%, rgba(127,227,190,.09) 100%);
}
.device__notch {
  position: absolute; top: 8px; left: 50%; width: 76px; height: 19px; border-radius: 12px;
  background: #040c09; z-index: 5;
  transform: translateX(-50%) translateZ(calc(var(--d) + 1px));
  box-shadow: inset 0 -1px 0 rgba(233,245,239,.06);
}
.scr { position: relative; z-index: 2; padding: 44px 20px 20px; color: var(--halide); display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.scr__brand { display: flex; align-items: center; gap: 7px; font-family: var(--f-display); font-size: .8125rem; font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: -.02em; }
.scr__brand svg { width: 15px; height: 15px; color: var(--beam); }
.scr__label { font-family: var(--f-mono); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--halide-soft); margin-top: 24px; }
.scr__amt { font-family: var(--f-mono); font-size: 1.875rem; font-variation-settings: "wght" 600; letter-spacing: -.04em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.scr__merchant { font-size: .75rem; color: var(--halide-soft); margin-top: 4px; }

/* The tap target: concentric rings pulsing outward from a lit core. */
.tapzone { position: relative; margin: auto; width: 138px; height: 138px; display: grid; place-items: center; }
.tapzone__ring { position: absolute; inset: 0; border: 1px solid var(--beam); border-radius: 50%; opacity: 0; }
.js .tapzone__ring { animation: ping 2.8s var(--ease-out) infinite; }
.js .tapzone__ring:nth-child(2) { animation-delay: .55s; }
.js .tapzone__ring:nth-child(3) { animation-delay: 1.1s; }
@keyframes ping { 0% { transform: scale(.42); opacity: .8; } 70% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
.tapzone__core { width: 58px; height: 58px; border-radius: 50%; background: var(--beam); display: grid; place-items: center; color: var(--night); }
.tapzone__core svg { width: 26px; height: 26px; }
/* A ledger inside the screen — used by the settlement and wallet variants,
   where the story is a set of figures rather than a single tap target. */
.scrlist { margin: 16px 0 auto; display: grid; gap: 1px; background: var(--rule-night); border-block: 1px solid var(--rule-night); }
.scrrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; background: #061510; }
.scrrow span { font-family: var(--f-mono); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--halide-soft); }
.scrrow b { font-family: var(--f-mono); font-size: .6875rem; font-variation-settings: "wght" 600; color: var(--halide); font-variant-numeric: tabular-nums; }
.scrrow--tot b { color: var(--beam); }

.scr__foot { border-top: 1px solid var(--rule-night); padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.scr__foot .code { font-size: .5rem; letter-spacing: .13em; }
.pill { font-family: var(--f-mono); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--beam); border: 1px solid var(--beam); padding: 3px 7px; white-space: nowrap; }

/* Cards floating beside the device on the same perspective plane. */
.chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--s3);
  padding: 12px var(--s4); background: rgba(10,26,19,.94); border: 1px solid var(--rule-night);
  color: var(--halide); white-space: nowrap;
  box-shadow: 0 18px 34px -20px rgba(0,0,0,.85);
}
.chip__dot { width: 7px; height: 7px; flex: none; background: var(--beam); }
.chip__t { font-size: .8125rem; font-variation-settings: "wght" 600; }
.chip__s { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--halide-soft); }
.chip--a { top: 12%; left: -2%; }
.chip--b { bottom: 26%; right: -4%; }
.chip--c { bottom: 6%; left: 4%; }
.js .chip { animation: float 7s ease-in-out infinite; }
.js .chip--b { animation-delay: -2.4s; }
.js .chip--c { animation-delay: -4.6s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.rig { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(32px,5vw,84px); align-items: center; }

/* -------------------------------------------------------------- 6. Flow rail */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.flow__step { position: relative; padding: var(--s6) var(--s5) var(--s6) 0; }
.flow__step::before { content: ""; position: absolute; top: -1px; left: 0; width: 34%; height: 2px; background: var(--acc); }
.flow__n { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .16em; color: var(--acc); }
.flow__t { margin-top: var(--s3); font-size: 1.0625rem; font-variation-settings: "wght" 600; }
.flow__b { margin-top: var(--s3); font-size: .9375rem; line-height: 1.6; color: var(--fg-soft); }
.on-night .flow { border-top-color: var(--rule-night); }

/* --------------------------------------------------------------- 7. Newsroom */
.news { display: grid; border-top: 1px solid var(--line); }
.news__item {
  display: grid; grid-template-columns: 132px minmax(0,1fr) 150px; gap: var(--s6);
  align-items: baseline; padding-block: var(--s6);
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: background .28s var(--ease-out), transform .28s var(--ease-out);
}
.news__item:hover { background: var(--paper-alt); transform: translateX(4px); }
.news__tag { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.news__title { font-family: var(--f-display); font-size: clamp(1.125rem, 1.7vw, 1.4375rem); font-variation-settings: "wdth" 104, "wght" 600; letter-spacing: -.024em; line-height: 1.24; }
.news__ex { margin-top: var(--s3); font-size: .9375rem; line-height: 1.6; color: var(--fg-soft); max-width: 68ch; }
.news__date { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em; color: var(--fg-soft); text-align: right; }

.article { max-width: 74ch; }
.article > p { margin-top: var(--s5); font-size: 1.0625rem; line-height: 1.72; color: var(--fg-soft); }
.article h2 { margin-top: var(--s8); font-size: clamp(1.375rem, 2.2vw, 1.875rem); color: var(--fg); }
.article h3 { margin-top: var(--s7); font-size: 1.1875rem; }
.article .source-deck { padding: var(--s4) var(--s5); border-left: 2px solid var(--acc); background: var(--paper-alt); font-size: .9rem; }
.article .source-deck a { color: var(--accent); text-underline-offset: 3px; }
.article ul { margin-top: var(--s5); padding-left: 0; list-style: none; }
.article li { position: relative; padding-left: var(--s5); padding-block: var(--s2); font-size: 1.0625rem; line-height: 1.66; color: var(--fg-soft); }
.article li::before { content: ""; position: absolute; left: 0; top: 15px; width: 10px; height: 2px; background: var(--accent); }
.article blockquote { margin: var(--s7) 0 0; padding-left: var(--s5); border-left: 2px solid var(--accent); font-family: var(--f-display); font-size: 1.25rem; font-variation-settings: "wdth" 104, "wght" 500; line-height: 1.4; letter-spacing: -.02em; }
.article a { color: var(--accent); }

/* ---------------------------------------------------------------- 8. Careers */
.job {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s5);
  align-items: center; padding: var(--s6) 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: transform .28s var(--ease-out), background .28s var(--ease-out);
}
.job:hover { background: var(--paper-alt); transform: translateX(4px); }
.job__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); }
.job__meta span { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.tagline { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); border: 1px solid currentColor; padding: 5px 10px; }

/* ----------------------------------------------------------- 9. Market data */
/* The ticker is a night ground, so it must remap the semantic tokens like any
   other — see DESIGN.md. Without this, anything inheriting colour inside it
   (an animation resolving to `inherit`, a future child that forgets to set its
   own) renders day ink on near-black. That bug shipped once; the remap is the
   fix, not a per-element colour patch. */
.ticker {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--rule-night); background: var(--night-alt);
  --fg: var(--halide);
  --fg-soft: var(--halide-soft);
  --bg: var(--night-alt);
  --line: var(--rule-night);
  --acc: var(--beam);
  --acc-hi: var(--halide);
  --acc-on: var(--night);
  color: var(--fg);
}
.ticker__track { display: flex; width: max-content; }
.js .ticker__track { animation: slide 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s4) var(--s6); border-right: 1px solid var(--rule-night); white-space: nowrap; }
.tick__sym { font-family: var(--f-mono); font-size: .75rem; font-variation-settings: "wght" 600; letter-spacing: .06em; color: var(--halide); }
.tick__px { font-family: var(--f-mono); font-size: .75rem; color: var(--halide-soft); font-variant-numeric: tabular-nums; }
.tick__ch { font-family: var(--f-mono); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.up { color: var(--beam); }
.down { color: #ff8f6b; }

.mkt { width: 100%; border-collapse: collapse; }
.mkt th, .mkt td { text-align: right; padding: var(--s4) var(--s3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mkt th { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); font-weight: 400; }
.mkt th:first-child, .mkt td:first-child { text-align: left; padding-left: 0; }
.mkt td { font-family: var(--f-mono); font-size: .8125rem; color: var(--fg); }
.mkt td:first-child { font-variation-settings: "wght" 600; }
.mkt .sym { color: var(--fg-soft); font-size: .6875rem; margin-left: var(--s2); }
/* `.mkt td` is (0,1,1) and out-specifies the bare `.up`/`.down` at (0,1,0), so
   every change column rendered in plain body colour and a fall looked exactly
   like a rise. Restated at matching specificity — and ground-aware, because
   the night rise/fall pair (#7fe3be / #ff8f6b) is around 1.5:1 on paper and
   would fail the moment this table appeared on a light band. */
.mkt td.up { color: var(--accent); }
.mkt td.down { color: #a8391a; }
.on-night .mkt td.up { color: var(--beam); }
.on-night .mkt td.down { color: #ff8f6b; }
.tablewrap { overflow-x: auto; }
.on-night .mkt th, .on-night .mkt td { border-bottom-color: var(--rule-night); }

/* --------------------------------------------------------------- 10. Partners */
.plogo {
  display: grid; place-items: center; align-content: center; gap: var(--s3); min-height: 138px;
  padding: var(--s5); border: 1px solid var(--line); background: var(--paper); text-align: center;
}
.plogo__mark { font-family: var(--f-display); font-size: 1.0625rem; font-variation-settings: "wdth" 108, "wght" 700; letter-spacing: -.02em; }
.plogo__role { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-soft); }
.plogo--open { border-style: dashed; color: var(--fg-soft); }

/* -------------------------------------------------------------- 11. CTA band */
.cta { position: relative; background: var(--night); color: var(--halide); overflow: hidden; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: linear-gradient(var(--rule-night) 1px, transparent 1px), linear-gradient(90deg, var(--rule-night) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(100% 100% at 12% 50%, #000 0%, transparent 70%);
  mask-image: radial-gradient(100% 100% at 12% 50%, #000 0%, transparent 70%);
}
.cta__in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s7); align-items: center; padding-block: clamp(52px, 6.5vw, 88px); }
.cta__title { font-family: var(--f-display); font-size: clamp(1.625rem, 3vw, 2.5rem); font-variation-settings: "wdth" 108, "wght" 700; letter-spacing: -.038em; max-width: 22ch; line-height: 1.04; }

/* ------------------------------------------------------------------ 12. Misc */
.fact { display: grid; grid-template-columns: 178px minmax(0,1fr); gap: var(--s5); padding-block: var(--s5); border-bottom: 1px solid var(--line); align-items: baseline; }
.fact__k { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-soft); }
.fact__v { font-size: .9375rem; line-height: 1.6; color: var(--fg); }

.note { padding: var(--s5) var(--s6); border-left: 2px solid var(--acc); background: var(--paper-alt); font-size: .9375rem; line-height: 1.62; color: var(--fg-soft); }
.on-night .note { background: var(--night-alt); }

details.faq { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; list-style: none; padding-block: var(--s5); font-size: 1.0625rem; font-variation-settings: "wght" 600; display: flex; justify-content: space-between; gap: var(--s5); align-items: center; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--acc); flex: none; }
details.faq[open] summary::after { content: "\2013"; }
details.faq p { padding-bottom: var(--s5); font-size: .9375rem; line-height: 1.66; color: var(--fg-soft); max-width: 74ch; }

.lede { font-size: clamp(1.125rem, 1.8vw, 1.4375rem); line-height: 1.5; color: var(--fg); max-width: 58ch; }
.mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); } .mt8 { margin-top: var(--s8); }
.center { text-align: center; margin-inline: auto; }

/* ----------------------------------------------------------- 13. Footer extras */
.foot__top { grid-template-columns: 1.4fr repeat(3, 1fr); }
.foot__brand { max-width: 34ch; }
.foot__blurb { margin-top: var(--s5); font-size: .875rem; }
.foot__slogan { margin-top: var(--s5); color: var(--accent); }

/* ==========================================================================
   14. Added 2026-08-06
   ========================================================================== */

/* ------------------------------------------------------- Live-state chip
   The honest part of the live ticker. It reports the feed's actual condition
   rather than decorating the page with a permanent green "LIVE" badge. Four
   states, four colours, and the label is set by live.js, never by the markup. */
.livestate {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-soft); white-space: nowrap;
}
.livestate::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--fg-soft); transition: background .3s var(--ease-out);
}
.livestate[data-state="live"] { color: var(--beam); }
.livestate[data-state="live"]::before { background: var(--beam); }
.js .livestate[data-state="live"]::before { animation: heartbeat 2.2s ease-in-out infinite; }
.livestate[data-state="delayed"] { color: var(--sodium); }
.livestate[data-state="delayed"]::before { background: var(--sodium); }
.livestate[data-state="stale"], .livestate[data-state="connecting"] { color: var(--halide-soft); }
@keyframes heartbeat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127,227,190,.55); }
  60%      { box-shadow: 0 0 0 7px rgba(127,227,190,0); }
}

/* The flash that makes a tick legible as a tick.
   Deliberately animates BACKGROUND, not colour. The first version animated
   `color` and resolved to `inherit` at 100% — which on the ticker's night
   ground meant day-mode ink on near-black, measured at 1.05:1. A tint behind
   the figure is ground-independent: it cannot damage text contrast on either
   ground, and it does not shift layout, so a fast row never jumps. */
@keyframes tickUp   { 0% { background-color: rgba(127,227,190,.30); } 100% { background-color: transparent; } }
@keyframes tickDown { 0% { background-color: rgba(255,143,107,.30); } 100% { background-color: transparent; } }
.js .tick-up   { animation: tickUp .9s var(--ease-out); }
.js .tick-down { animation: tickDown .9s var(--ease-out); }

.ticker__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding: var(--s3) 0;
}

/* ------------------------------------------------------------- The ladder
   From the CAC business-scope one-pager: institutional → merchant → retail.
   This is the page's authored moment, so it gets a rhythm nothing else has —
   a stepped reveal down the tiers, and a rule that draws itself in. */
.ladder { border-top: 1px solid var(--line); }
.ladder__tier {
  display: grid; grid-template-columns: minmax(0, 0.30fr) minmax(0, 0.70fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* The rule that draws itself in as the tier arrives. */
.ladder__tier::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 34%;
  background: var(--acc); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--ease-out);
}
.ladder__tier.is-in::before { transform: scaleX(1); }
.ladder__n {
  font-family: var(--f-mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc);
}
.ladder__t {
  margin-top: var(--s3);
  font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-variation-settings: "wdth" 106, "wght" 700; letter-spacing: -.03em; line-height: 1.1;
}
.ladder__who { margin-top: var(--s3); font-size: .875rem; line-height: 1.55; color: var(--fg-soft); }
.ladder__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s6);
  align-content: start;
}
.ladder__list li {
  position: relative; padding-left: var(--s4); padding-block: 5px;
  font-size: .9375rem; line-height: 1.45; color: var(--fg);
}
.ladder__list li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; background: var(--acc);
}
.ladder__list li i {
  display: block; font-style: normal; font-size: .8125rem;
  color: var(--fg-soft); line-height: 1.4;
}

/* ------------------------------------------------------- Scroll progress
   A hairline, not a bar. Institutional documents tell you where you are. */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 110;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* --------------------------------------------------------- Stat odometer */
.stat__fig { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- The chain
   Adapted from the CAC business-scope one-pager: the origination chain drawn
   as linked nodes, with ChampPay's own position highlighted. Counterparties
   are shown by ROLE, never by name — two entities in the chain carry open
   verification items, and the naming rule in PRODUCT.md stands until an
   agreement is executed and the party agrees to be named. */
.chain { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
.chain__n {
  position: relative; padding: var(--s5) var(--s5) var(--s6);
  border-right: 1px solid var(--line); background: var(--bg);
}
.chain__n:last-child { border-right: 0; }
.chain__n.is-us { background: var(--paper-alt); }
.on-night .chain__n { background: var(--night); }
.on-night .chain__n.is-us { background: var(--night-alt); }
.chain__k { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
.chain__n.is-us .chain__k { color: var(--acc); }
.chain__t { margin-top: var(--s3); font-size: 1rem; font-variation-settings: "wght" 600; line-height: 1.2; }
.chain__b { margin-top: var(--s3); font-size: .8125rem; line-height: 1.5; color: var(--fg-soft); }
/* The arrow between nodes — drawn on the divider, not typed as a character. */
.chain__n:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -5px; width: 9px; height: 9px;
  border-top: 1px solid var(--acc); border-right: 1px solid var(--acc);
  transform: translateY(-50%) rotate(45deg); background: var(--bg); z-index: 1;
}
.on-night .chain__n:not(:last-child)::after { background: var(--night); }

/* ------------------------------------------------------------ Terms table
   A real table, because a clause list read by somebody deciding whether to
   stake their own reputation should be scannable in columns, not buried in
   prose. Three columns: the clause, what it does, why it exists. */
.terms { width: 100%; border-collapse: collapse; }
.terms th {
  text-align: left; font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 400; color: var(--fg-soft);
  border-bottom: 1px solid var(--fg); padding: 0 var(--s5) var(--s3) 0; vertical-align: bottom;
}
.terms td { padding: var(--s5) var(--s5) var(--s5) 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .9375rem; line-height: 1.6; color: var(--fg-soft); }
.terms td:first-child { color: var(--fg); font-variation-settings: "wght" 600; width: 22%; }
.terms tr:last-child td { border-bottom: 0; }

/* Below tablet width a three-column table is no longer a table-shaped visual.
   Each source row becomes a labelled record, preserving semantics in HTML and
   eliminating the one-word-per-line failure seen in the production captures. */
@media (max-width: 700px) {
  .terms { display: block; table-layout: auto; }
  .terms thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .terms tbody { display: grid; gap: var(--s4); }
  .terms tr {
    display: block; padding: var(--s5); border: 1px solid var(--line);
    background: var(--bg);
  }
  .terms td,
  .terms td:first-child {
    display: grid; grid-template-columns: 1fr; gap: var(--s2); width: auto;
    padding: var(--s4) 0; border-bottom: 1px solid var(--line);
    color: var(--fg-soft); overflow-wrap: normal; word-break: normal;
  }
  .terms td:first-child { padding-top: 0; color: var(--fg); font-size: 1.0625rem; }
  .terms td:last-child { padding-bottom: 0; border-bottom: 0; }
  .terms td::before {
    content: attr(data-label); font-family: var(--f-mono); font-size: .5625rem;
    font-variation-settings: "wght" 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--acc);
  }
}

/* Status tags. Deliberately unglamorous: "Not held" is stated in the same
   visual weight as anything else, because the credibility of the whole table
   depends on the negatives not being whispered. */
.tag {
  display: inline-block; white-space: nowrap;
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--line); color: var(--fg-soft);
}
.tag--wip { border-color: var(--acc); color: var(--acc); }
.tag--no { border-color: var(--fg-soft); color: var(--fg-soft); }

/* ------------------------------------------------- Qualifier / two-column
   "What works / what does not" — the honest pair. Used where saying no
   clearly is more useful to the reader than another paragraph of yes. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pair__col { background: var(--bg); padding: var(--s6); }
.on-night .pair__col { background: var(--night); }
.pair__h { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.pair__h .code { color: var(--fg); }
.pair__h .dot { width: 8px; height: 8px; flex: none; background: var(--acc); }
.pair__h .dot--o { background: none; border: 1px solid var(--fg-soft); }
.pair ul { list-style: none; margin: 0; padding: 0; }
.pair li { position: relative; padding-left: var(--s5); padding-block: var(--s3); font-size: .9375rem; line-height: 1.55; color: var(--fg-soft); border-bottom: 1px solid var(--line); }
.pair li:last-child { border-bottom: 0; }
.pair li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 2px; background: var(--acc); }
.pair__col--no li::before { background: none; border-top: 1px solid var(--fg-soft); height: 0; }

@media (max-width: 1000px) {
  .chain { grid-template-columns: 1fr; }
  .chain__n { border-right: 0; border-bottom: 1px solid var(--line); }
  .chain__n:last-child { border-bottom: 0; }
  .chain__n:not(:last-child)::after { top: auto; bottom: -5px; right: 50%; transform: translateX(50%) rotate(135deg); }
  .pair { grid-template-columns: 1fr; }
  .terms td:first-child { width: 34%; }
}

/* --------------------------------------------------- Acceptance console
   Four unequal, front-on product surfaces replace the lone 3D phone on the
   merchant page only. The shared .device remains the dimensional object on
   the three pages where its composition works. Here the subject is the
   system: four acceptance methods entering one account and settlement rail. */
.acceptance-console {
  border: 1px solid var(--line);
  background: var(--night);
  overflow: hidden;
}
.acceptance-console__bar {
  min-height: 48px; padding: var(--s3) var(--s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  border-bottom: 1px solid var(--line); background: var(--night-alt);
}
.acceptance-console__bar .code { color: var(--fg); }
.acceptance-console__state {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-soft);
}
.acceptance-console__state span { width: 7px; height: 7px; background: var(--sodium); }
.acceptance-console__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .82fr);
  grid-template-rows: 1fr 1fr auto;
  gap: 1px; background: var(--line);
}
.acceptance-panel {
  min-width: 0; padding: clamp(20px, 2.3vw, 34px);
  background: var(--night); position: relative;
}
.acceptance-panel--softpos { grid-row: 1 / 3; }
.acceptance-panel--os { grid-column: 1 / 3; }
.acceptance-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
}
.acceptance-panel__head p {
  font-family: var(--f-display); font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-variation-settings: "wdth" 104, "wght" 650; letter-spacing: -.025em;
}
.acceptance-panel__index {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--s2);
  border: 1px solid var(--acc); color: var(--acc);
  font-family: var(--f-mono); font-size: .5625rem; font-variation-settings: "wght" 500;
}
.acceptance-panel__status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--f-mono); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acc);
}
.acceptance-panel__status::before {
  content: ""; width: 6px; height: 6px; background: currentColor;
  transform: scale(1); transform-origin: center;
}
.js .acceptance-console:not(.is-in) .acceptance-panel__status::before { transform: scale(0); }
.acceptance-console.is-in .acceptance-panel__status::before {
  transition: transform .55s var(--ease-out) .42s;
}
.acceptance-panel__copy {
  margin-top: var(--s5); max-width: 62ch;
  font-size: .875rem; line-height: 1.6; color: var(--fg-soft);
}

.softpos-demo {
  min-height: 264px; padding: clamp(24px, 3vw, 42px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: var(--s6); align-items: center;
  border-bottom: 1px solid var(--line);
}
.softpos-demo__label {
  font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-soft);
}
.softpos-demo__amount {
  margin-top: var(--s3); font-family: var(--f-mono);
  font-size: clamp(2.25rem, 4.2vw, 4.4rem); line-height: .96;
  font-variation-settings: "wght" 600; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
}
.softpos-demo__note { margin-top: var(--s4); max-width: 34ch; color: var(--fg-soft); font-size: .8125rem; line-height: 1.55; }
.softpos-demo__tap {
  width: 152px; aspect-ratio: 1; position: relative; display: grid; place-items: center; justify-self: end;
}
.softpos-demo__tap i { position: absolute; inset: calc(var(--ring, 0) * 18px); border: 1px solid color-mix(in srgb, var(--acc) 46%, transparent); }
.softpos-demo__tap i:nth-child(2) { --ring: 1; }
.softpos-demo__tap i:nth-child(3) { --ring: 2; }
.softpos-demo__tap svg { width: 36px; height: 36px; padding: 9px; box-sizing: content-box; color: var(--night); background: var(--acc); z-index: 1; }
.js .acceptance-console.is-in .softpos-demo__tap i { animation: console-signal 2.8s var(--ease-out) infinite; }
.js .acceptance-console.is-in .softpos-demo__tap i:nth-child(2) { animation-delay: .18s; }
.js .acceptance-console.is-in .softpos-demo__tap i:nth-child(3) { animation-delay: .36s; }
@keyframes console-signal {
  0%, 68%, 100% { opacity: .26; transform: scale(.96); }
  18% { opacity: .9; transform: scale(1); }
}

.qr-demo { min-height: 148px; padding-block: var(--s5); display: grid; grid-template-columns: 112px 1fr; gap: var(--s5); align-items: center; }
.qr-demo svg { width: 112px; height: 112px; padding: 9px; color: var(--night); background: var(--halide); }
.qr-demo div { display: grid; gap: 5px; }
.qr-demo .code { color: var(--fg-soft); margin-top: var(--s2); }
.qr-demo b { font-size: .8125rem; font-variation-settings: "wght" 600; }

.proximity-demo { min-height: 148px; padding-block: var(--s5); display: flex; align-items: center; justify-content: center; gap: var(--s4); }
.proximity-demo__phone { width: 54px; height: 92px; border: 1px solid var(--fg-soft); display: grid; place-items: center; }
.proximity-demo__phone i { width: 20px; height: 20px; background: var(--acc); }
.proximity-demo__signal { display: flex; align-items: center; gap: 7px; }
.proximity-demo__signal i { width: 5px; height: 5px; background: var(--acc); opacity: .38; }
.proximity-demo__signal i:nth-child(2) { opacity: .7; }
.proximity-demo__signal i:nth-child(3) { opacity: 1; }

.ops-demo { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ops-demo li { min-width: 0; padding: var(--s4); background: var(--night-alt); display: grid; gap: var(--s2); }
.ops-demo span { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.ops-demo b { font-size: .875rem; font-variation-settings: "wght" 600; color: var(--acc); }
.ops-demo__settle b { color: var(--sodium); }

.settlement-rail {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); background: var(--night-alt);
  border-top: 1px solid var(--line);
}
.settlement-rail::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--acc); transform: scaleX(1); transform-origin: 0 50%;
}
.js .acceptance-console:not(.is-in) .settlement-rail::before { transform: scaleX(0); }
.acceptance-console.is-in .settlement-rail::before { transition: transform 1.15s var(--ease-out) .18s; }
.settlement-rail li { min-width: 0; padding: var(--s5); border-right: 1px solid var(--line); display: grid; gap: var(--s2); }
.settlement-rail li:last-child { border-right: 0; }
.settlement-rail span { font-family: var(--f-mono); font-size: .5625rem; letter-spacing: .14em; color: var(--acc); }
.settlement-rail b { font-family: var(--f-display); font-size: 1rem; font-variation-settings: "wdth" 104, "wght" 650; letter-spacing: -.02em; }
.settlement-rail small { font-size: .75rem; line-height: 1.4; color: var(--fg-soft); }

@media (max-width: 900px) {
  .acceptance-console__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .acceptance-panel--softpos, .acceptance-panel--os { grid-column: 1 / 3; grid-row: auto; }
}
@media (max-width: 620px) {
  .acceptance-console__bar { align-items: flex-start; flex-direction: column; gap: var(--s2); }
  .acceptance-console__grid { grid-template-columns: 1fr; }
  .acceptance-panel--softpos, .acceptance-panel--os { grid-column: auto; }
  .acceptance-panel__head { align-items: flex-start; }
  .acceptance-panel__status { white-space: normal; }
  .softpos-demo { grid-template-columns: 1fr; gap: var(--s4); }
  .softpos-demo__tap { justify-self: center; }
  .qr-demo { grid-template-columns: 88px 1fr; }
  .qr-demo svg { width: 88px; height: 88px; }
  .ops-demo { grid-template-columns: 1fr 1fr; }
  .settlement-rail { grid-template-columns: 1fr; }
  .settlement-rail li { border-right: 0; border-bottom: 1px solid var(--line); }
  .settlement-rail li:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .acceptance-console.is-in .softpos-demo__tap i { animation: none; }
  .acceptance-console .acceptance-panel__status::before { transform: scale(1); transition: none; }
  .acceptance-console .settlement-rail::before { transform: scaleX(1); transition: none; }
}

/* ------------------------------------------------------------ FX / market */
.rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rate { background: var(--bg); padding: var(--s5) var(--s5) var(--s6); }
.on-night .rate { background: var(--night); }
.rate__pair { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
.rate__v {
  margin-top: var(--s3); font-family: var(--f-mono); font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-variation-settings: "wght" 600; letter-spacing: -.03em; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.rate__n { margin-top: var(--s2); font-size: .8125rem; color: var(--fg-soft); line-height: 1.45; }

/* The edge line — a true, quiet infrastructure detail in the footer. */
.edgeline { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; color: var(--fg-soft); }

/* Source attributions are full sentences, so they get mono at reading case
   rather than `.code`, which uppercases and tracks out — fine for a two-word
   label, unreadable across a line naming two publishers and a year. */
.srcnote {
  font-family: var(--f-mono); font-size: .625rem; line-height: 1.7;
  letter-spacing: .01em; color: var(--fg-soft); max-width: 92ch;
}

@media (max-width: 1000px) {
  .ladder__tier { grid-template-columns: 1fr; gap: var(--s5); }
  .rates { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ladder__list { grid-template-columns: 1fr; }
  .rates { grid-template-columns: 1fr; }
  .device { transform: rotateX(6deg) rotateY(-13deg) rotateZ(1deg) scale(.86); }
  /* The floating chips sit on top of the screen at this width and bury the
     amount. They are not lost: the flow strip immediately below carries the
     same three facts as readable text. */
  .chip { display: none; }
  .stage { padding-block: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .ladder__tier::before { transform: scaleX(1); transition: none; }
  .js .livestate[data-state="live"]::before { animation: none; }
  .js .tick-up, .js .tick-down { animation: none; }
}
.foot__navtitle { margin-bottom: var(--s2); color: var(--ink); }
.foot__legal a { color: var(--ink-soft); }

/* ------------------------------------------------------------ 14. Responsive */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .rig { grid-template-columns: 1fr; }
  .sec__head--split { grid-template-columns: 1fr; align-items: start; gap: var(--s5); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .champion-transition__grid { grid-template-columns: 1fr; gap: var(--s5); }
}
.contact-direct { padding: var(--s5); border: 1px solid var(--rule); background: var(--paper-alt); }
.contact-direct a { display: inline-block; margin-top: var(--s3); color: var(--accent); font-size: clamp(1.05rem, 2vw, 1.35rem); font-variation-settings: "wght" 650; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .news__item { grid-template-columns: 1fr; gap: var(--s3); }
  .news__date { text-align: left; }
  .cta__in { grid-template-columns: 1fr; gap: var(--s6); }
  .fact { grid-template-columns: 1fr; gap: var(--s2); }
  .chip--a { left: 0; }
  .chip--b { right: 0; }
}
@media (max-width: 620px) {
  .grid--4 { grid-template-columns: 1fr; }
  .stats, .flow, .foot__top { grid-template-columns: 1fr; }
  .device { width: 236px; height: 486px; }
  .job { grid-template-columns: 1fr; align-items: start; }
  .phead { padding-top: 108px; }
  .phead__title, .phead__lead, .shead, .sec__head--split > div:first-child { text-align: center; margin-inline: auto; }
  .phead .kicker, .shead .kicker, .sec__head--split > div:first-child .kicker { justify-content: center; }
  .phead__actions, .sec__head--split > div:first-child .hero__actions { justify-content: center; }
  .champion-transition__grid > div { text-align: center; }
  .champion-transition__grid .kicker { justify-content: center; }
  .champion-transition__copy .text-link { margin-inline: auto; }
  .system-line { grid-template-columns: 1fr; }
  .system-line > div { text-align: center; padding: var(--s5); }
  .system-line > div:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--rule); margin-right: 0; }
  .chip { padding: 9px var(--s3); }
  .chip__t { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ticker__track, .js .chip { animation: none; }
  .js .tapzone__ring { animation: none; opacity: .28; }
  .device { transition: none; }
}