/* Hisaab — the graphics.

   Four built pieces, all inline SVG or positioned DOM, no libraries:
     .heap   the owner's reality - every artifact a payout actually arrives in,
             overlapping, with the one contradiction on top
     .iso    the isometric stack: what happens to the file, layer by layer
     .vs     governed against ungoverned, on the dark ground
     .surf   what comes back, as a tabbed set of real surfaces

   Everything animates on entry and then stops. Nothing loops forever except the
   one scanning line in .iso, which is the only thing on either page that is
   still working while you read. */

/* The heap now lives with the record it compiles into - see section 5. */

/* ---- 2. the isometric stack -------------------------------------------- */

.iso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.iso__art { position: relative; }
.iso__svg { width: 100%; height: auto; display: block; overflow: visible; }

.iso__plate { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
.iso__plate .top { fill: #FFFFFF; stroke: rgba(20,25,23,.30); stroke-width: 1.1; }
.iso__plate .sideL { fill: #EFEDE7; stroke: rgba(20,25,23,.30); stroke-width: 1.1; }
.iso__plate .sideR { fill: #E1DED6; stroke: rgba(20,25,23,.30); stroke-width: 1.1; }
.iso__plate .chip { fill: #F2F0EA; stroke: rgba(20,25,23,.18); stroke-width: .9; }
/* the layer being explained lifts and takes the accent */
.iso__plate.is-on { transform: translateY(-10px); }
.iso__plate.is-on .top { fill: #FFF6F1; stroke: var(--accent); stroke-width: 1.6; }
.iso__plate.is-on .sideL { fill: #FBE4D8; stroke: var(--accent); stroke-width: 1.6; }
.iso__plate.is-on .sideR { fill: #F6D5C4; stroke: var(--accent); stroke-width: 1.6; }
.iso__plate.is-on .chip { fill: #FBDCCB; stroke: rgba(241,84,18,.5); }

.iso__floor line { stroke: rgba(20,25,23,.11); stroke-width: 1; }
.iso__drop { stroke: rgba(20,25,23,.26); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.iso__node { fill: #CFCBC2; }
.iso__node.is-on { fill: var(--accent); }
.iso__seed { fill: #FFFFFF; stroke: rgba(20,25,23,.28); stroke-width: 1; }

.iso__call { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.iso__call .k { fill: #9A968C; }
.iso__call .v { fill: var(--ink); font-size: 12.5px; letter-spacing: .08em; }
.iso__call.is-on .k { fill: var(--accent); }
.iso__tie { stroke: rgba(20,25,23,.22); stroke-width: 1; fill: none; }
.iso__tie.is-on { stroke: var(--accent); }

/* one scanning pass down the stack, the only thing still working as you read */
.iso__scan { fill: var(--accent); opacity: .5; }
@keyframes iso-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .55; } 88% { opacity: .55; } 100% { transform: translateY(232px); opacity: 0; } }
.js .iso.is-in .iso__scan { animation: iso-scan 3.4s cubic-bezier(.4,0,.6,1) infinite; }

/* the steps beside it */
.iso__steps { list-style: none; margin: 0; padding: 0; }
.iso__step { padding: 20px 0 20px 20px; border-left: 2px solid var(--line-2); cursor: pointer; transition: border-color .3s ease; }
.iso__step.is-on { border-left-color: var(--accent); }
.iso__step h3 { font-size: 21px; margin: 12px 0 8px; transition: opacity .3s ease; }
.iso__step p { font-size: 15px; margin: 0; }
/* Collapsing a step is only safe while the driver is there to expand it. Left
   unscoped, this hid two of the three steps for anyone without JavaScript. */
.js .iso__step h3 { opacity: .5; }
.js .iso__step p { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .35s ease, max-height .35s ease; }
.js .iso__step.is-on h3 { opacity: 1; }
.js .iso__step.is-on p { opacity: 1; max-height: 160px; }
.iso__meter { height: 2px; background: var(--line-2); margin-top: 14px; display: none; }
.iso__step.is-on .iso__meter { display: block; }
.iso__meter i { display: block; height: 2px; background: var(--accent); width: 0; }
.js .iso__step.is-on .iso__meter i { animation: iso-meter 5.2s linear forwards; }
@keyframes iso-meter { to { width: 100%; } }

@media (max-width: 900px) { .iso { grid-template-columns: minmax(0, 1fr); } .iso__art { order: -1; } }

/* ---- 3. governed against ungoverned ------------------------------------ */

.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.vsc { border-radius: var(--r); padding: 24px; border: 1px solid; }
.vsc--bad { background: rgba(241,84,18,.05); border-color: rgba(241,84,18,.22); }
.vsc--good { background: rgba(92,138,0,.07); border-color: rgba(92,138,0,.28); }
.vsc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vsc__t { font-size: 17px; font-weight: 500; color: #EDEFEF; }
.vsc__q { font-family: var(--mono); font-size: 12.5px; color: rgba(237,239,239,.62); margin: 20px 0 16px; }
.vsc__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(237,239,239,.1); }
.vsc__row:last-child { border-bottom: 0; }
.vsc__n { font-family: var(--mono); font-size: 19px; color: #EDEFEF; font-feature-settings: "tnum" 1; }
.vsc__src { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,84,18,.85); }
.vsc__qm { color: rgba(241,84,18,.85); font-family: var(--mono); }
.vsc__one { font-family: var(--disp); font-weight: 300; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.045em; color: #EDEFEF; font-feature-settings: "tnum" 1; margin: 6px 0 0; }
.vsc__def { font-family: var(--mono); font-size: 12px; color: rgba(237,239,239,.6); margin-top: 8px; }
.vsc__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: rgba(237,239,239,.45); }

/* the node graph under each card */
.vsg { margin-top: 18px; }
.vsg svg { width: 100%; height: auto; display: block; overflow: visible; }
.vsg .edge { fill: none; stroke-width: 1; }
.vsg--bad .edge { stroke: rgba(241,84,18,.4); }
.vsg--good .edge { stroke: rgba(92,138,0,.5); }
.js .vs.is-in .vsg .edge { stroke-dasharray: 160; stroke-dashoffset: 160; animation: vs-draw 1s ease forwards; }
@keyframes vs-draw { to { stroke-dashoffset: 0; } }
.vsg .box { rx: 6; }
.vsg--bad .box { fill: rgba(241,84,18,.06); stroke: rgba(241,84,18,.3); }
.vsg--good .box { fill: rgba(92,138,0,.09); stroke: rgba(92,138,0,.35); }
.vsg .t { font-family: var(--mono); font-size: 10px; fill: rgba(237,239,239,.8); }
.vsg .s { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.vsg--bad .s { fill: rgba(241,84,18,.8); }
.vsg--good .s { fill: rgba(140,190,60,.85); }
.vs__say { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: 22px; }
.vs__say p { font-size: 14.5px; color: rgba(237,239,239,.62); }
.vs__say b { color: #EDEFEF; font-weight: 500; }

@media (max-width: 900px) { .vs, .vs__say { grid-template-columns: minmax(0, 1fr); } }

/* ---- 4. what comes back ------------------------------------------------ */

.surf { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.surf__tabs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.surf__tab { padding: 18px 0 18px 18px; border-left: 2px solid transparent; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.surf__tab.is-on { border-left-color: var(--accent); }
.surf__tab b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--muted); }
.surf__tab.is-on b { color: var(--ink); }
.surf__tab span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.surf__panes { position: relative; }
.surf__pane + .surf__pane { margin-top: 26px; }
.js .surf__pane { display: none; margin-top: 0; }
.js .surf__pane.is-on { display: block; animation: surf-in .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes surf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.surf__lead { margin: 0 0 20px; }

.mock { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); overflow: hidden; box-shadow: 0 20px 44px -30px rgba(20,25,23,.4); }
.mock__bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); background: var(--well); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mock__bar .dots { display: flex; gap: 4px; }
.mock__bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mock__body { padding: 18px; }
.mock__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.mock__kpi { padding: 14px; border-right: 1px solid var(--line-2); position: relative; }
.mock__kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c, var(--line-2));
}
.mock__kpi:last-child { border-right: 0; }
.mock__kpi .n { font-family: var(--mono); font-size: 17px; color: var(--ink); margin-top: 6px; font-feature-settings: "tnum" 1; }
.mock__kpi .d { font-family: var(--mono); font-size: 10px; margin-top: 4px; color: var(--good); }
.mock__kpi .d.is-bad { color: var(--accent); }
.mock__chart { margin-top: 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px; }
.mock__chart svg { width: 100%; height: auto; display: block; }
/* The chart was one accent line, which could only say "a lot" or "a little".
   Stacked columns in the category colours say WHAT the month was made of, and
   the five weeks add to the same 4,02,180 the table totals to. */
.mock__gl { stroke: var(--line-2); stroke-width: 1; }
.mock__wk {
  font-family: var(--mono); font-size: 9px; fill: var(--muted);
  letter-spacing: .1em; text-anchor: middle;
}
/* view-box origin, not fill-box: the whole column rises off the chart floor.
   fill-box would scale each segment about its own base and tear the stack. */
.mock__seg { transform-box: view-box; transform-origin: center bottom; }
.js .surf__pane.is-on .mock__seg {
  transform: scaleY(0); animation: seg-rise .55s cubic-bezier(.2,.8,.3,1) var(--d, 0ms) forwards;
}
@keyframes seg-rise { to { transform: scaleY(1); } }
@keyframes fade-in { to { opacity: 1; } }
.mock__rows { margin-top: 16px; }
.mock__rows .h { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.mock__rows .r { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.mock__rows .r:last-child { border-bottom: 0; }
.mock__rows .r i { font-style: normal; font-family: var(--mono); color: var(--accent); font-feature-settings: "tnum" 1; }

.mock__letter { font-family: var(--mono); font-size: 12px; line-height: 1.95; color: var(--body); letter-spacing: -.01em; }
.mock__letter .q { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.mock__letter .q .a { color: var(--accent); font-size: 14px; }
.mock__sheet { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
.mock__sheet th { background: var(--well); text-align: left; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; color: var(--muted); padding: 8px 10px; border: 1px solid var(--line-2); }
.mock__sheet td { padding: 8px 10px; border: 1px solid var(--line-2); color: var(--body); }
.mock__sheet td.r { text-align: right; font-feature-settings: "tnum" 1; }
.mock__sheet tbody td:nth-child(2) { color: var(--c, var(--body)); }
.mock__sheet tr.hit td { color: var(--accent); background: var(--accent-soft); }

@media (max-width: 900px) {
  .surf { grid-template-columns: minmax(0, 1fr); }
  .surf__tabs { display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line); }
  .surf__tab { border-left: 0; border-bottom: 2px solid transparent; padding: 12px 16px 12px 0; white-space: nowrap; }
  .surf__tab.is-on { border-left-color: transparent; border-bottom-color: var(--accent); }
  .mock__kpis { grid-template-columns: repeat(2, 1fr); }
  .mock__kpi:nth-child(2n) { border-right: 0; }
  .mock__kpi:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

@media (prefers-reduced-motion: reduce) {
  .js .iso.is-in .iso__scan { animation: none; opacity: .45; }
  .js .iso__step.is-on .iso__meter i { animation: none; width: 100%; }
  .js .vs.is-in .vsg .edge { stroke-dashoffset: 0; animation: none; }
  .js .surf__pane.is-on .mock__seg { transform: none; animation: none; }
  .surf__pane.is-on { animation: none; }
}


/* ---- 5. the merge: scattered numbers compiling into one record ---------- */

/* The page's second section is one movement, read LEFT TO RIGHT and sized to
   land inside one screen: every artifact a payout arrives in on the left, the
   figures lifting out of them, and a single readable record on the right.
   Stacked vertically it needed two screens and the causal link - this mess
   BECOMES that record - was lost to a scroll. */

.merge__stage {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(24px, 3vw, 48px); align-items: center;
}

/* the left half: the heap, on its own stage so the cards can overlap */
.heap { position: relative; height: 434px; overflow: hidden; }

.heap__i {
  position: absolute; width: var(--w, 300px); border-radius: 10px; background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(20,25,23,.05), 0 18px 40px -26px rgba(20,25,23,.42);
  overflow: hidden;
}
.js .heap__i { opacity: 0; transform: translateY(20px) scale(.97); }
.js .heap.is-in .heap__i {
  opacity: 1; transform: none;
  transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--d, 0ms);
}
.heap__bar {
  display: flex; align-items: center; gap: 7px; padding: 8px 11px;
  border-bottom: 1px solid var(--line-2); background: var(--well);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; color: var(--muted);
  white-space: nowrap;
}
.heap__bar .r { margin-left: auto; letter-spacing: .09em; text-transform: uppercase; }
.heap__bar .dots { display: flex; gap: 3.5px; }
.heap__bar .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.heap__b { padding: 9px 11px; font-family: var(--mono); font-size: 9.5px; line-height: 1.75; color: var(--body); }
.heap__b .row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.heap__b .row.hit { color: var(--accent); background: var(--accent-soft); margin: 0 -11px; padding: 0 11px; }
.heap__b .row.dim { color: rgba(110,107,99,.55); }
.heap__foot {
  padding: 7px 11px; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; gap: 9px;
}
.heap__foot .warn { color: var(--accent); }

.heap__i--dark { background: #111614; border-color: #111614; }
.heap__i--dark .heap__bar { background: #1a201d; border-color: rgba(255,255,255,.08); color: rgba(237,239,239,.6); }
.heap__i--dark .heap__bar .dots i { background: rgba(255,255,255,.18); }
.heap__i--dark .heap__b { color: rgba(237,239,239,.72); }
.heap__i--dark .heap__b .row.hit { color: #ff8a5c; background: rgba(241,84,18,.14); }
.heap__i--dark .heap__foot { border-color: rgba(255,255,255,.08); color: rgba(237,239,239,.45); }

.heap__msg { padding: 11px; }
.heap__who { display: flex; align-items: center; gap: 8px; }
.heap__av { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.heap__msg p { margin: 8px 0 8px; font-size: 12px; line-height: 1.45; color: var(--ink); max-width: none; }
.heap__msg .meta { font-family: var(--mono); font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* the contradiction, which sits on top of the heap and is what the record answers */
.heap__clash {
  background: var(--card); border: 1px solid rgba(241,84,18,.4);
  box-shadow: 0 1px 2px rgba(20,25,23,.05), 0 22px 48px -24px rgba(20,25,23,.48);
  z-index: 8;
}
.heap__clash .pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 12px 12px 9px; }
.heap__clash .box { border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; text-align: center; }
.heap__clash .box.is-out { border-color: rgba(241,84,18,.45); }
.heap__clash .box .n { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); font-feature-settings: "tnum" 1; }
.heap__clash .box.is-out .n { color: var(--accent); }
.heap__clash .ne { font-family: var(--mono); font-size: 15px; color: var(--accent); }
.heap__clash .say { padding: 0 12px 11px; font-size: 12px; line-height: 1.45; color: var(--ink); }
.heap__clash .say b { font-weight: 600; }

/* the right half: what it all compiles to */
.merge__out {
  position: relative; z-index: 9;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 2px 4px rgba(20,25,23,.05), 0 30px 64px -30px rgba(20,25,23,.42);
  overflow: hidden;
}
.merge__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid var(--line-2); background: var(--well);
}
.merge__body { padding: 2px 20px 14px; }
.merge__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 11px 20px; border-top: 1px solid var(--line-2); background: var(--well);
}
/* the record has to hold a whole month inside one screen beside the heap */
.merge__out .led td { padding: 7px 0; font-size: 14px; }
.merge__out .led td .sub { font-size: 11.5px; margin-top: 1px; line-height: 1.4; }
.merge__out .led th { padding-bottom: 8px; }
.merge__out .led tr.is-base td { padding-bottom: 8px; }
.merge__out .led tr.is-base td.r { font-size: 15px; }
.merge__out .led tr.is-total td { padding-top: 12px; font-size: 15.5px; }
.merge__out .led tr.is-total td.r { font-size: clamp(21px, 1.8vw, 26px); }
.merge__out .share { margin-top: 14px; }
.merge__out .share__legend { margin-top: 9px; }

/* a figure in flight, from the artifact it was buried in to the record */
.pcl {
  position: absolute; font-family: var(--mono); pointer-events: none; z-index: 7;
  white-space: nowrap; will-change: transform, opacity; opacity: 0;
  font-feature-settings: "tnum" 1;
}
@keyframes merge-fly {
  0%   { transform: translate(0, 0) scale(.86); opacity: 0; }
  16%  { opacity: .92; }
  64%  { transform: translate(calc(var(--dx) * .62), calc(var(--dy) * .62 - 10px)) scale(1); opacity: .88; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; }
}

/* the record writes itself as the figures land */
.js .merge__out .led tbody tr { opacity: 0; transform: translateX(-8px); }
.js .merge__out.is-writing .led tbody tr {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.js .merge__out .share__fill { width: 0 !important; }
.js .merge__out.is-writing .share__fill {
  width: var(--fill) !important; transition: width 1.1s cubic-bezier(.25,.85,.3,1) 1s;
}

/* THE WHOLE MOVEMENT SITS INSIDE ONE SCREEN, which is a real constraint and
   the reason every measurement below is smaller than the page's default: the
   head gets one rung less, the section gets shorter padding, and the record
   runs on a tighter line. At 1084px it needed a scroll to get from the mess to
   the answer, which is the one thing this section cannot afford. */
.section--merge { padding: clamp(36px, 3.4vw, 54px) 0; }
.merge .section__head { margin-bottom: clamp(18px, 2.1vw, 28px); max-width: 760px; }
.merge .section__head h2 { font-size: clamp(28px, 2.9vw, 40px); }
.merge .section__head .lead { margin-top: 12px; font-size: 16px; max-width: 60ch; }

/* "One screen" is a claim about the reader's screen, so it has to be measured
   against one. On a short laptop window the section gives up a type rung and
   some padding rather than spilling into a scroll. */
@media (min-width: 1081px) and (max-height: 880px) {
  .section--merge { padding: 26px 0; }
  .merge .section__head { margin-bottom: 15px; }
  .merge .section__head h2 { font-size: 32px; }
  .merge .section__head .lead { font-size: 15px; margin-top: 9px; }
  .merge__head, .merge__foot { padding: 9px 18px; }
  .merge__body { padding: 2px 18px 12px; }
  .merge__out .led td { padding: 5px 0; font-size: 13.5px; }
  .merge__out .led td .sub { font-size: 11px; }
  .merge__out .led tr.is-base td { padding-bottom: 5px; }
  .merge__out .led tr.is-total td { padding-top: 10px; }
  .merge__out .share { margin-top: 11px; }
  .heap { height: 398px; }
}

@media (min-width: 1081px) and (max-height: 740px) {
  .section--merge { padding: 14px 0; }
  .merge .section__head h2 { font-size: 28px; }
  .merge .section__head .lead { font-size: 14.5px; }
  .merge__out .led tr.is-base td { padding-bottom: 3px; }
  .heap { height: 366px; }
}

/* The narrowest window that still runs the two-column stage. The legend has
   the least room here and was wrapping to a second line, which put the section
   1px over the fold; a rung down on the keys keeps it to one. */
@media (min-width: 1081px) and (max-width: 1160px) {
  .merge__out .share__legend { gap: 5px 8px; }
  .merge__out .share__legend .key,
  .merge__out .share__legend .lbl { font-size: 9px; letter-spacing: .04em; }
  .merge__out .share__legend .key { gap: 4px; }
  .merge__out .share__legend .key::before { width: 7px; height: 7px; }
}

@media (max-width: 1080px) {
  .merge__stage { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .heap { height: 430px; }
}

@media (max-width: 900px) {
  /* not a heap any more - a stack you can actually read */
  .heap { height: auto; overflow: visible; display: grid; gap: 12px; }
  .heap__i, .js .heap.is-in .heap__i, .js .heap.is-in .heap__clash {
    position: static; width: auto; transform: none; left: auto; top: auto;
  }
  .js .heap__i { opacity: 0; transform: translateY(16px); }
  .js .heap.is-in .heap__i { opacity: 1; transform: none; }
  .heap__clash { order: -1; }
  .pcl { display: none; }
  .merge__head, .merge__foot { padding: 12px 16px; }
  .merge__body { padding: 4px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcl { display: none; }
  .js .merge__out .led tbody tr { opacity: 1; transform: none; }
  .js .merge__out .share__fill { width: var(--fill) !important; }
}

/* ---- 6. the proof strip (foot of the hero) ----------------------------- */

/* A row of chains that runs past both screen edges. The cut edge is the whole
   point: it says the row continues, which a tidy 4-up grid inside the gutter
   cannot say. Two identical sets travel left by exactly one set + one gap, so
   the seam never lands on screen; no JS, so it survives the driver being off.

   Colour: the rupee figure is money at issue, so it takes the accent. The
   order count is not money and stays ink - see the law at the top of
   loop-base.css. The monogram is a placeholder for a logo; .qc__mark swaps
   for an <img> the day there are real marks to use. */

.proof__head { margin-top: clamp(38px, 4.5vw, 62px); }

.mq {
  --mq-gap: 16px;
  margin-top: 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq__track {
  display: flex; gap: var(--mq-gap); width: max-content;
  animation: mq-run 62s linear infinite;
}
.mq__set { display: flex; gap: var(--mq-gap); }
.mq:hover .mq__track { animation-play-state: paused; }
@keyframes mq-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--mq-gap) / 2), 0, 0); }
}

/* --mk is the chain's own colour, set per card in the markup. It is NOT the
   system accent and must never be read as one: it appears only on the logo
   tile and the card's top rule, both of which are identity, not meaning. The
   accent still says money at issue and nothing else. */
.qc {
  width: 316px; flex: 0 0 auto; padding: 20px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.qc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--mk, var(--line));
}
.qc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qc__mark {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: var(--mk, var(--well)); border: 0;
  display: grid; place-items: center; position: relative;
  font-family: var(--disp); font-weight: 500; font-size: 17px; color: #fff;
  letter-spacing: -.02em;
}
.qc__mark::after {
  content: ""; position: absolute; inset: -4px; border-radius: 13px;
  background: var(--mk, transparent); opacity: .13;
}
.qc__rgn {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 9px;
}
.qc__n {
  margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.018em;
  color: var(--ink); line-height: 1.35; max-width: none;
}
.qc__n span { display: block; font-weight: 400; color: var(--muted); }
.qc__stat {
  display: flex; gap: 22px; margin-top: auto;
  padding-top: 13px; border-top: 1px solid var(--line-2);
}
.qc__stat b {
  display: block; font-family: var(--mono); font-size: 17px; font-weight: 400;
  color: var(--ink); font-feature-settings: "tnum" 1; letter-spacing: -.02em;
}
.qc__stat .qc__rs { color: var(--accent); }
.qc__stat span {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}

/* No drift for anyone who asked for none - the row becomes a thing you push. */
@media (prefers-reduced-motion: reduce) {
  .mq { overflow-x: auto; }
  .mq__track { animation: none; }
  .mq__set[aria-hidden="true"] { display: none; }
}

/* On a phone the row was one 268px card at a time, which reads as a list, not
   as a wall of chains. Half-screen cards put two in view, and a stagger down
   the row stops them lining up like a table. */
@media (max-width: 700px) {
  .mq { --mq-gap: 10px; padding: 6px 0 16px; }
  .qc { width: min(46vw, 196px); padding: 13px 13px 12px; gap: 9px; border-radius: var(--r-sm); }
  .qc::before { height: 2px; }
  .qc__mark { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
  .qc__rgn { font-size: 8px; letter-spacing: .08em; padding: 3px 6px; }
  .qc__n { font-size: 13.5px; line-height: 1.3; }
  .qc__stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding-top: 9px; }
  .qc__stat b { font-size: 13.5px; }
  .qc__stat span { font-size: 8px; margin-top: 1px; }

  /* the scatter: every other card rides lower, every fourth lower still */
  .mq__set .qc:nth-child(even) { margin-top: 18px; }
  .mq__set .qc:nth-child(4n+3) { margin-top: 9px; }
  .mq__set .qc:nth-child(odd)  { transform: rotate(-.8deg); }
  .mq__set .qc:nth-child(even) { transform: rotate(.9deg); }
}