/* buyqrcode.com — public site. Editorial luxe restraint + warm craft energy.
   Hand-written, no build step (DECISIONS #11). Tokens first; the panel has its own
   file (panel.css) and never loads this one.

   Palette = the three locked brand colours (ink, emerald, marker) + a linen/paper
   neutral + a deep emerald (jewel box). Type = Fraunces (serif display, variable
   optical sizes) over Instrument Sans. */

/* 1 — tokens */
:root {
  --ink: #111827;
  --emerald: #059669;
  --emerald-deep: #064E3B;   /* the jewel-box ground */
  --emerald-ink: #047857;    /* buttons: white text reads 5.5:1 (plain emerald is 3.8:1) */
  --emerald-tint: #E3F3EC;   /* selected rows, soft highlights */
  --marker: #FFD84D;         /* locked third colour — used once, for the stamp; never a highlighter */
  --paper: #FFFFFF;
  --linen: #F4F1EA;          /* the page ground */
  --linen-deep: #EAE5D8;     /* alternate bands, flat offset shadows */
  --graphite: #5F6672;       /* secondary text: 4.9:1 on linen */
  --danger: #B42318;
  --rule: rgba(17, 24, 39, .14);
  --rule-strong: rgba(17, 24, 39, .34);
  --rule-paper: rgba(255, 255, 255, .26);
  --paper-70: rgba(255, 255, 255, .74);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Instrument Sans", "Segoe UI", Helvetica, Arial, system-ui, sans-serif;

  --t-hero: clamp(2.5rem, 1.2rem + 3.9vw, 4.5rem);   /* 40 → 72 */
  --t-h2: clamp(1.875rem, 1.25rem + 2vw, 3rem);      /* 30 → 48 */
  --t-h3: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);  /* 22 → 30 */
  --t-price: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem);
  --t-lead: 1.1875rem;
  --t-body: 1rem;
  --t-small: .875rem;
  --t-label: .75rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 3px;        /* near-square, stationery */
  --radius-soft: 8px;
  --head-h: 76px;
  --shadow-flat: 6px 6px 0 var(--linen-deep);
  --shadow-lift: 0 24px 48px -28px rgba(17, 24, 39, .45);
}

/* 2 — base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The header is sticky, so a bare anchor jump parks the target UNDER it (measured: the
   pricing bar's "Pick a plan" hid 45px of its own heading). One rule covers every id. */
[id] { scroll-margin-top: calc(var(--head-h) + 24px); }
body {
  background: var(--linen);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
[hidden], svg [hidden] { display: none !important; }
img { height: auto; }
a { color: var(--emerald-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.1; letter-spacing: -.012em; font-variation-settings: "opsz" 96, "SOFT" 40; }
h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 60; max-width: 14ch; }
h2 { font-size: var(--t-h2); max-width: 22ch; }
h3 { font-size: var(--t-h3); line-height: 1.18; }
h4 { font-family: var(--f-body); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
h1 em, h2 em, h3 em, .display em { font-style: italic; font-weight: 500; }
p { max-width: 62ch; }
ul, ol { padding-left: 1.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--paper); color: var(--ink); padding: var(--s3) var(--s4); z-index: 100; }
.skip-link:focus { left: var(--s3); top: var(--s3); }
.num { font-variant-numeric: lining-nums tabular-nums; }
.text-center { text-align: center; }

/* type utilities */
.eyebrow { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--graphite); margin-bottom: var(--s4); }
.kicker { font-family: var(--f-display); font-style: italic; font-size: 1.375rem; color: var(--emerald-ink); margin-bottom: var(--s3); }
/* A section label that IS the section's heading keeps the kicker's look but the h2's job
   (pricing's four families) — without this the page would run h1 → h3 and skip a level. */
h2.kicker { font-size: 1.375rem; max-width: none; line-height: 1.2; }
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: 52ch; }
.fine, .hint { font-size: var(--t-small); color: var(--graphite); line-height: 1.55; }
.hero__sub, .section__lead { font-size: var(--t-lead); line-height: 1.55; color: var(--graphite); max-width: 56ch; margin-top: var(--s4); }
.serif { font-family: var(--f-display); }

