/* ============================================================
   XQUBE GLOBAL — SERVICE 01 · Bookkeeping & Accounting
   Page-specific styles only. The system lives in main.css.
   The page's spine: title scene -> the problem -> the paired
   panels -> THE RECONCILIATION (pinned) -> scope -> questions
   -> close.
   ============================================================ */

/* ---------- current section marker in the chrome ---------- */
/* EVERY :hover ON THIS PAGE IS POINTER-ONLY.
   A touch that merely BEGINS a scroll still resolves :hover on iOS, and the
   state then latches until the reader taps somewhere else — so an unguarded
   hover rule is not an unused rule on a phone, it is a stuck one. The house
   pattern is css/about.css:1094 and css/service-cross-border.css:526:
   @media (hover: hover). It is applied to all ten of this page's hover rules
   in place, so the desktop cascade order is unchanged. */
.nav-links a.is-here { color: var(--text); }
.nav-links a.is-here::after { transform: scaleX(1); opacity: 0.5; }
@media (hover: hover) {
  .nav-links a.is-here:hover::after { opacity: 1; }
}
.mobile-links a.is-here { color: var(--text); }
.mobile-links a.is-here .mono { color: var(--pink); }

/* ============================================================
   1 · THE TITLE SCENE
   Reuses the film's stage. The service number is the ghost
   numeral; the aphorism is the page's one h1.
   ============================================================ */
#svc-open.scene[data-scene="prologue"] { height: 210vh; }
.svc-open-stage .title-block { max-width: 1060px; }
.svc-h1 {
  font-size: clamp(34px, 5.2vw, 74px);
  max-width: 19ch;
  margin: 0 auto;
}
.svc-sub {
  max-width: 58ch;
  margin: clamp(28px, 4.6vh, 52px) auto 0;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .js .svc-sub {
    opacity: var(--subop, 0);
    transform: translateY(calc((1 - var(--subop, 0)) * 22px));
  }
}
.no-js .svc-sub { opacity: 1; transform: none; }

/* ============================================================
   2 · THE PROBLEM — a reading rest, narrow and unhurried
   ============================================================ */
.prob-h2 { max-width: 16ch; }
.prob-body {
  margin-top: clamp(32px, 5vh, 56px);
  max-width: 62ch;
}
.prob-turn {
  margin-top: var(--s4);
  max-width: 46ch;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--pink);
  border-left: 2px solid var(--pink);
  padding-left: var(--s3);
  text-shadow: 0 0 30px rgba(255, 77, 128, 0.25);
}

/* ============================================================
   3 · WHAT WE DO / WHAT CHANGES FOR YOU — rhymed panels
   ============================================================ */
.pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}
.pair-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  padding: clamp(26px, 3.2vw, 46px);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
@media (hover: hover) {
  .pair-panel:hover {
    border-color: rgba(148, 138, 255, 0.4);
    background: var(--surface-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 22px 54px rgba(0, 0, 0, 0.45);
  }
}
.pair-work::before,
.pair-change::before {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 2px; width: 100%;
  opacity: 0.85;
}
.pair-work::before { background: linear-gradient(90deg, var(--purple), transparent 72%); }
.pair-change::before { background: linear-gradient(90deg, var(--pink), transparent 72%); }
.pair-tag {
  font-size: 10.5px; letter-spacing: 0.24em;
  color: var(--faint);
}
.pair-work .pair-tag { color: var(--purple-soft); }
.pair-change .pair-tag { color: var(--pink-soft); }
.pair-h2 {
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: var(--s2) 0 var(--s3);
}
.pair-panel .body-lg { max-width: 46ch; }
.pair-panel .body-lg + .body-lg { margin-top: var(--s3); }
.pair-change .body-lg:last-child { color: var(--text); }

/* ============================================================
   4 · THE RECONCILIATION — the signature device.
   BOOK and BANK arrive out of register and tie out row by row
   as the reader scrolls; the world behind writes the amount
   still unreconciled, down to 0.00, and the period closes.
   ============================================================ */
#recon.scene { height: 540vh; }
.recon-stage {
  padding: calc(var(--nav-h) + var(--s3)) var(--pad) var(--s4);
  justify-content: center;
}
.ledger {
  position: relative; z-index: 2;
  width: min(980px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(12, 12, 18, 0.62);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 30px 80px rgba(0, 0, 0, 0.5);
  padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px) clamp(14px, 1.8vw, 22px);
  transition: border-color 0.7s ease, box-shadow 0.7s ease;
}
.ledger.closed {
  border-color: rgba(148, 138, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
              0 30px 80px rgba(0, 0, 0, 0.5), 0 0 44px rgba(91, 76, 255, 0.16);
}

.led-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s3);
  padding-bottom: clamp(12px, 1.6vh, 20px);
  border-bottom: 1px solid var(--line);
}
.led-eyebrow {
  font-size: 10.5px; letter-spacing: 0.24em;
  color: var(--faint);
}
.led-var { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.led-var-label { font-size: 9.5px; letter-spacing: 0.24em; color: var(--faint); }
.led-var-figure {
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 500; letter-spacing: -0.01em;
  color: var(--pink);
  text-shadow: 0 0 26px rgba(255, 77, 128, 0.3);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.ledger.closed .led-var-figure {
  color: var(--purple-soft);
  text-shadow: 0 0 26px rgba(91, 76, 255, 0.45);
}

.led-head,
.led-row {
  display: grid;
  grid-template-columns: 74px 1fr 30px 1fr 200px;
  align-items: center;
  gap: 0 clamp(8px, 1.2vw, 16px);
}
.led-head {
  font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--faint);
  padding: clamp(12px, 1.6vh, 18px) 0 clamp(8px, 1vh, 12px);
}
.led-h-book { text-align: right; }
.led-h-bank { text-align: left; }
.led-h-desc { text-align: right; }

.led-row {
  min-height: clamp(36px, 5vh, 52px);
  border-top: 1px solid rgba(255, 255, 255, 0.045);
  opacity: var(--rop, 1);
}
.led-date { font-size: 10.5px; letter-spacing: 0.12em; color: var(--faint); }
.led-book, .led-bank {
  font-weight: 400;
  font-size: clamp(12.5px, 1.32vw, 16px);
  color: var(--mist);
  transition: color 0.45s ease;
}
.led-book { text-align: right; }
.led-bank { text-align: left; color: var(--faint); }
.led-desc {
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--faint);
  text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.led-tick {
  position: relative;
  justify-self: center;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
/* the ticks draw one continuous seam down the middle of the page */
.led-tick::before {
  content: "";
  position: absolute; left: 50%; top: -260%;
  width: 1px; height: 620%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.055);
  transition: background 0.5s ease;
}
.led-row.tied .led-book,
.led-row.tied .led-bank { color: var(--text); }
.led-row.tied .led-tick {
  background: var(--purple);
  box-shadow: 0 0 12px rgba(91, 76, 255, 0.85);
}
.led-row.tied .led-tick::before { background: rgba(148, 138, 255, 0.24); }

.led-total {
  border-top: 1px solid var(--line-strong);
  margin-top: clamp(6px, 1vh, 10px);
}
.led-total .led-date { color: var(--mist); }
.led-total .led-book, .led-total .led-bank { font-size: clamp(13.5px, 1.5vw, 18px); }

.led-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
  margin-top: clamp(12px, 1.8vh, 20px);
  padding-top: clamp(10px, 1.4vh, 16px);
  border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--faint);
}
.led-count em { font-style: normal; color: var(--purple-soft); }
.led-stamp {
  border: 1px solid rgba(148, 138, 255, 0.5);
  border-radius: 3px;
  padding: 5px 12px;
  color: var(--purple-soft);
  opacity: 0;
  transform: rotate(-1.6deg) scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.6, 0.2, 1);
}
.ledger.closed .led-stamp { opacity: 1; transform: rotate(-1.6deg) scale(1); }

/* the scroll-driven register: book pulls in from the left, bank
   from the right, and both settle onto the seam */
@media (prefers-reduced-motion: no-preference) {
  .js .led-row { --rx0: -74px; --rx1: 74px; --rop: 0.16; }
  .js .led-book {
    display: block;
    transform: translate(var(--rx0, 0px), var(--ry0, 0px));
    transition: transform 0.34s cubic-bezier(0.22, 0.6, 0.2, 1);
  }
  .js .led-bank {
    display: block;
    transform: translate(var(--rx1, 0px), var(--ry1, 0px));
    transition: transform 0.34s cubic-bezier(0.22, 0.6, 0.2, 1);
  }
}

/* ============================================================
   5 · SCOPE OF WORK — the length is the argument
   ============================================================ */
