/* ==========================================================================
   Pikvita — components.css
   shadcn/ui is the spec (anatomy, variants, states, a11y); styling is ours, from tokens only.
   Sections: Button · Tag · Badge · Chip & Toggle group · Field & Input · Area check · Card ·
   Accordion · Media · Marquee · Receipt · Sticker · Stamp · Price-tag card · Dialog & Sheet · Toast
   Global chrome (strip, header, nav, download band, footer, nudges) follows at the end.
   ========================================================================== */

/* ---------- Button (shadcn: Button → Primary / Secondary / Accent / Minimal / Link) ---------- */
/* Buttons (owner, round 19): 48px, 8px corners, Gilroy 600 16px, 16px sides. Primary = black; secondary
   (.btn--secondary, .btn--accent) = white fill with a black stroke. No offset shadows. */
.btn {
  --btn-bg: var(--color-button);
  --btn-bg-hover: var(--color-button-hover);
  --btn-fg: var(--color-button-fg);
  --btn-border: var(--color-button);
  --btn-shadow: none;
  --btn-shadow-hover: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 var(--space-4);   /* owner: 16px sides on every button */
  font-family: var(--font-ui);
  font-size: var(--text-button);
  font-weight: 600;
  line-height: var(--leading-button);
  letter-spacing: var(--tracking-button);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: var(--border-hair) solid var(--btn-border);
  border-radius: var(--radius-md);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:   /* round 342: --dur-hover (0.45s, was --dur-fast 0.15s), so buttons follow round 341's slower hovers */
    transform var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out);
}
/* hover: no colour change, the button lifts and its label rolls (button-fx.js; owner, round 82) */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.99); }

/* .btn--flat is the primary (kept as a name from the Figma flat buttons) */
.btn--secondary,
.btn--accent {
  --btn-bg: var(--color-button-2);
  --btn-bg-hover: var(--color-button-2-hover);
  --btn-fg: var(--color-button-2-fg);
  --btn-border: var(--color-button-2-stroke);
}
.theme-dark .btn--secondary,
.theme-brand .btn--secondary,
.site-header .btn--secondary,
.sticky-bar .btn--secondary {
  --btn-bg: var(--neutral-0);
  --btn-bg-hover: var(--neutral-100);
}
.btn--minimal {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--accent);
  --btn-border: transparent;
  --btn-shadow: none;
  --btn-shadow-hover: none;
  padding-inline: var(--space-1);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
}
.btn--minimal:hover { transform: none; text-decoration-color: currentColor; }
.btn--minimal:active { transform: none; opacity: 0.75; }

.btn--lg,
.btn--sm { min-height: var(--btn-h); padding: 0 var(--space-4); }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--disabled-bg);
  --btn-bg-hover: var(--disabled-bg);
  --btn-fg: var(--disabled-text);
  --btn-border: var(--disabled-bg);
  --btn-shadow: none;
  --btn-shadow-hover: none;
  cursor: not-allowed;
  transform: none;
}
/* Loading: label stays for width, spinner draws over it */
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--icon-md);
  height: var(--icon-md);
  border: var(--border-ink) solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: btn-spin var(--dur-spin) linear infinite;
}
@keyframes btn-spin { to { transform: rotate(1turn); } }

/* Text link with arrow (Figma "Link" button) */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 calc(100% - 0.6em);
  background-repeat: no-repeat;
  transition: background-size var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.arrow-link .icon { transition: transform var(--dur-hover) var(--ease-out); }
.arrow-link:hover { background-size: calc(100% - var(--icon-md) - var(--space-2)) 1px; }
.arrow-link:hover .icon { transform: translateX(4px); }
.arrow-link:active { opacity: 0.75; }

/* ---------- Tag (price tag with punched hole; shadcn: Badge) ---------- */
.tag {
  --tag-h: 2rem;
  --tag-bg: var(--color-highlight);
  --tag-fg: var(--color-brand-deep);
  --tag-line: var(--color-brand-deep);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: calc(100% - var(--tag-h) / 2);
  height: var(--tag-h);
  margin-left: calc(var(--tag-h) / 2);
  padding: 0 var(--space-4) 0 var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tag-fg);
  background-color: var(--tag-bg);
  border: var(--stroke);
  border-left: 0;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
/* arrow tip: a square turned 45deg whose two left edges carry the outline */
.tag::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: calc(var(--tag-h) * 0.7071);
  height: calc(var(--tag-h) * 0.7071);
  background-color: var(--tag-bg);
  border-left: var(--stroke);
  border-bottom: var(--stroke);
  border-radius: 0 0 0 var(--radius-xs);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* punched hole */
.tag::before {
  content: "";
  position: absolute;
  left: calc(var(--tag-h) * -0.2);
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color);
  transform: translate(-50%, -50%);
}
.tag .icon { width: var(--icon-sm); height: var(--icon-sm); }
.theme-dark .tag, .theme-brand .tag { --tag-line: var(--black-900); }

/* Small status badge (live dot, category) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: var(--leading-eyebrow);
  color: var(--ink);
  border: var(--stroke);
  border-radius: var(--radius-pill);
}
.badge--positive { color: var(--green-600); background-color: var(--color-positive-tint); border-color: transparent; }
.live-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: var(--radius-pill);
  background-color: var(--color-live);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  animation: live-pulse var(--dur-pulse) var(--ease-out) infinite;
}
@keyframes live-pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(3); opacity: 0; }
}
/* only while the site respects the OS reduce-motion setting (motion.js RESPECT_REDUCED_MOTION) */
html.calm .live-dot::after { animation: none; }

/* Promise row: ✓ Store prices · One delivery fee · First 3 deliveries free */
.promise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-body);
  color: var(--ink);
}
.promise li { display: inline-flex; align-items: center; gap: var(--space-2); }
.promise .icon { width: var(--icon-md); height: var(--icon-md); color: var(--color-positive); }
.theme-dark .promise .icon, .theme-brand .promise .icon { color: var(--color-highlight); }

