/* Kettle Money — mamabloom.app/kettlemoney
   The endless receipt. Every page is one strip of thermal paper fed out of a printer under the header, over a
   flat colour plate with one giant figure set behind the paper. Line items in the till's own mono face, the app's
   compressed figures for the totals, real screens taped on, a rubber stamp for the yes. No glow, no gradients
   that aren't paper or shadow.

   States (never needed to read the page):
   html.no-js     no script (or it failed): everything printed and in place.
   html.js        boot.js ran before first paint: the first metre of paper may print itself in (CSS only).
   html.live      site.js is driving the paper: it prints as you scroll; plates flood from the printer.
   Reduce Motion  no intro, no feed, no parallax: the static receipt, fully printed. */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
/* Anton (SIL OFL): the compressed poster face, the closest cut to the app's SF Compressed figures, on every platform. */
@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* IBM Plex Mono (SIL OFL): the till's face. */
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  --vermilion: #E8401C;
  --cobalt: #1547D6;
  --emerald: #077A46;
  --raspberry: #C2185B;
  --saffron: #F4B11A;
  --ink: #141413;
  --paper: #F5F1E8;
  --thermal: #FCFBF7;
  --print: #1A1917;
  --faint: rgba(26, 25, 23, .66);

  --text: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fig-k: 1;
  --g: clamp(16px, 4vw, 56px);
  --head: 52px;
  --printer: 76px;
  --w: min(720px, calc(100vw - 32px));
  --pad: clamp(18px, 3.6vw, 48px);
  --rfs: clamp(14px, .42vw + 9.6px, 17px);
  --ease: cubic-bezier(.2, .7, 0, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --plate: var(--vermilion);
  color-scheme: light;
}
@media (max-width: 999px) { :root { --w: min(720px, calc(100vw - 64px)); --printer: 64px; } }
@media (max-width: 599px) { :root { --w: 100vw; --head: 50px; --printer: 58px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 20px); background: var(--ink); }
body {
  margin: 0; color: var(--print);
  font: 400 17px/1.5 var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "tnum";
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
button, input { font: inherit; color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus: a stamped box, in the colour that reads on whatever is underneath. */
:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; border-radius: 1px; }
.seg__paper { --focus: var(--cobalt); }
.site-head, .menu-open .nav { --focus: var(--saffron); }
::selection { background: var(--saffron); color: var(--ink); }
.ch[data-plate="emerald"] .seg ::selection { background: var(--emerald); color: var(--paper); }
.ch[data-plate="cobalt"] .seg ::selection { background: var(--cobalt); color: var(--paper); }
.ch[data-plate="raspberry"] .seg ::selection { background: var(--raspberry); color: var(--paper); }
.ch[data-plate="vermilion"] .seg ::selection { background: var(--vermilion); color: var(--ink); }

.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--saffron); color: var(--ink); padding: 12px 16px;
  font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.skip:focus { top: 8px; }

/* ————— Type ————— */
.amt { display: inline-flex; align-items: flex-start; line-height: .8; }
.amt .cur { font-size: .42em; align-self: flex-end; margin-right: .1em; transform: translateY(-.06em); }
.amt .cur--after { align-self: flex-start; font-size: .36em; margin: .05em 0 0 .14em; transform: none; }
.amt .dec { font-size: .36em; margin: .05em 0 0 .02em; letter-spacing: 0; }
.display, .h1, .giant, .item__big, .rl--total .rl__v, .rc-h1, .rc-h2, .coupon__big, .bigstamp__word, .bigstamp__k, .brand b, .tallies .rl__v,
.zeros__total .rl__v, .cmp thead th .app, .verdicts h3, .void span, .coupon__stamp span {
  font-family: var(--display); font-weight: 400; font-synthesis: none; font-variation-settings: normal; font-stretch: normal;
  font-feature-settings: "tnum", "lnum"; letter-spacing: 0;
}

/* ————— The header: the printer's lid ————— */
.site-head { position: sticky; top: 0; z-index: 50; height: var(--head); background: var(--ink); color: var(--paper); }
.head { height: 100%; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); padding: 0 var(--g); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 30px; height: 30px; }
.brand b { font: 400 22px/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: flex; align-items: center; height: 34px; padding: 0 12px; text-decoration: none; position: relative;
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 241, 232, .82);
}
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; background: var(--vermilion); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--out); }
.nav a[data-plate="emerald"]::after { background: #1FAE6B; }
.nav a[data-plate="cobalt"]::after { background: #7FA2FF; }
.nav a[data-plate="raspberry"]::after { background: #F06C9B; }
.nav a:hover { color: var(--paper); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.here::after { transform: none; }
.nav a[aria-current="page"] { color: var(--paper); }
.lang { display: flex; gap: 2px; font: 600 12px/1 var(--mono); letter-spacing: .08em; }
.lang a, .lang span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 6px; text-decoration: none; }
.lang [aria-current] { background: var(--paper); color: var(--ink); }
.lang a:hover { background: rgba(245, 241, 232, .14); }
.head-cta { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; background: var(--vermilion); color: var(--ink);
  text-decoration: none; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.menu-btn { display: none; }
@media (max-width: 899px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; color: var(--paper); cursor: pointer; padding: 0; }
  .menu-btn span { display: block; width: 20px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: transform .3s var(--out), box-shadow .3s; }
  .site-head.open .menu-btn span { transform: rotate(45deg); box-shadow: 0 0 0 currentColor, 0 0 0 transparent; }
  .site-head.open .menu-btn span::after { content: ""; display: block; width: 20px; height: 2px; background: currentColor; transform: rotate(-90deg); }
  .site-head.open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; inset: var(--head) 0 0; z-index: 49;
    background: var(--ink); padding: 18px var(--g) 40px; overflow-y: auto; overscroll-behavior: contain;
  }
  .site-head.open .nav a {
    height: auto; min-height: 76px; padding: 10px 0; border-top: 1px dashed rgba(245, 241, 232, .3); color: var(--paper);
    font: 400 clamp(44px, 13vw, 64px)/.9 var(--display); letter-spacing: 0; text-transform: uppercase;
  }
  .site-head.open .nav a::after { left: 0; right: auto; width: 56px; bottom: 12px; height: 6px; }
  .lang a, .lang span { min-width: 44px; height: 44px; }
}
/* Phones: the launch header's App Store button pushed EN/DE under the wordmark (16-22 px at 375-402 px, 8 Oct 2026).
   It stays from 600 px up; on phones every page keeps its own App Store link and Safari shows the Smart App Banner. */
@media (max-width: 599px) { .brand b { font-size: 20px; } .head { gap: 8px; } .head-cta { display: none; } }

/* ————— Plates —————
   Each chapter sits on its own flat plate. While site.js drives the page, one fixed plate lies under the whole
   window instead, and a new colour floods it from the print head (or from the stamp) as each chapter arrives. */
.plates { display: none; position: fixed; inset: 0; z-index: -1; background: var(--vermilion); pointer-events: none; overflow: hidden; }
.plates i { position: absolute; inset: 0; will-change: clip-path; }
html.live .plates { display: block; }
.ch { position: relative; background: var(--plate); overflow-x: clip; }
html.live .ch { background: transparent; }
[data-plate="vermilion"] { --plate: var(--vermilion); --on: var(--ink); --giant: var(--ink); }
/* On the dark plates a giant is a lighter tone of the plate, never the paper's own colour (it would fuse with the strip). */
[data-plate="emerald"] { --plate: var(--emerald); --on: var(--paper); --giant: rgba(245, 241, 232, .22); }
[data-plate="cobalt"] { --plate: var(--cobalt); --on: var(--paper); --giant: rgba(245, 241, 232, .24); }
[data-plate="raspberry"] { --plate: var(--raspberry); --on: var(--paper); --giant: rgba(245, 241, 232, .24); }
[data-plate="saffron"] { --plate: var(--saffron); --on: var(--ink); --giant: var(--ink); }
[data-plate="ink"] { --plate: var(--ink); --on: var(--paper); --giant: rgba(245, 241, 232, .2); }
.items { list-style: none; margin: 0; padding: 0; }

/* ————— The printer ————— */
.printer { position: relative; z-index: 4; height: var(--printer); pointer-events: none; }
.printer__in {
  position: absolute; inset: 0; background: #0E0E0D;
  background-image: linear-gradient(180deg, #1D1D1B 0, #0E0E0D 38%, #0A0A09 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}
/* The slot: a long black mouth across the whole width, with a lip the paper slides out from under. */
.printer__slot {
  position: absolute; left: clamp(10px, 2.4vw, 40px); right: clamp(10px, 2.4vw, 40px); bottom: 12px; height: 12px; border-radius: 6px;
  background: #000; box-shadow: inset 0 3px 4px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .09);
}
.printer__in::after { /* the lower lip, over the paper's first centimetre */
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 16px; background: linear-gradient(#0B0B0A, #151514);
  border-radius: 0 0 3px 3px; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .55);
  clip-path: inset(0 calc(50% - var(--w) / 2 - 18px) -30px);
}
.printer__k {
  position: absolute; left: 50%; top: 10px; width: 46px; height: 46px; margin-left: -23px; transform: rotate(-5deg);
  box-shadow: 0 0 0 3px #0E0E0D, 0 0 0 4.5px rgba(245, 241, 232, .5); background: var(--vermilion);
}
.printer__k img { width: 100%; height: 100%; }
.printer__no { position: absolute; left: var(--g); top: 17px; font: 600 12px/1 var(--mono); letter-spacing: .14em; color: rgba(245, 241, 232, .55); text-transform: uppercase; }
.printer__led { position: absolute; right: var(--g); top: 16px; display: flex; gap: 6px; }
.printer__led i { width: 9px; height: 9px; border-radius: 50%; background: #1FAE6B; box-shadow: 0 0 0 2px rgba(31, 174, 107, .25); }
@media (max-width: 599px) {
  .printer__k { width: 38px; height: 38px; margin-left: -19px; top: 7px; }
  .printer__slot { bottom: 10px; height: 10px; }
  .printer__no { top: 14px; font-size: 12px; }
}

/* ————— Paper ————— */
.seg { position: relative; z-index: 2; width: var(--w); margin: 0 auto; }
.seg__clip { position: absolute; inset: 0 0 -1px; z-index: 0; overflow-x: visible; overflow-y: clip; pointer-events: none; }
/* Paper not yet fed shows nothing at all, not even its first pixel row. */
.seg.is-empty .seg__clip { visibility: hidden; }
.seg__paper {
  position: relative; z-index: 1; container-type: inline-size;
  padding: var(--pad); color: var(--print);
  font: 400 var(--rfs)/1.55 var(--mono); letter-spacing: .01em; font-feature-settings: "tnum", "zero" 0;
}
.seg__bg {
  position: absolute; inset: 0 0 -1px; /* one pixel over the next strip, so strips join without a seam */
  background-color: var(--thermal);
  /* thermal grain, and the faint roll of the paper towards each edge */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(60, 50, 30, .075), rgba(60, 50, 30, 0) 3.5%, rgba(60, 50, 30, 0) 96.5%, rgba(60, 50, 30, .075));
}
/* The paper's shadow on the plate: two soft falls, one per edge, so strips of paper join without a seam. */
.seg__bg::before, .seg__bg::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; z-index: -1;
}
.seg__bg::before { right: 100%; background: linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, 0)); }
.seg__bg::after { left: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, 0)); }
.seg__curl, .seg__shade { display: none; }
@media (prefers-reduced-motion: no-preference) {
html.live .seg__curl, html.js:not(.static) .seg--first .seg__curl { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 30, 10, 0), rgba(40, 30, 10, .07) 55%, rgba(255, 255, 255, .9) 82%, rgba(40, 30, 10, .18)); }
html.live .seg__shade, html.js:not(.static) .seg--first .seg__shade { display: block; position: absolute; top: 0; left: -4%; right: -4%; height: 36px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 70%); }
}
.seg.is-done .seg__curl, .seg.is-done .seg__shade, .seg.is-empty .seg__curl, .seg.is-empty .seg__shade { display: none; }

