/* ==========================================================================
   Punchcard — the counter after closing time.
   The ground is drafting navy, borrowed from the Blueprint paper roll and
   taken one shade deeper, so paper stays the only thing that glows.
   Two faces only, matching the app: monospace for anything printed,
   rounded for anything spoken.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* the counter: drafting navy, one shade deeper than the Blueprint roll */
  --counter-deep: #101f42;
  --counter: #172c57;
  --counter-hi: #1e3767;
  --counter-line: #2b4780;
  --chrome-text: #eaf1fd;
  --chrome-dim: #a8bde2;
  --chrome-faint: #7189b5;

  /* the paper and the stuff that touches it (app palette, verbatim) */
  --paper: #fbf9f4;
  --ink: #33322e;
  --faint-ink: #8a877e;
  --ballpoint: #2d5bd1;
  --ballpoint-lit: #a9c6ff;   /* lifted: plain ballpoint disappears against a navy ground */
  --stamp: #e0452f;          /* the printed stamp, matching the app exactly */
  --stamp-btn: #ce3f2b;      /* deeper, so white button text clears 4.5:1 */
  --stamp-lit: #f2705c;
  --highlighter: #ffe86b;
  --kraft: #e4cfa5;
  --kraft-ink: #46351f;
  --blueprint: #1f3f80;
  --blueprint-ink: #e8effb;

  /* type */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;

  /* rhythm */
  --gut: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 11vw, 132px);
  --max: 1140px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--counter-deep);
  color: var(--chrome-text);
  font-family: var(--rounded);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden would make body a scroll container and break the sticky nav */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* the counter's grain, laid over everything, very quietly */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: overlay;
}

:focus-visible {
  outline: 2.5px solid var(--highlighter);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -120%;
  background: var(--highlighter); color: var(--ink);
  padding: 10px 18px; border-radius: 0 0 10px 10px; z-index: 1000;
  font-weight: 600; text-decoration: none; transition: translate .18s ease;
}
.skip-link:focus { translate: -50% 0; }

/* ============================================================ type roles */

/* small printed labels: the receipt's own vocabulary, used for structure */
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-faint);
  margin: 0;
}
.label--lit { color: var(--highlighter); }

h1, h2, h3 { font-family: var(--rounded); font-weight: 700; margin: 0; letter-spacing: -0.02em; }

h1 {
  font-size: clamp(46px, 8vw, 78px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
/* the headline is a deliberate lockup: the instruction, then the payoff */
.h1-l { display: block; }
h2 {
  font-size: clamp(31px, 4.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
h3 { font-size: 20px; line-height: 1.25; }

.lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--chrome-dim);
  max-width: 44ch;
  margin: 0;
}

/* keeps a lone period from orphaning onto its own line after the swipe */
.nb { white-space: nowrap; }

/* the highlighter swipe — a real marker stroke, not a underline */
.swipe {
  position: relative;
  display: inline-block;
  color: var(--counter-deep);
  padding-inline: 0.12em;
  isolation: isolate;
}
.swipe::before {
  content: "";
  position: absolute;
  inset: 0.1em -0.06em 0.06em -0.06em;
  background: var(--highlighter);
  z-index: -1;
  rotate: -1.1deg;
  border-radius: 3px 8px 4px 7px;
  /* a marker never covers evenly */
  clip-path: polygon(0 6%, 100% 0, 99.4% 96%, 0.5% 100%);
}

/* --------------------------------------------------- perforation divider */
/* the one motif, everywhere, quietly: this page is a roll of segments */
.perf {
  height: 1px;
  border: 0;
  margin: 0;
  background-image: radial-gradient(circle, var(--counter-line) 1.4px, transparent 1.5px);
  background-size: 11px 1px;
  background-repeat: repeat-x;
  opacity: 0.9;
}

/* ============================================================== nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--counter-deep) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--counter-line); }
.nav__in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--chrome-text);
  margin-right: auto;
}
.wordmark img { width: 26px; height: 26px; border-radius: 6px; }
.wordmark span { padding-top: 1px; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  font-size: 15px;
  text-decoration: none;
  color: var(--chrome-dim);
  transition: color .18s ease;
}
.nav__links a:hover { color: var(--chrome-text); }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ============================================================== buttons */
.btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--rounded);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease,
    background .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--paper { box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .8); }