/* 3 — layout */
.container, .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }
.container--narrow { max-width: 820px; }
.section { padding-block: var(--s9); }
.section--tight { padding-block: var(--s8); }
.section--rule { border-top: 1px solid var(--rule); }
.section--smoke, .band--deep { background: var(--linen-deep); }
.sec-head { display: grid; gap: var(--s4); margin-bottom: var(--s7); align-items: end; }
.sec-head .lead { margin: 0; color: var(--graphite); }
@media (min-width: 900px) { .sec-head--split { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 720px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 4 — buttons & links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; font-size: .9375rem; letter-spacing: .005em; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.btn--primary { background: var(--emerald-ink); color: var(--paper); border-color: var(--emerald-ink); }
.btn--primary:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--onink, .btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--onink:hover, .btn--paper:hover { background: var(--linen); border-color: var(--linen); color: var(--ink); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: var(--t-small); }
.btn--lg { min-height: 56px; padding: 16px 30px; font-size: 1rem; }
.btn--block, .btn--wide { width: 100%; }
.btn:active { transform: translateY(1px); }
/* Sign in with Google. A ghost button on paper — Google's own guidance is a light
   surface with its mark at the leading edge, and that is also the ONE shape that does
   not out-shout "Email me a code" above it (DECISIONS #137). */
.btn--google { background: var(--paper); border-color: var(--rule-strong); }
.btn--google:hover { background: var(--paper); border-color: var(--ink); }
.btn__g { flex: none; width: 18px; height: 18px; }
/* The "or" rule between the two doors. One line, the word sitting on it. */
.or { display: flex; align-items: center; gap: var(--s4); margin: var(--s5) 0; color: var(--graphite); font-size: var(--t-small); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.btn__price { font-weight: 500; padding-left: 10px; border-left: 1px solid var(--rule-paper); opacity: .92; }
.btn--ghost .btn__price { border-left-color: var(--rule-strong); }
.arr { display: inline-block; transition: transform .25s ease; }
.btn:hover .arr, .link:hover .arr, .ix:hover .arr, .ticket:hover .arr { transform: translateX(3px); }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; line-height: 1.3; }
.link:hover { border-color: var(--ink); }
.link--paper { color: var(--paper); border-color: var(--rule-paper); }
.link--paper:hover { color: var(--paper); border-color: var(--paper); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s6); }
.ticks { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.tick { width: 16px; height: 16px; flex: none; color: var(--emerald); }

/* 5 — header */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--linen); border-bottom: 1px solid var(--rule); }
.site-head__row { display: flex; align-items: center; height: var(--head-h); gap: var(--s6); }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; font-variation-settings: "SOFT" 100; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 36px; height: 36px; flex: none; }
.site-nav { display: none; gap: var(--s6); }
.site-nav a { color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 500; padding: 6px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-color: var(--ink); }
.site-head__cta { display: none; }
.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: var(--radius); display: grid; place-items: center; cursor: pointer; background: var(--paper); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; }
.menu summary span::before, .menu summary span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); }
.menu summary span::before { top: -6px; }
.menu summary span::after { top: 6px; }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { top: 0; transform: rotate(45deg); }
.menu[open] summary span::after { top: 0; transform: rotate(-45deg); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 12px); width: min(320px, calc(100vw - 2 * var(--gutter))); background: var(--linen); border: 1px solid var(--rule); border-radius: var(--radius-soft); padding: var(--s3) var(--s5) var(--s5); box-shadow: var(--shadow-lift); z-index: 60; }
.menu__panel a { display: block; padding: 13px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: 500; }
.menu__panel a:first-child { border-top: 0; }
.menu__panel .btn { margin-top: var(--s4); width: 100%; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  .site-head__cta { display: inline-flex; }
  .menu { display: none; }
}

/* 6 — hero */
.hero { padding-block: var(--s8) var(--s9); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: center; }
.hero__copy .lead { margin-top: var(--s5); color: var(--ink); }
.hero__fine { margin-top: var(--s5); }
.hero__art { margin: 0; width: 100%; max-width: 620px; }
.hero__cap { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s5); font-size: var(--t-small); color: var(--graphite); line-height: 1.5; max-width: 48ch; }
.live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); margin-top: 6px; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.02fr .98fr; gap: var(--s8); }
  .hero__art { justify-self: end; }
}

/* scenes: inline SVG, real QR inside, viewfinder brackets outside the quiet zone */
.scene { width: 100%; height: auto; display: block; }
.scene text { font-family: var(--f-body); }
.scene .sc-serif, .scene .sc-serif-i { font-family: var(--f-display); font-weight: 500; }
.scene .sc-serif-i { font-style: italic; }
.scene .sc-sans { font-family: var(--f-body); font-weight: 600; }
/* The hero slider. Every scene shares the 600×540 viewBox and they stack in ONE box whose
   height comes from the ratio, not from whichever child is visible — so a scene change (or a
   scene that is momentarily missing) can never move the LCP element. The .vf corner brackets
   are positioned against this box and stay put too. */
.scenes { position: relative; aspect-ratio: 600 / 540; }
.scenes > [data-scene] { position: absolute; inset: 0; }
.scenes .scene { height: 100%; }
.vf { position: relative; }
.vf > .vf-b { position: absolute; inset: 0; pointer-events: none; }
.vf::before, .vf::after, .vf > .vf-b::before, .vf > .vf-b::after { content: ""; position: absolute; width: 28px; height: 28px; border: 2px solid var(--emerald); pointer-events: none; }
.vf::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.vf::after { top: -10px; right: -10px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.vf > .vf-b::before { bottom: -10px; left: -10px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.vf > .vf-b::after { bottom: -10px; right: -10px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.vf--paper::before, .vf--paper::after, .vf--paper > .vf-b::before, .vf--paper > .vf-b::after { border-color: var(--paper); }

/* finish toggle under the hero scene (JS-enhanced; SSR shows the styled finish) */
.finish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--s4); }
.finish__label { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); font-weight: 600; margin-right: 4px; }
.finish button { background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 7px 14px; font-size: var(--t-small); font-weight: 500; cursor: pointer; color: var(--ink); }
.finish button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.finish button:hover { border-color: var(--ink); }
.finish--scenes { margin-top: var(--s3); }
/* Two different claims, two different weights. The ink fill above says "you picked this";
   this quieter emerald outline says only "the demo is showing you this". The timeline never
   touches aria-pressed, so it needs a state hook that is not an ARIA state (DECISIONS #132). */
.finish button[data-auto-on] { border-color: var(--emerald); color: var(--emerald-ink); }

/* 7 — proof strip (trust devices: real ones only) */
.proof { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--linen); }
.proof__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof__item { padding: var(--s4) var(--s4) var(--s4) 0; font-size: var(--t-small); line-height: 1.45; }
.proof__item b { display: block; font-weight: 600; color: var(--ink); }
.proof__item span { color: var(--graphite); }
.proof__item:nth-child(even) { border-left: 1px solid var(--rule); padding-left: var(--s4); }
@media (min-width: 900px) {
  .proof__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof__item { padding: var(--s5) var(--s5) var(--s5) 0; border-left: 1px solid var(--rule); padding-left: var(--s5); }
  .proof__item:first-child { border-left: 0; padding-left: 0; }
}