/* ---------- Chip & Toggle group (shadcn: Badge-as-link, Toggle Group) ---------- */
.chip {
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--chip-h);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-body);
  color: var(--black-900);
  text-decoration: none;
  background-color: var(--neutral-0);   /* black or white only (round 224) */
  border: var(--stroke);
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--black-900); background-color: var(--neutral-50); color: var(--black-900); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"],
.chip[aria-current="page"] {
  color: var(--neutral-0);
  background-color: var(--black-900);
  border-color: var(--black-900);
}
.chip:disabled { color: var(--color-text-disabled); border-color: var(--color-border-default); background: none; cursor: not-allowed; }
.chip .icon { width: var(--icon-sm); height: var(--icon-sm); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.toggle-group {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-1);
  margin-inline: calc(var(--margin) * -1);
  padding-inline: var(--margin);
  scroll-padding-inline: var(--margin);
}
.toggle-group::-webkit-scrollbar { display: none; }
.toggle-group .chip { flex: none; }
@media (min-width: 48em) {
  .toggle-group { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* ---------- Field & Input (shadcn: Input, Label, Form) ---------- */
.field { display: grid; gap: var(--space-2); }
.field__label {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-body);
  color: var(--ink);
}
.field__hint { font-size: var(--text-eyebrow); color: var(--text-soft); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-error);
}
.input {
  width: 100%;
  min-height: var(--btn-h);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--stroke);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
  appearance: none;
}
.input::-webkit-calendar-picker-indicator { display: none; }
.input::placeholder { color: var(--neutral-500); opacity: 1; }
.input:hover { border-color: var(--color-brand); }
.input:focus-visible { outline-offset: 1px; border-color: var(--color-brand-deep); }
.input[aria-invalid="true"] { border-color: var(--color-error); background-color: var(--color-error-surface); }
.input:disabled { background-color: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
textarea.input { min-height: 6.5rem; resize: vertical; }

/* ---------- Area check ("Do we deliver to you?") ---------- */
.area-check { display: grid; gap: var(--space-3); max-width: 32rem; }
.area-check__row {
  display: flex;
  border-radius: var(--radius-sm);
}
.area-check__row .input {
  height: var(--btn-h);
  padding-block: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right-width: 0;
  min-width: 0;
}
.area-check__submit {
  font-family: var(--font-ui);
  flex: none;
  min-height: var(--btn-h);
  padding-inline: var(--space-4);
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  color: var(--neutral-0);
  background-color: var(--black-900);   /* black (round 224, was brown) */
  border: var(--border-ink) solid var(--black-900);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.area-check__submit:hover { background-color: var(--neutral-700); border-color: var(--neutral-700); }
.area-check__submit:active { transform: scale(0.98); }
.theme-dark .area-check__submit,
.theme-brand .area-check__submit { color: var(--black-900); background-color: var(--neutral-0); border-color: var(--neutral-0); }
.theme-dark .area-check__submit:hover,
.theme-brand .area-check__submit:hover { background-color: var(--neutral-100); border-color: var(--neutral-100); }
.theme-dark .area-check .input,
.theme-brand .area-check .input { border-color: var(--stroke-color); }   /* the one stroke (on-dark via .theme-brand), round 320 */

.area-check__result {
  /* always a light card, even inside dark bands */
  --ink: var(--color-brand-deep);
  --text: var(--color-text);
  --text-soft: var(--color-text-secondary);
  --accent: var(--color-brand);
  --surface: var(--color-surface);
  --focus-ring: var(--color-focus);
  --shadow-ink: var(--color-brand-deep);
  --shadow-hard: 4px 4px 0 var(--shadow-ink);
  --shadow-hard-hover: 6px 6px 0 var(--shadow-ink);
  --shadow-hard-press: 1px 1px 0 var(--shadow-ink);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--stroke);
  border-left: var(--stroke);
  border-radius: var(--radius-sm);
}
.area-check__result[hidden] { display: none; }
.area-check__result b { display: block; font-size: var(--text-body); color: var(--color-brand-deep); }
.area-check__result--in { border-left-color: var(--color-positive); background-color: var(--green-50); }
.area-check__result--in b { color: var(--green-600); }
.area-check__result--out { border-left-color: var(--color-brand); }

/* ---------- Card (shadcn: Card) ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--text);
  background-color: var(--color-surface);
  border: var(--stroke);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.card--link {
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.card--link:focus-visible { outline-offset: 4px; }
.card__eyebrow { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); }
.card__title { font-family: var(--font-display); font-size: var(--text-subheading); font-weight: 500; line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); color: var(--ink); }
.card__body { color: var(--text-soft); }
.card__foot { margin-top: auto; padding-top: var(--space-3); }
.card--dark {
  --ink: var(--color-on-dark);
  --text: var(--color-on-dark);
  --text-soft: var(--color-on-dark-soft);
  --accent: var(--color-highlight);
  --focus-ring: var(--color-sky);
  background-color: var(--color-brand-deep);
  --stroke-color: rgb(253 246 191 / 0.24);   /* a dark card: the one stroke in its on-dark colour (round 320) */
  border-color: var(--stroke-color);
}
.card--highlight { background-color: var(--color-highlight); }

/* ---------- Accordion (shadcn: Accordion → <details>) ---------- */
.accordion { border-top: var(--stroke); }
.accordion__item { border-bottom: var(--stroke); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap);
  padding-block: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--ink);
  list-style: none;
  transition: color var(--dur-hover) var(--ease-out);
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__trigger .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  transition: transform var(--dur-hover) var(--ease-out);
}
.accordion__item[open] > .accordion__trigger .icon { transform: rotate(45deg); }
.accordion__panel {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding-bottom: var(--space-6);
  max-width: 60ch;
  color: var(--text-soft);
}
/* Smooth open where supported (progressive) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete;
  }
  .accordion__item[open]::details-content { block-size: auto; }
}

/* ---------- Media frame (image / video slots; placeholder look until real shoots) ---------- */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--media-ratio, 3 / 2);
  background-color: var(--color-positive-tint);
  border-radius: var(--radius-sm);
  isolation: isolate;
}
.media > img, .media > picture, .media > picture > img, .media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Marquee (shop wall, value ticker) ---------- */
.marquee {
  --marquee-gap: var(--space-6);
  display: flex;
  overflow: hidden;
  user-select: none;
}
.marquee__track {
  display: flex;
  flex: none;
  min-width: max-content;
  animation: marquee var(--marquee-duration, var(--dur-marquee)) linear infinite;
  will-change: transform;   /* its own layer: no repaint each frame (round 175) */
  backface-visibility: hidden;
  animation-play-state: var(--marquee-state, running);
}
.marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
  margin: 0;
  list-style: none;
}
.marquee.is-paused,
.marquee:hover,
.marquee:focus-within { --marquee-state: paused; }
.marquee:not(.is-ready) .marquee__track { animation: none; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* only while the site respects the OS reduce-motion setting (motion.js RESPECT_REDUCED_MOTION) */
html.calm .marquee__track { animation: none; }
html.calm .marquee { flex-wrap: wrap; }
html.calm .marquee__group { flex-wrap: wrap; }
html.calm .marquee__group[aria-hidden="true"] { display: none; }

/* Diamond separator (Gilroy has no ◆) */
.diamond {
  width: 0.4em;
  height: 0.4em;
  flex: none;
  background-color: currentColor;
  transform: rotate(45deg);
}

/* ---------- Receipt (".ticket": dotted rows, zigzag torn edge, slight tilt) ---------- */
.receipt-wrap {
  filter: drop-shadow(0 18px 24px rgb(24 24 24 / 0.12)) drop-shadow(0 2px 3px rgb(24 24 24 / 0.08));
}
.receipt {
  --tooth: 0.75rem;
  width: min(100%, 22rem);
  padding: var(--space-6) var(--space-6) calc(var(--space-6) + var(--tooth));
  color: var(--color-text);
  background-color: var(--color-surface);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
  transform: rotate(-2deg);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
}
.receipt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: var(--stroke);
}
.receipt__brand {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: var(--tracking-wordmark);
  color: var(--color-text);
}
.receipt__meta { font-size: var(--text-eyebrow); font-weight: 500; color: var(--color-text-tertiary); }
.receipt__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--stroke);
}
.receipt__row > :first-child { font-weight: 600; color: var(--color-brand-deep); }
.receipt__row > :last-child { text-align: right; color: var(--color-text-secondary); }
.receipt__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--stroke);
  border-bottom: 0;
  font-size: var(--text-body);
}
.receipt__row--total > :last-child { font-weight: 700; color: var(--color-brand-deep); }
.receipt__strike { color: var(--color-text-tertiary); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.receipt__free {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  font-weight: 700;
  color: var(--color-surface);
  background-color: var(--color-positive);
  border-radius: var(--radius-xs);
}

/* ---------- Sticker (rotated circle, double ring) ---------- */
.sticker {
  display: grid;
  place-content: center;
  justify-items: center;
  width: var(--sticker-size, 8.5rem);
  aspect-ratio: 1;
  padding: var(--space-3);
  text-align: center;
  color: var(--color-brand-deep);
  background-color: var(--color-highlight);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 5px var(--color-highlight), inset 0 0 0 calc(5px + var(--stroke-w)) var(--stroke-color);   /* inner ring: the one site stroke (round 320) */
  transform: rotate(-12deg);
}
.sticker__big {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: calc(var(--sticker-size, 8.5rem) * 0.24);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}
.sticker__small {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* ---------- Stamp (rubber "PASSED" stamp) ---------- */
.stamp {
  --stamp-color: var(--color-brand);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-1);
  width: var(--stamp-size, 8.5rem);
  aspect-ratio: 1;
  color: var(--stamp-color);
  border: var(--stroke);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 calc(4px + var(--stroke-w)) var(--stroke-color);   /* inner ring: the one site stroke (round 320) */
  transform: rotate(var(--stamp-tilt, -8deg));
  mix-blend-mode: multiply;
}
.stamp__label {
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.stamp__word {
  max-width: 80%;
  overflow-wrap: normal;
  word-break: keep-all;
  font-family: var(--font-display);
  font-size: calc(var(--stamp-size, 8.5rem) * 0.11);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}
.stamp--long .stamp__word { font-size: calc(var(--stamp-size, 8.5rem) * 0.086); }
.stamp__rule { width: 55%; height: 2px; background-color: currentColor; }

/* ---------- Price-tag card (shoppable shop card in posts) ---------- */
.tag-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-6) + var(--space-4));
  color: var(--color-text);
  background-color: var(--color-highlight);
  text-decoration: none;
  clip-path: polygon(1.5rem 0, 100% 0, 100% 100%, 1.5rem 100%, 0 50%);
  transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.tag-card-wrap {
  filter:
    drop-shadow(1.5px 0 0 var(--color-brand-deep)) drop-shadow(-1.5px 0 0 var(--color-brand-deep))
    drop-shadow(0 1.5px 0 var(--color-brand-deep)) drop-shadow(0 -1.5px 0 var(--color-brand-deep));
  transition: filter var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.tag-card-wrap:hover { transform: translate(-2px, -2px) rotate(-0.6deg); }
.tag-card-wrap:active { transform: translate(1px, 1px); }
.tag-card::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: calc(var(--space-1) * -1);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color);
}
.tag-card__icon { grid-row: span 3; width: var(--icon-xl); height: var(--icon-xl); color: var(--color-brand); }
.tag-card__type { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.tag-card__name { font-family: var(--font-display); font-size: var(--text-body); font-weight: 600; line-height: var(--leading-body); }
.tag-card__cta { font-size: var(--text-body); font-weight: 700; line-height: var(--leading-body); color: var(--color-brand); }
.tag-card__cta .icon { display: inline-block; margin-left: var(--space-1); vertical-align: -0.2em; }
.tag-card__cta .icon { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur-hover) var(--ease-out); }
.tag-card-wrap:hover .tag-card__cta .icon { transform: translateX(4px); }   /* the one arrow nudge, 4px (round 324) */
.tag-card:focus-visible { outline: none; }
.tag-card-wrap:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

