/* Hallmark · v2.0.0 · genre: editorial · theme: Riso (deal: manual) · palette: override, the blue drum re-pointed at TracQR indigo #211D63, the pink drum at #FF7FB8, wallet card drums #5856D6 #C2185B #0F7B5F as the stack · ground: black #0B0C0E with white type and a white App Store button, matching jgeee.com/jamvote and /divello; pink #FF7FB8 kept for highlights · posture: committed · shape: Workbench (draw: manual) · job: try · hero: Stage, reversed (head on 7, screen on 5) · nav: edge-aligned, wordmark and one App Store link, no inline links · footer: mast, the wordmark over the links and the legal lines · imagery: screenshots 6 (simulator captures from AppStoreAssets), every iPhone screen and the open iPhone Duo in Apple bezels at every width · signature: the wallet of coloured code cards, on the black ground · sections: hero, rows (the wallet stack), split (tracked link), bento 7/5 (Insights crops, Premium), showcase (iPhone Duo open on the links), offer (Premium), band (download with the create screen and a real QR) · copy: owner-approved headline and subline · texture: none (flat, like the sibling sites) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a download page argues little; it now argues that a printed code is worth counting, shown on the owner's three uses and a short link that outlives the print */
/* Hallmark · waive 38iii · one misregistered word, “working.”, in the hero head only · Riso's signature: the pink drum printing under the knocked-out word, matching the app's pink highlight */
/* Hallmark · waive 47b · one frame on the page, the Apple iPhone Duo bezel around a real TracQR capture · the folding iPhone's shape is the fact the section sells, and the bezel is Apple's own artwork, not drawn */
/* Hallmark · waive 23 · the pink plate behind the hero screen covers about 18% of the 1280 fold · Riso's pink drum is a fill, and the owner's App Store art sets #FF7FB8 highlights on solid #211D63 */
/* Hallmark · answered F15 · the wallet stack keeps the app's own 18px card radius and screens keep the iPhone's display corners; every page surface uses Riso's 2px */
/* Hallmark · answered F18 · the slots hold final product captures from AppStoreAssets, not stand-ins, so no swap script ships; replace a file in assets/ to update one */

/* ---------- Controls ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: var(--rule-frame) solid transparent;
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translate(1px, 1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-button); color: var(--color-button-ink); }
.btn--primary:hover { background: var(--color-button-hover); }
.btn--line { border-color: currentColor; color: inherit; }
.btn--line:hover { background: color-mix(in oklab, currentColor 14%, transparent); }

/* ---------- Shared ---------- */
.lead { font-size: var(--text-lead); line-height: 1.4; max-width: 36ch; }

.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head--split {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: end;
}
.head--split h2 { grid-column: 1 / span 6; }
.head--split .lead { grid-column: 8 / span 5; }

figcaption { margin-top: var(--space-sm); color: var(--color-muted); max-width: 46ch; line-height: 1.45; }

/* Phone screens sit in Apple's iPhone 18 Pro bezel (transparent WebP from AppStoreAssets/Framed), at every width. */
.device { background: none; }
.device img { display: block; width: 100%; height: 100%; object-fit: contain; }
.crop {
  overflow: hidden;
  border-radius: var(--radius-card);
  outline: 1px solid color-mix(in oklab, var(--color-ink) 12%, transparent);
  outline-offset: -1px;
}

.grained { position: relative; isolation: isolate; }
.grained::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--texture-opacity);
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Hero ---------- */
.hero {
  --color-focus: var(--color-focus-on-field);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--color-field);
  color: var(--color-on-field);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-height);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
}
.wordmark img { width: 40px; height: 40px; border-radius: 22%; flex-shrink: 0; }

.hero__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-3xl);
  align-items: center;
  padding-block: var(--space-xl) var(--space-2xl);
}
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: 12ch; }
.hero .lead { max-width: 30ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-md);
}
.hero__note { font-size: var(--text-sm); color: var(--color-on-field-muted); }

.misreg { position: relative; display: inline-block; isolation: isolate; }
.misreg::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  white-space: nowrap;
  pointer-events: none;
  color: var(--color-accent);
  transform: translate(2px, 3px);
  animation: drum-settle var(--dur-long) var(--ease-out) 1 both;
}
@keyframes drum-settle {
  from { transform: translate(0, 0); }
  to { transform: translate(2px, 3px); }
}

.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding-block: var(--space-lg);
}
.hero__visual .plate {
  position: absolute;
  inset: 14% 0;
  border-radius: var(--radius-card);
  background: var(--color-accent);
}
.hero__visual .device {
  position: relative;
  z-index: var(--z-raised);
  height: clamp(420px, 68svh, 700px);
  aspect-ratio: 720 / 1469;
}

