@charset "utf-8";
/*
 * Paper, on the marketing pages.
 *
 * One look for claimed.zip and claimedhq.com, and the same look as the phone
 * and the web app: the tokens are copied exactly from web/app/paper.css
 * (light, dark, Increase Contrast), titles in Instrument Serif, everything
 * else in the system sans, figures with tabular numbers.
 *
 * Editorial: an open top margin, page furniture (number, section name) over a
 * thin rule at the top of each section, a narrow margin column for captions
 * on wide screens, large serif headlines and italic decks. No gradients, no
 * coloured edge bars, no motion beyond a colour change.
 *
 * Served from the site root so both domains can load it: middleware.ts only
 * matches /, /pricing and /hq/*, so /paper.css and /img/* pass straight
 * through on claimedhq.com too.
 */

:root {
  color-scheme: light dark;
  --paper: #F7F7F5;
  --sheet: #FFFFFF;
  --soft: #EEEDEA;
  --hair: #E2E0DC;
  --graphite: #393737;
  --pencil: #6E6C69;
  --mint: #E7F3EE;
  --leaf: #2F7D5B;
  --warn: #B23A1E;
  --attention: #A15C00;
  --on-graphite: #F7F7F5;

  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --measure: 36rem;
  --gutter: 16px;
  --margin-col: 13rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1A1918;
    --sheet: #232220;
    --soft: #2B2A28;
    --hair: #353331;
    --graphite: #EDEBE7;
    --pencil: #C4C0BA;
    --mint: #1C2E25;
    --leaf: #8ED0AC;
    --warn: #FFB4A3;
    --attention: #F0B65A;
    --on-graphite: #1A1918;
    --ink-line: #EDEBE7;
    --ink-slip: #2B2A28;
    --ink-on-leaf: #1A1918;
    --ink-dim: rgba(26, 25, 24, 0.42);
    --ink-leaf: #8ED0AC;
    --ink-mint: #1C2E25;
    --ink-back: #353331;
  }
}
:root[data-theme="dark"] {
  --paper: #1A1918;
  --sheet: #232220;
  --soft: #2B2A28;
  --hair: #353331;
  --graphite: #EDEBE7;
  --pencil: #C4C0BA;
  --mint: #1C2E25;
  --leaf: #8ED0AC;
  --warn: #FFB4A3;
  --attention: #F0B65A;
  --on-graphite: #1A1918;
  --ink-line: #EDEBE7;
  --ink-slip: #2B2A28;
  --ink-on-leaf: #1A1918;
  --ink-dim: rgba(26, 25, 24, 0.42);
  --ink-leaf: #8ED0AC;
  --ink-mint: #1C2E25;
  --ink-back: #353331;
}

/* Increase Contrast moves the inks and the hairline, never the grounds. */
@media (prefers-contrast: more) {
  :root {
    --hair: #C9C6C1;
    --graphite: #222020;
    --pencil: #575552;
    --leaf: #246A4B;
    --warn: #963018;
    --attention: #854B00;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hair: #55524E;
    --graphite: #FAF9F7;
    --pencil: #D6D2CC;
    --leaf: #A6DEC0;
    --warn: #FFC9BC;
    --attention: #F7C97E;
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--graphite); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}
p { margin: 0 0 1em; }
.num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: -100px;
  background: var(--graphite); color: var(--on-graphite);
  padding: 12px 16px; border-radius: 8px; z-index: 10; text-decoration: none;
}
.skip:focus { top: 12px; }

.page { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--hair); }
.masthead .page { display: flex; align-items: center; gap: 4px 20px; min-height: 64px; flex-wrap: wrap; }
.wordmark {
  font-family: var(--serif); font-weight: 400; font-size: 1.875rem; line-height: 1;
  letter-spacing: -0.01em; text-decoration: none; color: var(--graphite);
  display: inline-flex; align-items: center; min-height: 44px;
  /* With large text, "for companies" goes under the name instead of off the page. */
  flex-wrap: wrap; row-gap: 4px; max-width: 100%;
}
/* The mark before the name, as on the phone's first screen. Sized to the
   serif's cap height and nudged onto its baseline, so the two read as one
   line rather than an icon beside a word. The dot is the one piece of colour. */
.wordmark .logo { width: 0.8em; height: 0.77em; margin-inline-end: 0.28em; flex-shrink: 0; position: relative; top: -0.04em; }
.wordmark .logo .dot { fill: var(--leaf); }
.wordmark .for { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); margin-inline-start: 10px; }
.masthead nav { margin-inline-start: auto; display: flex; gap: 4px 18px; flex-wrap: wrap; }
.masthead nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; color: var(--pencil); text-decoration: none;
}
.masthead nav a:hover { color: var(--graphite); }
.masthead nav a[aria-current="page"] { color: var(--graphite); }

/* ---------- type ---------- */

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; }
h1 {
  font-size: clamp(3.25rem, 13.5vw, 7.75rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.5rem, 9.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
h3 { font-size: 1.875rem; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 8px; text-wrap: balance; }
h1 em, h2 em { font-style: italic; }
.deck {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.375rem, 3.4vw, 2rem); line-height: 1.22;
  color: var(--pencil); max-width: 34ch; margin: 0 0 32px; text-wrap: pretty;
}
.kicker {
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pencil); margin: 0 0 20px;
}
.lede { font-size: 1.1875rem; max-width: var(--measure); }
.prose p { max-width: var(--measure); }
.prose strong { font-weight: 600; }
.quiet { color: var(--pencil); }
.small { font-size: 0.9375rem; }