.btn--paper:hover { box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .9); }
.btn--stamp { --btn-bg: var(--stamp-btn); --btn-fg: #fff; }
.btn--stamp:hover { box-shadow: 0 12px 30px -12px var(--stamp-btn); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--chrome-text);
  box-shadow: inset 0 0 0 1.5px var(--counter-line);
}
.btn--ghost:hover { --btn-fg: var(--counter-deep); --btn-bg: var(--chrome-text); }
.btn--sm { padding: 10px 18px; font-size: 15px; }
.btn__price {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  opacity: .55;
  letter-spacing: -0.02em;
}

/* ============================================================== hero */
.hero { position: relative; padding-block: clamp(38px, 6vw, 68px) var(--section-y); }
/* the lamp over the counter */
.hero::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  translate: -50%;
  /* never wider than the page, or the glow alone widens the document on phones */
  width: min(880px, 100%);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 42%,
    rgba(255, 232, 107, .13) 0%,
    rgba(255, 232, 107, .05) 34%,
    transparent 66%);
  pointer-events: none;
}
@media (min-width: 960px) {
  .hero::before { left: 27%; }
}

.hero__grid {
  position: relative;
  display: grid;
  gap: 34px;
  grid-template-areas: "copy" "stage" "actions";
}
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 400px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "stage copy"
      "stage actions";
    column-gap: clamp(40px, 6vw, 88px);
    row-gap: 32px;
    align-content: center;
  }
}
/* min-width:0 so long words and wide text can never push the grid wider than the page */
.hero__copy { grid-area: copy; align-self: end; min-width: 0; }
.hero__stage { grid-area: stage; justify-self: center; width: 100%; min-width: 0; }
.hero__actions { grid-area: actions; align-self: start; width: 100%; min-width: 0; }

.hero__eyebrow { margin-bottom: 20px; }
.hero h1 { margin-bottom: 22px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
/* on phones the two calls to action become full-width tap targets */
@media (max-width: 560px) {
  .hero__cta .btn, .pricing__cta .btn { flex: 1 1 100%; }
}
.hero__fine {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--chrome-faint);
  margin: 0;
}
.hero__fine b { color: var(--chrome-dim); font-weight: 500; }

/* ------------------------------------------------- the printer (signature) */
.printer { width: 100%; max-width: 400px; margin-inline: auto; }
/* the hero roll sits a touch under full size so the whole receipt clears the fold */
.printer .receipt { --rs: 0.92; }
@media (max-width: 420px) { .printer .receipt { --rs: 0.8; } }
@media (max-width: 360px) { .printer .receipt { --rs: 0.72; } }

.printer__housing {
  position: relative;
  height: 46px;
  border-radius: 13px 13px 5px 5px;
  background: linear-gradient(178deg, #2f3749 0%, #1d2637 52%, #121926 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 16px 34px -18px rgba(0, 0, 0, .95);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
  z-index: 3;
}
/* the slot the paper comes out of */
.printer__slot {
  width: 78%;
  height: 7px;
  border-radius: 4px;
  background: #0c0b0a;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .07);
}
/* the little status lamp, on while printing */
.printer__lamp {
  position: absolute;
  top: 15px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3d3931;
  transition: background .3s ease, box-shadow .3s ease;
}
.printer.is-printing .printer__lamp {
  background: var(--stamp);
  box-shadow: 0 0 10px 1px var(--stamp);
  animation: lamp-blink 0.6s steps(1) infinite;
}
@keyframes lamp-blink { 50% { opacity: .35; } }

/* the paper hanging out of the slot */
.printer__paper {
  position: relative;
  margin-top: -4px;
  z-index: 2;
  transform-origin: 50% 0;
  animation: sway 7s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { rotate: -0.35deg; }
  50% { rotate: 0.35deg; }
}
/* a running animation outranks inline styles, so the sway must stop before a
   drag can set translate/rotate on the paper */
.printer.is-printing .printer__paper,
.printer.is-dragging .printer__paper { animation: none; }

/* the feed window: the paper grows out of the slot, mechanically.
   The shadow lives on the paper, not the receipt, or the feed window clips it. */
.printer__feed { overflow: hidden; will-change: clip-path; }
.printer__paper { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .58)) drop-shadow(0 3px 5px rgba(0, 0, 0, .4)); }
.printer__feed .receipt-wrap { filter: none; }