/* ————— Receipt lines ————— */
.rl { margin: 0; }
.rl--c { text-align: center; }
.rl--caps, .rl__k, .item__k { text-transform: uppercase; letter-spacing: .09em; }
.rl--row { display: flex; align-items: last baseline; gap: .7ch; }
.rl__k { flex: 0 1 auto; max-width: 78%; }
.rl__v { flex: none; text-align: right; white-space: nowrap; }
.dots {
  flex: 1 1 2ch; min-width: 1.5ch; height: .3em; align-self: last baseline; opacity: .62;
  background: radial-gradient(circle, currentColor 38%, transparent 44%) 0 100% / .62em .3em repeat-x;
}
.rl--note { color: var(--faint); }
.rl--fine { color: var(--faint); font-size: .86em; line-height: 1.5; margin-top: 1em; }
.rl--rule { height: 0; border-top: 1.5px dashed currentColor; margin: 1.2em 0; opacity: .5; }
.rl--rule.rl--double { border-top: 4.5px double currentColor; opacity: .85; }
.rc-head { text-align: center; }
.rc-head .rl--brand { font-weight: 800; font-size: 1.32em; letter-spacing: .16em; text-transform: uppercase; }
.rc-head .rl:not(.rl--brand):not(.rl--cue) { text-transform: uppercase; letter-spacing: .12em; }
.rl--cue { display: flex; justify-content: center; align-items: center; gap: .8ch; margin-top: .7em; font-size: max(12px, .86em); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #BF3016; }
.rl--cue i { font-style: normal; display: inline-block; }
html.no-js .rl--cue, html.static .rl--cue { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .rl--cue { visibility: hidden; } }

/* ————— The opening ————— */
.ch--open { --plate: var(--vermilion); min-height: calc(100svh - var(--head)); display: flex; flex-direction: column; overflow: clip; }
.open__stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding: calc(var(--stub) + 8px) var(--g) 18px; }
.seg--open { position: absolute; left: 50%; top: calc(var(--printer) - 12px); bottom: 0; margin: 0; transform: translateX(-50%); }
.seg--open .seg__paper { height: 100%; }
.seg--open .seg__paper { padding-top: calc(var(--pad) * .7 + 12px); padding-bottom: 0; }
.seg--open .rc-head { height: calc(var(--stub) - var(--pad) * .7 - 12px); }
:root { --stub: clamp(150px, 17vh, 186px); }
@media (max-width: 599px) {
  :root { --stub: 150px; }
  /* The hero is as tall as its headline, so the paper that feeds over it ends where its lines do. */
  .ch--open { min-height: 0; }
  .open__stage { padding-bottom: 14px; }
}
/* The first sentence fills the width in two lines; the second fills it in one, a size down: a justified block. */
.h1 { --fa: 5.85; --fb: 7.9; --k: 2.48; --lh: .9; color: var(--ink); line-height: var(--lh); text-transform: uppercase; width: 100%; text-align: center;
  font-size: min(calc((100vw - 2 * var(--g)) / var(--fa)), calc((100svh - var(--head) - var(--printer) - var(--stub) - 40px) / var(--k))); }
html[lang="de"] .h1 { --fa: 6.85; --fb: 7.62; --k: 3.24; --lh: 1.1; }
html[lang="de"] .rc-h2 { font-size: 9cqi; }
.h1 em { display: block; font-size: calc(var(--fa) / var(--fb) * 1em); }
.h1__l { display: block; white-space: nowrap; }
.h1__w { display: inline-block; overflow: clip; vertical-align: top; padding: .14em 0 .17em; margin: -.14em 0 -.17em; }
.h1__w > span { display: block; }
@media (max-width: 599px) {
  /* The whole headline in the first screen, under the receipt's first lines: as big as the width and height allow. */
  .h1 { --mk: 5.5; font-size: min(21vw, calc((100svh - var(--head) - var(--printer) - var(--stub) - 30px) / var(--mk))); text-align: left; }
  html[lang="de"] .h1 { --mk: 6.8; }
  .h1__l { display: inline; white-space: normal; }
  .h1 em { display: block; font-size: 1em; }
}
.h1 em { font-style: normal; color: var(--paper); }
/* No script (or it came too late) and Reduce Motion: the receipt's first lines hang at the slot; the rest of the
   opening is printed below the headline, on its own length of paper. Nothing is ever printed off the paper. */
html:not(.live) .rc-leader { display: none; }
:is(html.no-js, html.static) .seg--open, :is(html.no-js, html.static) .seg--open .seg__paper { position: static; transform: none; }
:is(html.no-js, html.static) .seg--open { margin: 0 auto; width: var(--w); }
:is(html.no-js, html.static) .seg--open .seg__clip, :is(html.no-js, html.static) .seg--open .seg__shade { display: none; }
:is(html.no-js, html.static) .seg--open .seg__paper { height: auto; padding: 4px var(--pad) var(--pad); background: var(--thermal); box-shadow: 0 -16px 28px -18px rgba(0, 0, 0, .45); }
:is(html.no-js, html.static) .seg--open .rc-head { position: absolute; z-index: 2; top: calc(var(--printer) - 12px); left: 50%; width: var(--w); height: var(--stub); transform: translateX(-50%);
  padding: calc(var(--pad) * .7 + 12px) var(--pad) 0; background: var(--thermal); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) {
html .seg--open, html .seg--open .seg__paper { position: static; transform: none; }
html .seg--open { margin: 0 auto; width: var(--w); }
html .seg--open .seg__clip, html .seg--open .seg__shade { display: none; }
html .seg--open .seg__paper { height: auto; padding: 4px var(--pad) var(--pad); background: var(--thermal); box-shadow: 0 -16px 28px -18px rgba(0, 0, 0, .45); }
html .seg--open .rc-head { position: absolute; z-index: 2; top: calc(var(--printer) - 12px); left: 50%; width: var(--w); height: var(--stub); transform: translateX(-50%);
  padding: calc(var(--pad) * .7 + 12px) var(--pad) 0; background: var(--thermal); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .45); }
}
/* While the opening plays (the script on its way), only the first lines are out; the rest waits for the live print. */
@media (prefers-reduced-motion: no-preference) { html.js:not(.live):not(.static) .rc-block--open { visibility: hidden; } }

