/* vendorsnap.app home page (site/index.html), built by site-src/build.mjs into
   site/assets/home.css. The 3D store at the top keeps its own tour.css; it
   reads the tokens below (--brand, --text, --ink, --display, --serif, --maxw,
   --r-lg, --shadow-*) and the 68px #hdr.

   Owner 2026-10-02: "we want the ui of a website, not to look like we just
   copied off an app". Every section has its own layout (data-layout on the
   section; src/__tests__/marketingSite.test.ts keeps them distinct): an
   editorial serif voice, the 3D studio's renders as the photography, and no
   card grid of emoji tiles. Brand orange is the app's #E85D20
   (src/constants/colors.ts), never the retired #FF6B35. */
:root {
  --paper: #FBF8F3; --sand: #F3ECE2; --sand-2: #EAE1D3; --bg: #FBF8F3; --card: #FFFFFF; --elevated: #F6F1EA;
  --border: #E6DED2; --line: #E6DED2; --text: #17130F; --muted: #645C54; --soft: #8E857B;
  --ink: #17130F; --ink-2: #221D18; --ink-line: rgba(255, 249, 240, 0.14); --on-ink: #FFF9F0; --on-ink-muted: rgba(255, 249, 240, 0.72);
  --brand: #E85D20; --brand-light: #FF7A3D; --brand-dark: #C04A18; --brand-tint: #FFF0EB;
  --hl: linear-gradient(100deg, #FCF3CB, #F9E8A6);
  --shadow-sm: 0 1px 2px rgba(23, 19, 15, 0.05), 0 2px 8px rgba(23, 19, 15, 0.05);
  --shadow-md: 0 10px 30px rgba(23, 19, 15, 0.08), 0 2px 6px rgba(23, 19, 15, 0.05);
  --shadow-lg: 0 30px 80px rgba(23, 19, 15, 0.18);
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --maxw: 1200px;
  --display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand); }
:focus-visible { outline: 3px solid rgba(232, 93, 32, 0.5); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); }
.eyebrow { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-dark); }
.display {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(38px, 5.2vw, 72px); line-height: 1.04; color: inherit; text-wrap: balance;
}
.display em { font-style: italic; font-weight: 500; color: var(--brand); }
.on-ink .display em { color: var(--brand-light); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 640px; text-wrap: pretty; }
.on-ink .lede { color: var(--on-ink-muted); }
.text-link { font-weight: 600; color: var(--text); border-bottom: 1.5px solid var(--brand); padding-bottom: 1px; }
.text-link:hover { color: var(--brand-dark); }
.text-link::after { content: " \2192"; }
.on-ink .text-link { color: var(--on-ink); }

/* The tour's captions inherit the page's headings as they were before the
   redesign; :where() keeps this at zero specificity so tour.css always wins. */
:where(.tour) h2 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -1px; line-height: 1.1; margin-top: 12px; font-weight: 800; }
:where(.tour) p { font-size: inherit; }

/* ---------- Scroll progress (the header is nav.css; the tour reads #hdr: 68px tall) ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; transform: scaleX(0); transform-origin: 0 50%; background: var(--brand); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { color: var(--text); }
.logo { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px rgba(192, 74, 24, 0.28); }
.logo img { width: 100%; height: 100%; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.4px; }

/* ---------- Buttons + store badges ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 var(--body); padding: 15px 24px; border-radius: 100px; border: 0; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { color: var(--on-ink); background: #000; }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { color: #fff; background: var(--brand-dark); }
.btn-line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn-line:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--soft); }
.stores { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
/* Official App Store / Google Play badges: supplied assets unaltered (brand-guideline requirement). */
.store-badge { display: inline-flex; transition: transform 0.18s ease, filter .18s ease; border-radius: 10px; }
.store-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 18px rgba(20, 16, 12, 0.18)); }
.store-badge img { display: block; height: 44px; width: auto; }
.store-badge.play img { height: 52px; }

/* ---------- 0. The first view: the headline at full size, the finds in their QR tags ---------- */
/* Owner 2026-10-02: "I like the size of the hero on the screen I sent you
   ... I really like snap by snap". The motto keeps the tour's lockup (the
   heavy sans line, then the serif italic in its highlighter band), set at
   the size of the page's promise; the six finds of the tour float round it,
   each wearing the QR price tag the app prints. */
