/* ============================================================================
   THE ILLUSTRATED BARTENDER — main stylesheet
   Design tokens are canonical: a future rebuild inherits these names verbatim.
   ============================================================================ */

:root {
  /* --- Color tokens (canonical) --- */
  --teal-500: #E4DCCB;   /* WARM BORDER / divider — surface only, never text */
  --teal-700: #4E6B6A;   /* DARK TEAL — links, secondary UI, First-Edition badges (white text on it) */
  --teal-100: #EFEBE0;   /* WARM TINT — section backgrounds, never carries text color */
  --ink-900: #23201C;    /* INK — body text; also the footer/dark-band surface */
  --paper-050: #FAF6EE;  /* PAPER — page background */
  --accent-amber: #D6A24C; /* GOLD — the ONE primary CTA per screen; fill-only, ink text, never white */
  --navy-900: #23201C;     /* unified to INK — dark surfaces (footer, consent, dark bands); text = paper/white */

  /* --- Type ---
     Display = Oswald, Body = Inter (Google Fonts, font-display: swap).
     TODO: license true DIN Alternate post-launch; Oswald is the interim display face */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, "Helvetica Neue", sans-serif;

  /* Modular scale 1.25 */
  --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem;     --fs-20: 1.25rem;
  --fs-25: 1.5625rem; --fs-31: 1.9375rem; --fs-39: 2.4375rem; --fs-49: 3.0625rem;

  /* Spacing — 8px base scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  --radius: 6px;

  /* Motion (Part B): every UI transition runs on ease-out; emphasis curve
     reserved for future hero-level moments. All UI motion <=200ms. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);

  /* §7A: semantic z-index ladder — use these, never ad-hoc numbers */
  --z-header: 100;
  --z-nav: 200;
  --z-consent: 300;
  --z-modal: 400;
  --z-fullscreen: 500;
  --maxw: 1200px;
  --shadow-lift: 0 3px 8px rgba(31, 38, 36, 0.14); /* §7A: <=8px blur — no ghost cards */
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--ink-900);            /* contrast rule: ink on paper, always */
  background: var(--paper-050);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-39); }
h2 { font-size: var(--fs-31); }
h3 { font-size: var(--fs-20); }
@media (min-width: 768px) {
  h1 { font-size: var(--fs-49); }
  h2 { font-size: var(--fs-39); }
  h3 { font-size: var(--fs-25); }
}
p { margin: 0 0 var(--sp-4); }
h1, h2, h3 { text-wrap: balance; }               /* §7A: no widowed display lines */
.prose, .post-body { text-wrap: pretty; }         /* §7A: better rag in running text */
.h-sub { font-size: var(--fs-20); }               /* h2 semantics at h3 scale (WCAG 1.3.1 fix) */
@media (min-width: 768px) { .h-sub { font-size: var(--fs-25); } }
a { color: var(--teal-700); }
a:hover { color: var(--ink-900); }
:focus-visible { outline: 3px solid var(--accent-amber); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-nav);
  background: var(--ink-900); color: var(--paper-050); padding: var(--sp-2) var(--sp-4);
}
.skip-link:focus { left: 0; color: var(--paper-050); }

/* --- Layout ----------------------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }
.section { padding: var(--sp-8) 0; }
@media (min-width: 768px) { .section { padding: var(--sp-12) 0; } }
main > .section:last-of-type { padding-bottom: var(--sp-16); } /* §7A: closing air */
.grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
  .col-4 { grid-column: span 4; }
  .col-6 { grid-column: span 6; }
  .col-8 { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
}
.surface-teal { background: var(--navy-900); color: var(--paper-050); } /* dark band: ivory on navy ~12:1 (denim would fail with white text) */
.surface-tint { background: var(--teal-100); }
/* Text on teal must be paper-white, ≥18px AND bold (WCAG AA) */
.surface-teal p, .surface-teal .on-teal { color: var(--paper-050); font-size: 1.125rem; font-weight: 700; }
.surface-teal a { color: var(--paper-050); }

