/* Hallmark · shape: Facts-led (from Stat-Led, draw e6d85f) · genre: playful · theme: Sticker (deal 1/3, seed dynamic-codes-you-pay-8746·78896a88·2026-10-28·r0) · redesign: full · job: buy
 * hero: Banner (/, /pricing) · nav: slab, wordmark and one action · footer: statement, then legal links · imagery: screenshots 1 (capture.mjs), the product's own QR codes · signature: a real QR code for qrkeeps.app as a die-cut sticker tagged "$7, once" · sticker: sheet, vinyl in dark
 * axes: light/display-heavy/chromatic-magenta · posture: full-palette · contrast: pass · fold: pass · modes: light+dark · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a pricing argument anyone could make; made it the product's own by leading with a QR code that really scans and a table of what happens when billing stops */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 unresolved (hero height: the Banner pick keeps the facts on the opening screen) */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved 1 partial (copy: only the heads this run wrote were changed) · gap: the free generator sits a screen and a half down, by the owner's section order */
/* Hallmark · waive 59 · Banner hero, the facts start above the fold at 1440 · the Banner posture puts the facts tiles on the opening screen, so the seam under the hero stays short */
/* Hallmark · waive 71 · the close head sits under its corner tag; the generator head under the buy bar in a full-height render · the "No renewal" tag is stuck on the statement's corner by design, and at 900px tall the sticky bar rides the screen's foot, never over the generator head */
/* Hallmark · dismissed 23 · the lime field is the full-palette posture's one lime band, behind the free generator */
/* Hallmark · dismissed 49 · .button sets white-space: nowrap in site.css, which the static tier reads apart from the views */
/* Hallmark · dismissed 70 · the report thanks renders only after the server saved the report */
/* Hallmark · dismissed 77 · /pricing holds the packs and the refund, shutdown and abuse facts; more sections would invent content */
/* Hallmark · reworded "Questions" to "Refunds, shutdowns and abuse" · 54 read the one-word label beside the rows as an eyebrow */
/* Hallmark · dropped `Why "lasts"` · reworded to Why “keeps”, the name left over from the rename to QRKeeps, as the owner asked */
/* Hallmark · dropped 2026, 09-282026-10-27 · the axis dates of a 30-day chart with no scans; the owner asked for an empty state there */
/* Hallmark · answered F15 · the 960px column belongs to the app screens and documents; each page uses one container */

:root {
  color-scheme: light dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-error-wash: oklch(95% 0.03 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(95.7% 0.013 82); --color-paper-2: oklch(92.8% 0.021 79); --color-paper-3: oklch(99.4% 0.007 89);
  --color-ink: oklch(21% 0.011 81); --color-ink-2: oklch(30% 0.013 78); --color-muted: oklch(50% 0.017 64);
  --color-rule: oklch(89.7% 0.02 80); --color-white: oklch(99.5% 0.003 82);
  --color-accent: oklch(56% 0.225 2); --color-accent-deep: oklch(49% 0.205 2); --color-accent-2: oklch(87.6% 0.179 119); --color-slot: oklch(95% 0.021 355);
  --color-accent-ink: oklch(99.5% 0.003 82); --color-focus: oklch(56% 0.225 2);
  --color-carbon: oklch(21% 0.011 81); --color-sheet: oklch(95.7% 0.013 82); --color-sheet-muted: oklch(50% 0.017 64);
  --color-sheet-2: oklch(92.8% 0.021 79); --color-sheet-rule: oklch(89.7% 0.02 80); --color-sheet-slot: oklch(95% 0.021 355);
  --color-sheet-error: oklch(52% 0.19 27); --color-sheet-error-wash: oklch(95% 0.03 27);
  --color-card: oklch(99.5% 0.003 82); --color-shadow: oklch(21% 0.011 81);
  --color-band: oklch(21% 0.011 81); --color-band-2: oklch(30% 0.013 78); --color-band-ink: oklch(95.7% 0.013 82);
  --color-qr-paper: oklch(99.5% 0.003 82); --color-qr-ink: oklch(21% 0.011 81);
  --font-display: "Bowlby One SC", "Arial Black", sans-serif; --font-body: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Sofia Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius-card: 18px; --radius-photo: 22px; --radius-pill: 999px; --rule-hair: 1px; --rule-bar: 2px;
  --shadow-card: 5px 6px 0 var(--color-shadow); --shadow-card-sm: 3px 4px 0 var(--color-shadow); --shadow-press: 1px 1px 0 var(--color-shadow);
  --tracking-display: 0.005em; --display-weight: 400;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-paper: oklch(21% 0.011 81); --color-paper-2: oklch(25.5% 0.013 72); --color-paper-3: oklch(28.5% 0.013 72);
    --color-ink: oklch(95.7% 0.013 82); --color-ink-2: oklch(86% 0.014 80); --color-muted: oklch(74% 0.017 70);
    --color-rule: oklch(33% 0.016 75); --color-card: oklch(25.5% 0.013 72); --color-shadow: oklch(12% 0.008 81);
    --color-band: oklch(15% 0.009 81); --color-band-2: oklch(27% 0.012 81); --color-focus: oklch(72% 0.19 2); --color-slot: oklch(25.5% 0.013 72);
    --color-error: oklch(72% 0.15 27); --color-error-wash: oklch(28% 0.05 27);
  }
}