.printer.is-torn .printer__paper {
  animation: tear-away .72s cubic-bezier(.32, .06, .5, 1) forwards;
  pointer-events: none;
}
@keyframes tear-away {
  to { translate: 22px 460px; rotate: 11deg; opacity: 0; }
}

.printer__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chrome-faint);
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  padding: 6px;
  transition: color .2s ease;
}
.printer__hint:hover { color: var(--highlighter); }
.printer__hint svg { transition: translate .35s ease; }
.printer__hint:hover svg { translate: 0 3px; }

/* ========================================================== the receipt */
/* a pure function of its content, same order and palette as ReceiptView */
.receipt-wrap {
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55)) drop-shadow(0 3px 6px rgba(0, 0, 0, .4));
  width: fit-content;
  margin-inline: auto;
}
.receipt {
  --rs: 1;
  --f-title: calc(14px * var(--rs));
  --f-body: calc(12px * var(--rs));
  --f-meta: calc(11px * var(--rs));
  --f-label: calc(10px * var(--rs));
  --f-tiny: calc(9px * var(--rs));
  --r-paper: var(--paper);
  --r-ink: var(--ink);
  --r-faint: var(--faint-ink);
  --r-stamp: var(--stamp);
  --r-high: var(--highlighter);

  position: relative;
  width: calc(360px * var(--rs));
  padding: calc(22px * var(--rs)) calc(26px * var(--rs)) calc(30px * var(--rs));
  background-color: var(--r-paper);
  color: var(--r-ink);
  font-family: var(--mono);
  font-size: var(--f-body);
  line-height: 1.35;
  /* straight top edge, torn bottom edge */
  --zig: calc(9px * var(--rs));
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      50% 100% / calc(var(--zig) * 2) var(--zig) repeat-x,
    linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--zig) + 1px) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      50% 100% / calc(var(--zig) * 2) var(--zig) repeat-x,
    linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--zig) + 1px) no-repeat;
}
/* thermal paper grain */
.receipt::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .055;
  pointer-events: none;
  mix-blend-mode: multiply;
}
@media (max-width: 420px) { .receipt { --rs: 0.84; } }
@media (max-width: 360px) { .receipt { --rs: 0.74; } }