/* 8 — "What will yours do?" index (the owner's hooks as chapters) */
.index { border-top: 1px solid var(--ink); }
.ix { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s4) var(--s5); align-items: center; padding-block: var(--s6); border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.ix:hover { color: var(--ink); }
.ix__n { grid-column: 1 / -1; font-family: var(--f-display); font-size: 1.125rem; color: var(--graphite); font-variant-numeric: lining-nums; }
/* The hook is a span on the home page (that section already has its own h2) and a real
   h2 on /qr-codes (where the h1 is the page title). The last two properties are the ones
   an <h2> inherits from the base heading rule and a <span> does not, so they are pinned
   to what the live home page already renders: one row, one look, either tag (#136). */
.ix__hook { display: block; font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.16; font-weight: 500; max-width: 24ch; letter-spacing: normal; font-variation-settings: normal; }
.ix__answer { display: block; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--emerald-ink); margin-top: 6px; }
.ix__body { margin-top: var(--s2); color: var(--graphite); max-width: 56ch; }
.ix__meta { font-size: var(--t-small); line-height: 1.5; margin-top: var(--s3); }
.ix__meta b { display: block; font-weight: 600; color: var(--ink); }
.ix__meta span { color: var(--graphite); }
.ix__go { display: inline-flex; gap: 8px; margin-top: var(--s3); font-weight: 600; font-size: var(--t-small); color: var(--ink); }
.ix__thumb { grid-column: 2; grid-row: 2 / 4; width: 96px; height: 96px; transition: transform .35s ease; }
.ix__thumb .uc-art { padding: 8px; }
.ix:hover .ix__thumb { transform: translateY(-3px); }
.ix--more { grid-template-columns: minmax(0, 1fr); }
.ix--more .ix__hook { font-weight: 500; font-style: italic; }
.ix--more .btn { justify-self: start; margin-top: var(--s3); }
@media (min-width: 900px) {
  .ix { grid-template-columns: 64px minmax(0, 1fr) 200px 156px; gap: var(--s6); }
  .ix__n { grid-column: auto; font-size: 1.5rem; }
  .ix__thumb { grid-column: auto; grid-row: auto; width: 156px; height: 156px; }
  .ix__meta { margin-top: 0; }
  .ix--more { grid-template-columns: 64px minmax(0, 1fr) auto; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 6px 12px; font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; color: var(--ink); background: var(--paper); }
.chip--soon { border-style: dashed; color: var(--graphite); }

/* brand illustration stage (approved set + motif fallback) */
.uc-art { display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-soft); padding: var(--s4); line-height: 0; overflow: hidden; }
.uc-art img { width: 100%; height: auto; }
.uc-art--motif { display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, rgba(5, 150, 105, .14), rgba(5, 150, 105, 0) 68%), var(--paper); aspect-ratio: 1; }
.uc-art--motif img { width: 58%; }
.uc-art--hero { width: 100%; max-width: 380px; margin-inline: auto; }

/* 9 — split: the worries, answered (sticky scene + definition ledger) */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: start; }
.split__art { margin: 0; max-width: 620px; }
.dl { border-top: 1px solid var(--rule); margin-top: var(--s6); }
.dl__i { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.dl__q { font-family: var(--f-display); font-style: italic; font-size: 1.375rem; line-height: 1.25; margin-bottom: var(--s2); color: var(--ink); max-width: none; }
.dl__a { color: var(--graphite); max-width: 60ch; }
.dl__a strong { color: var(--ink); font-weight: 600; }
.pull { font-family: var(--f-display); font-size: 1.625rem; line-height: 1.25; margin-top: var(--s7); max-width: 26ch; padding-left: var(--s5); border-left: 3px solid var(--emerald); }
@media (min-width: 1000px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s9); }
  .split__art { position: sticky; top: calc(var(--head-h) + 32px); }
}

/* 10 — steps */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); counter-reset: step; }
.step, .steps > li { border-top: 1px solid var(--ink); padding-top: var(--s5); counter-increment: step; }
.step__n, .steps > li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--f-display); font-size: 2.5rem; line-height: 1; font-variant-numeric: lining-nums; color: var(--ink); }
.step h3, .steps h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.0625rem; margin: var(--s4) 0 var(--s2); letter-spacing: 0; }
.step p, .steps p { color: var(--graphite); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); } }

/* 11 — the jewel box (deep emerald band for the gift tier) */
.jewel { background: var(--emerald-deep); color: var(--paper); }
.jewel .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: center; padding-block: var(--s9); }
.jewel .eyebrow { color: var(--paper-70); }
.jewel h2 { color: var(--paper); max-width: 16ch; }
.jewel .lead { color: var(--paper); opacity: .94; margin-top: var(--s5); }
.jewel .fine { color: var(--paper-70); }
.jewel a:not(.btn) { color: var(--paper); }
.jewel__price { font-family: var(--f-display); font-size: 1.5rem; margin-top: var(--s6); font-variant-numeric: lining-nums; }
.jewel__price span { display: block; font-family: var(--f-body); font-size: var(--t-small); color: var(--paper-70); margin-top: 6px; }
.jewel__art { margin: 0; width: 100%; max-width: 560px; }
/* The ring sits OUTSIDE the button (outline-offset), so on this deep-emerald ground it
   would measure emerald-on-emerald 2.58:1 — under WCAG 1.4.11's 3:1. Paper reads 9.7:1. */