/* --- Buttons (CSS-only micro-interactions) ----------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-6);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms var(--ease-out);
  min-height: 44px; /* tap target */
}
/* hover LIFT only for real pointers — the IG in-app browser gets no stuck-hover
   (color/background hover changes stay ungated below) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
}
.btn:active { transform: scale(0.97); box-shadow: none; } /* real press feedback */
.btn-primary { background: var(--accent-amber); color: var(--ink-900); }
.btn-primary:hover { background: #C1913F; color: var(--ink-900); } /* gold, darkened */
.btn-secondary { background: var(--teal-700); color: var(--paper-050); border-color: var(--teal-700); }
.btn-secondary:hover { background: #405857; color: var(--paper-050); border-color: #405857; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-block { display: block; width: 100%; }

/* --- Inputs & signup form ----------------------------------------------------- */
.input {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--ink-900);
  background: #fff;
  border: 2px solid var(--teal-700);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
  min-height: 44px;
}
.input:focus { border-color: var(--accent-amber); outline: none; }
.signup-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 480px; }
.signup-form .signup-row { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 480px) {
  .signup-form .signup-row { flex-direction: row; }
  .signup-form .signup-row .input { flex: 1 1 12em; min-width: 12em; }
  .signup-form .signup-row .btn { flex: 0 1 auto; }
}
.signup-consent { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-14); }
.signup-consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--teal-700); }
.form-msg { font-size: var(--fs-14); min-height: 1.4em; margin: 0; }
.form-msg[data-state="error"] { color: #8a2b1d; font-weight: 600; }
.form-msg[data-state="ok"] { color: var(--teal-700); font-weight: 600; }
/* honeypot: visually removed, still in DOM for bots */
.hp-field { position: absolute !important; left: -5000px; opacity: 0; pointer-events: none; }
.turnstile-box:empty { display: none; }

/* --- Header / nav -------------------------------------------------------------- */
.site-header {
  background: var(--paper-050);
  border-bottom: 1px solid var(--teal-100);
  position: sticky; top: 0; z-index: var(--z-header);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: var(--sp-4); }
.brand {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-20); color: var(--ink-900); text-decoration: none; letter-spacing: 0.03em;
  display: flex; align-items: center; gap: var(--sp-2);
}
.brand svg { width: 28px; height: 28px; }
.nav-toggle {
  background: none; border: 0; padding: var(--sp-2); cursor: pointer; display: inline-flex;
}
.nav-toggle .bar { display: block; width: 24px; height: 3px; background: var(--ink-900); margin: 2.5px 0; border-radius: 2px; transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper-050); border-bottom: 1px solid var(--teal-100); box-shadow: var(--shadow-lift); }
.site-nav ul { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.site-nav a {
  display: block; padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-16);
  color: var(--ink-900); text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--teal-700); }
.site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent-amber); }
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; box-shadow: none; border: 0; }
  .site-nav ul { display: flex; gap: var(--sp-2); padding: 0; }
  .site-nav a { padding: var(--sp-2) var(--sp-3); }
  .site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent-amber); }
}

