/* ============================================================
   NOBL — HOW IT WORKS
   Page-scoped styles. Everything shared lives in
   tokens / base / components — nothing here leaks to other pages.

   The page is a sequence, so it is built as one: a spine runs
   down the four steps, the four owners drop onto a single record,
   and the pay section resolves into a statement. Gold appears
   only where money does.
   ============================================================ */




/* ------------------------------------------------------------
   1. THE PROCESS — page opener

   No hero canvas: the home page owns that. This opens on the
   claim, with the coverage map beside it, and lands on the rail —
   so the first screen carries the promise, the product, and the
   numbers behind it.
   ------------------------------------------------------------ */

.proc {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--stroke);
  padding-block: clamp(64px, 7vw, 104px);
}

/* Same dot field as the home hero, so the two openers are clearly
   the same house — masked to the top-left so it never fights the
   map or the rail. */
.proc::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11,13,15,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 58% 68% at 14% 6%, #000, transparent);
          mask-image: radial-gradient(ellipse 58% 68% at 14% 6%, #000, transparent);
  pointer-events: none;
}
.proc > .container { position: relative; }

.proc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 58px;
  align-items: center;
}

/* Stepped down from the full-width 72px: a headline sharing the row
   with a visual has to sit at a size that doesn't wrap five times. */
.proc__title {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1.0;
  margin-bottom: 24px;
}
.proc__title span { display: block; }

/* The middle clause is the one the reader is being sold — it is
   the only line on this page set in the accent. */
.proc__em { color: var(--accent); }

.proc__sub { max-width: 40ch; }

.proc__rail { margin-top: clamp(50px, 6vw, 78px); }
/* Same card as the home rail — #FCFCFD, dimmed off white. The hero
   ground drops to --bg-deep under it so the lift reads the same here
   as it does there; at --s2 a card this pale has nowhere to lift to. */
.proc__rail .rail__item { background: #FCFCFD; }



/* --- the market scorecard ---------------------------------------

   NOBL's own instrument: the grade a territory earns before anyone
   knocks it. The same dark product surface as the OS mock on the
   home page — a Smoke panel on a light hero — with the territory
   card over it the way a selection panel sits over a report in
   NOBL OS.

   Illustrative. Riverside is not a real place and no competitor is
   named; the structure — grade /100, competition /60, offer /40,
   scored providers — is the real scorecard's.
   ---------------------------------------------------------------- */

/* The outer box only positions; it must not clip, because the card
   hangs off its corner. The window inside carries the surface. */
.score {
  color: var(--on-dark-list);
  position: relative;
}
/* A dark surface owns its own text colour. */
.score__win {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--smoke);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 44px 70px -40px rgba(11,13,15,0.6),
              0 4px 10px -4px rgba(11,13,15,0.18);
}

.score__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
}
.score__dots { display: flex; gap: 5px; flex: none; }
.score__dots i { width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--bw-14); }
.score__path {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.score__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent-fill);
  flex: none;
}
.score__live i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-fill);
  animation: scoreBlip 2.6s infinite;
}
@keyframes scoreBlip { 0%, 72%, 100% { opacity: 1 } 84% { opacity: .2 } }

.score__body { padding: 22px 22px 18px; }
.score__body p { margin: 0; }

/* --- the grade --- */
.score__label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.score__big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 9px !important;
}
.score__num,
.score__letter {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
}
/* Three digits' worth, so the layout doesn't jog as it counts. */
.score__num { min-width: 2ch; }
.score__of {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  color: var(--on-dark-mono);
}
/* Gold is the earnings signal — the grade IS the market's earning
   power, so it takes gold with the card's score and its flag. */
.score__letter { color: var(--gold); margin-left: 6px; }

/* --- the four parts --- */
.score__parts {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.score__part {
  display: grid;
  grid-template-columns: 20px 104px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--bw-08);
}
.score__n {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-chip);
  color: var(--on-dark-mono);
}
.score__pname {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-dark-list);
  white-space: nowrap;
}
.score__track {
  height: 3px;
  border-radius: var(--r-full);
  background: var(--bw-10);
  overflow: hidden;
}
.score__track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent-fill);
  transition: width 1.1s var(--ease-out);
}
/* Fills off the reveal main.js already performs — one trigger. */
.score[data-reveal="in"] .score__track i { width: calc(var(--pct, 0) * 1%); }
.score__part:nth-child(1) .score__track i { transition-delay: .45s; }
.score__part:nth-child(2) .score__track i { transition-delay: .6s; }
.score__val {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-chip);
  text-align: right;
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.score__val em { font-style: normal; color: var(--on-dark-mono); }
.score__part--info .score__val { color: var(--on-dark-mono); }