.jewel :focus-visible, .jewel-card :focus-visible { outline-color: var(--paper); }
@media (min-width: 900px) {
  .jewel .container { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .jewel__art { justify-self: end; }
}

/* 12 — scan-me tickets */
.tickets { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); }
.ticket { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.ticket:hover { color: var(--ink); }
.ticket__qr { width: 120px; height: 120px; background: var(--paper); border: 1px solid var(--rule); transition: transform .3s ease; }
.ticket__qr svg { width: 100%; height: 100%; }
.ticket:hover .ticket__qr { transform: translateY(-3px); }
.ticket h3 { font-size: 1.375rem; margin-bottom: 4px; }
.ticket p { margin: 0; font-size: var(--t-small); color: var(--graphite); }
.ticket__go { display: inline-flex; gap: 6px; margin-top: 6px; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
@media (min-width: 900px) {
  .tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .ticket { border-bottom: 0; border-left: 1px solid var(--rule); padding: var(--s6) var(--s5) var(--s6) var(--s5); }
  .ticket:first-child { border-left: 0; padding-left: 0; }
}

/* 13 — pricing ledger (right-aligned prices) */
.family { margin-top: var(--s9); }
.family:first-child { margin-top: 0; }
.family__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.family__head .kicker, .family__head .fine { margin: 0; }
.ledger { border-top: 1px solid var(--ink); }
.lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-block: var(--s6); border-bottom: 1px solid var(--rule); align-items: start; position: relative; }
.lg--featured { background: var(--paper); margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); border-bottom-color: var(--ink); }
.lg__name h3 { font-size: var(--t-h3); }
.lg__name p { margin-top: var(--s2); color: var(--graphite); max-width: 36ch; }
.lg__note { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-style: italic; color: var(--emerald-ink); font-size: 1.0625rem; margin-top: var(--s2); }
.lg__note::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--marker); border: 1px solid var(--ink); }
.lg__feats { list-style: none; padding: 0; margin: 0; }
.lg__feats li { padding: 6px 0; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.lg__feats li:first-child { border-top: 0; padding-top: 0; }
.lg__price { justify-self: start; text-align: left; }
.price { display: block; font-family: var(--f-display); font-size: var(--t-price); line-height: 1; font-variant-numeric: lining-nums; letter-spacing: -.01em; color: var(--ink); }
.price__gst { display: block; font-size: var(--t-small); color: var(--graphite); margin-top: 6px; }
.price__allin { display: block; font-size: var(--t-small); color: var(--ink); margin-top: var(--s3); }
.payonce { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: var(--t-small); color: var(--emerald-ink); margin-top: var(--s3); }
.payonce::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--emerald); }
.lg__price .btn { margin-top: var(--s5); }
@media (min-width: 900px) {
  .lg { grid-template-columns: 1.15fr 1fr .9fr; gap: var(--s7); }
  .lg__price { justify-self: end; text-align: right; }
  .lg--featured { margin-inline: calc(-1 * var(--s5)); padding-inline: var(--s5); }
}
/* add-on row on pricing */
.addon-line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s5); border: 1px dashed var(--rule-strong); border-radius: var(--radius-soft); background: var(--paper); margin-top: var(--s6); }
.addon-line svg { width: 64px; height: 64px; }
.addon-line p { margin: 0; max-width: none; }
.addon-line b { font-weight: 600; }
/* jewel card on pricing */
.jewel-card { background: var(--emerald-deep); color: var(--paper); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding: var(--s6); border-radius: var(--radius-soft); align-items: center; }
.jewel-card h3 { color: var(--paper); font-size: 2rem; }
.jewel-card p { color: var(--paper-70); }
.jewel-card .lead { color: var(--paper); margin-top: var(--s3); }
.jewel-card .price, .jewel-card .price__allin { color: var(--paper); }
.jewel-card .price__gst { color: var(--paper-70); }
.jewel-card .payonce { color: var(--paper); }
.jewel-card ul { list-style: none; padding: 0; margin: var(--s5) 0 0; }
.jewel-card ul li { padding: 8px 0; border-top: 1px solid var(--rule-paper); font-size: var(--t-small); color: var(--paper); }
.jewel-card ul li:first-child { border-top: 0; }
.jewel-card__art { width: 100%; max-width: 320px; justify-self: center; }
.jewel-card a:not(.btn) { color: var(--paper); }
@media (min-width: 900px) { .jewel-card { grid-template-columns: 1.2fr 1fr; gap: var(--s7); padding: var(--s7); } }
/* compare table */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--t-small); }
.cmp th, .cmp td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp th { font-weight: 500; color: var(--graphite); }
.cmp thead th { font-family: var(--f-display); font-size: 1.375rem; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--ink); }
.cmp td b, .cmp .yes { font-weight: 600; color: var(--emerald-ink); }
.cmp .no { color: var(--graphite); }

/* 14 — FAQ (native details) */
.faq { max-width: 780px; }
.faq details, .faq__item { border-top: 1px solid var(--rule); }
.faq details:last-child, .faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s5); padding: var(--s5) 0; font-family: var(--f-display); font-size: 1.375rem; line-height: 1.25; font-weight: 500; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-body); font-weight: 400; color: var(--emerald); font-size: 1.5rem; line-height: 1; flex: none; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p, .faq__a p { margin: 0 0 var(--s5); color: var(--graphite); max-width: 64ch; }
.faq__a { padding-bottom: 0; }

/* 15 — CTA band + footer */
.cta-band, .band { background: var(--ink); color: var(--paper); }
.cta-band .container, .band .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; padding-block: var(--s9); }
.cta-band h2, .band h2 { color: var(--paper); max-width: 20ch; }
.cta-band .btn--primary { background: var(--emerald); border-color: var(--emerald); color: var(--ink); }
@media (min-width: 900px) { .cta-band .container, .band .container { grid-template-columns: 1.2fr auto; gap: var(--s7); } }
.band--emerald { background: var(--emerald-deep); }