/* ---------- Dialog & Sheet (shadcn: Dialog, Drawer/Sheet → <dialog>) ---------- */
.dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(100% - var(--gutter) * 2, 30rem);
  height: fit-content;
  max-height: calc(100dvh - var(--space-6));
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: var(--stroke);
  border-radius: var(--radius-md);
  box-shadow: 8px 8px 0 var(--color-brand-deep);
}
.dialog::backdrop { background-color: var(--color-overlay); }
.dialog__body { position: relative; display: grid; gap: var(--space-4); padding: clamp(var(--space-6), 5vw, var(--space-8)); }
.dialog__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--ink);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.dialog__close:hover { background-color: var(--color-ink-rule); }
.dialog__close:active { transform: scale(0.92); }
.dialog__close .icon { width: var(--icon-lg); height: var(--icon-lg); }
.dialog__title { font-size: var(--text-heading); padding-right: var(--space-8); }

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - var(--space-8));
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--color-text);
  background-color: var(--color-bg);
  border-top: var(--stroke);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sheet::backdrop { background-color: var(--color-overlay); }
.sheet--top {
  inset: 0 0 auto 0;
  border-top: 0;
  border-bottom: var(--stroke);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 0;
}
html.has-modal { overflow: hidden; }

/* QR code frame */
.qr {
  width: var(--qr-size, 8.5rem);
  aspect-ratio: 1;
  padding: var(--space-2);
  color: var(--color-brand-deep);
  background-color: var(--color-surface);
  border: var(--stroke);
  border-radius: var(--radius-sm);
}
.qr svg { width: 100%; height: 100%; }
.qr:empty {
  background-image: repeating-linear-gradient(45deg, var(--color-border-subtle) 0 6px, var(--color-surface) 6px 12px);
}

/* ---------- Toast (shadcn: Sonner → role="status") ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - var(--gutter) * 2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-on-dark);
  background-color: var(--color-brand-deep);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast:empty { display: none; }
.toast .icon { color: var(--color-highlight); width: var(--icon-md); height: var(--icon-md); }

/* ==========================================================================
   Global chrome
   ========================================================================== */

