/* PREPAY — shell stylesheet (tokens · page scale · page frame · chrome · shared components · rule classes · motion).
   Source of truth: product/website/mockup/v1/DESIGN.md (§0–§5, §4b border table, §10 motion) + mockup/v1/chrome/*.html.
   PAGE SCALE (LUAT 50): --u = 1 css px of the 1920 mockup (set in index.html from the viewport width; 0.75px below 1024).
   Write every size as calc(N * var(--u)) with N = the @1920 value (mockup px × 1.148). Type never below 12px.
   BORDERS (LUAT 56): route files contain ZERO border/outline declarations — use the .rule-* classes at the bottom. */

:root {
  --u: calc(100vw / 1920);

  /* colour tokens (DESIGN §3) */
  --paper: #F8DAE2;
  --surface: #FDF0F3;
  --surface-nav: rgba(255, 247, 249, .72);
  --surface-foot: rgba(255, 247, 249, .65);
  --surface-warm: #FEF7EE;
  --surface-pink: #FCEBEF;
  --due-strip: #FCDFE4;
  --ear: #F6C1CF;
  --ink: #230515;
  --mono-ink: #170D30;
  --plum: #592644;
  --muted: #623760;
  --select-dark: #5A294A;
  --outline: #73506C;
  --hairline-card: #ECCCD5;
  --rule-c: #D9AFC2;
  --accent: #FB8B24;
  --accent-node: #FD8B44;
  --total-ink: #241130;
  --success: #00641F;
  --success-stamp: #216633;
  --success-bg: #D9F1E8;
  --success-panel: #EDF5EE;
  --grad-mark: linear-gradient(90deg, #FFE45E, #FB8B24);          /* mark A: pull ribbon, sliders, bars, nav underline */
  --grad-action: linear-gradient(110deg, #FEDF66, #FE8C3B);       /* primary action (Request early) */
  /* chrome colours = chrome/nav.html + footer.html verbatim */
  --chrome-brand: #25101F;
  --chrome-link: #3D1738;
  --chrome-foot: #3C1737;
  --chrome-foot-muted: #75506E;

  /* fonts (DESIGN §2, measured by font_match — Funnel Display / Sono dropped, §9 F1) */
  --font-display: 'Golos Text', system-ui, sans-serif;     /* hero, titles, nav, buttons */
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;     /* body, sub-titles, labels */
  --font-mono: 'Roboto Mono', ui-monospace, monospace;     /* IDs, USDC, dates, hashes, blocks */
  --font-num: 'Roboto', system-ui, sans-serif;             /* big result numerals */

  /* type scale @1920 (DESIGN §2); max(12px, …) keeps text legible at 1280 */
  --fs-hero: max(30px, calc(83 * var(--u)));
  --fs-mech: max(18px, calc(43 * var(--u)));
  --fs-section: max(24px, calc(60 * var(--u)));
  --fs-title: max(22px, calc(48 * var(--u)));
  --fs-card: max(15px, calc(23 * var(--u)));
  --fs-big: max(18px, calc(35 * var(--u)));
  --fs-body: max(13px, calc(17 * var(--u)));
  --fs-nav: max(12px, calc(16 * var(--u)));
  --fs-mono: max(12px, calc(16 * var(--u)));
  --fs-label: max(12px, calc(15 * var(--u)));
  --fs-eyebrow: max(12px, calc(13 * var(--u)));

  /* page frame (DESIGN §0 + USER FIX U1: gutters 69 / 68 @1920, container 1783, no sidebar) */
  --gutter-l: calc(69 * var(--u));
  --gutter-r: calc(68 * var(--u));
  --gap-section: calc(64 * var(--u));      /* LUAT 56: section gap 48–96 */

  /* radii + shadows (DESIGN §4) */
  --r-chrome: calc(16 * var(--u));
  --r-card: calc(16 * var(--u));
  --r-invoice: calc(7 * var(--u));
  --r-input: calc(9 * var(--u));
  --r-button: calc(11 * var(--u));
  --ear-size: calc(27 * var(--u));
  --shadow-card: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(99, 36, 79, .10);
  --shadow-lift: 0 calc(14 * var(--u)) calc(28 * var(--u)) rgba(99, 36, 79, .16);

  /* rules (DESIGN §4b, measured @1920; hairlines never vanish) */
  --rule-hair: max(1px, calc(1.1 * var(--u)));
  --rule-mid: max(1px, calc(1.3 * var(--u)));
  --rule-soft: max(1px, calc(1.6 * var(--u)));
  --rule-frame: max(1px, calc(2.2 * var(--u)));
  --rule-strong: max(1px, calc(2.3 * var(--u)));
  --rule-divider: max(1px, calc(2.5 * var(--u)));
  --rule-selected: max(2px, calc(3.4 * var(--u)));

  /* motion family (DESIGN §10 — "pulled forward": things arrive from the right, the later date, and settle on a paper spring) */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);     /* the one curve: slight overshoot, like a card dropped on a day */
  --ease-out: cubic-bezier(.22, 1, .36, 1);           /* for fades that must not overshoot */
  --t-stamp: 180ms;
  --t-tick: 240ms;
  --t-pull: 360ms;
  --t-count: 700ms;
  --t-slide: 900ms;
  --pull-x: calc(40 * var(--u));
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--paper);
  /* fine paper grain on the page only (DESIGN §4, ≈3 % noise) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .12 0 0 0 0 .25 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.45;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
/* button reset — border:0 so no route inherits a UA frame (rule classes add frames where the mockup has them) */
button { font: inherit; color: inherit; background: none; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
input, select, textarea { font: inherit; color: inherit; background: transparent; margin: 0; border: 0; border-radius: 0; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; font-weight: inherit; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: max(2px, calc(2.3 * var(--u))) solid var(--accent); outline-offset: 2px; }
.tnum, .t-mono, .t-big { font-variant-numeric: tabular-nums; }

/* ───────── ONE PAGE FRAME (LUAT 53) — every route renders inside this; routes never set max-width / side padding / ground ───────── */
main.page-frame {
  flex: 1 0 auto; width: 100%;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: transparent;           /* the page ground is the body's paper — one ground for every route */
  display: flex; flex-direction: column; gap: var(--gap-section);
  padding-bottom: calc(24 * var(--u));
}

/* ───────── typography (DESIGN §2) ───────── */
.t-hero { font: 700 var(--fs-hero)/1 var(--font-display); letter-spacing: -.046em; color: var(--ink); }
.t-mech { font: 400 var(--fs-mech)/1.15 var(--font-body); letter-spacing: -.03em; color: var(--plum); }
.t-section { font: 700 var(--fs-section)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.t-title { font: 700 var(--fs-title)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.t-card { font: 600 var(--fs-card)/1.2 var(--font-display); color: var(--ink); }
.t-big { font: 700 var(--fs-big)/1 var(--font-num); letter-spacing: -.005em; color: var(--ink); }
.t-mono { font: 500 var(--fs-mono)/1.3 var(--font-mono); color: var(--mono-ink); }
.t-body { font: 400 var(--fs-body)/1.45 var(--font-body); color: var(--plum); }
.t-label { font: 500 var(--fs-label)/1.3 var(--font-body); letter-spacing: -.026em; color: var(--muted); }
.t-eyebrow { font: 600 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.c-ink { color: var(--ink); } .c-plum { color: var(--plum); } .c-muted { color: var(--muted); } .c-success { color: var(--success); } .c-accent { color: var(--accent); }

/* ───────── NAV (chrome/nav.html verbatim, scaled by --u; CA + BUY removed by user rule) ───────── */
.pp-header { width: 100%; height: calc(160 * var(--u)); padding: calc(28 * var(--u)) calc(36 * var(--u)) calc(32 * var(--u)); position: relative; z-index: 20; }
.pp-nav {
  height: calc(100 * var(--u)); border-radius: var(--r-chrome); background: var(--surface-nav);
  display: flex; align-items: center; padding: 0 calc(36 * var(--u)); gap: calc(34 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(93, 38, 74, .045);
}
.pp-nav .brand { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-right: calc(18 * var(--u)); color: var(--chrome-brand); text-decoration: none; }
.pp-nav .brand img { width: calc(104 * var(--u)); height: calc(62 * var(--u)); object-fit: contain; }
.pp-nav .brand b { font: 700 max(18px, calc(31 * var(--u)))/1 var(--font-display); letter-spacing: .02em; }
.pp-nav .links { display: flex; align-items: center; gap: calc(34 * var(--u)); height: 100%; }
.pp-nav .links a, .pp-header .social { font: 500 var(--fs-nav)/1 var(--font-display); color: var(--chrome-link); text-decoration: none; white-space: nowrap; }
.pp-nav .links a { height: 100%; display: flex; align-items: center; position: relative; }
.pp-nav .links a.is-active { font-weight: 600; color: var(--ink); }
.pp-nav .links a::after {           /* active underline = mark gradient bar (background, not a border) */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(20 * var(--u)); height: calc(3 * var(--u)); min-height: 2px;
  border-radius: 3px; background: var(--grad-mark); transform: scaleX(0); transform-origin: right center;
  transition: transform var(--t-pull) var(--ease-spring);
}
.pp-nav .links a.is-active::after { transform: scaleX(1); }
.pp-nav .links a:hover { color: var(--ink); }
.pp-nav .spacer { flex: 1; }
.pp-nav .socials { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.pp-header .social.x { font-size: max(14px, calc(21 * var(--u))); }
.pp-header .telegram { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.pp-header .telegram::before { content: '➤'; font-size: max(13px, calc(20 * var(--u))); transform: rotate(-18deg); }
[data-launch-link][aria-disabled="true"] { cursor: default; }
.nav-menu, .nav-drawer { display: none; }

/* ───────── FOOTER (chrome/footer.html verbatim, scaled; + brand mark (LUAT 56); CA shows TBA until launch.json) ───────── */
.pp-footer { width: 100%; padding: 0 calc(36 * var(--u)) calc(26 * var(--u)); margin-top: calc(24 * var(--u)); color: var(--chrome-foot); }
.pp-footer .foot {
  min-height: calc(86 * var(--u)); border-radius: calc(15 * var(--u)); background: var(--surface-foot);
  padding: calc(15 * var(--u)) calc(30 * var(--u));
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(24 * var(--u));
}
.pp-footer .foot-mark { width: calc(84 * var(--u)); min-width: 66px; height: auto; }
.pp-footer .boundary { font: 400 max(12px, calc(15 * var(--u)))/1.3 var(--font-display); margin-bottom: calc(7 * var(--u)); }
.pp-footer .sources { font: 400 max(12px, calc(11.5 * var(--u)))/1.3 var(--font-display); color: var(--chrome-foot-muted); }
.pp-footer .right { display: flex; align-items: center; gap: calc(18 * var(--u)); font: 400 max(12px, calc(14 * var(--u)))/1 var(--font-display); white-space: nowrap; }
.pp-footer .right a { text-decoration: none; }
.pp-footer .x { font: 500 max(13px, calc(18 * var(--u)))/1 var(--font-mono); }
.pp-footer .tg::before { content: '➤'; display: inline-block; margin-right: calc(7 * var(--u)); transform: rotate(-18deg); }
.pp-footer .ca { border-radius: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); font-weight: 600; }
.pp-footer .ca [data-launch-ca] { font-family: var(--font-mono); font-weight: 500; }
.pp-footer .copy { padding-left: calc(16 * var(--u)); }
.pp-footer .buy { display: inline-flex; align-items: center; height: calc(44 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: var(--r-button); background: var(--grad-mark); color: #261018; font-weight: 600; text-decoration: none; }

/* ───────── shared components (DESIGN §5) ───────── */
/* card = rounded warm-white panel on the pink paper; add .rule-card-frame for the measured hairline */
.pp-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.pp-card-pink { background: var(--surface-pink); border-radius: var(--r-card); }

/* dog-ear invoice card: <article class="invoice-card"><div class="sheet rule-invoice-card">…</div></article>
   .is-selected → gradient flap + gradient foot · .is-ghost → faded original due-date position · .lift-card → hover lift */
.invoice-card { position: relative; filter: drop-shadow(0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(99, 36, 79, .10)); }
.invoice-card .sheet {
  position: relative; background: var(--surface-warm); border-radius: var(--r-invoice); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--ear-size)) 0, 100% var(--ear-size), 100% 100%, 0 100%);
}
.invoice-card::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--ear-size); height: var(--ear-size);
  background: linear-gradient(to bottom left, transparent 50%, var(--ear) 50%); border-bottom-left-radius: calc(4 * var(--u));
}
.invoice-card.is-selected::after { background: linear-gradient(to bottom left, transparent 50%, #FDC95A 50%, #FB9A36 100%); }
.invoice-card .foot-strip { background: var(--due-strip); padding: calc(8 * var(--u)) calc(16 * var(--u)); font: 500 var(--fs-mono)/1.2 var(--font-mono); color: var(--mono-ink); }
.invoice-card.is-selected .foot-strip { background: linear-gradient(90deg, #FFF1B8, #FFD9A6); }
.invoice-card.is-ghost { opacity: .55; }

/* segmented control (Month/Week · Requested/Paid early · Q3/Q4) */
.seg { display: inline-flex; padding: calc(4 * var(--u)); gap: calc(2 * var(--u)); background: var(--surface); border-radius: calc(12 * var(--u)); }
.seg > button, .seg > a { padding: calc(10 * var(--u)) calc(22 * var(--u)); border-radius: calc(10 * var(--u)); font: 500 var(--fs-nav)/1 var(--font-display); color: var(--plum); text-decoration: none; transition: background-color var(--t-tick) var(--ease-out), color var(--t-tick) var(--ease-out); }
.seg > .is-on, .seg > [aria-pressed="true"], .seg > [aria-selected="true"] { background: var(--select-dark); color: #fff; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(54 * var(--u)); min-height: 36px; padding: 0 calc(26 * var(--u)); border-radius: var(--r-button); font: 600 max(13px, calc(16 * var(--u)))/1 var(--font-display); text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--grad-action); color: #261018; }
.btn-primary.is-big { height: calc(70 * var(--u)); font-size: max(16px, calc(27 * var(--u))); }
.btn-dark { background: var(--select-dark); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* pill / chip (states, not SAMPLE chips) */
.pill { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: 999px; font: 600 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; background: var(--surface-pink); color: var(--select-dark); }
.pill.is-success { background: var(--success-bg); color: var(--success); }

/* key/value row + result list (label left, mono value right) */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) 0; }
.kv > :first-child { font: 600 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kv > :last-child { font: 500 var(--fs-mono)/1.3 var(--font-mono); color: var(--mono-ink); text-align: right; font-variant-numeric: tabular-nums; }

/* PAID EARLY stamp: <span data-stamp-svg data-date="27 Sep 2026"></span> → app.js draws the tilted round SVG */
[data-stamp-svg] { display: inline-block; width: calc(150 * var(--u)); aspect-ratio: 1; color: var(--success-stamp); transform: rotate(-12deg); }
[data-stamp-svg][data-tone="accent"] { color: var(--accent); }
[data-stamp-svg] svg { width: 100%; height: 100%; overflow: visible; }

/* art slot (muted looping video or webp; art never carries text) */
.art { position: relative; overflow: hidden; }
.art > img, .art > video { width: 100%; height: 100%; object-fit: cover; }

/* ───────── RULE CLASSES (DESIGN §4b; ONE class per framed component; the only place borders are written) ─────────
   A list draws the bottom rule only; the last row inside a frame and a row followed by a total draw none (no doubled edge).
   Input frames wrap the whole control: put the <input> INSIDE the .rule-input box (padding lives inside the frame). */
/* chrome */
.rule-nav-card { border: var(--rule-hair) solid #EBD5DC; }
.rule-footer-card { border: var(--rule-hair) solid #E7D4DA; }
.rule-footer-divider { border-left: var(--rule-hair) solid rgba(87, 31, 68, .2); }
.rule-ca-button { border: var(--rule-mid) solid var(--outline); }
/* panels + cards */
.rule-card-frame { border: var(--rule-hair) solid var(--hairline-card); }
.rule-panel-edge { border-top: var(--rule-hair) solid #F1D2DA; }
.rule-calendar-panel { border: var(--rule-hair) solid var(--hairline-card); }
.rule-calendar-grid { border: var(--rule-hair) solid #E0C0CD; }
.rule-calendar-col { /* mockup columns are unruled; class retained for semantic mapping */ }
.rule-calendar-head { /* mockup day header has no divider rule */ }
.rule-pull-drawer { border: var(--rule-frame) solid #CCA6B5; }
.rule-invoice-card { border: var(--rule-hair) solid #EDD6DB; }
.invoice-card.is-selected .rule-invoice-card { border-color: #F4E0CF; }
.rule-tray { border: var(--rule-hair) solid var(--hairline-card); }
.rule-tray-approving { border: var(--rule-soft) solid #EECEDC; }
/* rows + sections */
.rule-row { border-bottom: var(--rule-hair) solid var(--rule-c); }
.rule-row:has(+ .rule-total), .rule-row:has(+ .rule-selected-row),
.rule-card-frame > .rule-row:last-child, .rule-anatomy-table .rule-row:last-child, .rule-rate-table > .rule-row:last-child { border-bottom-width: 0; }
.rule-section { border-bottom: var(--rule-hair) solid var(--rule-c); }
.rule-total { border-top: var(--rule-strong) solid var(--total-ink); }
.rule-selected-row { border-top: var(--rule-strong) solid var(--accent); border-bottom: var(--rule-strong) solid var(--accent); }
.rule-selected-row + .rule-row { border-top-width: 0; }
.rule-column-divider { border-left: var(--rule-divider) solid #E7CAD1; }
.rule-section-underline-accent { border-bottom: var(--rule-strong) solid #FCB02A; }
/* controls */
.rule-input {
  border: var(--rule-strong) solid #D5C5DA; border-radius: var(--r-input); background: #fff;
  display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(18 * var(--u)); min-height: calc(58 * var(--u));
}
.rule-input > input, .rule-input > select, .rule-input > textarea { flex: 1; width: 100%; height: 100%; padding: calc(10 * var(--u)) 0; }
.rule-input.is-hash { border-color: #D8CED9; }
.rule-input.is-amount { border-color: #F2AFC3; }
.rule-input.is-readout { border-color: #E2C6D1; }
.rule-input:focus-within { border-color: var(--select-dark); }
.rule-select { border: var(--rule-frame) solid #BFAEC5; border-radius: var(--r-input); display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u)); min-height: calc(48 * var(--u)); background: #fff; }
.rule-select > select { flex: 1; padding: calc(8 * var(--u)) 0; }
.rule-button-outline { border: var(--rule-frame) solid #9389B8; border-radius: var(--r-button); }
.rule-button-soft { border: var(--rule-strong) solid #F2AD60; border-radius: var(--r-button); }
.rule-status-chip { border: var(--rule-strong) solid #AED8BB; border-radius: 999px; }
.rule-status-success { border: var(--rule-strong) solid #AED8BB; border-radius: var(--r-card); }
.rule-amount-result { border: var(--rule-frame) solid #B9D0BE; border-radius: var(--r-input); }
.rule-formula-token { border: var(--rule-frame) solid #F4B7CA; border-radius: var(--r-input); }
/* receipt + rate */
.rule-anatomy-table {
  border-width: var(--rule-strong); border-style: solid;
  border-color: #E6ABC5; border-radius: var(--r-card);
}
.rule-anatomy-table .rc-ana-row:nth-child(2) { border-bottom-width: 0; }
.rule-anatomy-table .rc-ana-row:nth-child(3) { border-bottom: var(--rule-strong) solid #F2C6D4; }
.rule-anatomy-header-row { border-bottom: var(--rule-strong) solid #E6ABC5; }
.rule-anatomy-body-row { border-bottom: var(--rule-strong) solid #F2C6D4; }
.rule-anatomy-col { border-right: var(--rule-hair) solid #F0CCD6; }
.rule-anatomy-col:last-child { border-right-width: 0; }
.rule-outcome-ticket { border: var(--rule-strong) solid #E597B5; border-radius: var(--r-card); }
.rule-outcome-ticket.is-neutral { border-color: #BCAEC0; }
.rule-ticket-pink { border: var(--rule-strong) solid #E597B5; border-radius: var(--r-card); }
.rule-ticket-grey { border: var(--rule-strong) solid #BCAEC0; border-radius: var(--r-card); }
.rule-rate-table { border-top: var(--rule-hair) solid #E8B8CB; }
.rule-rate-highlight { border-top: var(--rule-strong) solid #FBB02B; border-bottom: var(--rule-strong) solid #FBB02B; }
.rule-receipt-columns > :nth-child(2), .rule-receipt-columns > :nth-child(3) { border-left: var(--rule-hair) solid #E8C8D5; }
/* mobile drawer rows */
.rule-drawer-row { border-bottom: var(--rule-hair) solid #EBD5DC; }

/* ───────── MOTION (DESIGN §10 — "pulled forward"; transform/opacity only; everything off under reduced motion) ───────── */
/* route change: the new page is pulled in from the right (a later day) and settles */
/* user fix R1: the page is fully painted in the click frame — a 140 ms transform-only nudge, never a fade or a blank */
main.page-frame.is-pulling { animation: pp-page 140ms var(--ease-out) both; }
@keyframes pp-page { from { transform: translateX(calc(14 * var(--u))); } to { transform: none; } }
@keyframes pp-pull { from { transform: translateX(var(--pull-x)); } to { transform: none; } }
/* reveal-on-scroll: a block enters the view sliding in from the right (earlier than it was), content visible at rest */
.is-pulled-in { animation: pp-pull var(--t-pull) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 50ms); }
/* grow-in: ribbons grow from the due date (right) back to the pay date; bars grow up from the day line */
.is-grown-x { animation: pp-grow-x var(--t-slide) var(--ease-spring) both; transform-origin: right center; }
.is-grown-y { animation: pp-grow-y var(--t-pull) var(--ease-spring) both; transform-origin: center bottom; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes pp-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pp-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* live tick: a changed figure slides in from the right by a few px and gets a short mark-gradient underline swipe */
.is-ticked { display: inline-block; position: relative; animation: pp-tick var(--t-tick) var(--ease-spring); }
.is-ticked::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: max(2px, calc(3 * var(--u))); border-radius: 3px; background: var(--grad-mark); transform-origin: right center; animation: pp-swipe 600ms var(--ease-out) both; pointer-events: none; }
@keyframes pp-tick { from { transform: translateX(.35em); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes pp-swipe { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* hover: an invoice card lifts off the day like a sticky slip (shadow = pseudo layer, only its opacity moves) */
.lift-card { transition: transform var(--t-tick) var(--ease-spring); }
.lift-card::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-invoice); box-shadow: var(--shadow-lift); opacity: 0; transition: opacity var(--t-tick) var(--ease-out); pointer-events: none; }
.lift-card:hover, .lift-card.is-dragging { transform: translateY(calc(-5 * var(--u))) rotate(-.6deg); }
.lift-card:hover::before, .lift-card.is-dragging::before { opacity: 1; }
/* stamp: lands 1.4 → 1 at −12°, the card under it shakes 2 px */
.is-stamped { animation: pp-stamp var(--t-stamp) cubic-bezier(.5, 0, .75, 0) both; }
@keyframes pp-stamp { from { transform: rotate(-12deg) scale(1.4); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.is-shaken { animation: pp-shake 200ms linear; }
@keyframes pp-shake { 0%, 100% { transform: none; } 25% { transform: translate(2px, 1px); } 50% { transform: translate(-2px, -1px); } 75% { transform: translate(1px, -1px); } }
/* draw: SVG strokes (curve, rails) draw from the due end — set pathLength="1" on the path */
[data-draw].is-drawn path, [data-draw].is-drawn line, [data-draw].is-drawn polyline { stroke-dasharray: 1; animation: pp-draw var(--t-slide) var(--ease-out) both; }
@keyframes pp-draw { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } }

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

/* ───────── below 1024: mobile layout (390 no horizontal scroll) ───────── */
@media (max-width: 1023px) {
  :root { --gutter-l: 16px; --gutter-r: 16px; --gap-section: 40px; }
  .pp-header { height: auto; padding: 12px 16px; }
  .pp-nav { height: 64px; padding: 0 14px; gap: 12px; }
  .pp-nav .brand { margin-right: 0; }
  .pp-nav .brand img { width: 74px; height: 44px; }
  .pp-nav .brand b { font-size: 22px; }
  .nav-desktop { display: none !important; }
  .nav-menu { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; font: 500 14px/1 var(--font-display); color: var(--chrome-link); }
  .nav-menu-bars, .nav-menu-bars::before, .nav-menu-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; }
  .nav-menu-bars::before, .nav-menu-bars::after { content: ""; position: absolute; left: 0; }
  .nav-menu-bars::before { top: -6px; } .nav-menu-bars::after { top: 6px; }
  .nav-drawer:not([hidden]) { display: flex; flex-direction: column; margin-top: 8px; padding: 8px 16px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); }
  .nav-drawer > a { padding: 14px 0; font: 500 16px/1 var(--font-display); color: var(--chrome-link); text-decoration: none; }
  .nav-drawer > a.is-active { font-weight: 700; color: var(--ink); }
  .nav-drawer .drawer-socials { display: flex; gap: 20px; padding-top: 14px; }
  .nav-drawer .drawer-socials .social { font: 500 15px/1 var(--font-display); color: var(--chrome-link); text-decoration: none; }
  .pp-footer { padding: 0 16px 16px; }
  .pp-footer .foot { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .pp-footer .right { flex-wrap: wrap; white-space: normal; }
  .pp-footer .sources { white-space: normal; }
}