/* MoreBack site design system. Round 41 (Anto, 27 Oct 2026): light and friendly, after maxrewards.com/app
   and gainsapp.com: warm off-white page, white rounded cards with soft shadows, one forest-green
   accent (the logo's #145641) with mint tints, receipt touches kept as a nod to the brand.
   (Rounds 11-40 were "receipt on a black counter".)
   Shared by the homepage (home.html -> /) and the public shop pages (/shops/, /shops/<slug>),
   which use <body class="home ...">. Loaded after styles.css. Edit here, not in the pages. */
/* One typeface (Geist, Geist Mono for figures), one accent (forest), Tailwind type scale,
   spacing 4/8/12/16/24/32/40/48/64/80/96. */
@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url(/assets/fonts/geist-400.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-500.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url(/assets/fonts/geist-600.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url(/assets/fonts/geist-700.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-mono-500.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 600; font-display: swap; src: url(/assets/fonts/geist-mono-600.woff2) format("woff2"); }

body.home {
  --bg: #faf7f2; --s1: #ffffff; --s2: #fffdfa; --s3: #f2ede5; --s4: #e3dcd0;
  --text: #1d1b18; --soft: #48443d; --mute: #635e57; --accent: #145641; --accent-ink: #ffffff;
  --accent-soft: #e3f2e9; --accent-hover: #0f4533; --mint: #c6ebd4;
  --paper-white: #ffffff; --paper-ink: #1d1b18;
  --line: rgba(29, 27, 24, 0.1);
  --shadow-sm: 0 1px 2px rgba(60, 45, 20, 0.06), 0 4px 16px rgba(60, 45, 20, 0.06);
  --shadow-md: 0 2px 4px rgba(60, 45, 20, 0.05), 0 18px 44px rgba(60, 45, 20, 0.1);
  /* styles.css parts used on public pages (sign-in dialog, gate) read these app tokens */
  --paper: #faf7f2; --cream: #ffffff; --ink: #1d1b18; --hair: rgba(29, 27, 24, 0.12); --shadow: var(--shadow-md);
  --curve: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem; line-height: 1.5rem;
  background: var(--bg); color: var(--text);
}
body.home ::selection { background: var(--mint); color: var(--text); }
html { scroll-behavior: smooth; }
html:has(> body.home) { background: #faf7f2; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.home .wordmark { font-family: inherit; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.025em; }
.home .wordmark span { font-weight: 600; color: var(--accent); }
.home h1, .home h2, .home h3 { text-wrap: balance; font-weight: 600; }
.home p { text-wrap: pretty; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Floating nav: off the edge, sized to content, translucent with blur */
.home-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: center;
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: transparent; border: 0; backdrop-filter: none;
  pointer-events: none;
}
.nav-shell {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 64rem;
  padding: 4px 4px 4px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.home .brand-mark { width: 32px; height: 32px; }
.home-nav { display: none; gap: 4px; margin-left: auto; }
.home-nav a {
  color: var(--mute); text-decoration: none; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  padding: 12px; border-radius: 12px; min-height: 44px; display: inline-flex; align-items: center;
  transition: color 300ms var(--curve), background-color 300ms var(--curve);
}
.home-nav a:hover { color: var(--text); background: var(--accent-soft); }
.home-nav a:focus-visible, .account-link:focus-visible, .btn:focus-visible, .text-link:focus-visible, .foot-links a:focus-visible, .faq a:focus-visible, .faq-item summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.account-link {
  margin-left: auto; min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 0;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; cursor: pointer;
  transition: background-color 300ms var(--curve), transform 300ms var(--curve);
}
.home-nav + .account-link { margin-left: 0; }
.account-link:hover { background: var(--accent-hover); }
.account-link:active { transform: scale(0.98); }

/* Phone menu: the page links live behind one button under 760px */
.menu-btn { display: none; }
.js .menu-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; padding: 8px 14px; border-radius: 12px;
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; cursor: pointer;
  transition: background-color 300ms var(--curve), transform 300ms var(--curve);
}
.js .menu-btn + .account-link { margin-left: 0; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--s3); }
.menu-btn:active { transform: scale(0.98); }
.menu-btn:focus-visible, .home-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-bars { position: relative; width: 16px; height: 10px; }
.menu-bars::before, .menu-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 300ms var(--curve), top 300ms var(--curve);
}
.menu-bars::before { top: 0; }
.menu-bars::after { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after { top: 4px; transform: rotate(-45deg); }
.home-menu {
  pointer-events: auto; position: absolute; top: calc(100% + 8px);
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: 18px; background: #ffffff; border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.home-menu[hidden] { display: none; }
.home-menu ul { list-style: none; margin: 0; padding: 0; }
.home-menu a {
  display: flex; align-items: center; min-height: 52px; padding: 12px 16px; border-radius: 12px;
  color: var(--text); text-decoration: none; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600;
  transition: background-color 300ms var(--curve);
}
.home-menu a:hover { background: var(--s3); }
.home-menu .menu-sep { height: 1px; margin: 8px 16px; background: var(--line); }
.home-menu .menu-quiet a { color: var(--mute); font-size: 1rem; line-height: 1.5rem; min-height: 48px; }
.home-menu .menu-main a { color: var(--accent); }

.sell-page { max-width: 72rem; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)) 48px max(16px, env(safe-area-inset-right)); }
section { scroll-margin-top: 80px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 24px; border-radius: 12px; border: 0;
  font: inherit; font-size: 1rem; line-height: 1.5rem; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  transition: transform 500ms var(--curve), background-color 300ms var(--curve);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; transition: transform 500ms var(--curve); }
.btn:hover svg { transform: translateX(4px); }
.text-link { color: var(--text); font-weight: 600; text-underline-offset: 4px; text-decoration-color: rgba(20, 86, 65, 0.4); border-radius: 4px; }
.text-link:hover { text-decoration-color: var(--accent); }

/* Hero */
/* Round 35: one phone. The hero's right column is the feature showcase (web/showcase.css); below
   900 px it stacks under the copy and waitlist. The headline scales with its own column
   (container query units), so it can never run into the phone at any width. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 48px 0 64px; align-items: center; }
.hero-copy { min-width: 0; container-type: inline-size; }
.hero h1 {
  margin: 0; max-width: 680px; font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.04em;
  color: var(--text);
}
.hero h1 .line { display: block; }
.hero h1 .line + .line { color: var(--accent); }
.lede { margin: 24px 0 32px; max-width: 680px; font-size: 1.125rem; line-height: 1.75rem; color: var(--soft); }
.lede strong { color: var(--text); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.reassure { margin: 16px 0 0; color: var(--mute); font-size: 0.875rem; line-height: 1.25rem; max-width: 40ch; }
/* Round 40: hero proof lines, receipt-style. Each line is a link to the real feature. */
.hero-receipt { list-style: none; margin: 0; padding: 4px 16px; max-width: 36rem; background: var(--s1); border-radius: 20px; box-shadow: var(--shadow-sm); }
.hero-receipt li + li { border-top: 1px dashed var(--s4); }
.hero-receipt a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; min-height: 44px;
  color: inherit; text-decoration: none; border-radius: 4px;
}
.hero-receipt a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--mute); transition: transform 0.2s var(--curve), color 0.2s; }
.hero-receipt a:hover::after, .hero-receipt a:focus-visible::after { color: var(--accent); transform: translateX(3px); }
.hero-receipt a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hr-k { grid-column: 1; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); }
.hr-v { grid-column: 1; color: var(--soft); font-size: 0.9375rem; line-height: 1.375rem; text-wrap: pretty; }
.hero-receipt a:hover .hr-v { color: var(--text); }
.hero-receipt + .join { margin-top: 32px; }
.guarantee {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 16px; max-width: 36rem;
  border: 1px solid var(--s4); border-radius: 16px; background: var(--accent-soft);
  color: var(--text); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-decoration: none;
}
.guarantee:hover { border-color: var(--accent); }
.guarantee:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.8125rem; font-weight: 700; line-height: 1; }
.g-terms { display: block; margin-top: 4px; color: var(--mute); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20, 86, 65, 0.4); }
@media (min-width: 760px) {
  .hero-receipt a { grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: baseline; padding: 14px 0; }
  .hr-k, .hr-v { grid-row: 1; }
  .hr-v { grid-column: 2; }
  .hero-receipt a::after { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-receipt a::after { transition: none; } }

/* Section rhythm */
.band { padding: 64px 0 80px; }
.band h2 { margin: 0 0 16px; max-width: 680px; font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.03em; }
.sub { margin: 0 0 32px; color: var(--soft); max-width: 65ch; }

/* Receipt: the MoreBack signature object */
.how { display: grid; gap: 40px; align-items: center; }
.receipt {
  position: relative; margin: 0 auto; width: min(100%, 360px);
  padding: 32px 24px; background: var(--paper-white); color: var(--paper-ink); filter: drop-shadow(0 12px 24px rgba(60, 45, 20, 0.12));
  font-family: var(--mono); font-size: 0.875rem; line-height: 1.25rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 8 8 0 16 8Z'/%3E%3C/svg%3E") top left / 16px 8px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 16px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 0 8 8 16 0Z'/%3E%3C/svg%3E") bottom left / 16px 8px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 8 8 0 16 8Z'/%3E%3C/svg%3E") top left / 16px 8px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 16px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 0 8 8 16 0Z'/%3E%3C/svg%3E") bottom left / 16px 8px repeat-x;
  transform: rotate(-1.5deg);
}
.receipt h3 { margin: 0; font-family: inherit; font-size: 1rem; line-height: 1.5rem; font-weight: 600; text-align: center; }
.receipt .r-meta { margin: 4px 0 0; text-align: center; color: #555; font-size: 0.75rem; line-height: 1rem; }
.receipt hr { border: 0; border-top: 2px dashed #9b9b9b; margin: 16px 0; }
.receipt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.receipt li { display: grid; grid-template-columns: 32px 1fr; gap: 0 8px; }
.receipt .r-n { font-weight: 600; }
.receipt li strong { font-weight: 600; display: block; }
.receipt li span { color: #4a4a4a; font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; line-height: 1.25rem; }
.receipt .r-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.receipt .r-total { font-weight: 600; font-size: 1rem; line-height: 1.5rem; }
.receipt .r-foot { margin: 16px 0 0; text-align: center; color: #555; font-size: 0.75rem; line-height: 1rem; }

/* Shops */
.shops { padding: 48px 0 64px; }
.shops-k { margin: 0 0 24px; color: var(--soft); max-width: 65ch; }
.logo-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 32rem; }
.logo-row img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; object-fit: cover; background: #fff; box-shadow: var(--shadow-sm); transition: transform 500ms var(--curve); }
.logo-row img:nth-child(3n + 2) { transform: translateY(8px); }
.shops-more { margin: 32px 0 0; color: var(--mute); }

/* Tagline reveal (B11) */
.tagline { padding: 96px 0; }
.tagline p { margin: 0; max-width: 680px; font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.03em; }
.tagline .w { color: rgba(29, 27, 24, 0.62); transition: color 700ms var(--curve); }
.tagline .w[data-on="1"] { color: var(--text); }
.tagline .w.accent[data-on="1"] { color: var(--accent); }

/* Earnings calculator */
.earn-calc { display: grid; gap: 24px; padding: 24px; border-radius: 24px; background: var(--s1); box-shadow: var(--shadow-sm); }
.sliders { display: grid; gap: 16px; }
.slider label { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; margin-bottom: 8px; }
.slider output { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; white-space: nowrap; }
.slider input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); background: transparent; cursor: pointer; }
.slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.earn-out { display: grid; gap: 8px; }
.earn-figure { padding: 16px; border-radius: 16px; background: var(--s3); }
.earn-figure.best { background: var(--accent); color: var(--accent-ink); }
.earn-figure p { margin: 0; }
.earn-label { color: var(--soft); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.earn-figure.best .earn-label, .earn-figure.best .earn-per { color: var(--accent-ink); }
.earn-big { font-family: var(--mono); font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-top: 4px !important; }
.earn-per { color: var(--mute); font-size: 0.875rem; line-height: 1.25rem; }
.earn-note { margin: 0; color: var(--mute); font-size: 0.75rem; line-height: 1rem; max-width: 80ch; }

/* Small print, zig zag */
.zig { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.zig li { display: grid; gap: 16px; align-items: center; }
.zig h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.75rem; }
.zig p { margin: 0; color: var(--soft); max-width: 65ch; }
.ui-line { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--s1); box-shadow: var(--shadow-sm); font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; color: var(--text) !important; }
.ui-line .tag { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--s3); color: var(--mute); font-size: 0.75rem; line-height: 1rem; }
.ui-line.warn { color: #7a4b00 !important; }
.bar-mini { flex: 0 0 64px; height: 8px; border-radius: 9999px; background: var(--s4); overflow: hidden; }
.bar-mini i { display: block; width: 62%; height: 100%; background: var(--accent); }

/* Questions: side by side list, not an accordion */
.faq { display: grid; gap: 0; margin: 0; }
/* Round 43: collapsible questions. Native <details>, all closed on load; answers stay in the HTML. */
.faq { align-items: start; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 16px 0; font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; border-radius: 8px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq-chev {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); position: relative;
  transition: transform 0.25s var(--curve);
}
.faq-chev::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5px 0 0 -4px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg);
}
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 0 20px; }
.faq-a p { margin: 0; color: var(--soft); max-width: 65ch; }
.faq a { color: var(--text); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .faq-chev { transition: none; } }