/* ————— Chapters: a line item each ————— */
.ch__back { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.ch__word { position: sticky; top: calc(var(--head) + 4vh); display: flex; justify-content: center; }
html.live .ch__word { transition: opacity .6s ease; }
html.live .ch:not(.is-current) .ch__word { opacity: 0; }
/* The headline leaves with its plate: gone before the next colour floods in, never cut into fragments over it. */
html.live .open__stage { transition: opacity .3s ease; }
html.live .ch--open:not(.is-current) .open__stage { opacity: 0; }
.giant { display: block; white-space: nowrap; color: var(--giant); line-height: .88; will-change: transform; font-size: min(78vh, calc(125vw / var(--em, 4))); }
.giant--a, .giant--b { display: none; }
.ch--page .giant--full { display: none; } /* behind a whole page of paper it would read as slabs */
/* Wide screens: the word splits into the plate's two margins beside the paper, each part as large as its margin
   allows, so every glyph reads (the paper covers none of it). */
@media (min-width: 1200px) {
  .giant--full.has-split { display: none; }
  /* The pair lives inside its own chapter (not a sticky layer taller than it): the first word at the top of the
     left margin, the second at the foot of the right one, each as large as its margin and the chapter allow. */
  .ch__back:has(.giant--a) { container-type: size; }
  .ch__word:has(.giant--a) { position: absolute; inset: 0; height: auto; display: block; }
  .giant--a, .giant--b { --gut: calc((100vw - var(--w)) / 2 - 92px); display: block; position: absolute; color: var(--on);
    font-size: min(46cqh, calc(var(--gut) / var(--em))); }
  .giant--a { left: 26px; top: 4cqh; }
  .giant--b { right: 26px; bottom: 4cqh; text-align: right; }
  .ch--page .giant--a { top: 14cqh; }
  .ch--yes[data-state="open"] .giant--b { opacity: 0; }
  .giant--b { transition: opacity .5s ease .4s; }
}
.giant .cur { font-size: .5em; vertical-align: .62em; margin-right: .06em; }
.giant .cur--after { margin: 0 0 0 .08em; }
.items .seg__paper { padding-bottom: clamp(28px, 4svh, 56px); }
/* Reverse print, as a till does for what matters: what saying yes leaves you with. */
.rl--inv { background: var(--print); color: var(--thermal); padding: .45em .7em; margin: 1.1em -.7em 0; font-weight: 600; }
.rl--inv .rl__k { max-width: 74%; }
@media (max-width: 599px) {
  .rl--inv { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1ch; }
  .rl--inv .rl__k { max-width: none; }
  .rl--inv .dots { display: none; }
}
.rl--inv .rl__v { font-weight: 700; }

.rc-block { padding-top: .4em; }
.rc-block--open { padding-top: .2em; }
.rc-block--open .rl--rule.rl--double { margin-top: .3em; }
.rl--big { font-family: var(--display); line-height: .86; margin: .12em 0 .12em -.02em; color: var(--print); white-space: nowrap; }
.rl--plan { font-weight: 700; }
.seg--open .seg__paper { display: flex; flex-direction: column; }
.seg--open .rc-leader { flex: 1; }
.rl--safe .rl__v { font-weight: 700; }
.item { position: relative; padding-top: clamp(16px, 3svh, 36px); }
@media (min-width: 1000px) and (max-width: 1199px) {
  /* Room on the paper for the slips that hang off it. */
  /* The phones hang beside their line item, as tall as it is (never less than 340px), so no paper waits for them. */
  .item:has(.slip) { min-height: 370px; }
  .ch--yes[data-state="agreed"] .item--yes { min-height: 460px; }
  .slip { top: 2.6em; height: calc(100% - 2.8em); max-height: 600px; width: auto; aspect-ratio: 719 / 1500; }
  .slip__in, .slip .phone { height: 100%; }
  .slip .phone { width: 100%; }
  .slip--paper { height: auto; aspect-ratio: auto; width: clamp(190px, 15vw, 250px); }
  .slip--paper .slip__in { height: auto; }
}
.item__lines { margin: .6em 0 0; }
.rl--sub { color: var(--faint); }
.item__lines .rl--rule { margin: .7em 0 .9em; }
.item__h { display: flex; align-items: last baseline; gap: .7ch; font: 700 1.3em/1.3 var(--mono); margin: 0 0 .15em; }
@media (max-width: 599px) { .item__h { font-size: 1.12em; } }
.item__n { font-size: max(12px, .72em); font-weight: 500; opacity: .6; letter-spacing: .06em; align-self: first baseline; }
.item__v { white-space: nowrap; }
.item__big { display: block; color: var(--print); line-height: .86; margin: .1em 0 .14em -.02em; white-space: nowrap; }
/* fit-N: N ems of Anton fill the paper's width (worked out at build time from the font's own metrics). */
.fit-2 { font-size: min(calc(var(--w-fit, 100cqi) / 2), var(--cap, 170px)); }
.fit-3 { font-size: min(calc(var(--w-fit, 100cqi) / 3), var(--cap, 170px)); }
.fit-4 { font-size: min(calc(var(--w-fit, 100cqi) / 4), var(--cap, 170px)); }
.fit-5 { font-size: min(calc(var(--w-fit, 100cqi) / 5), var(--cap, 170px)); }
.fit-6 { font-size: min(calc(var(--w-fit, 100cqi) / 6), var(--cap, 170px)); }
.fit-7 { font-size: min(calc(var(--w-fit, 100cqi) / 7), var(--cap, 170px)); }
.fit-8 { font-size: min(calc(var(--w-fit, 100cqi) / 8), var(--cap, 170px)); }
.fit-9 { font-size: min(calc(var(--w-fit, 100cqi) / 9), var(--cap, 170px)); }
.fit-10 { font-size: min(calc(var(--w-fit, 100cqi) / 10), var(--cap, 170px)); }
.fit-11 { font-size: min(calc(var(--w-fit, 100cqi) / 11), var(--cap, 170px)); }
.fit-12 { font-size: min(calc(var(--w-fit, 100cqi) / 12), var(--cap, 170px)); }
.fit-13 { font-size: min(calc(var(--w-fit, 100cqi) / 13), var(--cap, 170px)); }
.fit-14 { font-size: min(calc(var(--w-fit, 100cqi) / 14), var(--cap, 170px)); }
.fit-15 { font-size: min(calc(var(--w-fit, 100cqi) / 15), var(--cap, 170px)); }
.fit-16 { font-size: min(calc(var(--w-fit, 100cqi) / 16), var(--cap, 170px)); }
.item .rl--note { font-size: 1.02em; }

/* ————— 02 Time: the week, printed as the app shows it; the trip's hours hatched on Friday ————— */
.week { margin: 1.1em 0 .3em; }
.week__cap { margin: 0 0 .7em; font-size: max(12px, .8em); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.week__cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 6px; align-items: end; }
.week__col { display: flex; flex-direction: column; justify-content: flex-end; text-align: center; min-width: 0; }
.week__v { font-size: max(12px, .8em); line-height: 1.2; white-space: nowrap; margin-bottom: .35em; }
.week__bar { position: relative; display: block; background: var(--print); }
.week__d { display: block; padding-top: .35em; border-top: 1.5px solid var(--print); font-weight: 700; }
.h-0 { height: 0; } .h-8 { height: calc(7em * .08); } .h-15 { height: calc(7em * .15); } .h-88 { height: calc(7em * .875); } .h-100 { height: 7em; }
.is-trip .week__v { font-weight: 700; }
.is-trip .week__bar { background: repeating-linear-gradient(-45deg, var(--print) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1.5px var(--print); }
.is-trip .week__bar i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); padding: 0 .4em; background: var(--thermal);
  font-style: normal; font-weight: 700; font-size: max(12px, .78em); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.rl--week { margin-top: .9em; font-weight: 700; }
@media (max-width: 599px) { .week__cols { gap: 0 3px; } .week__v { font-size: 12px; letter-spacing: -.02em; } }

/* ————— 03 Who: one torn slip per person, and a dashed one for when it's just you ————— */
.who { list-style: none; margin: 1.2em 0 .4em; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.who__card { position: relative; padding: .8em .75em 1.5em; background: #fff; transform: rotate(var(--r, 0deg));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 12px 18px -12px rgba(0, 0, 0, .4);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 14px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 14px 7px repeat-x; }
.who__card b { display: block; font: 400 2.5em/.92 var(--display); text-transform: uppercase; }
.who__card span { display: block; margin-top: .6em; font-size: max(12px, .8em); line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.who__card--0 { --r: -2.2deg; } .who__card--1 { --r: 1.6deg; } .who__card--2 { --r: -1deg; }
.who__card--you { display: grid; place-items: center; text-align: center; background: none; box-shadow: none; -webkit-mask: none; mask: none;
  border: 2px dashed rgba(26, 25, 23, .45); padding: .8em .6em; --r: 2deg; }
.who__card--you b { font: 700 1em/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 599px) {
  .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .who__card--you { grid-column: 1 / -1; padding: .7em; }
}

/* ————— Phones and tablets: every chapter opens on its own full-bleed plate, its giant word set to the width of the
   screen (never past it); the paper comes back through a torn perforation. ————— */
@media (max-width: 1199px) {
  .items > .ch > .ch__back, .ch--stub > .ch__back { position: relative; inset: auto; height: 38svh; display: flex; align-items: center; justify-content: center; }
  .items > .ch > .ch__back .ch__word, .ch--stub > .ch__back .ch__word { position: static; }
  /* Out here, clear of the paper, the word can be printed at full strength. */
  .items > .ch > .ch__back .giant, .ch--stub > .ch__back .giant { color: var(--on); font-size: min(30svh, calc((100vw - 40px) / var(--em))); }
  .items .seg__bg, .ch--stub .seg__bg {
    -webkit-mask: conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) top / 16px 8px repeat-x, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 16px 8px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 16px) no-repeat;
    mask: conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) top / 16px 8px repeat-x, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 16px 8px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 16px) no-repeat;
  }
  .ch--stub .seg__bg { -webkit-mask: conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) top / 16px 8px repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 8px) no-repeat;
    mask: conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) top / 16px 8px repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 8px) no-repeat; }
  .seg--open .seg__bg { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 16px 8px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 16px 8px repeat-x; }
  .items .seg__paper { padding-top: calc(var(--pad) + 14px); padding-bottom: calc(var(--pad) + 14px); }
}
@media (min-width: 600px) and (max-width: 1199px) { .items > .ch > .ch__back, .ch--stub > .ch__back { height: 34svh; } }
@media (max-width: 599px) {
  .items .seg__bg::before { right: 0; left: 0; top: 20px; bottom: auto; width: auto; height: 0; background: none; border-top: 2px dashed rgba(26, 25, 23, .28); z-index: 0; }
  .seg__bg::after { display: none; }
  .ch--stub .seg__bg::before { display: none; }
  .item { padding-top: 6px; }
  .rl__k { letter-spacing: .05em; }
}