.receipt--kraft { --r-paper: var(--kraft); --r-ink: var(--kraft-ink); --r-faint: #8a7657; --r-high: #fff3b0; }
.receipt--blueprint { --r-paper: var(--blueprint); --r-ink: var(--blueprint-ink); --r-faint: #9fb4dc; --r-stamp: var(--highlighter); --r-high: var(--ballpoint); }

/* rows */
.r-line { display: block; }
.r-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.r-center { text-align: center; }
.r-bold { font-weight: 700; }
.r-faint { color: var(--r-faint); }
.r-title {
  text-align: center;
  font-size: var(--f-title);
  font-weight: 700;
  letter-spacing: .08em;
}
.r-sub {
  text-align: center;
  font-size: var(--f-label);
  letter-spacing: .2em;
  color: var(--r-faint);
  margin-top: calc(4px * var(--rs));
}
.r-meta { font-size: var(--f-meta); }
.r-label { font-size: var(--f-label); color: var(--r-faint); }
.r-tiny { font-size: var(--f-tiny); color: var(--r-faint); }

/* the perforated divider inside paper */
.r-perf {
  height: 1px;
  margin-block: calc(9px * var(--rs));
  background-image: radial-gradient(circle, var(--r-faint) 1.1px, transparent 1.2px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  opacity: .75;
}

/* line items */
.r-item { display: flex; align-items: baseline; gap: calc(6px * var(--rs)); padding: calc(1px * var(--rs)) calc(4px * var(--rs)); border-radius: 3px; }
.r-item__qty { width: calc(18px * var(--rs)); flex: none; }
.r-item__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-item__bar { margin-left: auto; opacity: .65; letter-spacing: -.05em; flex: none; }
.r-item__time { min-width: calc(52px * var(--rs)); text-align: right; flex: none; }
.r-item.is-top { background: color-mix(in srgb, var(--r-high) 55%, transparent); }

/* dotted leader rows */
.r-leader { display: flex; align-items: baseline; gap: calc(4px * var(--rs)); }
.r-leader__name { flex: none; }
.r-leader__dots { flex: 1; overflow: hidden; white-space: nowrap; color: var(--r-faint); letter-spacing: .06em; }
.r-leader__val { flex: none; }

/* the stamp: rotated, imperfect, never machine-made */
.r-stamp-slot { display: flex; justify-content: center; padding-block: calc(6px * var(--rs)); }
.r-stamp {
  font-size: calc(17px * var(--rs));
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--r-stamp);
  border: calc(3px * var(--rs)) solid var(--r-stamp);
  border-radius: calc(5px * var(--rs));
  padding: calc(5px * var(--rs)) calc(14px * var(--rs));
  opacity: .88;
  rotate: -3.4deg;
}
.r-stamp--pending { opacity: 0; scale: 2.1; }
.r-stamp--hit { animation: stamp-thunk .34s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes stamp-thunk {
  0% { opacity: 0; scale: 2.1; rotate: -9deg; }
  62% { opacity: .95; scale: .93; rotate: -2.6deg; }
  100% { opacity: .88; scale: 1; rotate: -3.4deg; }
}

.r-barcode { display: block; margin: 0 auto; image-rendering: pixelated; }
.r-barcode-wrap { padding-block: calc(4px * var(--rs)); }
.receipt--blueprint .r-barcode { background: #fff; padding: calc(5px * var(--rs)); border-radius: 2px; }

/* ====================================================== section shell */
.section { padding-block: var(--section-y); position: relative; }
.section__head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 62px); }
.section__head .label { margin-bottom: 16px; }
.section__head h2 { margin-bottom: 18px; }

/* ======================================================= how it works */
/* a real sequence, so it gets real line numbers — receipt line-items, not 01/02/03 */
.beats { display: grid; gap: 1px; background: var(--counter-line); border-radius: 16px; overflow: hidden; }
@media (min-width: 860px) { .beats { grid-template-columns: repeat(3, 1fr); } }
.beat {
  background: var(--counter);
  padding: clamp(26px, 3.4vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background .3s ease;
}
.beat:hover { background: var(--counter-hi); }
.beat__qty {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--chrome-faint);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--counter-line);
  padding-bottom: 12px;
}
.beat__qty b { color: var(--highlighter); font-weight: 500; }
.beat h3 { font-size: 21px; }
.beat p { margin: 0; color: var(--chrome-dim); font-size: 16px; line-height: 1.55; }

/* ========================================================= trust block */
.trust { position: relative; }
.trust__grid { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) { .trust__grid { grid-template-columns: 1fr 360px; } }
.trust__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.trust__list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 16.5px;
  color: var(--chrome-dim);
  line-height: 1.5;
}
.trust__list b { color: var(--chrome-text); font-weight: 650; }
.trust__check { flex: none; margin-top: 3px; color: var(--highlighter); }
.trust__proof {
  margin-top: 30px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--counter);
  border: 1px solid var(--counter-line);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--chrome-dim);
  overflow-x: auto;
}
.trust__proof .c { color: var(--chrome-faint); }
.trust__proof .ok { color: #86c98a; }

/* ============================================================ features */
.features { display: grid; gap: 20px; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  background: var(--counter);
  border: 1px solid var(--counter-line);
  border-radius: 16px;
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.feature:hover { border-color: #443f35; transform: translateY(-3px); background: var(--counter-hi); }
.feature__icon { display: block; color: var(--chrome-dim); margin-bottom: 5px; transition: color .25s ease; }
.feature__icon svg { display: block; width: 25px; height: 25px; }
.feature:hover .feature__icon { color: var(--highlighter); }
.feature h3 { font-size: 18px; }
.feature p { margin: 0; color: var(--chrome-dim); font-size: 15.5px; line-height: 1.55; }
.feature--wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------- paper rolls */
.rolls { display: grid; gap: 18px; margin-top: 22px; }
@media (min-width: 640px) { .rolls { grid-template-columns: repeat(3, 1fr); } }
.roll {
  border-radius: 14px;
  padding: 20px 18px;
  border: 1px solid var(--counter-line);
  background: var(--counter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.roll__swatch {
  height: 92px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.85;
  padding: 11px 13px;
  letter-spacing: .02em;
}
.roll__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .07;
  mix-blend-mode: multiply;
}
.roll__swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
.roll__swatch--classic { background: var(--paper); color: var(--ink); }
.roll__swatch--kraft { background: var(--kraft); color: var(--kraft-ink); }
.roll__swatch--blueprint { background: var(--blueprint); color: var(--blueprint-ink); }
.roll__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.roll__name { font-weight: 650; font-size: 16px; }
.roll__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chrome-faint);
}
.roll__tag--paid { color: var(--highlighter); }
.roll__hex { font-family: var(--mono); font-size: 11.5px; color: var(--chrome-faint); }

/* ============================================================ gag ticker */
.ticker {
  border-block: 1px solid var(--counter-line);
  background: var(--counter);
  padding-block: 26px;
  overflow: hidden;
}
.ticker__in { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 30px; padding-inline: var(--gut); }
.ticker__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--chrome-faint); flex: none; text-transform: uppercase; }
.ticker__line {
  font-family: var(--mono);
  font-size: clamp(14px, 2.2vw, 19px);
  letter-spacing: .04em;
  color: var(--highlighter);
  text-align: center;
  transition: opacity .34s ease, translate .34s ease;
}
.ticker__line.is-out { opacity: 0; translate: 0 -7px; }