/* --- Footer --------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--paper-050); margin-top: var(--sp-12); }
.site-footer a { color: var(--teal-100); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: var(--sp-8); padding: var(--sp-8) 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-heading { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-16); color: #fff; margin-bottom: var(--sp-3); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: var(--sp-2); }
.footer-identity { border-top: 1px solid rgba(247,245,241,0.2); padding: var(--sp-4) 0; font-size: var(--fs-12); color: var(--teal-100); }
.site-footer .slot, .site-footer .slot-block { color: var(--teal-100); border-color: rgba(247,245,241,0.4); }

/* --- Hero ------------------------------------------------------------------------ */
.hero {
  background: linear-gradient(180deg, #F6F2E7 0%, var(--teal-100) 78%); /* warm tonal wash */
  border-bottom: 2px solid var(--teal-700);
  overflow: hidden;
}
/* Vertical padding ONLY (longhands): this element also carries .container,
   whose horizontal padding must survive — a `padding: … 0` shorthand here was
   zeroing the hero's side padding and pinning the H1 to the viewport edge. */
.hero-grid { display: grid; gap: var(--sp-6); align-items: center; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
@media (min-width: 768px) { .hero-grid { grid-template-columns: 6fr 6fr; padding-top: var(--sp-16); padding-bottom: var(--sp-12); } }
.hero h1 { color: var(--ink-900); }
.hero .subhead { font-size: var(--fs-20); }
/* hero art: 4:5 mobile / 16:9 desktop, ratio always reserved (zero CLS) */
.hero-art { --ratio: 4 / 5; }
@media (min-width: 768px) { .hero-art { --ratio: 16 / 9; } }

/* --- Cards (product / blog / teaser) — CSS-only lift ------------------------------- */
.card {
  background: #fff; border: 1px solid var(--teal-100); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.card:hover { border-color: var(--teal-700); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}
.card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card-title { font-size: var(--fs-20); margin: 0; }
.card-title a { color: var(--ink-900); text-decoration: none; }
.card-price { font-weight: 700; font-size: var(--fs-16); }
.card-meta { font-size: var(--fs-14); color: var(--teal-700); }
.card .btn { margin-top: auto; }
.card-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card--bundle { border: 2px solid var(--accent-amber); }
.badge {
  display: inline-block; background: var(--accent-amber); color: var(--ink-900);
  font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-12);
  font-weight: 600; letter-spacing: 0.06em; border-radius: 3px; padding: 2px 8px;
}
.badge--edition { background: var(--teal-700); color: var(--paper-050); }

/* --- Content-slot placeholders (visible until filled) -------------------------------
   Unfilled slots render their label in a muted dashed style so a preview of the
   site is itself the fill-in map. content.js removes .slot--empty when filled. */
.slot, .slot-block, .img-slot__label {
  color: #7d726a;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.slot { border: 1.5px dashed #b9aea2; border-radius: 4px; padding: 0 6px; }
.slot-block { display: block; border: 1.5px dashed #b9aea2; border-radius: 4px; padding: var(--sp-3); }
.slot.slot--filled, .slot-block.slot--filled {
  border: 0; padding: 0; color: inherit; font: inherit; font-style: normal;
  text-transform: inherit; letter-spacing: inherit; display: revert;
}
h1 .slot.slot--filled, h2 .slot.slot--filled, h3 .slot.slot--filled { font: inherit; }

/* --- Image-placeholder box (aspect-ratio locked — zero CLS) --------------------------- */
.img-slot {
  position: relative; margin: 0; width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  background: var(--teal-100); /* §7A: solid tint — intentional scaffolding, not a hatch */
  border: 1.5px dashed #b9aea2; border-radius: var(--radius); overflow: hidden;
}
.img-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-slot__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-4); font-size: var(--fs-14); visibility: hidden;
}
.img-slot--empty img { visibility: hidden; }
.img-slot--empty .img-slot__label { visibility: visible; }
.img-slot--filled { border: 0; background: none; }
.img-slot--contain img { object-fit: contain; }

/* --- Progress cue ("you own X of 5") --------------------------------------------------- */
.progress-cue { display: none; align-items: center; gap: var(--sp-3); background: var(--teal-100); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.progress-cue.active { display: flex; flex-wrap: wrap; }
.progress-dots { display: flex; gap: 6px; }
.progress-dots span {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--teal-700); background: transparent;
}
.progress-dots span.owned { background: var(--teal-700); }
.progress-cue p { margin: 0; font-size: var(--fs-14); }
.own-toggle { font-size: var(--fs-14); display: inline-flex; gap: var(--sp-2); align-items: center; cursor: pointer; }
.own-toggle input { accent-color: var(--teal-700); width: 18px; height: 18px; }

/* --- Banners (tool signup banner, launch-state notice) ----------------------------------- */
.tool-banner { background: var(--navy-900); } /* dark band, ivory bold text */
.tool-banner .container { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.tool-banner p { margin: 0; color: var(--paper-050); font-size: 1.125rem; font-weight: 700; }
.state-notice { background: var(--teal-100); border-left: 4px solid var(--accent-amber); padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: var(--sp-6); }
.state-notice p { margin: 0; }

/* --- Consent banner (built-in fallback; CookieYes replaces it when configured) ------------ */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-consent);
  background: var(--navy-900); color: var(--paper-050);
  padding: var(--sp-4); display: none;
}
.consent-banner.visible { display: block; }
.consent-banner .container { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.consent-banner p { margin: 0; font-size: var(--fs-14); max-width: 640px; }
.consent-banner a { color: var(--teal-100); }
.consent-actions { display: flex; gap: var(--sp-3); }

/* --- Exit-intent / scroll-depth capture modal ----------------------------------------------- */
.capture-modal {
  position: fixed; inset: 0; z-index: var(--z-modal); display: none;
  align-items: flex-end; justify-content: center;
  background: rgba(31, 38, 36, 0.6); padding: var(--sp-4);
}
@media (min-width: 768px) { .capture-modal { align-items: center; } }
.capture-modal.visible { display: flex; }
.capture-modal .modal-card {
  background: var(--paper-050); border-radius: var(--radius); max-width: 480px; width: 100%;
  padding: var(--sp-6); position: relative;
}
.modal-close {
  position: absolute; top: var(--sp-2); right: var(--sp-2); background: none; border: 0;
  font-size: var(--fs-25); line-height: 1; cursor: pointer; color: var(--ink-900); padding: var(--sp-2);
}

/* --- Flavor wheel (embedded interactive tool) --------------------------------------------------- */
.tool-controls { display: flex; justify-content: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); }
.tool-controls .hint { font-size: var(--fs-14); color: var(--teal-700); align-self: center; margin: 0; }
.tool-embed-frame {
  position: relative;
  border: 1px solid var(--teal-100);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-050);
  box-shadow: var(--shadow-lift);
  /* height reserved up-front — the iframe never shifts layout (CLS 0) */
  min-height: 560px;
}
.tool-embed-frame iframe {
  width: 100%;
  height: 76vh;
  min-height: 560px;
  border: 0;
  display: block;
  background: var(--paper-050);
}
@media (max-width: 640px) {
  .tool-embed-frame iframe { height: 72vh; min-height: 480px; }
  .tool-embed-frame { min-height: 480px; }
}
.wheel-fs-exit {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--paper-050); background: rgba(31, 38, 36, 0.65); color: var(--paper-050);
  font-size: var(--fs-20); line-height: 1; text-align: center; cursor: pointer;
}
body.fs-active { overflow: hidden; }
body.fs-active .tool-embed-frame {
  position: fixed; inset: 0; z-index: var(--z-fullscreen);
  border: 0; border-radius: 0; box-shadow: none;
  height: var(--app-height, 100vh);
  min-height: 0;
}
body.fs-active .tool-embed-frame iframe { height: 100%; min-height: 0; }