/* ---------- hero ---------- */

.hero { padding: 56px 0 56px; }
.hero-grid { display: grid; gap: 40px; }
.hero .plain {
  font-size: 1.0625rem; max-width: var(--measure);
  border-top: 1px solid var(--graphite); padding-top: 14px; margin-top: 8px;
}

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--graphite); color: var(--on-graphite);
  font: 500 1.0625rem var(--sans); text-decoration: none; border: 1px solid var(--graphite);
}
.btn:hover { opacity: 0.9; }
.btn.secondary { background: transparent; color: var(--graphite); border-color: var(--hair); }
.btn.secondary:hover { border-color: var(--pencil); opacity: 1; }
.fine { font-size: 0.875rem; color: var(--pencil); margin: 0; }
.store-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }
.store-badge { display: inline-flex; min-height: 44px; align-items: center; }
.store-badge[hidden] { display: none; }

/* ---------- sections ---------- */

.sec { padding: 0 0 72px; }
.furniture {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--graphite);
  padding: 12px 0 0; margin: 0 0 32px;
  font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pencil);
}
.furniture .no { color: var(--graphite); font-variant-numeric: tabular-nums; }
.furniture .name { color: var(--graphite); }
.furniture .aside { margin-inline-start: auto; text-transform: none; letter-spacing: 0; font-size: 0.875rem; }

.sec-grid { display: grid; gap: 32px; }
.sec-grid > * { min-width: 0; }

/* figures */
figure { margin: 0; }
.shot img { border: 1px solid var(--hair); background: var(--sheet); }
.phone { max-width: 300px; }
.phone img { border-radius: 34px; }
.web img { border-radius: 10px; }
figcaption {
  font-size: 0.875rem; line-height: 1.4; color: var(--pencil);
  margin-top: 12px; max-width: 30rem;
}
figcaption .real { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

/* small ledgers set in type, not drawings */
.ledger { border-top: 1px solid var(--hair); margin: 0; max-width: 26rem; }
.ledger div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 0.9375rem; }
.ledger dt { color: var(--pencil); }
.ledger dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .struck dd { text-decoration: line-through; color: var(--pencil); }
.ledger .kept dd { color: var(--leaf); font-weight: 600; }

/* lists set as columns */
.cols { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.cols > li { border-top: 1px solid var(--hair); padding-top: 14px; min-width: 0; }
.cols h3 { font-size: 1.625rem; }
.cols p { color: var(--pencil); margin: 0; font-size: 1rem; }
.cols .step { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--pencil); display: block; margin-bottom: 6px; }

/* two columns set against each other */
.versus { display: grid; gap: 40px; }
.versus h3 { font-size: 1.875rem; border-bottom: 1px solid var(--graphite); padding-bottom: 10px; margin-bottom: 0; }
.versus ul { list-style: none; margin: 0; padding: 0; }
.versus li { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.versus li strong { display: block; font-weight: 600; }
.versus li span { color: var(--pencil); font-size: 1rem; }
.versus .overhead li strong { font-weight: 500; text-decoration: line-through; text-decoration-color: var(--pencil); text-decoration-thickness: 1px; }

/* comparison table */
.tablewrap { overflow-x: auto; border-top: 1px solid var(--graphite); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: 0.9375rem; }
caption { text-align: start; font-size: 0.875rem; color: var(--pencil); padding: 0 0 12px; caption-side: bottom; padding-top: 12px; }
th, td { text-align: start; padding-block: 12px; padding-inline: 0 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
thead th { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pencil); }
tbody th { font-weight: 500; }
td { color: var(--pencil); }
td.ours, th.ours { color: var(--graphite); font-weight: 600; }

/* questions */
.faq { display: grid; gap: 0 48px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none; min-height: 44px; padding: 14px 32px 14px 0; position: relative;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 4px; top: 12px; font-weight: 400; font-size: 1.25rem; color: var(--pencil); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--pencil); margin: 0 0 16px; max-width: 34rem; }

/* calculator */
.calc { display: grid; gap: 28px; }
.calc form { display: grid; gap: 18px; margin: 0; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 1rem; }
.field .hint { font-size: 0.875rem; color: var(--pencil); }
.field .row { display: flex; gap: 8px; }
input[type="number"], select {
  font: 1.0625rem var(--sans); font-variant-numeric: tabular-nums;
  min-height: 48px; padding: 0 14px; width: 100%;
  background: var(--sheet); color: var(--graphite);
  border: 1px solid var(--pencil); border-radius: 10px;
}
select { width: auto; min-width: 6.5rem; }
input[type="number"]:hover, input[inputmode="decimal"]:hover, select:hover { border-color: var(--graphite); }
.result { border-top: 1px solid var(--graphite); padding-top: 14px; }
.result .big { font-family: var(--serif); font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.result .label { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pencil); }
.result .pair { display: grid; gap: 20px; }
.result .note { font-size: 0.9375rem; color: var(--pencil); margin-top: 18px; max-width: 32rem; }