/* ---------- The wallet stack ---------- */
.wallet { padding-top: var(--section-gap); }
.stack { display: grid; }
.card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  row-gap: var(--space-2xs);
  align-items: center;
  padding: var(--space-xl) var(--space-xl) calc(var(--space-xl) + var(--radius-wallet));
  border-radius: var(--radius-wallet);
  color: var(--color-on-card);
}
.card + .card { margin-top: calc(-1 * var(--radius-wallet)); }
.card:last-child { padding-bottom: var(--space-xl); }
.card--indigo { background: var(--card-indigo); }
.card--raspberry { background: var(--card-raspberry); }
.card--green { background: var(--card-green); }
.card h3 { grid-column: 1 / span 5; grid-row: 1; font-size: var(--text-card); line-height: 1; max-width: none; }
.card__where { grid-column: 1 / span 5; grid-row: 2; font-size: var(--text-sm); font-weight: 500; }
.card__line { grid-column: 7 / span 6; grid-row: 1 / span 2; font-size: var(--text-lead); line-height: 1.4; max-width: 40ch; }

/* ---------- Tracked codes ---------- */
.tracked { padding-block: var(--section-gap-s) var(--section-gap); }
.tracked__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: center;
}
.tracked__text { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.tracked__text p { max-width: 40ch; }
.tracked__text h2 { max-width: 14ch; }
.shortlink {
  margin-top: var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-frame) solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display-s);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  overflow-wrap: break-word;
  min-width: 0;
}
.tracked__figure { grid-column: 8 / span 5; justify-self: center; width: min(100%, 340px); }

/* ---------- Insights: the light pink screen ---------- */
.insights { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.insights__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap-columns);
  align-items: start;
}
.insights__side { display: grid; gap: var(--space-xl); }
.insights figcaption { color: var(--color-ink-2); }

/* ---------- iPhone Duo ---------- */
.duo { padding-top: var(--section-gap); }
.duo__figure {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: end;
}
.duo__device { grid-column: 1 / span 10; background: none; }
.duo__figure figcaption { grid-column: 11 / span 2; margin: 0 0 var(--space-xl); }

/* ---------- Premium ---------- */
.premium { padding-block: var(--section-gap-l) var(--section-gap); }
.premium__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  row-gap: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--rule-frame) solid var(--color-rule);
}
.premium__offer { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); align-content: start; justify-items: start; }
.premium__offer h2 { max-width: 12ch; }
.price { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.price__figure {
  position: relative;
  display: inline-block;
  justify-self: start;
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-figure);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  min-width: 0;
}
.overprint {
  position: absolute;
  left: 42%;
  right: -12%;
  top: 46%;
  bottom: -10%;
  border-radius: var(--radius-card);
  z-index: -1;
  background: var(--card-raspberry);
  pointer-events: none;
}
.price__terms { font-size: var(--text-lead); line-height: 1.4; max-width: 24ch; }
.premium__note { font-size: var(--text-sm); color: var(--color-muted); }

.adds { grid-column: 7 / span 6; display: grid; align-content: start; }
.adds > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.adds > div:first-child { padding-top: 0; border-top: 0; }
.adds dt { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); line-height: 1.1; letter-spacing: -0.01em; }
.adds dd { color: var(--color-ink-2); }

/* ---------- Close ---------- */
.close {
  --color-focus: var(--color-focus-on-field);
  background: var(--color-field);
  color: var(--color-on-field);
  padding-top: var(--section-gap-s);
}
.close__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: end;
}
.close__text { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--section-gap-s); }
.close__text h2 { max-width: 16ch; }
.close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-md);
}
.qr { display: flex; align-items: center; gap: var(--space-md); max-width: 25rem; }
.qr__code { width: 120px; height: 120px; flex-shrink: 0; color: #000; border-radius: var(--radius-card); }
.qr__ground { fill: #fff; }
.qr p { font-size: var(--text-sm); line-height: 1.45; color: var(--color-on-field-muted); }
.close__figure { grid-column: 9 / span 4; justify-self: center; width: min(100%, 300px); padding-bottom: var(--section-gap-s); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--space-3xl) var(--space-2xl); }
.footer__grid { display: grid; gap: var(--space-xl); }
.wordmark--large { font-size: var(--text-display-s); gap: var(--space-md); }
.wordmark--large img { width: 56px; height: 56px; }
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.footer__links a:hover { text-decoration-thickness: 4px; }
.footer__legal { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Support page (support/index.html) ---------- */
.help { display: grid; gap: var(--space-lg); justify-items: start; padding-block: var(--space-2xl) var(--section-gap-s); }
.help__kicker { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.help h1 { max-width: 14ch; }
.help__contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-md); }
.help__contact p { font-size: var(--text-lead); }
.help__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 46ch; }