/* ---------- Header & navigation (shadcn: Navigation Menu) ----------
   A floating white pill with a 1px black stroke (owner, round 69): logo left, links centred, one black CTA right. The wrapper is transparent and sits 16px
   from the top; it stays put for the whole scroll. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--space-4) var(--margin) 0;   /* the page margin, so the bar can be measured in page-grid columns (round 202) */
  pointer-events: none;
  transition: translate var(--dur-slow) var(--ease-out);
}
.site-header > * { pointer-events: auto; }
.site-header .site-header__inner {
  --ink: var(--color-brand-deep);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  --nav-span: var(--grid-cols);   /* page-grid columns the bar spans, centred: all 4 on phones, all 8 on tablets, 10 at 1024, 8 from 1280 */
  --nav-col: calc((min(100%, var(--container)) - (var(--grid-cols) - 1) * var(--gutter)) / var(--grid-cols));
  min-height: var(--space-9);   /* 64 */
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  color: var(--black);
  position: relative;
  width: calc(var(--nav-span) * var(--nav-col) + (var(--nav-span) - 1) * var(--gutter));   /* edge to edge on grid lines (round 202) */
  margin-inline: auto;
  background-color: rgb(255 255 255 / 0.64);   /* light glass: what scrolls under it stays clearly visible (round 202, replaces round 96's solid white) */
  -webkit-backdrop-filter: blur(4px) saturate(1.4);
  backdrop-filter: blur(4px) saturate(1.4);
  box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color);   /* a half-pixel, very dim stroke, without adding to the 64px height */
  border-radius: 0;   /* square corners (round 96) */
}
/* Logo: the Pikvita "P" mark (assets/images/brand/pikvita-mark.png) as a mask coloured by --ink */
.wordmark {
  display: inline-grid;
  place-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  margin-right: auto;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.wordmark__mark {
  display: block;
  width: 2.25rem;
  height: 2.17rem;   /* mark is 138 × 133 */
  background-color: currentColor;
  -webkit-mask: url("/assets/images/brand/pikvita-mark.png") center / contain no-repeat;
  mask: url("/assets/images/brand/pikvita-mark.png") center / contain no-repeat;
}
.wordmark:hover { transform: translateY(-1px); }
.site-header .wordmark { color: var(--black); }   /* black logo; no hover or press effect in the navbar (round 296; was cream + lift) */
.site-header .wordmark:is(:hover, :active) { color: var(--black); transform: none; }
.wordmark:active { transform: translateY(1px) scale(0.97); }
@media (min-width: 48em) { .wordmark__mark { width: 2rem; height: 1.93rem; } }
/* Navbar (round 343, owner's file "Logo Icon Pikvita.svg", Figma 2417:394): the P icon + "PIKVITA" (pikvita-logo.svg: the letters
   are vector, the P a 512px transparent PNG inside the SVG; viewBox cropped to the ink, 770 × 110). Used as a mask so it takes the
   bar's ink. 24px tall (168 wide); 20 tall (140 wide) under 400px and 18 (126) under 336px, so it and "Get the app" share one row. The footer keeps its P mark. */
.site-header .wordmark__mark {
  width: auto;
  height: var(--space-5);
  aspect-ratio: 770 / 110;
  -webkit-mask-image: url("/assets/images/brand/pikvita-logo.svg");
  mask-image: url("/assets/images/brand/pikvita-logo.svg");
}
@media (max-width: 24.99em) { .site-header .wordmark__mark { height: 1.25rem; } }
@media (max-width: 20.99em) { .site-header .wordmark__mark { height: 1.125rem; } }   /* under 336px: 18 tall (126 wide), or the bar breaks onto two rows at 320 */

.site-nav { display: none; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-nav__link {
  font-family: var(--font-ui);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  padding-inline: var(--space-5);
  font-size: var(--text-button);
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
/* Hover (and the current page): a 1px underline draws in from the left and leaves to the right (round 127) */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: 0.75rem;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.site-nav__link:active { opacity: 0.75; }
@media (max-width: 47.99em) { .site-header__cta { display: none; } }   /* phones: logo and menu button only; the menu panel carries the CTA (round 82) */
.site-header__cta { flex: none; border-radius: var(--radius-md); }
/* Round 342 (owner): on the home page the navbar shows only the logo until section 2 comes up (nav.js sets .is-cta-held); then
   "Get the app" fades up into place, and fades out again if the visitor scrolls back to the hero.
   Round 344 (owner): while held, the pill itself shrinks to wrap the logo (--held-w, measured by nav.js) and stays centred; at
   section 2 it widens to its grid columns (0.9s) and the button fades in once it has room (0.45s later). Going back, the button
   fades out first, then the pill closes. .can-hold marks the home header, so other pages never animate their width. */
/* Round 348 (owner: the morph lagged and the bar changed height): the pill no longer changes size. On the home page (.has-hold,
   set by nav.js before the first paint) its glass and stroke are drawn by ::before, and only that layer narrows to wrap the logo
   (--glass-side, a registered length so it can ease) while the logo glides to the middle with a translate. Nothing inside the
   bar is laid out again during the morph, so its height stays 64 and the page does not stutter. */
@property --glass-side { syntax: "<length>"; inherits: false; initial-value: 0px; }
.site-header.has-hold .site-header__inner {
  isolation: isolate;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header.has-hold .site-header__inner::before {
  content: "";
  position: absolute;
  inset: 0 var(--glass-side) 0 var(--glass-side);
  z-index: -1;
  background-color: rgb(255 255 255 / 0.64);   /* the bar's glass (as .site-header__inner) */
  -webkit-backdrop-filter: blur(4px) saturate(1.4);
  backdrop-filter: blur(4px) saturate(1.4);
  box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color);
  pointer-events: none;
}
/* Round 358: the hold is desktop only; phones always show the P mark and the menu button over the hero */
@media (min-width: 48em) {
  .site-header.has-hold.is-cta-held .site-header__inner::before { --glass-side: var(--held-side, 0px); }
  .site-header.has-hold.is-cta-held .wordmark { translate: var(--held-shift, 0px) 0; }
}
.site-header.can-hold .site-header__inner::before { transition: --glass-side 900ms var(--ease-in-out); }
.site-header.can-hold .wordmark { transition: translate 900ms var(--ease-in-out); }
.site-header.can-hold.is-cta-held .site-header__inner::before, .site-header.can-hold.is-cta-held .wordmark { transition-delay: 300ms; }   /* closing: the button fades first */
.site-header .site-header__cta { white-space: nowrap; }
.site-header.can-hold:not(.is-cta-held) .site-header__cta {
  transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out), opacity var(--dur-reveal) var(--ease-out) 450ms, translate var(--dur-reveal) var(--ease-out) 450ms, visibility 0s 450ms;
}
.site-header .site-header__cta {
  transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out), opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out), visibility 0s;
}
.site-header.can-hold:not(.is-cta-held) .site-nav { transition: opacity var(--dur-reveal) var(--ease-out) 450ms, translate var(--dur-reveal) var(--ease-out) 450ms, visibility 0s 450ms; }   /* round 358: the links come back with the button */
@media (min-width: 48em) {
  .site-header.is-cta-held :is(.site-header__cta, .site-nav) {
    opacity: 0;
    translate: 0 var(--space-2);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-hover) var(--ease-out), translate var(--dur-hover) var(--ease-out), visibility 0s linear var(--dur-hover);
  }
}   /* the primary (black) button on every page since round 320 (was secondary, turning black on hover) */
@media (max-width: 22.49em) { .site-header__cta .icon { display: none; } }   /* round 322: the download icon leads the label, except under 360px, where it would push the bar onto two lines */
/* Phones (owner, round 29): a tighter bar, a compact CTA and a bordered menu button */
@media (max-width: 47.99em) {
  .site-header .site-header__inner { gap: var(--space-2); }
  .site-header__menu { width: var(--btn-h); min-width: 0; padding: 0; border: var(--stroke); border-radius: var(--radius-md); }
  .wordmark__mark { width: 1.75rem; height: 1.69rem; }
}
.site-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap);
  min-height: var(--btn-h);
  padding-inline: var(--space-2);
  font-size: var(--text-button);
  font-weight: 700;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) { .site-header__menu:hover { background-color: var(--color-button-2-hover); } }
.site-header__menu:active { transform: scale(0.96); }
.site-header__menu .icon { width: var(--icon-lg); height: var(--icon-lg); }
/* No JS: the menu button cannot open, so the links show as a row instead */
html:not(.js) .site-header__menu { display: none; }
html:not(.js) .site-nav { display: block; order: 3; width: 100%; }
@media (min-width: 48em) {
  .site-nav { display: block; }
  .site-header__menu { display: none; }
  /* logo left, links centred, CTA right; a narrower bar on desktop */
  .site-header .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); }
  .site-header .site-header__inner { padding-left: var(--space-2); }   /* equal sides, so the links sit exactly in the middle */
  .site-header .wordmark { justify-self: start; margin: 0 0 0 var(--space-2); }
  .site-header .site-header__cta { justify-self: end; }
  html:not(.js) .site-nav { order: 0; width: auto; }
}
@media (min-width: 64em) { .site-header .site-header__inner { --nav-span: 10; } }   /* columns 2–11 (round 358; 6 in round 215) */
@media (min-width: 80em) { .site-header .site-header__inner { --nav-span: 8; } }    /* columns 3–10 (round 358; 4 in round 215) */
/* Round 358 (owner): the links are back in the middle of the bar, Stores and Our Story only (Blog stays hidden, markup kept, until
   its page is redone). Phones: the P mark alone and the bordered menu button, which opens the menu sheet; "Get the app" lives in
   the sheet there. (Round 215 had hidden the links and the menu: the bar was the logo and "Get the app" at every width.) */
.site-nav__list li:has(> a[href="/blog/"]), .menu-sheet__list li:has(> a[href="/blog/"]) { display: none; }
/* Round 421 (owner): the Stores / Our Story links are hidden again for now (markup kept): the bar is the logo + "Get the app"
   at every width, phones included (no menu button). Delete this block to bring the links back. */
.site-header .site-nav, html:not(.js) .site-header .site-nav, .site-header .site-header__menu { display: none; }
.site-header .site-header__inner { justify-content: space-between; }
@media (max-width: 47.99em) { .site-header .site-header__cta { display: inline-flex; } }
@media (min-width: 48em) { .site-header .site-header__inner { grid-template-columns: 1fr auto; } }
@media (max-width: 47.99em) {
  .site-header .site-header__inner { justify-content: space-between; }
  .site-header .wordmark__mark {   /* the P mark (as the footer), not the P + PIKVITA lock-up; the menu sheet's head too */
    width: 1.75rem;
    height: 1.69rem;
    aspect-ratio: auto;
    -webkit-mask-image: url("/assets/images/brand/pikvita-mark.png");
    mask-image: url("/assets/images/brand/pikvita-mark.png");
  }
}