/* Final CTA */
.cta { padding: 80px 0 96px; }
.cta h2 { font-size: 2.25rem; line-height: 2.5rem; }
/* Waitlist (private testing) */
.join { margin-top: 32px; max-width: 36rem; }
.join-end { margin-top: 32px; padding: 24px; border-radius: 24px; background: var(--s1); box-shadow: var(--shadow-md); }
.join-title { margin: 0 0 4px; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.join-note { margin: 0 0 16px; color: var(--soft); text-wrap: pretty; }
.join-note .offer { display: block; margin-top: 8px; color: var(--text); font-weight: 600; }
.wait { display: flex; flex-wrap: wrap; gap: 8px; }
.wait input { flex: 1 1 220px; min-height: 48px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--s4); background: #ffffff; color: var(--text); font: inherit; }
.wait input::placeholder { color: var(--mute); }
.wait input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wait input[aria-invalid="true"] { border-color: #b42318; }
.wait .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wait .btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.wait .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.join-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 8px 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--mute); }
.spots { color: var(--soft); font-family: var(--mono, inherit); }
.quiet-link { color: var(--mute); text-underline-offset: 4px; border-radius: 4px; }
.quiet-link:hover { color: var(--text); }
.quiet-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.join-small { margin: 16px 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--mute); }
.join-small a { color: var(--soft); }
.wait-msg { min-height: 1.25rem; margin: 8px 0 0 !important; font-size: 0.875rem; line-height: 1.25rem; color: #b42318 !important; }
.wait-msg[data-ok="1"] { color: var(--accent) !important; }

.sell-foot { max-width: 72rem; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--mute); font-size: 0.875rem; line-height: 1.25rem; display: grid; gap: 16px; }
.sell-foot p { margin: 0; max-width: 65ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { color: var(--text); text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; border-radius: 4px; }
.foot-links a:hover { color: var(--accent); }

/* Scroll reveal: rise 32px and fade, once, 700ms on the base curve */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--curve), transform 700ms var(--curve); }
.js .reveal[data-in="1"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-bars::before, .menu-bars::after, .menu-btn { transition: none; }
  .js .reveal { transform: none; transition: opacity 300ms linear; }
  .tagline .w { transition: none; }
  .btn, .btn svg, .logo-row img { transition: none; }
  .receipt { transform: none; }
}