.faq { padding-bottom: var(--section-gap-s); }
.faq__group {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  row-gap: var(--space-lg);
  padding-block: var(--space-2xl);
  border-top: var(--rule-frame) solid var(--color-rule);
}
.faq__group h2 {
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  align-self: start;
  font-size: var(--text-card);
  line-height: 1;
}
/* A chip in the wallet card colours, one per group. */
.faq__group h2::before {
  content: "";
  flex-shrink: 0;
  width: 0.6em;
  height: 0.6em;
  border-radius: 0.15em;
  background: var(--chip);
}
.faq__group--indigo { --chip: var(--card-indigo); }
.faq__group--raspberry { --chip: var(--card-raspberry); }
.faq__group--green { --chip: var(--card-green); }
.faq__group dl { grid-column: 6 / span 7; display: grid; }
.faq__group dl > div { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.faq__group dl > div:first-child { padding-top: 0; border-top: 0; }
.faq__group dt { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); line-height: 1.15; letter-spacing: -0.01em; }
.faq__group dd { color: var(--color-ink-2); max-width: 60ch; }
.faq__group b { font-weight: 500; color: var(--color-ink); }
.footer__links a[aria-current="page"] { text-decoration-thickness: 4px; }

/* ---------- Legal pages (privacy/, terms/) ---------- */
.legal { padding-bottom: var(--section-gap-s); }
.legal__head { display: grid; gap: var(--space-md); justify-items: start; padding-block: var(--space-2xl); }
.legal__date { color: var(--color-muted); }
.legal__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  padding-top: var(--space-2xl);
  border-top: var(--rule-frame) solid var(--color-rule);
}
.legal__toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: var(--space-lg); }
.legal__toc-title { margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.legal__toc ol { display: grid; gap: var(--space-2xs); counter-reset: toc; }
.legal__toc li { counter-increment: toc; display: flex; gap: var(--space-xs); font-size: var(--text-sm); line-height: 1.4; }
.legal__toc li::before { content: counter(toc) "."; min-width: 1.6em; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.legal__toc a { display: inline-block; padding-block: var(--space-3xs); text-decoration: none; color: var(--color-ink-2); }
.legal__toc a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }

.legal__body { grid-column: 5 / span 8; min-width: 0; max-width: 68ch; color: var(--color-ink-2); }
.legal__body section { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.legal__body section:first-of-type { padding-top: 0; border-top: 0; }
.legal__intro { margin-bottom: var(--space-xl); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink); }
.legal__intro + section { padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.legal__body h2 { margin-bottom: var(--space-md); font-size: var(--text-title); line-height: 1.15; color: var(--color-ink); scroll-margin-top: var(--space-lg); }
.legal__body h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-md); line-height: 1.3; letter-spacing: 0; color: var(--color-ink); }
.legal__body h2 + h3 { margin-top: 0; }
.legal__body p + p, .legal__body p + ul, .legal__body ul + p { margin-top: var(--space-sm); }
.legal__body ul { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); padding-left: 1.25em; list-style: disc; }
.legal__body li::marker { color: var(--color-accent); }
.legal__body strong { font-weight: 500; color: var(--color-ink); }
.legal__body .callout {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}
.legal__contact p + p { margin-top: var(--space-2xs); }

/* ---------- Under 60rem everything stacks in reading order ---------- */
@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-lg) var(--space-2xl); }
  .hero__visual .device { height: clamp(380px, 110vw, 560px); }

  .head--split { grid-template-columns: minmax(0, 1fr); }
  .head--split h2, .head--split .lead { grid-column: 1; }
  .head { margin-bottom: var(--space-xl); }

  .card { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-lg); }
  .card h3, .card__where, .card__line { grid-column: 1; grid-row: auto; }
  .card__line { margin-top: var(--space-sm); font-size: var(--text-md); }

  .tracked__grid, .premium__grid, .close__grid, .duo__figure { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .tracked__text, .tracked__figure, .premium__offer, .adds, .close__text, .close__figure, .duo__device, .duo__figure figcaption { grid-column: 1; }
  .duo__figure { row-gap: 0; }
  .duo__figure figcaption { margin: var(--space-sm) 0 0; }
  .duo__device { width: 100%; }
  .qr { display: none; }

  .insights__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }

  .close__text { padding-bottom: 0; }
  .close__figure { width: min(72%, 280px); }
  .adds > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }

  .help { padding-block: var(--space-xl) var(--space-2xl); }
  .faq__group { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); }
  .faq__group h2, .faq__group dl { grid-column: 1; }

  .legal__head { padding-block: var(--space-xl); }
  .legal__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); padding-top: var(--space-xl); }
  .legal__toc, .legal__body { grid-column: 1; }
  .legal__toc { position: static; padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .legal__toc ol { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .misreg::after { animation: none; transform: translate(2px, 3px); }
  .btn { transition: background-color var(--dur-short) linear; }
  .btn:active { transform: none; }
}