/* Mobile menu (shadcn: Sheet, top) */
/* Mobile menu (shadcn: Sheet): the floating pill expands downward into a panel with the same logo and a close button in the same place (owner, round 73).
   dialog.js "menu" variant animates the clip-path from the 64px head to the full height; nav.js staggers the rows in. */
.menu-sheet.sheet--top {
  inset: var(--space-4) var(--gutter) auto var(--gutter);
  width: auto;
  max-height: calc(100dvh - var(--space-8));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--color-surface);
  border: var(--stroke);
  border-radius: 0;
}
.menu-sheet:focus, .menu-sheet:focus-visible { outline: none; }
.menu-sheet::backdrop { background-color: rgb(24 24 24 / 0.24); }
.menu-sheet__inner { display: grid; max-width: none; padding: 0; }
.menu-sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--space-9) - 2px); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
.menu-sheet__head .dialog__close { position: static; display: inline-grid; place-items: center; width: var(--btn-h); height: var(--btn-h); padding: 0; border: var(--stroke); border-radius: var(--radius-md); background: none; }
.menu-sheet__head .dialog__close .icon { width: var(--icon-md); height: var(--icon-md); }
.menu-sheet__list { margin: 0 var(--space-4); padding: 0; list-style: none; border-top: var(--stroke); }
.menu-sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;   /* 56 */
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: var(--stroke);
  transition: padding var(--dur-hover) var(--ease-out);
}
.menu-sheet__link .icon { width: var(--icon-md); height: var(--icon-md); }
.menu-sheet__link:hover, .menu-sheet__link[aria-current="page"] { padding-left: var(--space-2); }
.menu-sheet .btn--block { display: flex; width: auto; margin: var(--space-4); }


/* ---------- Download band (#download, every page; round 171, reference): white, the copy centred (eyebrow, heading, lede, then the
   QR and the two store badges), a tilted feedback polaroid on each side, two yellow blocks one grid column wide, and the brown value
   strip along the bottom. Phones: the copy, the badges and one polaroid. Tablet: the copy, then both polaroids side by side.
   From 64em on the page grid: polaroid A in columns 1–3 (top), the copy in 4–9, polaroid B in 10–12 (middle), the yellow blocks in
   column 12 (top) and column 1 (bottom). The QR shows on desktop only (smart-cta.js fills [data-qr] there). ---------- */
.download { position: relative; display: flex; flex-direction: column; overflow: hidden; background-color: var(--color-surface); }   /* no full-screen height: --section-pad above and below, like every section (round 241) */
.download > .container { flex: 1; width: 100%; }
.download__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-8);
  align-content: center;
  padding-block: var(--section-pad);
}
.download__copy { order: -1; display: grid; grid-column: 1 / -1; justify-items: center; gap: var(--space-4); text-align: center; }   /* the copy leads on phones and tablet */
.download__copy .eyebrow { display: block; }
.download__title { max-width: 14ch; margin: 0; text-wrap: balance; }
.download__lede { max-width: 30rem; margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-secondary); text-wrap: balance; }
.download__get { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.download__qr { display: none; }   /* desktop only */

.store-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.download .store-badges { justify-content: center; }
.site-footer__badges { margin-top: var(--space-2); }
.download .store-badge { color: var(--neutral-0); background-color: var(--black); border-color: var(--black); box-shadow: none; }
.download .store-badge:hover { background-color: var(--black-2); transform: none; box-shadow: none; }
.store-badge {
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--btn-h);   /* 40px like every button */
  padding: 0 var(--space-4);
  color: var(--color-on-dark);
  text-decoration: none;
  border: var(--stroke);
  border-radius: var(--radius-sm);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.store-badge .icon { width: var(--icon-md); height: var(--icon-md); }
.store-badge:hover { background-color: var(--color-on-dark-rule); }
.store-badge.is-mine {
  order: -1;
  color: var(--color-brand-deep);
  background-color: var(--color-highlight);
  border-color: var(--shadow-ink);
  box-shadow: var(--shadow-hard);
}

/* Store badges (owner, round 231): every Google Play / App Store image badge on the site is the same 160 × 48 (--badge-w × --badge-h),
   8px apart, in every place: download band, footer, QR window, popup, dock. Plain images, no "is-mine" fill. */
.store-badge.store-badge--img { display: block; flex: none; width: var(--badge-w); height: var(--badge-h); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.store-badge.store-badge--img img { display: block; width: 100%; height: 100%; max-width: none; }
.store-badge.store-badge--img:hover { background: none; transform: translateY(-2px); }
.store-badge.store-badge--img:active { transform: none; }

/* Feedback polaroids (round 180): white card with a light stroke, square photo, the quote under it, a strip of tape on top; upright,
   no shadow, as wide as their grid columns (phones 4 of 4, tablet 4 of 8 each, desktop 3 of 12 each) */
.polaroid {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: var(--card-pad);
  background-color: var(--color-surface);
  border: var(--stroke);
  border-radius: var(--radius-md);
  transition: transform var(--dur-hover) var(--ease-out);
}
.polaroid--b { display: none; }
.polaroid__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xs, 4px); }
.polaroid__tape { position: absolute; top: -1.5rem; left: 50%; z-index: 1; width: 6.75rem; height: auto; translate: -50% 0; rotate: 10deg; pointer-events: none; }
.polaroid figcaption { margin-top: var(--space-4); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-secondary); text-wrap: pretty; }
.polaroid mark { padding-inline: var(--space-1); font-weight: 600; color: var(--color-text-secondary); background-color: var(--yellow); }

@media (min-width: 48em) {
  .polaroid--a { grid-column: 1 / span 4; }
  .polaroid--b { display: block; grid-column: 5 / span 4; }
  .polaroid:hover { transform: translateY(-2px); }   /* round 324: the one hover lift, 2px, like buttons and badges */
}
@media (min-width: 64em) {
  .download__grid { grid-template-rows: minmax(36rem, auto); row-gap: 0; }
  .download__copy { order: 0; grid-column: 4 / span 6; grid-row: 1; align-self: center; }
  .download__qr { display: block; width: calc(var(--badge-h) * 2 + var(--space-2)); height: calc(var(--badge-h) * 2 + var(--space-2));   /* as tall as the two stacked badges (round 232) */ padding: var(--space-2); color: var(--black); background-color: var(--color-surface); border: var(--stroke); border-radius: var(--radius-md); }
  .download .store-badges { flex-direction: column; flex-wrap: nowrap; }
  .polaroid--a { grid-column: 1 / span 3; grid-row: 1; align-self: start; }
  .polaroid--b { grid-column: 10 / span 3; grid-row: 1; align-self: center; margin-top: var(--space-11); }
}

/* ---------- Value strips (rounds 169–171: under the home hero and along the foot of the download band on every page): a yellow band with black Eyebrow text (round 267; was brown with yellow), no rules ---------- */
.ticker {
  --marquee-gap: var(--space-4);   /* 16px between every item and divider */
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  flex: none;
  padding-block: var(--space-4);   /* 16px above and below */
  overflow: hidden;
  color: var(--black);
  text-decoration: none;
  background-color: var(--yellow);
}
.ticker .marquee {   /* Eyebrow */
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.ticker__item { white-space: nowrap; }
.ticker .diamond {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--black);
  border-radius: 0;
  transform: none;
  -webkit-mask: url("/assets/icons/sparkle.svg") center / contain no-repeat;
  mask: url("/assets/icons/sparkle.svg") center / contain no-repeat;
  animation: sparkle-turn 2.4s var(--ease-in-out) infinite;   /* all in step: same duration, same start */
}
@keyframes sparkle-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
.ticker .marquee:not(.is-paused):hover, .ticker .marquee:not(.is-paused):focus-within { --marquee-state: running; }   /* round 306: the value strips are plain text, no link, no hover pause */