/* --- Blog ---------------------------------------------------------------------------------------- */
.post-header { margin-bottom: var(--sp-6); }
.post-byline { font-size: var(--fs-14); color: var(--teal-700); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.tldr {
  background: var(--teal-100); border-left: 4px solid var(--teal-700);
  padding: var(--sp-4); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--sp-6) 0;
}
.tldr h2 { font-size: var(--fs-16); margin-bottom: var(--sp-2); }
.post-body { max-width: 68ch; }
.post-body h2 { margin-top: var(--sp-8); }
.post-body h3 { margin-top: var(--sp-6); }
.post-body img { border-radius: var(--radius); }
.inline-cta { background: var(--teal-100); border-radius: var(--radius); padding: var(--sp-6); margin: var(--sp-8) 0; }
.citations { font-size: var(--fs-14); border-top: 1px solid var(--teal-100); margin-top: var(--sp-8); padding-top: var(--sp-4); }
.related-links { margin-top: var(--sp-8); }

/* --- Policies / prose pages ------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.compliance-note { background: #F8EFDB; border: 1px solid var(--accent-amber); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-14); margin-bottom: var(--sp-6); }

/* --- Product page ------------------------------------------------------------------------------------ */
.product-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .product-layout { grid-template-columns: 7fr 5fr; align-items: start; } }
.product-gallery { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.variant-group { margin-bottom: var(--sp-4); }
.variant-group legend { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-14); padding: 0; margin-bottom: var(--sp-2); }
.variant-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.variant-options label {
  border: 2px solid var(--teal-700); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  cursor: pointer; font-size: var(--fs-14); min-width: 48px; text-align: center;
}
.variant-options input { position: absolute; opacity: 0; }
.variant-options input:checked + span { font-weight: 700; }
.variant-options label:has(input:checked) { background: var(--teal-700); color: var(--paper-050); }
.variant-options label:has(input:focus-visible) { outline: 3px solid var(--accent-amber); outline-offset: 2px; }
.price { font-size: var(--fs-25); font-weight: 700; margin: var(--sp-3) 0; }
.sku-line { font-size: var(--fs-12); color: var(--teal-700); }