.site-footer { border-top: 1px solid var(--rule); padding-block: var(--s8) var(--s7); font-size: var(--t-small); color: var(--graphite); }
.site-footer .container { display: grid; gap: var(--s6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer .foot__about { grid-column: 1 / -1; max-width: 34ch; }
.site-footer h3 { font-family: var(--f-body); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); margin-bottom: var(--s3); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot__brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; }
.foot__brand svg { width: 32px; height: 32px; }
.foot__bottom { grid-column: 1 / -1; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
@media (min-width: 900px) {
  .site-footer .container { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
  .site-footer .foot__about { grid-column: auto; }
}

/* 16 — sticky mobile CTA (CSS only; hidden on desktop) */
.stickybar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--linen); border-top: 1px solid var(--rule); }
.stickybar b { font-family: var(--f-display); font-weight: 500; font-size: 1rem; color: var(--ink); display: block; }
.stickybar span, .stickybar small { display: block; font-size: var(--t-label); color: var(--graphite); }
.stickybar strong { font-family: var(--f-display); font-weight: 500; }
@media (min-width: 900px) { .stickybar { display: none; } }
@media (max-width: 899.98px) { body.has-stickybar { padding-bottom: 84px; } }

/* 17 — forms, notices, tables, pills (shared with login + checkout views) */
.field { display: grid; gap: 6px; margin-bottom: var(--s4); }
.field label { font-weight: 600; font-size: var(--t-small); color: var(--ink); }
.field input, .field select, .field textarea { min-height: 48px; padding: 10px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--emerald); outline: 2px solid var(--emerald); outline-offset: 0; }
.field .error { color: var(--danger); font-size: var(--t-small); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s5); }
.field--full { grid-column: 1 / -1; }
@media (min-width: 720px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notice { padding: var(--s4) var(--s5); border-radius: var(--radius); margin-bottom: var(--s5); border: 1px solid var(--rule-strong); background: var(--paper); max-width: none; }
.notice ul { margin-top: var(--s2); }
.notice--ok { background: var(--emerald-tint); border-color: var(--emerald); color: var(--emerald-deep); }
.notice--err { background: #FBEDEC; border-color: var(--danger); color: #7A1710; }
table.list { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.list th, table.list td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rule); }
table.list th { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--graphite); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--t-label); font-weight: 600; }
.pill--active { background: var(--emerald-tint); color: var(--emerald-deep); }
.pill--draft { background: var(--linen-deep); color: var(--graphite); }
.pill--expired, .pill--paused, .pill--disabled { background: #FBEDEC; color: var(--danger); }
.pill--setup { background: var(--marker); color: var(--ink); }

/* breadcrumb */
.breadcrumb, .crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-small); color: var(--graphite); margin-bottom: var(--s5); }
.breadcrumb a, .crumb a { color: var(--graphite); text-decoration: none; }
.breadcrumb a:hover, .crumb a:hover { color: var(--ink); }

/* Frame gallery: one card per frame, its numbers, and the true-relative-scale drawing. */
.framecard { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); margin-top: var(--s5); background: var(--paper, #fff); }
.framecard h3 { margin: 0 0 var(--s2); }
.framecard__times { margin: 0 0 var(--s4); }
.framecard__svg { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; }
.framecard__note { color: var(--slate); font-size: var(--fs-small); margin: var(--s3) 0 0; }

/* THE TWO NUMBERS at checkout: a frame makes the printed sheet bigger than the code. */
.addon-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.addon-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--smoke); border: 1px solid var(--line); font-size: .8125rem; color: var(--slate); }
.order-summary { background: var(--smoke); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); margin-block: var(--s6); }
.order-summary__row { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.order-summary__total { font-family: var(--font-head); font-weight: 700; border-bottom: 0; }

/* 18 — landing page (use case) */
.land { padding-block: var(--s7) var(--s9); }
.land__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: center; }
.land__copy .lead { margin-top: var(--s5); }
.land__copy .body { color: var(--graphite); margin-top: var(--s4); max-width: 58ch; }
.land__visual { display: grid; gap: var(--s5); justify-items: center; }
.land__demo { width: 100%; max-width: 300px; margin: 0; }
.qr-card { background: var(--paper); border: 1px solid var(--rule); padding: var(--s4); }
.qr-card svg { width: 100%; height: auto; }
.qr-card figcaption { font-size: var(--t-label); color: var(--graphite); margin-top: var(--s3); line-height: 1.5; text-align: center; }
.qr-frame { position: relative; }
.warn { display: flex; gap: 12px; margin-top: var(--s6); padding: var(--s4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink); max-width: 52ch; }
.warn svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--emerald-ink); }
.inc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: start; }
.inc ul { list-style: none; padding: 0; }
.inc ul li { padding: 10px 0; border-top: 1px solid var(--rule); }
.inc ul li:first-child { border-top: 0; }
.inc ul li:last-child { border-bottom: 1px solid var(--rule); }
.pricebox { border-top: 1px solid var(--ink); padding-top: var(--s5); }
@media (min-width: 900px) {
  .land__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); }
  .inc { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}