/* --- who else sells here --- */
.score__isps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  /* the card's berth: tall enough that it never rides up over the
     parts above, whatever the fonts do */
  min-height: 176px;
}
.score__isp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 8px;
  align-items: center;
  gap: 10px;
  /* Dividers span the panel; the content stops short of the card,
     so the rows run under the glass without anything being hidden. */
  padding: 9px 240px 9px 0;
  border-top: 1px solid var(--bw-08);
}
.score__isp-name {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--on-dark-list);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.score__chip {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-meta);
  border: 1px solid var(--bw-18);
  border-radius: var(--r-button);
  padding: 4px 7px 3px;
  white-space: nowrap;
}
/* scored vs. not — the real card's ● / ○ */
.score__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--bw-25);
}
.score__dot--on {
  background: var(--accent-fill);
  box-shadow: 0 0 7px rgba(91,157,181,0.5);
}

/* --- the territory card ----------------------------------------

   Glass over the scorecard, the way a real selection panel sits
   over a report. Non-interactive: the actions are spans, the panel
   is one role="img".

   Gold appears here on the "top market" flag and the score. That is a
   widening of the rule — gold was payout-only — but a top market and
   its score ARE the earnings signal, which is the same thing one step
   earlier. It stays off everything else on this card.
   ---------------------------------------------------------------- */

.mapcard {
  position: absolute;
  /* Past the corner, so it reads as its own object over the report
     rather than a region of it. */
  right: -28px; bottom: -28px;
  width: 254px;
  padding: 14px 15px 15px;
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,0.16);
  /* Near-opaque: half of it sits on the light hero ground now, and a
     translucent card would come out two colours. */
  background: rgba(12,17,23,0.95);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
          backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.7),
              0 8px 18px -8px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.07);
  color: var(--bg);
  opacity: 0;
  animation: mapCard .6s var(--ease-out) 1.9s forwards;
}
/* Browsers without backdrop-filter get an opaque panel rather than a
   transparent one over the rows. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mapcard { background: rgba(9,14,19,0.94); }
}
@keyframes mapCard {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.mapcard p { margin: 0; }

.mapcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px !important;
}
.mapcard__id {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-meta);
}
.mapcard__flag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212,168,90,0.15);
  border: 1px solid rgba(212,168,90,0.42);
  border-radius: var(--r-button);
  padding: 5px 8px 4px;
  white-space: nowrap;
  flex: none;
}

.mapcard__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mapcard__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 23px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mapcard__score { flex: none; text-align: right; }
.mapcard__score b {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 23px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mapcard__score i {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin-top: 4px;
}

.mapcard__meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-dark-body);
  margin-top: 8px !important;
}

.mapcard__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent-fill);
  margin-top: 11px !important;
}
.mapcard__status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-fill);
  flex: none;
}

.mapcard__actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px !important;
}
.mapcard__btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  padding: 9px 13px;
  border-radius: var(--r-button);
  border: 1px solid var(--bw-25);
  color: var(--bg);
  white-space: nowrap;
}
.mapcard__btn--go {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--text);
}

/* The page gutter is 32px; a 28px overhang leaves the card kissing the
   screen edge on mid-width screens. Hang it less until there's room. */
@media (max-width: 1260px) {
  .mapcard { right: -14px; }
}
@media (max-width: 1080px) {
  .proc__grid { grid-template-columns: 1fr; gap: 44px; }
  .proc__title { max-width: 18ch; }
  .proc__sub { max-width: 52ch; }
}
@media (max-width: 900px) {
  .proc__title { max-width: none; }
  .proc__rail { margin-top: 40px; }

  /* On a phone the card stops floating and takes its own row under
     the scorecard, so nothing sits behind glass at 375px. */
  .score__body { padding: 16px 16px 4px; }
  .score__isps { min-height: 0; }
  .score__isp { padding-right: 0; }
  .mapcard {
    position: static;
    width: auto;
    margin: 14px 0 0;
  }
  .mapcard { padding: 12px 13px 13px; }
  .mapcard__name, .mapcard__score b { font-size: 21px; }
  .mapcard__head { margin-bottom: 9px !important; }
  .mapcard__meta { font-size: 11.5px; margin-top: 7px !important; }
  .mapcard__status { margin-top: 9px !important; }
  .mapcard__actions { margin-top: 11px !important; }
  .mapcard__btn { padding: 9px 11px 8px; }
}


/* ------------------------------------------------------------
   2. THE FOUR STEPS

   One row per step: node, then title, then what the step actually
   produces. Three columns rather than a narrow left rail — a
   two-column timeline leaves the right half of a 1240px page
   empty, which is exactly the failure this layout avoids.
   ------------------------------------------------------------ */