/* --- Reduced motion ------------------------------------------------------------------------------------ */

/* --- Overlay enter/exit (Part B) — CSS-only; JS still just toggles classes.
   Enter 200ms ease-out, exit 140ms ease-out (snaps away faster than it lands).
   @starting-style + transition-behavior (allow-discrete) let the display
   toggle animate; browsers without support fall back to the instant
   show/hide the site always had. Transform/opacity only — interruptible
   transitions, no keyframes, nothing ever starts from scale(0). --- */

/* Capture modal: backdrop fades, card rises translateY(10px) scale(.98) -> neutral */
.capture-modal {
  opacity: 0;
  transition: opacity 140ms var(--ease-out), display 140ms allow-discrete;
}
.capture-modal .modal-card {
  transform: translateY(10px) scale(0.98);
  transition: transform 140ms var(--ease-out);
}
.capture-modal.visible {
  opacity: 1;
  transition: opacity 200ms var(--ease-out), display 200ms allow-discrete;
}
.capture-modal.visible .modal-card { transform: none; transition-duration: 200ms; }
@starting-style {
  .capture-modal.visible { opacity: 0; }
  .capture-modal.visible .modal-card { transform: translateY(10px) scale(0.98); }
}

/* Consent banner: rises from the bottom edge */
.consent-banner {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), display 140ms allow-discrete;
}
.consent-banner.visible {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), display 200ms allow-discrete;
}
@starting-style {
  .consent-banner.visible { opacity: 0; transform: translateY(10px) scale(0.98); }
}

/* Mobile nav: drops in under the header (scoped so the always-visible
   desktop nav is untouched) */
@media (max-width: 767px) {
  .site-nav {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), display 140ms allow-discrete;
  }
  .site-nav.open {
    opacity: 1;
    transform: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), display 200ms allow-discrete;
  }
  @starting-style {
    .site-nav.open { opacity: 0; transform: translateY(-10px) scale(0.98); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .nav-toggle .bar { transition: none; }
  .btn:hover, .card:hover, .btn:active { transform: none; }
  /* overlays keep their opacity fade but never move or scale */
  .capture-modal .modal-card, .consent-banner, .site-nav { transform: none !important; }
}


/* MVP overrides (2026-08-18) — single-purpose capture site.
   Restore by deleting this block when the shop/blog/tools pages come back. */
.hero-solo { display: block !important; max-width: 720px; }
.hero-solo .signup-form { max-width: 520px; }
.img-slot__label { display: none !important; }
.img-slot:not(:has(img[src]:not([src=""]))) { display: none !important; }


/* MVP spacing — the page is short now; don't leave a canyon above the footer. */
.hero-solo { padding-block: var(--sp-8); }
main > .section:last-of-type { padding-bottom: var(--sp-8); }