@font-face { font-family: "Bowlby One SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/bowlby-one-sc-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bowlby One SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/bowlby-one-sc-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/sofia-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/sofia-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; display: flex; flex-direction: column; min-height: 100dvh; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; font-synthesis: none; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
main { flex: 1 0 auto; }
::selection { background: var(--color-accent-2); color: var(--color-carbon); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.02; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: min(var(--text-display), 4.5rem); } h2 { max-width: 30ch; font-size: min(var(--text-section), 3.25rem); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.1; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; color: var(--color-ink-2); }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
ul { margin: 0; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap { width: 100%; max-width: calc(960px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--color-muted); }
.break { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-band); color: var(--color-band-ink); border-radius: var(--radius-pill); }
.skip:focus-visible { top: var(--space-md); }
[data-slot] { position: relative; overflow: hidden; background: var(--color-slot); }
[data-slot] > img { width: 100%; height: 100%; object-fit: cover; }
.on-light { --color-ink: var(--color-carbon); --color-ink-2: var(--color-carbon); --color-paper: var(--color-sheet); --color-paper-2: var(--color-sheet-2); --color-paper-3: var(--color-white); --color-muted: var(--color-sheet-muted); --color-rule: var(--color-sheet-rule); --color-slot: var(--color-sheet-slot); --color-error: var(--color-sheet-error); --color-error-wash: var(--color-sheet-error-wash); --color-card: var(--color-white); --color-focus: var(--color-accent-deep); color-scheme: light; color: var(--color-carbon); }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }

/* controls */
.button, button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; font-size: var(--text-md); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 4px var(--color-white), var(--shadow-card-sm); transition: background-color var(--dur-micro) var(--ease-out), translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.button::after, button::after { content: ""; position: absolute; inset: -2px; }
.button:hover, button:hover { background: var(--color-accent-deep); text-decoration: none; }
.button:active, button:active { translate: 2px 3px; box-shadow: 0 0 0 4px var(--color-white), var(--shadow-press); }
.button:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.button.secondary, button.secondary { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink); }
.button.secondary:hover, button.secondary:hover { background: var(--color-paper-2); }
.button.secondary:active, button.secondary:active { translate: 0 1px; box-shadow: inset 0 0 0 2px var(--color-ink); }
.button.secondary:focus-visible, button.secondary:focus-visible { outline-offset: 2px; }
button:disabled, button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; translate: none; }
.button.big { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.button.big:not(.secondary) { box-shadow: 0 0 0 5px var(--color-white), var(--shadow-card); }
.button.big:not(.secondary):active { translate: 4px 5px; box-shadow: 0 0 0 5px var(--color-white), var(--shadow-press); }
.button.on-ink { color: var(--color-band-ink); box-shadow: inset 0 0 0 2px var(--color-band-ink); }
.button.on-ink:hover { background: var(--color-band-2); color: var(--color-band-ink); }
.marketing .button, .marketing button { min-height: 48px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }

label { display: block; margin-top: var(--space-md); margin-bottom: var(--space-2xs); font-weight: 700; font-size: var(--text-sm); }
input:not([type="hidden"]), select, textarea { display: block; width: 100%; min-height: 40px; padding: var(--space-xs) var(--space-sm); border: 2px solid var(--color-ink); border-radius: var(--space-sm); background: var(--color-paper-3); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -5px; transition: background-color var(--dur-micro) var(--ease-out); }
textarea { min-height: 6rem; resize: vertical; }
input:hover, select:hover, textarea:hover { background: var(--color-paper-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); outline-offset: -5px; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-actions { margin-top: var(--space-lg); }
details > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
details > summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* chrome */
.site-head { background: var(--color-band); color: var(--color-band-ink); }
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1; color: inherit; text-decoration: none; white-space: nowrap; }
.wordmark:hover { color: var(--color-accent-2); }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav .link { font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav .link:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.site-foot { margin-top: var(--space-2xl); padding-block: var(--space-2xl); border-top: var(--rule-bar) dashed var(--color-rule); }
.marketing .site-foot { margin-top: 0; border-top: 0; }
.site-foot__statement { max-width: 28ch; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; text-wrap: balance; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); }
.site-foot nav a { white-space: nowrap; }

/* home: hero */
.hero { padding-block: var(--space-xl); }
.hero__in { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; }
.hero .actions { margin-top: var(--space-xl); }
.sticker { position: relative; justify-self: center; margin: 0; padding: var(--space-lg) var(--space-lg) var(--space-md); background: var(--color-accent-2); color: var(--color-carbon); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); rotate: 3deg; }
.sticker .qr { display: block; width: min(100%, 380px); padding: var(--space-xs); border-radius: var(--space-sm); }
.sticker figcaption { margin-top: var(--space-sm); text-align: center; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.tag { position: absolute; z-index: var(--z-raised); display: inline-block; padding: var(--space-sm) var(--space-md); background: var(--color-accent-2); color: var(--color-carbon); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.1; white-space: nowrap; border: 4px solid var(--color-white); border-radius: var(--radius-pill); box-shadow: var(--shadow-card-sm); }
.sticker .tag { top: calc(-1 * var(--space-lg)); right: calc(-1 * var(--space-xl)); rotate: -6deg; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xl); }

/* the QR itself stays light in both modes: scanners need a light quiet zone */
.qr { display: inline-block; line-height: 0; background: var(--color-qr-paper); border-radius: var(--space-xs); }
.qr svg { width: 100%; height: auto; }
.qr svg rect { fill: var(--color-qr-paper); }
.qr svg path { fill: var(--color-qr-ink); }

@media (max-width: 60rem) {
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .sticker { justify-self: start; margin-left: var(--space-md); }
  .sticker .qr { width: min(100%, 240px); }
}
@media (max-width: 40rem) {
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .sticker .tag { right: calc(-1 * var(--space-xs)); }
  .hero .actions .button { width: 100%; }
  .button.big { padding: 0 var(--space-lg); font-size: var(--text-md); }
}

/* home: facts */
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; }
.section-head > h2 { grid-column: 1 / span 7; }
.section-head > p { grid-column: 8 / span 5; }
.facts { padding-block: var(--space-xl) var(--section-gap-s); }
.facts__grid { list-style: none; margin-block: 0; padding-block: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: var(--gap-columns); }
.fact { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); min-width: 0; padding: var(--space-xl); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.fact p { max-width: 45ch; font-weight: 600; font-size: var(--text-lg); line-height: 1.35; }
.fact__name { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.02; letter-spacing: var(--tracking-display); overflow-wrap: break-word; }
.fact__big { display: block; font-family: var(--font-display); font-size: clamp(6rem, 14vw, 12rem); line-height: 0.9; }
.fact--cost { grid-column: span 5; grid-row: span 2; background: var(--color-accent); color: var(--color-accent-ink); rotate: -1.5deg; }
.fact--free { grid-column: span 7; background: var(--color-accent-2); color: var(--color-carbon); rotate: 1deg; }
.fact--refund { grid-column: span 4; background: var(--color-band); color: var(--color-band-ink); rotate: -1deg; }
.fact--export { grid-column: span 3; background: var(--color-card); color: var(--color-ink); rotate: 1.5deg; }