.scope-head {
  font-size: clamp(11px, 1.15vw, 13px);
  letter-spacing: 0.24em;
  color: var(--text);
  font-weight: 400;
}
.scope-meta {
  margin-top: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--purple-soft);
}
.scope-list {
  list-style: none;
  margin: clamp(28px, 4.5vh, 48px) 0 0;
  padding: 0;
}
.scope-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.scope-n, .scope-t {
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), color 0.35s ease;
}
/* the worst of the latching hovers: a thumb resting on the list to start a
   scroll used to shove that one line 9px right and leave it there, out of
   line with the other seven, for the rest of the read */
@media (hover: hover) {
  .scope-item:hover .scope-n,
  .scope-item:hover .scope-t { transform: translateX(9px); }
}
.scope-n { font-size: 11.5px; letter-spacing: 0.12em; color: var(--faint); }
@media (hover: hover) {
  .scope-item:hover .scope-n { color: var(--purple-soft); }
}
.scope-t {
  font-size: clamp(16px, 1.6vw, 19.5px);
  line-height: 1.55;
  color: var(--mist);
}
@media (hover: hover) {
  .scope-item:hover .scope-t { color: var(--text); }
}
.js .scope-item:nth-child(2) { transition-delay: 0.03s; }
.js .scope-item:nth-child(3) { transition-delay: 0.06s; }
.js .scope-item:nth-child(4) { transition-delay: 0.09s; }
.js .scope-item:nth-child(5) { transition-delay: 0.12s; }
.js .scope-item:nth-child(6) { transition-delay: 0.15s; }
.js .scope-item:nth-child(7) { transition-delay: 0.18s; }
.js .scope-item:nth-child(8) { transition-delay: 0.21s; }

/* ============================================================
   6 · THE QUESTIONS — THE LEDGER PAGE
   Not a list of questions. A page of a book being written.
   Ruled paper waits, blank. As the reader scrolls, each entry is
   posted: the rule is drawn first, then the question writes on
   after it, word by word, behind a pink nib. A running mono
   counter reads ENTRIES 01/04, and when the fourth is in the
   page is ruled off with the accountant's double rule.
   No card, no pill, no panel — a leaf of a ledger.
   ============================================================ */
#questions.lp-scene { height: 440vh; }
.lp-stage {
  padding: calc(var(--nav-h) + var(--s3)) var(--pad) var(--s4);
  justify-content: center;
}

.lp-sheet {
  --edge: clamp(16px, 2.2vw, 32px);   /* content inset from the page edge  */
  --bleed: calc(var(--edge) * -1);    /* rules run out to that edge        */
  --stub: clamp(80px, 8.4vw, 116px);  /* the DATE / REF column             */
  --gutter: clamp(16px, 2.2vw, 34px);
  position: relative;
  z-index: 2;
  width: min(1000px, 100%);
  padding-left: var(--edge);
}
/* the page is lifted off the number-field behind it without ever
   acquiring an edge of its own — a wash, not a card */
.lp-scrim {
  position: absolute;
  inset: clamp(-84px, -8vh, -34px) 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(74% 64% at 50% 50%,
              rgba(10, 10, 14, 0.94), rgba(10, 10, 14, 0.74) 56%, rgba(10, 10, 14, 0) 100%);
}
/* the outside edge of the leaf */
.lp-edge {
  position: absolute;
  left: 0; top: -4px; bottom: -4px;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent,
              rgba(255, 255, 255, 0.13) 10%, rgba(255, 255, 255, 0.13) 90%, transparent);
}

/* ---------- the page head ---------- */
.lp-top {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s3);
  padding-bottom: clamp(10px, 1.6vh, 18px);
}
.lp-top::after {
  content: "";
  position: absolute;
  left: var(--bleed); right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.lp-title {
  font-size: clamp(10.5px, 1.05vw, 12.5px);
  letter-spacing: 0.22em;
  font-weight: 400;
  color: var(--pink-soft);
  min-width: 0;
}
.lp-tally {
  flex: none;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--faint);
  white-space: nowrap;
}
.lp-tally em { font-style: normal; color: var(--purple-soft); }

/* ---------- the ruled body ---------- */
.lp-entries {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
}
/* the column rule of the ledger, in the editorial pink, drawn
   downward as the page fills */