/* phones: lock + reveal previews (HTML/CSS, no emoji) */
.phones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: end; justify-items: center; }
.phone { width: 100%; max-width: 262px; aspect-ratio: 9 / 18.4; background: var(--ink); border-radius: 36px; padding: 10px; box-shadow: var(--shadow-lift); }
.phone__screen { height: 100%; border-radius: 28px; background: var(--linen); overflow: hidden; display: flex; flex-direction: column; padding: 36px 22px 24px; position: relative; }
.phone__screen--paper { background: var(--paper); }
.phone__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 76px; height: 20px; border-radius: 12px; background: var(--ink); }
.phone__url { font-size: 10px; color: var(--graphite); text-align: center; margin: 0 0 18px; letter-spacing: .04em; }
.phone .lock__glyph { width: 44px; height: 44px; margin: 6px 0 16px; color: var(--emerald); }
.phone .lock__h { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; margin: 0 0 10px; }
.phone .lock__p { font-size: 12px; color: var(--graphite); line-height: 1.5; margin: 0 0 16px; }
.phone .pin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.phone .pin span { height: 44px; border-bottom: 1.5px solid var(--ink); display: grid; place-items: center; }
.phone .pin span:nth-child(n+3) { border-color: var(--rule-strong); }
.phone .pin span i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.phone .pin span:nth-child(3) i { background: var(--emerald); }
.phone .pin span:nth-child(4) i { display: none; }
.phone .btn { margin-top: auto; }
.phone .reveal { background: var(--linen); border: 1px solid var(--rule); padding: 20px 16px; margin-top: 6px; }
.phone .reveal__msg { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.25; margin-bottom: 14px; }
.phone .reveal__credit { font-size: 10px; color: var(--graphite); margin-top: auto; text-align: center; padding-top: 18px; }
.phones__cap { grid-column: 1 / -1; font-size: var(--t-small); color: var(--graphite); text-align: center; max-width: 44ch; justify-self: center; }
@media (min-width: 720px) { .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the gift family (one live, three coming soon) */
.gift-family { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.gf { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-soft); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); position: relative; }
.gf--live { border-color: var(--ink); }
.gf__icon { width: 44px; height: 44px; color: var(--emerald-ink); }
.gf h3 { font-size: 1.375rem; }
.gf p { color: var(--graphite); font-size: var(--t-small); max-width: none; }
.gf__tag { align-self: flex-start; }
.gf__foot { margin-top: auto; padding-top: var(--s3); }
.gf__price { font-family: var(--f-display); font-size: 1.25rem; }
.gf__price span { display: block; font-family: var(--f-body); font-size: var(--t-label); color: var(--graphite); }
@media (min-width: 720px) { .gift-family { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gift-family { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.interest { margin-top: var(--s7); padding: var(--s6); background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-soft); box-shadow: var(--shadow-flat); display: grid; gap: var(--s5); align-items: start; }
.interest h3 { font-size: 1.625rem; }
.interest__form { display: grid; gap: var(--s3); }
.interest__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.interest .field { margin: 0; }
.interest .hp { position: absolute; left: -9999px; }
.interest__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.interest__choices label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 8px 14px; font-size: var(--t-small); font-weight: 500; cursor: pointer; background: var(--paper); }
.interest__choices label:has(input:checked) { border-color: var(--ink); background: var(--emerald-tint); }
.interest__choices input { accent-color: var(--emerald-ink); margin: 0; }
@media (min-width: 900px) {
  .interest { grid-template-columns: 1fr 1.2fr; gap: var(--s7); }
  .interest__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
.story__art { margin: 0; }
@media (min-width: 900px) { .story { grid-template-columns: .9fr 1.1fr; gap: var(--s8); } }

/* 19 — checkout (choose + pay) */
.buy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: start; padding-block: var(--s6) var(--s9); }
.buy__main > * + *, .buy__main form > * + * { margin-top: var(--s7); }
.buy__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
.buy__head h1 { font-size: var(--t-h2); max-width: 18ch; }
.buy__qr { margin: 0; max-width: 220px; }
.buy__qr .qr-card { position: relative; }
.buy__qr .qr-card__lock { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; color: var(--emerald-ink); background: var(--paper); border-radius: 50%; padding: 5px; border: 1px solid var(--rule); }
.tiers { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.tier { padding: var(--s4) var(--s5); border-top: 1px solid var(--rule); cursor: pointer; position: relative; display: block; text-decoration: none; color: var(--ink); }
.tier:first-child { border-top: 0; }
.tier__name { display: block; font-weight: 600; }
.tier__price { display: block; font-family: var(--f-display); font-size: 1.5rem; font-variant-numeric: lining-nums; margin-top: 4px; }
.tier__term { display: block; font-size: var(--t-label); color: var(--graphite); }
.tier--on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tier--on::after { content: ""; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }
.opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: center; padding: var(--s5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: pointer; }
.opt input { width: 20px; height: 20px; accent-color: var(--emerald-ink); margin: 0; }
.opt__name { font-weight: 600; }
.opt__desc { margin-top: 4px; font-size: var(--t-small); color: var(--graphite); max-width: 56ch; }
.opt__price { grid-column: 2; font-family: var(--f-display); font-size: 1.375rem; font-variant-numeric: lining-nums; line-height: 1.1; }
.opt__price small { display: block; font-family: var(--f-body); font-size: var(--t-label); color: var(--graphite); }
.opt__qty { grid-column: 2; max-width: 160px; }
.opt__qty .field { margin: 0; }
.free { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); margin-top: var(--s5); }
.free__list { list-style: none; padding: 0; }
.free__list li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: var(--t-small); display: flex; justify-content: space-between; gap: var(--s4); }
.free__list li span { color: var(--graphite); white-space: nowrap; flex: none; }
.free__list li:last-child { border-bottom: 1px solid var(--rule); }
.summary { background: var(--paper); border: 1px solid var(--rule); padding: var(--s6); border-radius: var(--radius); }
.summary h2 { font-size: 1.5rem; margin-bottom: var(--s4); }
.sum { font-size: var(--t-small); }
.sum div { display: flex; justify-content: space-between; gap: var(--s4); padding: 9px 0; border-top: 1px solid var(--rule); }
.sum div:first-child { border-top: 0; }
.sum .sum__total { border-top: 1px solid var(--ink); font-size: 1.0625rem; font-weight: 500; padding-top: 12px; margin-top: 4px; }
.sum .sum__total b { font-family: var(--f-display); font-size: 1.75rem; font-weight: 500; font-variant-numeric: lining-nums; }
.summary .btn { margin-top: var(--s5); }
.trust { list-style: none; padding: 0; margin-top: var(--s4); font-size: var(--t-label); color: var(--graphite); line-height: 1.6; display: grid; gap: 4px; }
.trust li { display: flex; gap: 8px; align-items: flex-start; }
.trust svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--emerald); }
.paymarks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.paymarks span { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 4px; color: var(--graphite); }
.next { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.next h3 { font-family: var(--f-body); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); margin-bottom: var(--s3); }
.next ol { margin: 0; padding-left: 18px; font-size: var(--t-small); color: var(--ink); }
.next li { padding: 3px 0; }
.next-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--ink); }
.next-strip div { font-size: var(--t-small); }
.next-strip b { display: block; font-family: var(--f-display); font-size: 1.125rem; font-weight: 500; margin-bottom: 4px; }
.next-strip span { color: var(--graphite); }
@media (min-width: 720px) {
  .buy__head { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s7); }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier { border-top: 0; border-left: 1px solid var(--rule); }
  .tier:first-child { border-left: 0; }
  .opt { grid-template-columns: auto minmax(0, 1fr) 120px auto; }
  .opt__price { grid-column: auto; text-align: right; }
  .opt__prev { grid-column: auto; }
  .opt__qty { grid-column: 2 / -1; }
  .free, .next-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .free { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .buy { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s8); }
  .summary { position: sticky; top: calc(var(--head-h) + 24px); }
}
.opt__prev svg, .opt__prev { width: 96px; height: 96px; }
.opt__prev { border: 1px solid var(--rule); background: var(--paper); }