/* home: the generator on the lime field */
.band-lime { padding-block: var(--section-gap-s); background: var(--color-accent-2); color: var(--color-carbon); }
.band-lime .lead { color: var(--color-carbon); }
.gen__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; margin-top: var(--space-2xl); }
.gen__form { padding: var(--space-xl); background: var(--color-card); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.gen__form label:first-child { margin-top: 0; }
.gen__form .actions { margin-top: var(--space-lg); gap: var(--space-md); }
.gen__out { display: grid; justify-items: center; gap: var(--space-lg); text-align: center; }
.gen__out .sticker { rotate: -2deg; }
.gen__out .sticker .qr { width: min(100%, 260px); }
#gen-preview.is-sample { opacity: 0.35; }
.gen__note { max-width: 36ch; font-size: var(--text-sm); }
.gen__status { min-height: 1lh; font-weight: 600; }

/* home: monthly services against QRKeeps */
.compare { padding-block: var(--section-gap) var(--space-2xl); }
.compare__also { margin-top: var(--space-lg); }
.compare__also .rows__row { grid-template-columns: minmax(0, 28fr) minmax(0, 72fr); gap: var(--space-xs) 0; }
.compare__also .rows__row:first-child { padding-top: var(--space-lg); border-top: var(--rule-bar) dashed var(--color-rule); }
.compare__also p { padding-inline: var(--space-md); font-size: var(--text-lg); font-weight: 600; }
.compare table { margin-top: var(--space-2xl); }
.compare th, .compare td { padding: var(--space-lg) var(--space-md); border-bottom: 0; border-top: var(--rule-bar) dashed var(--color-rule); font-size: var(--text-lg); }
.compare thead th { border-top: 0; padding-block: 0 var(--space-sm); font-size: var(--text-sm); }
.compare thead th:first-child, .compare tbody th { padding-left: 0; }
.compare tbody th { width: 28%; color: var(--color-ink); font-weight: 700; white-space: normal; font-size: var(--text-lg); }
.compare td { width: 36%; }
.compare .us { font-weight: 600; }
.compare thead .us span { display: inline-block; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-2); color: var(--color-carbon); }
.compare .also td { width: auto; }