.steps {
  --spine-col: 72px;
  --node: 24px;
  --card-pad: 32px;
  position: relative;
}

/* Boxes, not hairline rows — the same card the home stepper and the
   pillars use, stacked down the spine with the standard card gap. */
.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-card);
}

.steps__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--spine-col) minmax(0, 1fr);
  align-items: start;
}

/* Off-white at rest; lifts to plain white once the journey reaches it.
   The colour stays in the spine — four blue-outlined boxes read as
   loud, and the row is meant to be read, not scanned. */
.steps__card {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.5fr);
  gap: 0 var(--gap-col);
  padding: var(--card-pad) 36px calc(var(--card-pad) + 2px);
  background: var(--s2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  transition: background var(--d-state), border-color var(--d-state);
}
.steps__row[data-reached="true"] .steps__card {
  background: var(--bg);
  border-color: var(--stroke-strong);
}
/* Step 04 is the payout — its box arrives in gold, like the home
   stepper's. */
.steps__row--paid[data-reached="true"] .steps__card { border-color: var(--gold-line); }

/* --- the spine ---------------------------------------------
   Anchored in JS to the first and last node centres, so it
   starts and stops exactly on the journey — never overshooting
   past step 04, which is where the journey ends.
   ------------------------------------------------------------ */

.steps__spine,
.steps__fill {
  position: absolute;
  left: calc(var(--node) / 2);
  width: 1px;
  top: var(--spine-top, 0px);
  transform: translateX(-0.5px);
  pointer-events: none;
}
.steps__spine {
  height: var(--spine-len, 0px);
  background: var(--stroke);
}
.steps__fill {
  height: var(--fill-len, 0px);
  background: linear-gradient(180deg,
              var(--accent) 0%,
              var(--accent) 62%,
              var(--gold) 100%);
  transition: height .85s var(--ease-out);
}

/* --- nodes -------------------------------------------------- */

.steps__node {
  width: var(--node);
  height: var(--node);
  /* centred on the STEP label's line inside the card */
  margin-top: calc(var(--card-pad) - 3px);
  border-radius: 50%;
  border: 1px solid var(--stroke-strong);
  background: var(--bg);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  transition: border-color var(--d-state), box-shadow var(--d-state);
}
/* Stem from the node into its card, so the dot belongs to the box.
   Takes the step's state, like the home stepper's stems. */
.steps__node::after {
  content: "";
  position: absolute;
  left: 100%; top: 50%;
  width: calc(var(--spine-col) - var(--node));
  height: 1px;
  background: var(--stroke);
  transition: background var(--d-state);
}
.steps__row[data-reached="true"] .steps__node::after { background: var(--accent-line); }
.steps__row--paid[data-reached="true"] .steps__node::after { background: var(--gold-line); }
.steps__node i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rule);
  transition: background var(--d-state), transform var(--d-state);
}
.steps__row[data-reached="true"] .steps__node {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(62,107,135,0.08);
}
.steps__row[data-reached="true"] .steps__node i { background: var(--accent); }

/* Step 04 is the payout. Same gold the stepper, the CTA and the
   statement's net line use — money, and only money. */
.steps__row--paid[data-reached="true"] .steps__node {
  border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(212,168,90,0.14), 0 0 20px -3px rgba(212,168,90,0.5);
}
.steps__row--paid[data-reached="true"] .steps__node i { background: var(--gold); }

/* --- row content -------------------------------------------- */

.steps__num {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--body);
  margin: 0 0 14px;
}
.steps__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: var(--t-h2-minor);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  margin: 0;
  text-wrap: balance;
}

.steps__body {
  font-size: var(--t-intro);
  line-height: var(--lh-intro);
  color: var(--body);
  margin: 0;
  max-width: 54ch;
  text-wrap: pretty;
}


@media (max-width: 900px) {
  .steps { --spine-col: 40px; --node: 20px; --card-pad: 22px; }
  .steps__card {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--card-pad) 20px 24px;
  }
  .steps__detail { margin-top: 16px; }
  .steps__title { font-size: 26px; }
  .steps__body { font-size: var(--t-body); }
  .tagset { margin-top: 18px; }
}


/* ------------------------------------------------------------
   3. WHO DOES WHAT — four roles, one record

   The headline is the diagram. Four owners, four hairlines onto
   one bus, one record underneath. The record strip carries the
   OS widget's 5px radius so it reads as the software itself.
   ------------------------------------------------------------ */