/* 20 — pages that are one card (lock, reveal, demos, inactive, 404) */
.demo-page { min-height: calc(100vh - var(--head-h)); display: grid; place-items: center; padding: var(--s7) var(--gutter); }
.demo-page__in { width: 100%; max-width: 440px; display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.demo-page__in h1 { font-size: var(--t-h2); max-width: none; }
.demo-page__in .hero__sub { margin-top: 0; }
.card-page { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-soft); padding: var(--s6); width: 100%; display: grid; gap: var(--s4); justify-items: center; }
.glyph { width: 56px; height: 56px; color: var(--emerald-ink); }
.glyph--paper { color: var(--paper); }
/* masked lock screen */
.lock { max-width: 420px; }
.lock__seal { width: 64px; height: 64px; color: var(--emerald-ink); }
.lock h1 { font-size: 2rem; }
.gift-pin-form { display: grid; gap: var(--s3); width: 100%; }
.gift-pin-form .field { margin: 0; }
.gift-pin-input { text-align: center; font-family: var(--f-display); font-size: 2rem; letter-spacing: .4em; padding-left: .4em; }
.gift-pin-input::placeholder { letter-spacing: .2em; font-size: 1.25rem; color: var(--graphite); }
.lock__foot { font-size: var(--t-label); color: var(--graphite); }
/* reveal */
.gift-reveal { max-width: 460px; }
.gift-reveal__card { background: var(--paper); border: 1px solid var(--rule); padding: var(--s6); width: 100%; display: grid; gap: var(--s5); justify-items: center; box-shadow: 8px 8px 0 var(--emerald-tint); }
.gift-message { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.35; max-width: none; overflow-wrap: anywhere; text-align: center; }
.gift-credit { font-size: var(--t-label); }
/* demo: menu card */
.menu-card { background: var(--paper); border: 1px solid var(--rule); padding: var(--s6) var(--s5); width: 100%; max-width: 520px; margin-inline: auto; box-shadow: var(--shadow-flat); }
.menu-card h1 { font-style: italic; text-align: center; font-size: 2.5rem; margin-bottom: var(--s2); max-width: none; }
.menu-card__sub { text-align: center; font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--s4); max-width: none; }
.menu-card h2 { font-size: 1.125rem; font-style: italic; margin: var(--s5) 0 var(--s2); }
.menu-card dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--s4); margin: 0; }
.menu-card dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--graphite); }
.menu-card dt { max-width: none; }
/* demo: visiting card + verify */
.vcard { background: var(--paper); border: 1px solid var(--rule); width: 100%; max-width: 440px; padding: var(--s6); display: grid; gap: var(--s3); text-align: left; box-shadow: var(--shadow-flat); }
.vcard__name { font-size: 2rem; max-width: none; }
.vcard__role { color: var(--graphite); font-size: var(--t-small); }
.vcard__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.verify-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--emerald); border-radius: 999px; color: var(--emerald-deep); background: var(--emerald-tint); font-weight: 600; }
.verify-badge svg { width: 20px; height: 20px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s4); font-size: var(--t-small); text-align: left; width: 100%; }
.kv dt { color: var(--graphite); }
.kv dd { margin: 0; color: var(--ink); }

/* 21 — blog / guides (editorial index) */
.post-list { border-top: 1px solid var(--ink); }
.post-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) var(--s6); padding-block: var(--s6); border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.post-row:hover { color: var(--ink); }
.post-row__meta { font-size: var(--t-small); color: var(--graphite); display: flex; flex-wrap: wrap; gap: 6px 12px; }
.post-row h2 { font-size: var(--t-h3); max-width: 28ch; }
.post-row p { color: var(--graphite); max-width: 60ch; }
.post-row .ix__go { margin-top: var(--s2); }
@media (min-width: 900px) { .post-row { grid-template-columns: 200px minmax(0, 1fr); } .post-row__meta { flex-direction: column; gap: 4px; } }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; font-size: var(--t-small); color: var(--graphite); margin-bottom: var(--s4); }
.badge { display: inline-block; font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald-ink); }
.post-title { margin-top: var(--s3); max-width: 20ch; }
.article-cover { border: 1px solid var(--rule); margin-top: var(--s6); width: 100%; height: auto; }
.blog-tools { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; margin-top: var(--s6); font-size: var(--t-small); }
.blog-tools__cats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.blog-tools__cats a { color: var(--graphite); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.blog-tools__cats a:hover, .blog-tools__cats a[aria-current="true"] { color: var(--ink); border-color: var(--ink); }
.blog-search { display: flex; gap: 8px; margin-left: auto; }
.blog-search input { min-height: 40px; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); width: min(240px, 60vw); }
.blog-pagefoot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); font-size: var(--t-small); color: var(--graphite); }
.blog-empty { color: var(--graphite); }
.pager { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 500; }
.pager a:hover { border-color: var(--ink); }
.pager .is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager .is-off { color: var(--rule-strong); pointer-events: none; }
.pager .is-gap { border-color: transparent; background: transparent; color: var(--graphite); }