/* home: the product in use */
.in-use { padding-block: var(--space-2xl) var(--space-xl); }
.in-use__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.kinds { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.kind { padding: var(--space-lg); background: var(--color-card); color: var(--color-ink); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.kind:first-child { rotate: -1deg; }
.kind:last-child { rotate: 0.75deg; }
.kinds h3 { font-size: var(--text-title); }
.kinds p { margin-top: var(--space-xs); max-width: 48ch; }
.shot { justify-self: center; width: min(100%, 440px); margin: 0; }
.shot__frame { aspect-ratio: 4 / 5; border: 6px solid var(--color-white); border-radius: var(--radius-photo); box-shadow: var(--shadow-card); rotate: 1.5deg; }
.shot__frame > img { object-fit: cover; object-position: 50% 0; outline: 1px solid color-mix(in oklab, var(--color-carbon) 8%, transparent); outline-offset: -1px; }
.shot figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

/* the packs: home offer and the pricing page */
.offer { padding-block: var(--space-2xl) var(--section-gap); }
.offer--pricing { padding-block: 0 var(--section-gap-s); }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.section-head + .packs { margin-top: var(--space-2xl); }
.pack { position: relative; display: grid; grid-template-rows: subgrid; gap: var(--space-md); min-width: 0; padding: var(--space-xl); background: var(--color-card); color: var(--color-ink); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.packs--full .pack { grid-row: span 4; }
.packs--short .pack { grid-row: span 4; }
.pack:nth-child(1) { rotate: -1deg; }
.pack:nth-child(2) { rotate: 0.5deg; }
.pack:nth-child(3) { rotate: -0.5deg; }
.pack__name { font-size: var(--text-2xl); }
.packs--full .pack__name { font-size: min(var(--text-section), 3.25rem); }
.pack__tag { position: absolute; top: calc(-1 * var(--space-md)); right: var(--space-lg); padding: var(--space-2xs) var(--space-sm); background: var(--color-accent-2); color: var(--color-carbon); font-weight: 700; font-size: var(--text-sm); border: 4px solid var(--color-white); border-radius: var(--radius-pill); box-shadow: var(--shadow-card-sm); rotate: 4deg; }
.pack__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); }
.pack .price { display: inline-block; rotate: -2deg; padding: var(--space-md) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.35; border: 4px solid var(--color-white); border-radius: var(--space-xs); box-shadow: var(--shadow-card-sm); }
.pack__terms { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.pack__list { padding-left: var(--space-lg); }
.pack__list li + li { margin-top: var(--space-2xs); }
.pack__count { font-weight: 700; font-size: var(--text-lg); }
.pack__action { align-self: end; }

/* pricing page */
.page-hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.page-hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--space-3xl); align-items: end; }
.page-hero h1 { max-width: 14ch; }
.faq { padding-block: var(--section-gap-s) var(--section-gap); }
.faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.rows__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-sm) var(--gap-columns); padding-block: var(--space-lg); border-top: var(--rule-bar) dashed var(--color-rule); }
.rows__row:first-child { padding-top: 0; border-top: 0; }
.rows__row h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0; line-height: 1.3; }

/* home: the close on the ink band */
.close { padding-block: var(--section-gap-s); background: var(--color-band); color: var(--color-band-ink); }
.close__in { display: grid; justify-items: start; gap: var(--space-xl); }
.close__statement { position: relative; width: fit-content; max-width: 100%; padding-right: var(--space-xl); }
.close__statement h2 { width: fit-content; max-width: 17ch; font-size: var(--text-display-s); line-height: 1.04; }
.close__statement .tag { top: calc(-1 * var(--space-2xl)); right: calc(-1 * var(--space-md)); rotate: 5deg; }

/* home: the buy bar, sticky only while the sections between the hero and the packs scroll past */
.buyzone { position: relative; }
.buybar { position: sticky; bottom: var(--space-sm); z-index: var(--z-sticky); padding-bottom: var(--space-sm); }
.buybar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: 760px; margin-inline: auto; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); background: var(--color-band); color: var(--color-band-ink); border: 4px solid var(--color-white); border-radius: var(--radius-pill); box-shadow: var(--shadow-card-sm); }
.buybar__in p { font-weight: 700; min-width: 0; }
.buybar .button { box-shadow: none; }
.buybar .button:active { box-shadow: none; }

@media (max-width: 60rem) {
  .section-head > h2, .section-head > p { grid-column: 1 / -1; }
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .fact--cost { grid-column: 1 / -1; grid-row: auto; }
  .fact--free { grid-column: 1 / -1; }
  .fact--refund, .fact--export { grid-column: span 1; }
  .gen__body, .in-use__in, .page-hero__in, .faq__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .packs { grid-template-columns: minmax(0, 1fr); }
  .pack { grid-row: auto !important; grid-template-rows: none; }
}
@media (max-width: 40rem) {
  .fact { padding: var(--space-lg); }
  .fact--cost, .fact--refund { rotate: -0.5deg; }
  .fact--free, .fact--export { rotate: 0.5deg; }
  .fact--refund, .fact--export { grid-column: 1 / -1; }
  .gen__form { padding: var(--space-lg); }
  .gen__form .actions .button, .gen__form .actions button { width: 100%; }
  .rows__row { grid-template-columns: minmax(0, 1fr); }
  .compare__also .rows__row { grid-template-columns: minmax(0, 1fr); }
  .compare__also p { padding-inline: 0; }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tr { padding-block: var(--space-md); border-top: var(--rule-bar) dashed var(--color-rule); }
  .compare tbody th, .compare td { width: auto; padding: 0; border-top: 0; }
  .compare td { margin-top: var(--space-xs); }
  .compare td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
  .close__statement { padding-right: 0; padding-top: var(--space-xl); }
  .close__statement .tag { right: 0; }
  .buybar { position: static; padding-block: var(--space-lg) 0; }
  .buybar__more { display: none; }
  .buybar__in { padding-left: var(--space-md); }
}