/* ============================================================== pricing */
.pricing { position: relative; }
.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255, 232, 107, .085), transparent 70%);
  pointer-events: none;
}
.pricing__in { position: relative; display: grid; gap: clamp(40px, 6vw, 76px); align-items: center; }
@media (min-width: 900px) { .pricing__in { grid-template-columns: 360px 1fr; } }
.pricing__copy h2 { margin-bottom: 18px; }
.pricing__list { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 13px; }
.pricing__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--chrome-dim); font-size: 16.5px; }
.pricing__list b { color: var(--chrome-text); font-weight: 650; }
.pricing__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pricing__note { font-family: var(--mono); font-size: 11.5px; color: var(--chrome-faint); margin: 16px 0 0; letter-spacing: .03em; line-height: 1.7; }

/* ================================================================== faq */
.faq { display: grid; gap: 1px; background: var(--counter-line); border-radius: 16px; overflow: hidden; max-width: 800px; }
.faq details { background: var(--counter); }
.faq summary {
  cursor: pointer;
  padding: 22px clamp(20px, 3vw, 28px);
  font-weight: 650;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  transition: background .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--counter-hi); }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 20px;
  color: var(--chrome-faint);
  flex: none;
  transition: rotate .25s ease, color .2s ease;
}
.faq details[open] summary::after { rotate: 45deg; color: var(--highlighter); }
.faq__body { padding: 0 clamp(20px, 3vw, 28px) 24px; color: var(--chrome-dim); font-size: 16px; line-height: 1.6; max-width: 68ch; }
.faq__body p { margin: 0 0 12px; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body code {
  font-family: var(--mono);
  font-size: 13.5px;
  /* long file paths must wrap rather than widen the page */
  overflow-wrap: anywhere;
  background: var(--counter-deep);
  border: 1px solid var(--counter-line);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--chrome-text);
}
.faq__body a { color: var(--ballpoint-lit); text-underline-offset: 3px; }