/* article body — safe markdown subset */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s7); }
.prose h3 { font-size: 1.25rem; margin-top: var(--s5); }
.prose p { max-width: none; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--s2); }
.prose li { color: var(--ink); }
.prose a { text-decoration: underline; }
.prose blockquote { border-left: 3px solid var(--emerald); padding-left: var(--s4); color: var(--graphite); font-family: var(--f-display); font-style: italic; font-size: 1.25rem; }
.prose code { background: var(--linen-deep); padding: 1px 6px; border-radius: 4px; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prose img { border: 1px solid var(--rule); margin-block: var(--s4); }
.prose hr { border: 0; border-top: 1px solid var(--rule); }
.prose strong { font-weight: 600; }

/* 22 — 404 */
.four { text-align: center; padding-block: var(--s10); }
.four .display { font-family: var(--f-display); font-size: clamp(5rem, 10vw, 9rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.four h1 { margin-inline: auto; max-width: 20ch; margin-top: var(--s4); }
.four p { margin-inline: auto; margin-top: var(--s4); }

/* 23 — motion (signature: scan sweep, module reveal, hover lift). Reduced-motion honoured. */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
@media (prefers-reduced-motion: no-preference) {
  .lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .sweep { animation: sweep 3.4s ease-in-out infinite alternate; }
  .live { animation: live 2.4s ease-in-out infinite; }
  .rise { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .rise--2 { animation-delay: .12s; }
  .rise--3 { animation-delay: .24s; }
  .assemble { animation: assemble 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .lock__seal { animation: breathe 3.2s ease-in-out infinite; }
  .gift-reveal__card { animation: rise .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .gift-credit { animation: fade .8s ease .6s both; }
}
@keyframes sweep { from { transform: translateY(0); } to { transform: translateY(var(--sweep-to, 110px)); } }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, .35); } 50% { box-shadow: 0 0 0 7px rgba(5, 150, 105, 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes assemble { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sweep { display: none; }
}

/* 24 — /qr-demo, the free design demo (DECISIONS #136).
   The two custom properties below are the whole live preview: the figure carries
   them in its own style attribute, the matrices carry .qrd-fg / .qrd-bg on the two
   elements bacon paints, and a colour change repaints without a request. The class
   selectors beat the rendered fill attributes, so the written attribute stays as the
   no-CSS truth and CSS is pure enhancement. */
.qrd .lead { margin-top: var(--s4); }
.qrd__grid { display: grid; gap: var(--s6); margin-top: var(--s7); align-items: start; }
@media (min-width: 900px) { .qrd__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s7); } }

.qrd__stage { background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-flat); padding: var(--s5); display: grid; gap: var(--s4); }
/* The code follows the controls only where they sit BESIDE it. On a phone the two
   are stacked, and a pinned 340px figure would leave no room to read the controls. */
@media (min-width: 900px) { .qrd__stage { position: sticky; top: calc(var(--head-h) + 16px); padding: var(--s6); } }
.qrd__frame { display: grid; place-items: center; }
.qrd__code { width: min(340px, 100%); height: auto; }
/* Stacked, the figure pushed the first control 963px down an 812px screen: the one
   page whose argument IS "touch it and watch it change" opened with nothing to touch.
   Measured at 375x812, this lands the colour row at 797px, so it peeks on first paint
   and the code is still 233px wide. Declared AFTER .qrd__code, or the unmediated
   width would win on equal specificity. Only the stacked layout is affected. */
@media (max-width: 899px) {
  .qrd { padding-top: var(--s6); }
  .qrd__grid { margin-top: var(--s5); gap: var(--s5); }
  .qrd__stage { padding: var(--s4); gap: var(--s3); }
  .qrd__code { width: min(340px, 62vw); }
}
.qrd__code .qrd-bg { fill: var(--qrd-bg); }
.qrd__code .qrd-fg { fill: var(--qrd-fg); }
.qrd__cap { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-small); color: var(--graphite); line-height: 1.5; }

.qrd__panel { display: grid; gap: var(--s5); }
.qrd__msg { border-left: 3px solid var(--danger); background: var(--paper); color: var(--ink); padding: var(--s3) var(--s4); font-size: var(--t-small); line-height: 1.5; }
.qrd__set { display: grid; gap: var(--s3); }
.qrd__legend { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }

.qrd__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.qrd__sw { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 6px 14px 6px 8px; font-size: var(--t-label); font-weight: 600; text-decoration: none; }
.qrd__sw-dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px var(--rule); }
.qrd__sw[aria-current="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.qrd__pick { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3) var(--s4); }
.qrd__pick-one { display: grid; gap: 4px; font-size: var(--t-small); color: var(--graphite); }
.qrd__pick input[type="color"] { width: 60px; height: 40px; padding: 2px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); cursor: pointer; }

.qrd__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qrd__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 500; text-decoration: none; }
.qrd__opt:hover { border-color: var(--ink); }
.qrd__opt[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.qrd__facts { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s4); }
.qrd__facts li { display: grid; gap: 4px; border-top: 1px solid var(--rule); padding-top: var(--s4); }
.qrd__facts b { font-family: var(--f-display); font-size: 1.125rem; font-weight: 500; }
.qrd__facts span { color: var(--graphite); line-height: 1.55; }
.qrd__cta { margin-top: var(--s7); }