@media (max-width: 24rem) {
  .wordmark { font-size: var(--text-lg); }
  .site-nav { gap: var(--space-sm); }
  .site-nav .button { padding: 0 var(--space-md); font-size: var(--text-sm); }
}

/* app screens and documents */
.app main.wrap { padding-block: var(--space-xl) var(--space-xl); }
.app main > * + * { margin-top: var(--space-md); }
.app main > h2 { margin-top: var(--space-xl); }
.app main > h1 + .lead { margin-top: var(--space-sm); }
.app main > .grid + .card { margin-top: var(--space-lg); }
.app h1 { max-width: 32ch; font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
.app h2 { font-size: var(--text-xl); }
.app h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0; }
.app .lead { color: var(--color-ink-2); }
.card { padding: var(--space-lg); background: var(--color-card); color: var(--color-ink); border: 4px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm); min-width: 0; }
.card > * + * { margin-top: var(--space-sm); }
.card > h2 { font-size: var(--text-lg); }
.narrow { max-width: 560px; }
.grid { display: grid; gap: var(--space-lg); }
@media (min-width: 45rem) { .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.signout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); min-width: 0; }
.signout__who { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.notice { padding: var(--space-sm) var(--space-md); border-radius: var(--space-sm); background: var(--color-accent-2); color: var(--color-carbon); font-weight: 600; }
.notice.error { background: var(--color-error-wash); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-error); }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 2px var(--color-ink); }
.badge.active { background: var(--color-accent-2); color: var(--color-carbon); box-shadow: none; }
.badge.frozen { color: var(--color-muted); box-shadow: inset 0 0 0 2px var(--color-muted); }
.badge.blocked { color: var(--color-error); box-shadow: inset 0 0 0 2px var(--color-error); }
.scroll-x { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-xs); border-bottom: var(--rule-bar) dashed var(--color-rule); }
th { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); white-space: nowrap; }
td.num, th.num { text-align: right; }
.slug-input { max-width: 12em; }
.code-qr { width: min(100%, 220px); padding: var(--space-xs); }
.target + .target { margin-top: var(--space-md); }
.target .row { margin-top: var(--space-xs); }
.report-meta { font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 40rem) {
  .codes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .codes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-bar) dashed var(--color-rule); }
  .codes td { padding: 0; border-bottom: 0; }
  .codes td:first-child { grid-column: 1 / -1; }
  .codes td.num::before { content: attr(data-label) " "; color: var(--color-muted); font-size: var(--text-sm); }
}

/* scans */
.scans__figures { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); }
.scans__figures .price { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.02; }
.scans__figures .muted { font-size: var(--text-sm); }
.chart { width: 100%; height: auto; color: var(--color-ink); }
.chart .base { stroke: var(--color-rule); }
.chart .axis { fill: var(--color-muted); font-family: var(--font-body); font-size: 12px; }
.scans__empty { padding: var(--space-lg); border: var(--rule-bar) dashed var(--color-rule); border-radius: var(--space-sm); }
.scans__empty p + p { margin-top: var(--space-2xs); }
.scans__note { font-size: var(--text-sm); color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  .button, button, input, select, textarea { transition: none; }
  .button:active, button:active { translate: none; }
}