/* --- the legend: the copy --- */
.roles__legend {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card);
}
.role {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: var(--pad-card-sm);
  display: flex;
  flex-direction: column;
}
.role__owner {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.role__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: var(--tr-display);
  margin: 0 0 12px;
}
.role__body {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 1080px) {
  .roles__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .roles__legend { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   4. THE REP EXPERIENCE
   ------------------------------------------------------------ */

/* Four boxes, not one bordered table with 1px dividers. Same card as
   the role legend above it and the steps before that — separate
   objects on the section's ground, at the standard card gap. */
.rep {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card);
}
.rep__item {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 32px 32px 34px;
}
/* The numerals are a real sequence — 01 through 04 is how a rep meets
   these — so they keep their own line above the rule, the way the
   step numbers do. */
.rep__idx {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  color: var(--accent);
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--stroke);
}
.rep__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: var(--t-card-title);
  line-height: 1.2;
  letter-spacing: var(--tr-display);
  color: var(--text);
  margin: 0 0 12px;
}
.rep__body {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .rep { grid-template-columns: 1fr; }
  .rep__item { padding: 24px 24px 26px; }
  .rep__idx { margin-bottom: 16px; padding-bottom: 14px; }
}


/* ------------------------------------------------------------
   5. HOW YOU GET PAID

   Four claims and the statement they produce, side by side.
   Each claim owns its operator, so the column reads as the
   arithmetic: base, multiplier, override, clawback, net.
   Hovering a claim lights the line it creates.
   ------------------------------------------------------------ */

.pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--gap-col-lg);
  align-items: start;
}
.pay .sec-head { margin-bottom: 46px; }
.pay__sub { max-width: 48ch; }

.pay__list { list-style: none; margin: 0; padding: 0; }

.pay__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--stroke);
  transition: opacity var(--d-state);
}
.pay__row:last-child { border-bottom: 1px solid var(--stroke); }

/* When one claim is being read, the others step back rather than
   the active one lighting up — no new colour, just focus. */
.pay__list[data-focus] .pay__row { opacity: 0.4; }
.pay__list[data-focus] .pay__row.is-on { opacity: 1; }

.pay__op {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  border: 1px solid var(--stroke);
  border-radius: var(--r-full);   /* a real disc, not a chip */
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  transition: border-color var(--d-state), background var(--d-state);
}
.pay__row.is-on .pay__op { border-color: var(--accent); background: rgba(62,107,135,0.07); }

.pay__title {
  font-size: var(--t-card-title);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  color: var(--text);
  margin: 7px 0 9px;
}
.pay__body {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
}

/* --- the statement ------------------------------------------ */

/* A dark surface owns its own text colour. These panels used to sit
   inside .section--dark and inherit a light colour from it; now that
   the sections around them are light, anything inside without an
   explicit colour falls through to near-black ink on near-black. */
.stmt {
  color: var(--on-dark-list);
  position: sticky;
  top: calc(var(--header-h) + 32px);
  background: var(--text);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 50px 90px -46px rgba(11,13,15,0.6);
}

.stmt__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
}
.stmt__dots { display: flex; gap: 5px; flex: none; }
.stmt__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bw-14); }
.stmt__path {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stmt__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent-fill);
  flex: none;
}
.stmt__live i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-fill); }

.stmt__lines { margin: 0; padding: 8px 20px 4px; }

.stmt__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--bw-08);
  transition: opacity var(--d-state);
}
.stmt__line dt {
  font-size: var(--t-body);
  color: var(--on-dark-list);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stmt__line dt em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.stmt__line dd {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: var(--tr-display);
  color: var(--bg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stmt__line--neg dd { color: var(--on-dark-meta); }

/* The net is the only gold on the page's light half — it is the
   number the whole section exists to explain. */
.stmt__line--net {
  border-bottom: 0;
  padding-top: 24px;
  margin-top: 4px;
  border-top: 1px solid var(--bw-18);
}
.stmt__line--net dd { color: var(--gold); font-size: 30px; }
.stmt__line--net dt { color: var(--bg); font-weight: 600; }

.stmt__lines[data-focus] .stmt__line { opacity: 0.32; }
.stmt__lines[data-focus] .stmt__line.is-lit,
.stmt__lines[data-focus] .stmt__line--net { opacity: 1; }

.stmt__foot {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--bw-08);
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .pay { grid-template-columns: 1fr; gap: 48px; }
  .stmt { position: static; }
}
@media (max-width: 620px) {
  .stmt__line dd { font-size: 19px; }
  .stmt__line--net dd { font-size: 26px; }
}



/* ------------------------------------------------------------
   REDUCED MOTION
   Nothing on this page may hide content behind an animation.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .score__live i { animation: none; }
  .score__track i { transition: none; }
  .mapcard { animation: none; opacity: 1; }
  .steps__fill { transition: none; }
  .faq__a { transition: none; }
  .pay__row, .stmt__line { transition: none; }
}