.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* The first screen holds the hero and the marketplaces strip under it (about 92px). */
  min-height: min(calc(100svh - 68px - 92px), 860px); display: grid; align-items: center;
  padding: clamp(56px, 8vh, 96px) 0 clamp(72px, 10vh, 120px);
  background:
    radial-gradient(900px 480px at 50% 42%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(700px 420px at 12% 100%, rgba(232, 93, 32, 0.07) 0%, rgba(232, 93, 32, 0) 70%),
    radial-gradient(700px 420px at 92% 0%, rgba(249, 232, 166, 0.35) 0%, rgba(249, 232, 166, 0) 70%),
    var(--paper);
}
.hero-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  font: 600 13.5px/1.2 var(--display); color: var(--muted); letter-spacing: 0.1px;
}
.hero-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(232, 93, 32, 0.16); }
/* Roomy line-height keeps the italic serif's tails inside the line box; the
   negative margins restore the tight rhythm (as .tour-h1). */
.hero-h1 {
  margin: calc(28px - 0.24em) 0 -0.24em; font-family: var(--display); font-weight: 800; color: var(--text);
  font-size: clamp(38px, 10.4vw, 112px); line-height: 1.48; letter-spacing: -0.045em;
}
@media (min-width: 901px) { .hero-h1 { font-size: clamp(64px, 7.2vw, 112px); } }
/* Plus Jakarta's heavy comma stands off its word: tucked in. */
.hero-comma { margin-left: -0.1em; }
.hero-line { display: block; }
.hero-line + .hero-line { margin-top: -0.42em; }
.hero-line:not(:last-child) { position: relative; z-index: 1; }
.hero-accent { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; font-style: italic; letter-spacing: -0.025em; }
.hero-accent mark { position: relative; z-index: 0; background: none; color: inherit; white-space: nowrap; padding: 0 0.12em; margin: 0 -0.03em; }
.hero-accent mark::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0.3em; bottom: -0.04em;
  background: linear-gradient(100deg, #FCF3CB, #F9E39A); border-radius: 0.14em 0.2em 0.16em 0.22em;
  transform-origin: 0 50%; animation: hero-mark 0.9s 0.35s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hero-mark { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-sub { margin-top: 26px; max-width: 640px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.hero-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.hero-ctas .stores { margin-top: 0; justify-content: center; }
.hero-tour {
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 8px; border-radius: 100px;
  background: var(--ink); color: var(--on-ink); font: 600 16px/1 var(--body);
  box-shadow: 0 12px 30px rgba(23, 19, 15, 0.22); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-tour:hover { color: var(--on-ink); background: #000; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(23, 19, 15, 0.28); }
.hero-tour-play {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff; padding-left: 2px;
}
.hero-tour-play::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(232, 93, 32, 0.55); animation: hero-ring 2.4s ease-out infinite; }
@keyframes hero-ring { 0% { transform: scale(0.85); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } }

/* The finds, round the headline: a staged photo and the tag the app prints. */
.hero-finds { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.find {
  position: absolute; width: var(--w); top: var(--y);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--r));
  animation: find-in 0.9s var(--in, 0s) cubic-bezier(.2, .7, .2, 1) both;
}
.find > img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; background: var(--sand-2);
  box-shadow: 0 30px 60px rgba(23, 19, 15, 0.16), 0 6px 14px rgba(23, 19, 15, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: find-bob var(--bob, 8s) var(--d, 0s) ease-in-out infinite alternate;
}
@keyframes find-in { from { opacity: 0; transform: translate3d(0, 24px, 0) rotate(var(--r)) scale(0.94); } }
@keyframes find-bob { from { translate: 0 -7px; } to { translate: 0 7px; } }
.find .tag {
  position: absolute; bottom: -18px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 3px; padding: 9px 9px 9px 22px;
  border-radius: 9px; background: #FFFDF7; color: var(--text); white-space: nowrap;
  box-shadow: 0 12px 26px rgba(23, 19, 15, 0.16), inset 0 0 0 1px rgba(23, 19, 15, 0.06);
  transform: rotate(var(--tr, -5deg)); animation: find-bob var(--bob, 8s) var(--d, 0s) ease-in-out infinite alternate;
}
/* The punched hole the string goes through. */
.find .tag::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(23, 19, 15, 0.22); }
.find .tag b { grid-column: 1; grid-row: 1; font: 600 19px/1 var(--serif); letter-spacing: -0.02em; }
.find .tag span { grid-column: 1; grid-row: 2; font: 600 10.5px/1 var(--display); color: var(--muted); letter-spacing: 0.2px; text-transform: uppercase; }
.find .tag-qr { grid-column: 2; grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 3px; }
.f-lamp { --w: 156px; --y: 9%; left: 5.5%; --r: -6deg; --tr: -4deg; --d: -1s; --bob: 9s; --in: 0.15s; }
.f-lamp .tag { left: 26px; }
.f-books { --w: 118px; --y: 43%; left: 13%; --r: 5deg; --tr: 4deg; --d: -3s; --bob: 7.5s; --in: 0.35s; }
.f-books .tag { left: -24px; }
.f-card { --w: 128px; --y: 67%; left: 4%; --r: -3deg; --tr: -6deg; --d: -5s; --bob: 8.5s; --in: 0.55s; }
.f-card .tag { left: 34px; }
.f-sneakers { --w: 168px; --y: 8%; right: 5%; --r: 6deg; --tr: 5deg; --d: -2s; --bob: 8.8s; --in: 0.25s; }
.f-sneakers .tag { right: 24px; }
.f-console { --w: 118px; --y: 44%; right: 13.5%; --r: -5deg; --tr: -5deg; --d: -4s; --bob: 7.8s; --in: 0.45s; }
.f-console .tag { right: -26px; }
.f-clock { --w: 140px; --y: 67%; right: 4.5%; --r: 4deg; --tr: 6deg; --d: -6s; --bob: 9.4s; --in: 0.65s; }
.f-clock .tag { right: 30px; }
/* Under 1500px the middle pair would meet the headline: the corners only. */
@media (max-width: 1499px) { .f-books, .f-console { display: none; } }
@media (max-width: 1279px) {
  .f-lamp { --w: 128px; left: 3%; } .f-sneakers { --w: 136px; right: 3%; }
  .f-card { --w: 108px; left: 3%; --y: 70%; } .f-clock { --w: 118px; right: 3%; --y: 70%; }
}
/* Phones and narrow windows: three finds in a row under the buttons. */
@media (max-width: 900px) {
  .home-hero { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 44px 0 64px; }
  .hero-finds { position: relative; inset: auto; order: 2; display: flex; justify-content: center; gap: 0; margin-top: 46px; height: 196px; }
  .find { position: relative; top: auto; left: auto; right: auto; --w: 118px; margin: 0 -8px; }
  .f-books, .f-card, .f-clock { display: none; }
  .f-lamp { --r: -7deg; --y: 0; margin-top: 18px; } .f-sneakers { --r: 3deg; z-index: 2; } .f-console { display: block; --r: 7deg; margin-top: 22px; --w: 108px; }
  .f-lamp .tag { left: -6px; } .f-sneakers .tag { right: auto; left: 18px; } .f-console .tag { right: -10px; }
  .find .tag { padding: 6px 9px 6px 18px; bottom: -14px; column-gap: 0; } .find .tag b { font-size: 15px; } .find .tag span, .find .tag-qr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .find, .find > img, .find .tag, .hero-accent mark::before, .hero-tour-play::after { animation: none !important; }
}

/* ---------- The 3D tour, waiting: one press walks into the shop ---------- */
.tour-launch { padding: clamp(80px, 10vw, 136px) 0 clamp(72px, 9vw, 120px); }
.tour-launch-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.tour-launch-head .display { margin-top: 14px; }
.tour-launch-head .lede { justify-self: end; }
.tour-launch-card {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; color: inherit; font: inherit; text-align: left;
  border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--sand-2);
  box-shadow: 0 40px 90px rgba(23, 19, 15, 0.22), 0 8px 20px rgba(23, 19, 15, 0.08);
}
.tour-launch-pic, .tour-launch-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-launch-pic { z-index: -1; }
.tour-launch-pic img { object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.tour-launch-card:hover .tour-launch-pic img, .tour-launch-card:focus-visible .tour-launch-pic img { transform: scale(1.035); }
.tour-launch-shade {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(42% 46% at 50% 50%, rgba(16, 12, 9, 0.34), rgba(16, 12, 9, 0) 100%), linear-gradient(180deg, rgba(16, 12, 9, 0) 52%, rgba(16, 12, 9, 0.58) 100%);
}
.tour-launch-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 104px; height: 104px; margin: -60px 0 0 -52px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 5px; background: rgba(255, 249, 240, 0.94); color: var(--brand);
  box-shadow: 0 24px 60px rgba(12, 9, 6, 0.4); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.tour-launch-play::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(255, 249, 240, 0.7); animation: hero-ring 2.6s ease-out infinite; }
.tour-launch-card:hover .tour-launch-play { transform: scale(1.07); }
.tour-launch-cta {
  position: absolute; z-index: 1; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); white-space: nowrap;
  padding: 11px 20px; border-radius: 100px; background: rgba(24, 19, 15, 0.52); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 240, 0.18); color: #FFF9F0; font: 700 clamp(16px, 1.4vw, 19px)/1.1 var(--display); letter-spacing: -0.1px;
}
.tour-launch-steps { position: absolute; z-index: 1; left: 0; right: 0; bottom: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 24px; counter-reset: step; }
.tour-launch-steps span {
  counter-increment: step; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 9px; border-radius: 100px;
  background: rgba(24, 19, 15, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 240, 0.16); color: #FFF9F0; font: 600 13.5px/1 var(--display);
}
.tour-launch-steps span::before {
  content: counter(step); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 249, 240, 0.16); font: 700 11px/1 var(--display);
}
.tour-launch-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
@media (max-width: 900px) {
  .tour-launch-head { grid-template-columns: minmax(0, 1fr); }
  .tour-launch-head .lede { justify-self: start; }
}
@media (max-aspect-ratio: 9/10), (max-width: 640px) {
  .tour-launch-card { aspect-ratio: 4 / 5; border-radius: 24px; }
  .tour-launch-play { width: 84px; height: 84px; margin: -50px 0 0 -42px; }
  .tour-launch-cta { top: calc(50% + 52px); }
  .tour-launch-steps span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tour-launch-play::before { animation: none; } }