/* =============================================================== footer */
.footer { border-top: 1px solid var(--counter-line); padding-block: 54px 44px; }
.footer__in { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.footer__brand { display: grid; gap: 12px; max-width: 30ch; }
.footer__brand p { margin: 0; color: var(--chrome-faint); font-size: 14.5px; line-height: 1.6; }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.footer__links a { color: var(--chrome-dim); text-decoration: none; font-size: 15px; }
.footer__links a:hover { color: var(--chrome-text); text-decoration: underline; text-underline-offset: 3px; }
.footer__sign {
  width: 100%;
  margin-top: 12px;
  padding-top: 26px;
  border-top: 1px dashed var(--counter-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--chrome-faint);
  text-align: center;
  text-transform: uppercase;
}

/* ========================================================= legal pages */
.doc { padding-block: clamp(48px, 7vw, 86px) var(--section-y); }
.doc__in { max-width: 720px; }
.doc h1 { font-size: clamp(36px, 5.4vw, 52px); margin-bottom: 14px; }
.doc__stamp { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--chrome-faint); text-transform: uppercase; margin: 0 0 40px; }
.doc h2 { font-size: clamp(21px, 2.6vw, 25px); margin: 44px 0 14px; }
.doc p, .doc li { color: var(--chrome-dim); font-size: 16.5px; line-height: 1.65; }
.doc p { margin: 0 0 16px; }
.doc ul { padding-left: 20px; margin: 0 0 16px; display: grid; gap: 9px; }
.doc a { color: var(--ballpoint-lit); text-underline-offset: 3px; }
.doc code {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--chrome-text);
  overflow-wrap: anywhere;
}
.doc strong { color: var(--chrome-text); }
.doc__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-faint); text-decoration: none; margin-bottom: 30px; }
.doc__back:hover { color: var(--highlighter); }

/* thank-you page */
.thanks { min-height: 78vh; display: grid; place-items: center; padding-block: 60px; text-align: center; }
.thanks__in { display: grid; gap: 26px; justify-items: center; max-width: 560px; }
.thanks h1 { font-size: clamp(38px, 6vw, 60px); }
.thanks p { color: var(--chrome-dim); margin: 0; font-size: 17.5px; line-height: 1.6; }
.thanks__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; text-align: left; width: 100%; }
.thanks__steps li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--counter); border: 1px solid var(--counter-line);
  border-radius: 13px; padding: 17px 19px; color: var(--chrome-dim); font-size: 16px; line-height: 1.5;
}
.thanks__steps b { color: var(--chrome-text); font-weight: 650; }
.thanks__n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--highlighter); flex: none; margin-top: 4px; }

/* ============================================== scroll reveal + motion */
.reveal { opacity: 0; translate: 0 18px; transition: opacity .62s cubic-bezier(.22,.61,.36,1), translate .62s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; translate: none; }
  .printer__paper { animation: none; }
  .r-stamp--pending { opacity: .88; scale: 1; }
}

/* ============================================== blog */
.blog__grid { margin-top: 28px; border-top: 1px solid var(--counter-line); }
.blog__cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--highlighter); margin: 36px 0 6px; }
.blog__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 13px 4px; border-bottom: 1px solid var(--counter-line); text-decoration: none; color: var(--chrome-text); transition: background .2s; }
.blog__item:hover { background: var(--counter-hi); }
.blog__item b { font-weight: 600; font-size: 16.5px; font-family: var(--rounded); }
.blog__item span { font-family: var(--mono); font-size: 11.5px; color: var(--chrome-faint); white-space: nowrap; }
.doc h3 { font-size: 19px; margin: 28px 0 8px; }
.doc ol { padding-left: 22px; margin: 0 0 16px; display: grid; gap: 9px; }
.doc blockquote { border-left: 3px solid var(--ballpoint-lit); padding-left: 16px; color: var(--chrome-dim); margin: 0 0 16px; }
.doc pre { background: var(--counter-deep); border: 1px solid var(--counter-line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 0 0 16px; }
.doc pre code { font-size: 13.5px; }
.post__cta { margin-top: 44px; background: var(--paper); color: var(--ink); border-radius: 14px; padding: 24px 26px; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; }
.post__cta img { width: 56px; height: 56px; border-radius: 24%; }
.post__cta b { font-family: var(--rounded); font-weight: 700; font-size: 18px; display: block; color: var(--ink); }
.post__cta p { color: var(--faint-ink); font-size: 15px; margin: 4px 0 0; line-height: 1.5; }
.post__cta .btn { margin-top: 12px; }
.post__more { margin-top: 40px; border-top: 1px solid var(--counter-line); }
.post__more h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-faint); margin: 16px 0 6px; }
.post__more a { display: block; padding: 10px 0; border-bottom: 1px solid var(--counter-line); text-decoration: none; color: var(--chrome-text); font-weight: 600; font-size: 16px; }
.post__more a:hover { color: var(--highlighter); }
@media (max-width: 560px) { .post__cta { grid-template-columns: 1fr; } }