/* only while the site respects the OS reduce-motion setting (motion.js RESPECT_REDUCED_MOTION) */
html.calm .ticker .marquee { flex-wrap: nowrap; }
html.calm .ticker .diamond { animation: none; }


/* ---------- Footer (Figma 1517:4076, round 36) ----------
   Rows: brand + two link columns · dashed rule · address / legal · game bar · game arena (fills the rest of the screen).
   White domes rise from the top edge into the cream band above. */
.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background-color: var(--color-surface);
}
/* Round 175: on the page grid. Phones (4 cols): the brand, then the link columns 2 + 2 (Follow us wraps under). Tablet (8): the brand,
   then three link columns of 2 columns each. Desktop (12): the brand in columns 1–5, the links in 7–12, 2 columns each. */
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-9) var(--space-8);   /* 64 above (80 from 48em): clear of the value strip */
}
.site-footer__brand, .site-footer__nav { grid-column: 1 / -1; }
.site-footer__brand { display: grid; justify-items: start; gap: var(--space-4); max-width: 32rem; }
/* Round 174: the brown logo replaces the "Pikvita" name; the two store badges sit under the line */
.site-footer__logo { margin: 0; color: var(--black); }   /* round 347 (owner): black (was maroon) */
.site-footer__logo .wordmark__mark { width: 3rem; height: 2.9rem; }   /* 48px tall, mark is 138 × 133 */
.site-footer__brand p { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-secondary); text-wrap: pretty; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--gutter); }   /* each link column = 2 grid columns */
@media (min-width: 48em) {
  .site-footer__top { padding-block: var(--space-10) var(--space-8); }
  .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 8 cols: More about us · Get in touch · Follow us, 2 each */
}
.site-footer__follow a { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__follow .icon { width: var(--icon-md); height: var(--icon-md); flex: none; }
.site-footer__col { display: grid; align-content: start; gap: var(--space-4); }
.site-footer__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text);
}   /* Eyebrow style (round 134) */
/* Store wall (rounds 176–177; round 293, owner): one row of store logos on the page grid, one logo per grid column (12 desktop,
   8 tablet, 4 phones; the rest are hidden), so every tile edge is on a grid line; no store photos. One logo at a time cross-fades to
   another store (footer-logos.js). Under the row, the PIKVITA wordmark (the navbar's, as a mask in the text colour) spans the grid
   from its first to its last line. 64 / 80px above the wall and below the wordmark. */
/* Round 332 (owner): the logo row belongs to the footer's content, right under the address line; then the word gets its own
   full-width yellow band, two Eyebrow lines across its top (left / right), the word standing on the page foot. */
.site-footer__logos { margin-top: var(--space-4); }
.site-footer__band { margin-top: var(--space-9); padding-top: var(--space-6); background-color: var(--yellow); }
@media (min-width: 48em) { .site-footer__band { margin-top: var(--space-10); } }
.site-footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.site-footer__meta .eyebrow { display: block; margin: 0; color: var(--color-text); }
.store-wall { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--gutter); }
.store-wall__tile:nth-child(n + 5) { display: none; }   /* phones: 4 */
@media (min-width: 48em) { .store-wall__tile:nth-child(n + 5) { display: grid; } .store-wall__tile:nth-child(n + 9) { display: none; } }   /* tablet: 8 */
@media (min-width: 64em) { .store-wall__tile:nth-child(n + 9) { display: grid; } }   /* desktop: all 12 */
/* "Pikvita" end to end (rounds 294–295, owner): set in Gilroy 700, capital P since round 295. Measured: the ink of "pikvita" is 3.059em wide, starting
   0.05em in, rising 0.72em above the baseline and dropping 0.19em below it (the p). So the size is the grid width / 3.059, the line box is
   cut to the ink (line-height 0.91, pulled up 0.105em, pulled left 0.05em), and the bottom of the p meets the bottom of the page. */
.store-wall__word { container-type: inline-size; margin-top: var(--space-9); overflow: clip; }   /* the page ends at this box, not at the font's full descent; 64 under the eyebrows (round 332) */
@media (min-width: 48em) { .store-wall__word { margin-top: var(--space-10); } }
/* Round 311, phones only: the word was cropped (the box is cut at the baseline, which shaved the round bottoms of the letters,
   and the iPhone's bottom bar covered more). Here the whole word shows, a hair inside the right edge, with 16px under it plus
   the safe area. */
/* Round 342 (owner: "the word is getting cropped"): the box was cut at the baseline, which sliced the round bottoms of "t" and "a"
   on wider screens too, so the phone rule now holds at every width: the whole word, a hair inside the right edge. Round 345: the
   box clips again, ending ~3px under the lowest ink (the round "t" / "a"), so nothing is cut, no white strip, no gap under the word. */
.store-wall__word { overflow-x: visible; overflow-y: clip; padding-bottom: env(safe-area-inset-bottom, 0px); }   /* round 357: clip top and bottom only, so the ink touching the grid's first and last lines is never shaved    /* round 345: clipped again (the font's box hung ~60px below the band and the page scrolled into white), no space under the letters */
/* Round 347 (owner): back to "Pikvita" set in Gilroy 700 (round 346 tried the P + PIKVITA lock-up here). */
.store-wall__word .store-wall__wordmark { margin-bottom: -0.11em; margin-left: -0.0625em; font-size: calc(100cqw / 3.0086); line-height: 1; }   /* round 357 (owner: end to end): measured Gilroy 700 ink, 3.0086em wide, starting 0.0625em in, so the P stands on the grid's first line and the a ends on its last 
@media (max-width: 47.99em) { .store-wall__word .store-wall__wordmark { margin-top: 0; } }   /* round 351 (owner: cropped at the top on phones): no pull-up, so iPhone Safari's taller line box never pushes the letters past the clipped top */   /* -0.11em: the empty descender room under the baseline, minus the round letters' overshoot */
.store-wall__wordmark {
  display: block;
  margin: -0.105em 0 -0.075em -0.072em;   /* top / left: to the ink (round 295) */
  font-family: var(--font-display);
  font-size: calc(100cqw / 2.99);
  font-weight: 700;
  line-height: 0.91;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-text);
}
.store-wall__tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--tile, var(--neutral-100));
  border-radius: var(--radius-md);
}
.store-wall__tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color); border-radius: inherit; }
.store-wall__tile img { display: block; width: 78%; height: 78%; object-fit: contain; }   /* the whole logo, never clipped */
/* Images blur in on scroll (round 225, img-reveal.js): JS marks each image below the hero, it sharpens when it enters the screen */
html.js img[data-img-reveal] { transition: opacity var(--dur-reveal) var(--ease-out); }   /* round 324: images fade in, no blur (docs/MOTION.md) */
html.js img[data-img-reveal]:not(.is-revealed) { opacity: 0; }

/* Glass chip (round 206, shared since round 225): Eyebrow, white on blurred dark glass, a hairline inside so it stays 40px.
   Used on the section 2 photo ("Highlighted"); the footer's "Open now" / "Closed" photos went in round 293. */
.glass-tag {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--neutral-0);
  background-color: rgb(24 24 24 / 0.40);
  box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color);
  border-radius: var(--radius-xs);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
}