/* ————— Slips: real screens taped onto the receipt ————— */
.slip { margin: 0; position: absolute; z-index: 3; top: var(--sy, 4.2em); width: clamp(190px, 15vw, 270px); }
.slip--r { left: calc(100% + var(--pad) - 26px); }
.slip--l { right: calc(100% + var(--pad) - 26px); }
.slip--top { --sy: 4em; left: calc(100% - 22px); }
@media (min-width: 1000px) { .slip--top { top: 4em; height: 420px; } }
.slip--hero { display: none; }
@media (min-width: 1200px) {
  .item:has(.slip), .rc-block--open { --col: clamp(190px, 14vw, 250px); display: grid; grid-template-columns: minmax(0, 1fr) var(--col);
    column-gap: 34px; align-items: start; --avail: calc(100cqi - var(--col) - 34px); min-height: 0 !important; }
  .item:has(.slip) > *, .rc-block--open > * { grid-column: 1; }
  .item:has(.slip) > .slip, .item:has(.slip) > .yes__slips, .rc-block--open > .slip { grid-column: 2; grid-row: 1 / span 30; }
  .item:has(.slip) .slip, .rc-block--open .slip { position: relative; left: auto; right: auto; top: 1.6em; width: auto; height: auto; max-height: none;
    aspect-ratio: auto; margin: 0 calc(-1 * var(--pad) - 22px) 0 0; }
  .item:has(.slip) .slip__in, .rc-block--open .slip__in { height: auto; }
  .item:has(.slip) .slip .phone, .rc-block--open .slip .phone { height: auto; width: 100%; }
  .slip--hero { display: block; }
  /* 05: the total keeps the paper's full width (the stamp lands beside it); once agreed, the two proofs are taped
     on below it side by side, the stamped receipt and Needs at €612.00. */
  .item.item--yes > * { grid-column: 1 / -1; }
  .item.item--yes:has(.slip) > .yes__slips { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--col);
    column-gap: 34px; align-items: start; margin-top: .6em; }
  .item.item--yes .yes__slips .slip { top: 0; }
  .item.item--yes .yes__slips .slip--paper { grid-column: 1; justify-self: center; width: min(250px, 70%); margin: 1.4em 0 0; }
  .item.item--yes .yes__slips .slip--r { grid-column: 2; }
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-2, .fit-3, .fit-4, .fit-5, .fit-6, .fit-7, .fit-8, .fit-9, .fit-10 { --w-fit: var(--avail, 100cqi); }
}
.slip__in { position: relative; transform: rotate(var(--tilt, -3deg)); }
.slip--a { --tilt: -4.5deg; } .slip--b { --tilt: 3.5deg; } .slip--c { --tilt: -2.5deg; } .slip--d { --tilt: 5deg; }
.slip .phone { box-shadow: inset 0 0 0 .6px rgba(20, 20, 19, .45), inset 0 1.5px 1px rgba(255, 255, 255, .9), 0 3px 4px rgba(0, 0, 0, .22), 0 26px 40px -20px rgba(0, 0, 0, .45); }
.tape {
  position: absolute; z-index: 5; top: -16px; left: 50%; width: 46%; height: 34px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(238, 230, 204, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 16% 8%, 20% 2%, 24% 9%, 100% 0, 97% 12%, 100% 24%, 96% 36%, 100% 50%, 96% 64%, 100% 78%, 97% 90%, 100% 100%, 0 100%, 3% 86%, 0 72%, 4% 58%, 0 44%, 3% 30%, 0 18%);
}
.slip--paper .slip__in { background: #fff; padding: 10px 10px 34px; box-shadow: 0 2px 3px rgba(0, 0, 0, .2), 0 28px 44px -18px rgba(0, 0, 0, .5); }
.slip__photo { width: 100%; }
@media (max-width: 999px) {
  .slip { position: relative; left: auto; right: auto; top: auto; width: min(56%, 280px); margin: 26px auto 6px; }
  .slip--second { display: none; }
  .ch .seg:not(.seg--open) .seg__paper { min-height: 0; padding-bottom: calc(var(--pad) + 24px); }
}

/* ————— Phone —————
   iPhone 17 Pro to scale: a 71.9 × 150 mm body, a silver aluminium rim about 0.95 mm wide seen
   from the front, a black glass border, and the 1206 × 2622 display 2.65 mm in from each side
   with its own corner radius. Percentages are of the body, so the device holds at any size. */
.phone {
  position: relative; isolation: isolate; aspect-ratio: 719 / 1500; border-radius: 16.4% / 7.86%;
  background: linear-gradient(142deg, #f5f5f6 0%, #b4b6ba 9%, #e9eaec 24%, #a2a4a9 46%, #dcdde0 66%, #8f9196 86%, #eeeff1 100%);
  box-shadow: inset 0 0 0 .6px rgba(20, 20, 19, .45), inset 0 1.5px 1px rgba(255, 255, 255, .9),
    0 2px 3px rgba(20, 20, 19, .22), 0 26px 44px -20px rgba(20, 20, 19, .5), 0 70px 120px -46px rgba(20, 20, 19, .6);
}
.phone::before { content: ""; position: absolute; inset: .63% 1.32%; border-radius: 15.4% / 7.38%; background: #050506;
  box-shadow: 0 0 0 .6px rgba(20, 20, 19, .7), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.phone__screen { position: absolute; inset: 1.77% 3.69%; border-radius: 13.7% / 6.3%; overflow: hidden; background: #000; z-index: 1; }
.phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__screen img[hidden] { display: none; }
.phone__screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 44%); }
.phone::after { content: ""; position: absolute; z-index: 3; top: 3%; left: 50%; width: 29%; height: 4.05%; transform: translateX(-50%); border-radius: 999px;
  background: radial-gradient(circle at 82% 50%, #232838 0 9%, #0d0f16 10% 15%, transparent 16%), #000; }
.phone__key { position: absolute; width: 1.1%; border-radius: 3px / 10px; background: linear-gradient(90deg, #86888d, #e4e5e7 48%, #9c9ea3); }
.phone__key--action { left: -.9%; top: 19.4%; height: 4.4%; }
.phone__key--up { left: -.9%; top: 27.2%; height: 7.4%; }
.phone__key--down { left: -.9%; top: 36.4%; height: 7.4%; }
.phone__key--side { right: -.9%; top: 29%; height: 11%; }
.phone__key--camera { right: -.5%; width: .7%; top: 56.5%; height: 8.2%; background: linear-gradient(90deg, #6d6f74, #c7c9cc 50%, #6d6f74); }

/* ————— Odometer: every digit a column of 0–9 that rolls to its place ————— */
.odo .w { display: inline-block; height: 1em; margin: -.1em 0; overflow: hidden; vertical-align: top; transition: width .6s var(--out);
  -webkit-mask-image: linear-gradient(transparent, #000 11%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 11%, #000 91%, transparent); }
.odo .s { display: flex; flex-direction: column; transition: transform 1.3s var(--out); transition-delay: calc(var(--d, 0) * 80ms); }
.odo .s > span { display: block; height: 1em; line-height: 1; }
/* Anton's figures stand .86 em tall: a wheel window of .88 em shows one figure and none of its neighbours. */
.giant .odo .w, .giant.odo .w { height: .88em; margin: 0; -webkit-mask-image: none; mask-image: none; }
/* Each figure gets a full em of strip but shows through a window of .88: its neighbours never peek in. */
.giant .odo .s > span, .giant.odo .s > span { height: 1em; line-height: .88; }

/* ————— 05 Sam says yes: the stamp ————— */
.item--yes { padding-top: clamp(20px, 3vw, 40px); }
.item__h--yes { display: block; margin: 0; }
.yes__btn {
  display: flex; align-items: center; gap: .7ch; width: 100%; padding: .55em .5em .55em .6em; margin: 0 -.6em; width: calc(100% + 1.1em);
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='13' y='2' width='14' height='16' rx='3' fill='%23141413'/%3E%3Crect x='6' y='18' width='28' height='7' fill='%23141413'/%3E%3Crect x='3' y='25' width='34' height='10' fill='%231547D6' stroke='%23141413' stroke-width='2'/%3E%3C/svg%3E") 20 36, pointer;
}
.yes__btn { position: relative; isolation: isolate; }
.yes__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(21, 71, 214, .14); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease-out; }
.ch--yes.holding .yes__btn::before { transform: none; transition: transform .9s linear; }
.ch--yes[data-state="agreed"] .yes__btn::before { transform: scaleX(0); }
.yes__btn:hover { background: rgba(21, 71, 214, .06); }
.yes__btn .item__k { font-size: 1em; }
.yes__btn .dots { align-self: center; transform: translateY(.3em); }
.yes__box { position: relative; flex: none; width: 2.3em; height: 2.3em; border: 3px solid currentColor; overflow: hidden; background: var(--thermal); }
.yes__hint { color: var(--cobalt) !important; font-weight: 600; }
.yes__ink { position: absolute; inset: 0; background: var(--cobalt); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .25s ease-out; }
.yes__box svg { position: absolute; inset: 8%; width: 84%; height: 84%; fill: none; stroke: var(--paper); stroke-width: 3.4; stroke-linecap: square;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s .1s var(--out); }
.ch--yes[data-state="agreed"] .yes__ink { transform: none; }
.ch--yes[data-state="agreed"] .yes__box svg { stroke-dashoffset: 0; }
.ch--yes.holding .yes__ink { transform: none; transition: transform .9s linear; }
.yes__hint { margin: 0 0 .1em; font-size: max(12.5px, .86em); letter-spacing: .12em; text-transform: uppercase; min-height: 1.5em; }
.yes__hint::after { content: " ↓"; }
.yes { position: relative; }
html.no-js .yes__hint { visibility: hidden; }
.yes__hint.nudge { animation: nudge .4s; }
.rl--total { display: block; margin-top: 1.2em; }
.rl--total .rl__k { display: flex; max-width: none; gap: .7ch; }
.rl--total .rl__k::after { content: ""; flex: 1; height: .3em; align-self: baseline; opacity: .62; background: radial-gradient(circle, currentColor 38%, transparent 44%) 0 100% / .62em .3em repeat-x; }
.rl--total .dots { display: none; }
.rl--total .rl__v { display: block; text-align: left; font-size: min(calc(var(--avail, 100cqi) / 4.6), 150px); line-height: .86; margin-top: .12em; }
.yes__was { margin-top: .6em; transition: opacity .4s; }
.yes__was s { text-decoration-thickness: 1.5px; }
.ch--yes[data-state="open"] .yes__was { opacity: 0; }
.yes__slips .slip--r { --sy: 3em; }
.yes__slips .slip--l { --sy: calc(3em + 9svh); }
.ch--yes[data-state="open"] .slip--after, .ch--yes[data-state="open"] .yes__slips { display: none; }
.ch--yes[data-state="open"] { --plate: var(--ink); }
/* Each strip lies over the one printed after it, so its phones, their shadows and the stamp run on over the next
   strip instead of being cut by it (no tone steps where strips join). */
.items > .ch:nth-child(1) .seg { z-index: 19; } .items > .ch:nth-child(2) .seg { z-index: 18; }
.items > .ch:nth-child(3) .seg { z-index: 17; } .items > .ch:nth-child(4) .seg { z-index: 16; }
.items > .ch:nth-child(5) .seg { z-index: 15; } .items > .ch:nth-child(6) .seg { z-index: 14; }
.ch--open .seg { z-index: 20; } .ch--stub .seg { z-index: 13; } .ch--coupon .seg { z-index: 12; }

/* The stamp itself: bigger than the receipt, across the page. */
/* Where it rests once it has landed: across the total, the width of the receipt (site.js slams it in at full size first). */
.rl--total .rl__v { position: relative; }
.bigstamp {
  --settle: .26; position: absolute; left: 74%; top: 46%; z-index: 6; display: block; width: min(1180px, 94vw); pointer-events: none;
  font-family: var(--display); text-align: left; letter-spacing: 0;
  transform: translate(-50%, -50%) rotate(-9deg) scale(var(--settle)); color: var(--cobalt); mix-blend-mode: multiply;
}
@media (max-width: 999px) { .bigstamp { --settle: .44; } }
@media (max-width: 599px) { .bigstamp { --settle: .5; left: 75%; } }
.bigstamp__in {
  position: relative; display: grid; width: 100%; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .05em .12em; align-items: center;
  padding: .12em .18em .1em; border: .045em double currentColor; outline: .018em solid currentColor; outline-offset: .03em;
  font-size: min(19vw, 214px); line-height: .8;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 300px; mask-size: 300px;
}
.bigstamp__k { grid-row: 1; font-size: .42em; width: 1.3em; height: 1.3em; display: grid; place-items: center; background: var(--vermilion); color: var(--paper);
  font: 400 .42em/1 var(--display); }
.bigstamp__rule { display: block; grid-row: 1; height: 0; border-top: .035em solid currentColor; align-self: center; }
.bigstamp__word { display: block; grid-column: 1 / -1; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; text-align: center; }
html[lang="de"] .bigstamp__in { font-size: min(14.2vw, 162px); }
.splat { position: absolute; inset: -14% -6%; width: 112%; height: 128%; fill: currentColor; opacity: .9; overflow: visible; }
.splat path { transform-box: fill-box; transform-origin: center; }
.ch--yes[data-state="open"] .bigstamp { opacity: 0; visibility: hidden; }
.ch__flood { display: none; }

/* ————— 06 Ask ————— */
.rl--q { font-size: 1.28em; font-weight: 700; line-height: 1.3; margin: .5em 0 .3em; }
.rl--think { color: var(--faint); height: 0; overflow: hidden; }
.rl--a { font-size: 1.28em; line-height: 1.3; color: var(--emerald); font-weight: 800; }
.rl--a::before { content: "→ "; }

/* ————— The tear-off and the stub ————— */
.perf { position: relative; height: 0; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) calc(var(--pad) + 14px); border-top: 2px dashed rgba(26, 25, 23, .45); }
.perf i { position: absolute; left: 14px; top: -12px; display: block; padding: 0 6px; background: var(--thermal); line-height: 0; }
.perf svg { fill: none; stroke: var(--print); stroke-width: 1.8; }
.rc-h2 { font-size: calc(11cqi * var(--fig-k)); line-height: .98; text-transform: uppercase; text-align: center; margin: .3em 0 .35em; }
.rc-h2 span { display: block; color: var(--vermilion); }
.tally { list-style: none; margin: 0; padding: 0; }
.tally li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7ch; padding: .25em 0; text-transform: uppercase; letter-spacing: .06em; }
.tally li small { flex-basis: 100%; text-transform: none; letter-spacing: 0; color: var(--faint); font-size: .86em; text-align: right; }
.tally li.us { font-weight: 800; font-size: 1.18em; }
.tally li.them { color: var(--faint); }
.tally li.them .dots { opacity: .35; }
.tally li.us .rl__v b { color: var(--emerald); }
.tally .rl__v b { font-weight: 800; }
.rc-btn {
  display: inline-flex; align-items: center; gap: 1ch; min-height: 48px; padding: 0 1.4em; margin-top: 1.2em;
  background: var(--print); color: var(--thermal); text-decoration: none; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s, transform .25s var(--out), box-shadow .25s var(--out);
}
.rc-btn:hover { background: var(--vermilion); color: var(--ink); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--print); }
.seg--stub .seg__paper { padding-bottom: calc(var(--pad) + 10px); }

/* The tear: the paper above lifts away along the perforation; both edges are torn. */
.zig-b { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) bottom / 18px 9px repeat-x; }
.torn .seg--tear { transform: translate(-4px, -26px) rotate(-1.4deg); transform-origin: 100% 100%; transition: transform .8s cubic-bezier(.3, 1.35, .5, 1); }
.torn .seg--tear .seg__bg { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 18px 9px repeat-x; }
.torn-b .seg--stub .seg__bg { -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) top / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 100%, #000 90deg, #0000 0) top / 18px 9px repeat-x; }
.torn-b .perf { border-top-color: transparent; }

/* ————— The coupon: the end of every receipt ————— */
.site-foot { position: relative; }
.ch--coupon { padding-bottom: clamp(48px, 8vw, 110px); }
.end-emerald .ch--coupon { --plate: var(--emerald); } .end-cobalt .ch--coupon { --plate: var(--cobalt); }
.end-raspberry .ch--coupon { --plate: var(--raspberry); } .end-saffron .ch--coupon { --plate: var(--saffron); } .end-ink .ch--coupon { --plate: var(--ink); }
.seg--coupon .seg__paper { padding-top: calc(var(--pad) + 6px); }
.seg--coupon .seg__bg {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
}
/* A coupon cut out of the roll: a perforation to cut along above and below, printed line by line like the rest. */
.coupon { position: relative; text-align: center; margin-bottom: 12px; }
.coupon__cut { position: relative; height: 0; margin: .6em 0 clamp(22px, 4vw, 40px); border-top: 2.5px dashed rgba(26, 25, 23, .55); }
.coupon__cut i { position: absolute; left: 18px; top: -12px; display: block; padding: 0 6px; background: var(--thermal); line-height: 0; }
.coupon__cut svg { fill: none; stroke: var(--print); stroke-width: 1.8; }
.coupon__cut--end { margin: clamp(18px, 3vw, 30px) 0 .4em; }
.coupon__h { margin: 0; }
.coupon__top { display: block; font: 700 1.1em/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.coupon__big { display: block; font-size: calc(14.5cqi * var(--fig-k)); line-height: .92; text-transform: uppercase; margin: .12em 0 .1em; }
html[lang="de"] .coupon__big { font-size: calc(16cqi * var(--fig-k)); }
.coupon__for { text-transform: uppercase; letter-spacing: .14em; margin-top: .5em; }
.coupon__stamp { width: max-content; margin: .5em 4% 0 auto; transform: rotate(-7deg); color: var(--vermilion); mix-blend-mode: multiply; }
.coupon__stamp span { display: block; padding: .18em .5em .12em; border: 4px double currentColor; outline: 1.5px solid currentColor; outline-offset: 2px;
  font: 400 clamp(22px, 5cqi, 40px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.store-badge { display: inline-block; margin-top: 16px; }
.store-badge img { height: 52px; width: auto; }

/* Small print: the membership and the questions, folded. */
.fine { text-align: left; border-top: 1.5px dashed rgba(26, 25, 23, .4); margin-top: 18px; }
.coupon .fine:first-of-type { margin-top: 26px; }
.fine > summary, .fine__q > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1ch; padding: .8em 0; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.fine > summary::-webkit-details-marker, .fine__q > summary::-webkit-details-marker { display: none; }
.fine > summary::after, .fine__q > summary::after { content: "+"; margin-left: auto; font-weight: 400; }
.fine[open] > summary::after, .fine__q[open] > summary::after { content: "−"; }
.fine__body { font-size: .9em; padding-bottom: .8em; }
.fine__body p { margin: 0 0 .7em; }
.fine__q { border-top: 1px dotted rgba(26, 25, 23, .35); }
.fine__q > summary { text-transform: none; letter-spacing: 0; font-weight: 600; padding: .6em 0; }
.fine__q p { color: var(--faint); }

/* ————— Footer ————— */
/* The foot of the roll: every link and the legal lines, printed small past one more perforation. */
.foot { margin-top: clamp(28px, 4vw, 44px); font: 400 max(12px, .82em)/1.55 var(--mono); color: var(--print); }
.foot__cut { margin: 0 0 clamp(22px, 3vw, 32px); }
.foot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
.foot h2 { font: 700 max(12px, .92em)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .7em; padding-bottom: .5em; border-bottom: 1.5px dashed rgba(26, 25, 23, .45); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-block; padding: 3px 0; text-decoration: none; }
.foot li a:hover { text-decoration: underline; }
.foot__legal { margin: 26px 0 0; padding-top: 16px; border-top: 4.5px double var(--print); color: var(--faint); text-align: center; }
.foot__legal p { margin: 0 0 .6em; }
.foot__end { margin-top: 1em !important; text-transform: uppercase; letter-spacing: .14em; color: var(--print); font-weight: 700; }
@media (max-width: 719px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot li a { padding: 9px 0; } }

/* ————— Inner pages: each a receipt of its own ————— */
.ch--page { --w: min(880px, calc(100vw - 32px)); }
.ch--wide { --w: min(1200px, calc(100vw - 32px)); }
@media (min-width: 600px) and (max-width: 999px) { .ch--page, .ch--wide { --w: calc(100vw - 64px); } }
.ch--page .seg { margin-top: -12px; }
.ch--page .seg__paper { min-height: calc(100svh - var(--head) - var(--printer)); padding-bottom: calc(var(--pad) * 1.6); }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em 1.2ch; list-style: none; margin: 1.2em 0 0; padding: 0; font-size: .86em; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.crumbs li + li::before { content: "/"; margin-right: 1.2ch; opacity: .6; }
.crumbs a { text-decoration: none; border-bottom: 1px solid currentColor; }
.rc-h1 { --cap: 128px; display: block; line-height: .96; text-transform: uppercase; text-align: center; margin: .35em 0 .3em; color: var(--print); overflow-wrap: break-word; hyphens: manual; }
.rc-lead { font: 400 clamp(17px, 1.3vw, 20px)/1.5 var(--text); text-align: center; max-width: 34em; margin: 0 auto 1.2em; color: var(--print); }
.rc-caps { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: .86em; color: var(--faint); }
.rc-sec { margin-top: 2.2em; }
.rc-sec > h2, .prose h2 {
  display: flex; align-items: baseline; gap: 1ch; font: 800 1.12em/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding-top: 1.4em; margin: 1.6em 0 .8em; border-top: 1.5px dashed rgba(26, 25, 23, .45);
}
.prose { font: 400 17px/1.62 var(--text); max-width: 40em; margin: 0 auto; }
.prose h2 { font-size: 15px; }
.prose h3 { font: 700 18px/1.3 var(--text); margin: 1.4em 0 .4em; }
.prose p, .prose ul { margin: 0 0 1em; }
.prose ul { padding-left: 1.1em; }
.prose li { margin-bottom: .45em; }
.prose address { font-style: normal; margin: 0 0 1em; }
.prose a { color: var(--cobalt); }
.index { list-style: none; margin: 1.6em auto 0; padding: 0; max-width: 40em; counter-reset: ix; }
.index li { counter-increment: ix; }
.index a { display: flex; align-items: baseline; gap: .7ch; padding: .3em 0; text-decoration: none; }
.index a::before { content: counter(ix, decimal-leading-zero); opacity: .55; font-size: .86em; }
.index a:hover .rl__k { text-decoration: underline; }
.index .rl__k { max-width: 80%; text-transform: none; letter-spacing: 0; }

/* Privacy: the items that total nothing. */
.zeros { list-style: none; margin: 1.6em auto 0; padding: 0; max-width: 34em; }
.zeros li { display: flex; align-items: baseline; gap: .7ch; font-size: 1.12em; text-transform: uppercase; letter-spacing: .08em; padding: .2em 0; }
.zeros li .rl__v { font-weight: 800; }
.zeros li.zeros__total { font-size: 1.5em; font-weight: 800; border-top: 4.5px double currentColor; margin-top: .4em; padding-top: .4em; }
.zeros__total .rl__v { font: 400 2.4em/.8 var(--display); color: var(--cobalt); }

/* Support: the three addresses as receipt lines. */
.contact { list-style: none; margin: 1.6em auto 0; padding: 0; max-width: 40em; }
.contact li { padding: .6em 0; border-bottom: 1px dotted rgba(26, 25, 23, .35); }
.contact .rl--row { flex-wrap: wrap; }
.contact .rl__v a { font-weight: 700; color: var(--cobalt); }
.contact small { display: block; color: var(--faint); font-size: .9em; line-height: 1.45; margin-top: .2em; font-family: var(--text); }
.qa details { border-top: 1px dotted rgba(26, 25, 23, .35); }
.qa summary { list-style: none; cursor: pointer; display: flex; gap: 1ch; padding: .75em 0; font: 600 17px/1.35 var(--text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; margin-left: auto; font-family: var(--mono); }
.qa details[open] summary::after { content: "−"; }
.qa details p { color: var(--faint); margin: 0 0 1em; }

/* ————— Comparison tables, printed ————— */
.table-wrap { position: relative; overflow-x: auto; margin-top: 1.4em; border-top: 4.5px double var(--print); border-bottom: 4.5px double var(--print); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--print) transparent; }
.table-wrap:focus-visible { outline-offset: -3px; }
table.cmp { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 500 .92em/1.4 var(--mono); }
.cmp th, .cmp td { padding: .8em .8em; text-align: left; vertical-align: top; border-bottom: 1px dotted rgba(26, 25, 23, .4); }
.cmp thead th { position: sticky; top: 0; z-index: 2; background: var(--thermal); border-bottom: 1.5px dashed var(--print); vertical-align: bottom; }
.cmp thead th .app { display: block; font: 400 1.5em/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.cmp th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--thermal); font-weight: 700; box-shadow: 1.5px 0 0 rgba(26, 25, 23, .5); }
.cmp thead th:first-child { left: 0; z-index: 3; box-shadow: 1.5px 0 0 rgba(26, 25, 23, .5); }
.cmp thead th:first-child { width: 24%; }
.cmp thead th.kettle { width: 17%; }
.cmp .kettle { background: rgba(232, 64, 28, .08); }
.cmp thead .kettle { background: var(--vermilion); color: var(--ink); }
.cmp tr.group th { background: var(--print); color: var(--thermal); font-size: max(12px, .86em); letter-spacing: .16em; text-transform: uppercase; padding: .55em .8em; position: sticky; left: 0; }
.cmp tr.group td { background: var(--print); }
.cmp .y, .cmp .n, .cmp .p, .cmp .x { display: inline-flex; align-items: baseline; gap: .6ch; font-weight: 700; }
.cmp .y::before { content: "✓"; font-weight: 800; }
.cmp .n { color: var(--faint); font-weight: 500; }
.cmp .n::before { content: "—"; }
.cmp .x::before { content: "✕"; font-weight: 800; }
.cmp .p::before { content: "◐"; font-weight: 400; }
.cmp td small { display: block; font-size: max(12px, .86em); color: var(--faint); font-weight: 400; margin-top: .25em; line-height: 1.35; font-family: var(--text); }
.cmp td small a { color: var(--cobalt); }
.cmp .kettle .y::before { color: var(--vermilion); }
.cmp .num { font-weight: 700; }
@media (min-width: 900px) { .table-wrap--full { overflow: visible; } .table-wrap--full .cmp thead th { top: var(--head); } }
table.cmp.cmp--two { min-width: 0; }
.cmp--two thead th:first-child { width: 44%; }
.cmp--two thead th.kettle { width: 28%; }
.cmp--two .y, .cmp--two .n, .cmp--two .p, .cmp--two .x { white-space: normal; }
.cmp.is-short tr.more { display: none; }
.cmp-more { margin: 1.2em 0 0; text-align: center; }
.cmp-key { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 2ch; margin: 1em 0 0; font-size: .86em; color: var(--faint); }
.cmp-key b { white-space: nowrap; color: var(--print); }
.scroll-hint { display: none; font-size: .86em; color: var(--faint); margin: 1em 0 0; text-align: center; }
.cmp-pick { display: none; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 1.2em 0 0; }
.cmp-pick button { border: 1.5px solid var(--print); background: transparent; color: var(--print); min-height: 44px; padding: 0 12px; font: 700 .86em/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.cmp-pick button[aria-pressed="true"] { background: var(--print); color: var(--thermal); }
.rc-btn--line { background: transparent; color: var(--print); border: 1.5px solid var(--print); cursor: pointer; }
.rc-btn--line:hover { color: var(--ink); }
@media (max-width: 899px) { .scroll-hint { display: block; } }
@media (max-width: 700px) {
  .cmp-pick:not([hidden]) { display: flex; }
  .cmp-pick:not([hidden]) ~ .scroll-hint { display: none; }
  .table-wrap:has(> .cmp[data-pick]), .table-wrap:has(> .cmp--two) { overflow: visible; }
  .table-wrap:has(> .cmp[data-pick]) .cmp thead th, .table-wrap:has(> .cmp--two) .cmp thead th { top: var(--head); }
  .cmp[data-pick] { min-width: 0; }
  .cmp[data-pick] [data-app]:not([data-app="kettle"]) { display: none; }
  .cmp.cmp[data-pick="ynab"] [data-app="ynab"], .cmp.cmp[data-pick="monarch"] [data-app="monarch"], .cmp.cmp[data-pick="copilot"] [data-app="copilot"],
  .cmp.cmp[data-pick="honeydue"] [data-app="honeydue"], .cmp.cmp[data-pick="goodbudget"] [data-app="goodbudget"] { display: table-cell; width: 28%; }
  .cmp[data-pick] thead th:first-child { width: 44%; }
  .cmp[data-pick] thead th.kettle { width: 28%; }
  .cmp th, .cmp td { padding: .7em .45em; overflow-wrap: break-word; hyphens: none; }
  .cmp .y, .cmp .n, .cmp .p, .cmp .x { white-space: normal; gap: .4ch; hyphens: none; overflow-wrap: normal; }
  .cmp thead th .app { font-size: min(1.35em, 5.4vw); }
  .cmp--two thead th:first-child { width: 44%; }
  .cmp--two thead th.kettle { width: 28%; }
}
.verdicts { list-style: none; margin: 0; padding: 0; }
.verdicts li { padding: .8em 0; border-bottom: 1px dotted rgba(26, 25, 23, .35); }
.verdicts h3 { font: 400 1.6em/1 var(--display); text-transform: uppercase; }
.verdicts p { margin: .3em 0 0; font-family: var(--text); }
.verdicts a { color: var(--cobalt); font-weight: 700; font-family: var(--mono); font-size: .92em; }
.notfor { list-style: none; padding: 0; margin: 0; font-family: var(--text); }
.notfor li { position: relative; padding: .55em 0 .55em 1.8em; border-bottom: 1px dotted rgba(26, 25, 23, .35); }
.notfor li::before { content: "✕"; position: absolute; left: 0; top: .5em; font-weight: 800; color: var(--vermilion); font-family: var(--mono); }
.tallies { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(16px, 3vw, 36px); margin-top: 1.4em; padding-top: .8em; border-top: 4.5px double var(--print); }
.tallies > div + div { padding-left: clamp(16px, 3vw, 36px); border-left: 1.5px dashed rgba(26, 25, 23, .45); margin-left: calc(-1 * clamp(8px, 1.5vw, 18px)); }
.tallies .rl--row { font-weight: 800; }
.tallies .rl__v { font: 400 3.4em/.8 var(--display); }
.tallies ul { list-style: none; margin: .6em 0 0; padding: 0; font-family: var(--text); }
.tallies li { padding: .3em 0; border-bottom: 1px dotted rgba(26, 25, 23, .3); }
.tallies .us .rl__v { color: var(--vermilion); }
@media (max-width: 699px) { .tallies { grid-template-columns: 1fr; gap: 1.2em; } .tallies > div + div { padding: 1em 0 0; margin: 0; border-left: 0; border-top: 1.5px dashed rgba(26, 25, 23, .45); } }

/* 404: a slip for an item that isn't there, voided. */
.void { position: absolute; right: -2%; top: 5%; margin: 0; transform: rotate(12deg); color: var(--vermilion); mix-blend-mode: multiply; pointer-events: none; }
.void span { display: block; padding: .1em .32em 0; border: .07em double currentColor; font: 400 clamp(44px, 13cqi, 104px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.ch--void { --w: min(720px, calc(100vw - 32px)); }
.nf__other { margin-top: 1.1em; font-size: max(12px, .9em); }
.nf__other a { color: var(--cobalt); }
@media (max-width: 599px) { .void { position: static; width: max-content; margin: 1.4em auto .2em; transform: rotate(-7deg); } .void span { font-size: 44px; } }
/* The coupon at the end of a page is cut from the same roll: as wide as that page's paper. */
.paper-page .ch--coupon { --w: min(880px, calc(100vw - 32px)); }
.paper-wide .ch--coupon { --w: min(1200px, calc(100vw - 32px)); }
.paper-void .ch--coupon { --w: min(720px, calc(100vw - 32px)); }
@media (min-width: 600px) and (max-width: 999px) { .paper-page .ch--coupon, .paper-wide .ch--coupon { --w: calc(100vw - 64px); } }
@media (max-width: 1199px) { .perf i { top: 2px; } }
.nf .rl--row { font-size: 1.15em; }
.nf .rl__v { font-weight: 800; }

/* ════════════════════════════════ Motion ════════════════════════════════
   Everything below is decoration on top of a page that is already complete. */

/* The paper that hasn't been fed yet (while site.js drives it), and the lines that print as it passes. */
html.live .seg__clip, html.live .seg__bg, html.live .seg__shade { will-change: transform; }
html.live [data-l] { transition: opacity .45s cubic-bezier(.3, .6, .3, 1); }
html.live [data-l]:not(.on) { opacity: 0; transition: none; }
html.live .slip[data-l]:not(.on) .slip__in { opacity: 0; transform: translateY(-40px) rotate(calc(var(--tilt) + 9deg)) scale(1.1); }
html.live .slip[data-l] { transition: none; opacity: 1; }
html.live .slip[data-l].on .slip__in { animation: slap .6s cubic-bezier(.2, 1.5, .45, 1) both; }
@keyframes slap { from { opacity: 0; transform: translateY(-40px) rotate(calc(var(--tilt) + 9deg)) scale(1.1); } 40% { opacity: 1; } to { opacity: 1; transform: rotate(var(--tilt)); } }
html.live .rl--think { transition: height .3s; }
html.live .item--ask.thinking .rl--think { height: 1.55em; }
html.live .item--ask.thinking .rl--a { opacity: 0; }
html.live .rl--a { transition: opacity .3s; }

@media (prefers-reduced-motion: no-preference) {
  /* The first seconds on the home page: the window floods vermilion from the slot, the printer drops, the K
     stamps onto it, the headline rises, and the first lines feed out a line at a time. Scrolling skips it. */
  html.js:not(.static):not(.live) .ch--open { background: var(--ink); }
  html.js:not(.static) .ch--open::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--vermilion); animation: flood-in .8s cubic-bezier(.6, 0, .2, 1) .1s both; }
  html.live .ch--open::before, html.intro-skip .ch--open::before { display: none; }
  html.js:not(.static) .ch--open .printer__in { animation: drop .55s cubic-bezier(.3, 1.45, .55, 1) .12s both; }
  html.js:not(.static) .ch--open .printer__k { animation: kstamp .5s cubic-bezier(.2, 1.7, .4, 1) .62s both; }
  html.js:not(.static) .ch--open .printer__slot { animation: chatter .07s steps(2) 1.02s 18; }
  html.js:not(.static) .ch--open .printer__led i { animation: blink .14s steps(2) 1s 9; }
  html.js:not(.static) .h1__w > span { animation: rise .9s var(--out) both; animation-delay: calc(.42s + var(--i, 0) * .1s); }
  html.js:not(.static) .seg--first .seg__curl { animation: appear .01s 1s both; }
  html.js:not(.static) .h1__l:nth-child(2) .h1__w > span { --i: 1; } html.js:not(.static) .h1__l:nth-child(3) .h1__w > span { --i: 2; } html.js:not(.static) .h1__l:nth-child(4) .h1__w > span { --i: 3; }
  html.js:not(.static) .seg--first .seg__clip { animation: feed-clip 1.25s steps(7, end) 1s both; }
  html.js:not(.static) .seg--first .seg__bg { animation: feed-paper 1.25s steps(7, end) 1s both; }
  html.js:not(.static) .seg--first .seg__shade { animation: feed-shade 1.25s steps(7, end) 1s both; }
  html.js:not(.static) .ch--page .seg--first .seg__paper { animation: feed-lines .7s steps(6, end) .05s both; }
  html.js:not(.static) .seg--first .rc-head .rl { animation: ink-in .35s ease-out both; }
  html.js:not(.static) .seg--first .rc-head .rl:nth-child(1) { animation-delay: 1.15s; } html.js:not(.static) .seg--first .rc-head .rl:nth-child(2) { animation-delay: 1.45s; }
  html.js:not(.static) .seg--first .rc-head .rl:nth-child(3) { animation-delay: 1.75s; } html.js:not(.static) .seg--first .rc-head .rl:nth-child(4) { animation-delay: 2.05s; }
  html.js:not(.static) .seg--first .rc-head .rl--cue i { animation: ink-in .35s ease-out 2.05s both, bob 1.5s ease-in-out 2.6s infinite; }
  html.js:not(.static) .seg:not(.seg--first) .seg__clip { transform: translateY(-100%); }
  html.js:not(.static):not(.live) .seg:not(.seg--first) .seg__clip { visibility: hidden; }
  html.js:not(.static) .seg:not(.seg--first) .seg__bg { transform: translateY(100%); }
  html.js:not(.static):not(.live) .seg:not(.seg--first) .seg__paper { visibility: hidden; }
  html.intro-skip .ch--open *, html.intro-skip .ch--open *::before { animation: none !important; }
  /* Inner pages feed their first screen in, quickly. */
  html.js:not(.static) .ch--page .seg--first { --stub: calc(88svh - var(--head) - var(--printer) + 12px); }
  html.js:not(.static) .ch--page .seg--first .seg__clip, html.js:not(.static) .ch--page .seg--first .seg__bg, html.js:not(.static) .ch--page .seg--first .seg__shade { animation-duration: .7s; animation-delay: .05s; animation-timing-function: steps(6, end); }
  html.js:not(.static) .ch--page .seg--first .rc-head .rl { animation: none; }
  html.live .seg__clip, html.live .seg__bg, html.live .seg__paper, html.live .seg__shade { animation: none !important; }

  /* Page turns: the old receipt is torn off upwards; the next one feeds down out of the printer. */
  @view-transition { navigation: auto; }
  .site-head { view-transition-name: site-head; }
  ::view-transition-old(site-head), ::view-transition-new(site-head) { animation: none; }
  ::view-transition-old(root) { animation: tear-off .5s cubic-bezier(.55, 0, .75, .3) both; transform-origin: 100% 0; }
  ::view-transition-new(root) { animation: feed-in .75s steps(9, end) .12s both; }

  .coupon__cut i { animation: snip 3.4s ease-in-out infinite; }
  html.live .ch--yes[data-state="open"] .yes__box { animation: beckon 1.8s ease-in-out infinite; }
  html.live .ch--yes.holding .yes__box { animation: none; }
  html.live .ch--yes.demo[data-state="open"]:not(.holding) .yes__ink { animation: demo-ink 1.7s cubic-bezier(.45, 0, .3, 1); }
  html.live .ch--yes.demo[data-state="open"]:not(.holding) .yes__btn::before { animation: demo-bar 1.7s cubic-bezier(.45, 0, .3, 1); }
}
@keyframes flood-in { from { clip-path: circle(0 at 50% var(--printer)); } to { clip-path: circle(150% at 50% var(--printer)); } }
@keyframes drop { from { transform: translateY(-100%); } }
@keyframes kstamp { from { transform: rotate(-26deg) scale(2.8); opacity: 0; } 50% { opacity: 1; } to { transform: rotate(-5deg); opacity: 1; } }
@keyframes chatter { 50% { transform: translateY(1px); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes rise { from { transform: translateY(104%); } }
@keyframes ink-in { from { opacity: .08; } }
@keyframes appear { from { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(4px); } }
@keyframes feed-clip { from { transform: translateY(-100%); } to { transform: translateY(min(0px, calc(-100% + var(--stub)))); } }
@keyframes feed-paper { from { transform: translateY(100%); } to { transform: translateY(max(0px, calc(100% - var(--stub)))); } }
@keyframes feed-shade { from { transform: translateY(0); } to { transform: translateY(var(--stub)); } }
@keyframes feed-lines { from { clip-path: inset(0 -50vw 100% -50vw); } to { clip-path: inset(0 -50vw max(0px, calc(100% - var(--stub))) -50vw); } }
@keyframes tear-off { to { transform: translateY(-14%) rotate(-5deg); opacity: 0; } }
@keyframes feed-in { from { clip-path: inset(0 0 100% 0); } }
@keyframes snip { 0%, 70%, 100% { transform: none; } 78% { transform: translateX(6px) rotate(-12deg); } 86% { transform: translateX(12px); } 94% { transform: translateX(16px) rotate(-12deg); } }
@keyframes demo-ink { 0%, 100% { transform: scaleY(0); } 45%, 62% { transform: scaleY(.62); } }
@keyframes demo-bar { 0%, 100% { transform: scaleX(0); } 45%, 62% { transform: scaleX(.62); } }
@keyframes beckon { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 71, 214, 0); } 50% { box-shadow: 0 0 0 7px rgba(21, 71, 214, .2); } }
@keyframes nudge { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

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

/* Lenis (MIT, self-hosted): smooth wheel scrolling on the home page. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

@media print {
  .site-head, .printer, .plates, .ch__back, .bigstamp, .slip, .menu-btn, .foot__grid { display: none !important; }
  .ch, body { background: #fff !important; }
  .seg { width: 100% !important; }
  .seg__clip, .seg__bg, .seg__paper { transform: none !important; }
  .seg__bg { background: #fff !important; }
}
/* generated: em-N sets --em for text fitted to a width */
.em-50{--em:0.5}.em-55{--em:0.55}.em-60{--em:0.6}.em-65{--em:0.65}.em-70{--em:0.7}.em-75{--em:0.75}.em-80{--em:0.8}.em-85{--em:0.85}.em-90{--em:0.9}.em-95{--em:0.95}.em-100{--em:1}.em-105{--em:1.05}.em-110{--em:1.1}.em-115{--em:1.15}.em-120{--em:1.2}.em-125{--em:1.25}.em-130{--em:1.3}.em-135{--em:1.35}.em-140{--em:1.4}.em-145{--em:1.45}.em-150{--em:1.5}.em-155{--em:1.55}.em-160{--em:1.6}.em-165{--em:1.65}.em-170{--em:1.7}.em-175{--em:1.75}.em-180{--em:1.8}.em-185{--em:1.85}.em-190{--em:1.9}.em-195{--em:1.95}.em-200{--em:2}.em-205{--em:2.05}.em-210{--em:2.1}.em-215{--em:2.15}.em-220{--em:2.2}.em-225{--em:2.25}.em-230{--em:2.3}.em-235{--em:2.35}.em-240{--em:2.4}.em-245{--em:2.45}.em-250{--em:2.5}.em-255{--em:2.55}.em-260{--em:2.6}.em-265{--em:2.65}.em-270{--em:2.7}.em-275{--em:2.75}.em-280{--em:2.8}.em-285{--em:2.85}.em-290{--em:2.9}.em-295{--em:2.95}.em-300{--em:3}.em-305{--em:3.05}.em-310{--em:3.1}.em-315{--em:3.15}.em-320{--em:3.2}.em-325{--em:3.25}.em-330{--em:3.3}.em-335{--em:3.35}.em-340{--em:3.4}.em-345{--em:3.45}.em-350{--em:3.5}.em-355{--em:3.55}.em-360{--em:3.6}.em-365{--em:3.65}.em-370{--em:3.7}.em-375{--em:3.75}.em-380{--em:3.8}.em-385{--em:3.85}.em-390{--em:3.9}.em-395{--em:3.95}.em-400{--em:4}.em-405{--em:4.05}.em-410{--em:4.1}.em-415{--em:4.15}.em-420{--em:4.2}.em-425{--em:4.25}.em-430{--em:4.3}.em-435{--em:4.35}.em-440{--em:4.4}.em-445{--em:4.45}.em-450{--em:4.5}.em-455{--em:4.55}.em-460{--em:4.6}.em-465{--em:4.65}.em-470{--em:4.7}.em-475{--em:4.75}.em-480{--em:4.8}.em-485{--em:4.85}.em-490{--em:4.9}.em-495{--em:4.95}.em-500{--em:5}.em-505{--em:5.05}.em-510{--em:5.1}.em-515{--em:5.15}.em-520{--em:5.2}.em-525{--em:5.25}.em-530{--em:5.3}.em-535{--em:5.35}.em-540{--em:5.4}.em-545{--em:5.45}.em-550{--em:5.5}.em-555{--em:5.55}.em-560{--em:5.6}.em-565{--em:5.65}.em-570{--em:5.7}.em-575{--em:5.75}.em-580{--em:5.8}.em-585{--em:5.85}.em-590{--em:5.9}.em-595{--em:5.95}.em-600{--em:6}.em-605{--em:6.05}.em-610{--em:6.1}.em-615{--em:6.15}.em-620{--em:6.2}.em-625{--em:6.25}.em-630{--em:6.3}.em-635{--em:6.35}.em-640{--em:6.4}.em-645{--em:6.45}.em-650{--em:6.5}.em-655{--em:6.55}.em-660{--em:6.6}.em-665{--em:6.65}.em-670{--em:6.7}.em-675{--em:6.75}.em-680{--em:6.8}.em-685{--em:6.85}.em-690{--em:6.9}.em-695{--em:6.95}.em-700{--em:7}.em-705{--em:7.05}.em-710{--em:7.1}.em-715{--em:7.15}.em-720{--em:7.2}.em-725{--em:7.25}.em-730{--em:7.3}.em-735{--em:7.35}.em-740{--em:7.4}.em-745{--em:7.45}.em-750{--em:7.5}.em-755{--em:7.55}.em-760{--em:7.6}.em-765{--em:7.65}.em-770{--em:7.7}.em-775{--em:7.75}.em-780{--em:7.8}.em-785{--em:7.85}.em-790{--em:7.9}.em-795{--em:7.95}.em-800{--em:8}