.lp-entries::before {
  content: "";
  position: absolute;
  left: calc(var(--stub) + var(--gutter) * 0.42);
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
              rgba(255, 77, 128, 0.42), rgba(255, 77, 128, 0.22));
  transform: scaleY(var(--spine, 1));
  transform-origin: top;
}

.lp-entry {
  position: relative;
  display: grid;
  grid-template-columns: var(--stub) 1fr;
  gap: 0 var(--gutter);
  align-items: baseline;
  padding: clamp(13px, 2.4vh, 30px) 0 clamp(15px, 2.7vh, 34px);
}
/* the blank ruling of the paper: it is there before anything is written */
.lp-entry::after {
  content: "";
  position: absolute;
  left: var(--bleed); right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}
/* the posted rule, drawn left to right ahead of the entry */
.lp-rule {
  position: absolute;
  left: var(--bleed); right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(148, 138, 255, 0.62), rgba(148, 138, 255, 0.2) 74%, rgba(148, 138, 255, 0.06));
  transform: scaleX(var(--rule, 1));
  transform-origin: left;
}

.lp-stub {
  display: flex; flex-direction: column; gap: 5px;
  opacity: var(--stubop, 1);
}
.lp-date {
  font-weight: 400;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--mist);
}
.lp-folio {
  font-style: normal;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--faint);
}

.lp-q {
  font-size: clamp(17px, calc(2.05vh + 0.6vw), 29px);
  line-height: 1.38;
  letter-spacing: -0.016em;
  font-weight: 500;
  color: var(--text);
  max-width: 42ch;
}
.lp-w { position: relative; }

/* ---------- the close: the double rule, ruled off ---------- */
.lp-foot {
  position: relative;
  display: flex; justify-content: flex-end; align-items: center;
  margin-top: clamp(12px, 1.8vh, 22px);
  padding-top: clamp(12px, 1.6vh, 18px);
  min-height: 20px;
}
.lp-double {
  position: absolute;
  left: var(--bleed); right: 0; top: 0;
  height: 5px;
  pointer-events: none;
}
.lp-double::before,
.lp-double::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(148, 138, 255, 0.6), rgba(148, 138, 255, 0.22) 76%, rgba(148, 138, 255, 0.08));
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.62s cubic-bezier(0.22, 0.6, 0.2, 1);
}
.lp-double::before { top: 0; }
.lp-double::after { top: 4px; }
.lp-off {
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--purple-soft);
}

/* ---------- the live state: only ever added by JS ---------- */
.lp-sheet.is-live .lp-w {
  opacity: 0.09;
  transition: opacity 0.42s ease, text-shadow 0.42s ease;
}
.lp-sheet.is-live .lp-w.lit { opacity: 1; }
/* the nib: the word under the pen, and the pen itself */
.lp-sheet.is-live .lp-w.ink {
  opacity: 1;
  text-shadow: 0 0 22px rgba(255, 77, 128, 0.45);
}
.lp-sheet.is-live .lp-w.ink::after {
  content: "";
  position: absolute;
  right: -0.13em; top: 0.08em;
  width: 1px; height: 1.02em;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255, 77, 128, 0.9);
}
.lp-sheet.is-live .lp-double::before,
.lp-sheet.is-live .lp-double::after { transform: scaleX(0); }
.lp-sheet.is-live.ruled-off .lp-double::before { transform: scaleX(1); }
.lp-sheet.is-live.ruled-off .lp-double::after { transform: scaleX(1); transition-delay: 0.14s; }
.lp-sheet.is-live .lp-off {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.6, 0.2, 1);
}
.lp-sheet.is-live.ruled-off .lp-off {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}

/* ============================================================
   7 · CLOSE
   ============================================================ */
.close-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.close .cta-row { margin-top: var(--s4); }
.close-chips { justify-content: flex-start; margin-top: var(--s5); }
.close-head {
  font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--faint);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.sib {
  display: grid;
  grid-template-columns: 52px 1fr 18px;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  transition: padding-left 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
@media (hover: hover) {
  .sib:hover { padding-left: 8px; }
}
.sib-num { font-size: 11.5px; letter-spacing: 0.1em; color: var(--faint); transition: color 0.3s ease; }
.sib-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--mist); transition: color 0.3s ease; }
.sib-arrow {
  font-size: 14px; color: var(--faint);
  transform: translateX(-4px);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1), color 0.3s ease;
}
@media (hover: hover) {
  .sib:hover .sib-num, .sib:hover .sib-arrow { color: var(--purple-soft); }
  .sib:hover .sib-name { color: var(--text); }
  .sib:hover .sib-arrow { transform: translateX(0); }
}
/* these three are tap targets, so touch keeps the feedback — but only the
   colour half of it. The padding-left slide is a layout animation and stays
   on the pointer; :active is a press, not a latch, so nothing can stick. */