/* ---------- 1. The marketplaces, in their own wordmarks ---------- */
.mk { background: var(--paper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 30px 0; }
.mk-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 28px; }
.mk-lead, .mk-and { font-size: 15px; color: var(--muted); font-weight: 500; }
.mk-and b { color: var(--text); }
.mk-list { list-style: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.wm { font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -0.5px; white-space: nowrap; }
/* Marketplace names as styled text in their own colors (brand guidelines §8: no bundled trademark images). */
.wm-ebay { font-family: var(--body); font-weight: 700; letter-spacing: -1.6px; font-size: 28px; }
.wm-ebay i { font-style: normal; }
.wm-ebay i:nth-child(1) { color: #E53238; } .wm-ebay i:nth-child(2) { color: #0064D2; } .wm-ebay i:nth-child(3) { color: #F5AF02; } .wm-ebay i:nth-child(4) { color: #86B817; }
.wm-etsy { font-family: Georgia, "Times New Roman", serif; color: #F1641E; font-weight: 700; font-size: 27px; letter-spacing: -0.5px; }
.wm-facebook { font-family: var(--body); color: #1877F2; font-weight: 800; letter-spacing: -0.8px; }
.wm-facebook small { font-size: 13px; font-weight: 700; letter-spacing: 0; margin-left: 4px; color: #1877F2; opacity: 0.8; }
.wm-vinted { font-family: var(--body); color: #007782; font-weight: 800; letter-spacing: -0.4px; }
.wm-depop { font-family: var(--body); color: #FF2300; font-weight: 800; letter-spacing: -1px; text-transform: lowercase; }
.wm-poshmark { font-family: var(--body); color: #7F0353; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.wm-poshmark > span { font-size: 0.8em; }

/* ---------- 2. One photo does the work (an annotated photograph) ---------- */
.story { padding: clamp(80px, 11vw, 150px) 0 clamp(64px, 8vw, 110px); }
.story-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px 64px; align-items: end; }
.story-head .eyebrow { grid-column: 1 / -1; }
.story-head .lede { justify-self: end; }
.annotated { margin: clamp(40px, 5vw, 64px) auto 0; max-width: calc(var(--maxw) + 120px); padding: 0 var(--gutter); }
.annotated .frame { position: relative; }
.annotated img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); background: var(--sand-2); }
/* The pins sit on the photo by fraction (--x, --y); the photo is always the
   landscape render, so they stay on their finds at every width. */
.notes { list-style: none; counter-reset: note; }
.note { counter-increment: note; position: absolute; left: calc(100% * var(--x)); top: calc(100% * var(--y)); }
.note-pin {
  position: absolute; left: -15px; top: -15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font: 800 14px/1 var(--display); box-shadow: 0 0 0 4px rgba(255, 249, 240, 0.85), 0 6px 18px rgba(23, 19, 15, 0.3);
}
.note-pin::before { content: counter(note); }
.note-card {
  position: absolute; top: -26px; width: 250px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 252, 247, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-md);
}
.note-card b { display: block; font-family: var(--display); font-size: 15px; color: var(--text); }
.note-card > span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.note--r .note-card { left: 26px; }
.note--l .note-card { right: 26px; }
.note--below .note-card { top: 12px; }
.notes-list { list-style: none; display: none; counter-reset: noteb; margin-top: 22px; gap: 14px; }
.notes-list li { counter-increment: noteb; display: flex; gap: 12px; align-items: flex-start; }
.notes-list li::before {
  content: counter(noteb); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff; font: 800 13px/1 var(--display);
}
.notes-list b { font-family: var(--display); font-size: 16px; }
.notes-list span span { color: var(--muted); font-size: 15px; }
@media (max-width: 899px) {
  .note-card { display: none; }
  .note-pin { width: 26px; height: 26px; left: -13px; top: -13px; font-size: 13px; }
  .notes-list { display: grid; }
}
.story-caption { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; justify-content: space-between; }
.story-caption p { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.01em; }
.story-caption p mark { background: var(--hl); color: inherit; padding: 0 0.12em; border-radius: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(44px, 6vw, 72px); border-top: 1px solid var(--border); }
.stat { padding: 26px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--border); }
.stat .big { font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.03em; color: var(--brand); }
.stat .cap { margin-top: 10px; font-size: 15px; color: var(--muted); }
.stat .cap b { display: block; color: var(--text); font-family: var(--display); font-size: 17px; }

/* ---------- 3. Features: one tab per job (an explorer) ---------- */
.explorer-sec { background: var(--sand); padding: clamp(80px, 10vw, 140px) 0; }
.explorer-head, .pricing-head, .who-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); align-items: end; gap: 24px 56px; }
.explorer-head .lede, .who-head .lede { max-width: 440px; justify-self: end; }
.tabs { display: flex; gap: 6px; margin-top: 44px; border-bottom: 1px solid var(--sand-2); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
/* A phone's row scrolls sideways; home.js marks which side has more tabs. */
.tabs[data-more-right] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.tabs[data-more-left] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.tabs[data-more-left][data-more-right] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.tab {
  position: relative; flex: none; display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 18px; border: 0; background: none; cursor: pointer;
  font: 700 17px/1.2 var(--display); color: var(--muted); letter-spacing: -0.2px;
}
.tab .tab-n { font: 600 13px/1 var(--serif); font-style: italic; color: var(--soft); }
.tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab:hover { color: var(--text); }
.panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(32px, 4vw, 52px); }
.panel[hidden] { display: none; }
.panel-media { position: relative; }
.panel-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); background: var(--sand-2); }
.panel-media .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel-media .pair img { aspect-ratio: 3 / 4; }
.panel-media figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.panel-media .tagline {
  position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; border-radius: 100px; background: rgba(23, 19, 15, 0.82); color: var(--on-ink);
  font: 600 13px/1.2 var(--display); letter-spacing: 0.01em;
}
.pair figure { position: relative; }
.pair figure .tagline { left: 10px; bottom: 10px; }
.panel h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.015em; }
.panel h3 em { font-style: italic; font-weight: 500; color: var(--brand); }
.panel > div > p { margin-top: 14px; color: var(--muted); font-size: 17.5px; }
.checks { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 16px; }
.checks li::before { content: ""; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.checks b { font-weight: 700; }
.panel .text-link { display: inline-block; margin-top: 24px; }
.explorer-note { margin-top: 28px; font-size: 13.5px; color: var(--muted); }

/* ---------- 4. How it works: a day with VendorSnap (a timeline on ink) ---------- */
.day { background: var(--ink); color: var(--on-ink); padding: clamp(84px, 11vw, 150px) 0; position: relative; overflow: hidden; }
.day .eyebrow { color: var(--brand-light); }
.day-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.day-intro { position: sticky; top: 110px; }
.day-intro .lede { margin-top: 20px; }
.qr-card {
  display: flex; gap: 18px; align-items: center; margin-top: 36px; padding: 16px 20px 16px 16px; width: max-content; max-width: 100%;
  border-radius: 18px; background: rgba(255, 249, 240, 0.06); box-shadow: inset 0 0 0 1px var(--ink-line);
}
.qr-card img { width: 104px; height: 104px; border-radius: 10px; background: #fff; padding: 8px; }
.qr-card b { display: block; font-family: var(--display); font-size: 17px; }
.qr-card span { display: block; font-size: 14.5px; color: var(--on-ink-muted); max-width: 210px; margin-top: 2px; }
.day-stores { display: none; }
.timeline-wrap { position: relative; }
.timeline { list-style: none; position: relative; padding-left: 44px; }
.timeline-rail { position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--ink-line); border-radius: 2px; overflow: hidden; }
.timeline-rail i { position: absolute; inset: 0; background: var(--brand); transform-origin: 50% 0; transform: scaleY(var(--fill, 1)); }
.stop { position: relative; padding-bottom: clamp(40px, 6vw, 72px); }
.stop:last-child { padding-bottom: 0; }
.stop::before {
  content: ""; position: absolute; left: -40px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); box-shadow: inset 0 0 0 3px var(--brand);
}
.stop-time { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--brand-light); }
.stop h3 { margin-top: 6px; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.01em; }
.stop p { margin-top: 10px; color: var(--on-ink-muted); max-width: 520px; }
.stop-media { display: flex; gap: 12px; margin-top: 18px; }
.stop-media img { width: 132px; height: 132px; object-fit: cover; border-radius: 14px; background: #2b241e; }
.stop-media img + img { opacity: 0.9; }

/* ---------- 5. Never sell the same thing twice (a live status board) ---------- */
.sync { padding: clamp(84px, 11vw, 150px) 0; }
.sync-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.sync-copy .lede { margin-top: 18px; }
.sync-copy .text-link { display: inline-block; margin-top: 22px; }
.board-foot { padding: 12px 20px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

/* ---------- 6. Who it's for (an index of rows) ---------- */
.who-sec { background: var(--paper); padding: clamp(84px, 10vw, 140px) 0; border-top: 1px solid var(--border); }

.who-list { list-style: none; margin-top: 40px; border-top: 1px solid var(--text); }
.who-list a {
  display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr) 40px; align-items: center; gap: 16px;
  padding: 26px 4px; border-bottom: 1px solid var(--border); color: var(--text); transition: background .2s ease, padding .25s ease;
}
.who-list a:hover { color: var(--text); background: var(--elevated); padding-left: 14px; padding-right: 14px; }
.who-n { font: 500 15px/1 var(--serif); font-style: italic; color: var(--soft); }
.who-t { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.01em; }
.who-d { color: var(--muted); font-size: 16px; }
.who-go { justify-self: end; font-size: 22px; color: var(--brand); transition: transform .25s ease; }
.who-list a:hover .who-go { transform: translateX(4px); }
.who-peek {
  position: fixed; left: 0; top: 0; z-index: 40; width: 220px; height: 260px; border-radius: 16px; pointer-events: none; object-fit: cover;
  box-shadow: var(--shadow-lg); opacity: 0; transform: translate(-50%, -50%) scale(0.92); transition: opacity .2s ease, transform .25s ease;
}
.who-peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.who-more { margin-top: 26px; color: var(--muted); }

/* ---------- 7. Free tools (a working calculator) ---------- */
.tools-sec { background: var(--sand); padding: clamp(84px, 10vw, 140px) 0; }
.tools-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.tools-copy .lede { margin-top: 18px; }
.tool-links { list-style: none; margin-top: 30px; columns: 2; column-gap: 24px; }
.tool-links li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--sand-2); }
.tool-links a { color: var(--text); font-weight: 500; font-size: 15.5px; }
.tool-links a:hover { color: var(--brand-dark); }
.calc-box { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border); padding: 22px; }
.calc-box form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-box label { display: block; font: 600 13.5px/1.3 var(--display); color: var(--muted); }
.calc-box .field { display: flex; align-items: center; margin-top: 7px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--border); background: var(--paper); padding: 0 12px; }
.calc-box .field:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.calc-box .field span { color: var(--muted); font-weight: 600; }
.calc-box input { width: 100%; border: 0; background: transparent; font: 700 22px/1 var(--display); color: var(--text); padding: 12px 6px; outline: none; }
.calc-out { margin-top: 18px; }
.calc-out .rank { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.calc-out .rank th, .calc-out .rank td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.calc-out .rank thead th { font: 700 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); border-bottom-color: var(--border); }
.calc-out .rank td:nth-child(n+2), .calc-out .rank th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.calc-out .rank tbody tr:last-child th, .calc-out .rank tbody tr:last-child td { border-bottom: 0; }
.calc-out .rank tr.best th, .calc-out .rank tr.best td:last-child { color: #15803D; font-weight: 700; }
.calc-out .rank tr[data-lists] th::after { content: "Lists from VendorSnap"; display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 100px; background: var(--brand-tint); color: var(--brand-dark); font: 700 10.5px/1.4 var(--display); vertical-align: 2px; }
.calc-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---------- 8. Pricing (a plan table) ---------- */
.pricing-sec { padding: clamp(84px, 10vw, 140px) 0 clamp(72px, 8vw, 110px); }

.billing { display: inline-flex; gap: 4px; padding: 4px; background: var(--elevated); border-radius: 100px; box-shadow: inset 0 0 0 1px var(--border); }
.billing button { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 100px; padding: 9px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing button[aria-checked="true"] { color: var(--on-ink); background: var(--ink); }
.billing-save { font-size: 12px; font-weight: 700; color: var(--brand-dark); background: var(--brand-tint); border-radius: 100px; padding: 2px 8px; }
.billing button[aria-checked="true"] .billing-save { color: var(--ink); background: #FCE7B8; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--border); background: var(--card); }
.plan { position: relative; padding: 34px 30px 30px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--border); }
.plan--pro { background: var(--ink); color: var(--on-ink); border-radius: var(--r-lg); margin: -14px 0; padding-top: 48px; box-shadow: var(--shadow-lg); }
.plan + .plan--pro, .plan--pro + .plan { border-left: 0; }
.plan h3 { font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; }
.plan-badge { position: absolute; top: 18px; left: 30px; font: 700 12px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-light); }
.plan-badge--quiet { color: var(--soft); }
.plan--business .plan-badge { top: 18px; }
.plan--business h3, .plan:first-child h3 { margin-top: 14px; }
.plan-tag { margin-top: 8px; color: var(--muted); font-size: 15.5px; min-height: 48px; }
.plan--pro .plan-tag, .plan--pro .plan-note, .plan--pro .plan-price .unit { color: var(--on-ink-muted); }
.plan-price { margin-top: 18px; display: flex; align-items: baseline; }
.plan-price .amount { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -1.5px; line-height: 1; }
.plan-price .unit { margin-left: 4px; color: var(--muted); font-weight: 600; font-size: 15px; }
.plan-billed { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.plan-billed b { color: var(--brand-dark); }
.plan--pro .plan-billed { color: var(--on-ink); }
.plan--pro .plan-billed b { color: var(--brand-light); }
.plan-note { margin-top: 4px; color: var(--muted); font-size: 14px; min-height: 21px; }
.plan-note b { color: var(--brand-dark); }
.plan--pro .plan-note b { color: var(--brand-light); }
.plan-trial { margin-top: 6px; font-size: 13.5px; font-weight: 600; }
.plans[data-billing="year"] .per-month, .plans[data-billing="month"] .per-year { display: none; }
.billing { justify-self: end; }
.plan ul { list-style: none; margin: 22px 0 26px; padding: 22px 0 0; border-top: 1px solid var(--border); display: grid; gap: 11px; font-size: 15px; }
.plan--pro ul { border-top-color: var(--ink-line); }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan .tick { flex-shrink: 0; color: var(--brand); font-weight: 800; }
.plan--pro .tick { color: var(--brand-light); }
.plan-cta { margin-top: auto; width: 100%; }
.plans-fine { margin-top: 28px; color: var(--muted); font-size: 13.5px; max-width: 780px; }

/* ---------- 9. Questions (two columns) ---------- */
.faq-sec { background: var(--paper); border-top: 1px solid var(--border); padding: clamp(84px, 10vw, 140px) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-aside { position: sticky; top: 110px; }
.faq-aside p { margin-top: 18px; color: var(--muted); }
.faq { border-top: 1px solid var(--text); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; padding: 22px 2px;
  font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-dark); }
.faq-chev { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border); transition: transform .3s ease, background .2s ease; }
.faq-chev::before, .faq-chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; margin: -0.9px 0 0 -5.5px; background: var(--text); border-radius: 2px; }
.faq-chev::after { transform: rotate(90deg); transition: transform .3s ease; }
.faq-item[open] .faq-chev { background: var(--ink); box-shadow: none; }
.faq-item[open] .faq-chev::before, .faq-item[open] .faq-chev::after { background: var(--on-ink); }
.faq-item[open] .faq-chev::after { transform: rotate(0deg); }
.faq-item p { padding: 0 2px 24px; color: var(--muted); font-size: 16.5px; max-width: 680px; }

