/* Meet Me Gently V5 — marketing site */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg: var(--brand-site-cream, #FBF7EF); --panel: #fffdf8; --ink: var(--brand-site-ink, #24201a); --ink-soft: var(--brand-site-ink-soft, #6a6152);
  --line: var(--brand-site-line, #e7ddc9); --steady: var(--brand-steady-face, #0A2472); --open: var(--brand-open-face, #E56A50); --reach: var(--brand-reach-face, #EA9E04); --repair: var(--brand-repair-face, #C51F2D); --spicy: #141013;
  /* WCAG-safe text shades of the brand fills, for text on cream/panel */
  --steady-ink: var(--brand-steady-text, #0A2472); --open-ink: var(--brand-open-text, #B23A22); --reach-ink: var(--brand-reach-text, #8A5E00); --repair-ink: var(--brand-repair-text, #B01B28); --spicy-ink: #A5122B; --spicy-crimson: var(--brand-explicit-accent, #E01F3D);
  /* whisper tints (backgrounds) + tinted hairlines (borders) per path */
  --steady-tint: #EDF0F8; --open-tint: #FAEDE6; --reach-tint: #F8F0DC; --repair-tint: #F9EBEA; --spicy-tint: #F6E7E9;
  --steady-line: var(--brand-steady-accent, #CBD3E8); --open-line: var(--brand-open-accent, #F0CDC1); --reach-line: var(--brand-reach-accent, #EAD9AC); --repair-line: var(--brand-repair-accent, #EFC5C8); --spicy-line: #E3C2C7;
  /* signature ribbon + foil (flagship) */
  --ribbon: linear-gradient(90deg, var(--brand-steady-face, #0A2472) 0 22%, var(--brand-open-face, #E56A50) 22% 44%, var(--brand-reach-face, #EA9E04) 44% 66%, var(--brand-repair-face, #C51F2D) 66% 86%, var(--brand-explicit-face, #1A0000) 86% 100%);
  --mmg-foil: linear-gradient(115deg, #8C6F2F 0%, #C9A961 22%, #F1E3AE 42%,
                                      #C9A961 58%, #8C6F2F 80%, #E8D49A 100%);
  --foil-red: linear-gradient(115deg, #5E0E1D 0%, #B01B33 22%, #FF8296 42%,
                                      #C42441 58%, #5E0E1D 80%, #F2637A 100%);
  --maxw: 1140px; --r: 16px;
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; } /* hard guarantee: no horizontal scroll from 3D stages */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(120% 60% at 50% -10%, #fffef9, var(--bg) 60%);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--brand-site-focus, var(--steady)); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px rgba(10,36,114,.25); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; color: var(--ink); margin: 0; }
.eyebrow { font: 600 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .9rem; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(251,247,239,.86); backdrop-filter: blur(10px);
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--ribbon); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.brand-name { font-family: var(--serif); font-size: 1.02rem; }
/* THE MARK — THE KNOT: two monoline ribbons (navy Steady + terracotta Open)
   tied through one another, with a crimson bead at the crossing — two people,
   and the charged place where they meet. The strands are STROKED, so every
   recolour below sets `stroke`, never `fill` (the bead alone is filled).
   Inline SVG lives in the header/footer chrome partials and assets/favicon.svg;
   these rules only size and light it.
   (Mirrored in shared/header.html so pages without site.css match.) */
/* Brand mark = the owner's logo (assets/logo-mark.svg, a vector trace of their PNG),
   painted with a CSS mask so it takes the surrounding text colour: dark on cream
   pages, cream on the dark path scenes, from ONE file. Swap that file to swap the
   logo everywhere. */
.brand-mark { position: relative; display: block; width: 30px; height: 40px; flex: 0 0 auto;
  background: var(--brand-mark-ink, currentColor);
  -webkit-mask: url("/assets/logo-mark.png") center/contain no-repeat;
  mask: url("/assets/logo-mark.png") center/contain no-repeat; }
.brand-mark::before, .brand-mark::after { content: none; }
.brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand:hover .brand-mark svg { transform: scale(1.1); }
.brand-mark svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.brand-mark .mk-spark { transform-box: fill-box; transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.brand:hover .brand-mark .mk-spark { transform: scale(1.12); }
/* on any dark scene the ribbons lift to their lit shades so the mark never
   sinks into the background (the bead stays brand crimson) */
/* Dark scene pages: the mark takes the scene's light ink, not the body text colour. */
body[data-scene] .brand-mark { --brand-mark-ink: var(--scene-on, #FBF7EF); }

.site-footer .brand-mark .mk-face-a { stroke: #9FB4EF; }
.site-footer .brand-mark .mk-face-b { stroke: #F5A98F; }
/* entrance flourish — the two ribbons travel in and the bead ignites at the
   crossing: the brand story told by the mark itself, once, on load */
html.js .brand-mark .mk-face-a, html.js .brand-mark .mk-face-b,
html.js .brand-mark .mk-spark { transform-box: fill-box; transform-origin: center; }
html.js .brand-mark .mk-face-a { animation: mmgMeetA .9s cubic-bezier(.2,.7,.2,1) .1s backwards; }
html.js .brand-mark .mk-face-b { animation: mmgMeetB .9s cubic-bezier(.2,.7,.2,1) .1s backwards; }
html.js .brand-mark .mk-spark { animation: mmgMeetLens .6s cubic-bezier(.2,.7,.2,1) .75s backwards; }
@keyframes mmgMeetA { from { opacity: 0; transform: translateX(-6px); } }
@keyframes mmgMeetB { from { opacity: 0; transform: translateX(6px); } }
@keyframes mmgMeetLens { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  html.js .brand-mark .mk-face-a, html.js .brand-mark .mk-face-b,
  html.js .brand-mark .mk-spark { animation: none; }
}
.brand-name em { font-style: italic; }
nav#nav { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); }
nav#nav a { text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink-soft); }
nav#nav a:hover { color: var(--ink); }
.nav-cta { background: var(--ink); color: #fff !important; padding: .5rem 1rem; border-radius: 999px; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; font-size: 1.2rem; padding: .3rem .6rem; cursor: pointer; }

/* ---- layout ---- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) clamp(1.1rem, 4vw, 2.4rem); }
.section-head { max-width: 62ch; margin-bottom: 2.6rem; }
.section-head h2 { font-size: clamp(1.7rem, 4.4vw, 2.7rem); }
.section-head .sub { color: var(--ink-soft); margin: 1rem 0 0; font-size: 1.05rem; }

/* ---- hero ---- */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.4rem, 7vw, 5rem) clamp(1.1rem, 4vw, 2.4rem) clamp(1rem,3vw,2rem);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center;
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -.01em; margin: .2rem 0 1.2rem; }
.hero h1 em { font-style: italic; color: var(--steady); }
.lead { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink-soft); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1rem; }
.micro { font-size: .82rem; color: var(--ink-soft); letter-spacing: .02em; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-weight: 600; font-size: .95rem; padding: .8rem 1.5rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s; }
.btn.primary { background: var(--steady); color: #fff; box-shadow: 0 10px 24px -12px var(--steady); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn:hover { transform: translateY(-2px); }
.btn.ghost:hover { background: var(--ink); color: #fff; }

.hero-visual { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; align-items: end; }
.hero-visual .mmg-card { transform-origin: bottom center; }
.hero-visual .mmg-card:nth-child(1){ transform: rotate(-6deg) translateY(10px); }
.hero-visual .mmg-card:nth-child(2){ transform: rotate(-2deg); z-index:2; }
.hero-visual .mmg-card:nth-child(3){ transform: rotate(2deg); z-index:2; }
.hero-visual .mmg-card:nth-child(4){ transform: rotate(6deg) translateY(10px); }

/* ---- signal bar ---- */
.signal { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem,4vw,3rem);
  padding: 1.4rem 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--panel); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.signal b { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin-right: .3rem; letter-spacing: 0; }
.signal span:nth-child(1) b { color: var(--steady-ink); }
.signal span:nth-child(2) b { color: var(--open-ink); }
.signal span:nth-child(3) b { color: var(--reach-ink); }
.signal span:nth-child(4) b { color: var(--repair-ink); }
.signal .total b { color: var(--ink); }

/* ---- paths (five: four core + the sealed After Dark collection) ---- */
.path-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.path { position: relative; --path-tint: var(--steady-tint); --path-line: var(--steady-line);
  background: linear-gradient(180deg, var(--path-tint) 0%, var(--panel) 55%);
  border: 1px solid var(--path-line); border-top: 4px solid var(--path); border-radius: var(--r);
  padding: 1.6rem 1.4rem 1.5rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.path:hover { transform: translateY(-3px); border-color: var(--path);
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--path) 55%, transparent); }
.path .num { font: 600 .8rem/1 var(--sans); color: var(--path-ink, var(--path)); letter-spacing: .1em; }
/* The card medallion, as a REAL <img> rather than CSS art. The whole public site
   previously shipped zero <img> elements across 60 pages while 381 rendered
   medallions sat in assets/illustrations_web/ — so there was nothing for image
   search or Pinterest to index on a product whose appeal is visual. These are the
   actual printed emblems, so the alt text describes the card, not the decoration.
   Sized in CSS to match the width/height attributes on the tag so it reserves its
   own space and contributes no CLS. */
.path-medallion { display: block; width: 64px; height: 64px; margin: 0 0 .8rem;
  border-radius: 50%; object-fit: cover;
  background: color-mix(in srgb, var(--path) 10%, transparent); }
.path--dark .path-medallion { background: rgba(224,31,61,.12); }
.path h3 { font-size: 1.3rem; margin: .5rem 0 .3rem; color: var(--path-ink, var(--path)); }
.path strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1rem; margin-bottom: .5rem; }
.path p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
/* a first-person line that makes each path human */
.path .path-quote { margin-top: .8rem; font-family: var(--serif); font-style: italic;
  font-size: .9rem; line-height: 1.5;
  color: color-mix(in srgb, var(--path-ink, var(--path)) 74%, var(--ink)); }
/* the sealed fifth tile — After Dark */
.path--dark { background: linear-gradient(180deg, #2E1019, #170A0E 60%);
  border-color: #4A2630; color: #EAD9DD; }
.path--dark strong { color: #F4ECD9; }
.path--dark p { color: #C9AEB4; }
.path--dark .path-quote { color: #E3AEB8; }
.path--dark:hover { border-color: var(--brand-explicit-accent, #E01F3D); }
.path-levels { display: grid; gap: .4rem; justify-items: start; margin-top: .8rem; }
/* heat-level chips (used on dark surfaces: path tile, spectrum, editions, AD section) */
.lvl { display: inline-flex; align-items: center; gap: .45rem; font: 600 .64rem/1.35 var(--sans);
  letter-spacing: .09em; text-transform: uppercase; border: 1px solid; border-radius: 999px;
  padding: .32rem .65rem; text-align: left; }
.lvl::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--lvl-dot, var(--brand-spicy-face, #AE0000)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.lvl--spicy { --lvl-dot: var(--brand-spicy-face, #AE0000); color: #F2B8C6; border-color: rgba(242,184,198,.4); }
.lvl--explicit { --lvl-dot: var(--brand-explicit-face, #1A0000); color: #FF8A9C; border-color: rgba(255,138,156,.4); }
.lvl--explicit::before { box-shadow: 0 0 0 1.5px var(--brand-explicit-accent, #E01F3D); }

/* ---- quote ---- */
.quote { text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 24ch; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.3; color: var(--steady); }
.quote--dusk blockquote { max-width: 30ch; color: var(--brand-spicy-face, #AE0000); }
.quote--dusk blockquote span { display: block; margin-top: 1rem; font: 600 .78rem/1.5 var(--sans);
  font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
/* short emotional asides woven through the sections */
.whisper { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin: 1.2rem 0 0; }
.hero-whisper { font-family: var(--serif); font-style: italic; font-size: 1.02rem;
  color: var(--ink-soft); margin: .9rem 0 0; }

/* ---- product ---- */
.product, .digital { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,5vw,3.5rem); align-items: center; }
.product { position: relative; }
.product::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, #F3EAD8 18%, #EFE4CD 82%, var(--bg) 100%);
  box-shadow: 0 0 0 100vmax #EFE4CD; clip-path: inset(0 -100vmax); }
.product h2, .digital h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
/* PINNED PRODUCT STAGE.
   The premium "scrollytelling" feel on sites like oryzo.ai comes from one
   structural move, not from WebGL: a stage that HOLDS POSITION while the copy
   scrolls past it, so the object reads as a thing you are being shown rather
   than an image sitting in a column. Here that is `position: sticky` on the
   grid's second child — zero new bytes, no library, no extra request, and the
   box is already CSS-3D. (oryzo pays 13MB and a ~40s preloader for its version;
   this site cannot afford either, and does not need to.)
   Desktop only: in one column there is nothing to scroll past, and pinning would
   just eat the viewport on a phone. `align-items:start` is required — a centred
   grid item has no free travel to stick within. */
@media (min-width: 900px) {
  .product { align-items: start; }
  .product .product-stage { position: sticky; top: clamp(84px, 14vh, 150px); }
}
.specs { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.specs li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.specs li::before { content: "◆"; position: absolute; left: 0; color: var(--steady); font-size: .7rem; top: .35rem; }
.product-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.product-cards .mmg-card:nth-child(2){ transform: translateY(24px); }

/* ---- digital demo ---- */
.app-demo { max-width: 320px; width: 100%; margin: 0 auto; }
.app-demo .mmg-card { box-shadow: 0 26px 60px -26px rgba(20,16,10,.55); }
.app-demo .app-controls { display: flex; gap: .6rem; margin-top: 1rem; justify-content: center; }
.app-demo .app-controls button { border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; font-size: .85rem; cursor: pointer; }
.app-demo .app-controls .next { background: var(--steady); color: #fff; border-color: var(--steady); }

/* ---- why ---- */
.why { text-align: center; }
.why h2 { font-size: clamp(1.6rem,4vw,2.4rem); margin-bottom: 1.8rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 780px; margin: 0 auto; text-align: left; }
.two-col p { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r); padding: 1.4rem; margin: 0; color: var(--ink-soft); }
.two-col p:nth-child(1) { border-left-color: var(--open); background: linear-gradient(90deg, var(--open-tint), var(--panel) 40%); }
.two-col p:nth-child(2) { border-left-color: var(--repair); background: linear-gradient(90deg, var(--repair-tint), var(--panel) 40%); }
.two-col p:nth-child(1) b { color: var(--open-ink); }
.two-col p:nth-child(2) b { color: var(--repair-ink); }

/* ---- pricing ---- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 1000px) { .price-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }
.price { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.8rem 1.5rem; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease; }
.price:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(20,16,10,.4); }
.price.featured { border: 1.5px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--mmg-foil) border-box;
  box-shadow: 0 24px 50px -28px rgba(10,36,114,.45); transform: translateY(-6px); }
.price.featured:hover { transform: translateY(-9px); }
.price .label { font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.price.featured .label { color: #8C6F2F; }
.price h3 { font-size: 1.25rem; margin: .6rem 0 .2rem; }
.price .amount { font-family: var(--serif); font-size: 2.2rem; color: var(--ink); }
.price.featured .amount { color: var(--steady-ink); }
.price p { color: var(--ink-soft); font-size: .92rem; flex: 1; margin: .6rem 0 1.2rem; }
/* AUTO-EDITIONS: "from" tag + preview link + multiple tier buttons per edition tile */
.price .amount .from { font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-left: .45rem; vertical-align: middle; }
.price .edition-preview { white-space: nowrap; font-weight: 600; text-decoration: underline; color: var(--steady); }
.price .btn + .btn { margin-top: .55rem; }
.center { text-align: center; }
.buy .micro { margin-top: 1.6rem; }

/* ---- faq ---- */
.faq-list { display: grid; gap: .7rem; max-width: 780px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 1.25rem; transition: border-color .25s ease, box-shadow .25s ease; }
.faq details:hover { border-color: color-mix(in srgb, var(--steady) 35%, var(--line)); }
.faq details[open] { border-color: color-mix(in srgb, var(--steady) 45%, var(--line));
  box-shadow: 0 14px 30px -24px rgba(10,36,114,.45); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; font-weight: 600; padding: 1rem 0; font-family: var(--serif);
  font-size: 1.05rem; list-style: none; transition: color .2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--steady); }
.faq summary::after { content: "+"; flex: 0 0 auto; color: var(--steady); font-size: 1.35rem;
  font-family: var(--sans); font-weight: 400; line-height: 1; width: 1em; text-align: center;
  transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { overflow: hidden; }
.faq .faq-a p { margin: 0 0 1.1rem; color: var(--ink-soft); line-height: 1.7; }
.faq .faq-a p + p { margin-top: -.35rem; }
.faq details[open] .faq-a p { animation: mmgFaqIn .45s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes mmgFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faq details[open] .faq-a p { animation: none; }
}

/* ---- safety ---- */
.safety { max-width: 780px; text-align: center; }
.safety p:last-child { color: var(--ink-soft); }

/* ---- footer ----
   Deep-ink premium footer. The canonical rules ship INSIDE shared/footer.html
   (a <style> block travels with the injected chrome so deck/sampler — which
   never load site.css — render the same finished footer). This block mirrors
   it for the site pages; keep both in sync when editing. */
.site-footer { position: relative; margin-top: clamp(2.5rem, 7vw, 5rem); padding: 0;
  background: radial-gradient(120% 90% at 50% -20%, #2A241C 0%, #1B1712 46%, #131009 100%);
  color: #F4ECD9; text-align: left; font-family: var(--sans); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-steady-face, #0A2472) 0 22%, var(--brand-open-face, #E56A50) 22% 44%, var(--brand-reach-face, #EA9E04) 44% 66%, var(--brand-repair-face, #C51F2D) 66% 86%, var(--brand-explicit-accent, #E01F3D) 86% 100%); }
.site-footer .foot-wrap { max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.2rem) clamp(1.1rem, 4vw, 2.4rem) 2rem; }
.site-footer .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; }
.foot-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.6rem, 5vw, 4rem);
  align-items: start; padding-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.foot-brand .brand { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem; text-decoration: none; color: inherit; }
.foot-brand .brand-mark { width: 40px; height: 40px; }
.foot-brand .brand-name { font-family: var(--serif); font-weight: 600;
  font-size: 1.45rem; letter-spacing: .02em; color: #F4ECD9; }
.foot-tag { margin: 0 0 .9rem; font-family: var(--serif); font-style: italic;
  font-size: 1.06rem; color: #D8CFC0; }
.foot-ribbon { display: block; width: 52px; height: 4px; border-radius: 2px; margin: 0 0 1rem;
  background: linear-gradient(90deg, var(--brand-steady-face, #0A2472) 0 20%, var(--brand-open-face, #E56A50) 20% 40%, var(--brand-reach-face, #EA9E04) 40% 60%, var(--brand-repair-face, #C51F2D) 60% 80%, var(--brand-explicit-accent, #E01F3D) 80% 100%); }
.foot-blurb { margin: 0; max-width: 44ch; font-size: .9rem; line-height: 1.7; color: #B9AE9B; }
.foot-news h3 { margin: 0 0 .45rem; font-family: var(--serif); font-weight: 600;
  font-size: 1.15rem; color: #F4ECD9; }
.foot-news p { margin: 0 0 1rem; font-size: .88rem; line-height: 1.65; color: #B9AE9B; max-width: 42ch; }
.foot-news form { display: flex; gap: .5rem; max-width: 420px; }
.foot-news input { flex: 1; min-width: 0; padding: .72rem 1rem; font: 500 .9rem/1.4 var(--sans);
  color: #F4ECD9; background: rgba(251,247,239,.06); border: 1px solid rgba(244,236,217,.28);
  border-radius: 999px; transition: border-color .2s ease, background .2s ease; }
.foot-news input::placeholder { color: #93887A; }
/* `outline: none` left this input with no focus indicator at all, while the
   waitlist input two elements away has a proper one. The footer sits on a dark
   gradient, so a cream outline reads at ~13.8:1 there. */
.foot-news input:focus { border-color: #F4ECD9; background: rgba(251,247,239,.1); }
.foot-news input:focus-visible { outline: 2px solid #F4ECD9; outline-offset: 2px; }
.foot-news button { flex: 0 0 auto; padding: .72rem 1.35rem; font: 600 .88rem/1 var(--sans);
  color: #17130D; background: #F4ECD9; border: 1.5px solid #F4ECD9; border-radius: 999px;
  cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease; }
.foot-news button:hover { background: var(--brand-explicit-accent, #E01F3D); border-color: var(--brand-explicit-accent, #E01F3D); color: #fff; transform: translateY(-1px); }
.foot-news button:active { transform: translateY(0) scale(.97); }
.foot-news-note { margin-top: .6rem !important; font-size: .74rem !important; letter-spacing: .04em; color: #93887A !important; }
.foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 4vw, 3rem);
  padding: clamp(1.6rem, 4vw, 2.4rem) 0; border-top: 1px solid rgba(244,236,217,.13); }
.foot-col { display: grid; justify-items: start; align-content: start; }
.foot-col h3 { margin: 0 0 .9rem; font: 700 .68rem/1 var(--sans); letter-spacing: .2em;
  text-transform: uppercase; color: #93887A; }
.foot-col a { display: inline-flex; align-items: center; gap: .55rem; padding: .34rem 0;
  font-size: .92rem; color: #CDC3B2; text-decoration: none;
  transition: color .18s ease, transform .18s ease; }
.foot-col a:hover, .foot-col a:focus-visible { color: #FBF7EF; transform: translateX(3px); }
.foot-col a:focus-visible { outline: 2px solid #F4ECD9; outline-offset: 3px; border-radius: 4px; }
.foot-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pd, #F4ECD9); box-shadow: 0 0 0 1px rgba(251,247,239,.18);
  transition: box-shadow .18s ease; }
.foot-col a:hover .foot-dot { box-shadow: 0 0 0 2px rgba(251,247,239,.32), 0 0 10px var(--pd, #F4ECD9); }
.foot-18 { display: inline-block; font: 700 .58rem/1 var(--sans); letter-spacing: .1em;
  color: #FF5A70; border: 1px solid var(--brand-explicit-accent, #E01F3D); border-radius: 999px; padding: .22rem .45rem;
  background: rgba(224,31,61,.12); }
.foot-base { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; align-items: flex-start;
  justify-content: space-between; padding-top: 1.6rem; border-top: 1px solid rgba(244,236,217,.13); }
.site-footer .fineprint { margin: 0; max-width: 62ch; font-size: .78rem; line-height: 1.7; color: #93887A; }
.foot-legal { display: grid; gap: .55rem; justify-items: start; }
.foot-adult { display: inline-flex; align-items: center; gap: .6rem; margin: 0;
  font-size: .8rem; color: #CDC3B2; }
.foot-adult b { display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1.5px solid var(--brand-explicit-accent, #E01F3D); color: #FF5A70;
  font: 700 .62rem/1 var(--sans); letter-spacing: .04em; background: rgba(224,31,61,.1); }
.foot-copy { margin: 0; font-size: .76rem; letter-spacing: .06em; color: #93887A; }
.foot-copy b { color: #CDC3B2; font-weight: 600; }
@media (max-width: 860px) {
  .foot-hero { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-base { flex-direction: column; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-news form { flex-direction: column; }
  .foot-news button { width: 100%; }
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .path-grid { grid-template-columns: 1fr 1fr; }
  .path--dark { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  nav#nav { position: fixed; inset: 56px 0 auto; flex-direction: column; align-items: stretch;
    background: var(--panel); border-bottom: 1px solid var(--line); padding: 1rem 1.4rem; gap: .2rem;
    transform: translateY(-140%); visibility: hidden;
    transition: transform .25s ease, visibility .25s ease; }
  nav#nav.open { transform: translateY(0); visibility: visible; }
  nav#nav a { padding: .7rem 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-cta { text-align: center; margin-top: .5rem; border-bottom: none !important; }
  .menu-toggle { display: block; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { width: min(100%, 420px); max-width: none; justify-self: center; margin: 0; }
  .product, .digital { grid-template-columns: 1fr; }
  .digital .app-demo { order: 2; }
  .two-col { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .price.featured { transform: none; }
}
@media (max-width: 480px) {
  .path-grid { grid-template-columns: 1fr; }
  .signal { gap: .8rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none !important; } }

/* ============================================================================
   LIVING SCENES — the whole page re-lights to the category in view, while the
   card stays the brightest, sharpest object (spotlight glow + halo + keyline).
   ============================================================================ */
@property --scene-bg   { syntax: '<color>'; inherits: true; initial-value: #FBF7EF; }
@property --scene-glow { syntax: '<color>'; inherits: true; initial-value: #FFFEF9; }
body {
  --scene-bg: #FBF7EF; --scene-glow: #FFFEF9;
  --scene-on: var(--ink); --scene-on-soft: var(--ink-soft); --scene-halo: transparent;
  --scene-accent: var(--steady);
  background-color: var(--scene-bg);
  background-image: radial-gradient(90% 60% at 50% 32%, var(--scene-glow), var(--scene-bg) 72%);
  transition: --scene-bg .45s ease, --scene-glow .45s ease;
}
/* one distinct scene per category: STEADY navy · OPEN terracotta · REACH amber ·
   REPAIR red · AFTER DARK black + bright red (its XXX heat level keeps the
   pure-black `explicit` scene for the per-path pages) */
body[data-scene="steady"] { --scene-bg:#0B0C3A; --scene-glow:#1A1C86; --scene-halo:rgba(31,34,196,.40); --scene-on:#EEEFFB; --scene-on-soft:#B9BCE8; --scene-accent:#8E90E8; }
body[data-scene="open"],
body[data-scene="warm"]   { --scene-bg:#08221D; --scene-glow:#1F5A4E; --scene-halo:rgba(62,142,126,.40); --scene-on:#EDF6F3; --scene-on-soft:#A9D3C8; --scene-accent:#7FC5B4; }
body[data-scene="reach"]  { --scene-bg:#38260A; --scene-glow:#8A5A00; --scene-halo:rgba(255,165,0,.38);  --scene-on:#FDF3E2; --scene-on-soft:#E7C892; --scene-accent:#FFC766; }
body[data-scene="repair"] { --scene-bg:#232300; --scene-glow:#6E6E00; --scene-halo:rgba(168,168,0,.38);  --scene-on:#F6F6E6; --scene-on-soft:#D7D79A; --scene-accent:#D6D64A; }
/* After Dark scene deliberately unchanged in palette v6. */
body[data-scene="afterdark"] { --scene-bg:#120103; --scene-glow:#40000C; --scene-halo:rgba(224,31,61,.40); --scene-on:#F4ECD9; --scene-on-soft:#CFA0A8; --scene-accent:#FF5A70; }
body[data-scene="spicy"]  { --scene-bg:#2A0C14; --scene-glow:#5A1D2A; --scene-halo:rgba(224,82,107,.30); --scene-on:#F9E9EC; --scene-on-soft:#D9B3BC; --scene-accent:#FF8A9C; }
body[data-scene="explicit"] { --scene-bg:#0D0000; --scene-glow:#3A0008; --scene-halo:rgba(224,31,61,.34); --scene-on:#F4ECD9; --scene-on-soft:#C9A0A6; --scene-accent:#FF5A70; }

/* card legibility inside a scene — the card is ALWAYS the brightest object:
   ivory keyline + spotlight halo on every lit stage (table, reel, showcases) */
body[data-scene] .table-stage .mmg-card,
body[data-scene] .table-stage .mmg-back,
body[data-scene] .scene-lit .mmg-card,
body[data-scene] .scene-lit .mmg-back {
  box-shadow: 0 0 0 1.5px rgba(244,236,217,.38), 0 34px 80px -28px rgba(0,0,0,.75),
              0 0 150px -30px var(--scene-halo); transition: box-shadow .45s ease;
}
body[data-scene="spicy"] .mmg-card--spicy, body[data-scene="spicy"] .mmg-back--spicy {
  box-shadow: 0 0 0 1.5px rgba(244,236,217,.35), 0 34px 80px -28px rgba(0,0,0,.85),
              0 0 150px -25px rgba(224,31,61,.45);
}
/* chrome + section text adapt while a scene is active */
body[data-scene] .site-header { background: color-mix(in srgb, var(--scene-bg) 86%, transparent); }
body[data-scene] .site-header nav#nav a { color: var(--scene-on-soft); }
body[data-scene] .site-header nav#nav a:hover, body[data-scene] .brand-name { color: var(--scene-on); }
/* The mobile nav is an opaque cream --panel sheet, but the rule above still
   paints its links in the scene colour, which is designed for a dark ground.
   On the homepage a scene is active at every scroll position, so every nav item
   was pale lavender on cream — measured 1.78:1 at 390px, against a 4.5 minimum.
   Path pages escaped it because data-scene-lock also darkens --panel. Give the
   open panel the scene's own background so the link colour lands on the surface
   it was built for. */
@media (max-width: 860px) {
  body[data-scene] .site-header nav#nav {
    background: var(--scene-bg);
    border-bottom-color: color-mix(in srgb, var(--scene-on) 24%, transparent); }
  body[data-scene] .site-header nav#nav a {
    border-bottom-color: color-mix(in srgb, var(--scene-on) 18%, transparent); }
}
[data-scene-section] { color: var(--scene-on); transition: color .45s ease; }
[data-scene-section] h1, [data-scene-section] h2,
[data-scene-section] h3, [data-scene-section] blockquote { color: inherit; }
[data-scene-section] .sub, [data-scene-section] .micro, [data-scene-section] .eyebrow,
[data-scene-section] .lead, [data-scene-section] .show-job { color: var(--scene-on-soft); }
/* hero copy stays legible while the reel re-lights the room */
.hero h1 em { color: var(--scene-accent); transition: color .45s ease; }
body[data-scene] .hero .btn.ghost { color: var(--scene-on);
  border-color: color-mix(in srgb, var(--scene-on) 72%, transparent); }
body[data-scene] .hero .btn.ghost:hover { background: var(--scene-on); color: var(--scene-bg); }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ---- The Table (interactive flip-draw hero) ---- */
.table-stage { position: relative; }
.table-fan { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .7rem; align-items: end; }
.flip { position: relative; perspective: 1100px; border: 0; background: none; padding: 0; cursor: pointer; transform-origin: bottom center; transition: transform .25s ease; }
.flip:nth-child(1){ transform: rotate(-7deg) translateY(12px); }
.flip:nth-child(2){ transform: rotate(-3deg) translateY(3px); }
.flip:nth-child(3){ transform: rotate(0deg); }
.flip:nth-child(4){ transform: rotate(3deg) translateY(3px); }
.flip:nth-child(5){ transform: rotate(7deg) translateY(12px); }
.flip:hover, .flip:focus-visible { transform: translateY(-10px); z-index: 3; }
.flip.is-flipped { transform: none; z-index: 4; scale: 1.06; }
.flip-inner { display: grid; aspect-ratio: 2.75 / 4.75; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face--front { transform: rotateY(180deg); }
.flip-face { min-height: 0; }
.flip-face .mmg-card, .flip-face .mmg-back { width: 100%; height: 100%; }
.table-hint { min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } .flip:hover, .flip:focus-visible { transform: none; } }

/* ---- After Dark teaser section ----
   NOTE: scoped to .section.afterdark — the editions tile also carries the
   `afterdark` class, and the unscoped ::before (with its 100vmax shadow band)
   used to attach to that tile too, blacking out sibling tiles on hover. */
.section.afterdark { position: relative; text-align: center; }
.section.afterdark::before { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, var(--bg) 0%, #171114 7%, #0F0B0D 50%, #171114 93%, var(--bg) 100%);
  box-shadow: 0 0 0 100vmax #0F0B0D; clip-path: inset(7% -100vmax); }
.section.afterdark h2 { color: #F4ECD9; }
.section.afterdark .sub { color: #C9B8AE; }
.section.afterdark .ad-eyebrow { color: #FF5A70; }
/* the two heat levels, explained side by side */
.ad-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  max-width: 900px; margin: 0 auto 2.4rem; text-align: left; }
.ad-level { border: 1px solid; border-radius: var(--r); padding: 1.6rem 1.5rem;
  transition: transform .2s ease, box-shadow .25s ease; }
.ad-level:hover { transform: translateY(-3px); }
.ad-level--spicy { background: linear-gradient(170deg, #2E1019, #1C070D);
  border-color: #5A2733; }
.ad-level--explicit { background: linear-gradient(170deg, #1F0004, #0D0000);
  border-color: #4A0A14; }
.ad-level--spicy:hover { box-shadow: 0 20px 44px -26px rgba(224,82,107,.55); }
.ad-level--explicit:hover { box-shadow: 0 20px 44px -26px rgba(224,31,61,.55); }
.ad-level__tag { display: inline-block; font: 700 .62rem/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .7rem; }
.ad-level--spicy .ad-level__tag { color: #F2B8C6; }
.ad-level--explicit .ad-level__tag { color: #FF5A70; }
/* !important: these dark cards must stay legible even before the scene-section
   legibility overrides (which also use !important) kick in */
.ad-level h3 { color: #F4ECD9 !important; font-size: 1.25rem; margin-bottom: .55rem; }
.ad-level p { margin: 0; font-size: .92rem; }
.ad-level--spicy p { color: #C9AEB4 !important; }
.ad-level--explicit p { color: #C9A0A6 !important; }
.ad-level__quote { margin-top: .9rem !important; font-family: var(--serif); font-style: italic; }
.ad-level--spicy .ad-level__quote { color: #E3AEB8 !important; }
.ad-level--explicit .ad-level__quote { color: #E8A7B0 !important; }
.ad-consent { max-width: 64ch; margin: .4rem auto 1rem; font-size: .9rem;
  line-height: 1.65; color: #C9B8AE !important; }
@media (max-width: 700px) { .ad-levels { grid-template-columns: 1fr; } }
.ad-row { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; max-width: 900px; margin: 0 auto 2.2rem; align-items: end; }
.ad-row .mmg-card, .ad-row .mmg-back { transition: transform .3s ease; }
.ad-row > :nth-child(odd) { transform: rotate(-2deg); }
.ad-row > :nth-child(even) { transform: rotate(2deg) translateY(8px); }
.ad-row > :hover { transform: translateY(-6px); }
.ad-foot { display: grid; gap: .5rem; justify-items: center; }
.ad-sealed { color:#C9B8AE; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; }
.ad-sealed b { color:#F4ECD9; font-family: var(--serif); font-size:1.15rem; }
.btn.spicy { background: var(--spicy-crimson); color:#fff; box-shadow: 0 10px 24px -10px rgba(224,31,61,.55); }
.btn.spicy:hover { background:#C4102E; }
.section.afterdark .micro { color:#9C8B85; }
@media (max-width: 860px){ .ad-row { grid-template-columns: repeat(2,1fr); } .ad-row > :nth-child(5){ display:none; } }

/* ---- editions: After Dark add-on tile ---- */
.price.afterdark { border: 1.5px solid transparent; color: #F4ECD9;
  background: linear-gradient(#171114, #171114) padding-box, var(--foil-red, var(--ribbon)) border-box;
  box-shadow: 0 24px 50px -28px rgba(224,31,61,.35); }
.price.afterdark .label { color: #FF5A70; }
/* h1–h3 default to var(--ink): pin the heading light so "After Dark" is
   readable on the near-black tile */
.price.afterdark h3 { color: #F4ECD9; }
.price.afterdark .amount { color: #F4ECD9; }
.price.afterdark .amount .from { color: #C9B8AE; }
.price.afterdark .amount::before { content:"+ "; font-size:.6em; vertical-align:.3em; }
.price.afterdark p { color: #C9B8AE; }
.price.afterdark .edition-preview { color: #FF8A9C; }
/* the two heat levels listed inside the add-on tile */
.price-levels { display: grid; gap: .4rem; justify-items: start; margin: 0 0 1.1rem; }

/* ============================================================================
   V6 ELEVATION — scroll reveal, table polish, spectrum, flagship stage, funnel
   ============================================================================ */

/* ---- scroll reveal (JS adds .reveal, observer adds .is-in) ---- */
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.is-in { opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}
/* No IntersectionObserver support (site.js safety net): drop the hiding
   styles outright rather than ever firing every reveal animation at once. */
html.reveal-disabled .reveal { opacity: 1; transform: none; transition: none; }

/* ---- micro-interactions ---- */
.btn:active { transform: translateY(0) scale(.97); }
nav#nav a:not(.nav-cta) { position: relative; }
nav#nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%;
  bottom: -4px; height: 2px; background: var(--ribbon); border-radius: 2px;
  transition: right .28s ease; }
nav#nav a:not(.nav-cta):hover::after, nav#nav a:not(.nav-cta):focus-visible::after { right: 0; }
@keyframes mmgRibbon { to { background-position: 200% 0; } }
.site-header::after { background-size: 200% 100%; animation: mmgRibbon 22s linear infinite; }
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--steady); }
.signal .addons b { color: var(--spicy-crimson); }
/* animated primary CTA — a slow, quiet sheen sweeps the pill */
.btn.primary, .btn.spicy { position: relative; overflow: hidden; }
.btn.primary::after, .btn.spicy::after { content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.2) 50%, transparent 66%);
  background-size: 260% 100%; background-position: 130% 0;
  animation: mmgSheen 7s ease-in-out infinite; }
/* pointer-tracking glow on card-like tiles (site.js sets --mx / --my) */
html.js .glow-track { position: relative; }
html.js .glow-track::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.15), transparent 65%); }
html.js .glow-track:hover::after { opacity: 1; }
/* gentle press states so every tap feels acknowledged */
.spec-tile:active, .path:active, .ladder-step:active, .ad-level:active { transform: translateY(-1px) scale(.995); }

/* ---- hero table: idle float, shimmer sweep, softer flip, press state ---- */
.flip-face { position: relative; }
@keyframes mmgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mmgSheen { 0%, 58% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.flip:not(.is-flipped) .flip-face--back .mmg-back { animation: mmgFloat 6.5s ease-in-out infinite; }
.flip .flip-face--back::after { content: ""; position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(105deg, transparent 30%, rgba(255,244,214,.16) 46%,
              rgba(255,244,214,.03) 54%, transparent 70%);
  background-size: 260% 100%; background-position: 130% 0;
  animation: mmgSheen 8s ease-in-out infinite; pointer-events: none; }
.flip.is-flipped .flip-face--back::after { display: none; }
.flip:nth-child(2) .flip-face--back .mmg-back, .flip:nth-child(2) .flip-face--back::after { animation-delay: -1.3s; }
.flip:nth-child(3) .flip-face--back .mmg-back, .flip:nth-child(3) .flip-face--back::after { animation-delay: -2.6s; }
.flip:nth-child(4) .flip-face--back .mmg-back, .flip:nth-child(4) .flip-face--back::after { animation-delay: -3.9s; }
.flip:nth-child(5) .flip-face--back .mmg-back, .flip:nth-child(5) .flip-face--back::after { animation-delay: -5.2s; }
.flip-inner { transition: transform .72s cubic-bezier(.3, 1.15, .35, 1); }
.flip:active { transform: translateY(2px) scale(.985); }
.table-shuffle { margin: 1.2rem auto 0; display: flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, transparent);
  color: var(--ink-soft); border-radius: 999px; padding: .5rem 1.15rem;
  font: 600 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.table-shuffle:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.table-shuffle[hidden] { display: none; }
body[data-scene] .table-shuffle { color: var(--scene-on-soft); background: transparent;
  border-color: color-mix(in srgb, var(--scene-on) 35%, transparent); }
body[data-scene] .table-shuffle:hover { color: var(--scene-on); border-color: var(--scene-on); }

/* ---- spectrum: the five lights ---- */
.spectrum-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.spec-tile { position: relative; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--ink); padding: 1.2rem 1rem 1.3rem; text-align: center;
  cursor: pointer; font: inherit; line-height: 1.5; display: grid; gap: .55rem;
  justify-items: center; align-content: start;
  transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease; }
.spec-tile:hover, .spec-tile.is-active { transform: translateY(-4px);
  border-color: var(--tile-ink, var(--ink));
  box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--tile-ink, var(--ink)) 60%, transparent); }
.spec-tile.is-active { outline: 2px solid var(--tile-ink, var(--ink)); outline-offset: 3px; }
.spec-card { display: block; width: min(112px, 58%);
  filter: drop-shadow(0 16px 22px rgba(20,16,10,.3)); transition: transform .3s ease; }
.spec-tile:hover .spec-card, .spec-tile.is-active .spec-card { transform: translateY(-4px) rotate(-2.5deg); }
.spec-chip { font: 700 .6rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: var(--tile-ink, var(--ink)); border: 1px solid currentColor; border-radius: 999px;
  padding: .32rem .6rem; opacity: .92; }
.spec-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.08rem; }
.spec-q { display: block; font-size: .84rem; color: var(--ink-soft); }
.spec-tile--dark { background: linear-gradient(165deg, #241017, #170A0E); border-color: #4A2630; color: #F4ECD9; }
.spec-tile--dark .spec-q { color: #C9AEB4; }
/* After Dark tile shows BOTH heat-level backs — one drawer, two levels */
.spec-card--duo { display: flex; justify-content: center; align-items: flex-end;
  width: min(150px, 76%); }
.spec-card--duo .mmg-back { width: 56%; flex: 0 0 auto; }
.spec-card--duo .mmg-back:first-child { transform: rotate(-7deg) translate(7%, 3%); z-index: 1; }
.spec-card--duo .mmg-back:last-child { transform: rotate(7deg) translate(-7%, 0); }
.spec-tile:hover .spec-card--duo .mmg-back:first-child,
.spec-tile.is-active .spec-card--duo .mmg-back:first-child { transform: rotate(-9deg) translate(3%, 0); }
.spec-tile:hover .spec-card--duo .mmg-back:last-child,
.spec-tile.is-active .spec-card--duo .mmg-back:last-child { transform: rotate(9deg) translate(-3%, -3%); }
.spec-card--duo .mmg-back { transition: transform .3s ease; }
.spec-levels { display: grid; gap: .35rem; justify-items: center; margin-top: .1rem; }
.spectrum .mmg-back--explicit { background:
    radial-gradient(120% 90% at 50% 0%, rgba(224,31,61,.22), transparent 60%),
    linear-gradient(160deg, #2A0004, #0D0000); }
.spectrum .mmg-back--explicit::after { border-color: rgba(224,31,61,.55); box-shadow: 0 0 0 4px rgba(224,31,61,.15); }
.spectrum .mmg-back--explicit .mmg-back__path { color: #FF5A70; }
.seal { position: absolute; top: .65rem; right: .65rem; font: 700 .58rem/1 var(--sans);
  letter-spacing: .12em; color: #FF5A70; border: 1px solid var(--brand-explicit-accent, #E01F3D); border-radius: 999px;
  padding: .3rem .5rem; background: rgba(224,31,61,.1); }
.spectrum > .micro { margin-top: 1.4rem; text-align: center; display: block; }

/* ---- flagship stage: MMGBox tuck-box + scroll parallax + pointer tilt ---- */
.product-stage { display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(1rem, 3vw, 2rem); align-items: center; perspective: 1400px; }
.flagship-box { width: 100%; display: grid; justify-items: center; perspective: 1300px; }
.product .physical-scene { touch-action: pan-y; }
.product .physical-scene > .mmg-card--physical,
.product .physical-scene > .mmg-back {
  transform: rotateX(calc(6deg + var(--ry, 0deg) - var(--p, 0) * 4deg))
             rotateY(var(--rx, 0deg)) rotateZ(-2.5deg)
             translateY(calc(var(--p, 0) * -12px));
  transition: transform .25s ease-out; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .flip .flip-face--back::after,
  .flip:not(.is-flipped) .flip-face--back .mmg-back,
  .btn.primary::after, .btn.spicy::after,
  .site-header::after { animation: none; }
  .product .physical-scene > .mmg-card--physical,
  .product .physical-scene > .mmg-back { transform: none; }
}

/* ---- funnel: ladder grid, trust cues ---- */
.price-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem .8rem; padding: 0; margin: 2.2rem auto 0; max-width: 900px; }
.trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem;
  color: var(--ink-soft); border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: .48rem .95rem; }
.trust li::before { content: "✓"; color: var(--steady); font-weight: 700; }
/* (the former "Vault — XXX" teaser tile is folded into the After Dark
   add-on tile — XXX is a heat level inside After Dark, never a sibling) */

@media (max-width: 560px) {
  .product-stage { grid-template-columns: 1fr; }
}

/* ============================================================================
   V7 — HERO AUTOPLAY REEL. Cycles all five categories: featured card, scene
   transition, progress dots. Pauses on hover/focus; manual under reduced motion.
   ============================================================================ */
.table-stage { display: grid; gap: 1.15rem; }
.reel { display: grid; justify-items: center; gap: .75rem; }
.reel-frame { width: min(58%, 248px); perspective: 1200px; }
.reel-card { display: grid; min-height: 1px; }
.reel-card > * { grid-area: 1 / 1;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .42s ease; }
.reel-card > .reel-enter { transform: rotateY(78deg) scale(.94); opacity: 0; }
.reel-card > .reel-exit  { transform: rotateY(-78deg) scale(.94); opacity: 0; pointer-events: none; }
.reel-controls { display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap; }
.reel-dots { display: flex; justify-content: center; gap: .15rem; }
.reel-dot { width: 46px; height: 26px; padding: 8px 5px; margin: 0; background: none;
  border: 0; cursor: pointer; color: var(--dot, var(--ink)); }
body[data-scene] .reel-dot { color: var(--dot-lit, var(--dot, var(--ink))); }
.reel-dot b { display: block; position: relative; width: 100%; height: 100%;
  border-radius: 999px; overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 65%, transparent);
  background: color-mix(in srgb, currentColor 16%, transparent);
  transition: border-color .3s ease; }
.reel-dot i { position: absolute; inset: 0; display: block; background: currentColor;
  border-radius: inherit; transform: scaleX(0); transform-origin: left center; }
.reel-dot.is-on i { animation: mmgReelFill var(--reel-ms, 3800ms) linear forwards; }
.reel.is-paused .reel-dot i, .reel.is-stopped .reel-dot i { animation-play-state: paused; }
.reel-dot:hover b { border-color: currentColor; }
@keyframes mmgReelFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* persistent, keyboard-focusable play/pause control for the autoplay reel */
.reel-pause { display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  border: 1px solid color-mix(in srgb, var(--ink, #24201a) 30%, transparent);
  background: color-mix(in srgb, var(--panel, #fff) 70%, transparent);
  color: var(--ink, #24201a); border-radius: 999px; padding: .32rem .75rem .32rem .6rem;
  font: 600 .68rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
body[data-scene] .reel-pause { color: var(--scene-on, var(--ink)); border-color: color-mix(in srgb, var(--scene-on, var(--ink)) 40%, transparent); }
.reel-pause:hover, .reel-pause:focus-visible { border-color: currentColor; }
.reel-pause-icon { width: 10px; height: 10px; flex: 0 0 auto; position: relative; display: block; }
.reel-pause-icon::before, .reel-pause-icon::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 3px; background: currentColor; border-radius: 1px; }
.reel-pause-icon::before { left: 1px; }
.reel-pause-icon::after { right: 1px; }
.reel-pause[aria-pressed="true"] .reel-pause-icon { width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor;
  background: none; }
.reel-pause[aria-pressed="true"] .reel-pause-icon::before,
.reel-pause[aria-pressed="true"] .reel-pause-icon::after { content: none; }
.reel-caption { text-align: center; min-height: 1.3em; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; font-size: .72rem; }
/* the fan reads as five face-down piles beneath the featured card */
html.js .table-fan { width: min(100%, 460px); margin: 0 auto; }

/* ============================================================================
   V7 — CATEGORY SHOWCASES. Tall scroll scenes: sticky stage, a large card
   turning 0→180° with scroll progress, room re-lit per category.
   ============================================================================ */
.showcase { position: relative; }
html.js .showcase { min-height: 165vh; }
.showcase-sticky { max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.1rem, 4vw, 2.4rem);
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
html.js .showcase-sticky { position: sticky; top: 0; min-height: 100vh;
  box-sizing: border-box; }
.showcase-copy h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-bottom: 1rem; }
.show-eyebrow { color: var(--show-ink, var(--ink-soft)); }
body[data-scene] .show-eyebrow { color: var(--show-bright, var(--scene-on-soft)); }
.show-job { color: var(--ink-soft); font-size: 1.05rem; max-width: 48ch; margin: 0 0 1.4rem; }
.show-sample { margin: 0 0 1.4rem; padding: 1rem 1.2rem 1.1rem;
  border-left: 3px solid var(--show, var(--steady)); border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--show-tint, transparent), transparent 85%);
  transition: background .45s ease, border-color .45s ease; }
body[data-scene] .show-sample { border-left-color: var(--show-bright, var(--scene-accent));
  background: color-mix(in srgb, var(--scene-glow) 32%, transparent); }
.show-sample p { margin: 0 0 .6rem; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45; text-wrap: balance; }
.show-sample cite { font: 600 .66rem/1 var(--sans); font-style: normal;
  letter-spacing: .18em; text-transform: uppercase; color: var(--scene-on-soft); }
.show-meta { margin: 0; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--scene-on-soft); }
.show-meta b { font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0;
  color: var(--show-ink, var(--ink)); margin-right: .25rem; }
body[data-scene] .show-meta b { color: var(--show-bright, var(--scene-accent)); }
.showcase-stage { perspective: 1350px; display: grid; justify-items: center;
  position: relative; }
.showcase-stage::after { content: ""; position: absolute; left: 50%; bottom: -5%;
  width: 52%; height: 7%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.38), transparent 70%);
  filter: blur(8px); pointer-events: none; }
.show-spin { width: min(70%, 296px); display: grid; transform-style: preserve-3d;
  transform: rotateY(calc(var(--spin, 0) * 1deg)); will-change: transform; }
.spin-face { grid-area: 1 / 1; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; transform: translateZ(1px); }
.spin-face--back { transform: rotateY(180deg) translateZ(1px); }
/* the dark showcase keeps its own low light even before the scene engages */
.showcase--dark { background: linear-gradient(180deg, transparent 0%, rgba(13,0,3,.045) 18%,
  rgba(13,0,3,.045) 82%, transparent 100%); }
@media (max-width: 860px) {
  .showcase-sticky { grid-template-columns: 1fr; gap: 1.8rem; align-content: center; }
  html.js .showcase { min-height: 150vh; }
  .show-spin { width: min(56%, 235px); }
  .showcase-stage { order: -1; }

  /* MOBILE: DO NOT PIN. In one column this block is ~1017px tall (565px of copy
     + a 343px card + padding) inside a ~664px viewport. A sticky box taller
     than the viewport cannot hold at top:0 — it scrolls — so the card, which is
     order:-1 at the top of that box, drifted UP and off the screen and was
     cropped while it was still rotating (measured: -266px, then -560px, on a
     390x664 screen). Making the whole thing fit would mean deleting real copy,
     and pinning the stage alone makes the card sit on top of the text.
     So on mobile the section simply flows, and site.js ties the rotation to the
     CARD crossing the viewport instead of to section scroll — the card is
     centred at the halfway point of its own spin. See the `pinned` branch in
     the SHOWCASE block of assets/site.js; the two must change together. */
  html.js .showcase { min-height: 0; }
  html.js .showcase-sticky { position: static; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .showcase { min-height: 0; }
  html.js .showcase-sticky { position: static; min-height: 0; }
  .show-spin { transform: none; }
  .reel-dot.is-on i { animation: none; transform: scaleX(1); }
}

/* Legibility: on a dark scene, EVERY text element inside the scene-section must
   follow the scene color (component inks like .eyebrow/.sub/.micro/.lead/meta
   would otherwise stay dark and vanish against the deep background). */
[data-scene-section] h1, [data-scene-section] h2, [data-scene-section] h3,
[data-scene-section] .amount, [data-scene-section] strong, [data-scene-section] b { color: var(--scene-on) !important; }
[data-scene-section] p, [data-scene-section] li, [data-scene-section] .eyebrow,
[data-scene-section] .sub, [data-scene-section] .micro, [data-scene-section] .lead,
[data-scene-section] .meta, [data-scene-section] blockquote, [data-scene-section] figcaption,
[data-scene-section] small, [data-scene-section] .specs li { color: var(--scene-on-soft) !important; }
[data-scene-section] .eyebrow { opacity: .95; }

/* ============================================================================
   V8 — FUNNEL & DISCOVERY. Path-tile links, showcase CTAs, the ladder,
   honest proof, inspiration shelf, and the persistent conversion dock.
   ============================================================================ */

/* hero risk line */
.risk-line { max-width: 46ch; margin-top: 0; }

/* path tile → per-category page */
.path-link { display: inline-block; margin-top: 1rem; text-decoration: none;
  font: 600 .84rem/1 var(--sans); letter-spacing: .04em;
  color: var(--path-ink, var(--path)); border-bottom: 1.5px solid transparent;
  transition: border-color .2s ease, transform .2s ease; }
.path-link:hover, .path-link:focus-visible { border-bottom-color: currentColor;
  transform: translateX(2px); }

/* showcase → per-category page (lit and unlit states) */
.show-cta-row { margin: 1.1rem 0 0; }
.show-cta { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font: 600 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--show-ink, var(--ink)); padding: .55rem 0;
  border-bottom: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-color .2s ease, color .2s ease; }
.show-cta:hover, .show-cta:focus-visible { border-bottom-color: currentColor; }
body[data-scene] .show-cta { color: var(--show-bright, var(--scene-accent)) !important; }
.show-cta--ad { color: #FF5A70; justify-self: center; }

/* ---- the ladder: free → digital → physical → After Dark ---- */
.ladder-steps { list-style: none; margin: 0; padding: 0; counter-reset: ladder;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; }
.ladder-step { counter-increment: ladder; position: relative; display: flex;
  flex-direction: column; gap: .55rem; background: var(--panel);
  border: 1px solid var(--line); border-top: 4px solid var(--step, var(--steady));
  border-radius: var(--r); padding: 1.5rem 1.3rem 1.4rem;
  transition: transform .18s ease, box-shadow .18s ease; }
.ladder-step:hover { transform: translateY(-3px);
  box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--step, var(--steady)) 55%, rgba(20,16,10,.4)); }
.ladder-step::before { content: counter(ladder, decimal-leading-zero);
  font: 600 .78rem/1 var(--sans); letter-spacing: .12em; color: var(--step, var(--steady)); }
.ladder-step:not(:first-child)::after { content: "→"; position: absolute; top: 50%;
  left: -0.95rem; translate: 0 -50%; color: var(--ink-soft); font-size: 1rem; opacity: .7; }
.ladder-tag { font: 700 .64rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); }
.ladder-step h3 { font-size: 1.18rem; }
.ladder-step p { margin: 0; flex: 1; font-size: .9rem; color: var(--ink-soft); }
.ladder-step .btn { align-self: flex-start; font-size: .85rem; padding: .65rem 1.2rem; }
.ladder-step--featured { border: 1.5px solid transparent; border-top-width: 4px;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--mmg-foil) border-box;
  box-shadow: 0 22px 46px -28px rgba(10,36,114,.4); }
.ladder-step--dark { background: linear-gradient(165deg, #241017, #170A0E);
  border-color: #4A2630; color: #F4ECD9; }
.ladder-step--dark h3 { color: #F4ECD9; }
.ladder-step--dark p, .ladder-step--dark .ladder-tag { color: #C9AEB4; }
@media (max-width: 1000px) {
  .ladder-steps { grid-template-columns: 1fr 1fr; }
  .ladder-step:nth-child(3)::after { display: none; }
}
@media (max-width: 560px) {
  .ladder-steps { grid-template-columns: 1fr; }
  .ladder-step::after { display: none !important; }
}

/* ---- honest proof ---- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.proof-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.3rem; }
.proof-card h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.proof-card p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.proof-card a { color: var(--steady-ink); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.proof-card a:hover { color: var(--ink); }

/* ---- inspiration teaser: copy + a small shelf of book spines ---- */
.inspire { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center; }
.inspire h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.inspire .sub { color: var(--ink-soft); margin: 1rem 0 1.6rem; }
.inspire-shelf { list-style: none; margin: 0; padding: 0 0 .9rem; display: flex;
  align-items: flex-end; justify-content: center; gap: .45rem;
  border-bottom: 6px solid #D8C9A8; }
.spine { --sp: var(--steady); writing-mode: vertical-rl; min-height: 205px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: 1rem .55rem; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sp) 88%, #fff) 0%, var(--sp) 30%,
              color-mix(in srgb, var(--sp) 82%, #000) 100%);
  color: #FBF7EF; box-shadow: inset -2px 0 3px rgba(0,0,0,.25), 0 6px 14px -8px rgba(20,16,10,.5);
  transition: transform .2s ease; }
.spine:hover { transform: translateY(-6px); }
.spine b { font-family: var(--serif); font-weight: 600; font-size: .88rem; letter-spacing: .03em; }
.spine span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.spine:nth-child(even) { min-height: 225px; }
@media (max-width: 860px) {
  .inspire { grid-template-columns: 1fr; }
  .inspire-shelf { flex-wrap: nowrap; overflow: hidden; }
  .spine { min-height: 175px; }
  .spine:nth-child(even) { min-height: 190px; }
}

/* ---- persistent conversion dock ---- */
/* While the cookie banner is on screen the dock sits above it instead of
   underneath. --consent-h is the banner's measured height, set by consent.js.
   1rem is the banner's own bottom offset; 12px is the gap between the two. */
.has-consent-banner .cta-dock { bottom: calc(14px + 1rem + var(--consent-h, 0px) + 12px); }
.cta-dock { position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem; max-width: min(94vw, 620px);
  background: rgba(36,32,26,.94); color: #FBF7EF; backdrop-filter: blur(8px);
  border: 1px solid rgba(251,247,239,.16); border-radius: 999px;
  padding: .55rem .6rem .55rem 1.2rem;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.55); }
.cta-dock[hidden] { display: none; }
html.js .cta-dock { opacity: 0; translate: -50% 12px; pointer-events: none;
  transition: opacity .3s ease, translate .3s ease; }
html.js .cta-dock.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; }
.dock-line { margin: 0; font-size: .78rem; letter-spacing: .04em; color: #D8CFC0; white-space: nowrap; }
.dock-line b { font-family: var(--serif); color: #FBF7EF; font-weight: 600; }
.dock-actions { display: flex; gap: .45rem; }
.cta-dock .btn { padding: .55rem 1.05rem; font-size: .82rem; white-space: nowrap; }
.cta-dock .btn.ghost { color: #FBF7EF; border-color: rgba(251,247,239,.55); }
.cta-dock .btn.ghost:hover { background: #FBF7EF; color: #24201a; }
/* Dismiss control, created by site.js (the dock markup is duplicated across 30
   pages, so the button is added once in JS rather than 30 times in HTML).
   44x44 minimum hit area to satisfy the touch-target rule the rest of the site
   already follows, while the visible glyph stays small. */
.dock-dismiss { flex: 0 0 auto; width: 44px; height: 44px; margin-right: -.35rem;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 999px;
  color: #D8CFC0; font-size: 1.15rem; line-height: 1;
  transition: color .18s ease, background-color .18s ease; }
.dock-dismiss:hover { color: #FBF7EF; background: rgba(251,247,239,.12); }
.dock-dismiss:focus-visible { outline: 2px solid #FBF7EF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dock-dismiss { transition: none; } }
@media (max-width: 560px) {
  .cta-dock { width: calc(100vw - 20px); justify-content: space-between; gap: .6rem; }
  .dock-line { display: none; }
  .dock-actions { flex: 1; }
  .dock-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cta-dock { transition: none; }
}

/* ============================================================================
   V10 — SPECIAL & INTERACTIVE. Deal-the-deck entrance, stat count-up,
   pointer-depth on the hero reel, magnetic CTAs, hero parallax, and a
   cursor-follow spotlight on the dark sections. All JS-driven pieces are
   rAF-throttled and fully disabled under prefers-reduced-motion.
   ============================================================================ */

/* stat count-up — digits tick without the line breathing */
.signal b { font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.2em; text-align: right; }
.signal .total b, .signal .addons b { min-width: 0; text-align: left; }

/* deal the deck — the five face-down piles slide onto the table, staggered */
@keyframes mmgDeal {
  from { opacity: 0; transform: translate3d(0, 64px, 0) rotate(0deg) scale(.62); }
}
html.js .table-fan.is-dealing .flip {
  animation: mmgDeal .68s cubic-bezier(.2,.75,.25,1) backwards;
}
html.js .table-fan.is-dealing .flip:nth-child(1) { animation-delay: .05s; }
html.js .table-fan.is-dealing .flip:nth-child(2) { animation-delay: .15s; }
html.js .table-fan.is-dealing .flip:nth-child(3) { animation-delay: .25s; }
html.js .table-fan.is-dealing .flip:nth-child(4) { animation-delay: .35s; }
html.js .table-fan.is-dealing .flip:nth-child(5) { animation-delay: .45s; }

/* hero reel — the featured card answers the pointer with true 3D depth */
.reel-card { transform-style: preserve-3d;
  transform: rotateX(calc(var(--rty, 0) * 1deg)) rotateY(calc(var(--rtx, 0) * 1deg));
  transition: transform .28s ease-out; will-change: transform; }

/* hero parallax — copy and stage drift softly against the pointer */
html.js .hero.table .hero-copy {
  transform: translate3d(calc(var(--hpx, 0) * 6px), calc(var(--hpy, 0) * 4px), 0);
  transition: transform .35s ease-out; }
html.js .hero.table .table-stage {
  transform: translate3d(calc(var(--hpx, 0) * -10px), calc(var(--hpy, 0) * -7px), 0);
  transition: transform .35s ease-out; }

/* cursor-follow spotlight — a warm light wanders the dark rooms */
html.js .section.afterdark::after { content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(440px circle at var(--sx, 50%) var(--sy, 40%),
    rgba(224,31,61,.18), rgba(255,138,156,.05) 42%, transparent 72%); }
html.js .section.afterdark.spot-on::after { opacity: 1; }
html.js .site-footer::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 30%),
    rgba(244,236,217,.07), transparent 70%); }
html.js .site-footer.spot-on::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .table-fan.is-dealing .flip { animation: none; }
  .reel-card { transform: none; transition: none; }
  html.js .hero.table .hero-copy, html.js .hero.table .table-stage { transform: none; transition: none; }
  html.js .section.afterdark::after, html.js .site-footer::after { content: none; }
}

/* Card geometry guarantee: wherever a card sits inside a stretching flex/grid
   parent, it keeps the real TGC tarot ratio instead of being pulled taller. */
.mmg-card, .mmg-back { align-self: center; justify-self: center; }
.flip-inner > .flip-face > .mmg-card, .flip-inner > .flip-face > .mmg-back { align-self: stretch; }

/* ============================================================================
   V11 — CINEMATIC LAYER. Word-by-word headline reveals, a staged hero
   entrance, the signature scene light-sweep, a reading-progress line on the
   header ribbon, and film grain + vignette while a dark scene is lit.
   Safety contract: every .w span renders exactly like raw text until
   .wordfx-play arrives, so a missed observer can never hide copy. All motion
   is transform/opacity-only and fully off under prefers-reduced-motion.
   ============================================================================ */

/* ---- word-by-word headline reveal ---- */
.wordfx .w { display: inline-block; }
.wordfx.wordfx-play .w {
  animation: mmgWordIn .75s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay: calc(var(--wi, 0) * 60ms);
}
@keyframes mmgWordIn {
  from { opacity: 0; transform: translateY(.55em) rotate(1.5deg); }
}

/* ---- staged hero entrance: the copy column rises line by line ---- */
@keyframes mmgRise { from { opacity: 0; transform: translateY(18px); } }
html.js .hero.table .hero-copy > * { animation: mmgRise .85s cubic-bezier(.2,.7,.2,1) backwards; }
html.js .hero.table .hero-copy > :nth-child(1) { animation-delay: .05s; }
html.js .hero.table .hero-copy > :nth-child(2) { animation-delay: .12s; }
html.js .hero.table .hero-copy > :nth-child(3) { animation-delay: .30s; }
html.js .hero.table .hero-copy > :nth-child(4) { animation-delay: .42s; }
html.js .hero.table .hero-copy > :nth-child(5) { animation-delay: .54s; }
html.js .hero.table .hero-copy > :nth-child(6) { animation-delay: .66s; }
html.js .hero.table .hero-copy > :nth-child(7) { animation-delay: .78s; }
html.js .hero.table .table-stage { animation: mmgRise 1s cubic-bezier(.2,.7,.2,1) .25s backwards; }

/* ---- signature scene transition: a soft diagonal light sweeps the room the
   moment it re-lights (site.js retriggers .is-go on data-scene change) ---- */
.scene-wipe { position: fixed; inset: 0; z-index: 34; pointer-events: none; overflow: hidden; }
.scene-wipe::before { content: ""; position: absolute; inset: -12% -30%;
  transform: translateX(-115%) skewX(-14deg); will-change: transform;
  background: linear-gradient(90deg, transparent 20%,
    color-mix(in srgb, var(--scene-accent, #FFFDF4) 10%, transparent) 42%,
    color-mix(in srgb, #FFFDF4 16%, transparent) 50%,
    color-mix(in srgb, var(--scene-accent, #FFFDF4) 10%, transparent) 58%,
    transparent 80%); }
.scene-wipe.is-go::before { animation: mmgSceneWipe .9s cubic-bezier(.35,.55,.3,1); }
@keyframes mmgSceneWipe {
  from { transform: translateX(-115%) skewX(-14deg); }
  to   { transform: translateX(115%) skewX(-14deg); }
}

/* ---- reading progress: an accent line rides the header's brand ribbon ---- */
.site-header .scroll-progress { position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; z-index: 1; pointer-events: none;
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
  background: var(--scene-accent, var(--steady));
  box-shadow: 0 0 8px color-mix(in srgb, var(--scene-accent, var(--steady)) 55%, transparent); }

/* ---- film grain + vignette: the dark rooms get a quiet cinema finish ----
   (fixed, static, compositor-cached; sits above content but below the
   header (40) and dock (60) so chrome stays crisp) */
html.js body[data-scene]::before { content: ""; position: fixed; inset: 0; z-index: 30;
  pointer-events: none;
  background: radial-gradient(118% 88% at 50% 42%, transparent 60%, rgba(4,2,8,.32) 100%);
  animation: mmgVeilIn .9s ease both; }
html.js body[data-scene]::after { content: ""; position: fixed; inset: 0; z-index: 31;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: mmgVeilIn 1.2s ease both; }
@keyframes mmgVeilIn { from { opacity: 0; } }

/* ---- reduced motion: the cinematic layer goes fully instant/off ---- */
@media (prefers-reduced-motion: reduce) {
  .wordfx.wordfx-play .w { animation: none; }
  html.js .hero.table .hero-copy > *,
  html.js .hero.table .table-stage { animation: none; }
  .scene-wipe { display: none; }
  html.js body[data-scene]::before { animation: none; }
  html.js body[data-scene]::after { content: none; }
}

/* ============================================================================
   V12 — APPLE-GRADE CHAPTERS. Statement typography, the scroll-scrubbed
   product cinema (deck fanning open, copy beats trading places), the
   materials close-up, the paper-vs-pixels model chooser, and the
   "one more thing" reveal before After Dark.
   Contract: scrub motion is transform/opacity only, driven by JS-set custom
   props (--fp/--mp) whose CSS DEFAULTS are the finished pose — so no-JS and
   reduced-motion always render the complete, legible composition.
   ============================================================================ */

/* ---- statement typography: bigger claims, tighter tracking ---- */
.hero h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); letter-spacing: -.03em; line-height: 1.03; }
.section-head h2 { font-size: clamp(1.9rem, 4.8vw, 3.3rem); letter-spacing: -.015em; }
.showcase-copy h2 { font-size: clamp(2.1rem, 5.2vw, 3.8rem); letter-spacing: -.02em; }
.chapter-kicker { margin: 0; font: 700 .72rem/1 var(--sans); letter-spacing: .32em;
  text-transform: uppercase; color: var(--ink-soft); }
.chapter-kicker--light { color: #C9BFAE; }

/* ---- product cinema: pinned stage, the deck fans open with the scroll ---- */
.cinema { position: relative; }
html.js .cinema { min-height: 240vh; }
.cinema-sticky { max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.1rem, 4vw, 2.4rem);
  display: grid; justify-items: center; align-content: center;
  gap: clamp(1.4rem, 4vh, 2.6rem); text-align: center; }
html.js .cinema-sticky { position: sticky; top: 0; min-height: 100vh; box-sizing: border-box; }
.cinema-stage { position: relative; width: min(92vw, 760px);
  height: clamp(230px, 36vh, 340px); --fp: 1; --spread: 62%; }
.fan-card { position: absolute; left: 50%; bottom: 0; width: clamp(118px, 16vw, 164px);
  transform-origin: 50% 92%; will-change: transform;
  transform: translateX(-50%)
             translateX(calc(var(--fp, 1) * var(--i, 0) * var(--spread, 62%)))
             translateY(calc(var(--fp, 1) * var(--lift, 0) * 14px))
             rotate(calc(var(--fp, 1) * var(--i, 0) * 10.5deg)); }
.fan-clip { position: absolute; inset: 0; border-radius: 4.545% / 2.632%;
  overflow: hidden; pointer-events: none; }
.fan-sheen { position: absolute; inset: -4% -30%; display: block;
  transform: translateX(calc(-130% + var(--fp, 1) * 245%)) skewX(-16deg);
  background: linear-gradient(90deg, transparent 30%,
    rgba(255,252,240,.20) 50%, transparent 70%); }
.cinema-beats { margin: 0; display: grid; gap: 1.1rem; justify-items: center;
  padding: clamp(1.1rem, 3.5vw, 2.4rem) clamp(.8rem, 3vw, 1.6rem); }
.cinema-beat { margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 5.4vw, 4.4rem); line-height: 1.08; letter-spacing: -.02em;
  color: var(--ink); text-wrap: balance; }
.cinema-beat__sub { display: block; margin-top: 1rem;
  font: 600 clamp(.76rem, 1.5vw, .95rem)/1.5 var(--sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
html.js .cinema-beat { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(10px);
  filter: blur(7px); will-change: opacity, transform, filter;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1),
              filter .75s cubic-bezier(.22,.61,.36,1); }
html.js .cinema-beat.is-on { opacity: 1; transform: none; filter: blur(0); }

/* Reusable legibility scrim: any statement text laid OVER cards/imagery gets a soft
   halo of the current scene colour so it can never be lost against the artwork. */
.text-scrim, .cinema-beats { position: relative; z-index: 3; }
.text-scrim::before, .cinema-beats::before {
  content: ""; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 56% at 50% 50%,
    color-mix(in srgb, var(--scene-bg, var(--bg)) 86%, transparent) 0 52%, transparent 100%); }
@media (max-width: 560px) { .cinema-stage { --spread: 44%; } }

/* ---- materials close-up: the physical quality at macro distance ---- */
.materials { position: relative; color: #F4ECD9; }
.materials::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(110% 80% at 76% 24%, #2C2315 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #191410 6%, #14100C 50%, #191410 94%, var(--bg) 100%);
  box-shadow: 0 0 0 100vmax #14100C; clip-path: inset(6% -100vmax); }
.materials-inner { max-width: var(--maxw); margin: 0 auto;
  padding: clamp(4.5rem, 11vw, 8.5rem) clamp(1.1rem, 4vw, 2.4rem);
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.materials h2 { color: #F7F1E3; font-size: clamp(2.1rem, 5vw, 3.8rem);
  letter-spacing: -.02em; line-height: 1.06; margin: .9rem 0 1rem; }
.materials-sub { color: #B9AE9B; max-width: 46ch; margin: 0 0 2.1rem; font-size: 1.02rem; }
.materials-specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.materials-spec dt { font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem); letter-spacing: -.01em; color: #E8D49A; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .materials-spec dt { background: var(--mmg-foil);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.materials-spec dd { margin: .4rem 0 0; font-size: .9rem; line-height: 1.65; color: #B9AE9B; }
.materials-cta { margin: 2.3rem 0 0; }
.materials-stage { display: grid; justify-items: center; perspective: 1200px; --mp: .5; }
.materials-card { position: relative; width: min(78%, 330px); will-change: transform;
  transform: rotateY(calc(7deg - var(--mp, .5) * 14deg)) rotateZ(-3deg);
  filter: drop-shadow(0 46px 58px rgba(0,0,0,.5)); }
/* gilded edge — a sliver of foil down the card's right side */
.materials-card::after { content: ""; position: absolute; top: 2%; bottom: 2%;
  right: -5px; width: 5px; border-radius: 3px; background: var(--mmg-foil);
  box-shadow: 0 0 14px rgba(232,212,154,.35); }
/* paper grain + scroll-scrubbed specular sweep (appended by JS) */
.materials-skin { position: absolute; inset: 0; border-radius: 4.545% / 2.632%;
  overflow: hidden; pointer-events: none; }
.materials-skin::before { content: ""; position: absolute; inset: 0;
  background-image: var(--mmg-grain); background-size: 160px 160px;
  opacity: .5; mix-blend-mode: overlay; }
.materials-skin::after { content: ""; position: absolute; inset: -4% -40%;
  transform: translateX(calc(-120% + var(--mp, .5) * 235%)) skewX(-18deg);
  background: linear-gradient(90deg, transparent 32%, rgba(255,250,235,.14) 46%,
    rgba(241,227,174,.22) 50%, rgba(255,250,235,.14) 54%, transparent 68%); }

/* ---- paper or pixels: the model chooser ---- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: stretch; }
.compare-card { display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.9rem 1.7rem;
  transition: transform .18s ease, box-shadow .18s ease; }
.compare-card:hover { transform: translateY(-3px);
  box-shadow: 0 20px 44px -26px rgba(20,16,10,.45); }
.compare-card--physical { border: 1.5px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--mmg-foil) border-box;
  box-shadow: 0 22px 46px -28px rgba(10,36,114,.35); }
.compare-tag { margin: 0 0 .6rem; font: 700 .66rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.compare-card--physical .compare-tag { color: #8C6F2F; }
.compare-card h3 { font-size: 1.35rem; margin: 0 0 1.15rem; }
.compare-rows { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid;
  gap: .65rem; flex: 1; align-content: start; }
.compare-rows li { display: grid; grid-template-columns: 84px 1fr; gap: .8rem;
  align-items: baseline; font-size: .9rem; color: var(--ink-soft);
  padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.compare-rows b { font: 700 .66rem/1.7 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); }
.compare-price { margin: 0 0 1.15rem; font-family: var(--serif); font-weight: 600;
  font-size: 1.7rem; color: var(--ink); }
.compare-price em { font-style: italic; font-weight: 500; font-size: .85rem; color: var(--ink-soft); }
.compare-card .btn { align-self: flex-start; }
@media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; } }

/* ---- one more thing: the sealed reveal ---- */
.omt { position: relative; display: grid; justify-items: center; align-content: center;
  gap: 1.15rem; min-height: 62vh; text-align: center;
  padding: clamp(4.5rem, 13vh, 8rem) clamp(1.1rem, 4vw, 2.4rem); }
.omt::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(85% 65% at 50% 62%, #2B040B 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, #120103 8%, #0A0002 50%, #120103 92%, var(--bg) 100%);
  box-shadow: 0 0 0 100vmax #0A0002; clip-path: inset(8% -100vmax); }
.omt-kicker { margin: 0; font: 700 .74rem/1 var(--sans); letter-spacing: .34em;
  text-transform: uppercase; color: #C9A0A6; }
.omt-line { margin: 0; font-family: var(--serif); font-weight: 600; color: #F4ECD9;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: 1.06; letter-spacing: -.02em;
  text-wrap: balance; }
.omt-line em { font-style: italic; color: #FF5A70; }
.omt-note { margin: .4rem 0 0; display: inline-flex; align-items: center; gap: .7rem;
  font: 600 .76rem/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #C9A0A6; }
.omt-seal { font: 700 .6rem/1 var(--sans); letter-spacing: .12em; color: #FF5A70;
  border: 1px solid var(--brand-explicit-accent, #E01F3D); border-radius: 999px; padding: .32rem .55rem;
  background: rgba(224,31,61,.12); }

/* ---- responsive + reduced motion for the V12 chapters ---- */
@media (max-width: 860px) {
  .materials-inner { grid-template-columns: 1fr; }
  .materials-stage { order: -1; }
  .materials-card { width: min(58%, 250px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cinema { min-height: 0; }
  html.js .cinema-sticky { position: static; min-height: 0; }
  html.js .cinema-beat { grid-area: auto; opacity: 1; transform: none; filter: none; transition: none; }
  .fan-sheen, .materials-skin::after { display: none; }
  .materials-card { transform: rotateZ(-3deg); }
}

/* The `hidden` attribute must beat any display rule in this file (see sampler.css). */
[hidden] { display: none !important; }
.btn.is-unavailable,
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   PRE-LAUNCH: announcement bar, countdown, waitlist.
   Markup lives in shared/header.html + the waitlist sections; copy and date come
   from 01_source_of_truth/launch.json. The bar ships `hidden` and is revealed by
   assets/launch.js, so a visitor with JS off never sees an empty shell.
   --------------------------------------------------------------------------- */
.launch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.25rem; padding: .6rem 1rem; background: #0A2472; color: #F4EFE6;
  font-size: .9rem; line-height: 1.5; text-align: center; }
.launch-bar__msg { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: .35rem .6rem; }
.launch-bar__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
  color: #F5A98F; font-weight: 700; }
/* min-width reserves the slot so the ticking countdown cannot reflow the bar
   (and the text beside it) once a second. tabular-nums keeps digit widths
   equal; the reservation covers the day count changing from 1 to 2 chars. */
.launch-bar__count { font-variant-numeric: tabular-nums; color: #9FB4EF; white-space: nowrap;
  display: inline-block; min-width: 12ch; }
.launch-bar__cta { color: #F4EFE6; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 600; white-space: nowrap; }
.launch-bar__cta:hover, .launch-bar__cta:focus-visible { color: #F5A98F; }

.waitlist { text-align: center; }
.waitlist-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem; max-width: 34rem; margin: 1.25rem auto 0; }
.waitlist-form input[type=email] { flex: 1 1 16rem; min-width: 0; padding: .7rem .9rem;
  border: 1px solid #C9BDA9; border-radius: 8px; background: #FFFDF8; font: inherit;
  font-size: 1rem; color: #2B2118; }
.waitlist-form input[type=email]:focus-visible { outline: 2px solid #0A2472; outline-offset: 1px; }
/* #93887A is the FOOTER's faint tone and only works on the footer's dark ground;
   here it sits on the light --panel at 3.42:1. This colours the waitlist
   success/error line — the one string that tells someone whether their signup
   worked — so it has to be readable. */
.waitlist-form .fineprint, .waitlist-status { flex: 1 0 100%; margin: .35rem 0 0;
  font-size: .8rem; line-height: 1.6; color: var(--ink-soft); }
.waitlist-status:empty { display: none; }
.waitlist-status[data-state="success"], .waitlist-status[data-state="duplicate"] { color: #1E7A4C; font-weight: 600; }
.waitlist-status[data-state="error"], .waitlist-status[data-state="network"],
.waitlist-status[data-state="notopen"] { color: #B3261E; font-weight: 600; }

.ord-waitlist { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #E4DACA; }
.ord-waitlist__t { margin: 0 0 .5rem; font-weight: 700; font-size: .9rem; color: #2B2118; }
.ord-waitlist .waitlist-form { margin-top: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: no-preference) {
  .launch-bar { transition: background-color .3s ease; }
}

/* ---- objections, named above the price ----------------------------------
   Same card language as .proof-card, but visually quieter and set on the page
   background rather than a panel: this block has to read as candour, not as
   another sales module. The quoted headings are the buyer's words, not ours. */
.obj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.obj-card { background: transparent; border: 1px dashed var(--line);
  border-radius: var(--r); padding: 1.15rem 1.25rem 1.3rem; }
.obj-card h3 { font-size: 1.05rem; margin: 0 0 .5rem; font-family: var(--serif);
  color: var(--ink); font-style: italic; font-weight: 600; }
.obj-card p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.obj-card a { color: var(--steady-ink); font-weight: 600;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.obj-card a:hover { color: var(--ink); }


/* ----------------------------------------------------------------------
   Touch ergonomics. Measured on Chromium emulation at 320-414px: hamburger
   38x35, card-reel dots 46x26, sampler flip 34x34, order steppers 35x35,
   footer path links ~60x32, /policies/ links 33px tall, newsletter button
   39-40px. WCAG 2.5.5 asks for 44x44. Scoped to coarse pointers and small
   screens so desktop density is unchanged.
   ---------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 900px) {
  .menu-toggle,
  .reel-dot,
  .card-flip__btn,
  #ordMinus, #ordPlus,
  .site-footer a,
  .policy-list a,
  .newsletter button,
  .newsletter .btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Inline links need the height without becoming full-width blocks. */
  .site-footer a,
  .policy-list a { display: inline-flex; align-items: center; }
}

/* The cookie banner is fixed at z-index 9999; while the mobile nav is open it
   covered the menu items. Hide it for the duration — it returns on close. */
.nav-open #mmg-consent { display: none !important; }