@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url("./assets/fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./assets/fonts/dm-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("./assets/fonts/dm-mono-500-latin.woff2") format("woff2");
}

:root {
  --ink: #10110c;
  --home: #efff4b;
  --cash: #29e3c1;
  --homes: #5388ff;
  --work: #ff563f;
  --compare: #ac7cff;
  --spend: #ffb51b;
  --stage: var(--home);
  --page-gutter: clamp(18px,3vw,42px);
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-height: 100%; }
html {
  background: var(--stage);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* The experience is a fixed presentation stage. Only the explicitly marked
   narrow/short layouts below become scrollable when a frame cannot fit. */
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--stage);
  font-family: "Space Grotesk", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
:where(.sr-only,.step-number,.homes-conclusion p,.race-heading h3,.spend-clock h3,.spend-question,#home-title,#closing-title):focus { outline: none; }
::selection { color: var(--stage); background: var(--ink); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --stage is inherited by the page and coordinated with Safari's theme colour
   by the pre-paint script and setStageTheme() in app.js. */
.app {
  --stage: var(--home);
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  background: var(--stage);
  transition: background-color 600ms cubic-bezier(.22,.75,.2,1);
  isolation: isolate;
}
.app[data-theme="cash"] { --stage: var(--cash); }
.app[data-theme="homes"] { --stage: var(--homes); }
.app[data-theme="work"] { --stage: var(--work); }
.app[data-theme="compare"] { --stage: var(--compare); }
.app[data-theme="spend"] { --stage: var(--spend); }
/* The app markup is intentionally home-themed as a no-script fallback. Match
   a deep link before app.js has parsed so a chapter never flashes yellow. */
html[data-initial-theme="cash"] .app { --stage: var(--cash); }
html[data-initial-theme="homes"] .app { --stage: var(--homes); }
html[data-initial-theme="work"] .app { --stage: var(--work); }
html[data-initial-theme="compare"] .app { --stage: var(--compare); }
html[data-initial-theme="spend"] .app { --stage: var(--spend); }
/* A deep link starts with home-oriented fallback markup. Keep that layer out
   of the first frame and suppress entrance transitions until route() has
   rendered the requested chapter. */
html[data-initial-route] .home-scene { display: none; }
html[data-initial-route] .chrome,
html[data-initial-route] .module-scene,
html[data-initial-route] .transport { transition: none; }
html[data-initial-route] .app[data-view="module"] .module-scene { opacity: 1; transform: none; }
.app[data-view="home"],
.app[data-view="closing"] { grid-template-rows: 0 minmax(0,1fr) 0; }

.chrome {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: var(--safe-top) var(--page-gutter) 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 260ms ease 220ms, transform 420ms cubic-bezier(.2,.8,.2,1) 180ms;
}
.chrome > *, .transport > * { min-width: 0; }
.app[data-view="module"] .chrome { opacity: 1; pointer-events: auto; transform: none; }
.chrome[aria-hidden="true"], .transport[aria-hidden="true"] { visibility: hidden; }
.wealth-chip, .plain-button {
  appearance: none;
  border: 0;
  background: transparent;
}
.wealth-chip {
  --wealth-chip-number-size: clamp(25px,3vw,40px);
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  text-align: left;
}
.wealth-chip strong { display: inline-block; font-size: var(--wealth-chip-number-size); line-height: .8; letter-spacing: -.07em; }
.wealth-chip strong span { display: inline; font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; }
.wealth-chip-label, .chapter-title span, .source-button {
  font: 500 10px/1.2 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wealth-chip-label {
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: space-between;
  height: calc(var(--wealth-chip-number-size) * .8 - 5px);
  font-size: max(9px,calc(var(--wealth-chip-number-size) * .325));
  line-height: .82;
  white-space: nowrap;
}
.wealth-chip-label b, .wealth-chip-label i { display: block; font: inherit; }
.chapter-title { display: flex; align-items: baseline; gap: 9px; }
.chapter-title strong { font-size: 15px; font-weight: 600; }
.source-button { justify-self: end; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--ink); }

.stage { position: relative; min-height: 0; overflow: hidden; }
.home-scene, .module-scene, .closing-scene { position: absolute; inset: 0; }
.home-scene {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px,4vw,56px);
  padding-top: max(28px,7vh);
  transition: opacity 250ms ease, transform 650ms cubic-bezier(.22,.75,.2,1);
}
.app[data-view="module"] .home-scene { opacity: 0; pointer-events: none; transform: scale(.96); }
.home-subtitle { margin: clamp(24px,4vh,48px) 0 0; font-size: clamp(17px,2vw,28px); letter-spacing: -.025em; }
.home-statement {
  max-width: 1200px;
  margin: 0;
  font-size: clamp(70px,8.8vw,134px);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.062em;
  text-wrap: balance;
}
.home-line { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
/* The tall dollar sign makes the final line look closer than the line boxes
   really are. Add an optical gap here without loosening the first two lines. */
.home-line:last-child { margin-top: .05em; }
.home-wealth {
  display: inline-block;
  padding-bottom: .025em;
  border-bottom: .065em solid currentColor;
  white-space: nowrap;
}
.home-source {
  margin-top: clamp(10px,1.5vh,17px);
  font: 500 clamp(10px,1vw,12px)/1.4 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-source a,
.closing-source a { color: inherit; }
.wealth-transfer-hidden { visibility: hidden !important; }
/* The headline-to-header transition uses a viewport-sized SVG overlay. The
   source scenes pause their own transitions while that FLIP animation runs. */
.wealth-flight {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  pointer-events: none;
}
.app[data-wealth-transfer] .chrome,
.app[data-wealth-transfer] .home-scene { transition: none !important; }
.lens-menu {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  margin-top: clamp(24px,5vh,58px);
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}
.lens-menu button {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 155px;
  padding: 16px 16px 10px;
  border: 0;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  text-align: left;
  transition: color 160ms ease, background 160ms ease;
}
.lens-menu button[data-visited="true"]::after {
  content: "✓ Done";
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 10px 7px;
  color: var(--stage);
  background: var(--ink);
  font: 500 clamp(10px,.8vw,12px)/1 "DM Mono",monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lens-menu button:hover, .lens-menu button:focus-visible { color: var(--stage); background: var(--ink); outline-offset: -4px; }
.lens-menu button[data-visited="true"]:hover::after,
.lens-menu button[data-visited="true"]:focus-visible::after { color: var(--ink); background: var(--stage); }
.lens-menu span { display: block; font: 500 clamp(12px,1vw,15px) "DM Mono",monospace; }
.lens-menu strong { display: block; margin-top: 15px; max-width: 12ch; font-size: clamp(22px,1.8vw,30px); line-height: .95; letter-spacing: -.035em; }
.lens-menu small { display: block; margin-top: 8px; max-width: 20ch; font: 600 clamp(19px,1.45vw,24px)/1.06 "Space Grotesk",sans-serif; letter-spacing: -.025em; }
.home-summary-button {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 16px;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  font: 500 11px "DM Mono",monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.module-scene {
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  transition: opacity 260ms ease 160ms, transform 620ms cubic-bezier(.22,.75,.2,1) 120ms;
}
.closing-scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px,4vw,58px);
}
.closing-source { font: 500 10px "DM Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }
.closing-owner { margin: 16px 0 0; font-size: clamp(19px,2.2vw,34px); font-weight: 600; letter-spacing: -.035em; }
.closing-number { display: flex; flex-direction: column; gap: 16px; margin: 18px 0 0; font-size: clamp(78px,13vw,196px); font-weight: 600; line-height: .72; letter-spacing: -.08em; }
.closing-number span:last-child { font-size: .48em; line-height: .78; letter-spacing: -.065em; }
.closing-copy { margin: 28px 0 0; font-size: clamp(18px,2vw,28px); letter-spacing: -.03em; }
.closing-facts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: clamp(26px,5vh,54px); border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.closing-facts div { min-width: 0; padding: 14px 12px 16px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.closing-facts strong { display: block; font-size: clamp(17px,1.8vw,27px); line-height: 1; letter-spacing: -.04em; }
.closing-facts span { display: block; margin-top: 7px; font: 500 10px/1.3 "DM Mono",monospace; text-transform: uppercase; }
.closing-button { align-self: flex-start; min-height: 44px; margin-top: 24px; padding: 10px 0; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font: 500 11px "DM Mono",monospace; text-transform: uppercase; }
.app[data-view="module"] .module-scene { opacity: 1; pointer-events: auto; transform: none; }
.module { position: absolute; inset: 0; display: none; padding: var(--page-gutter); }
.module[data-active="true"] { display: block; }
.module-copy { position: relative; z-index: 5; }
.step-kicker {
  font: 500 clamp(10px,1vw,12px)/1.4 "DM Mono",monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.step-number {
  margin-top: 13px;
  font-size: clamp(56px,9vw,146px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.075em;
}
.module-copy p {
  max-width: 38ch;
  margin: 24px 0 0;
  font-size: clamp(16px,1.8vw,25px);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.visual-frame canvas { display: block; width: 100%; height: 100%; }

.cash-layout { height: 100%; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); align-items: center; gap: clamp(25px,5vw,80px); }
.cash-frame { height: min(63vh,650px); min-height: 320px; }
.cash-copy { min-width: 0; align-self: center; overflow: visible; }
.cash-copy .step-number { max-width: 13ch; font-size: clamp(42px,5.5vw,86px); line-height: .88; }

.homes-layout { position: relative; height: 100%; display: grid; grid-template-columns: minmax(300px,1.05fr) minmax(320px,.95fr); align-items: center; gap: clamp(24px,5vw,80px); }
.homes-illustration { height: min(62vh,640px); }
.homes-copy { grid-column: 2; min-width: 0; }
.homes-copy .step-number { max-width: 12ch; font-size: clamp(43px,5.4vw,86px); line-height: .88; }
.homes-copy p { max-width: 42ch; }
.calendar {
  position: absolute;
  left: clamp(8px,5vw,70px);
  top: 50%;
  width: min(42vw,500px);
  min-width: 420px;
  padding: 20px;
  border: 3px solid var(--ink);
  background: rgba(255,255,255,.08);
  transform: translateY(-50%) rotate(-1deg);
}
.calendar-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 15px; border-bottom: 2px solid var(--ink); }
.calendar-head strong { font-size: clamp(27px,4vw,52px); letter-spacing: -.05em; }
.calendar-head span { font: 500 clamp(18px,3vw,38px) "DM Mono",monospace; }
.calendar-scale { display: flex; align-items: center; gap: 6px; padding: 9px 0 2px; font: 500 10px "DM Mono",monospace; letter-spacing: .04em; text-transform: uppercase; }
.calendar-scale i { font-style: normal; opacity: .45; }
.calendar-scale span { padding: 3px 5px; border: 1px solid transparent; }
.calendar-scale span[data-active="true"] { color: var(--stage); background: var(--ink); }
.calendar-week, .calendar-days {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(7,minmax(0,1fr));
}
.calendar-week { padding: 12px 0 8px; font: 500 10px "DM Mono",monospace; text-align: center; }
.calendar-days { border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.calendar-day {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 1;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.calendar-day::before { content: attr(data-day); position: absolute; top: 4px; left: 5px; font: 10px "DM Mono",monospace; }
.calendar-day[data-filled="true"]::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 17%;
  height: 39%;
  background: var(--ink);
  clip-path: polygon(0 42%,50% 0,100% 42%,100% 100%,61% 100%,61% 68%,39% 68%,39% 100%,0 100%);
}
.homes-conclusion {
  position: absolute;
  right: 2vw;
  top: 50%;
  width: min(42vw,600px);
  transform: translateY(-50%);
}
.homes-conclusion p { max-width: 28ch; margin: 0; font-size: clamp(23px,2.8vw,42px); font-weight: 550; line-height: 1; letter-spacing: -.045em; }
.homes-conclusion strong { display: block; margin-top: 20px; font-size: clamp(55px,6vw,92px); line-height: .78; letter-spacing: -.07em; white-space: nowrap; }
.homes-conclusion span { display: block; margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--ink); font: 600 clamp(16px,1.7vw,25px)/1.05 "Space Grotesk",sans-serif; letter-spacing: -.035em; }
.replay-button { min-height: 44px; margin-top: 14px; padding: 9px 13px; border: 1.5px solid var(--ink); background: transparent; font: 500 10px "DM Mono",monospace; text-transform: uppercase; }
/* Keep Replay's slot reserved before it becomes available so the calendar
   itself does not jump between slides. */
.calendar .replay-button[data-visible="false"] { visibility: hidden; }

.work-layout { position: relative; height: 100%; display: grid; grid-template-columns: minmax(300px,.9fr) minmax(320px,1.1fr); align-items: center; gap: clamp(24px,5vw,80px); }
.country-picker { position: absolute; top: 0; left: 0; right: 0; z-index: 9; display: flex; align-items: center; gap: 18px; }
.country-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.country-buttons button {
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: transparent;
  font: 500 10px "DM Mono",monospace;
  text-transform: uppercase;
}
.country-buttons button[aria-pressed="true"] { color: var(--stage); background: var(--ink); }
.worker-illustration { display: flex; align-items: center; justify-content: center; height: min(65vh,670px); }
.worker-illustration img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.work-copy .step-number { max-width: 13ch; font-size: clamp(41px,5.2vw,82px); line-height: .88; }
.race { position: absolute; inset: 12% 3% 8%; z-index: 8; display: flex; flex-direction: column; justify-content: center; background: var(--stage); }
.race-heading { margin: 0 0 20px 161px; }
.race-heading h3 { margin: 7px 0 0; font-size: clamp(28px,4vw,57px); line-height: .92; letter-spacing: -.055em; }
.race-heading p { max-width: 58ch; margin: 12px 0 0; font-size: clamp(13px,1.4vw,19px); line-height: 1.2; }
.race > p { margin: 25px 0 0 161px; font: 10px/1.5 "DM Mono",monospace; }
.career-growth { justify-content: flex-start; gap: clamp(8px,1.4vh,16px); }
.career-growth .race-heading { flex: none; margin: 0; }
.career-growth .race-heading h3 { max-width: 20ch; }
.career-growth .race-heading p { max-width: 68ch; }
.career-day { flex: 1; min-height: 155px; display: flex; flex-direction: column; }
.career-grid {
  flex: 1;
  min-height: 115px;
  display: grid;
  grid-template-columns: repeat(var(--career-columns,10),minmax(0,1fr));
  grid-template-rows: repeat(var(--career-rows,2),minmax(0,1fr));
  align-content: center;
  gap: clamp(2px,.42vw,6px);
  padding: clamp(7px,1.1vh,12px) 0;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.career-grid span {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: center / contain no-repeat url("./assets/work/office-worker-transparent.png?v=2026-08-08-1");
  opacity: 0;
  transform: translateY(9px) scale(.72);
  transform-origin: center bottom;
  transition: opacity 280ms ease, transform 460ms cubic-bezier(.2,.8,.2,1);
}
.career-growth[data-animate="true"] .career-grid span { opacity: 1; transform: none; }
.career-key { display: flex; justify-content: space-between; gap: 20px; padding-top: 8px; font: 500 10px/1.3 "DM Mono",monospace; letter-spacing: .025em; text-transform: uppercase; }
.career-key strong { max-width: 36ch; text-align: right; }
.career-growth > .growth-method { margin: 0; max-width: 82ch; font: 10px/1.35 "DM Mono",monospace; }

.compare-layout { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.worth-form { width: min(780px,90vw); }
.worth-form label { display: block; font-size: clamp(23px,3vw,42px); letter-spacing: -.04em; }
.worth-input-wrap { display: flex; align-items: baseline; margin-top: 30px; border-bottom: 5px solid var(--ink); }
.worth-input-wrap span { font-size: clamp(54px,9vw,130px); font-weight: 600; }
.worth-input-wrap input {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: .055em .04em .035em 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-size: clamp(70px,12vw,180px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.075em;
}
.worth-form p { font: 10px/1.4 "DM Mono",monospace; }
#worth-note { font-size: 14px; }
.worth-form .form-error { margin-top: 10px; font-weight: 500; }
.worth-example-button { min-height: 44px; margin-top: 10px; padding: 8px 0; border: 0; border-bottom: 1.5px solid var(--ink); background: transparent; font: 500 14px "DM Mono",monospace; text-transform: uppercase; }
.portrait-stage { position: absolute; inset: 17% 1% 9%; }
/* The current person occupies a full column; earlier people shrink in wealth
   proportion, with an explicit minimum mark for otherwise invisible values. */
.portrait-lineup { --current-column: clamp(250px,30vw,390px); display: grid; grid-template-columns: minmax(0,1fr); align-items: end; gap: clamp(3px,1.3vw,18px); height: 100%; padding-top: 32px; }
.lineup-person { min-width: 0; height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: end; }
.lineup-art { position: relative; min-height: 0; height: 100%; overflow: hidden; }
.lineup-art canvas { position: absolute; left: -25%; bottom: 0; display: block; width: 150%; height: 100%; transform: scale(var(--wealth-scale,1)); transform-origin: bottom center; transition: transform 800ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease; }
.lineup-person figcaption { min-height: 57px; padding-top: 9px; border-top: 1px solid transparent; }
.lineup-person figcaption strong { display: block; overflow-wrap: anywhere; font-size: clamp(10px,1.25vw,18px); line-height: .95; letter-spacing: -.035em; }
.lineup-person figcaption span { display: block; margin-top: 5px; font: 500 clamp(10px,.8vw,12px)/1.15 "DM Mono",monospace; }
.lineup-person[data-current="true"] figcaption { border-top-color: var(--ink); }
.lineup-person[data-current="true"] figcaption strong { font-weight: 700; }
.lineup-person[data-offscale="true"] .lineup-art::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; background: var(--ink); transform: translateX(-50%); }
.lineup-note { position: absolute; left: 0; bottom: -27px; font: 500 10px/1.3 "DM Mono",monospace; letter-spacing: .04em; text-transform: uppercase; }
.ratio-badge { position: absolute; top: -14%; right: 0; max-width: min(42vw,430px); padding: 8px 11px; border: 1.5px solid var(--ink); font: 500 11px/1.35 "DM Mono",monospace; text-align: center; transform: rotate(-2deg); }
.compare-copy { position: absolute; left: 0; top: 12%; bottom: auto; }
.compare-copy .step-number { max-width: 14ch; font-size: clamp(32px,4.4vw,67px); line-height: .9; }
.compare-copy p { max-width: 46ch; font-size: 14px; }
.compare-copy[data-final="true"] { top: 0; width: 100%; }
.compare-copy[data-final="true"] .step-number { max-width: 20ch; font-size: clamp(28px,3.6vw,55px); }
.compare-copy[data-final="true"] p { margin-top: 10px; }
.compare-summary { position: absolute; left: 0; right: 0; top: 39%; bottom: 0; overflow: auto; border-top: 2px solid var(--ink); }
.compare-summary-cue { display: none; padding: 8px 10px; border-bottom: 1px solid var(--ink); font: 500 10px "DM Mono",monospace; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.compare-summary table { width: 100%; min-width: 660px; border-collapse: collapse; text-align: left; }
.compare-summary th, .compare-summary td { padding: 7px 12px; border-bottom: 1px solid var(--ink); font-size: clamp(12px,1.15vw,15px); line-height: 1.15; }
.compare-summary thead th { position: sticky; top: 0; z-index: 1; background: var(--stage); font: 500 10px/1.2 "DM Mono",monospace; letter-spacing: .04em; text-transform: uppercase; }
.compare-summary tbody th { font-weight: 650; }

.spend-layout { position: relative; height: 100%; display: grid; grid-template-columns: minmax(300px,1.05fr) minmax(320px,.95fr); align-items: center; gap: clamp(25px,5vw,80px); }
.spend-picker { grid-column: 1/-1; align-self: center; }
.spend-question { display: block; max-width: 28ch; font-size: clamp(27px,4vw,60px); font-weight: 600; line-height: .94; letter-spacing: -.055em; }
.spend-question + .step-kicker { display: block; margin-top: 20px; }
.spend-options { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 20px; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.spend-option { display: grid; grid-template-columns: minmax(0,42%) minmax(0,58%); grid-template-rows: repeat(2,minmax(0,1fr)); align-items: center; column-gap: 10px; overflow: hidden; height: clamp(165px,23.5vh,220px); min-height: 0; padding: 8px 15px; border: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: transparent; text-align: left; }
.spend-option:hover, .spend-option:focus-visible { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 3px var(--ink); outline-offset: -5px; }
.spend-option[aria-pressed="true"] { position: relative; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 6px var(--ink); }
.spend-option[aria-pressed="true"]::after { content: ""; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; background: var(--ink); }
.spend-option canvas,
.spend-option img { display: block; grid-column: 2; grid-row: 1/3; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
.spend-option img { padding: clamp(5px,.7vw,10px); }
.spend-option[data-purchase="car"] img { transform: scale(.98); transform-origin: center; }
.spend-option[data-purchase="estate"] img { transform: scale(1.08); transform-origin: left center; }
.spend-option canvas { mix-blend-mode: multiply; transform: scale(var(--spend-art-scale,1)); transform-origin: center; }
.spend-option strong { display: block; grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(15px,1.45vw,22px); line-height: 1; letter-spacing: -.035em; }
.spend-option span { display: block; grid-column: 1; grid-row: 2; align-self: start; margin-top: 5px; font: 500 12px "DM Mono",monospace; }
.spend-illustration { display: flex; align-items: center; justify-content: center; height: min(62vh,640px); }
.spend-illustration img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.spend-illustration img[data-purchase="car"] { width: 92%; height: 92%; }
.spend-copy .step-number { max-width: 13ch; font-size: clamp(41px,5.2vw,82px); line-height: .88; }
.spend-clock { position: absolute; inset: 10% 3% 7%; z-index: 8; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--stage); }
.spend-clock h3 { max-width: 22ch; margin: 0; font-size: clamp(30px,4.7vw,68px); line-height: .94; letter-spacing: -.052em; }
.spend-clock > strong { display: block; margin-top: 28px; font-size: clamp(72px,10vw,152px); line-height: .76; letter-spacing: -.075em; }
.spend-clock p { margin: 27px 0 0; padding-top: 13px; border-top: 2px solid var(--ink); font: 600 clamp(16px,1.7vw,25px)/1.05 "Space Grotesk",sans-serif; letter-spacing: -.035em; }
.spend-clock .replay-button { margin-top: 20px; }

.transport {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  padding: 12px var(--page-gutter) var(--safe-bottom);
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity 260ms ease 240ms, transform 420ms cubic-bezier(.2,.8,.2,1) 200ms;
}
.app[data-view="module"] .transport { opacity: 1; pointer-events: auto; transform: none; }
.transport-button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; font: 500 13px "DM Mono",monospace; text-transform: uppercase; }
.transport-button--back { justify-self: start; }
.transport-button--next { justify-self: end; }
.transport-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.all-views-button { min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: 500 12px "DM Mono",monospace; text-transform: uppercase; }
.transport-button:disabled { opacity: .3; cursor: default; }
.step-progress { display: flex; gap: 8px; }
.step-progress button { width: 32px; height: 44px; padding: 0; border: 0; background: transparent; }
.step-progress button::after { content: ""; display: block; width: 6px; height: 6px; margin: auto; border: 1.5px solid var(--ink); border-radius: 50%; }
.step-progress button[aria-current="step"]::after { background: var(--ink); }

.sources-dialog {
  inset: 0 0 0 auto;
  width: min(560px,100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 2px solid var(--ink);
  background: var(--stage);
  color: var(--ink);
  box-shadow: none;
  overflow: hidden;
  overscroll-behavior: contain;
}
.sources-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); animation: sources-in 360ms cubic-bezier(.2,.8,.2,1); }
.sources-dialog::backdrop { background: rgba(16,17,12,.42); }
.sources-head { display: grid; grid-template-columns: minmax(0,1fr) 112px; min-height: 128px; border-bottom: 2px solid var(--ink); }
.sources-title-lockup { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 22px 28px; }
.sources-title-lockup > span { font: 500 10px/1.3 "DM Mono",monospace; letter-spacing: .09em; text-transform: uppercase; }
.sources-title-lockup strong { margin-top: 8px; font-size: clamp(39px,5vw,62px); line-height: .8; letter-spacing: -.06em; }
.sources-head button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; border-left: 2px solid var(--ink); background: transparent; }
.sources-head button span { font: 500 10px "DM Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }
.sources-head button b { font-size: 37px; font-weight: 400; line-height: .7; }
.sources-head button:hover, .sources-head button:focus-visible { color: var(--stage); background: var(--ink); outline-offset: -5px; }
.sources-scroll-cue { display: none; margin-top: 8px; font: 500 10px "DM Mono",monospace; letter-spacing: .06em; text-transform: uppercase; }
.sources-body { min-height: 0; overflow-y: auto; counter-reset: source; }
.sources-body section { counter-increment: source; padding: 27px 28px 30px; border-bottom: 2px solid var(--ink); }
.sources-body h3 { margin: 0 0 12px; font-size: 25px; line-height: 1; letter-spacing: -.035em; }
.sources-body h3::before { content: counter(source,decimal-leading-zero) " "; display: block; margin-bottom: 9px; font: 500 10px "DM Mono",monospace; letter-spacing: .08em; }
.sources-body p, .sources-body li { max-width: 51ch; font-size: 14px; line-height: 1.45; }
.sources-body p { margin: 10px 0 0; }
.sources-body ul { margin: 10px 0 0; padding-left: 18px; }
.sources-body a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--ink); color: inherit; font: 500 10px "DM Mono",monospace; text-decoration: none; text-transform: uppercase; }
.sources-body a:hover, .sources-body a:focus-visible { color: var(--stage); background: var(--ink); outline-offset: 3px; }

@keyframes sources-in {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Responsive cascade, in source order:
   1. stacked tablet/portrait base (<=820px)
   2. short desktop, then short tablet and landscape refinements
   3. narrow and short-phone composition
   4. portrait full-bleed artwork and final legibility floors
   5. reduced-motion overrides
   Several ranges deliberately overlap; later matching rules win, so do not
   reorder or merge these blocks without a full viewport regression pass. */
@media (max-width: 820px) {
  .chrome { min-height: 62px; grid-template-columns: 1fr auto 1fr; }
  .chapter-title { display: flex; }
  .chapter-title span { font-size: 9px; }
  .chapter-title strong { font-size: 12px; }
  .wealth-chip { --wealth-chip-number-size: 24px; gap: 4px; }
  .wealth-chip-label { letter-spacing: .04em; }
  .home-scene { justify-content: flex-start; overflow: auto; padding-top: max(42px,6vh); }
  .home-statement { font-size: clamp(35px,11.4vw,92px); line-height: .88; }
  .home-subtitle { margin-top: 18px; }
  .home-source { margin-top: 9px; }
  .lens-menu { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .lens-menu button { min-height: 176px; }
  .lens-menu button:last-child { grid-column: 1/-1; }
  .cash-layout, .homes-layout, .work-layout, .spend-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; gap: 12px; }
  .work-layout { padding-top: 112px; }
  .cash-layout { grid-template-rows: auto auto; align-content: center; gap: 20px; }
  .cash-layout .cash-frame { height: min(36vh,340px); }
  .cash-frame, .homes-illustration, .worker-illustration, .spend-illustration { height: min(42vh,430px); min-height: 230px; }
  .worker-illustration { height: min(36vh,340px); min-height: 190px; }
  .module-copy { padding-bottom: 8px; }
  .step-number { font-size: clamp(50px,15vw,100px); }
  .module-copy p { margin-top: 14px; font-size: 17px; }
  .calendar { left: 50%; top: 32%; width: min(70vw,390px); min-width: 0; padding: 9px; transform: translate(-50%,-50%) rotate(-1deg); }
  .calendar-scale { gap: 3px; font-size: 9px; }
  .calendar-scale span { padding: 3px; }
  .homes-copy { grid-column: 1; grid-row: 2; }
  .homes-copy .step-number { max-width: 15ch; font-size: clamp(36px,10vw,58px); line-height: .9; }
  .homes-layout[data-final="true"] .calendar { top: 27%; width: min(64vw,340px); }
  .homes-conclusion { left: 4%; right: 4%; top: auto; bottom: 2%; width: auto; transform: none; }
  .homes-conclusion p { max-width: none; font-size: clamp(15px,4.2vw,22px); line-height: 1.03; }
  .homes-conclusion strong { margin-top: 10px; font-size: clamp(34px,9.5vw,50px); }
  .homes-conclusion span { margin-top: 10px; padding-top: 8px; font-size: clamp(14px,3.8vw,19px); }
  .country-picker { position: absolute; top: 0; left: 0; right: 0; grid-column: 1; display: block; overflow: visible; padding-bottom: 5px; }
  .country-picker .step-kicker { display: block; margin-bottom: 7px; }
  .country-buttons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
  .country-buttons button { min-width: 0; padding: 6px 3px; font-size: 10px; }
  .race { inset: 15% 4% 4%; }
  .race-heading { margin: 0 0 14px; }
  .race-heading h3 { font-size: clamp(27px,9vw,42px); }
  .race-heading p { font-size: 13px; }
  .race > p { margin-left: 0; }
  .portrait-stage { inset: 14% 0 35%; }
  .portrait-lineup { --current-column: clamp(116px,34vw,155px); gap: 2px; padding-top: 12px; }
  .lineup-art canvas { left: -40%; width: 180%; }
  .lineup-person figcaption { min-height: 47px; padding-top: 6px; }
  .lineup-person figcaption strong { font-size: clamp(10px,2.4vw,12px); }
  .lineup-person figcaption span { margin-top: 3px; font-size: 10px; }
  .lineup-note { bottom: -23px; font-size: 10px; }
  .ratio-badge { top: -18%; right: 0; max-width: 76vw; padding: 6px 8px; font-size: 10px; }
  .compare-copy p { display: none; }
  .compare-copy { top: auto; bottom: 0; }
  .compare-copy[data-final="true"] p { display: block; max-width: 29ch; margin-top: 6px; font-size: 12px; line-height: 1.25; }
  .compare-copy[data-final="true"] { top: 0; bottom: auto; }
  .compare-copy[data-final="true"] .step-number { font-size: clamp(25px,7vw,38px); }
  .compare-summary { top: 35%; }
  .compare-summary-cue { display: block; }
  .compare-summary th, .compare-summary td { padding: 9px 10px; font-size: 12px; }
  .compare-summary thead th { font-size: 10px; }
  .spend-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .spend-option { display: block; height: auto; min-height: 145px; padding: 7px 10px; }
  .spend-option canvas, .spend-option img { height: 82px; }
  .spend-option strong { font-size: clamp(13px,3.4vw,17px); line-height: 1; }
  .spend-option span { margin-top: 3px; }
  .spend-question { font-size: clamp(25px,7.6vw,36px); }
  .spend-clock { inset: 4%; }
  .spend-clock h3 { font-size: clamp(27px,8vw,39px); }
  .spend-clock > strong { margin-top: 23px; font-size: clamp(58px,17vw,88px); }
  .spend-clock p { margin-top: 22px; font-size: 14px; }
  .sources-dialog { width: 100vw; border-left: 0; }
  .sources-head { grid-template-columns: minmax(0,1fr) 84px; min-height: 104px; }
  .sources-title-lockup { padding: max(18px,env(safe-area-inset-top)) 20px 16px; }
  .sources-title-lockup strong { font-size: 41px; }
  .sources-head button { border-left-width: 1.5px; }
  .sources-scroll-cue { display: block; }
  .sources-body section { padding: 23px 20px 26px; border-bottom-width: 1.5px; }
  .sources-body h3 { font-size: 23px; }
  .closing-scene { justify-content: flex-start; overflow: auto; padding-top: 82px; }
  .closing-owner { margin-top: 10px; font-size: 17px; }
  .closing-number { font-size: clamp(70px,20vw,105px); }
  .closing-copy { margin-top: 23px; }
  .closing-facts { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .closing-facts div:last-child { grid-column: 1/-1; }
  .closing-button { margin-bottom: 30px; }
  .transport { min-height: 64px; }
  .step-progress { gap: 0; }
  .step-progress button { width: 27px; }
}

@media (max-height: 700px) and (min-width: 821px) {
  .home-scene { justify-content: flex-start; overflow-y: auto; padding: 18px 4vw; }
  .home-statement { font-size: min(14vh,96px); line-height: .88; }
  .home-subtitle { margin-top: 10px; }
  .home-source { margin-top: 5px; }
  .lens-menu { margin-top: 14px; }
  .lens-menu button { min-height: 150px; }
  .module { padding-top: 10px; padding-bottom: 10px; }
  .cash-frame, .homes-illustration, .worker-illustration, .spend-illustration { height: 56vh; min-height: 0; }
  .step-kicker { font-size: 10px; }
  .cash-copy .step-number,
  .homes-copy .step-number,
  .work-copy .step-number { margin-top: 7px; font-size: clamp(32px,9vh,58px); line-height: .88; }
  .module-copy p { margin-top: 10px; font-size: 13px; line-height: 1.06; }
  .worth-form { width: min(760px,90vw); }
  .worth-form label { font-size: 20px; line-height: 1.05; }
  .worth-input-wrap { margin-top: 8px; border-bottom-width: 3px; }
  .worth-input-wrap span { font-size: 44px; }
  .worth-input-wrap input { font-size: 64px; line-height: 1; }
  .worth-form p { margin: 7px 0 0; font-size: 10px; line-height: 1.2; }
  .worth-example-button { margin-top: 3px; }
  .work-copy .step-kicker { display: none; }
  .calendar {
    left: 3vw;
    width: 43vw;
    min-width: 0;
    padding: 8px;
    border-width: 2px;
  }
  .calendar-head { min-height: 30px; padding-bottom: 4px; }
  .calendar-head strong { font-size: 22px; line-height: .9; }
  .calendar-head span { font-size: 16px; line-height: .9; }
  .calendar-scale { min-height: 18px; gap: 2px; padding: 3px 0 1px; font-size: 9px; }
  .calendar-scale span { padding: 2px 3px; }
  .calendar-week { min-height: 17px; padding: 3px 0; font-size: 10px; }
  .calendar-day { height: 19px; aspect-ratio: auto; }
  .calendar-day::before { top: 2px; left: 3px; font-size: 9px; }
  .calendar .replay-button { display: none; }
  .homes-conclusion { right: 2vw; width: 44vw; }
  .homes-conclusion p { font-size: 19px; }
  .homes-conclusion strong { margin-top: 10px; font-size: 43px; }
  .homes-conclusion span { margin-top: 10px; padding-top: 7px; font-size: 13px; }
  .compare-copy p { display: none; }
  .compare-copy[data-final="true"] .step-number { max-width: 30ch; font-size: 26px; line-height: .88; }
  .compare-copy[data-final="true"] p { display: block; position: absolute; top: 0; right: 0; width: 22ch; margin: 0; font: 500 10px/1.2 "DM Mono",monospace; text-align: right; }
  .compare-summary { top: 40%; }
  .compare-summary th, .compare-summary td { padding: 3px 8px; font-size: 10px; }
  .compare-summary thead th { font-size: 10px; }
  .race { inset: 0 3%; justify-content: flex-start; }
  .race-heading { margin: 0 0 5px; }
  .race-heading .step-kicker { font-size: 9px; }
  .race-heading h3 { margin-top: 4px; font-size: 24px; line-height: .9; }
  .race-heading p { margin-top: 6px; max-width: 78ch; font-size: 10px; line-height: 1.08; }
  .race > p { margin: 5px 0 0 143px; font-size: 9px; }
  .spend-question { font-size: 30px; }
  .spend-question + .step-kicker { margin-top: 12px; }
  .spend-options { margin-top: 12px; }
  .spend-option { min-height: 112px; height: 112px; padding: 6px 10px; }
  .spend-option canvas, .spend-option img { height: 100%; }
  .spend-option strong { font-size: 15px; }
  .spend-option span { margin-top: 2px; font-size: 11px; }
  .spend-clock { inset: 0 3%; }
  .spend-clock h3 { max-width: 31ch; font-size: 28px; line-height: .94; }
  .spend-clock > strong { margin-top: 12px; font-size: 70px; }
  .spend-clock p { margin-top: 12px; padding-top: 8px; font-size: 13px; }
  .spend-clock .replay-button { display: none; }
  .closing-scene { justify-content: flex-start; overflow: auto; padding: 10px 4vw; }
  .closing-source { font-size: 9px; }
  .closing-owner { margin-top: 4px; font-size: 17px; }
  .closing-number { gap: 4px; margin-top: 8px; font-size: 82px; }
  .closing-copy { margin-top: 10px; font-size: 16px; }
  .closing-facts { margin-top: 12px; }
  .closing-facts div { padding: 8px 10px; }
  .closing-facts strong { font-size: 17px; }
  .closing-facts span { margin-top: 5px; font-size: 9px; }
  .closing-button { margin-top: 10px; }
}

@media (max-width: 820px) and (max-height: 700px) {
  .home-scene { padding-top: 18px; }
  .home-statement { font-size: clamp(42px,min(13vh,14vw),64px); line-height: .86; }
  .home-subtitle { margin-top: 10px; font-size: 15px; }
  .home-source { margin-top: 5px; font-size: 9px; }
  .lens-menu { margin-top: 14px; }
  .lens-menu button { min-height: 164px; padding: 10px; }
  .lens-menu strong { margin-top: 8px; }
  .lens-menu small { margin-top: 6px; }
  .homes-layout:not([data-final="true"]) .calendar { top: 31%; width: min(68vw,300px); padding: 8px; }
  .homes-layout[data-final="true"] .calendar { top: 8px; width: min(68vw,350px); padding: 8px; transform: translateX(-50%) rotate(-1deg); }
  .homes-layout[data-final="true"] .calendar-head { padding-bottom: 7px; }
  .homes-layout[data-final="true"] .calendar-scale { padding-top: 5px; }
  .homes-layout[data-final="true"] .calendar-week { padding: 5px 0; }
  .homes-conclusion p { font-size: 14px; }
  .homes-conclusion strong { margin-top: 7px; font-size: 34px; }
  .homes-conclusion span { margin-top: 7px; padding-top: 6px; font-size: 12px; }
  .race { inset: 98px 4% 2%; justify-content: flex-start; }
  .race-heading { margin-bottom: 8px; }
  .race-heading .step-kicker { font-size: 9px; }
  .race-heading h3 { margin-top: 4px; font-size: 28px; }
  .race-heading p { margin-top: 8px; font-size: 12px; line-height: 1.12; }
  .race > p { margin-top: 12px; font-size: 9px; line-height: 1.35; }
}

@media (min-width: 560px) and (max-width: 820px) and (max-height: 700px) {
  .lens-menu { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .lens-menu button { grid-column: span 2; min-height: 136px; }
  .lens-menu button:nth-last-child(-n+2) { grid-column: span 3; }
  .calendar,
  .homes-layout:not([data-final="true"]) .calendar,
  .homes-layout[data-final="true"] .calendar {
    left: 2%;
    top: 50%;
    width: min(44vw,40%);
    padding: 6px;
    transform: translateY(-50%) rotate(-1deg);
  }
  .calendar-head { min-height: 28px; padding-bottom: 4px; }
  .calendar-head strong { font-size: 20px; line-height: .9; }
  .calendar-head span { font-size: 15px; line-height: .9; }
  .calendar-scale { min-height: 17px; gap: 2px; padding: 2px 0 1px; font-size: 8px; }
  .calendar-scale span { padding: 2px; }
  .calendar-week { min-height: 14px; padding: 2px 0; font-size: 9px; }
  .calendar-day { height: 16px; aspect-ratio: auto; }
  .calendar-day::before { top: 1px; left: 2px; font-size: 8px; }
  .calendar .replay-button { min-height: 36px; margin-top: 6px; padding: 5px 9px; }
  .homes-conclusion { left: 50%; right: 3%; top: 50%; bottom: auto; width: auto; transform: translateY(-50%); }
  .cash-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows: minmax(0,1fr); align-items: center; gap: 20px; }
  .cash-layout .cash-frame { height: 100%; min-height: 0; max-height: 210px; }
  .cash-copy .step-number { margin-top: 6px; max-width: 15ch; font-size: 30px; line-height: .88; }
  .cash-copy p { margin-top: 8px; font-size: 11px; line-height: 1.08; }
  .work-layout { grid-template-columns: minmax(150px,.72fr) minmax(0,1.28fr); grid-template-rows: minmax(0,1fr); gap: 12px; padding-top: 46px; }
  .country-picker { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px; }
  .country-picker .step-kicker { margin: 0; font-size: 9px; }
  .country-buttons { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 3px; }
  .country-buttons button { min-height: 44px; padding: 4px 1px; font-size: 9px; line-height: 1; }
  .worker-illustration { height: 100%; min-height: 0; max-height: 215px; }
  .work-copy { align-self: center; min-width: 0; }
  .work-copy .step-kicker { display: block; font-size: 9px; }
  .work-copy .step-number { margin-top: 6px; font-size: clamp(29px,8.5vh,34px); line-height: .88; }
  .work-copy p { margin-top: 8px; font-size: 11px; line-height: 1.08; }
  .work-layout .race { inset: 0; justify-content: flex-start; }
  .work-layout .race-heading { margin: 0 0 4px; }
  .work-layout .race-heading h3 { margin-top: 3px; font-size: 23px; line-height: .9; }
  .work-layout .race-heading p { margin-top: 5px; max-width: 78ch; font-size: 9px; line-height: 1.05; }
  .work-layout .race > p { margin: 4px 0 0 124px; font-size: 9px; }
  .worth-form { width: min(600px,90vw); }
  .worth-form label { font-size: 21px; line-height: 1.02; }
  .worth-input-wrap { margin-top: 7px; border-bottom-width: 3px; }
  .worth-input-wrap span { font-size: 40px; }
  .worth-input-wrap input { font-size: 58px; line-height: 1; }
  .worth-form p { margin: 6px 0 0; font-size: 9px; line-height: 1.15; }
  #worth-note { font-size: 13px; }
  .worth-example-button { margin-top: 2px; font-size: 13px; }
  .compare-copy[data-final="true"] .step-number { max-width: 38ch; font-size: 24px; line-height: .88; }
  .compare-copy[data-final="true"] p { display: block; position: absolute; top: 0; right: 0; width: 21ch; margin: 0; font: 500 9px/1.15 "DM Mono",monospace; text-align: right; }
  .compare-summary { top: 40%; }
  .compare-summary-cue { display: none; }
  .compare-summary th, .compare-summary td { padding: 2px 6px; font-size: 10px; }
  .compare-summary thead th { font-size: 9px; }
  .spend-layout { grid-template-columns: minmax(190px,.8fr) minmax(0,1.2fr); grid-template-rows: minmax(0,1fr); gap: 14px; }
  .spend-picker { grid-column: 1/-1; }
  .spend-question { max-width: none; font-size: 24px; line-height: .95; }
  .spend-question + .step-kicker { margin-top: 6px; }
  .spend-options { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 6px; }
  .spend-option { display: grid; grid-template-columns: minmax(0,42%) minmax(0,58%); grid-template-rows: repeat(2,minmax(0,1fr)); min-height: 100px; height: 100px; padding: 4px 8px; }
  .spend-option canvas, .spend-option img { height: 100%; }
  .spend-option strong { font-size: 14px; }
  .spend-illustration { height: 100%; min-height: 0; max-height: 210px; }
  .spend-copy { align-self: center; min-width: 0; }
  .spend-copy .step-kicker { font-size: 9px; }
  .spend-copy .step-number { margin-top: 6px; font-size: clamp(28px,8.5vh,34px); line-height: .9; }
  .spend-copy p { margin-top: 8px; font-size: 11px; line-height: 1.08; }
  .spend-clock { inset: 0 4%; }
  .spend-clock h3 { max-width: 32ch; font-size: 26px; line-height: .92; }
  .spend-clock > strong { margin-top: 10px; font-size: 64px; }
  .spend-clock p { margin-top: 10px; padding-top: 7px; font-size: 12px; }
  .spend-clock .replay-button { display: none; }
  .closing-scene { justify-content: flex-start; overflow: auto; padding: 10px 4vw; }
  .closing-source { font-size: 9px; }
  .closing-owner { margin-top: 4px; font-size: 17px; }
  .closing-number { gap: 4px; margin-top: 8px; font-size: 82px; }
  .closing-copy { margin-top: 10px; font-size: 16px; }
  .closing-facts { grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 12px; }
  .closing-facts div { padding: 8px 10px; }
  .closing-facts div:last-child { grid-column: auto; }
  .closing-facts strong { font-size: 17px; }
  .closing-facts span { margin-top: 5px; font-size: 9px; }
  .closing-button { margin-top: 10px; margin-bottom: 0; }
}

@media (max-width: 559px) and (max-height: 700px) {
  .chrome { grid-template-columns: minmax(0,1fr) auto auto; column-gap: 8px; }
  .wealth-chip { min-width: 0; gap: 3px; }
  .wealth-chip strong { font-size: 23px; }
  .wealth-chip-label { font-size: 9px; letter-spacing: .025em; }
  .chapter-title { gap: 5px; }
  .chapter-title span { font-size: 8px; }
  .chapter-title strong { font-size: 11px; }
  .home-statement { font-size: clamp(40px,min(12vh,12vw),56px); }
  .homes-layout[data-final="true"] .calendar { width: min(54vw,220px); }
  .worker-illustration { height: min(29vh,180px); min-height: 160px; }
  .spend-picker { align-self: center; }
  .spend-question { font-size: 26px; }
  .spend-question + .step-kicker { margin-top: 10px; }
  .spend-options { margin-top: 10px; }
  .spend-option { min-height: 100px; height: 100px; padding: 4px 7px; }
  .spend-option canvas, .spend-option img { height: 52px; }
  .spend-option strong { font-size: 12px; }
  .spend-option span { font-size: 10px; }
}

@media (max-width: 430px) {
  .home-statement { font-size: clamp(32px,10.4vw,46px); }

  .chrome {
    grid-template-areas:
      "wealth sources"
      "chapter chapter";
    grid-template-columns: minmax(0,1fr) auto;
    row-gap: 3px;
    min-height: 82px;
    padding: var(--safe-top) var(--page-gutter) 8px;
  }
  .wealth-chip { grid-area: wealth; }
  .chapter-title { grid-area: chapter; justify-self: start; }
  .source-button { grid-area: sources; }

  .transport {
    grid-template-columns: auto minmax(0,1fr) auto;
    column-gap: 3px;
    padding-right: 10px;
    padding-left: 10px;
  }
  .transport-button { gap: 4px; font-size: 12px; }
  .step-progress { width: 100%; justify-content: center; }
  .step-progress button { width: clamp(14px,4.6vw,20px); }
  .transport-actions { gap: 6px; }
  .all-views-button { font-size: 11px; }

  .worth-form { width: 100%; }
  .worth-form label { font-size: clamp(19px,6vw,24px); line-height: 1.05; }
  .worth-input-wrap { margin-top: 16px; border-bottom-width: 4px; }
  .worth-input-wrap span { font-size: clamp(40px,13vw,52px); }
  .worth-input-wrap input { font-size: clamp(48px,16vw,64px); }
  #worth-note { font-size: 12px; line-height: 1.3; }
  .worth-example-button { font-size: 12px; }

  .compare-layout:has(.portrait-stage:not([hidden])) { display: block; }
  .portrait-stage { inset: 12% 0 37%; }
  .portrait-lineup {
    --current-column: clamp(82px,26vw,104px);
    gap: 1px;
    padding-top: 10px;
  }
  .lineup-art canvas { left: -50%; width: 200%; }
  .lineup-person figcaption { min-height: 64px; padding-top: 4px; }
  .lineup-person figcaption strong {
    overflow-wrap: anywhere;
    font-size: clamp(7px,2.15vw,9px);
    line-height: .92;
    letter-spacing: -.02em;
  }
  .lineup-person figcaption span {
    overflow-wrap: anywhere;
    margin-top: 2px;
    font-size: clamp(6.5px,1.95vw,8px);
    line-height: 1;
  }
  .lineup-note { bottom: -29px; max-width: 100%; font-size: 8px; line-height: 1.18; }
  .ratio-badge { top: -16%; max-width: 88vw; padding: 5px 7px; font-size: 8.5px; }
  .compare-copy { top: auto; bottom: 0; width: 100%; }
  .compare-copy .step-number { max-width: 100%; font-size: clamp(27px,8.7vw,36px); line-height: .9; }
}

@media (max-width: 350px) {
  .home-scene { padding-right: 18px; padding-left: 18px; }
  .home-statement { font-size: 32px; }
  .chrome { padding-right: 12px; padding-left: 12px; }
  .wealth-chip { gap: 3px; }
  .wealth-chip-label { font-size: 8px; }
  .transport { padding-right: 6px; padding-left: 6px; }
}

@media (max-width: 430px) and (max-height: 700px) {
  .module {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px var(--page-gutter) 24px;
  }
  .cash-layout,
  .homes-layout,
  .work-layout,
  .compare-layout,
  .spend-layout {
    height: auto;
    min-height: 100%;
  }
  .cash-layout,
  .homes-layout,
  .spend-layout {
    align-content: start;
    gap: 12px;
  }
  .cash-layout .cash-frame,
  .homes-illustration,
  .worker-illustration,
  .spend-illustration {
    height: clamp(145px,31vh,190px);
    min-height: 0;
  }
  .cash-copy .step-number,
  .homes-copy .step-number,
  .work-copy .step-number,
  .spend-copy .step-number {
    margin-top: 7px;
    font-size: clamp(34px,11.2vw,45px);
    line-height: .88;
  }
  .module-copy p { margin-top: 9px; font-size: 14px; line-height: 1.1; }

  .homes-layout { min-height: 510px; }
  .homes-layout[data-final="true"] { min-height: 530px; }

  .work-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 0;
  }
  .country-picker { position: static; flex: none; padding-bottom: 0; }
  .country-buttons button { min-height: 38px; }
  .worker-illustration { flex: none; }
  .work-copy { flex: none; }
  .work-layout .race {
    position: static;
    inset: auto;
    flex: none;
    min-height: 490px;
    padding: 4px 0 18px;
  }
  .race-heading { margin-top: 0; }
  .race > p { margin-bottom: 0; }

  .compare-layout { min-height: 100%; }
  .compare-layout:has(.worth-form:not([hidden])) {
    display: flex;
    align-items: center;
  }
  .compare-layout:has(.portrait-stage:not([hidden])) .portrait-stage { inset: 6% 0 42%; }
  .compare-layout:has(.portrait-stage:not([hidden])) .ratio-badge { top: -7%; }
  .compare-layout:has(.portrait-stage:not([hidden])) .lineup-note { bottom: -20px; }
  .compare-summary { top: 34%; }
  .compare-summary-cue { padding: 4px 8px; }
  .compare-summary th, .compare-summary td { padding: 4px 8px; font-size: 10px; line-height: 1.05; }
  .compare-summary thead th { font-size: 9px; }

  .spend-layout { min-height: 520px; }
  .spend-picker { align-self: start; }
}

@media (min-width: 560px) and (max-width: 820px) and (max-height: 700px) {
  .homes-layout {
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-rows: minmax(0,1fr);
    align-items: center;
    gap: 14px;
  }
  .homes-illustration {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    min-height: 0;
    max-height: 215px;
  }
  .homes-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .homes-copy .step-number { margin-top: 6px; font-size: clamp(28px,8.5vh,34px); line-height: .88; }
  .homes-copy p { margin-top: 8px; font-size: 11px; line-height: 1.08; }
}

@media (min-width: 560px) and (max-width: 900px) and (max-height: 500px) {
  .chrome { min-height: 58px; padding-top: 10px; padding-bottom: 6px; }
  .transport { min-height: 54px; padding-top: 5px; padding-bottom: 5px; }
  .module { padding-top: 8px; padding-bottom: 8px; }

  .spend-question { max-width: none; font-size: 26px; }
  .spend-question + .step-kicker { margin-top: 6px; }
  .spend-options { margin-top: 6px; }
  .spend-option { min-height: 70px; height: 70px; padding: 3px 8px; }
  .spend-option canvas, .spend-option img { height: 100%; }
  .spend-option strong { font-size: 11px; line-height: 1; }
  .spend-option span { margin-top: 1px; font-size: 9.5px; }

  .compare-layout:has(.portrait-stage:not([hidden])) { display: block; }
  .portrait-stage { left: 46%; right: 0; top: 9%; bottom: 18%; }
  .portrait-lineup {
    --current-column: clamp(92px,16vw,132px);
    gap: 1px;
    padding-top: 7px;
  }
  .lineup-art canvas { left: -45%; width: 190%; }
  .lineup-person figcaption { min-height: 40px; padding-top: 3px; }
  .lineup-person figcaption strong { font-size: clamp(7px,1.15vw,9px); line-height: .92; }
  .lineup-person figcaption span { margin-top: 1px; font-size: clamp(6.5px,1vw,8px); line-height: 1; }
  .lineup-note { bottom: -18px; font-size: 7px; line-height: 1.1; }
  .ratio-badge { top: -17%; max-width: 49vw; padding: 5px 7px; font-size: 8px; }
  .compare-copy { left: 0; top: 10%; bottom: auto; width: 42%; }
  .compare-copy .step-number { max-width: 12ch; font-size: clamp(24px,7.5vh,32px); line-height: .9; }
  .compare-copy[data-final="true"] { top: 0; width: 100%; }
  .compare-summary { top: 34%; }
  .compare-summary th, .compare-summary td { padding: 1px 6px; font-size: 9.5px; line-height: 1.05; }
  .compare-summary thead th { font-size: 8px; }
}

@media (max-width: 720px) {
  .career-growth { inset: 3% 3% 2%; gap: 7px; }
  .career-growth .race-heading { margin: 0; }
  .career-growth .race-heading h3 { max-width: 18ch; font-size: clamp(27px,8.6vw,40px); }
  .career-growth .race-heading p { margin-top: 7px; font-size: 12px; line-height: 1.12; }
  .career-day { min-height: 210px; }
  .career-grid { min-height: 160px; grid-template-columns: repeat(var(--career-mobile-columns,7),minmax(0,1fr)); grid-template-rows: repeat(var(--career-mobile-rows,6),minmax(0,1fr)); gap: 2px; padding: 6px 0; }
  .career-key { gap: 9px; padding-top: 6px; font-size: 8px; line-height: 1.18; }
  .career-key strong { max-width: 20ch; }
  .career-growth > .growth-method { font-size: 8px; line-height: 1.25; }
}

@media (max-width: 559px) {
  .spend-option[data-purchase="car"] img {
    transform: scale(.78);
    transform-origin: center;
  }
}

/*
 * On a phone the Safari controls leave substantially less vertical room than
 * the device's nominal screen height. Keep the calendar inside its own visual
 * row. The cells retain enough height for the house symbol to remain a house,
 * while still staying clear of the site header and slide copy.
 */
@media (max-width: 559px) {
  .homes-layout:not([data-final="true"]):has(.calendar:not([hidden])) {
    grid-template-rows: minmax(252px,1fr) auto;
  }

  .calendar,
  .homes-layout:not([data-final="true"]) .calendar,
  .homes-layout[data-final="true"] .calendar {
    left: 50%;
    top: 8px;
    width: min(calc(100vw - 40px),360px);
    padding: 8px;
    border-width: 2px;
    transform: translateX(-50%) rotate(-1deg);
  }

  .homes-layout[data-final="true"] {
    height: 100%;
    min-height: 0;
  }

  .homes-layout:not(:has(.calendar:not([hidden]))) .homes-illustration {
    height: 100%;
    min-height: 0;
  }

  .calendar-head {
    min-height: 0;
    padding-bottom: 5px;
  }
  .calendar-head strong { font-size: 20px; line-height: .9; }
  .calendar-head span { font-size: 14px; line-height: .9; }
  .calendar-scale {
    min-height: 0;
    gap: 2px;
    padding: 4px 0 2px;
    font-size: 8px;
  }
  .calendar-scale span { padding: 2px; }
  .calendar-week {
    min-height: 0;
    padding: 4px 0;
    font-size: 8px;
  }
  .calendar-day { height: auto; aspect-ratio: 1.45; }
  .homes-layout[data-final="true"] .calendar-day { height: auto; aspect-ratio: 1.55; }
  .calendar-day::before { top: 2px; left: 3px; font-size: 8px; }
  .calendar-day[data-filled="true"]::after {
    left: auto;
    right: 4%;
    bottom: 8%;
    width: 48%;
    height: 54%;
  }
  .calendar .replay-button {
    min-height: 34px;
    margin-top: 6px;
    padding: 5px 9px;
    font-size: 9px;
  }
}

/* Short phones still need a smaller calendar, but never flattened cells. */
@media (max-width: 559px) and (max-height: 720px) {
  .calendar,
  .homes-layout:not([data-final="true"]) .calendar,
  .homes-layout[data-final="true"] .calendar {
    top: 0;
    width: min(calc(100vw - 40px),72vw,240px);
  }
}

@media (min-width: 560px) and (max-width: 820px) and (min-height: 701px) {
  .spend-option[data-purchase="car"] img {
    transform: scale(.78);
    transform-origin: center;
  }
}

/*
 * Let portrait-phone illustrations use the full screen width while the copy
 * keeps its normal text gutter. Transparent source padding is removed here by
 * scaling the artwork inside a clipped stage; each object keeps its own aspect
 * ratio, and the tall house gets enough vertical room rather than stretching.
 */
@media (max-width: 559px) and (orientation: portrait) {
  .cash-frame,
  .homes-illustration,
  .worker-illustration,
  .spend-illustration {
    width: calc(100% + var(--page-gutter) + var(--page-gutter));
    margin-inline: calc(0px - var(--page-gutter));
    overflow: hidden;
  }

  .worker-illustration img {
    transform: scale(1.16);
    transform-origin: center;
  }

  .work-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 0;
  }
  .country-picker { position: static; flex: none; }
  .worker-illustration,
  .work-copy { flex: none; }

  .spend-illustration img[data-purchase="phone"] { transform: scale(1.06); }
  .spend-illustration img[data-purchase="birkin"] { transform: scale(1.17); }
  .spend-illustration img[data-purchase="rolex"] { transform: scale(1.05); }
  .spend-illustration img[data-purchase="ring"] { transform: scale(1.22); }
  .spend-illustration img[data-purchase="estate"] { transform: scale(1.14); }
}

@media (max-width: 559px) and (min-height: 701px) and (orientation: portrait) {
  .homes-illustration {
    height: min(52vh,calc(100dvh - 430px),470px);
  }

  .worker-illustration {
    height: min(44vh,calc(100dvh - 535px),400px);
  }

  /* The third Working Lives claim is deliberately blunt and substantially
     longer than the first two. Give its copy the space instead of allowing
     the final line to slip beneath Safari's fixed transport controls. */
  .module--work:has(.work-layout[data-step="3"]) {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .work-layout[data-step="3"] .worker-illustration {
    height: min(34vh,calc(100dvh - 600px),330px);
    min-height: 160px;
  }
}

@media (min-width: 560px) and (max-width: 900px) and (max-height: 500px) {
  .work-layout .career-growth { inset: 0; gap: 3px; }
  .career-growth .race-heading h3 { max-width: 24ch; }
  .career-growth .race-heading p { margin-top: 4px; }
  .career-day { min-height: 100px; }
  .career-grid { min-height: 72px; gap: 1px; padding: 3px 0; }
  .career-key { padding-top: 3px; font-size: 7px; line-height: 1; }
  .career-growth > .growth-method { font-size: 7px; line-height: 1.05; }
}

/*
 * Mobile type floor. The presentation deliberately uses a wide range of
 * scales, but interface labels and explanatory copy must remain readable on
 * a real phone rather than merely surviving the layout. These rules come
 * last so compact-height optimisations cannot quietly shrink essential text
 * back into the 6–9px range.
 */
@media (max-width: 559px) {
  .wealth-chip-label {
    height: calc(var(--wealth-chip-number-size) * .8);
    justify-content: center;
    gap: 0;
    font-size: 10.5px;
    line-height: .78;
    letter-spacing: .025em;
  }
  .chapter-title span { font-size: 10.5px; }
  .chapter-title strong { font-size: 13px; }
  .source-button { font-size: 12px; }

  .home-source { font-size: 11px; line-height: 1.3; }
  .step-kicker,
  .country-picker .step-kicker,
  .work-copy .step-kicker,
  .spend-copy .step-kicker,
  .race-heading .step-kicker { font-size: 11px; line-height: 1.3; }

  .country-buttons button { font-size: 11px; line-height: 1.05; }
  .replay-button,
  .calendar .replay-button { font-size: 11px; }

  .calendar-scale,
  .calendar-week { font-size: 10px; }
  .calendar-day::before { font-size: 9.5px; }

  .career-key {
    gap: 10px;
    font-size: 10px;
    line-height: 1.18;
  }
  .career-growth > .growth-method { font-size: 10px; line-height: 1.2; }

  #worth-note { font-size: 13px; line-height: 1.3; }
  .worth-example-button { font-size: 13px; }
  .ratio-badge { font-size: 10px; line-height: 1.25; }
  .lineup-note { font-size: 10px; line-height: 1.18; }
  .lineup-person figcaption strong { font-size: 9.5px; line-height: .95; }
  .lineup-person figcaption span { font-size: 9px; line-height: 1.05; }
  .lineup-person:not([data-current="true"]) figcaption strong,
  .lineup-person:not([data-current="true"]) figcaption span { visibility: hidden; }
  .lineup-person[data-current="true"] figcaption strong { font-size: 11px; }
  .lineup-person[data-current="true"] figcaption span { font-size: 10px; }

  .compare-copy[data-final="true"] p { font-size: 14px; line-height: 1.15; }
  .compare-summary-cue { font-size: 11px; }
  .compare-summary th,
  .compare-summary td { font-size: 13px; line-height: 1.12; }
  .compare-summary thead th { font-size: 11px; }

  .spend-option strong { font-size: 15px; line-height: 1; }
  .spend-option span { font-size: 13px; line-height: 1.1; }
  .transport-button { font-size: 13px; }
  .all-views-button { font-size: 12px; }
}

@media (max-width: 559px) and (max-height: 700px) {
  .spend-option {
    height: 112px;
    min-height: 112px;
  }
  .spend-option strong { font-size: 13px; }
  .spend-option span { font-size: 11px; }
}

@media (min-width: 560px) and (max-width: 900px) and (max-height: 500px) {
  .wealth-chip-label,
  .chapter-title span { font-size: 10px; }
  .chapter-title strong { font-size: 12.5px; }
  .source-button { font-size: 10.5px; }
  .home-source { font-size: 10px; line-height: 1.2; }

  .step-kicker,
  .country-picker .step-kicker,
  .work-copy .step-kicker,
  .spend-copy .step-kicker,
  .race-heading .step-kicker { font-size: 10.5px; line-height: 1.15; }
  .module-copy p { font-size: 12.5px; line-height: 1.12; }
  .country-buttons button { font-size: 10.5px; }
  .replay-button,
  .calendar .replay-button { font-size: 10.5px; }

  .calendar-scale,
  .calendar-week { font-size: 9.5px; }
  .calendar-day::before { font-size: 9.5px; }

  .career-key { font-size: 9px; line-height: 1.1; }
  .career-growth > .growth-method { font-size: 9px; line-height: 1.1; }

  .work-layout .career-growth {
    display: grid;
    grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
    grid-template-rows: minmax(0,1fr) auto;
    align-items: center;
    gap: 5px 18px;
  }
  .career-growth .race-heading {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }
  .career-growth .race-heading h3 { font-size: 28px; }
  .career-growth .career-day {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .work-layout .career-growth > .growth-method {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 10px;
  }
  .work-layout .career-key { font-size: 10px; }

  #worth-note,
  .worth-example-button { font-size: 12.5px; }
  .ratio-badge { font-size: 9.5px; line-height: 1.15; }
  .lineup-note { font-size: 9px; line-height: 1.1; }
  .lineup-person figcaption strong { font-size: 9px; line-height: .95; }
  .lineup-person figcaption span { font-size: 8.5px; line-height: 1; }
  .lineup-person:not([data-current="true"]) figcaption strong,
  .lineup-person:not([data-current="true"]) figcaption span { visibility: hidden; }
  .lineup-person[data-current="true"] figcaption strong { font-size: 10.5px; }
  .lineup-person[data-current="true"] figcaption span { font-size: 9.5px; }

  .compare-copy[data-final="true"] p { font-size: 11.5px; line-height: 1.1; }
  .compare-summary th,
  .compare-summary td { font-size: 10.5px; line-height: 1.05; }
  .compare-summary thead th { font-size: 10px; }

  .spend-option { height: 80px; min-height: 80px; padding: 2px 8px; }
  .spend-option strong { font-size: 13px; line-height: .95; }
  .spend-option span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}