.sib:active .sib-num, .sib:active .sib-arrow { color: var(--purple-soft); }
.sib:active .sib-name { color: var(--text); }
.sib:active .sib-arrow { transform: translateX(0); }

/* ============================================================
   responsive — pinned scenes go static; nothing scrolls sideways
   ============================================================ */
@media (max-width: 1100px) {
  .led-head, .led-row { grid-template-columns: 68px 1fr 26px 1fr 150px; }
}

@media (max-width: 980px) {
  #svc-open.scene[data-scene="prologue"] { height: auto; }
  .svc-h1 { font-size: clamp(30px, 8vw, 44px); max-width: 100%; }

  /* THE RECONCILIATION FLOWS INSTEAD OF PINNING — BUT IT STILL PLAYS.
     The stage stays unpinned: a ~610px card in a ~700px phone stage leaves no
     room to pin anything without the fit guard tearing it out again on the
     first small handset, and a pinned stage clips whatever it cannot fit.
     What used to be here as well was a FREEZE — --rx0/--rx1 forced to 0 and
     --rop to 1 — which, together with the width test in the scene function,
     meant the page's signature device did not exist below 980px: the ledger
     was already tied and closed before the reader ever reached it.
     Now only the SCALE changes. js/service-bookkeeping.js drives the same
     choreography from where the card sits on the screen rather than from a
     pinned stage's progress, so these are just the resting values it starts
     from, sized for a ~340px card: a 74px throw would carry a money column
     clean off the page, 26px reads as the same gesture at this width.
     --rop is deliberately NOT restated — the rows inherit the desktop 0.16 so
     the arrival is identical, and anyone who asks for stillness still gets
     .led-row { opacity: 1 } from the reduced-motion block below. */
  #recon.scene { height: auto; }
  .recon-stage {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--section-gap) var(--pad) 0;
  }
  .js .led-row { --rx0: -26px; --rx1: 26px; }

  /* The ledger page flows instead of pinning — four questions at
     clamp(18px,5vw,23px) wrap to ~540px of sheet, which no phone stage can
     hold. It is scrubbed in flow instead: each entry is written as it crosses
     the screen, driven from its own position rather than the section's. */
  #questions.lp-scene { height: auto; }
  .lp-stage {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--section-gap) var(--pad) 0;
  }
  .lp-sheet { margin: 0 auto; }
  .lp-q { font-size: clamp(19px, 2.9vw, 26px); max-width: 100%; }

  .pair-grid { grid-template-columns: 1fr; }
  .pair-panel .body-lg { max-width: 62ch; }
  .close-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* THE DESCRIPTION AND DATE ARE CLIENT CONTENT, NOT ORNAMENT.
     These two blocks used to display:none the DESCRIPTION column below
     760px and the DATE column below 520px, which deleted eight
     descriptions ("Client deposit", "Card processor payout", "Payroll
     run", "Vendor payment", "Merchant fees" ...) and eight dates from
     every phone. The ledger is the page's evidence; a narrow screen is a
     reason to restack it, never a reason to throw half of it away.
     So: the two money columns keep the top line, and the description
     drops onto its own line underneath, where it still reads. */
  .led-head, .led-row {
    grid-template-columns: 58px 1fr 24px 1fr;
    grid-template-areas: "date book tick bank" "desc desc desc desc";
    row-gap: 1px;
  }
  .led-h-date, .led-date { grid-area: date; }
  .led-h-book, .led-book { grid-area: book; }
  .led-h-dot,  .led-tick { grid-area: tick; }
  .led-h-bank, .led-bank { grid-area: bank; }
  .led-h-desc, .led-desc {
    grid-area: desc;
    text-align: left;
    font-size: 10px;
    color: var(--faint);
    padding-left: 2px;
    /* the base rule truncates this column with an ellipsis to protect the
       desktop grid. On its own full-width line there is nothing to protect,
       and an ellipsis on approved copy is still copy lost — let it wrap. */
    white-space: normal;
  }
  .led-top { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .led-var { align-items: flex-start; }
  .led-foot { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

@media (max-width: 680px) {
  /* the stub folds onto one line above the entry and the column rule
     becomes the page's margin rule */
  .lp-top { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .lp-entry {
    grid-template-columns: 1fr;
    gap: 10px 0;
    align-items: start;
  }
  .lp-stub { flex-direction: row; align-items: baseline; gap: 14px; }
  .lp-entries::before { left: calc(var(--bleed) + 6px); }
  .lp-q { font-size: clamp(18px, 5vw, 23px); }
}

@media (max-width: 520px) {
  .svc-open-stage .chapter-line { font-size: 10px; letter-spacing: 0.14em; }
  /* keep the date — it moves up beside the description rather than going */
  .led-head, .led-row {
    grid-template-columns: 46px 1fr 20px 1fr;
    grid-template-areas: "date book tick bank" "desc desc desc desc";
  }
  .led-h-date, .led-date { font-size: 9px; }
  .scope-item { grid-template-columns: 40px 1fr; }
  .close .cta-row .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   statics — no JS and reduced motion get the whole page
   ============================================================ */
.no-js .led-book, .no-js .led-bank { transform: none; color: var(--text); }
.no-js .led-var-figure {
  color: var(--purple-soft);
  text-shadow: 0 0 26px rgba(91, 76, 255, 0.45);
}
.no-js .led-tick { background: var(--purple); }
.no-js .led-tick::before { background: rgba(148, 138, 255, 0.24); }
.no-js .led-stamp { opacity: 1; transform: rotate(-1.6deg); }
.no-js .ledger { border-color: rgba(148, 138, 255, 0.45); }
.no-js .recon-stage { padding-top: var(--section-gap); }

/* the ledger page with no JS: every entry already posted, page ruled off.
   Nothing here is hidden — the four questions are plain, full-opacity text. */
.no-js .lp-stage { padding-top: var(--section-gap); }
.no-js .lp-rule { transform: none; }
.no-js .lp-entries::before { transform: none; }
.no-js .lp-stub { opacity: 1; }
.no-js .lp-double::before, .no-js .lp-double::after { transform: none; }
.no-js .lp-off { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .svc-sub { opacity: 1; transform: none; }
  .led-row { opacity: 1; }
  .led-book, .led-bank { transform: none; color: var(--text); }
  .led-tick { background: var(--purple); }
  .led-tick::before { background: rgba(148, 138, 255, 0.24); }
  .led-stamp { opacity: 1; transform: rotate(-1.6deg); }
  .ledger { border-color: rgba(148, 138, 255, 0.45); }
  .recon-stage { padding-top: var(--section-gap); }
  .scope-item, .sib { transition: none; }

  /* the ledger page, already written and ruled off */
  .lp-stage { padding-top: var(--section-gap); }
  .lp-rule, .lp-entries::before { transform: none; }
  .lp-stub { opacity: 1; }
  .lp-sheet .lp-w, .lp-sheet.is-live .lp-w { opacity: 1; text-shadow: none; }
  .lp-sheet.is-live .lp-w.ink::after { display: none; }
  .lp-sheet .lp-double::before, .lp-sheet .lp-double::after,
  .lp-sheet.is-live .lp-double::before, .lp-sheet.is-live .lp-double::after { transform: none; }
  .lp-sheet .lp-off, .lp-sheet.is-live .lp-off { opacity: 1; transform: none; }
}


/* ============================================================
   GLASS, COSTED FOR A PHONE (page-scoped)
   css/main.css flattens its OWN glass components below 980px, but it cannot
   reach the devices this page declares. backdrop-filter re-blurs everything
   behind an element on every frame it moves, and these sit inside a
   scrolling film — it is the most expensive thing a handset does here.

   Blur removed below 980px. Where the surface was too sheer to survive
   without it (var(--surface) is 3.5% white) an opaque base is added as
   background-COLOR, not background, so any ruled gradient painted on top
   of it is left intact.
   ============================================================ */
@media (max-width: 980px) {
  .pair-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--glass-flat);
  }
  .ledger {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* the blur was doing more than costing frames: at 62% it was also what
       stopped the number-field reading THROUGH the card. Without it the world
       behind is sharp, and #recon runs 'carry' at full strength — a field of
       figures moving directly behind a table of figures. Opaque enough that
       the ledger's own numbers are the only ones on it. */
    background-color: rgba(12, 12, 18, 0.9);
  }
}