@media (min-width: 760px) {
  .home-nav { display: flex; }
  .js .menu-btn, .home-menu { display: none; }
  .hero { padding: 80px 0 96px; gap: 64px; }
  .hero h1 { font-size: clamp(2.25rem, 8.8cqi, 4rem); line-height: 1.04; }
  .lede { font-size: 1.25rem; line-height: 1.75rem; }
  .band h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .how { grid-template-columns: 1fr 1fr; gap: 64px; }
  .tagline p { font-size: 3rem; line-height: 1; }
  .tagline { padding: 96px 0 96px 64px; }
  .earn-calc { grid-template-columns: 1.2fr 1fr; padding: 32px; gap: 32px; align-items: start; }
  .earn-note { grid-column: 1 / -1; }
  .zig li { grid-template-columns: 1fr 1fr; gap: 48px; }
  .zig li:nth-child(even) > :first-child { order: 2; }
  .faq { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .shops { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .shops-more { grid-column: 1 / -1; margin: 0; }
  .cta h2 { font-size: 3rem; line-height: 1; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: 56px; }
}
@media (min-width: 1100px) {
  .hero { gap: 80px; }
  .tagline p { font-size: 3.75rem; line-height: 1; }
}

/* Phone menu without a script (shop pages are static HTML, CSP-safe): a <details> whose
   <summary> is the same .menu-btn and whose panel is the same .home-menu. */
.nav-menu { margin-left: auto; }
.nav-menu + .account-link { margin-left: 0; }
.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > .menu-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 12px;
  background: transparent; color: var(--text); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; cursor: pointer; user-select: none;
  transition: background-color 300ms var(--curve), transform 300ms var(--curve);
}
.nav-menu > .menu-btn:hover, .nav-menu[open] > .menu-btn { background: var(--s3); }
.nav-menu > .menu-btn:active { transform: scale(0.98); }
.nav-menu > .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-menu[open] .menu-bars::before { top: 4px; transform: rotate(45deg); }
.nav-menu[open] .menu-bars::after { top: 4px; transform: rotate(-45deg); }
.nav-menu[open] .menu-open-label, .nav-menu:not([open]) .menu-close-label { display: none; }
a.account-link { display: inline-flex; align-items: center; text-decoration: none; }

/* Public shop pages: /shops/ and /shops/<slug> */
.shop-page .sell-page, .shop-page .sell-foot { width: 100%; } /* body is a flex column; fill like the homepage */
.shop-hero { padding: 48px 0 40px; max-width: 48rem; }
.shop-tile { width: 72px; height: 72px; margin: 0 0 24px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.shop-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shop-hero h1 {
  margin: 0; font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.04em; color: var(--text);
}
.shop-hero .lede { margin: 24px 0 32px; }
.shop-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 48rem; }
.shop-facts li { padding: 16px; border-radius: 18px; background: var(--s1); color: var(--soft); box-shadow: var(--shadow-sm); }
.shop-facts strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }
.shop-more { padding: 48px 0 0; }
.shop-more h2, .shop-group h2 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.02em; }
.shop-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; }
.shop-chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 12px;
  background: var(--s1); color: var(--text); text-decoration: none; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  border: 1px solid var(--s4); transition: background-color 300ms var(--curve);
}
.shop-chips a:hover { background: var(--accent-soft); }
.shop-chips a:focus-visible, .shop-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-fca { margin: 48px 0 0; max-width: 65ch; color: var(--mute); font-size: 0.875rem; line-height: 1.25rem; }
.shop-index-hero { padding-bottom: 24px; }
.shop-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.shop-group { padding: 32px 0 0; scroll-margin-top: 80px; }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 8px; }
.shop-list a {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: 12px;
  background: var(--s1); color: var(--text); text-decoration: none; font-weight: 500; box-shadow: var(--shadow-sm);
  transition: background-color 300ms var(--curve);
}
.shop-list a:hover { background: var(--accent-soft); }
.shop-list img, .shop-list .mono { flex: none; width: 40px; height: 40px; border-radius: 8px; }
.shop-list img { background: #fff; object-fit: contain; }
.shop-list .mono { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .nav-menu > .menu-btn, .shop-chips a, .shop-list a { transition: none; }
}
@media (min-width: 760px) {
  .nav-menu { display: none; }
  .shop-hero { padding: 80px 0 48px; }
  .shop-hero h1 { font-size: 3rem; line-height: 1; }
  .shop-facts { grid-template-columns: 1fr 1fr; }
  .shop-group h2 { font-size: 1.5rem; line-height: 2rem; }
}

/* Favourite star on shop pages (round 22): an outlined toggle beside the main button. */
.shop-fav {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--s4); background: var(--s1); color: var(--text);
  font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.shop-fav:hover { background: var(--s1); }
.shop-fav:active { transform: scale(0.98); }
.shop-fav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-fav .fav-star { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.shop-fav[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.shop-fav[aria-pressed="true"] .fav-star { fill: currentColor; }
.fav-btn[hidden] { display: none !important; }
.fav-status { min-height: 1.25rem; margin: 10px 0 0; color: var(--mute); font-size: 0.875rem; }
.fav-status:empty { margin: 0; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .shop-fav { transition: none; } }

/* ---------- Gift card balance page (round 24) ---------- */
.gb-list li { display: grid; gap: 4px; }
.gb-via { display: block; font-size: 0.875rem; }
.gb-via a { color: var(--soft); text-underline-offset: 3px; }
.gb-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.gb-links a { display: inline-flex; align-items: center; min-height: 44px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Reflow at 200% zoom on a phone (≈195 CSS px) and at 320 px: the bar wraps instead of scrolling sideways. */
@media (max-width: 359px) {
  .nav-shell { flex-wrap: wrap; row-gap: 4px; padding-left: 8px; }
  .js .menu-btn, .nav-menu > .menu-btn { padding: 8px 10px; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .account-link { padding: 8px 12px; }
  main.sell-page, .sell-page > section { min-width: 0; }
  body.home > main.sell-page { width: 100%; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero h1 { font-size: 1.75rem; line-height: 2rem; }
}

/* 200% zoom on a phone: nothing wider than the screen. */
@media (max-width: 359px) {
  input, select, textarea, output { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .sell-page *, .account-area *, .ask * { min-width: 0; }
  .tool-row, .calc-row, .earn-row, .earn-calc label, .ph-row, .sub-top { flex-wrap: wrap; }
  .sell-page li, .earn-calc output { overflow-wrap: anywhere; white-space: normal; }
}

/* /cancel/<slug> guides (round 25) */
.cancel-steps { margin: 0 0 24px; padding-left: 1.5rem; display: grid; gap: 12px; line-height: 1.6; }
.cancel-steps li::marker { color: var(--accent); font-weight: 600; }

/* /more-back hub and /bill-check (round 26) */
.mb-guide { max-width: 48rem; }
.mb-lede { margin: 0 0 12px; color: var(--text); line-height: 1.6; }
.mb-points { margin: 0 0 16px; padding-left: 1.25rem; display: grid; gap: 8px; color: var(--soft); line-height: 1.6; }
.mb-points li::marker { color: var(--accent); }
.mb-src, .mb-more, .mb-meta { color: var(--mute); font-size: 0.875rem; line-height: 1.6; }
.mb-src a, .mb-more a { display: inline-flex; align-items: center; min-height: 44px; }
.mb-meta { display: block; margin-top: 6px; }
.mb-picks li { display: grid; gap: 4px; }
.mb-tool { display: block; min-height: 44px; color: var(--soft); text-decoration: none; }
.mb-tool strong { color: var(--text); }
.mb-tool:hover strong { color: var(--accent); }
.mb-tool:focus-visible, .bc-forget:focus-visible, .bc-opt input:focus-visible, .bc-row input:focus-visible, .bc-row select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bc-form { max-width: 36rem; display: grid; gap: 16px; padding: 16px; border-radius: 20px; background: var(--s1); box-shadow: var(--shadow-sm); }
.bc-kind { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bc-kind legend { margin-bottom: 8px; color: var(--text); font-weight: 600; }
.bc-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--s3); color: var(--text); cursor: pointer; border: 1px solid var(--s4); }
.bc-opt input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.bc-opt:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.bc-fields { display: grid; gap: 16px; }
.bc-fields[hidden] { display: none; }
.bc-row { display: grid; gap: 6px; color: var(--text); font-weight: 600; }
.bc-hint { color: var(--mute); font-weight: 400; font-size: 0.875rem; }
.bc-row input, .bc-row select { min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--s4); background: #ffffff; color: var(--text); font: inherit; font-weight: 400; width: 100%; box-sizing: border-box; }
.bc-row input[type="date"] { color-scheme: light; }
.bc-form .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.bc-forget { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--soft); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bc-note { margin: 0; color: var(--mute); font-size: 0.875rem; }
.bc-result { max-width: 36rem; margin-top: 16px; }
.bc-result:empty { margin: 0; }
.bc-card { padding: 20px 16px; border-radius: 20px; background: var(--s1); border: 1px solid var(--s4); box-shadow: var(--shadow-sm); }
.bc-card h2 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.75rem; }
.bc-card h2:focus { outline: none; }
.bc-card p { color: var(--soft); line-height: 1.6; }
.bc-big { margin: 4px 0 8px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 2rem; line-height: 2.5rem; color: var(--accent) !important; }
.bc-error { color: #b42318; }
.bc-plans li { display: grid; gap: 4px; }
@media (max-width: 359px) { .bc-opt { padding: 0 12px; } .bc-big { font-size: 1.5rem; line-height: 2rem; } }

/* ---------- Round 41: light theme extras ---------- */
/* Founding tiers: a small receipt of three lines with live spots left from real signups. */
.tiers { list-style: none; margin: 0 0 16px; padding: 4px 14px; border: 1px dashed var(--s4); border-radius: 16px; background: var(--s2); }
.tiers li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; padding: 9px 0; }
.tiers li + li { border-top: 1px dashed var(--s4); }
.t-k { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; color: var(--mute); }
.t-v { font-weight: 600; color: var(--text); font-size: 0.9375rem; line-height: 1.375rem; }
.t-left { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; color: var(--mute); white-space: nowrap; }
.t-left[hidden] { display: none; }
.tiers li[data-current="1"] .t-k, .tiers li[data-current="1"] .t-left { color: var(--accent); }
.tiers li[data-current="1"] .t-v::after { content: " · open now"; font-weight: 500; color: var(--accent); }
.join-note .offer { margin-top: 8px; }
.join-meta .quiet-link + .quiet-link { margin-left: 0; }

/* Trust cues: four true statements, ticked, no badges. */
.trust { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; max-width: 36rem; }
.trust li { display: flex; align-items: flex-start; gap: 8px; color: var(--soft); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.trust li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.8 11 12 5.5' fill='none' stroke='%23145641' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.trust + .reassure { margin-top: 12px; }
.trust-sm { margin: 4px 0 8px; grid-template-columns: minmax(0, 1fr); }

/* Sign-in dialog on the homepage, light */
.home dialog.wallet { background: #ffffff; color: var(--text); border: 0; border-radius: 24px; box-shadow: var(--shadow-md); }
.home dialog.wallet::backdrop { background: rgba(29, 27, 24, 0.32); }
.home dialog.wallet h2 { font-family: inherit; }
.home .account-field input { background: #ffffff; color: var(--text); box-shadow: 0 0 0 1px var(--s4); min-height: 44px; }
.home .account-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home .done { background: var(--accent); color: var(--accent-ink); border-radius: 12px; }
.home .done:hover { background: var(--accent-hover); }
.home .root-btn { color: var(--soft); }
.home .done:focus-visible, .home .root-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home .hint { color: var(--mute); }
.home .account-err { color: #b42318; }

/* /legal and the /app sign-in gate, on the same light page */
body.home.legal, body.home.gate-page { background: var(--bg); color: var(--text); }
.legal-main { width: 100%; max-width: 42rem; margin: 0 auto; padding: 40px 16px 96px; }
.legal-main h1 { margin: 0 0 16px; font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.03em; }
.legal-main h2 { margin: 40px 0 8px; font-size: 1.25rem; line-height: 1.75rem; scroll-margin-top: 88px; }
.legal-main p, .legal-main li { color: var(--soft); }
.legal-main li { margin: 6px 0; }
.legal-main strong { color: var(--text); }
.legal-main a { color: var(--accent); text-underline-offset: 4px; }
.legal-main a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.gate-main { flex: 1; width: 100%; display: grid; place-items: start center; padding: 40px 16px 64px; }
.gate-page .account-area { width: 100%; max-width: 26rem; margin: 0; padding: 24px; border-radius: 24px; background: #ffffff; box-shadow: var(--shadow-md); display: grid; gap: 4px; }
.gate-page .account-area h2 { margin: 0 0 4px; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.03em; }
.gate-page .account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.gate-page .account-actions .done { flex: 1 1 auto; min-height: 48px; }
.gate-page .account-actions .root-btn { border: 1px solid var(--s4); border-radius: 12px; background: #ffffff; color: var(--text); }
.gate-page .fine { margin: 16px 0 0; color: var(--mute); font-size: 0.875rem; }
.gate-page [hidden] { display: none !important; }
.gate-page .fine a.account-link { margin: 0; padding: 0; background: none; border-radius: 4px; font-size: inherit; font-weight: 500; text-decoration: underline; }
.gate-page .fine a.account-link:hover { background: none; color: var(--text); }
.gate-page .fine a { color: var(--soft); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.gate-page .fine a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate-foot { padding: 24px 16px calc(32px + env(safe-area-inset-bottom)); text-align: center; color: var(--mute); font-size: 0.875rem; }
@media (min-width: 760px) {
  .legal-main { padding-top: 64px; }
  .legal-main h1 { font-size: 3rem; line-height: 1; }
  .gate-main { padding-top: 72px; }
}
@media (max-width: 359px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .tiers li { grid-template-columns: minmax(0, 1fr) auto; }
  .t-v { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Round 42 (Anto 27 Oct 12:35/12:36): a faint green wash at the top, clear section bands,
   a distinct footer band, and on phones the proof lines fold away and the waitlist sits after the phone. ---------- */
/* 1. Faint wash: a pale mint tint of the logo's forest (#145641) fading into the warm off-white by
   about the end of the hero. Body text on #e9f4ed stays above 13:1, muted text above 5.5:1. */
body.home {
  --wash: #e9f4ed; --wash-h: 520px;
  --band-white: #ffffff; --band-mint: #eef6f0; --band-foot: #f2ede5;
  background: linear-gradient(180deg, var(--wash) 0, #f0f6ef 40%, var(--bg) 100%) top center / 100% var(--wash-h) no-repeat, var(--bg);
}
body.home:has(.hero) { --wash-h: 980px; }
@media (min-width: 900px) { body.home:has(.hero) { --wash-h: 900px; } }

/* 2. Homepage sections run full width; content stays on the same 70rem column as before. Coloured
   sections are rounded panels with a little page showing round them, so each one reads as its own
   part of the page. No viewport-width tricks, so nothing can scroll sideways. */
.sell-page:has(> .hero) { max-width: none; padding: 0 0 48px; }
.sell-page:has(> .hero) > section {
  --gut: max(16px, env(safe-area-inset-left), calc((100% - 70rem) / 2));
  padding-left: var(--gut); padding-right: var(--gut);
}
.sell-page:has(> .hero) > .panel {
  --m: 8px;
  --gut: max(16px, calc((100% - 70rem) / 2 - var(--m)));
  margin: 8px var(--m); border-radius: 28px;
  padding-top: 64px; padding-bottom: 64px;
}
.sell-page:has(> .hero) > .panel-white { background: var(--band-white); box-shadow: 0 1px 0 var(--line), 0 0 0 1px rgba(29, 27, 24, 0.04); }
.sell-page:has(> .hero) > .panel-mint { background: var(--band-mint); }
.sell-page:has(> .hero) > .panel + .panel { margin-top: 12px; }
@media (min-width: 760px) {
  .sell-page:has(> .hero) > .panel { --m: 16px; border-radius: 40px; padding-top: 88px; padding-bottom: 96px; }
  .sell-page:has(> .hero) > .tagline { padding-left: calc(var(--gut) + 64px); }
}
@media (min-width: 1280px) { .sell-page:has(> .hero) > .panel { --m: 24px; } }
/* white cards stay visible on a white panel */
.panel-white .earn-calc, .panel-white .join-end { box-shadow: none; border: 1px solid var(--line); background: var(--bg); }

/* Waitlist band (moved out of the hero, after the phone) */
.join-band .join { margin-top: 0; }
.join-band .join-title { margin: 0 0 8px; font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.03em; }
.join-band .trust { margin-top: 24px; }
@media (min-width: 760px) { .join-band .join-title { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 900px) {
  .join-band { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .join-band .join-aside { padding-top: 56px; }
  .join-band .trust { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .join-band .trust li { font-size: 1rem; line-height: 1.5rem; }
  .join-band .reassure { margin-top: 24px; }
  /* the hero copy is shorter now the waitlist moved out: sit it near the top beside the phone */
  .hero { align-items: start; }
  .hero-copy { padding-top: 72px; }
}

/* 3. Footer: its own band on every public page */
body.home .sell-foot {
  max-width: none; margin-top: 32px; border-top: 0; border-radius: 28px 28px 0 0;
  background: var(--band-foot);
  padding: 48px max(16px, env(safe-area-inset-left), calc((100% - 70rem) / 2)) calc(48px + env(safe-area-inset-bottom));
}
@media (min-width: 760px) { body.home .sell-foot { border-radius: 40px 40px 0 0; padding-top: 64px; } }

/* 4. Other public pages, lightly: a hairline and more air between their sections */
.shop-page .shop-more + .shop-more { margin-top: 48px; border-top: 1px solid var(--line); }
.legal-main h2 { padding-top: 32px; border-top: 1px solid var(--line); }
.legal-main h1 + h2, .legal-main h1 + p + h2 { border-top: 0; padding-top: 0; }

/* 5. Proof lines fold on phones (under 900px, with JS): label rows with a chevron, all closed; the
   open row shows its one line, which is the link to the feature. From 900px nothing changes. */
.hr-toggle { display: none; }
@media (max-width: 899.98px) {
  .js .hero-receipt .hr-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0;
    border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 4px;
  }
  .js .hero-receipt .hr-toggle .hr-k { font-size: 0.875rem; }
  .js .hero-receipt .hr-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .js .hr-chev {
    flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute);
    transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--curve);
  }
  .js .hr-toggle[aria-expanded="true"] .hr-chev { transform: translateY(2px) rotate(-135deg); border-color: var(--accent); }
  .js .hero-receipt .hr-link { display: none; }
  .js .hero-receipt li[data-open] .hr-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 0 0 12px; }
  .js .hero-receipt .hr-link .hr-k { display: none; }
  .js .hero-receipt .hr-link .hr-v { grid-column: 1; grid-row: 1; color: var(--text); }
  .js .hero-receipt .hr-link::after { grid-column: 2; grid-row: 1; }
  .js .hero-receipt { padding-top: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .js .hr-chev { transition: none; } }

/* Round 43: a few illustrated cards that fan out and shuffle away as you scroll. Decorative only
   (aria-hidden), absolutely placed in empty space beside two headings, so they never move the
   layout. Generic MoreBack cards: no issuer art, no numbers. Transforms and opacity only; driven by
   the scroll timeline where supported, otherwise (and with reduced motion) a still fan. */
.sell-page:has(> .hero) > #earn, .sell-page:has(> .hero) > #questions { position: relative; }
.fan { display: none; position: absolute; pointer-events: none; contain: layout style; }
.fan i {
  position: absolute; left: 50%; bottom: 8px; width: 96px; height: 60px; margin-left: -48px; border-radius: 9px;
  transform-origin: 50% 120%; box-shadow: 0 1px 2px rgba(60, 45, 20, 0.08), 0 8px 20px rgba(60, 45, 20, 0.1);
}
.fan i::before { content: ""; position: absolute; left: 11px; top: 17px; width: 15px; height: 11px; border-radius: 3px; background: #e9dcb8; }
.fan i::after { content: ""; position: absolute; left: 11px; right: 34px; bottom: 11px; height: 5px; border-radius: 3px; background: currentColor; opacity: 0.35; }
.fan i:nth-child(1) { background: linear-gradient(135deg, #c6ebd4, #e3f2e9); color: #145641; transform: translateX(-26px) rotate(-14deg); }
.fan i:nth-child(2) { background: linear-gradient(135deg, #ffffff, #f2ede5); color: #1d1b18; border: 1px solid #e3dcd0; transform: translateY(-4px) rotate(-1deg); }
.fan i:nth-child(3) { background: linear-gradient(135deg, #1b6b52, #145641 60%, #0f4533); color: #ffffff; transform: translateX(26px) rotate(13deg); }
.fan i:nth-child(3)::before { background: #c6ebd4; opacity: 0.8; }
@media (max-width: 759px) {
  .fan-mob { display: block; width: 92px; height: 58px; right: var(--gut); top: 38px; }
  .fan.fan-mob i:nth-child(1) { transform: scale(0.6) translateX(-26px) rotate(-14deg); }
  .fan.fan-mob i:nth-child(2) { transform: scale(0.6) translateY(-4px) rotate(-1deg); }
  .fan.fan-mob i:nth-child(3) { transform: scale(0.6) translateX(26px) rotate(13deg); }
  #questions .fan-mob ~ h2 { padding-right: 100px; }
}
@media (min-width: 1100px) {
  .fan-desk { display: block; width: 190px; height: 104px; right: calc(var(--gut) + 8px); top: 28px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
    .fan-desk i { animation: linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; will-change: transform, opacity; }
    .fan-desk i:nth-child(1) { animation-name: fan-a; }
    .fan-desk i:nth-child(2) { animation-name: fan-b; }
    .fan-desk i:nth-child(3) { animation-name: fan-c; }
  }
}
@keyframes fan-a { 0% { transform: translateY(6px) rotate(-2deg); } 40%, 62% { transform: translateX(-26px) rotate(-14deg); } 100% { transform: translate(-58px, -22px) rotate(-26deg); opacity: 0; } }
@keyframes fan-b { 0% { transform: translateY(2px) rotate(0deg); } 40%, 62% { transform: translateY(-4px) rotate(-1deg); } 100% { transform: translate(6px, -40px) rotate(4deg); opacity: 0; } }
@keyframes fan-c { 0% { transform: rotate(2deg); } 40%, 62% { transform: translateX(26px) rotate(13deg); } 100% { transform: translate(60px, -18px) rotate(28deg); opacity: 0; } }

/* Header waitlist button (round 43): the long label from 480px, the short one on narrow phones. */
.early-link { white-space: nowrap; }
.early-short { display: none; }
@media (max-width: 479px) { .early-long { display: none; } .early-short { display: inline; } }
@media (max-width: 419px) { .early-link { padding-left: 12px; padding-right: 12px; } .nav-shell .menu-btn { padding-left: 10px; padding-right: 10px; } }

/* Round 43: after-signup steps ("Help us build it for you", "Move up the list") and /place, /founder. */
.next { display: grid; gap: 16px; margin-top: 24px; }
.next-step, .share-box { padding: 20px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.panel-white .next-step, .panel-white .share-box { background: var(--bg); box-shadow: none; }
.next h3 { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.01em; }
.next h3:focus { outline: none; }
.next h3:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.next-note, .share-box p { margin: 0 0 12px; color: var(--soft); }
.next-hint { margin: 6px 0 0; color: var(--mute); font-size: 0.875rem; line-height: 1.25rem; }
.next-form { display: grid; gap: 18px; }
.next-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.next-form legend, .next-pc > label { display: block; padding: 0; margin-bottom: 8px; font-weight: 600; }
.next-pc > label .next-hint { display: inline; font-weight: 400; }
.next-find, .next-pc input, .share-link {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--s4); background: var(--s1);
  font: inherit; color: var(--text); box-sizing: border-box;
}
.next-find:focus-visible, .next-pc input:focus-visible, .share-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.next-pc input { max-width: 10rem; text-transform: uppercase; }
.next-pc input[aria-invalid="true"] { border-color: #a33a1f; }
.next-cards, .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips { margin-top: 0; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--s4); background: var(--s1); color: var(--text); font: inherit; font-size: 0.9375rem; line-height: 1.25rem; cursor: pointer; text-align: left; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip:has(input:checked), .chip-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip-btn[aria-pressed="true"]::before, .chip:has(input:checked)::before { content: "✓"; margin-right: 6px; }
.chip:has(input:focus-visible), .chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.next-msg { margin: 0; color: #a33a1f; font-size: 0.875rem; min-height: 0; }
.next-msg:empty { display: none; }
.next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.next-skip { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; background: transparent; color: var(--soft); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.next-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-row { display: flex; gap: 8px; align-items: stretch; margin: 0 0 8px; }
.share-row .share-link { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 0.8125rem; }
.share-row .btn { flex: none; }
.place-card { margin: 16px 0; padding: 20px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line); }
.place-num { margin: 0 0 8px; font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--accent); }

/* Round 44 (Anto): header waitlist button on phones is just "Waitlist", compact, with a 44px hit area. */
@media (max-width: 479px) {
  .early-link { position: relative; min-height: 36px; padding: 6px 12px; border-radius: 10px; }
  .early-link::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
}

/* Round 44: hero order. On phones: headline, phone, proof rows (DOM order). From 900px the grid puts
   the rows back under the subline, beside the phone, so the desktop layout is unchanged. */
.hero-copy .lede:last-child { margin-bottom: 0; }
.hero > .hero-receipt { width: 100%; min-width: 0; }
.showcase { scroll-margin-top: 80px; }
@media (min-width: 900px) {
  .hero { grid-template-rows: auto 1fr; row-gap: 0; }
  .hero > .hero-copy { grid-column: 1; grid-row: 1; }
  .hero > .showcase { grid-column: 2; grid-row: 1 / span 2; }
  .hero > .hero-receipt { grid-column: 1; grid-row: 2; align-self: start; margin-top: 32px; }
}

/* Round 44: the earnings calculator keeps one short line; the method is in /legal#calculator-method. */
.earn-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.earn-note a:hover { color: var(--text); }
.earn-note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Round 44: the one waitlist form (inline without JS, in the dialog with JS). */
.ref-offer { margin: -4px 0 16px; color: var(--text); font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; }
.ref-offer .quiet-link { font-weight: 500; }
.wait-open-row { margin: 0; }
.wait-open-row .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wait-open { display: none !important; }
.js .wait-open { display: inline-flex !important; }
.js .wait-home { display: none; }
.js .wait-home[data-inline] { display: block; }
.wait-form { display: grid; gap: 20px; margin-top: 8px; }
.wait-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wf-intro { margin: 0; color: var(--soft); font-size: 0.875rem; line-height: 1.25rem; }
.wf-field { display: grid; gap: 6px; }
.wf-group { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.wf-label { padding: 0; font-weight: 600; font-size: 1rem; line-height: 1.5rem; color: var(--text); }
.wf-opt { font-weight: 400; color: var(--mute); }
.wf-help { margin: 0; color: var(--mute); font-size: 0.875rem; line-height: 1.25rem; }
.wf-err { margin: 0; color: #b42318; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.wf-err::before { content: "! "; }
.wait-form input[type="email"], .wait-form input[type="text"], .wait-form input[type="search"] {
  width: 100%; min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1px solid #8a847b; background: #ffffff; color: var(--text); font: inherit;
}
.wait-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wait-form input[aria-invalid="true"], [data-invalid] .chip { border-color: #b42318; }
[data-invalid] { border-left: 3px solid #b42318; padding-left: 12px !important; }
.wf-find { margin: 0; }
.wf-cards .chip[hidden] { display: none; }
.wf-more { justify-self: start; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wf-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.chip-none { border-style: dashed; }
.wf-summary { padding: 14px 16px; border: 2px solid #b42318; border-radius: 12px; background: #fff5f4; }
.wf-summary:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.wf-summary-title { margin: 0 0 6px; font-size: 1rem; line-height: 1.5rem; color: var(--text); }
.wf-summary ul { margin: 0; padding-left: 18px; }
.wf-summary a { color: #b42318; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wf-privacy { margin: 0; color: var(--mute); font-size: 0.875rem; line-height: 1.25rem; }
.wf-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wf-submit { justify-self: start; min-height: 48px; }
.wf-submit[disabled] { opacity: 0.7; cursor: progress; }
.wait-form .wait-msg:empty { display: none; }
.wait-done { display: grid; gap: 12px; }
.wait-done h3 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; }
.wait-done p { margin: 0; }
.wd-progress { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--text); font-weight: 600; }
.wait-done .share-box h4 { margin: 0 0 6px; font-size: 1rem; line-height: 1.5rem; }
.place-ref { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); }

/* The waitlist dialog: a centred panel on wide screens, a full-height bottom sheet on phones. */
.wait-dialog {
  width: min(40rem, calc(100% - 32px)); max-height: min(92dvh, 56rem); padding: 0; border: 0; border-radius: 24px;
  background: var(--s1); color: var(--text); box-shadow: var(--shadow-md); overflow: hidden;
}
.wait-dialog[open] { display: flex; flex-direction: column; }
.wait-dialog::backdrop { background: rgba(29, 27, 24, 0.5); }
.wd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 24px; border-bottom: 1px solid var(--line); }
.wd-head h2 { margin: 0; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.02em; }
.wd-head h2:focus { outline: none; }
.wd-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--s3); color: var(--text); font: inherit; font-size: 1rem; cursor: pointer; }
.wd-close:hover { background: var(--s4); }
.wd-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; }
.wd-body .wait-form { margin-top: 0; }
html.wait-lock, html.wait-lock body { overflow: hidden; }
@media (max-width: 479px) {
  .wait-dialog {
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; inset: auto 0 0 0;
    border-radius: 20px 20px 0 0;
  }
  .wd-head { padding: 12px 12px 10px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .wd-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .wf-submit { justify-self: stretch; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .wait-dialog[open] { animation: wd-in 220ms var(--curve); }
  @media (max-width: 479px) { .wait-dialog[open] { animation: wd-up 280ms var(--curve); } }
}
@keyframes wd-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes wd-up { from { transform: translateY(100%); } to { transform: none; } }
.wait-form .chip { border-color: #8a847b; }