/* built and not yet */
.ledger-lists { display: grid; gap: 40px; }
.ledger-lists h3 { font-size: 1.875rem; border-bottom: 1px solid var(--graphite); padding-bottom: 10px; margin: 0; }
.ledger-lists ul { list-style: none; margin: 0; padding: 0; }
.ledger-lists li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.ledger-lists li span { display: block; color: var(--pencil); font-size: 0.9375rem; }
.mark { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.mark.yes { color: var(--leaf); }
.mark.no { color: var(--attention); }

/* closing */
.close { padding: 0 0 72px; }
.close .lede { color: var(--graphite); }

footer.foot { border-top: 1px solid var(--hair); padding: 24px 0 48px; }
footer.foot .page { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
footer.foot a, footer.foot span { font-size: 0.875rem; color: var(--pencil); min-height: 44px; display: inline-flex; align-items: center; }
footer.foot a { min-width: 44px; justify-content: center; }
footer.foot a { text-decoration: none; }
footer.foot a:hover { color: var(--graphite); }
footer.foot .wordmark { font-size: 1.5rem; color: var(--graphite); }
footer.foot .right { margin-inline-start: auto; }

/* ---------- wider screens ---------- */

@media (min-width: 40rem) {
  :root { --gutter: 32px; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .result .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  :root { --gutter: 48px; }
  .hero { padding: 120px 0 96px; }
  .sec { padding-bottom: 112px; }
  .close { padding-bottom: 112px; }

  /* the margin column: furniture and captions on the left, the story beside it */
  .sec, .close { display: grid; grid-template-columns: var(--margin-col) minmax(0, 1fr); column-gap: 48px; }
  .sec > .furniture, .close > .furniture { grid-column: 1 / -1; }
  .sec > .margin, .close > .margin { grid-column: 1; font-size: 0.875rem; color: var(--pencil); }
  .sec > .body, .close > .body { grid-column: 2; min-width: 0; }

  .sec-grid.split { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; align-items: start; }
  .sec-grid.wide-fig { grid-template-columns: minmax(0, 1fr); }

  /* captions move out into the margin column beside wide figures */
  .web-fig { display: grid; grid-template-columns: var(--margin-col) minmax(0, 1fr); column-gap: 48px; margin-inline-start: calc(-1 * (var(--margin-col) + 48px)); width: calc(100% + var(--margin-col) + 48px); }
  .web-fig figcaption { grid-column: 1; grid-row: 1; margin-top: 0; align-self: end; }
  .web-fig img { grid-column: 2; grid-row: 1; }

  .hero-grid.with-phone { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 72px; align-items: end; }
  .cols.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .versus, .ledger-lists, .calc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .calc .result .pair { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .btn, .chip { transition: none !important; }
  .stage .rcpt { transition: opacity 300ms ease !important; }
  .stage.is-gathered .rcpt { transform: rotate(var(--r)) !important; }
}

@media print {
  .masthead nav, .skip { display: none; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* On phones the margin column follows the story it sits beside. */
@media (max-width: 63.99rem) {
  .sec, .close { display: flex; flex-direction: column; }
  .sec > .margin, .close > .margin { order: 3; margin-top: 24px; font-size: 0.9375rem; color: var(--pencil); }
  .sec > .margin:empty, .close > .margin:empty { display: none; }
  .sec > .furniture, .close > .furniture { order: 0; }
  .sec > .body, .close > .body { order: 1; }
}

.hero-fig { margin-top: 48px; }
.hero .furniture { margin-bottom: 40px; }
@media (min-width: 64rem) { .hero-fig { margin-top: 72px; } .hero-fig figcaption { max-width: 40rem; } }


/* ---------- edition two: the moments ---------- */

.btn { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease; }
.btn:active { transform: scale(0.96); }
.btn.replay { min-width: 96px; }
.btn[hidden] { display: none; }

/* The opening: paper receipts become one figure. */
.hero-magic { display: grid; gap: 16px; }
.hero-magic h1 { margin-bottom: 20px; }
.hero-magic .deck { margin-bottom: 20px; }
.hero-magic .plain { margin-bottom: 24px; }
.stage-wrap { margin: 0; }
.stage { position: relative; height: 470px; overflow: clip; overflow-clip-margin: 24px; }
.stage-wrap { overflow-x: clip; }
.rcpt {
  position: absolute; left: var(--x); top: var(--y);
  width: 150px; padding: 12px 11px 18px; margin: 0;
  background: #FCFBF7; color: #2A2828;
  font: 500 0.625rem/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06), 0 6px 14px -4px rgba(0,0,0,0.14), 0 18px 30px -12px rgba(0,0,0,0.12);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 84% 94%, 76% 100%, 68% 94%, 60% 100%, 52% 94%, 44% 100%, 36% 94%, 28% 100%, 20% 94%, 12% 100%, 4% 94%, 0 100%);
  transform: rotate(var(--r));
  transition: transform 820ms cubic-bezier(0.23, 1, 0.32, 1), opacity 420ms ease;
  will-change: transform;
}
.rcpt p { margin: 0; }
.rcpt .r-shop { text-align: center; letter-spacing: 0.04em; }
.rcpt .r-when { text-align: center; color: #6E6C69; font-weight: 400; font-size: 0.5625rem; margin-top: 2px; }
.rcpt .r-line, .rcpt .r-total { display: flex; justify-content: space-between; gap: 6px; }
.rcpt .r-line { border-top: 1px dashed #C9C6C1; border-bottom: 1px dashed #C9C6C1; padding: 6px 0; margin: 7px 0; font-weight: 400; }
/* Without scripts the forms cannot work; the example they would write is shown instead. */
html:not(.js) .k-form, html:not(.js) .front-form { display: none; }
.stage.is-gathered .rcpt {
  transform: translate(var(--gx, 0), var(--gy, 0)) rotate(0deg) scale(0.3);
  opacity: 0;
  transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms + 420ms);
}
.stage.no-motion .rcpt { transition: none; }
.phone {
  position: absolute; left: 50%; bottom: 0; width: 220px; height: 250px; margin-left: -110px;
  padding: 8px; background: #2A2828; border-radius: 40px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.35);
}
.phone-screen {
  height: 100%; border-radius: 32px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; text-align: center;
}
.p-title { font-family: var(--serif); font-size: 1.5rem; color: var(--graphite); }
.p-figure { font-family: var(--serif); font-size: 2.125rem; line-height: 1; letter-spacing: -0.01em; color: var(--leaf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-note { font-size: 0.75rem; color: var(--pencil); }
.stage-wrap figcaption { text-align: center; margin: 14px auto 0; }

/* Three moments, side by side; a strip you swipe on a phone. */
.strip {
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > li { scroll-snap-align: start; min-width: 0; }
.strip .step { display: block; font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--pencil); margin: 18px 0 6px; }
.strip p { color: var(--pencil); margin: 0; font-size: 1rem; }
.phone-shot img { border-radius: 28px; border: 1px solid var(--hair); background: var(--sheet); width: 100%; height: auto; }
.phone-shot { max-width: 260px; }
.phone-shot .real, figcaption.real { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); margin-top: 8px; }
.strip .phone-shot img { max-height: 360px; object-fit: cover; object-position: top; }
.strip .phone-shot.pos-bottom img { object-position: bottom; }
.strip .phone-shot.pos-middle img { object-position: center 42%; }
.strip-note { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); margin-top: 12px; }
.aside-line { margin: 28px 0 0; font-size: 1rem; color: var(--pencil); max-width: 36rem; }

/* The rate: a live counter. */
.rate-grid { display: grid; gap: 40px; }
.rate-shot { display: none; }
.k-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 18px; }
.k-form .field label { font-weight: 500; font-size: 0.875rem; color: var(--pencil); }
.k-form input { font-size: 1.25rem; }
.chips-field { grid-column: 1 / -1; }
.chips-label { font-size: 0.875rem; color: var(--pencil); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 0.9375rem var(--sans); font-variant-numeric: tabular-nums; min-height: 44px; min-width: 64px; padding: 0 14px;
  border: 1px solid var(--pencil); border-radius: 999px; background: var(--sheet); color: var(--graphite); cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease, color 150ms ease;
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--graphite); color: var(--on-graphite); border-color: var(--graphite); }
.k-sheet { margin: 0 0 14px; background: var(--sheet); border: 1px solid var(--hair); border-radius: 16px; padding: 6px 18px; }
.k-sheet div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; }
.k-sheet dt { color: var(--pencil); font-size: 0.9375rem; }
.k-sheet dd { margin: 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-sheet .k-rule { border-top: 1px solid var(--hair); }
.k-sheet .k-rule dt, .k-sheet .k-year dt { color: var(--graphite); }
.k-sheet .k-year dd { font-family: var(--serif); font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1; color: var(--leaf); }

.sec-soon .lede { max-width: 34rem; }

/* The front page: the calculator writes the visitor's own edition. */
.front { display: grid; gap: 28px; }
.paper-sheet {
  background: var(--sheet); border: 1px solid var(--hair); padding: 18px 16px 22px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 18px 36px -24px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.paper-sheet .ed { display: flex; justify-content: space-between; gap: 12px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); }
.paper-sheet .flag { font-family: var(--serif); font-size: clamp(1.75rem, 7vw, 2.5rem); text-align: center; line-height: 1; padding: 6px 0 10px; border-bottom: 3px double var(--graphite); overflow-wrap: anywhere; }
.paper-sheet .headline { margin: 6px 0 0; font-size: clamp(1.875rem, 7.5vw, 2.875rem); line-height: 1.02; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.paper-sheet .standfirst { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.1875rem; line-height: 1.35; color: var(--pencil); }
.paper-sheet .story { border-top: 1px solid var(--hair); padding-top: 12px; font-size: 1rem; }
.paper-sheet .story p { margin: 0 0 10px; }
.paper-sheet .story p:last-child { margin: 0; color: var(--pencil); }
.paper-sheet .dropcap { float: left; font-family: var(--serif); font-size: 2.875rem; line-height: 0.8; padding: 4px 3px 0 0; }
.front-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.front-form .wide { grid-column: 1 / -1; }
.front-form .field label { font-weight: 500; font-size: 0.875rem; color: var(--pencil); }
/* A label that wraps to two lines keeps its input level with the one beside it. */
.front-form .field { grid-template-rows: 1fr auto; }
.front-form .field label { align-self: end; }
input[type="text"] {
  font: 1.0625rem var(--sans); min-height: 48px; padding: 0 14px; width: 100%;
  background: var(--sheet); color: var(--graphite); border: 1px solid var(--pencil); border-radius: 10px;
}
/* Money typed as text keeps the number fields' even figures. */
input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }

.soon-grid { display: grid; gap: 32px; }
.soon-shot { max-width: 360px; }
.soon-shot img { border-radius: 16px; border: 1px solid var(--hair); }

@media (min-width: 40rem) {
  .stage { height: 520px; }
}

@media (min-width: 64rem) {
  .hero-magic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
  .stage { height: 600px; }
  .rcpt { width: 200px; padding: 16px 16px 22px; font-size: 0.75rem; }
  .rcpt .r-when { font-size: 0.6875rem; }
  .phone { width: 300px; height: 380px; margin-left: -150px; bottom: 20px; border-radius: 52px; padding: 10px; }
  .phone-screen { border-radius: 42px; }
  .p-title { font-size: 1.875rem; }
  .p-figure { font-size: 3rem; }
  .p-note { font-size: 0.8125rem; }
  .strip .phone-shot img { max-height: 440px; }
  .strip { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 40px; }
  .rate-grid { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 64px; align-items: start; }
  .rate-shot { display: block; }
  .front { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .paper-sheet { padding: 28px 30px 30px; }
  .soon-grid { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 64px; align-items: start; }
}

@media (max-width: 39.99rem) {
  .stage { height: 540px; }
}
/* In the dark the phone needs an edge to be seen against the page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone { background: #050505; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -24px rgba(0,0,0,0.6); }
}
:root[data-theme="dark"] .phone { background: #050505; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -24px rgba(0,0,0,0.6); }

/* On a phone the policy screen is left to the wide page, and the claim is
   shown to its first receipts. */
@media (max-width: 47.99rem) {
  .wide-only-fig { display: none; }
  .capped-fig img { max-height: 560px; object-fit: cover; object-position: top; }
}

/* Five receipts on a phone, smaller and overlapping. */
@media (max-width: 63.99rem) {
  .rcpt { width: 132px; padding: 10px 9px 16px; font-size: 0.5625rem; }
  .rcpt .r-when { font-size: 0.5rem; }
}

/* ---------- edition three: the spread, the front page, the drawings ----------
 *
 * The brand moved to the product on 29 October 2026: the app's paper,
 * graphite, leaf and mint, Instrument Serif and the system sans, and its 14px
 * corners. Then the ink direction, the same day: the pictures are drawings
 * made in the page (ink.js), and the layouts are claimed.zip as a magazine
 * spread and claimedhq.com as a front page and an ad proof. Everything else
 * stays the product.
 */

/* Controls have the app's corners (Theme.Radius.ui), not pills. */
.btn { border-radius: 14px; }

/* The one highlighted phrase on a page, on mint, the app's money-back ground.
   One per page; it is not decoration. */
.hl { background: var(--mint); color: inherit; padding: 0 0.12em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

html { overflow-x: clip; }

/* The drawings (ink.js): ink on the page itself, one object, leaf green
   opening it up to show the data inside. There is no paper behind them: the
   receipt is the only paper. In dark mode they turn over the way the app
   does, a dark slip, light ink and the dark-mode leaf, through the --ink-*
   colours below; ink.js writes the light colours as attributes, and these
   rules swap each one, including the ones it sets as a drawing plays. */
.ink { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 5); }
:is(.ink, .ink-icon, .journey-line) [stroke="#141312"] { stroke: var(--ink-line, #141312); }
:is(.ink, .ink-icon, .journey-line) [fill="#141312"] { fill: var(--ink-line, #141312); }
:is(.ink, .ink-icon, .journey-line) [fill="#FFFFFF"] { fill: var(--ink-slip, #FFFFFF); }
:is(.ink, .ink-icon, .journey-line) [stroke="#FFFFFF"] { stroke: var(--ink-on-leaf, #FFFFFF); }
:is(.ink, .ink-icon, .journey-line) [fill="rgba(255,255,255,.42)"] { fill: var(--ink-dim, rgba(255, 255, 255, 0.42)); }
:is(.ink, .ink-icon, .journey-line) [fill="#2F7D5B"] { fill: var(--ink-leaf, #2F7D5B); }
:is(.ink, .ink-icon, .journey-line) [stroke="#2F7D5B"] { stroke: var(--ink-leaf, #2F7D5B); }
:is(.ink, .ink-icon, .journey-line) [fill="#E7F3EE"] { fill: var(--ink-mint, #E7F3EE); }
:is(.ink, .ink-icon, .journey-line) [fill="#EFEDE8"] { fill: var(--ink-back, #EFEDE8); }
.ink svg { display: block; width: 100%; height: 100%; }
.ink-icon { display: block; width: 56px; height: 56px; margin: 0 0 10px -6px; }
.ink-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* A newspaper caption: the line in the serif, then whose drawing it is. */
.film-cap { font-size: 0.9375rem; line-height: 1.4; color: var(--pencil); margin-top: 12px; max-width: 34rem; }
.film-cap b { font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; color: var(--graphite); }
.film-cap .who { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

/* claimed.zip: the spread. Copy on the left page, the drawing on the right,
   and the real app floating over it, as Popcorn floats its product. */
.spread { display: grid; gap: 48px; padding: 48px 0 80px; }
.spread > * { min-width: 0; }
.spread h1 { font-size: clamp(3.25rem, 12vw, 6.5rem); }
.spread .deck { font-style: normal; font-family: var(--sans); font-size: clamp(1.1875rem, 2.4vw, 1.375rem); line-height: 1.45; color: var(--graphite); max-width: 30rem; }
.plate { position: relative; padding: 0 0 56px 0; }
.plate .ink { margin-inline-start: 18%; }
.float-phone { position: absolute; left: 0; bottom: 0; width: 38%; max-width: 230px; z-index: 4; }
.float-phone img { border-radius: 26px; border: 1px solid var(--hair); background: var(--sheet); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 44px rgba(20, 14, 10, 0.28); }
.spread .film-cap { margin-inline-start: 18%; }

/* A band: the month, drawn edge to edge. */
.band { margin: 0 0 80px; }
.band .ink { aspect-ratio: auto; height: clamp(240px, 34vw, 400px); width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; box-shadow: none; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.band .film-cap { margin-top: 14px; }

/* The close, as a second spread. */
.close-spread { display: grid; gap: 40px; }
.close-spread > * { min-width: 0; }
.close-spread .ink { --ratio: 4 / 5; max-width: 30rem; }

/* claimedhq.com: the front page, then the ad proof. */
.front-head { text-align: center; padding: 20px 0 40px; }
.dateline span:empty { display: none; }
.dateline {
  display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--hair);
  padding: 10px 0; margin: 0 0 44px;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pencil);
}
.front-head h1 { max-width: 12ch; margin-left: auto; margin-right: auto; }
.front-head .deck { margin-left: auto; margin-right: auto; max-width: 36ch; }
.front-head .byline { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pencil); margin: 0 0 24px; }
.front-head .actions { justify-content: center; }
.front-head .fine { max-width: 34rem; margin: 0 auto; }

/* The lead photo, framed like a proof: crop marks at its corners. */
.proofed {
  position: relative; padding: 16px;
  --m: var(--pencil);
  background:
    linear-gradient(var(--m), var(--m)) 0 16px / 10px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 16px 0 / 1px 10px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 16px / 10px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) calc(100% - 16px) 0 / 1px 10px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 calc(100% - 16px) / 10px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 16px 100% / 1px 10px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% calc(100% - 16px) / 10px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) calc(100% - 16px) 100% / 1px 10px no-repeat;
}
.lead { margin: 0 0 56px; }
.lead .ink { --ratio: 800 / 450; }
.lead .film-cap { margin-inline-start: 16px; }

.front-story { display: grid; gap: 40px; padding: 0 0 80px; }
.front-story > * { min-width: 0; }
.front-story .copy p { font-size: 1.125rem; line-height: 1.6; max-width: var(--measure); }
.front-story .copy .first::first-letter {
  float: left; font-family: var(--serif); font-size: 4.4em; line-height: 0.8; padding: 6px 8px 0 0;
}
.pull {
  font-family: var(--serif); font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.08;
  border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--hair);
  padding: 16px 0 18px; margin: 28px 0 0; text-wrap: balance;
}
.front-story .fig-no { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin-inline-end: 6px; }

@media (min-width: 48rem) {
  .front-story .copy { columns: 2; column-gap: 36px; }
  .front-story .copy p { break-inside: avoid-column; }
  .close-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: center; gap: 56px; }
}
@media (min-width: 64rem) {
  .spread { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 64px; padding-top: 64px; }
  .front-story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  /* The close spread takes the story column, as .body does. */
  .close > .close-spread { grid-column: 2; }
}
.front-story img { border: 1px solid var(--hair); border-radius: 10px; background: var(--sheet); }
.front-story figcaption { max-width: none; }
@media (max-width: 39.99rem) {
  /* On a phone the app sits a little larger beside the drawing. */
  .float-phone { width: 40%; }
}

/* The journey (ink.js): stations on a drawn line, a step under each. On a
   phone the line gives way to the steps, each with its own icon. */
.journey-line { display: none; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.journey li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start; min-width: 0; }
.journey li .ink-icon { grid-row: span 2; margin: 0; }
.journey h3 { font-size: 1.5rem; margin: 4px 0 4px; transition: color 300ms ease; }
.journey p { margin: 0; font-size: 0.9375rem; color: var(--pencil); }
.journey li.now h3 { color: var(--leaf); }
@media (min-width: 48rem) {
  .journey-line { display: block; margin: 8px 0 18px; }
  .journey-line svg { display: block; width: 100%; height: auto; overflow: visible; }
  .journey { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; text-align: center; }
  .journey li { display: block; }
  .journey li .ink-icon { display: none; }
  .journey p { max-width: 15rem; margin: 0 auto; }
}

/* Works with: a logo (or an ink icon where there is no company to name),
   the name, and one line on what it does. */
.works { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; }
.works li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--hair); }
.works .logo-mark, .works .ink-icon { grid-row: span 2; width: 40px; height: 40px; margin: 2px 0 0; }
.works .logo-mark img { display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.works .logo-mark.is-name {
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--soft); color: var(--graphite); font: 600 1.0625rem var(--sans); overflow: hidden;
}
.works h3 { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; margin: 0 0 2px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.works .tag { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--attention); }
.works p { margin: 0; font-size: 0.9375rem; color: var(--pencil); }
.works-note { margin-top: 18px; }
@media (min-width: 48rem) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ---------- the story (story.js) ----------
   Without scripts, on a phone, or with reduced motion: a plain list, each
   step with its screen. On a wide screen with scripts: the section pins and
   scrolling moves the dot, one step showing at a time. */
section.story { padding: 0 0 72px; }
section.story .story-pin > .furniture { margin-bottom: 32px; }
section.story .journey.story-steps { display: grid; gap: 48px; }
section.story .journey li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 18px; text-align: start; }
section.story .step-text { display: contents; }
section.story .step-text .ink-icon { grid-row: span 2; margin: 0; display: block; }
section.story .step-text h3 { font-size: 1.875rem; margin: 2px 0 6px; }
section.story .step-text p { margin: 0; font-size: 1.0625rem; color: var(--pencil); max-width: 26rem; }
section.story .step-media { grid-column: 2; margin: 0; min-width: 0; }
section.story .phone-media img { width: 100%; height: auto; max-width: 260px; border-radius: 28px; border: 1px solid var(--hair); background: var(--sheet); }
section.story .web-media img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hair); background: var(--sheet); }
section.story .finale { position: relative; max-width: 30rem; }
section.story .finale .ink { --ratio: 1; max-width: 22rem; }
.owed {
  background: var(--sheet); border-radius: 14px; padding: 14px 18px 14px; margin-top: -48px; margin-inline-start: 28%;
  position: relative; box-shadow: 0 0 0 1px var(--hair), 0 14px 36px rgba(20, 14, 10, 0.16); max-width: 20rem;
}
.owed .o-title { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.15; margin: 0 0 8px; }
.owed .o-line { font-size: 0.9375rem; color: var(--pencil); margin: 0 0 6px; }
.owed dl { margin: 0; }
.owed dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--hair); font-size: 0.875rem; }
.owed dt { color: var(--pencil); min-width: 0; }
.owed dd { margin: 0; white-space: nowrap; }
.owed .o-total { font-family: var(--serif); font-size: 2.125rem; line-height: 1; color: var(--leaf); margin: 10px 0 0; white-space: nowrap; }
/* An amount stays on one line; words ("Nobody chased.") may wrap. */
.owed .o-total:not([data-countup]) { white-space: normal; }
/* On a phone the card sits under the drawing with less inset, so it keeps its width. */
@media (max-width: 47.99rem) { .owed { margin-inline-start: 12%; } }
/* Forced colours drop the shadow, so the card keeps an edge. */
@media (forced-colors: active) { .owed { border: 1px solid CanvasText; } }

@media (min-width: 48rem) {
  section.story.pinned { height: calc(var(--n) * 80vh + 100vh); padding: 0; }
  section.story.pinned .story-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
  section.story.pinned .story-pin > h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); margin-bottom: 8px; }
  section.story.pinned .journey-line { display: block; margin-block: 0 8px; }
  /* Taller screens get a taller stage instead of blank paper under it. */
  section.story.pinned .journey.story-steps { --stage: min(56vh, 680px); position: relative; height: var(--stage); display: block; }
  section.story.pinned .journey li {
    position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 56px; align-items: center; opacity: 0; transform: translateY(14px);
    visibility: hidden; pointer-events: none; will-change: opacity, transform;
    /* Out fast, then gone: a step that has faded is hidden, so a quick scroll
       never leaves two steps' words painted over each other (Safari can keep
       a half-faded frame inside the sticky pin). */
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }
  /* In only once the last one is out. */
  section.story.pinned .journey li.now {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity 320ms ease 140ms, transform 420ms cubic-bezier(0.23, 1, 0.32, 1) 140ms, visibility 0s;
  }
  section.story.pinned .step-text { display: block; }
  section.story.pinned .step-text .ink-icon { display: none; }
  section.story.pinned .step-text h3 { font-size: clamp(2rem, 3.4vw, 2.875rem); }
  section.story.pinned .step-media { grid-column: 2; justify-self: center; height: 100%; display: flex; flex-direction: column; justify-content: center; }
  section.story.pinned .phone-media img { max-height: calc(var(--stage) - 30px); width: auto; max-width: 100%; }
  section.story.pinned .web-media img { max-height: calc(var(--stage) - 30px); width: auto; max-width: 100%; }
  section.story.pinned .finale { flex-direction: row; align-items: center; gap: 0; max-width: none; }
  section.story.pinned .finale .ink { width: 46%; max-width: none; flex: none; }
  section.story.pinned .owed { margin-block: 0; margin-inline: -8% 0; flex: 1; }
  /* claimedhq.com: the screens are the point, so they get the room.
     The stage takes what the heading leaves, the words give up some width,
     and a wide web screen sits under its words at the stage's full width. */
  section.story.pinned.big-screens .journey.story-steps { --stage: min(max(56vh, 100vh - 320px), 760px); }
  section.story.pinned.big-screens .journey li { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); column-gap: 48px; }
  section.story.pinned.big-screens .journey li.wide {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    row-gap: 20px; align-items: stretch;
  }
  section.story.pinned.big-screens li.wide .step-text { display: flex; align-items: baseline; gap: 32px; }
  section.story.pinned.big-screens li.wide .step-text h3 { margin: 0; flex: none; }
  section.story.pinned.big-screens li.wide .step-text p { flex: 1; }
  section.story.pinned.big-screens li.wide .web-media { grid-column: 1; justify-self: start; min-height: 0; justify-content: flex-start; }
  section.story.pinned.big-screens li.wide .web-media img { max-height: calc(var(--stage) - 140px); }
  /* Without the line drawing the list is a plain list again. */
  section.story:not(.pinned) .journey-line { display: none; }
}
@media (min-width: 64rem) {
  section.story .story-pin > .furniture, section.story .story-pin > h2, section.story .journey-line, section.story .journey.story-steps { margin-inline-start: calc(var(--margin-col) + 48px); }
  section.story .story-pin > .furniture { margin-inline-start: 0; }
}

/* The hero flight: words leave the drawing and land in the app. */
.plate { position: relative; }
.fly-word {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; white-space: nowrap;
  font: 500 0.75rem "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.06em;
  color: #FFFFFF; background: #2F7D5B; padding: 3px 7px; border-radius: 5px;
  box-shadow: 0 6px 16px rgba(20, 14, 10, 0.25);
}
.fly-hit {
  position: absolute; z-index: 5; height: 5.2%; min-height: 18px; pointer-events: none;
  border-radius: 6px; background: rgba(47, 125, 91, 0.14); box-shadow: 0 0 0 1.5px #2F7D5B;
}

/* Try it: example receipts, read on request. */
.try-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; }
.try-grid { display: grid; gap: 28px; align-items: center; }
.try-paper { max-width: 300px; width: 100%; }
.try-fields { margin: 0; background: var(--sheet); border-radius: 14px; padding: 6px 18px; box-shadow: 0 0 0 1px var(--hair); max-width: 26rem; }
.try-fields div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.try-fields div:last-child { border-bottom: 0; }
.try-fields dt { color: var(--pencil); font-size: 0.9375rem; }
.try-fields dd { margin: 0; min-height: 1.5em; font-weight: 500; transition: color 300ms ease; }
.try-fields dd.filled { color: var(--graphite); }
.try-fields dd:not(.filled) { color: var(--leaf); }
.try .fine { margin-top: 16px; }
@media (min-width: 48rem) { .try-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 56px; } }

/* The iPhone around every app screen: a titanium edge, the black bezel and
   the side keys, drawn here so it stays sharp at any size. Radii are in
   percent of each side, so one rule fits the hero, the story and the strip. */
.float-phone picture, .phone-media picture, .phone-shot picture {
  position: relative; display: block; width: fit-content; max-width: 100%;
  padding: 3.4%; border: 2.5px solid transparent; border-radius: 15.5% / 7.2%;
  background:
    linear-gradient(#0B0B0B, #0B0B0B) padding-box,
    linear-gradient(145deg, #E4E2DE, #9A9894 38%, #D6D4D0 58%, #878581) border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 24px 48px -18px rgba(20, 14, 10, 0.34);
}
.float-phone picture img, .phone-media picture img, .phone-shot picture img,
section.story .phone-media img, .phone-shot img, .float-phone img {
  display: block; border: 0; box-shadow: none; background: #0B0B0B;
  border-radius: 12.5% / 5.8%;
}
/* The keys: action and volume on the left, the side button on the right. */
.float-phone picture::before, .phone-media picture::before, .phone-shot picture::before,
.float-phone picture::after, .phone-media picture::after, .phone-shot picture::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
}
.float-phone picture::before, .phone-media picture::before, .phone-shot picture::before {
  left: -5px; top: 15%; height: 22%;
  background: linear-gradient(#A3A19D 0 14%, transparent 14% 26%, #A3A19D 26% 58%, transparent 58% 68%, #A3A19D 68%);
}
.float-phone picture::after, .phone-media picture::after, .phone-shot picture::after {
  right: -5px; top: 24%; height: 12%; background: #A3A19D;
}

/* Privacy and terms: one column of reading text in the same paper. */
.legal { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 56px var(--gutter) 96px; }
.legal h1 { margin: 0 0 16px; }
.legal h2 { font-size: clamp(1.625rem, 3.4vw, 2rem); margin: 48px 0 12px; }
.legal .lede { color: var(--pencil); margin-bottom: 32px; }
.legal p, .legal li { color: var(--pencil); }
.legal p b, .legal li b { color: var(--graphite); font-weight: 600; }
.legal ul { padding-inline-start: 1.2rem; margin: 0 0 1em; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--leaf); }
/* A draft says so before anything else. */
.legal .draft { margin: 0 0 32px; padding: 12px 16px; border: 1px solid var(--warn); border-radius: 14px; color: var(--warn); font-size: 0.875rem; font-weight: 600; }
/* A placeholder to fill before the page takes effect. */
.legal .todo { font-size: 0.9em; color: var(--warn); background: var(--soft); padding: 0.05em 0.35em; border-radius: 4px; }