/* ---------- 10. Get the app (a full-bleed finale) ---------- */
.finale { position: relative; min-height: clamp(520px, 72vh, 760px); display: grid; align-items: center; color: var(--on-ink); overflow: hidden; isolation: isolate; }
.finale > picture, .finale > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The photo under the scrim (::before), the copy over both. */
.finale > picture { z-index: -1; }
.finale > picture img { object-fit: cover; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(16, 12, 9, 0.88) 0%, rgba(16, 12, 9, 0.66) 46%, rgba(16, 12, 9, 0.18) 100%); }
.finale .wrap { position: relative; z-index: 1; width: 100%; padding-top: 96px; padding-bottom: 96px; }
.finale-name { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.4px; color: var(--brand); }
.finale h2 { margin-top: 12px; max-width: 760px; }
.finale .lede { margin-top: 20px; }
.finale-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; margin-top: 34px; }
.finale-actions .stores { margin-top: 0; }
.finale .qr-card { margin-top: 0; }

/* ---------- Footer ---------- */
footer.site-foot { background: var(--ink); color: var(--on-ink-muted); padding: 72px 0 36px; font-size: 15px; border-top: 1px solid var(--ink-line); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 36px; }
.foot-brand .brand { color: var(--on-ink); }
.foot-brand p { margin-top: 14px; max-width: 280px; }
.foot-brand .foot-motto { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--on-ink); }
.foot-brand .stores { margin-top: 20px; }
.foot-brand .store-badge img { height: 40px; }
.foot-brand .store-badge.play img { height: 47px; }
.foot-col h2 { font: 700 12.5px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink); margin-bottom: 16px; }
.foot-col h2 a { color: inherit; }
.foot-col ul { list-style: none; display: grid; gap: 9px; }
.foot-col a { color: var(--on-ink-muted); }
.foot-col a:hover { color: var(--on-ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink-line); font-size: 14px; }
.foot-bottom a { color: var(--on-ink-muted); }
.foot-bottom a:hover { color: var(--on-ink); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Reveals (GSAP drives them; IntersectionObserver is the fallback) ---------- */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; } .js .reveal.d3 { transition-delay: .24s; }
.gsap-active .reveal { opacity: 0; transform: none; transition: none; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1080px) {
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .story-head, .day-grid, .sync-grid, .tools-grid, .faq-grid, .explorer-head, .pricing-head, .who-head { grid-template-columns: minmax(0, 1fr); }
  .explorer-head .lede, .who-head .lede, .billing { justify-self: start; }
  .story-head .lede { justify-self: start; }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .day-intro, .faq-aside { position: static; }
  .qr-card { display: none; }
  .day-stores { display: flex; margin-top: 26px; }
  .who-list a { grid-template-columns: 40px minmax(0, 1fr) 28px; padding: 20px 2px; }
  .who-d { grid-column: 2; grid-row: 2; font-size: 15px; margin-top: -8px; }
  .who-go { grid-row: 1 / span 2; grid-column: 3; }
  .plans { grid-template-columns: minmax(0, 1fr); background: none; box-shadow: none; gap: 16px; }
  .plan { background: var(--card); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--border); }
  .plan + .plan { border-left: 0; }
  /* The Pro card stays ink on a phone: the .plan card rule above comes later
     than .plan--pro's ink at the same weight, so it painted the card cream
     under Pro's light text (the owner's phone, 2026-10-03). */
  .plan--pro { margin: 0; background: var(--ink); box-shadow: var(--shadow-lg); }
  .plan-tag { min-height: 0; }
  .finale::before { background: linear-gradient(0deg, rgba(16, 12, 9, 0.92) 0%, rgba(16, 12, 9, 0.7) 55%, rgba(16, 12, 9, 0.35) 100%); }
  .finale { align-items: end; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
  .stat { padding-right: 0; }
  .calc-box form { grid-template-columns: minmax(0, 1fr); }
  .tool-links { columns: 1; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stop-media img { width: 104px; height: 104px; }
  .tab { padding: 12px 14px 16px; font-size: 16px; }
}
@media (hover: none) { .who-peek { display: none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .js .reveal, .gsap-active .reveal { opacity: 1 !important; transform: none !important; }
}