.site-footer__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--tap); }   /* a 44px tap band per link (round 227); the band replaces the old 12px gap */
.site-footer__links a {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--neutral-600);   /* grey at rest (round 292) */
  text-decoration: none;   /* no underline (round 291): on hover the label rolls like a button's and the colour darkens */
  transition: color var(--dur-hover) var(--ease-out);
}
/* the link stays grey; the black comes in with the sliding copy (round 296) */
.site-footer__fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  position: relative;
}
.site-footer__fine::before { content: ""; position: absolute; top: 0; left: var(--margin); right: var(--margin); border-top: var(--stroke); }   /* on the grid edges (round 175) */
.site-footer__fine p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }   /* the bullets centred on the 44px links (round 297) */
.site-footer__legal a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--neutral-600); text-decoration: none; }   /* grey at rest (round 292); a 44px tap band (round 297: they were 26px tall) */
.site-footer__legal a { transition: color var(--dur-hover) var(--ease-out); }
/* Round 347 (owner): the email is a copy button: the copy icon, then the address; a click copies it and toasts "Copied"
   (toast.js [data-copy]). Grey like the legal links, with no hover change and no label roll. */
.site-footer__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0;
  font: inherit;
  color: var(--neutral-600);
  background: none;
  border: 0;
  cursor: pointer;
}
.site-footer__copy .icon { width: var(--icon-md); height: var(--icon-md); flex: none; }
/* no underline (round 291); the black comes in with the sliding copy (round 296) */
@media (min-width: 64em) {
  .site-footer__brand { grid-column: 1 / span 5; }
  .site-footer__nav { grid-column: 7 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* columns 7–8, 9–10, 11–12 */
}

/* ---------- Mobile sticky bar ---------- */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nudge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  color: var(--color-text);
  background-color: var(--color-surface);   /* white bar, dark CTA (owner, round 102) */
  border-top: var(--stroke);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.sticky-bar.is-visible { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out), visibility 0s; }
.sticky-bar__text { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--text-eyebrow); line-height: var(--leading-eyebrow); color: var(--color-text-secondary); }
.sticky-bar__text b { font-size: var(--text-body); font-weight: 600; line-height: var(--leading-body); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-bar .btn { flex: none; }
@media (min-width: 64em) { .sticky-bar { display: none; } }

/* ---------- Desktop dock ---------- */
/* Shared QR tile (QR dialog, popup, dock) */
.qr-box { display: grid; place-items: center; align-self: stretch; padding: var(--space-2); background-color: var(--neutral-50, #FAFAFA); border: var(--stroke); border-radius: var(--radius-sm); }
.qr-box .qr { width: auto; height: 100%; aspect-ratio: 1; padding: 0; color: var(--black); background: none; border: 0; border-radius: 0; }
/* Round 312 (owner reference): a vertical card, the QR on top and "Download Pikvita" centred under it, no close button;
   the card padding (24) all round and 16 between the QR and the line.
   Round 316: the same glass as the navbar (what is behind blurred 4px and saturated 1.4, a half-pixel dim stroke drawn inside
   so it adds no size), on the brand yellow at 64%. The line is Gilroy 500 (medium), sized so it is exactly as wide as the QR
   (owner's request, an exception to the five text sizes: about 24.5px). The QR keeps its white tile. */
.dock {
  --dock-qr: 12rem;   /* 192: big enough to scan from a phone held at arm's length */
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-nudge);
  display: none;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--card-pad);
  background-color: rgb(255 255 255 / 0.64);   /* the navbar's fill: white at 64% (round 321; was --yellow at 64%) */
  -webkit-backdrop-filter: blur(4px) saturate(1.4);   /* the navbar's glass (.site-header__inner) */
  backdrop-filter: blur(4px) saturate(1.4);
  box-shadow: inset 0 0 0 var(--stroke-w) var(--stroke-color);   /* the navbar's stroke: half a pixel, very dim, inside the card */
  border: 0;
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(1.5rem);
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.dock.is-visible { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s; }
.dock.is-visible.is-hidden { visibility: hidden; }   /* round 348: fully tucked under a marquee (nudges.js clips it to the strips) */
.dock.is-visible { transform: none; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; }   /* no slide-up of its own: the strips reveal it as you scroll */
.dock .qr-box { width: var(--dock-qr); height: var(--dock-qr); padding: var(--space-2); background-color: rgb(255 255 255 / 0.88); border: 0; border-radius: var(--radius-md); }   /* frosted white tile: the QR's quiet zone */
.dock__title { display: block; width: var(--dock-qr); margin: 0; font-family: var(--font-display); font-size: calc(var(--dock-qr) / 7.836); font-weight: 500; line-height: var(--space-6); letter-spacing: var(--tracking-subheading); text-align: center; white-space: nowrap; color: var(--color-text); }   /* Gilroy 500; "Download Pikvita" measures 7.836em at this tracking, so this size makes it exactly the QR's width (192 → 24.5px) */
@media (min-width: 64em) { .dock { display: grid; } }

/* ---------- Banner 1 · QR dialog (Figma 1545:13133, rebuilt from scratch: 750 × 325) ----------
   White card, 12px radius, 24px padding and gap. A 277px square tile (#FAFAFA, 0.5px #9E9E9E border, 4px radius, 16px padding)
   holds the QR at 245px; no cream. Copy column 401px: eyebrow, Heading, Body, two badges with 12px between them. */
.qr-dialog { width: min(100% - var(--gutter) * 2, 44.5625rem);   /* round 338: 713 = 24 + QR 240 + 24 + text 400.6 + 24 (was 750) */
  background-color: var(--color-surface); border: 0; border-radius: var(--radius-md); box-shadow: none; }   /* 4px corners (round 338; was 12) */
.qr-dialog .dialog__body { padding: var(--space-5); gap: 0; }
.qr-dialog__grid { display: grid; gap: var(--space-5); align-items: center; }
.qr-dialog__code { display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 15rem); padding: var(--space-4);   /* round 338: 240, as tall as the eyebrow-to-line text block (was 277) */
  background-color: #FAFAFA; border: var(--stroke); border-radius: var(--radius-sm); justify-self: center; }
.qr-dialog__code .qr { width: 100%; height: 100%; padding: 0; color: var(--black); background: none; border: 0; border-radius: 0; }
.qr-dialog__text { display: grid; justify-items: start; gap: var(--space-4); }
.qr-dialog__eyebrow { font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: 500; line-height: var(--leading-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.qr-dialog__copy { display: grid; gap: var(--space-4); width: 100%; }   /* round 338: eyebrow → heading → line all 16 apart (was 16 / 8) */
.qr-dialog__title { margin: 0; padding: 0; font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--color-text); }
.qr-dialog__links { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-text-secondary); }
.qr-dialog__links a { color: inherit; text-decoration: none; }
.qr-dialog__links a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 48em) {
  .qr-dialog__grid { grid-template-columns: 15rem 25.04rem; width: max-content; margin-inline: auto; }
  .qr-dialog__title { font-size: var(--text-heading); }
}
@media (max-width: 47.99em) { .qr-dialog__title { font-size: var(--text-heading); } }

/* ---------- Promo popup (round 302, refined rounds 303–304) ----------
   Round 304: Food Stories only; the QR is back in the card beside the stacked badges; no strokes on the dialog, card, tile or close.
   Desktop: an 864 × 520 dialog, a store front full bleed (Food Stories only since round 304, assets/images/shops/fronts-lg/food-stories.webp) and a dark glass
   card on the left (408 wide, 24 in, 40 padding): eyebrow, "First 3 deliveries free" ("free" yellow), the line, two yellow chips;
   the two badges side by side at its foot. Right, 24 in: a light glass column (200 wide) with the QR ("Scan to download") above the
   store's logo and name. Phones: a bottom sheet, the photo as a 192 band on top, the card below on solid black, no QR or store tag.
   1px stroke, 4px corners on everything (dialog, card, tiles, close). */
.promo.dialog, .promo.sheet { padding: 0; color: var(--neutral-0); background-color: var(--black); border: 0; box-shadow: none; }
.promo.dialog { width: min(100% - var(--gutter) * 2, 54rem); height: min(35rem, 100dvh - var(--space-6)); overflow: hidden; border-radius: var(--radius-md); }
.promo.sheet { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.promo__grid { position: relative; display: grid; height: 100%; }
.promo__art { position: relative; height: 12rem; overflow: hidden; }
.promo__art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.promo__body { display: grid; align-content: space-between; gap: var(--space-7); padding: var(--card-pad); }
.promo__copy { display: grid; justify-items: start; }
.promo__eyebrow, .promo__store-label { display: block; font-size: var(--text-eyebrow); font-weight: 500; line-height: var(--leading-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.promo__title { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--text-heading); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--neutral-0); text-wrap: balance; }
.promo__free { color: var(--yellow); }
.promo__line { margin: var(--space-4) 0 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: rgb(255 255 255 / 0.8); text-wrap: pretty; }
.promo__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.promo__chip { padding: 0 var(--space-2); font-size: var(--text-eyebrow); font-weight: 500; line-height: var(--space-5); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--black); background-color: var(--yellow); border: var(--stroke); border-radius: var(--radius-md); }
.promo__get { display: flex; gap: var(--space-4); align-items: stretch; }
.promo__qr { display: none; }
.promo__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.promo__close.dialog__close { top: var(--space-4); right: var(--space-4); z-index: 2; width: var(--tap); height: var(--tap); color: var(--black); background-color: var(--neutral-0); border: 0; border-radius: var(--radius-md); outline-offset: 0; }
.promo__close.dialog__close:hover { background-color: var(--neutral-100); }
.promo__close .icon { width: var(--icon-sm); height: var(--icon-sm); }
.promo.dialog .promo__art { position: absolute; inset: 0; height: auto; }
.promo.dialog .promo__body {
  position: absolute; top: var(--card-pad); bottom: var(--card-pad); left: var(--card-pad); width: 25.5rem; box-sizing: border-box;
  padding: var(--space-7);
  background-color: rgb(24 24 24 / 0.56);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.promo.dialog .promo__badges { flex-direction: column; flex-wrap: nowrap; }
.promo.dialog .promo__qr { display: grid; width: calc(var(--badge-h) * 2 + var(--space-2)); height: calc(var(--badge-h) * 2 + var(--space-2)); background-color: var(--neutral-0); border: 0; border-radius: var(--radius-md); }
.promo__store { display: none; }
.promo.dialog .promo__store {
  position: absolute; right: var(--card-pad); bottom: var(--card-pad); display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); color: var(--black);
  background-color: rgb(255 255 255 / 0.72); border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
@media (max-width: 23.37em) { .promo__art { height: 8rem; } }   /* 320-wide phones: the sheet fits without scrolling */
.promo__logo { display: block; flex: none; width: var(--logo-size); height: var(--logo-size); overflow: hidden; border-radius: var(--radius-md); }
.promo__logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.promo__store-text { display: grid; }
.promo__store-name { font-family: var(--font-display); font-size: var(--text-body); font-weight: 600; line-height: var(--leading-body); }

/* Dialog backdrops fade where @starting-style is supported (Motion animates the panel itself) */
.dialog::backdrop, .sheet::backdrop { transition: opacity var(--dur-hover) var(--ease-out); }
@starting-style {
  .dialog[open]::backdrop, .sheet[open]::backdrop { opacity: 0; }
}

/* ---------- Known-for quote (shop landing, smart 404) ---------- */
.known { margin: 0; padding-left: var(--space-5); border-left: var(--stroke); max-width: 34em; }
.known__label { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-brand); }
.known blockquote { margin: var(--space-2) 0 0; }
.known blockquote p { font-family: var(--font-display); font-size: var(--text-subheading); font-weight: 500; line-height: var(--leading-subheading); color: var(--color-text); }

@media (max-width: 47.99em) {
  .site-footer__area { display: none; }
}
/* Banners 2 and 3: exact tile sizes, plain image badges (no "is-mine" highlight) */
.promo .eyebrow { line-height: var(--leading-eyebrow); }

/* ---------- Button hover (owner, round 81; modelled on seasats.com; markup built by js/components/button-fx.js) ----------
   The label is stacked twice. On hover or keyboard focus the original characters roll up and out, the copy rolls in from below,
   each character 8ms after the one before (--dur-hover 300ms, --ease-out; round 324, was 552ms / 12ms). Icons stay still (round 82). */
.btn__text {
  display: inline-grid;
  grid-template-areas: "stack";
  align-items: start;
  margin-block: calc(var(--space-1) * -1);   /* the 4px of room that keeps descenders from clipping adds no height */
  padding-block: var(--space-1);
  overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-1), #000 calc(100% - var(--space-1)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-1), #000 calc(100% - var(--space-1)), transparent 100%);
}
.btn__label { grid-area: stack; display: block; white-space: pre; }
.btn__char {
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-out) calc(var(--i) * 12ms), opacity var(--dur-hover) var(--ease-out) calc(var(--i) * 12ms);   /* round 341: 12ms apart (was 8) */
  will-change: transform;
}
.btn__label--copy .btn__char { transform: translateY(100%); opacity: 0; }
:is(.btn:not(:disabled), .site-footer__links a, .site-footer__legal a):focus-visible .btn__label:not(.btn__label--copy) .btn__char { transform: translateY(-100%); opacity: 0; }
:is(.btn:not(:disabled), .site-footer__links a, .site-footer__legal a):focus-visible .btn__label--copy .btn__char { transform: none; opacity: 1; }
@media (hover: hover) {   /* the footer's text links roll the same way (round 291) */
  :is(.btn:not(:disabled), .site-footer__links a, .site-footer__legal a):hover .btn__label:not(.btn__label--copy) .btn__char { transform: translateY(-100%); opacity: 0; }
  :is(.btn:not(:disabled), .site-footer__links a, .site-footer__legal a):hover .btn__label--copy .btn__char { transform: none; opacity: 1; }
}

html.calm .btn__char { transition: none; }

/* Footer links (owner, round 296): not the buttons' letter-by-letter roll. The whole grey label slides up out of view while the same
   label slides in from below in black, both at once, 450ms eased in and out; on hover out the same transition runs back. No fades. */
.site-footer :is(.site-footer__links, .site-footer__legal) a .btn__char { opacity: 1; transition: transform var(--dur-hover) var(--ease-out); }
.site-footer :is(.site-footer__links, .site-footer__legal) a .btn__label--copy { color: var(--color-text); }
.site-footer :is(.site-footer__links, .site-footer__legal) a:is(:hover, :focus-visible) .btn__label:not(.btn__label--none) .btn__char { opacity: 1; }
.site-footer__follow a svg { transition: color var(--dur-hover) var(--ease-out); }
.site-footer__follow a:is(:hover, :focus-visible) svg { color: var(--color-text); }

/* ---------- Text reveal (reveal.js, round 324): the words fade up a little, together; no mask, no blur (docs/MOTION.md) ---------- */
.reveal-mask { display: inline-block; vertical-align: top; }   /* each word's wrapper; it no longer clips */
.reveal-word { display: inline-block; will-change: transform, opacity; }
.reveal-run { min-width: 0; }   /* one flex item per run of split words, so they wrap (reveal.js, round 168) */
a .reveal-mask, a .reveal-word { text-decoration: inherit; }   /* underlined links keep the underline under the split words, not only under the spaces (round 169) */
:is(s, del) .reveal-mask, :is(s, del) .reveal-word { text-decoration: inherit; }   /* struck words keep their line once split (round 376) */
/* The home hero copy waits for the script (it plays on load); if the script never arrives it appears after 2.5s */
html.js [data-hero-in] { opacity: 0; animation: hero-failsafe 0.01s 2.5s forwards; }
@keyframes hero-failsafe { to { opacity: 1; } }