/* ============================================================================
   Beauty Charms — "Kinetic Laboratory" theme (standalone build)
   Playful Science · Useful Weirdness. Editorial-clinical: ink black + pure
   white, candy-pink disruptor, EB Garamond soul, Inter UI, JetBrains Mono
   lab labels. Sharp 0px containers, bold 1px outlines, tonal layers instead
   of shadows. Framework-free. Reuses the reviewed catalogue in https://cdn.prod.website-files.com/6a8beeb01e06f14121d7132d/6a8c095d40731beab393aab8_js-catalog.js.
   Modelled on NewStyle/stitch_beauty_charms_lab (v3 prototype).
   ========================================================================== */

/* ---- Tokens --------------------------------------------------------------- */
:root {
  --bg: #f9f9f9;
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #1b1b1b;
  --on-surface: #1a1c1c;
  --on-surface-var: var(--ink-mute);   /* legacy alias — same secondary role */
  --outline: #7e7576;
  --outline-var: #cfc4c5;
  --line: #e2e2e2;
  --surface-low: #f3f3f4;
  --surface: #eeeeee;
  --surface-high: #e8e8e8;

  --candy: #ff69b4;         /* playful disruptor */
  --candy-rgb: 255 105 180; /* same hue as --candy, for alpha tints */
  --candy-soft: #fdbec9;
  --cream: #f5f5dc;
  --mesh: linear-gradient(135deg, #ffc0cb 0%, #f5f5dc 100%);

  --status-testing: #a0a0a0;
  --status-in-lab: #eaeaea;
  --status-ready: #000000;

  --font-display: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  --font-body: 'Inter', 'Noto Sans SC', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Noto Sans SC', monospace;

  /* Secondary text — two roles only. The theme had accumulated ~40 near
     identical greys (#5d6362, #5c6261, #68645f …) that read as washed-out on
     the warm paper. One deeper warm neutral for light surfaces, one light
     neutral for the dark bands. */
  --ink-mute: #4a453e;
  --ink-mute-ondark: #b0b5bd;

  /* Body type scale — body copy sat at .95rem/15px and drifted per component
     (.95 / .9 / .88 / .875 / .86 / .84 / .8). Two sizes carry almost all of it. */
  --fs-body: 1rem;
  --fs-body-sm: .9rem;
  --fs-label: 11px;
  --lh-body: 1.72;

  --edge: clamp(20px, 5vw, 40px);
  --wrap: 1440px;
  /* Page gutter: keeps a full-width section's background/band edge-to-edge while
     insetting its content to the same centered 1440px column as .wrap. On wide
     screens it grows symmetrically; at narrow widths it collapses to --edge. */
  --pad-x: max(var(--edge), calc((100% - var(--wrap)) / 2 + var(--edge)));
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --nav-h: 80px;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body); color: var(--on-surface); background: var(--bg);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body ::selection { background: var(--candy); color: #fff; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; }
.mk-icon { width: 1em; height: 1em; font-size: 24px; fill: currentColor; display: inline-block; vertical-align: middle; flex: none; user-select: none; }

/* ---- Helpers -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge); }
.mono { font-family: var(--font-mono); }
.section { padding-block: clamp(56px, 8vw, 96px); }
.bg-ink { background: var(--ink); color: #fff; }
.bg-paper { background: var(--paper); }
.bg-alt { background: var(--surface-low); }

/* bilingual English sub-label (mono metadata layer) */
.sub {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-surface-var);
}
.kicker {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--candy);
}

/* honesty / lab sticker — industrial rectangular label */
.sticker {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .42em .7em; line-height: 1; white-space: nowrap;
}
.sticker.st-ready   { background: var(--status-ready); color: #fff; }
.sticker.st-testing { background: var(--status-testing); color: #fff; }
.sticker.st-lab     { background: var(--status-in-lab); color: var(--ink); border: 1px solid var(--ink); }
.sticker.ghost      { background: none; color: var(--ink); border: 1px solid var(--ink); }

/* buttons — solid ink, sharp, mono; hover inverts */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 1.05em 2.2em; border: 1px solid var(--ink);
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--paper); color: var(--ink); }
.btn-ghost { background: none; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-candy { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-candy:hover { background: var(--candy); border-color: var(--candy); color: #fff; }
.btn .mk-icon { font-size: 18px; }

/* ---- Navigation ----------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-inline: var(--edge);
  background: var(--bg); border-bottom: 1px solid var(--ink);
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.nav.shrink { height: 64px; }
.nav-left { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 2.6rem); }
.nav-brand { display: flex; align-items: center; gap: .6rem; }
.nav-brand .mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.nav-brand .mark .mk-icon { font-size: 20px; }
.nav-brand b { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -.01em; }
.nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2rem); }
.nav-links a {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var);
  padding-bottom: 3px; transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--ink); }
.nav-tools { display: flex; align-items: center; gap: 1.2rem; }
.nav-tools .mk-icon { cursor: pointer; transition: color .15s; }
.nav-tools .mk-icon:hover { color: var(--candy); }
.nav-burger { display: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; place-items: center; }
}

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(80%, 320px);
  background: var(--bg); border-left: 1px solid var(--ink);
  padding: calc(var(--nav-h) + 1rem) var(--edge) var(--edge); display: flex; flex-direction: column; gap: 1.4rem;
}
.drawer-panel a { font-family: var(--font-body); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.drawer-close { position: absolute; top: 1.4rem; right: var(--edge); }

/* lang toggle */
.lang-toggle { display: inline-flex; border: 1px solid var(--ink); }
.lang-toggle button { padding: .35em .7em; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--on-surface-var); }
.lang-toggle button.on { background: var(--ink); color: #fff; }

/* offset for fixed nav */
main { padding-top: var(--nav-h); }

/* ---- Hero ----------------------------------------------------------------- */
.hero {
  min-height: calc(90vh - var(--nav-h));
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(24px, 4vw, 48px); padding: clamp(40px, 6vw, 72px) var(--edge);
  background: var(--paper); overflow: hidden;
}
.hero-copy { display: flex; flex-direction: column; gap: 1.2rem; z-index: 2; }
.hero-copy .kicker { letter-spacing: .3em; }
.hero h1 {
  font-family: var(--font-display); font-size: clamp(1.733rem, 3.733vw, 3.333rem);
  line-height: 1.02; letter-spacing: -.02em; font-weight: 400;
}
.hero-lead { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--on-surface-var); max-width: 42ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; }
.hero-honest {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  margin-top: .4rem; padding: .6em 1em; border: 1px solid var(--ink); background: var(--surface-high);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.hero-honest .mk-icon { font-size: 15px; }
.hero-stage { position: relative; z-index: 1; }
.hero-frame {
  position: relative; width: 100%; aspect-ratio: 8 / 5;
  background: var(--surface); overflow: hidden; border: 1px solid var(--ink);
}
.hero-frame img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .55s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero-stage:hover .hero-frame img { transform: scale(1.05); } }
.hero-badge {
  position: absolute; top: -18px; right: -18px; width: 116px; height: 116px; z-index: 3;
  background: var(--candy); color: #fff; border: 4px solid var(--paper);
  border-radius: 50%; display: grid; place-content: center; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; transform: rotate(12deg);
}
.hero-ref {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  background: rgba(255,255,255,.85); color: var(--ink); padding: .5em .8em; border: 1px solid var(--ink);
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: 0; text-align: left; }
  .hero-stage { order: -1; }
}

/* ---- Marquee -------------------------------------------------------------- */

/* ---- Section head --------------------------------------------------------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); }
.sec-head .sub { margin-top: .4rem; }
.sec-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }
.sec-link:hover { color: var(--candy); border-color: var(--candy); }
.sec-index { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--on-surface-var); }

/* ---- Reels grid (tall staggered usage-demo videos) ----------------------- */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 28px); }
.reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink); border: 1px solid var(--ink); }
.reel:nth-child(even) { margin-top: clamp(24px, 4vw, 56px); }
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel img { transition: transform .55s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .reel:hover img { transform: scale(1.05); } }
.reel-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: .35em .6em; }
.reel-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; z-index: 3; display: grid; place-items: center; color: #fff; background: var(--candy); border: 2px solid #fff; transition: transform .16s var(--ease-out), opacity .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .reel-play:hover { transform: scale(1.06); } }
.reel.playing .reel-play { opacity: 0; }
.reel.playing:hover .reel-play, .reel.playing .reel-play:focus-visible { opacity: .9; }
.reel-cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; padding: 1.2rem; background: linear-gradient(to top, rgba(0,0,0,.72), transparent 55%); pointer-events: none; }
.reel-cap h3 { color: #fff; font-size: 1.15rem; }
.reel-cap .rc { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,.82); }
.reel-cap a { pointer-events: auto; margin-top: .35rem; align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #fff; border-bottom: 1px solid var(--candy); padding-bottom: 2px; }
.reel-cap a:hover { color: var(--candy); }
@media (max-width: 720px) { .reels { grid-template-columns: repeat(2, 1fr); } }

/* ---- Product usage-demo showcase ----------------------------------------- */
.pdp-demo { display: flex; flex-direction: column; align-items: flex-start; }
.demo-frame { position: relative; width: 100%; max-width: 420px; aspect-ratio: var(--ar, 9 / 16); overflow: hidden; background: var(--ink); border: 1px solid var(--ink); }
.demo-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; z-index: 2; display: grid; place-items: center; color: #fff; background: var(--candy); border: 2px solid #fff; transition: transform .16s var(--ease-out), opacity .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .demo-play:hover { transform: scale(1.04); } }
.pdp-demo.playing .demo-play { opacity: 0; }
.pdp-demo.playing .demo-frame:hover .demo-play, .pdp-demo.playing .demo-play:focus-visible { opacity: .9; }
.demo-note { margin-top: .7rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--on-surface-var); }

/* ---- Needs grid (hard ruled cells) ---------------------------------------- */
.needs-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.need {
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: clamp(24px, 3vw, 40px) 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; transition: background .18s;
}
.need:hover { background: var(--mesh); }
.need .mk-icon { font-size: 34px; }
.need h3 { font-size: 1.3rem; }
.need .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); }
.need.in-lab { background: var(--surface-high); position: relative; color: var(--on-surface-var); }
.need.in-lab .mk-icon, .need.in-lab h3 { opacity: .4; }
.need .lab-tag { position: absolute; top: 10px; right: 10px; }
@media (max-width: 720px) { .needs-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Curiosities flip cards ----------------------------------------------- */

/* ---- Scarcity vote -------------------------------------------------------- */
.vote-box { max-width: 900px; margin-inline: auto; border: 4px solid var(--ink); background: var(--paper); padding: clamp(28px, 4vw, 56px); }
.vote-box h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); text-align: center; }
.vote-box .sub { text-align: center; margin: .6rem auto 2rem; letter-spacing: .18em; }
.vote-opts { display: flex; flex-direction: column; gap: 1rem; }
.vote-opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; border: 2px solid var(--outline-var); cursor: pointer; transition: border-color .18s, background .18s; }
.vote-opt:hover { border-color: var(--ink); }
.vote-opt.on { border-color: var(--ink); background: var(--surface-low); }
.vote-opt-l { display: flex; align-items: center; gap: 1rem; }
.vote-radio { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; flex: none; display: grid; place-items: center; }
.vote-opt.on .vote-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--candy); }
.vote-opt h3 { font-size: 1.3rem; }
.vote-opt .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); }
.vote-opt-r { text-align: right; min-width: 140px; }
.vote-opt .pct { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; }
.vote-bar { width: 128px; height: 8px; margin-top: .5rem; background: var(--line); overflow: hidden; margin-left: auto; }
.vote-bar i { display: block; height: 100%; background: var(--ink); transition: none; }
.vote-opt.on .vote-bar i { background: var(--candy); }
.vote-foot { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; }
.vote-live { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-var); }
.vote-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #35c26a; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (max-width: 560px) { .vote-opt { flex-direction: column; align-items: flex-start; } .vote-opt-r { text-align: left; } .vote-bar { margin-left: 0; } }

/* ---- Honesty / FAQ -------------------------------------------------------- */
.honesty { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.honesty h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; margin-bottom: 1.6rem; }
.honesty h2 .sub { display: block; margin-top: .6rem; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: 0; text-transform: none; color: var(--on-surface-var); }
.study { position: relative; aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; border: 1px solid var(--ink); }
.study img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.study .play { position: absolute; inset: 0; display: grid; place-items: center; }
.study .play span { background: var(--paper); border: 1px solid var(--ink); padding: 1em 1.4em; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: background .18s, color .18s; }
.study:hover .play span { background: var(--candy); color: #fff; border-color: var(--candy); }
.study:focus-visible { outline: 3px solid var(--candy); outline-offset: 4px; }
.faq-item { border-bottom: 1px solid var(--ink); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 1.1rem 0; font-family: var(--font-display); font-size: 1.3rem; }
.faq-q:hover { color: var(--candy); }
.faq-q .mk-icon { transition: transform .18s var(--ease-out); flex: none; }
.faq-item.on .faq-q .mk-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: none; }
.faq-item.on .faq-a { max-height: 320px; }
.faq-a p { padding: 0 0 1.2rem; color: var(--on-surface-var); }
@media (max-width: 820px) { .honesty { grid-template-columns: 1fr; } }

/* ---- Footer --------------------------------------------------------------- */
.foot { background: var(--ink); color: #fff; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 5vw, 72px); padding: clamp(48px, 6vw, 80px) var(--pad-x); }
.foot-brand h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.foot-brand p { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; opacity: .6; margin: 1.2rem 0; max-width: 32ch; }
.foot-mail { position: relative; border-bottom: 1px solid rgba(255,255,255,.5); }
.foot-mail input { width: 100%; background: none; border: none; color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; padding: 1rem 2rem 1rem 0; outline: none; }
.foot-mail input::placeholder { color: rgba(255,255,255,.4); text-transform: uppercase; }
.foot-mail button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #fff; }
.foot-mail button:hover { color: var(--candy); }
.foot-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 1rem; color: #fff; }
.foot-col a { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; opacity: .7; padding: .35rem 0; transition: color .15s, opacity .15s; }
.foot-col a:hover { opacity: 1; color: var(--candy); }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem var(--pad-x); border-top: 1px solid rgba(255,255,255,.12); }
.foot-bar p { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; opacity: .4; max-width: 68ch; line-height: 1.6; }
.foot-cert { display: flex; gap: .8rem; flex-none: 0; }
.foot-cert span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; border: 1px solid rgba(255,255,255,.4); padding: .4em .7em; opacity: .7; }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---- Page header band ----------------------------------------------------- */
.pagehead { border-bottom: 1px solid var(--ink); padding: clamp(40px, 6vw, 72px) var(--edge) clamp(28px, 4vw, 44px); }
.pagehead .kicker { color: var(--candy); }
.pagehead h1 { font-size: clamp(1.467rem, 3.333vw, 2.4rem); margin: .6rem 0; letter-spacing: -.02em; }
.pagehead p { color: var(--on-surface-var); max-width: 56ch; }

/* ---- Shop ----------------------------------------------------------------- */
.shop-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.shop-search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--ink); padding: .6em 1em; background: var(--paper); min-width: 220px; }
.shop-search input { border: none; background: none; font-family: var(--font-mono); font-size: 13px; flex: 1; outline: none; }
.shop-search .mk-icon { font-size: 18px; color: var(--outline); }
.shop-sort { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--ink); padding: .6em 1em; background: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: .55em 1em; border: 1px solid var(--outline-var); background: var(--paper); color: var(--on-surface-var); transition: border-color .15s var(--ease-out), color .15s var(--ease-out), background-color .15s var(--ease-out); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.shop-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); }

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 24px); }
.pcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--ink); transition: transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pcard:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 var(--ink); } }
.pcard-media { position: relative; aspect-ratio: 1; background: var(--surface-low); overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.pcard-sticks { position: absolute; top: 10px; left: 10px; display: flex; gap: .4rem; }
.pcard-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; border-top: 1px solid var(--ink); }
.pcard-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); }
.pcard h3 { font-size: 1.25rem; }
.pcard-combo { font-size: .85rem; color: var(--on-surface-var); }
.pcard-combo b { color: var(--ink); font-weight: 600; }
.pcard-view { margin-top: auto; padding-top: .6rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--ink); align-self: flex-start; }
.empty { grid-column: 1 / -1; text-align: center; padding: clamp(40px, 6vw, 80px); border: 1px dashed var(--ink); }
.empty h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.empty p { color: var(--on-surface-var); max-width: 42ch; margin: 0 auto 1.6rem; }
@media (max-width: 980px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pgrid { grid-template-columns: 1fr; } }

/* ---- Product detail (PDP) ------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.pdp-gallery { position: sticky; top: calc(var(--nav-h) + 16px); }
.pdp-main { position: relative; aspect-ratio: 1; background: var(--surface-low); border: 1px solid var(--ink); overflow: hidden; }
.pdp-main img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.pdp-frac { position: absolute; bottom: 12px; right: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; background: rgba(255,255,255,.85); border: 1px solid var(--ink); padding: .4em .7em; }
.pdp-thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.pdp-thumbs button { width: 64px; height: 64px; border: 1px solid var(--outline-var); background: var(--surface-low); padding: 6px; }
.pdp-thumbs button.on { border-color: var(--ink); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-var); margin-bottom: 1rem; }
.pdp-crumb a { border-bottom: 1px solid var(--outline); }
.pdp-crumb a:hover { color: var(--candy); }
.pdp-sticks { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.pdp h1 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.02em; }
.pdp-tag { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--on-surface-var); margin-top: .6rem; }
.pdp-combo { margin-top: 1.4rem; font-size: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--ink); background: var(--paper); }
.pdp-combo b { color: var(--ink); }
.pdp-why { margin-top: 1.4rem; color: var(--on-surface-var); line-height: 1.75; }
.pdp-block { margin-top: 2.2rem; }
.pdp-block h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-surface-var); padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 1px solid var(--ink); }
.spec { width: 100%; border-collapse: collapse; }
.spec tr { border-bottom: 1px solid var(--line); }
.spec td { padding: .7rem 0; vertical-align: top; font-size: .92rem; }
.spec td:first-child { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-var); width: 42%; }
.sw-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.sw-chip { display: flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--outline-var); padding: .4em .7em; }
.sw-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.trust-cell { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 1rem 1.1rem; }
.trust-cell .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); }
.trust-cell .v { margin-top: .4rem; font-size: .92rem; }
.claim-tier { margin-bottom: 1.2rem; }
.claim-tier .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--candy); margin-bottom: .5rem; }
.claim-tier ul { margin: 0; padding-left: 1.1rem; color: var(--on-surface-var); }
.claim-tier li { margin-bottom: .3rem; font-size: .92rem; }
.pdp-note { margin-top: 1rem; padding: 1rem 1.2rem; border-left: 3px solid var(--candy); background: var(--surface-low); font-size: .85rem; color: var(--on-surface-var); }
.pdp-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
@media (max-width: 820px) { .pdp { grid-template-columns: 1fr; } .pdp-gallery { position: static; } .trust-grid { grid-template-columns: 1fr; } }

/* ---- Article / content pages ---------------------------------------------- */
.article { max-width: 760px; }
.article .lede { font-size: 1.2rem; color: var(--on-surface); margin-bottom: 1.4rem; }
.article h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2.4rem 0 .8rem; }
.article h3 { font-size: 1.35rem; margin: 1.8rem 0 .6rem; }
.article p { color: var(--on-surface-var); line-height: 1.8; margin-bottom: 1rem; }
.article ul { margin: 0 0 1.2rem 1.2rem; color: var(--on-surface-var); line-height: 1.75; }
.article li { margin-bottom: .5rem; }
.callout { border: 1px solid var(--ink); background: var(--paper); padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.callout .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--candy); display: block; margin-bottom: .5rem; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); margin: 1.8rem 0; }
.step { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 1.4rem; }
.step .n { font-family: var(--font-mono); font-size: 12px; color: var(--candy); }
.step h3 { font-size: 1.15rem; margin: .5rem 0; }
.step p { font-size: .88rem; margin: 0; color: var(--on-surface-var); }
@media (max-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); } }

/* pipeline (lab page) */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.pipe { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: clamp(20px, 3vw, 36px); }
.pipe .n { font-family: var(--font-mono); font-size: 2rem; color: var(--outline-var); }
.pipe h3 { font-size: 1.35rem; margin: .6rem 0 .5rem; }
.pipe p { font-size: .9rem; color: var(--on-surface-var); }
@media (max-width: 720px) { .pipeline { grid-template-columns: 1fr; } }

/* ---- Join form ------------------------------------------------------------ */
.joinform { max-width: 560px; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-var); margin-bottom: .5rem; }
.field input, .field textarea, .field select { width: 100%; border: none; border-bottom: 1px solid var(--ink); background: var(--paper); padding: .8em 0; font-family: var(--font-body); font-size: .95rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--candy); }
.field textarea { border: 1px solid var(--ink); padding: .8em 1em; min-height: 120px; }
.opt-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.opt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--outline-var); padding: .6em 1em; cursor: pointer; transition: border-color .15s var(--ease-out), color .15s var(--ease-out), background-color .15s var(--ease-out); }
.opt:hover { border-color: var(--ink); }
.opt input { display: none; }
.opt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.join-done { margin-top: 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid var(--ink); background: var(--surface-low); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }

/* utility */
[hidden] { display: none !important; }
.center { text-align: center; }

/* ============================================================================
   HOME · Campaign Laboratory
   Full-bleed campaign image, monumental product stage, and an explanatory
   Carry → Remove → Use scroll narrative. Scoped to body[data-page="home"].
   ========================================================================== */
body[data-page="home"] {
  --bg: #090a0c;
  --paper: #f4f1eb;
  --ink: #0a0b0d;
  --ink-soft: #15171b;
  --on-surface: #f6f5f2;
  --on-surface-var: #abaeb6;
  --outline: #767a84;
  --outline-var: #343840;
  --line: #2b2e34;
  --surface-low: #111318;
  --surface: #181b21;
  --surface-high: #20242c;
  --candy: #ff4f9a;
  --candy-rgb: 255 79 154;
  --accent: #ff4f9a;
  --electric: #58a8ff;
  --home-ease: cubic-bezier(.16, 1, .3, 1);
  background: var(--bg);
  color: var(--on-surface);
}
body[data-page="home"] main { padding-top: 0; }
body[data-page="home"] ::selection { background: var(--accent); color: #08090b; }

/* Scroll reveal: a quiet, one-time entrance for long-form sections. */
body[data-page="home"] .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s var(--home-ease), transform .62s var(--home-ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
body[data-page="home"] .reveal.in { opacity: 1; transform: none; }

/* Transparent campaign navigation becomes an opaque black rail after scroll. */
body[data-page="home"] .nav {
  color: #fff;
  background: transparent;
  border-bottom-color: transparent;
}
body[data-page="home"] .nav.shrink {
  height: 64px;
  background: rgba(8,9,11,.94);
  border-bottom-color: rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
}
body[data-page="home"] .nav-brand { white-space: nowrap; }
body[data-page="home"] .nav-brand .mark { color: #fff; background: rgba(8,9,11,.7); border: 1px solid rgba(255,255,255,.8); }
body[data-page="home"] .nav-brand b,
body[data-page="home"] .nav-links a,
body[data-page="home"] .nav-tools,
body[data-page="home"] .nav-tools a { color: #fff; }
body[data-page="home"] .nav-links a { opacity: .74; }
body[data-page="home"] .nav-links a:hover,
body[data-page="home"] .nav-links a.active { color: #fff; opacity: 1; border-bottom-color: transparent; }
body[data-page="home"] .lang-toggle { border-color: rgba(255,255,255,.75); }
body[data-page="home"] .lang-toggle button { color: rgba(255,255,255,.76); }
body[data-page="home"] .lang-toggle button.on { color: #08090b; background: #fff; }

/* 01 / Full-bleed campaign */
.campaign-hero {
  position: relative;
  min-height: 680px;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #050608;
  color: #fff;
}
.campaign-hero-media,
.campaign-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.campaign-hero-media {
  z-index: 0;
  object-fit: cover;
  object-position: 50% 46%;
  transform: scale(1.035);
  transition: transform 1.05s var(--home-ease);
}
.campaign-hero-shade { z-index: 1; pointer-events: none; background: rgba(0,0,0,.26); }
.campaign-copy {
  position: absolute;
  z-index: 2;
  left: var(--edge);
  bottom: clamp(92px, 12vh, 140px);
  max-width: min(820px, 76vw);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .76s var(--home-ease) .08s, transform .76s var(--home-ease) .08s;
}
.campaign-hero.is-ready .campaign-hero-media { transform: none; }
.campaign-hero.is-ready .campaign-copy { opacity: 1; transform: none; }
.campaign-kicker,
.ritual-kicker,
.ritual-no,
.vote-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}
.campaign-kicker { color: #fff; margin-bottom: 1.2rem; }
.campaign-copy h1 {
  max-width: 11ch;
  font-family: var(--font-body);
  font-size: clamp(2.167rem, 4.533vw, 4.267rem);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.campaign-copy p {
  max-width: 54ch;
  margin-top: 1.4rem;
  color: rgba(255,255,255,.78);
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  line-height: 1.65;
}
.campaign-actions { display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem; margin-top: 2rem; }
.campaign-link,
.object-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.campaign-link { color: #fff; border-bottom: 1px solid #fff; }
.campaign-link.secondary { color: rgba(255,255,255,.74); border-color: rgba(255,255,255,.48); }
.campaign-meta {
  position: absolute;
  z-index: 2;
  right: var(--edge);
  bottom: 34px;
  display: flex;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.campaign-meta span:first-child { color: var(--accent); }
.campaign-scroll {
  position: absolute;
  z-index: 2;
  left: var(--edge);
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.campaign-scroll .mk-icon { font-size: 16px; }

/* 02 / Four original products, staged one at a time */
.object-stage {
  position: relative;
  min-height: 720px;
  height: 100svh;
  overflow: hidden;
  background: #fff;
  color: #0a0b0d;
  --object-accent: var(--accent);
}
.object-stage-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.object-link { color: #fff; border-bottom: 1px solid rgba(255,255,255,.72); }
/* 03 / Explanatory transformation */
.ritual { background: #08090b; color: #fff; }
.ritual-intro {
  min-height: 38svh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(64px, 9vh, 100px);
}
.ritual-intro > .object-link { flex-shrink: 0; }
.ritual-kicker { color: var(--accent); margin-bottom: 1.1rem; }
.ritual-intro h2 {
  max-width: 16ch;
  font-family: var(--font-body);
  font-size: clamp(1.867rem, 3.667vw, 3.6rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.055em;
}
.ritual-intro p { margin-top: 1.15rem; color: #8e929d; font-size: .86rem; }
.ritual-states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
}
.ritual-state figure {
  margin: 0 0 1.4rem;
  background: #f7f7f7;
}
.ritual-state figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ritual-no { color: var(--accent); margin-bottom: .85rem; }
.ritual-state h3 { max-width: 13ch; color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.6rem); line-height: 1.1; }
.ritual-state p { max-width: 36ch; margin-top: .85rem; color: var(--ink-mute-ondark); font-size: .86rem; line-height: 1.7; }
.ritual-states.wrap { padding-bottom: clamp(64px, 9vh, 100px); }

/* 04 / Four product interaction films, kept compact and editorial. */
.home-demos {
  padding-block: clamp(72px, 10vw, 140px);
  overflow: hidden;
  background: #f1f0ed;
  color: #0a0b0d;
}
.home-demos-head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(30px, 6vw, 100px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 72px);
}
.home-demos-kicker,
.home-demo-code,
.home-demo-index,
.home-demo-state {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.home-demos-kicker { display: block; margin-bottom: 1rem; color: var(--accent); }
.home-demos-head h2 { max-width: 14ch; color: #0a0b0d; font-size: clamp(1.733rem, 3.467vw, 3.533rem); line-height: .96; letter-spacing: -.055em; }
.home-demos-head p { max-width: 38ch; color: var(--ink-mute); font-size: .88rem; line-height: 1.75; }
/* One screen, not four wells. Every film is 16:9, so a four-up grid of 4:5 cards
   had to crop or letterbox each of them; the stage plays one film at its native
   ratio inside the same centered 1440px column, and the rail below switches. */
.home-film { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.home-film-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #090a0c;
  border-radius: var(--kx-r-xl);
  box-shadow: var(--kx-shadow-lg);
}
.home-film-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--home-ease), visibility .5s var(--home-ease);
}
.home-film-slide.is-active { opacity: 1; visibility: visible; }
.home-film-slide video { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-film-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.44), transparent 24%, transparent 44%, rgba(0,0,0,.74));
}
.home-demo-overlay {
  position: absolute;
  z-index: 2;
  top: clamp(16px, 2vw, 28px);
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.home-demo-state { color: var(--demo-accent, #ff4f9a); }

/* copy and transport share one baseline row so neither can cover the other */
.home-film-bar {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(18px, 2.4vw, 30px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
}
.home-film-caption { min-width: 0; color: #fff; }
.home-demo-code { color: var(--ink-mute); }
.home-film-caption .home-demo-code { color: rgba(255,255,255,.62); }
.home-film-caption h3 { margin-top: .5rem; color: #fff; font-size: clamp(1.45rem, 2.6vw, 2.6rem); line-height: 1; }
.home-film-caption p { margin-top: .7rem; max-width: 44ch; color: var(--ink-mute-ondark); font-size: var(--fs-body-sm); line-height: 1.6; }
.home-demo-note { display: inline-block; margin-top: .85rem; color: var(--demo-accent, #ff4f9a); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.home-film-controls { display: flex; flex: none; gap: 8px; }
.home-film-btn {
  width: clamp(42px, 3.4vw, 52px);
  height: clamp(42px, 3.4vw, 52px);
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(8,9,11,.6);
  backdrop-filter: blur(8px);
  transition: background-color .2s var(--home-ease), border-color .2s var(--home-ease), transform .2s var(--home-ease);
}
.home-film-btn svg { width: 18px; height: 18px; }
/* flip the glyph, not the button — the hover transform lives on the button */
.home-film-btn.is-prev svg { transform: scaleX(-1); }
.home-film-btn:hover { background: rgba(8,9,11,.88); border-color: #fff; }

/* the rail doubles as the position indicator: the active tab fills as it plays */
.home-film-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }
.home-film-tab {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  padding: 10px 14px 10px 10px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--kx-tile-line);
  border-radius: var(--kx-r-lg);
  box-shadow: var(--kx-shadow-sm);
  transition: border-color .25s var(--home-ease), box-shadow .25s var(--home-ease), transform .25s var(--home-ease);
}
.home-film-tab[aria-selected="true"] { border-color: var(--demo-accent, #ff4f9a); box-shadow: var(--kx-shadow); }
.home-film-thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--kx-r-sm); background: #090a0c; }
.home-film-thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-film-meta { min-width: 0; }
.home-film-meta b { display: block; margin-top: .3rem; color: #0a0b0d; font-family: var(--font-display); font-size: clamp(1rem, 1.2vw, 1.2rem); font-weight: 400; line-height: 1.15; }
.home-film-progress { display: block; height: 2px; margin-top: .6rem; background: rgba(10,11,13,.14); overflow: hidden; }
.home-film-progress i { display: block; width: 0; height: 100%; background: var(--demo-accent, #ff4f9a); }

/* Explore, vote, and trust continue the validation journey. */
.lab-index { background: var(--paper); color: #0a0b0d; }
.lab-index .kicker { color: var(--accent); }
.lab-index .sec-head h2 { color: #0a0b0d; }
.lab-index .sec-link { color: #0a0b0d; border-bottom-color: #0a0b0d; }
.lab-index .tb-needs { border-top: 1px solid #c7c2ba; }
.lab-index .tb-need {
  color: #0a0b0d;
  border-bottom: 1px solid #c7c2ba;
  transition: color .2s var(--home-ease);
}
.lab-index .tb-need .no { color: var(--ink-mute); }
.lab-index .tb-need .blurb { color: var(--ink-mute); }
.lab-index .tb-need .arw { opacity: 0; transform: translateX(-8px); transition: opacity .2s var(--home-ease), transform .2s var(--home-ease); }

.lab-vote { background: #0f1115; color: #fff; }
body[data-page="home"] .vote-box {
  border: 1px solid #343842;
  background: #171a20;
  color: #fff;
  box-shadow: none;
  padding: clamp(30px, 5vw, 72px);
}
body[data-page="home"] .vote-box h2 { max-width: 18ch; margin-top: .9rem; color: #fff; font-size: clamp(1.467rem, 3.333vw, 3rem); }
body[data-page="home"] .vote-box .sub { max-width: 62ch; margin-top: 1rem; color: var(--ink-mute-ondark); }
.vote-kicker { color: var(--accent); }
body[data-page="home"] .vote-opts { margin-top: 2.2rem; border-top: 1px solid #343842; }
body[data-page="home"] .vote-opt {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #343842;
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 1.4rem 0;
  text-align: left;
}
body[data-page="home"] .vote-opt.on { background: transparent; color: #fff; }
body[data-page="home"] .vote-opt strong { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }
body[data-page="home"] .vote-opt .k { color: #9297a2; }
body[data-page="home"] .vote-opt.on .vote-radio::after { background: var(--accent); }
body[data-page="home"] .vote-foot { margin-top: 2rem; }
body[data-page="home"] .vote-foot .btn { color: #08090b; background: var(--accent); border-color: var(--accent); }
body[data-page="home"] .vote-live { color: #8e929d; }
body[data-page="home"] .vote-live .mk-icon { font-size: 14px; }

body[data-page="home"] .lab-honesty,
body[data-page="home"] section:has(> .wrap > .honesty) { background: var(--paper); color: #0a0b0d; }
body[data-page="home"] .honesty h2,
body[data-page="home"] .faq-q { color: #0a0b0d; }
body[data-page="home"] .honesty .sub,
body[data-page="home"] .faq-a,
body[data-page="home"] .faq-a p { color: var(--ink-mute); }
body[data-page="home"] .study { border: 0; }
body[data-page="home"] .faq-item { border-bottom-color: #c7c2ba; }
body[data-page="home"] .honesty .sec-link { color: #0a0b0d; border-bottom-color: #0a0b0d; }

body[data-page="home"] .tb-cta {
  min-height: clamp(500px, 62svh, 720px);
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
  grid-template-rows: 1fr auto;
  gap: clamp(28px, 5vw, 84px);
  align-items: end;
  padding: clamp(82px, 11vw, 150px) var(--pad-x);
  border-top: 1px solid #bcc5c5;
  background: #dfe5e5;
  color: #0a0b0d;
}
body[data-page="home"] .tb-cta h2 {
  grid-row: 1 / 3;
  align-self: end;
  max-width: 9ch;
  color: #0a0b0d;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.6vw, 6rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.055em;
}
body[data-page="home"] .tb-cta p {
  max-width: 38ch;
  color: var(--ink-mute);
  font-size: .9rem;
  line-height: 1.75;
}
body[data-page="home"] .tb-cta > div { align-self: start; }
body[data-page="home"] .tb-cta .tb-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 1rem 1.25rem;
  border: 1px solid #0a0b0d;
  background: #0a0b0d;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body[data-page="home"] .tb-cta .tb-link::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .campaign-link:hover,
  .object-link:hover { color: var(--accent); border-color: var(--accent); }
  .lab-index .tb-need:hover { color: var(--accent); }
  .lab-index .tb-need:hover .arw { opacity: 1; transform: none; }
  body[data-page="home"] .vote-opt:hover { color: var(--accent); }
  body[data-page="home"] .tb-cta .tb-link:hover { background: var(--accent); border-color: var(--accent); color: #0a0b0d; }
}

@media (max-width: 1200px) {
  .home-film-caption p { max-width: 34ch; }
}

@media (max-width: 900px) {
  body[data-page="home"] .nav-tools { gap: .8rem; }
  body[data-page="home"] .nav-brand b { font-size: 1.1rem; }
  body[data-page="home"] .nav-menu-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; }
  .campaign-copy { max-width: calc(100% - 2 * var(--edge)); }
  .ritual-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ritual-states { grid-template-columns: 1fr; gap: 44px; }
  .ritual-state figure { margin-bottom: 1.1rem; }
  .home-demos-head { grid-template-columns: 1fr; align-items: start; }
  .home-film-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-film-caption p { display: none; }
  body[data-page="home"] .tb-cta { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 560px; }
  body[data-page="home"] .tb-cta h2 { grid-row: auto; }
}

@media (max-width: 700px) {
  .home-film-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .home-film-controls { justify-content: flex-end; }
}

@media (max-width: 620px) {
  body[data-page="home"] { --nav-h: 64px; }
  body[data-page="home"] .nav { padding-inline: 16px; }
  body[data-page="home"] .nav-brand { gap: .45rem; }
  body[data-page="home"] .nav-brand .mark { width: 30px; height: 30px; }
  body[data-page="home"] .nav-brand b { font-size: 1rem; }
  body[data-page="home"] .lang-toggle button { padding: .35em .55em; }
  .campaign-hero { min-height: 640px; }
  .campaign-hero-media { object-position: 50% 50%; }
  .campaign-hero-shade { background: rgba(0,0,0,.34); }
  .campaign-copy { bottom: 88px; }
  .campaign-kicker { margin-bottom: .9rem; font-size: 9px; letter-spacing: .13em; }
  .campaign-copy h1 { max-width: 10ch; font-size: clamp(1.733rem, 7.733vw, 2.333rem); letter-spacing: -.05em; }
  .campaign-copy p { max-width: 38ch; font-size: .82rem; }
  .campaign-actions { gap: 1rem 1.5rem; margin-top: 1.4rem; }
  .campaign-link { font-size: 9px; }
  .campaign-meta { display: none; }
  .campaign-scroll { left: auto; right: 18px; bottom: 20px; }
  .object-stage { min-height: 720px; }
  .ritual-intro { min-height: auto; padding-block: 68px; }
  .ritual-intro h2 { font-size: clamp(1.533rem, 7.333vw, 2.233rem); }
  .ritual-intro p { max-width: 34ch; }
  .ritual-state h3 { font-size: 1.4rem; }
  .home-demos { padding-block: 70px; }
  .home-demos-head h2 { font-size: clamp(1.567rem, 7.333vw, 2.267rem); }
  .home-film-screen { border-radius: var(--kx-r); }
  .home-demo-overlay { top: 12px; left: 14px; right: 14px; }
  /* a 16:9 frame is ~190px tall here, so the overlay keeps the title and the
     transport only; the code, the note and the stacked layout would eat it */
  .home-film-bar { flex-direction: row; align-items: flex-end; gap: 12px; left: 14px; right: 14px; bottom: 12px; }
  .home-film-caption .home-demo-code,
  .home-film-caption .home-demo-note { display: none; }
  .home-film-caption h3 { margin-top: 0; font-size: 1.15rem; }
  .home-film-controls { gap: 6px; }
  .home-film-btn { width: 38px; height: 38px; }
  .home-film-btn svg { width: 15px; height: 15px; }
  .home-film-tab { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .home-film-thumb { display: none; }
  .lab-index .tb-need .blurb { display: none; }
  body[data-page="home"] .vote-foot { align-items: flex-start; }
  body[data-page="home"] .vote-live { line-height: 1.5; }
  body[data-page="home"] .tb-cta { min-height: 500px; gap: 24px; padding: 72px 20px 80px; }
  body[data-page="home"] .tb-cta h2 { max-width: 8ch; font-size: clamp(2.467rem, 11.333vw, 3.467rem); }
  body[data-page="home"] .tb-cta p { max-width: 32ch; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .reveal,
  .campaign-hero-media,
  .campaign-copy,
  .home-film-btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* PRODUCT EDITORIAL MASTER --------------------------------------------------
   Real assets, a light editorial rhythm, and one honest dark validation beat. */
.product-page { background: #f7f5f0; color: #0a0b0d; }
.product-hero-editorial { padding: clamp(26px, 4vw, 56px) var(--edge) clamp(54px, 7vw, 96px); background: #f7f5f0; }
.product-hero-grid { width: min(var(--wrap), 100%); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap: clamp(26px, 4vw, 68px); align-items: start; }
.product-gallery-editorial { width: min(100%, 596px); min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; justify-self: center; position: sticky; top: calc(var(--nav-h) + 18px); }
.product-thumbs { display: flex; flex-direction: column; gap: 10px; }
.product-thumb { width: 82px; aspect-ratio: 1; overflow: hidden; border: 1px solid #d5d1ca; background: #fff; opacity: .62; transition: opacity .18s var(--ease-out), border-color .18s var(--ease-out); }
.product-thumb.on { opacity: 1; border-color: #0a0b0d; }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-main-media { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; background: #fff; border: 1px solid #dedad3; }
.product-main-media > img { width: 100%; height: 100%; object-fit: contain; }
.product-main-media figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; padding: 12px 15px; border-top: 1px solid rgba(10,11,13,.12); background: rgba(255,255,255,.9); font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.product-buybox { padding: clamp(12px, 2vw, 30px) 0; }
.product-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.product-buybox h1 { max-width: 9ch; font-family: var(--font-display); font-size: clamp(2.133rem, 4.133vw, 4.2rem); font-weight: 400; line-height: .86; letter-spacing: -.055em; }
/* 35ch put the English summary on eight lines against the Chinese four; 52ch is
   still a comfortable reading measure but halves the gap. */
.product-tagline { max-width: 52ch; margin-top: 22px; color: var(--ink-mute); font-size: clamp(.95rem, 1.25vw, 1.08rem); line-height: 1.65; }
.product-combination { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 25px; padding-block: 13px; border-block: 1px solid #cbc6be; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.product-combination b { color: var(--candy); }
.product-benefit-list { margin: 25px 0 0; padding: 0; list-style: none; border-top: 1px solid #cbc6be; }
.product-benefit-list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid #cbc6be; }
.product-benefit-list span, .product-label, .product-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.product-benefit-list span { color: var(--candy); padding-top: 2px; }
.product-benefit-list p { color: #292825; font-size: .88rem; line-height: 1.45; }
.product-choice, .product-size { margin-top: 24px; }
.product-label { display: block; margin-bottom: 10px; color: var(--ink-mute); }
.product-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.product-swatch { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #d3cec6; color: var(--ink-mute); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; }
.product-swatch.is-selected { border-color: #0a0b0d; color: #0a0b0d; }
.product-swatch-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.product-size strong { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; font-weight: 500; }
.product-waitlist { margin-top: 30px; padding: 20px; background: #ece8e1; }
.product-waitlist p { margin-bottom: 14px; color: var(--ink-mute); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; line-height: 1.5; }
.product-waitlist .btn { width: 100%; justify-content: center; }
.product-action-gate { margin-top: 30px; padding: 20px; border: 1px solid #beb9b1; background: #ece8e1; }
.product-action-gate p { margin-bottom: 14px; color: var(--ink-mute); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; line-height: 1.5; }
.product-action-gate .btn { width: 100%; justify-content: center; }
.product-disclaimer { margin-top: 14px; color: var(--ink-mute); font-size: .76rem; line-height: 1.55; }

.product-story { padding-block: clamp(76px, 10vw, 148px); }
.product-science { background: #e9e0d4; }
.product-story-grid { display: grid; grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr); gap: clamp(44px, 7vw, 120px); align-items: center; }
.product-kicker { display: block; margin-bottom: 18px; color: #dc3b7e; }
.product-story-copy h2, .product-section-head h2, .product-why-grid h2, .product-care-copy h2 { max-width: 12ch; font-family: var(--font-display); font-size: clamp(1.867rem, 3.867vw, 3.933rem); font-weight: 400; line-height: .92; letter-spacing: -.045em; }
.product-story-copy > p, .product-section-head > p, .product-why-grid > div > p, .product-care-copy > p { max-width: 52ch; margin-top: 24px; color: var(--ink-mute); font-size: .95rem; line-height: 1.78; }
/* 500×500 renders: square panel capped at native size, image contained — the
   media reads smaller but stays sharp (matches the WHY/CARE figures). */
.product-story-media { position: relative; min-width: 0; width: min(100%, 500px); aspect-ratio: 1 / 1; justify-self: end; overflow: hidden; background: #fff; }
.product-story-media img { width: 100%; height: 100%; object-fit: contain; }
.product-story-media figcaption { position: absolute; left: 14px; bottom: 12px; padding: 7px 9px; background: #f8f6f1; font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.product-spec-list { margin-top: 36px; border-top: 1px solid #bfb6aa; }
.product-spec-row { display: grid; grid-template-columns: minmax(100px, .42fr) 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid #bfb6aa; }
.product-spec-row dt { color: var(--ink-mute); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.product-spec-row dd { font-size: .83rem; line-height: 1.55; }

.product-anatomy { padding-block: clamp(78px, 10vw, 148px); background: #f5f3ee; }
.product-section-head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: clamp(28px, 6vw, 96px); align-items: end; }
.product-section-head .product-kicker { grid-column: 1 / -1; margin-bottom: -4px; }
.product-section-head > p { margin-top: 0; }
/* the exploded-structure render is also 500px — a taller well just adds white
   bands inside the border */
.product-anatomy-media { width: 100%; height: min(62vw, 500px); margin-top: clamp(40px, 6vw, 82px); overflow: hidden; background: #fff; border: 1px solid #e0ddd7; }
.product-anatomy-media img { width: 100%; height: 100%; object-fit: contain; }
.product-anatomy-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-left: 1px solid #d1ccc4; }
.product-anatomy-list li { min-height: 118px; padding: 19px 18px; border-right: 1px solid #d1ccc4; border-bottom: 1px solid #d1ccc4; }
.product-anatomy-list span { color: #dc3b7e; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.product-anatomy-list p { max-width: 24ch; margin-top: 20px; font-size: .84rem; line-height: 1.5; }

.product-ritual-story { padding-block: clamp(78px, 10vw, 148px); background: #fff; }
/* The step cards became rounded tiles with their own outline (see §1 and §5 of
   the KX layer). The container's table hairlines were the old flat-grid drawing
   scheme and now render as a stray rule above and to the left of the group, so
   they go with the per-card right/bottom rules they used to close. */
.product-step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(42px, 6vw, 84px); }
.product-step-card { min-width: 0; background: #f8f7f3; }
.product-step-card figure { aspect-ratio: 1; overflow: hidden; background: #fff; }
.product-step-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .product-step-card:hover img { transform: scale(1.025); } }
.product-step-copy { min-height: 190px; padding: 20px; }
.product-step-copy > span { color: #dc3b7e; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.product-step-copy h3 { margin-top: 26px; font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; }
.product-step-copy p { margin-top: 10px; color: var(--ink-mute); font-size: .8rem; line-height: 1.6; }

/* The band bleeds full-width; --pad-x keeps the grid inside the centered 1440px
   column. The figure is a square capped at 500px — the product renders are
   500×500, so any larger panel either upscales the image (blur) or letterboxes
   it against a visible plate. Square panel + square source = the image fills it
   exactly at native resolution, no white bars. */
.product-why-story { background: #ead7df; padding: clamp(40px, 5vw, 64px) var(--pad-x); }
.product-why-grid { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; }
.product-why-grid figure { width: min(100%, 500px); aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.product-why-grid figure img { width: 100%; height: 100%; object-fit: contain; }
.product-why-grid > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px) clamp(36px, 4.5vw, 72px); }
.product-why-grid ul { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(10,11,13,.28); }
.product-why-grid li { padding: 14px 0; border-bottom: 1px solid rgba(10,11,13,.28); font-size: .84rem; line-height: 1.5; }

.product-care-story { padding-block: clamp(40px, 5vw, 64px); background: #dfe5e5; }
.product-care-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(42px, 7vw, 112px); align-items: center; }
/* same rule as the WHY figure: the renders are 500×500, so the panel is a
   square capped at 500px and the image fills it at native resolution — no
   cover upscale, no letterbox plate. Kept on the column's outer line. */
.product-care-grid > figure { width: min(100%, 500px); aspect-ratio: 1 / 1; justify-self: end; overflow: hidden; background: #fff; }
.product-care-grid > figure img { width: 100%; height: 100%; object-fit: contain; }
.product-care-steps { margin-top: 42px; border-top: 1px solid #afb9ba; }
.product-care-steps article { display: grid; grid-template-columns: 34px minmax(110px, .45fr) 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid #afb9ba; align-items: start; }
.product-care-steps span { color: #dc3b7e; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; padding-top: 3px; }
.product-care-steps h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; }
.product-care-steps p { color: var(--ink-mute); font-size: .78rem; line-height: 1.6; }

.product-trust-story { padding-block: clamp(78px, 10vw, 148px); background: #111318; color: #f7f5f0; }
.product-trust-story .product-section-head h2 { color: #f7f5f0; }
.product-trust-story .product-section-head > p { color: var(--ink-mute-ondark); }
.product-validation-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(42px, 6vw, 78px); border-top: 1px solid #343840; border-left: 1px solid #343840; }
.product-validation-grid article { min-height: 230px; padding: 25px; border-right: 1px solid #343840; border-bottom: 1px solid #343840; }
.product-validation-grid span { color: var(--candy); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.product-validation-grid h3 { margin-top: 42px; color: #fff; font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; }
.product-validation-grid p { margin-top: 14px; color: var(--ink-mute-ondark); font-size: .8rem; line-height: 1.7; }
.product-trust-columns { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: clamp(30px, 5vw, 72px); margin-top: 58px; }
.product-trust-columns > div > h3 { margin-bottom: 18px; color: #fff; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.product-trust-columns ul { margin: 0; padding-left: 1rem; color: var(--ink-mute-ondark); }
.product-trust-columns li { margin-bottom: 9px; font-size: .78rem; line-height: 1.55; }
.product-claim-tier { margin-bottom: 22px; }
.product-claim-tier .k { margin-bottom: 10px; color: var(--candy); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.product-claim-tier ul { border-top: 1px solid #343840; padding: 0; list-style: none; }
.product-claim-tier li { margin: 0; padding: 9px 0; border-bottom: 1px solid #343840; }

.product-film { background: #f0ede7; border-top: 0; }
.product-film .sec-head h2 { max-width: 12ch; margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.733rem, 3.333vw, 3.333rem); font-weight: 400; line-height: .95; }
.product-film #pdpDemo { display: grid; place-items: center; margin-top: 18px; }
.product-film .pdp-demo { width: min(100%, 520px); }
.product-film .demo-frame { width: 100%; max-width: none; border: 0; }
.product-related { background: #e6e1da; }

/* Homepage light rhythm after the image-led opening. */
body[data-page="home"] .nav.shrink { background: rgba(248,246,241,.95); border-bottom-color: rgba(10,11,13,.16); }
body[data-page="home"] .nav.shrink .nav-brand .mark { color: #0a0b0d; background: transparent; border-color: #0a0b0d; }
body[data-page="home"] .nav.shrink .nav-brand b,
body[data-page="home"] .nav.shrink .nav-links a,
body[data-page="home"] .nav.shrink .nav-tools,
body[data-page="home"] .nav.shrink .nav-tools a { color: #0a0b0d; }
body[data-page="home"] .nav.shrink .lang-toggle { border-color: #0a0b0d; }
body[data-page="home"] .nav.shrink .lang-toggle button { color: #0a0b0d; }
body[data-page="home"] .nav.shrink .lang-toggle button.on { color: #fff; background: #0a0b0d; }
.object-link { color: #0a0b0d; border-bottom-color: rgba(10,11,13,.72); }
.ritual { background: #f3f0ea; color: #0a0b0d; }
.ritual-intro h2 { color: #0a0b0d; }
.ritual-intro p { color: var(--ink-mute); }
.ritual-state figure { background: #fff; }
.ritual-state h3 { color: #0a0b0d; }
.ritual-state p { color: var(--ink-mute); }
.lab-vote { background: #eadbe2; color: #0a0b0d; }
body[data-page="home"] .vote-box { border-color: rgba(10,11,13,.24); background: rgba(248,246,241,.76); color: #0a0b0d; }
body[data-page="home"] .vote-box h2 { color: #0a0b0d; }
body[data-page="home"] .vote-box .sub, body[data-page="home"] .vote-live { color: var(--ink-mute); }
body[data-page="home"] .vote-opts { border-top-color: rgba(10,11,13,.22); }
body[data-page="home"] .vote-opt, body[data-page="home"] .vote-opt.on { color: #0a0b0d; border-bottom-color: rgba(10,11,13,.22); }
body[data-page="home"] .vote-opt .k { color: var(--ink-mute); }

@media (hover: hover) and (pointer: fine) {
  .product-thumb:hover { opacity: 1; border-color: #0a0b0d; }
}

/* Desktop hero cluster. Three fixes in one: the grid was laid out at 1760px so
   the thumbnail rail and the buy box spilled past the site's 1440px column;
   the flexible middle track left ~240px of dead space on either side of the
   main image; and the 500px image sat top-aligned against a 777px text column.
   Both tracks are now content-sized (thumbs+image = 596, text capped for a
   readable measure) so the tightened cluster stays centred inside the column,
   and the image centres vertically against the taller text column. */
@media (min-width: 981px) {
  .product-hero-grid {
    /* Both tracks carry a floor and a cap. An `auto` gallery track collapsed to
       min-content on narrow desktops (the image fell to 156px while the text
       kept 612px); with matching floors the two shrink together instead. */
    grid-template-columns: minmax(300px, 596px) minmax(300px, 660px);
    justify-content: center;
    align-items: center;
    gap: clamp(36px, 4.2vw, 76px);
  }
  .product-main-media { align-self: center; }
}

@media (max-width: 980px) {
  .product-hero-grid { grid-template-columns: 1fr; }
  .product-gallery-editorial { position: static; }
  .product-buybox { width: min(700px, 100%); }
  .product-story-grid, .product-care-grid { grid-template-columns: 1fr; }
  .product-story-media { order: -1; justify-self: start; }
  .product-section-head { grid-template-columns: 1fr; }
  .product-section-head .product-kicker { grid-column: auto; }
  .product-step-grid { grid-template-columns: repeat(2, 1fr); }
  .product-why-grid { grid-template-columns: 1fr; min-height: 0; }
  /* the 500×500 renders are contained, so the panel is square: the image fills
     it edge to edge instead of sitting between letterbox bars */
  .product-why-grid figure { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .product-care-grid > figure { order: -1; width: min(100%, 500px); aspect-ratio: 1 / 1; justify-self: start; }
  .product-trust-columns { grid-template-columns: 1fr 1fr; }
  .product-trust-columns > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .product-hero-editorial { padding-inline: 16px; }
  body[data-page="product"] .nav-brand b { white-space: nowrap; font-size: .9rem; }
  body[data-page="product"] .nav-tools { gap: .55rem; }
  .product-gallery-editorial { width: min(100%, 500px); display: flex; flex-direction: column; }
  .product-main-media { order: -1; }
  .product-thumbs { flex-direction: row; overflow-x: auto; padding-bottom: 2px; }
  .product-thumb { width: 58px; flex: 0 0 58px; }
  .product-buybox h1 { font-size: clamp(2rem, 10vw, 2.933rem); }
  .product-story-copy h2, .product-section-head h2, .product-why-grid h2, .product-care-copy h2 { font-size: clamp(1.767rem, 8.667vw, 2.667rem); }
  .product-anatomy-media { height: min(84vw, 460px); }
  .product-anatomy-list { grid-template-columns: repeat(2, 1fr); }
  .product-step-grid { grid-template-columns: 1fr 1fr; }
  .product-step-copy { min-height: 174px; padding: 16px; }
  .product-step-copy h3 { margin-top: 20px; font-size: 1.4rem; }
  /* the section's --pad-x already insets the column; zero the horizontal
     padding so the copy shares the figure's left line */
  .product-why-grid > div { padding: 56px 0 64px; }
  .product-care-steps article { grid-template-columns: 28px 1fr; }
  .product-care-steps p { grid-column: 2; }
  .product-validation-grid { grid-template-columns: 1fr; }
  .product-validation-grid article { min-height: 190px; }
  .product-trust-columns { grid-template-columns: 1fr; }
  .product-trust-columns > div:first-child { grid-column: auto; }
  .product-film .sec-head { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .product-step-card img, .product-thumb { transition: none; }
}
/* ============================================================================
   Shared inner-page editorial system — Buddie-informed, Beauty Charms owned
   ========================================================================== */
:root {
  --editorial-ivory: #f6f2e9;
  --editorial-paper: #fbfaf6;
  --editorial-silver: #dfe5e5;
  --editorial-blush: #ead8dc;
  --editorial-sand: #e6dfd3;
  --editorial-blue: #d6e1e4;
  --editorial-ink: #0a0b0d;
  --editorial-muted: var(--ink-mute);
}
body:not([data-page="home"]):not([data-page="product"]) { background: var(--editorial-paper); }
.inner-kicker {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: #dd4d82;
}
.inner-hero {
  min-height: min(760px, calc(100svh - var(--nav-h))); display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: stretch;
  background: var(--editorial-ivory); color: var(--editorial-ink); overflow: hidden;
}
.inner-hero-copy {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 24px; padding: clamp(72px, 10vw, 150px) var(--edge) clamp(72px, 8vw, 120px);
}
.inner-hero h1 {
  max-width: 10ch; font-size: clamp(2.667rem, 4.8vw, 5.333rem); line-height: .86;
  letter-spacing: -.052em; text-wrap: balance;
}
.inner-hero-copy > p { max-width: 48ch; color: var(--ink-mute); font-size: clamp(.95rem, 1.25vw, 1.12rem); line-height: 1.75; }
.editorial-link {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 5px;
}
.inner-section { padding: clamp(88px, 11vw, 160px) var(--pad-x); }
.inner-section-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  align-items: end; gap: clamp(32px, 8vw, 140px); margin-bottom: clamp(48px, 7vw, 92px);
}
.inner-section-head h2 { max-width: 11ch; margin-top: 14px; font-size: clamp(2rem, 4vw, 4.4rem); line-height: .9; letter-spacing: -.045em; }
.inner-section-head > p { max-width: 46ch; color: var(--editorial-muted); line-height: 1.75; }
.inner-cta {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 8vw, 140px);
  align-items: end; padding: clamp(44px, 5.5vw, 80px) var(--pad-x); background: var(--editorial-silver);
}
.inner-cta h2 { max-width: 12ch; margin-top: 14px; font-size: clamp(2rem, 4vw, 4.267rem); line-height: .9; letter-spacing: -.04em; }
.inner-cta > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.inner-cta p { max-width: 42ch; color: var(--ink-mute); line-height: 1.75; }

/* Shop — curated objects first, archive second. */
.shop-editorial-hero { background: #f4f1e9; }
.shop-hero-art { position: relative; min-height: 660px; background: #eef0ee; }
.shop-hero-object {
  position: absolute; display: block; transition: transform .42s var(--ease-out); isolation: isolate;
}
.shop-hero-object img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.shop-hero-object:nth-child(1) { width: 50%; height: 54%; left: 2%; top: 2%; }
.shop-hero-object:nth-child(2) { width: 48%; height: 48%; right: 2%; top: 8%; }
.shop-hero-object:nth-child(3) { width: 46%; height: 44%; left: 9%; bottom: 3%; }
.shop-hero-object:nth-child(4) { width: 44%; height: 42%; right: 5%; bottom: 0; }
.shop-hero-object span {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; padding: 5px 8px;
  background: rgba(250,249,245,.9); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
}
@media (hover: hover) and (pointer: fine) { .shop-hero-object:hover { transform: translateY(-6px) rotate(-1deg); } }
.shop-core { background: #fcfbf7; }
/* Merged shop intro: 01 hero + 02 core objects in one centered section. */
.shop-intro .inner-section-head h1 { max-width: 14ch; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4.4rem); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.shop-core-band { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: clamp(26px, 3.5vw, 44px); }
.shop-core-band p { max-width: 52ch; color: var(--editorial-muted); font-size: .92rem; line-height: 1.7; }
.shop-intro-jump { display: inline-block; margin-top: clamp(26px, 3.5vw, 44px); }
.shop-featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #c9cecc; }
.shop-feature-card { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(220px, .72fr); min-height: 520px; background: #f1f2ef; }
.shop-feature-card:nth-child(2), .shop-feature-card:nth-child(3) { background: #eee3e2; }
.shop-feature-media { position: relative; min-height: 420px; overflow: hidden; }
.shop-feature-media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .48s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .shop-feature-card:hover .shop-feature-media img { transform: scale(1.025); } }
.shop-feature-copy { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px; padding: clamp(28px, 4vw, 54px); }
.shop-feature-copy h3 { font-size: clamp(1.333rem, 2.333vw, 2.8rem); line-height: .92; }
.shop-feature-copy p { color: var(--ink-mute); line-height: 1.65; }
.shop-feature-copy .editorial-link { margin-top: 12px; }
.shop-catalog { background: var(--editorial-sand); }
.catalog-heading h2 { max-width: 9ch; }
.shop-filterbar {
  position: sticky; top: 64px; z-index: 9; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 0; background: color-mix(in srgb, var(--editorial-sand) 92%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid rgba(10,11,13,.25); border-bottom: 1px solid rgba(10,11,13,.25);
}
.shop-filterbar .shop-search { min-width: min(520px, 48vw); border: 0; border-bottom: 1px solid #0a0b0d; background: transparent; padding-inline: 0; }
.shop-filter-meta { display: flex; align-items: center; gap: 20px; }
.shop-filterbar .shop-sort { background: transparent; }
.shop-clear { border: 0; border-bottom: 1px solid currentColor; padding: 6px 0; background: transparent; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.shop-clear:disabled { opacity: .35; cursor: default; }
.shop-filter-groups { border-bottom: 1px solid rgba(10,11,13,.25); margin-bottom: clamp(38px,5vw,68px); }
.shop-filter-group { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: start; border-top: 1px solid rgba(10,11,13,.18); }
.shop-filter-label { padding-top: 22px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.shop-filter-group .shop-chiprail { min-width: 0; margin: 0; padding: 14px 0; }
.shop-chiprail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 18px 0 32px; margin: 0; }
.shop-chiprail::-webkit-scrollbar { display: none; }
.shop-chiprail .chip { flex: 0 0 auto; border-color: rgba(10,11,13,.3); background: transparent; }
.shop-chiprail .chip.on { background: #0a0b0d; color: #fff; }
.editorial-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.8vw, 42px) clamp(14px, 2vw, 28px); }
.editorial-product-grid .pcard { border: 0; background: transparent; box-shadow: none; }
.editorial-product-grid .pcard:hover { transform: none; box-shadow: none; }
.editorial-product-grid .pcard-media { aspect-ratio: 4 / 5; background: rgba(255,255,255,.48); }
.editorial-product-grid .pcard-media img { padding: 9%; }
.editorial-product-grid .pcard-body { border: 0; padding: 18px 0 0; }
.editorial-product-grid .pcard h3 { font-size: clamp(1.45rem, 2.1vw, 2.2rem); }
.shop-more-wrap { display: flex; justify-content: center; padding-top: clamp(48px, 7vw, 86px); }
.shop-more-wrap[hidden] { display: none; }

/* How it works — four visual chapters. */
.ritual-hero { background: var(--editorial-paper); }
.ritual-hero-media { position: relative; min-height: 660px; background: var(--editorial-silver); }
.ritual-hero-media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.ritual-hero-media figcaption { position: absolute; right: 24px; bottom: 20px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; }
.ritual-chapter {
  position: relative; min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
}
.ritual-chapter > figure { min-height: 720px; }
.ritual-chapter > figure img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.ritual-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: clamp(64px, 9vw, 140px) var(--edge); }
.ritual-copy h2 { max-width: 9ch; font-size: clamp(2.333rem, 4.267vw, 4.667rem); line-height: .88; letter-spacing: -.05em; }
.ritual-copy > p { max-width: 44ch; color: var(--ink-mute); font-size: 1.02rem; line-height: 1.8; }
.ritual-number { position: absolute; z-index: 2; top: 28px; left: var(--edge); font-family: var(--font-display); font-size: clamp(2.667rem, 6vw, 6rem); line-height: 1; opacity: .12; }
.ritual-carry { background: #f0e5e1; }
.ritual-carry > figure { background: #eee4df; }
.ritual-open { background: var(--editorial-blue); }
.ritual-open > figure { order: 0; background: #e7eceb; }
.ritual-open .ritual-copy { order: 1; }
.ritual-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.ritual-facts span { border: 1px solid rgba(10,11,13,.55); padding: 7px 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.ritual-use { background: #101214; color: #fff; }
.ritual-use .inner-kicker { color: #ef77a4; }
.ritual-use .inner-section-head > p { color: rgba(255,255,255,.6); }
.ritual-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* the films are 16:9; a tall portrait well cropped most of each frame away */
.ritual-video-card { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #202326; }
.ritual-video-card video { width: 100%; height: 100%; object-fit: cover; }
.ritual-video-card::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.78)); pointer-events: none; }
.ritual-video-card > div { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; }
.ritual-video-card > div span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; color: #ff8cb7; }
.ritual-video-card h3 { margin-top: 6px; font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
/* the whole frame is the play/pause target; the badge surfaces only while paused */
.ritual-video-card .video-toggle { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; border: 0; border-radius: inherit; color: #fff; background: transparent; cursor: pointer; }
.ritual-video-card .video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.ritual-video-card .video-toggle span { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(0,0,0,.38); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.ritual-video-card .video-toggle .mk-icon { font-size: 20px; margin-left: 2px; }
.ritual-video-card.playing .video-toggle span { opacity: 0; transform: scale(.82); }
.ritual-clean { background: var(--editorial-ivory); }
.ritual-clean > figure { background: #fff; }

/* Chapters 01 / 02 / 04 ran edge to edge, so their copy began at the viewport
   edge while every other section started at the shared 1440 column. Inset the
   split onto that column — the colour band still spans the page, because a
   background paints across the padding box. The percentage inside --pad-x
   resolves against this section's own width (the full page width), so the
   alignment is exact; a 100vw-based inset would sit a scrollbar-width off.
   The copy then drops its own outer gutter and keeps only the inner one, and
   the absolutely positioned numeral moves onto the same column edge. */
@media (min-width: 981px) {
  .ritual-chapter { padding-inline: var(--pad-x); }
  .ritual-chapter > .ritual-copy { padding-inline: 0 clamp(30px, 4vw, 70px); }
  .ritual-open > .ritual-copy { padding-inline: clamp(30px, 4vw, 70px) 0; }
  .ritual-number { left: var(--pad-x); }
}

.clean-sequence { width: 100%; list-style: none; padding: 0; border-top: 1px solid rgba(10,11,13,.3); }
.clean-sequence li { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid rgba(10,11,13,.3); }
.clean-sequence span { font-family: var(--font-mono); font-size: 9px; color: #d74980; }
.clean-sequence b { font-weight: 500; }
.ritual-loop { display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; padding: clamp(34px, 5vw, 64px) var(--pad-x); background: var(--editorial-blush); font-family: var(--font-display); font-size: clamp(1.2rem, 2.933vw, 3.333rem); white-space: nowrap; }
.ritual-loop i { font-style: normal; opacity: .35; }

@media (max-width: 1000px) {
  .inner-hero { grid-template-columns: 1fr; }
  .inner-hero-copy { min-height: 520px; }
  .shop-hero-art, .ritual-hero-media { min-height: 620px; }
  .shop-featured-grid { grid-template-columns: 1fr; }
  .inner-section-head { grid-template-columns: 1fr; gap: 24px; }
  .inner-cta { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  /* three 16:9 wells get too short to read below this width */
  .ritual-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .inner-hero-copy { min-height: auto; padding: 84px 20px 64px; }
  .inner-hero h1 { font-size: clamp(2.333rem, 10.667vw, 3.467rem); }
  .shop-hero-art, .ritual-hero-media { min-height: 500px; }
  .inner-section { padding: 78px 20px; }
  .inner-section-head { margin-bottom: 42px; }
  .inner-section-head h2, .inner-cta h2 { font-size: clamp(2rem, 9.333vw, 3.2rem); }
  .inner-cta { padding: 40px 20px; }
  .shop-feature-card { grid-template-columns: 1fr; min-height: 0; }
  .shop-feature-media { min-height: 390px; }
  .shop-feature-copy { min-height: 270px; }
  .shop-filterbar { top: 64px; align-items: stretch; flex-direction: column; padding-block: 14px; }
  .shop-filterbar .shop-search { min-width: 0; width: 100%; }
  .shop-filter-meta { justify-content: space-between; flex-wrap: wrap; }
  .shop-filter-group { grid-template-columns: 1fr; }
  .shop-filter-label { padding-top: 16px; }
  .shop-filter-group .shop-chiprail { padding-block: 12px 16px; }
  .editorial-product-grid { grid-template-columns: 1fr; gap: 46px; }
  .editorial-product-grid .pcard-media { aspect-ratio: 1 / 1.08; }
  .ritual-chapter { grid-template-columns: 1fr; min-height: 0; }
  .ritual-chapter > figure { min-height: 480px; order: 0; }
  .ritual-chapter .ritual-copy { order: 1; min-height: 520px; padding: 90px 20px 72px; }
  .ritual-copy h2 { font-size: clamp(2.133rem, 9.667vw, 3.4rem); }
  .ritual-video-grid { grid-template-columns: 1fr; }
  .ritual-loop { justify-content: flex-start; overflow-x: auto; font-size: 2rem; }
}
@media (hover: hover) and (pointer: fine) {
  .editorial-link:hover { color: #d74980; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-hero-object, .shop-feature-media img { transition: none; }
}

/* Lab — notes, process, evidence, status. */
.lab-editorial-hero { background: #ebe5dc; }
.lab-hero-media { position: relative; min-height: 660px; background: #f8f7f2; }
.lab-hero-media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.lab-hero-media figcaption { position: absolute; right: 24px; bottom: 20px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; }
.lab-notes { background: #f8f5ee; scroll-margin-top: calc(var(--nav-h) + 18px); }
.lab-notes-list { border-top: 1px solid rgba(10,11,13,.3); }
.lab-notes-list > article { display: grid; grid-template-columns: minmax(190px,.42fr) minmax(260px,.7fr) minmax(420px,1.25fr); gap: clamp(28px,5vw,82px); padding: clamp(38px,5vw,68px) 0; border-bottom: 1px solid rgba(10,11,13,.3); }
.lab-note-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .11em; }
.lab-note-meta b { padding: 6px 8px; border: 1px solid rgba(10,11,13,.42); font-weight: 500; }
.lab-note-title { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.lab-note-title > span { color: #d84980; font-family: var(--font-mono); font-size: 10px; }
.lab-note-title h3 { max-width: 15ch; font-size: clamp(1.45rem,2.1vw,2.35rem); line-height: 1; }
.lab-notes-list dl { margin: 0; }
.lab-notes-list dl > div { display: grid; grid-template-columns: 118px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(10,11,13,.18); }
.lab-notes-list dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.lab-notes-list dd { margin: 0; color: var(--ink-mute); font-size: .88rem; line-height: 1.65; }
.lab-stations { background: #dfe5e5; }
.lab-process-track { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: rgba(10,11,13,.22); }
.lab-station { display: grid; grid-template-rows: 330px auto; min-height: 560px; background: #edf0ef; }
.lab-station:nth-child(2), .lab-station:nth-child(5) { background: #ece0df; }
.lab-station figure { overflow: hidden; }
.lab-station figure img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; transition: transform .42s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lab-station:hover figure img { transform: scale(1.025); } }
.lab-station > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; }
.lab-station span, .lab-evidence-grid span, .lab-status-table span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; color: #d84980; }
.lab-station h3 { font-size: clamp(1.8rem, 2.8vw, 3.2rem); }
.lab-station p { color: var(--ink-mute); line-height: 1.7; }
.lab-evidence { background: #f7f3eb; }
.lab-evidence-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: rgba(10,11,13,.22); }
.lab-evidence-grid article { min-height: 370px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(28px,4vw,52px) 28px; background: #fbfaf6; }
.lab-evidence-grid article:nth-child(even) { background: #e6ddcf; }
.lab-evidence-grid h3 { font-size: clamp(1.8rem,2.6vw,3rem); line-height: .98; }
.lab-evidence-grid p { color: var(--ink-mute); line-height: 1.7; }
.lab-status-section { background: #151719; color: #fff; }
.lab-status-section .inner-section-head > p { color: rgba(255,255,255,.58); }
.lab-status-table { border-top: 1px solid rgba(255,255,255,.28); }
.lab-status-table a { display: grid; grid-template-columns: 90px 1.2fr .7fr 1fr; align-items: center; gap: 18px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.28); transition: color .18s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lab-status-table a:hover { color: #ff8bb6; transform: translateX(4px); } }
.lab-status-table strong { font-family: var(--font-display); font-size: clamp(1.6rem,2.5vw,2.8rem); font-weight: 400; }
.lab-status-table em { font-style: normal; color: rgba(255,255,255,.65); }
.lab-status-table b { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .08em; color: rgba(255,255,255,.62); }
.lab-manifesto { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: clamp(40px,8vw,140px); padding: clamp(72px,9vw,120px) var(--pad-x); background: #eadadd; }
.lab-manifesto h2 { max-width: 11ch; margin-top: 16px; font-size: clamp(2.4rem, 4.667vw, 5rem); line-height: .86; letter-spacing: -.05em; }
.lab-manifesto p { max-width: 42ch; color: var(--ink-mute); line-height: 1.8; }

/* How it works — product-specific paths before the shared film studies. */
.ritual-product-paths { background: #e3e8e6; }
.ritual-path-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: rgba(10,11,13,.25); }
.ritual-path-card { min-height: 470px; display: grid; grid-template-columns: minmax(190px,.8fr) minmax(0,1.2fr); background: #f8f5ee; }
.ritual-path-card:nth-child(2), .ritual-path-card:nth-child(3) { background: #eee0e1; }
.ritual-path-card figure { min-height: 100%; overflow: hidden; background: rgba(255,255,255,.55); }
.ritual-path-card img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .35s var(--ease-out); }
.ritual-path-card > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; padding: clamp(26px,4vw,52px); }
.ritual-path-card span, .ritual-path-card b { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; }
.ritual-path-card h3 { font-size: clamp(1.6rem,2.4vw,2.8rem); }
.ritual-path-card p { max-width: 35ch; color: var(--ink-mute); font-size: .88rem; line-height: 1.68; }
.ritual-path-card b { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(10,11,13,.3); color: #c9346f; }
@media (hover:hover) and (pointer:fine) { .ritual-path-card:hover img { transform: scale(1.025); } }

/* Safety — known/unknown, claim ladder, risk files. */
.safety-hero { min-height: 700px; display: grid; grid-template-columns: 1.1fr .45fr .45fr; background: #f7f2e9; }
.safety-hero-title { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 22px; padding: clamp(64px,8vw,110px) var(--edge); }
.safety-hero h1 { max-width: 10ch; font-size: clamp(2.667rem, 4.8vw, 5.333rem); line-height: .86; letter-spacing: -.052em; }
.safety-hero-title p { max-width: 46ch; color: var(--ink-mute); line-height: 1.78; }
.safety-known, .safety-unknown { display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; padding: clamp(60px,7vw,100px) clamp(24px,3.5vw,50px); }
.safety-known { background: #dce4e3; }
.safety-unknown { background: #ead9dc; }
.safety-known > span, .safety-unknown > span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; }
.safety-known ul, .safety-unknown ul { list-style: none; padding: 0; }
.safety-known li, .safety-unknown li { padding: 13px 0; border-bottom: 1px solid rgba(10,11,13,.28); font-size: .9rem; }
.safety-signal-row { display: grid; grid-template-columns: repeat(3,1fr); background: #111315; color: #fff; }
.safety-signal-row > div { min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px var(--edge); border-right: 1px solid rgba(255,255,255,.2); }
.safety-signal-row span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; color: #ff8ab5; }
.safety-signal-row b { font-weight: 400; }
.safety-claims { background: #fbfaf6; }
.claim-ladder { display: grid; gap: 1px; background: rgba(10,11,13,.22); }
.claim-ladder article { display: grid; grid-template-columns: 100px 1fr 160px; align-items: center; gap: 28px; min-height: 190px; padding: 30px clamp(24px,4vw,58px); background: #eef1ef; }
.claim-ladder article:nth-child(2) { background: #e9dedb; }
.claim-ladder .claim-empty { background: #151719; color: #fff; }
.claim-ladder article > span { font-family: var(--font-display); font-size: clamp(2rem, 3.333vw, 4rem); opacity: .22; }
.claim-ladder h3 { font-size: clamp(1.333rem, 2.267vw, 2.667rem); }
.claim-ladder p { max-width: 54ch; margin-top: 8px; color: var(--ink-mute); line-height: 1.65; }
.claim-ladder .claim-empty p { color: rgba(255,255,255,.6); }
.claim-ladder b { font-family: var(--font-mono); font-size: 9px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.safety-classification { background: #dfe5e5; }
.classification-matrix { border-top: 1px solid rgba(10,11,13,.3); }
.classification-matrix > div { display: grid; grid-template-columns: 80px 1fr 1fr; align-items: center; gap: 20px; padding: 26px 0; border-bottom: 1px solid rgba(10,11,13,.3); }
.classification-matrix span { font-family: var(--font-mono); font-size: 9px; color: #d84980; }
.classification-matrix strong { font-family: var(--font-display); font-size: clamp(1.6rem,2.6vw,3rem); font-weight: 400; }
.classification-matrix p { color: var(--ink-mute); }
.safety-risks { background: #f6f1e8; }
.risk-accordion { border-top: 1px solid #0a0b0d; }
.risk-accordion details { border-bottom: 1px solid #0a0b0d; }
.risk-accordion summary { list-style: none; display: grid; grid-template-columns: 130px 1fr 30px; align-items: center; gap: 20px; padding: 25px 0; cursor: pointer; }
.risk-accordion summary::-webkit-details-marker { display: none; }
.risk-accordion summary span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: #d84980; }
.risk-accordion summary strong { font-family: var(--font-display); font-size: clamp(1.5rem,2.8vw,3rem); font-weight: 400; }
.risk-accordion summary i { font-style: normal; font-size: 1.4rem; transition: transform .18s var(--ease-out); }
.risk-accordion details[open] summary i { transform: rotate(45deg); }
.risk-accordion details > div { padding: 0 30px 30px 150px; }
.risk-accordion details p { max-width: 64ch; color: var(--ink-mute); line-height: 1.75; }
.safety-status { background: #e8d9dc; }
.safety-status-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(10,11,13,.22); }
.safety-status-grid article { min-height: 330px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 13px; padding: 28px; background: #f1e7e8; }
.safety-status-grid article:nth-child(even) { background: #e1e6e5; }
.safety-status-grid span { font-family: var(--font-mono); font-size: 9px; color: #d84980; letter-spacing: .12em; }
.safety-status-grid h3 { font-size: clamp(1.8rem,2.6vw,3rem); }
.safety-status-grid p { color: var(--ink-mute); }
.safety-status-grid b { margin-top: 10px; border: 1px solid #0a0b0d; padding: 7px 9px; font-family: var(--font-mono); font-size: 9px; font-weight: 400; letter-spacing: .1em; }
.safety-disclaimer { display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 36px; padding: clamp(50px,7vw,90px) var(--edge); background: #111315; color: #fff; }
.safety-disclaimer > span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; color: #ff8ab5; }
.safety-disclaimer p { max-width: 70ch; color: rgba(255,255,255,.62); line-height: 1.7; }
.safety-disclaimer .btn { border-color: #fff; color: #fff; }

@media (max-width: 1000px) {
  .lab-notes-list > article { grid-template-columns: 170px 1fr; }
  .lab-notes-list dl { grid-column: 1 / -1; }
  .ritual-path-grid { grid-template-columns: 1fr; }
  .lab-process-track { grid-template-columns: repeat(2,1fr); }
  .lab-evidence-grid, .safety-status-grid { grid-template-columns: repeat(2,1fr); }
  .lab-manifesto { grid-template-columns: 1fr; }
  .safety-hero { grid-template-columns: 1fr 1fr; }
  .safety-hero-title { grid-column: 1 / -1; min-height: 540px; }
  .safety-disclaimer { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lab-notes-list > article { grid-template-columns: 1fr; }
  .lab-notes-list dl { grid-column: auto; }
  .lab-notes-list dl > div { grid-template-columns: 92px 1fr; }
  .ritual-path-card { min-height: 0; grid-template-columns: 1fr; }
  .ritual-path-card figure { min-height: 320px; }
  .lab-hero-media { min-height: 500px; }
  .lab-process-track, .lab-evidence-grid, .safety-status-grid { grid-template-columns: 1fr; }
  .lab-station { grid-template-rows: 300px auto; }
  .lab-evidence-grid article { min-height: 300px; }
  .lab-status-table a { grid-template-columns: 66px 1fr; }
  .lab-status-table em, .lab-status-table b { grid-column: 2; }
  .lab-manifesto { padding: 86px 20px; }
  .lab-manifesto h2 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .safety-hero { grid-template-columns: 1fr; }
  .safety-hero-title { grid-column: auto; min-height: 470px; padding: 74px 20px 58px; }
  .safety-hero h1 { font-size: clamp(2.4rem, 10.333vw, 3.467rem); }
  .safety-known, .safety-unknown { min-height: 300px; padding: 52px 20px; }
  .safety-signal-row { grid-template-columns: 1fr; }
  .claim-ladder article { grid-template-columns: 58px 1fr; }
  .claim-ladder article > b { grid-column: 2; }
  .classification-matrix > div { grid-template-columns: 48px 1fr; }
  .classification-matrix p { grid-column: 2; }
  .risk-accordion summary { grid-template-columns: 82px 1fr 22px; }
  .risk-accordion details > div { padding: 0 0 28px 102px; }
  .safety-disclaimer { padding: 64px 20px; }
}

/* ==========================================================================
   2026-08-01 evidence-led refinement
   The visual system stays editorial; public facts now follow the G1–G7 gate
   contract and distinguish concept visuals from physical/product evidence.
   ========================================================================== */
.foot-join,
.foot-evidence {
  display: inline-flex;
  width: fit-content;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .11em;
  line-height: 1.7;
  transition: color .18s var(--ease-out);
}
.foot-join:hover,
.foot-evidence:hover { color: var(--candy); }
.foot-evidence { flex: none; color: rgba(255,255,255,.74); }

.publication-hold {
  min-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(110px, 14vw, 210px) var(--edge);
  background: #f1eee7;
}
.publication-hold h1 {
  max-width: 15ch;
  margin: 24px 0 22px;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5vw, 5.4rem);
  font-weight: 400;
  line-height: .92;
}
.publication-hold p {
  max-width: 56ch;
  margin-bottom: 34px;
  color: var(--ink-mute);
  line-height: 1.75;
}

.product-spec-row dt small {
  display: block;
  margin-top: 6px;
  color: #c33b72;
  font-size: 7px;
  letter-spacing: .12em;
}
.product-validation-rail { background: #e4e8e5; border-top: 1px solid #c9cfcb; border-bottom: 1px solid #c9cfcb; }
.product-validation-rail > .wrap {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
}
.product-validation-rail > .wrap > div {
  min-height: 126px;
  padding: 24px 22px;
  border-right: 1px solid #c9cfcb;
}
.product-validation-rail > .wrap > div:first-child { border-left: 1px solid #c9cfcb; }
.product-validation-rail span {
  display: block;
  margin-bottom: 18px;
  color: #bb3569;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
}
.product-validation-rail strong {
  display: block;
  max-width: 28ch;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.55;
}

.product-risk-checkpoint:not(.concept-open-questions) { padding: clamp(72px,8vw,118px) var(--edge); background: #eadfe0; }
.product-risk-grid { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: clamp(44px,8vw,130px); align-items: start; }
.product-risk-copy h2 { max-width: 13ch; font-size: clamp(1.9rem,3.4vw,3.5rem); line-height: .92; }
.product-risk-copy p { max-width: 52ch; margin: 24px 0; color: var(--ink-mute); line-height: 1.75; }
.product-risk-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(10,11,13,.32); }
.product-risk-list li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; min-height: 108px; align-items: center; border-bottom: 1px solid rgba(10,11,13,.32); }
.product-risk-list span { color: #be356b; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.product-risk-list p { max-width: 50ch; color: #343735; line-height: 1.6; }
.product-decision-cta { border-block: 1px solid rgba(10,11,13,.2); background: #f4efe6; }

.lab-gates {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  margin-top: clamp(42px,6vw,78px);
  background: rgba(10,11,13,.22);
}
.lab-gates article {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px,3vw,44px);
  background: #eef1ef;
}
.lab-gates article:nth-child(2),
.lab-gates article:nth-child(5),
.lab-gates article:nth-child(7) { background: #eee2e1; }
.lab-gates span,
.lab-record-split > article > span,
.fda-vocabulary span,
.classification-split > article > span,
.evidence-summary-fields span {
  color: #c43870;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .13em;
}
.lab-gates h3 {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(1.55rem,2.3vw,2.6rem);
  font-weight: 400;
  line-height: .95;
}
.lab-gates p { margin-top: 16px; color: var(--ink-mute); line-height: 1.65; }
.lab-gates b {
  margin-top: 24px;
  border: 1px solid #101214;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .1em;
}
.lab-release-layers { background: #f3eee5; }
.lab-release-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: clamp(42px,6vw,78px); background: rgba(10,11,13,.24); }
.lab-release-grid article { min-height: 520px; display: flex; flex-direction: column; padding: clamp(34px,5vw,72px); background: #e2e8e5; }
.lab-release-grid .market-release-gate { background: #eadbdd; }
.release-gate-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .11em; }
.release-gate-top b { border: 1px solid currentColor; padding: 7px 9px; font-weight: 500; }
.lab-release-grid h3 { max-width: 11ch; margin-top: auto; font-size: clamp(1.8rem,3vw,3.3rem); line-height: .92; }
.lab-release-grid > article > p { max-width: 56ch; margin-top: 22px; color: var(--ink-mute); line-height: 1.72; }
.lab-release-grid ul { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(10,11,13,.28); }
.lab-release-grid li { padding: 13px 0; border-bottom: 1px solid rgba(10,11,13,.28); color: #333634; font-size: .86rem; line-height: 1.55; }
.lab-record-split {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  padding-inline: var(--pad-x);
  background: #d9dfdd;
}
.lab-record-split article { min-height: 480px; padding: clamp(62px,8vw,126px) var(--edge); }
.lab-record-split article:nth-child(2) { background: #eadde0; }
.lab-record-split h2 {
  max-width: 12ch;
  margin-top: 38px;
  font-size: clamp(2rem,3.7vw,4rem);
  line-height: .92;
}
.lab-record-split p { max-width: 48ch; margin-top: 28px; color: var(--ink-mute); line-height: 1.75; }

.safety-fda { background: #f4efe6; }
/* 02 lists five FDA terms, 03 lists four frameworks. A fixed five-track grid
   left 03 with an empty fifth column, so that row sat left of centre and every
   card was a fifth of the column instead of a quarter — 259px wide and 507px
   tall where four tracks give 328px and 396px. The track count follows the
   article count instead; the down-breakpoints below still take over. */
.fda-vocabulary {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  margin-top: clamp(42px,6vw,78px);
  background: rgba(10,11,13,.22);
}
@media (min-width: 1001px) {
  .fda-vocabulary:has(> article:nth-child(5)) { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
.fda-vocabulary article {
  min-height: 350px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #fbfaf6;
}
.fda-vocabulary article:nth-child(even) { background: #e4e9e6; }
/* was margin-top: auto — the kicker stayed at the top and the title + body were
   pushed to the bottom of the well, so every card's heading landed wherever its
   own text length left it: four titles at four different heights. */
.fda-vocabulary h3 {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem,2.4vw,2.7rem);
  font-weight: 400;
  line-height: .96;
}
.fda-vocabulary p { margin-top: 18px; color: var(--ink-mute); line-height: 1.68; }
/* the row tracks these cards share are set in the CARD ROW ALIGNMENT block at
   the end of the file — it has to win over the §1 gap rule */
.fda-sources { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: 34px; }
.fda-sources a {
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
}
.classification-split {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  margin-top: clamp(42px,6vw,78px);
  background: rgba(10,11,13,.24);
}
.classification-split article { min-height: 410px; padding: clamp(34px,5vw,70px); background: #edf1ef; }
.classification-split article:nth-child(2) { background: #eadde0; }
/* the 90-150px spacer here was a deliberate bottom-weighting; with only a
   kicker, a one-line title and three lines of copy it just left ~230px of dead
   air inside each card and pushed the pair past 600px tall */
.classification-split h3 {
  max-width: 18ch;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem,3.3vw,3.8rem);
  font-weight: 400;
  line-height: .94;
}
.classification-split p { max-width: 48ch; margin-top: 24px; color: var(--ink-mute); line-height: 1.7; }
.evidence-summary-fields {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  margin-top: clamp(42px,6vw,78px);
  background: rgba(10,11,13,.22);
}
.evidence-summary-fields > div {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: #f2e9e9;
}
.evidence-summary-fields > div:nth-child(even) { background: #e3e9e7; }
.evidence-summary-fields b { margin-top: 38px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; }
.evidence-summary-fields p { margin-top: 12px; color: var(--ink-mute); line-height: 1.55; }

@media (max-width: 1000px) {
  .product-validation-rail > .wrap { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-validation-rail > .wrap > div { border-bottom: 1px solid #c9cfcb; }
  .lab-gates,
  .fda-vocabulary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-risk-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .product-validation-rail > .wrap,
  .lab-gates,
  .fda-vocabulary,
  .lab-release-grid,
  .classification-split,
  .evidence-summary-fields,
  .lab-record-split { grid-template-columns: 1fr; }
  .product-validation-rail > .wrap > div { min-height: 0; border-left: 1px solid #c9cfcb; }
  .lab-gates article,
  .fda-vocabulary article { min-height: 280px; }
  .lab-record-split article { min-height: 390px; }
  .lab-release-grid article { min-height: 440px; }
  .classification-split article { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .lab-station figure img, .lab-status-table a, .risk-accordion summary i { transition: none; } }

/* Join — product context plus progressive signal form. */
.join-page { background: #f7f3eb; }
.join-experience { display: grid; grid-template-columns: minmax(420px,.82fr) minmax(540px,1.18fr); min-height: calc(100svh - var(--nav-h)); }
.join-story { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; padding: clamp(70px,8vw,120px) var(--edge); background: #dfe5e5; }
.join-story > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.join-story h1 { max-width: 9ch; font-size: clamp(2.667rem, 4.533vw, 4.933rem); line-height: .86; letter-spacing: -.052em; }
.join-story > div:first-child p { max-width: 46ch; color: var(--ink-mute); line-height: 1.78; }
.join-selected { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: end; }
.join-selected figure { height: 220px; background: rgba(255,255,255,.52); }
.join-selected img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.join-selected > div { display: flex; flex-direction: column; gap: 8px; }
.join-selected span, .join-promises span, .join-local-notice > span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.join-selected h2 { font-size: clamp(1.8rem,3vw,3.2rem); }
.join-selected p { color: var(--ink-mute); font-size: .88rem; }
.join-promises { display: flex; flex-wrap: wrap; gap: 8px; }
.join-promises span { border: 1px solid rgba(10,11,13,.42); padding: 7px 9px; }
.join-local-notice { padding: 22px; border: 1px solid rgba(10,11,13,.3); background: rgba(255,255,255,.28); }
.join-local-notice > span { color: #bc356b; }
.join-local-notice p { margin-top: 10px; color: var(--ink-mute); font-size: .84rem; line-height: 1.65; }
.join-form-shell { display: flex; flex-direction: column; justify-content: center; padding: clamp(64px,8vw,110px) clamp(28px,7vw,110px); background: #fbfaf6; }
.join-form-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 30px; border-bottom: 1px solid rgba(10,11,13,.25); }
.join-form-head h2 { max-width: 10ch; margin-top: 12px; font-size: clamp(1.667rem, 2.667vw, 3rem); line-height: .92; }
.join-progress { display: flex; gap: 8px; list-style: none; padding: 0; }
.join-progress li { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(10,11,13,.32); font-family: var(--font-mono); font-size: 9px; }
.join-progress li.on { color: #fff; background: #0a0b0d; border-color: #0a0b0d; }
.joinform-editorial { max-width: none; padding-top: clamp(38px,5vw,70px); }
.join-panel { border: 0; padding: 0; }
.join-panel[hidden] { display: none; }
.join-panel legend { max-width: 13ch; font-family: var(--font-display); font-size: clamp(1.533rem, 2.667vw, 2.867rem); line-height: .94; }
.join-panel > p { max-width: 52ch; margin: 14px 0 34px; color: var(--ink-mute); line-height: 1.7; }
.joinform-editorial .field { margin-bottom: 28px; }
.joinform-editorial .field input, .joinform-editorial .field textarea, .joinform-editorial .field select { background: transparent; }
.joinform-editorial .opt { background: transparent; }
.product-select-field select { width: 100%; min-height: 54px; border-color: rgba(10,11,13,.45); font-family: var(--font-mono); font-size: .76rem; }
.product-select-field optgroup { font-family: var(--font-sans); font-weight: 600; }
.interest-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 8px; }
.interest-option { position: relative; cursor: pointer; }
.interest-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.interest-option > span { min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 20px; border: 1px solid rgba(10,11,13,.32); background: transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.interest-option b { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; }
.interest-option small { font-family: var(--font-mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.interest-option.on > span { border-color: #0a0b0d; background: #0a0b0d; color: #fff; }
.interest-option input:focus-visible + span { outline: 2px solid #d63d79; outline-offset: 3px; }
.field-help { display: block; margin-top: 9px; color: var(--ink-mute); font-size: .76rem; line-height: 1.5; }
.field-error { display: block; min-height: 18px; margin-top: 7px; color: #bc315f; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; }
.join-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; }
.join-consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--ink-mute); font-size: .86rem; line-height: 1.6; }
.join-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: #0a0b0d; }
.email-subscribe { margin-top: 34px; padding: 28px; border: 1px solid rgba(10,11,13,.28); background: #eef1ef; }
.email-subscribe h3 { max-width: 18ch; margin: 12px 0 20px; font-family: var(--font-display); font-size: clamp(1.45rem,2.2vw,2.25rem); font-weight: 400; line-height: 1; }
.email-subscribe .join-subscribe-toggle { padding-bottom: 18px; }
.email-subscribe #joinEmailFields { padding-top: 22px; border-top: 1px solid rgba(10,11,13,.2); }
.email-subscribe #joinEmailFields[hidden] { display: none; }
.email-subscribe .field { margin-bottom: 16px; }
.subscription-status { min-height: 20px; margin-top: 14px; color: #9d305b; font-family: var(--font-mono); font-size: 9px; line-height: 1.55; letter-spacing: .04em; }
.join-success { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.join-success[hidden] { display: none; }
.join-success h2 { max-width: 10ch; font-size: clamp(2rem, 3.667vw, 4rem); line-height: .9; }
.join-success > p { max-width: 46ch; color: var(--ink-mute); line-height: 1.75; }
.join-success > div { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Privacy — quiet policy surface with an explicit local-data control. */
.privacy-hero { min-height: 640px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 24px; padding: clamp(80px,10vw,150px) var(--edge); background: #f5f1e8; }
.privacy-hero h1 { max-width: 12ch; font-size: clamp(2.667rem, 4.667vw, 5.067rem); line-height: .86; letter-spacing: -.052em; }
.privacy-hero > p { max-width: 58ch; color: var(--ink-mute); line-height: 1.78; }
.privacy-updated { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.privacy-updated b { border-left: 1px solid #0a0b0d; padding-left: 14px; font-weight: 400; }
.privacy-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(10,11,13,.2); }
.privacy-principles article { min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(32px,5vw,70px) var(--edge); background: #dfe5e5; }
.privacy-principles article:nth-child(2) { background: #e9dcdd; }
.privacy-principles article:nth-child(3) { background: #e8e0d4; }
.privacy-principles span { font-family: var(--font-display); font-size: clamp(2rem, 3.333vw, 4rem); opacity: .18; }
.privacy-principles h2 { font-size: clamp(1.333rem, 2vw, 2.267rem); }
.privacy-principles p { max-width: 38ch; color: var(--ink-mute); line-height: 1.7; }
.privacy-flow { background: #fbfaf6; }
.privacy-flowline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 18px; }
.privacy-flowline > div { min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 28px; background: #edf0ef; }
.privacy-flowline > div:nth-of-type(2) { background: #ede2df; }
.privacy-flowline > div:nth-of-type(3) { background: #e5ded2; }
.privacy-flowline > i { align-self: center; font-style: normal; font-size: 2.4rem; opacity: .3; }
.privacy-flowline span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: #d84980; }
.privacy-flowline b { font-family: var(--font-display); font-size: clamp(1.6rem,2.6vw,3rem); font-weight: 400; }
.privacy-records { background: #dfe5e5; }
.privacy-records-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(10,11,13,.25); }
.privacy-records-grid article { min-height: 520px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; padding: clamp(42px,7vw,96px); background: #edf0ef; }
.privacy-records-grid article:last-child { background: #f2e7e7; }
.privacy-records-grid h2 { max-width: 9ch; font-size: clamp(2rem, 3.333vw, 3.733rem); line-height: .9; }
.privacy-records-grid ul { list-style: none; width: 100%; padding: 0; border-top: 1px solid rgba(10,11,13,.28); }
.privacy-records-grid li { padding: 13px 0; border-bottom: 1px solid rgba(10,11,13,.28); color: var(--ink-mute); }
.privacy-control { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: clamp(40px,9vw,150px); padding: clamp(64px,8vw,110px) var(--edge); background: #ebe2d7; }
.privacy-control h2 { max-width: 10ch; margin-top: 14px; font-size: clamp(2rem, 4vw, 4.333rem); line-height: .9; }
.privacy-control > div:first-child p { max-width: 54ch; margin-top: 22px; color: var(--ink-mute); line-height: 1.75; }
.privacy-control > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
#privacyClearStatus { min-height: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: #98506a; }
.privacy-future { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 36px; padding: clamp(52px,7vw,88px) var(--edge); background: #111315; color: #fff; }
.privacy-future > span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: #ff8bb6; }
.privacy-future p { max-width: 68ch; color: rgba(255,255,255,.62); line-height: 1.7; }

@media (max-width: 980px) {
  .join-experience { grid-template-columns: 1fr; }
  .join-story { min-height: 850px; }
  .join-form-shell { min-height: 820px; }
  .privacy-flowline { grid-template-columns: 1fr; }
  .privacy-flowline > i { transform: rotate(90deg); }
  .privacy-control, .privacy-future { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .join-story { min-height: auto; padding: 90px 20px 70px; }
  .join-story h1 { font-size: clamp(2.467rem, 10.667vw, 3.467rem); }
  .join-selected { grid-template-columns: 120px 1fr; }
  .join-selected figure { height: 150px; }
  .join-form-shell { min-height: 760px; padding: 70px 20px; }
  .join-form-head { align-items: flex-start; flex-direction: column; }
  .interest-grid { grid-template-columns: 1fr; }
  .join-panel legend { font-size: clamp(1.667rem, 8vw, 2.533rem); }
  .join-actions { align-items: stretch; flex-direction: column-reverse; }
  .join-actions .btn { width: 100%; }
  .privacy-hero { min-height: 620px; padding: 90px 20px 70px; }
  .privacy-hero h1 { font-size: clamp(2.333rem, 10vw, 3.467rem); }
  .privacy-principles { grid-template-columns: 1fr; }
  .privacy-principles article { min-height: 300px; }
  .privacy-records-grid { grid-template-columns: 1fr; }
  .privacy-records-grid article { min-height: 460px; padding: 72px 20px; }
  .privacy-control { padding: 86px 20px; }
  .privacy-future { padding: 64px 20px; }
}

/* Product compact concept file — no fabricated full PDP when evidence is thin. */
.concept-hero { min-height: calc(100svh - var(--nav-h)); display: grid; grid-template-columns: 1.08fr .92fr; background: #f7f3eb; }
.concept-visual { min-height: 720px; background: #e5e9e7; }
.concept-main-media { position: relative; width: 100%; height: 100%; }
.concept-main-media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.concept-main-media figcaption { position: absolute; left: 24px; bottom: 20px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; }
.concept-typographic-cover { height: 100%; min-height: 720px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 20px; padding: clamp(50px,8vw,110px) var(--edge); background: #dfe5e5; }
.concept-typographic-cover > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: #d84980; }
.concept-typographic-cover strong { max-width: 9ch; font-family: var(--font-display); font-size: clamp(2.667rem, 4.667vw, 5.333rem); font-weight: 400; line-height: .86; letter-spacing: -.05em; }
.concept-typographic-cover p { max-width: 40ch; color: var(--ink-mute); }
.concept-file { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: clamp(60px,8vw,110px) clamp(32px,6vw,90px); }
.concept-tier { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: #d84980; }
.concept-file h1 { max-width: 10ch; font-size: clamp(2.4rem, 3.667vw, 4.267rem); line-height: .88; letter-spacing: -.045em; }
.concept-tagline { max-width: 44ch; color: var(--ink-mute); line-height: 1.72; }
.concept-file .product-waitlist { width: 100%; margin-top: auto; }
.concept-visual-atlas { padding: clamp(86px,10vw,140px) var(--edge); background: #f7f3eb; }
.concept-visual-atlas > header { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.55fr); gap: 32px; align-items: end; margin-bottom: clamp(44px,6vw,82px); }
.concept-visual-atlas > header h2 { max-width: 9ch; margin-top: 14px; font-size: clamp(2.133rem,4vw,4.267rem); line-height: .9; }
.concept-visual-atlas > header p { max-width: 48ch; color: var(--ink-mute); line-height: 1.7; }
.concept-visual-atlas > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: rgba(10,11,13,.18); }
.concept-visual-atlas figure { min-width: 0; background: #eef0ee; }
.concept-visual-atlas img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #f4f4f2; }
.concept-visual-atlas figcaption { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid rgba(10,11,13,.14); font-size: .733rem; }
.concept-visual-atlas figcaption span { font-family: var(--font-mono); font-size: 9px; color: #d84980; }
.concept-summary { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,9vw,150px); padding: clamp(90px,12vw,170px) var(--pad-x); background: #eadbdd; }
.concept-summary h2 { max-width: 10ch; margin-top: 14px; font-size: clamp(2.133rem, 4vw, 4.333rem); line-height: .9; }
.concept-summary dl { border-top: 1px solid rgba(10,11,13,.35); }
.concept-summary dl > div { padding: 22px 0; border-bottom: 1px solid rgba(10,11,13,.35); }
.concept-summary dt { margin-bottom: 9px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: #c33f70; }
.concept-summary dd { color: var(--ink-mute); line-height: 1.7; }
.concept-open-questions { padding: clamp(90px,12vw,170px) var(--pad-x); background: #dfe5e5; }
.concept-open-questions header h2 { max-width: 10ch; margin: 14px 0 clamp(50px,8vw,100px); font-size: clamp(2.133rem, 4vw, 4.267rem); line-height: .9; }
.concept-open-questions > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(10,11,13,.25); }
.concept-open-questions article { min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 28px; background: #edf0ef; }
.concept-open-questions article:nth-child(2) { background: #ede2df; }
.concept-open-questions span { font-family: var(--font-mono); font-size: 9px; color: #d84980; }
.concept-open-questions h3 { font-size: clamp(1.267rem, 2vw, 2.267rem); }
.concept-open-questions p { color: var(--ink-mute); line-height: 1.7; }
@media (max-width: 900px) { .concept-hero, .concept-summary { grid-template-columns: 1fr; } .concept-visual { min-height: 620px; } .concept-file { min-height: 720px; } .concept-visual-atlas > div { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) { .concept-visual, .concept-typographic-cover { min-height: 520px; } .concept-file { min-height: 680px; padding: 76px 20px; } .concept-file h1 { font-size: clamp(2.333rem, 10vw, 3.333rem); } .concept-visual-atlas { padding: 86px 20px; } .concept-visual-atlas > header { grid-template-columns: 1fr; } .concept-visual-atlas > div { grid-template-columns: 1fr; } .concept-summary { padding: 86px 20px; } .concept-open-questions { padding: 86px 20px; } .concept-open-questions > div { grid-template-columns: 1fr; } .concept-open-questions article { min-height: 280px; } }

/* Shared compact navigation — preserve a single-line identity at phone widths. */
@media (max-width: 700px) {
  .nav { padding-inline: 14px; gap: 8px; }
  .nav-left { min-width: 0; gap: .6rem; }
  .nav-brand { min-width: 0; flex: 0 0 auto; gap: .45rem; white-space: nowrap; }
  .nav-brand .mark { width: 30px; height: 30px; flex: 0 0 30px; }
  .nav-brand b { font-size: 1rem; white-space: nowrap; }
  .nav-tools { flex: 0 0 auto; gap: .45rem; }
  .lang-toggle button { padding: .32em .5em; }
  .nav-menu-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; }
  .bc-ss-cur, .bc-ss-caret { display: none; }
  .bc-ss-btn { padding-inline: .55em; }
}
/* Display typography recalibration — 2026-07-31
   User-directed: oversized display type is 2/3 of the prior scale. Wider
   measure removes decorative wraps when the available column can hold a line. */
.campaign-copy h1,
.ritual-intro h2,
.home-demos-head h2,
body[data-page="home"] .vote-box h2,
body[data-page="home"] .tb-cta h2,
.product-buybox h1,
.product-story-copy h2,
.product-section-head h2,
.product-why-grid h2,
.product-care-copy h2,
.product-film .sec-head h2,
.inner-hero-copy h1,
.inner-section-head h2,
.inner-cta h2,
.catalog-heading h2,
.ritual-copy h2,
.lab-manifesto h2,
.safety-hero h1,
.join-story h1,
.join-form-head h2,
.join-panel legend,
.join-success h2,
.privacy-hero h1,
.privacy-records-grid h2,
.privacy-control h2,
.concept-typographic-cover strong,
.concept-file h1,
.concept-summary h2,
.concept-open-questions header h2 {
  width: 100%;
  max-width: none;
}

/* Phone editorial density — keep the message in view without sacrificing the
   full-bleed imagery or the established 2/3 desktop display scale. */
@media (max-width: 700px) {
  .inner-hero-copy { padding: 68px 20px 54px; }
  .inner-hero h1,
  .safety-hero h1,
  .join-story h1,
  .privacy-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); line-height: .9; }
  .lab-hero-media,
  .shop-hero-art,
  .ritual-hero-media { min-height: 430px; }
  .join-story { padding: 74px 20px 58px; }
  .privacy-hero { min-height: 520px; padding: 72px 20px 58px; }
}

/* ============================================================================
   KX / KINETIC TRANSFER — shared component primitives
   ----------------------------------------------------------------------------
   Ported from NewStyle/stitch_reference_driven_pc_web_design (component anatomy
   and interaction only). The reference dark palette is NOT used: every surface
   below is remapped onto this build light "Lab Editorial" tokens.
   Naming: kx-* so nothing collides with the existing component families.
   ========================================================================== */
:root {
  --kx-tile: #fcfcfc;          /* flat-ground card fill (was a translucent glass) */
  --kx-hairline: rgba(0,0,0,.10);
  --kx-wash: rgba(0,0,0,.045);
  --kx-glow: rgb(var(--candy-rgb) / .30);
  --kx-tint: rgb(var(--candy-rgb) / .10);
}

/* ---- Shared component primitives ------------------------------------------ */
.kx-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Glass panel — the reference white-on-black frosting inverted for light ground. */
.kx-glass {
  background: var(--kx-tile);
  border: 1px solid var(--kx-hairline);
}
.kx-glow-border { transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.kx-glow-border:hover { border-color: var(--candy); box-shadow: inset 0 0 12px rgb(var(--candy-rgb) / .20); }

/* Status badge: outlined frame + pulsing dot + mono uppercase code. */
.kx-badge {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .38em .8em; border: 1px solid rgb(var(--candy-rgb) / .36);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--candy);
}
.kx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--candy); flex: none; }

/* Chip grammar: outline / solid / tinted, all mono 10px. */
.kx-chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  padding: .45em .7em; white-space: nowrap;
}
.kx-chip--outline { border: 1px solid rgb(var(--candy-rgb) / .4); color: var(--candy); }
.kx-chip--solid { background: var(--ink); color: #fff; }
.kx-chip--candy { background: var(--candy); color: #fff; }
.kx-chip--tint { background: var(--kx-tint); border: 1px solid rgb(var(--candy-rgb) / .3); color: var(--candy); }
.kx-chip--mute { background: rgba(0,0,0,.05); border: 1px solid var(--kx-hairline); color: var(--on-surface-var); }

/* Glowing progress line. */
.kx-progress { height: 4px; width: 100%; background: rgba(0,0,0,.12); border-radius: 999px; overflow: hidden; }
.kx-progress > i { display: block; height: 100%; background: var(--candy); box-shadow: 0 0 10px rgb(var(--candy-rgb) / .6); }


/* ============================================================================
   KX / HOME — reference section vocabulary applied to the existing home layout
   Sections keep their current structure and JS hooks; only the component
   anatomy and hover choreography are ported from the Stitch home reference.
   ========================================================================== */

/* ---- pill buttons (reference hero CTA pair) -------------------------------- */
.kx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  width: max-content; padding: .95em 2em; border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out),
              border-color .18s var(--ease-out), box-shadow .18s var(--ease-out),
              transform .12s var(--ease-out);
}
.kx-btn:active { transform: scale(.97); }
.kx-btn--light { background: #fff; color: #0a0b0d; }
.kx-btn--light:hover { background: var(--candy); color: #fff; box-shadow: 0 0 24px rgb(var(--candy-rgb) / .40); }
.kx-btn--glass {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.kx-btn--glass:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.5); }
.kx-btn--ink { background: var(--ink); color: #fff; }
.kx-btn--ink:hover { background: var(--candy); box-shadow: 0 0 24px rgb(var(--candy-rgb) / .35); }
.kx-btn--outline { background: none; color: var(--ink); border-color: var(--ink); }
.kx-btn--outline:hover { border-color: var(--candy); color: var(--candy); }

/* ---- status badge on a dark ground ---------------------------------------- */
.kx-badge--ondark {
  border-color: rgb(var(--candy-rgb) / .55); background: rgb(var(--candy-rgb) / .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #ffd0e6;
}
.campaign-kicker.kx-badge { width: max-content; margin-bottom: 1.4rem; letter-spacing: .14em; }

/* ---- hero scroll indicator gains the reference gradient rule ---------------
   Styled on .campaign-scroll directly rather than via an extra class: the
   content-depth contract test asserts that anchor's exact class attribute. */
.campaign-scroll { align-items: flex-end; }
.kx-scroll-rule {
  display: block; width: 1px; height: 56px; margin-left: .2rem;
  background: linear-gradient(to bottom, var(--candy), transparent);
}

/* ---- 02 / product films — glass transport + rail hover -------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-film-btn:hover { transform: scale(1.08); }
  .home-film-tab:hover { transform: translateY(-2px); box-shadow: var(--kx-shadow); }
}
/* ---- needs index — concept-card grammar (mono id + arrow reveal) ----------- */
.tb-need { position: relative; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.tb-need:hover { border-color: var(--candy); }
.tb-need .arw {
  opacity: 0; transform: translateX(-6px); color: var(--candy);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
a.tb-need:hover .arw, a.tb-need:focus-visible .arw { opacity: 1; transform: none; }

/* ---- vote — gradient-lit selection cards ---------------------------------- */
.vote-opt { position: relative; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.vote-opt:hover { border-color: var(--candy); box-shadow: inset 0 0 14px rgb(var(--candy-rgb) / .14); }
.vote-opt.on { border-color: var(--candy); background: linear-gradient(135deg, rgb(var(--candy-rgb) / .10), transparent 60%); }

/* ---- FAQ — glass card per row instead of a bare hairline ------------------- */
.lab-honesty .faq-item {
  border: 1px solid var(--kx-hairline); border-bottom: 1px solid var(--kx-hairline);
  background: var(--kx-tile);
  padding: .4rem 1.4rem; margin-bottom: .9rem;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.lab-honesty .faq-item:hover { border-color: rgb(var(--candy-rgb) / .45); }
.lab-honesty .faq-item.on { border-color: var(--candy); box-shadow: inset 0 0 14px rgb(var(--candy-rgb) / .10); }

@media (prefers-reduced-motion: reduce) {
  .kx-btn, .home-film-btn, .home-film-tab,
  .tb-need .arw { transition: none !important; transform: none !important; }
  .tb-need .arw { opacity: 1; }
}

/* ============================================================================
   KX / SHOP — reference "Core Objects Directory" card anatomy
   Filters keep their original position above the grid; only the card and
   pagination components below are ported from the reference.
   ========================================================================== */

/* ---- featured core objects — 4:5 overlay glass card ----------------------- */
.shop-feature-card.kx-feature {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--kx-hairline); background: var(--surface-low);
}
.kx-feature .shop-feature-media { position: absolute; inset: 0; display: block; margin: 0; }
.kx-feature .shop-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.kx-feature-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(249,249,249,.97) 6%, rgba(249,249,249,.72) 34%, rgba(249,249,249,.05) 62%, transparent 100%);
}
.kx-feature .shop-feature-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(18px, 2.4vw, 26px);
}
.kx-feature-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.kx-feature-title h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.05; }
.kx-feature .shop-feature-copy p { font-size: .84rem; line-height: 1.5; color: var(--on-surface-var); }
.kx-feature-cta {
  display: block; width: 100%; margin-top: .5rem; padding: .85em 1em; text-align: center;
  border: 1px solid var(--ink); background: none; color: var(--ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.kx-feature-cta:hover { background: var(--ink); color: #fff; }

/* ---- concept cards -------------------------------------------------------- */
.pcard.kx-glow-border { position: relative; }
.pcard .pcard-media { position: relative; }

/* ---- circular "load more" (reference pagination control) ------------------ */
.kx-more-wrap { display: flex; justify-content: center; padding-top: clamp(28px, 4vw, 48px); }
.kx-more {
  display: inline-flex; flex-direction: column; align-items: center; gap: .9rem;
  transition: transform .14s var(--ease-out);
}
.kx-more:active { transform: scale(.96); }
.kx-more-ring {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--kx-hairline); color: var(--outline);
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.kx-more:hover .kx-more-ring { border-color: var(--candy); background: var(--kx-tint); color: var(--candy); }
.kx-more-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}

/* ============================================================================
   KX / LAB + HOW-IT-WORKS — reference "Laboratory Framework" vocabulary
   ========================================================================== */

/* ---- G1–G7 stepper --------------------------------------------------------
   Four-state language from the reference: current (accent + node glow),
   in-progress (accent at 50%), terminal target (accent line at 20%), pending
   (grey). The state shown here is the project's real position: G1, nothing
   later cleared — the same fact lab.html states in prose.                   */
.kx-stepper { margin-top: clamp(36px, 5vw, 62px); padding: clamp(22px, 3vw, 34px); }
.kx-stepper ol {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.kx-stepper li {
  position: relative; flex: 1 1 108px; min-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 18px; text-align: center;
}
/* the rail segment for this step */
.kx-stepper li::before {
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 3px;
  background: rgba(10,11,13,.16);
}
.kx-stepper li > i {
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(10,11,13,.24); border: 4px solid var(--bg);
}
.kx-stepper li > span {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; color: var(--outline);
}
.kx-stepper li > b {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: .12em; color: var(--outline); line-height: 1.3;
}
.kx-stepper li.is-current::before { background: var(--candy); }
.kx-stepper li.is-current > i { background: var(--candy); box-shadow: 0 0 15px rgb(var(--candy-rgb) / .8); }
.kx-stepper li.is-current > span { color: var(--candy); }
.kx-stepper li.is-current > b { color: var(--ink); }
.kx-stepper li.is-target::before { background: rgb(var(--candy-rgb) / .22); }

/* ---- section heads gain the reference accent rule ------------------------- */
body[data-page="lab"] .inner-section-head > div > h2,
body[data-page="how-it-works"] .inner-section-head > div > h2 { margin-bottom: .7rem; }
body[data-page="lab"] .inner-section-head > div > h2::after,
body[data-page="how-it-works"] .inner-section-head > div > h2::after {
  content: ""; display: block; width: 96px; height: 4px; margin-top: .7rem; background: var(--candy);
}

/* ---- gate cards: the reached gate reads as live, the rest as dormant ------ */
.lab-gates article[data-mk-gate="reached"] {
  box-shadow: inset 0 0 0 1px rgb(var(--candy-rgb) / .55), inset 0 0 22px rgb(var(--candy-rgb) / .10);
}
.lab-gates article > b { display: inline-flex; align-items: center; gap: .5em; }
.lab-gates article[data-mk-gate="reached"] > b { border-color: var(--candy); color: #b32b6d; }

/* ---- R1 / M1 mirrored gate cards ------------------------------------------
   Identical anatomy; the blocked card is the active card degraded through
   alpha only, exactly as the reference does it.                            */
.lab-release-grid article { position: relative; }
.lab-release-grid article::after {
  content: ""; position: absolute; top: clamp(22px, 3vw, 34px); right: clamp(22px, 3vw, 34px);
  width: 26px; height: 26px; opacity: .5; pointer-events: none;
  background: currentColor;
  -webkit-mask: var(--kx-gate-icon) center / contain no-repeat;
  mask: var(--kx-gate-icon) center / contain no-repeat;
}
/* eye = research display permitted */
.lab-release-grid .research-disclosure-gate {
  color: #b32b6d;
  --kx-gate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
}
/* lock = commercial release blocked */
.lab-release-grid .market-release-gate {
  color: #6a6a6a;
  --kx-gate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M7.2 10.2V7.4a4.8 4.8 0 0 1 9.6 0v2.8'/%3E%3Crect x='5.4' y='10.2' width='13.2' height='10.4'/%3E%3C/svg%3E");
}
.lab-release-grid .research-disclosure-gate .release-gate-top b { border-color: var(--candy); color: #b32b6d; }
.lab-release-grid .market-release-gate > h3,
.lab-release-grid .market-release-gate > p,
.lab-release-grid .market-release-gate ul { opacity: .62; }
.lab-release-grid .market-release-gate .release-gate-top { opacity: .55; }

/* ---- evidence grid: glass hover, colour resolves on hover ----------------- */
.lab-evidence-grid article { transition: box-shadow .4s var(--ease-out); }
.lab-evidence-grid article:hover { box-shadow: inset 0 0 0 1px rgb(var(--candy-rgb) / .45); }

@media (max-width: 900px) {
  .kx-stepper li { flex-basis: 84px; min-width: 76px; }
  .kx-stepper li > b { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-evidence-grid article { transition: none !important; }
}

/* ============================================================================
   KX / JOIN — reference "Join Validation" step machine + choice grammar
   ========================================================================== */

/* ---- progress rail above the wizard --------------------------------------- */
.kx-step-rail {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.4rem 0 2.2rem;
}
.kx-step-rail .kx-progress { flex: 1; height: 2px; border-radius: 0; }
.kx-step-rail .kx-progress > i { transition: width .7s ease-in-out; }
.kx-step-counter {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--candy); white-space: nowrap;
}

/* ---- choice cards: border tints and a trailing mark slides in ------------- */
.interest-option {
  position: relative;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.interest-option::after {
  content: "→"; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-family: var(--font-mono); font-size: 14px; color: var(--candy);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
/* the painted surface is the inner <span>, not the <label>; selection is driven
   by the .on class that theme-kinetic.js toggles, so no :has() is needed */
.interest-option:hover > span { border-color: rgb(var(--candy-rgb) / .6); }
.interest-option:hover::after,
.interest-option:focus-within::after { opacity: 1; transform: translateY(-50%); }
.interest-option.on::after { opacity: 1; transform: translateY(-50%); }

/* ---- the active object card reads as the reference summary chip-card ------ */
.join-selected {
  border: 1px solid var(--kx-hairline);
  background: var(--kx-tile);
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.join-selected:hover { border-color: rgb(var(--candy-rgb) / .45); box-shadow: inset 0 0 16px rgb(var(--candy-rgb) / .10); }
.join-selected > div > span {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--candy);
}

/* ---- privacy anchor strip -------------------------------------------------- */
.join-local-notice {
  border: 1px solid var(--kx-hairline);
  background: rgba(0,0,0,.03);
}

/* ---- final CTA: reference glow + press choreography ----------------------- */
.join-actions .btn-candy {
  border-radius: 999px;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out),
              box-shadow .18s var(--ease-out), transform .12s var(--ease-out);
}
.join-actions .btn-candy:hover { box-shadow: 0 0 20px rgb(var(--candy-rgb) / .42); transform: scale(1.02); }
.join-actions .btn-candy:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .kx-step-rail .kx-progress > i,
  .interest-option, .interest-option::after,
  .join-selected, .join-actions .btn-candy { transition: none !important; transform: none !important; }
  .interest-option::after { opacity: 1; transform: translateY(-50%); }
}

/* ============================================================================
   KX / PRODUCT DETAIL — reference "Donut Glow Archive" vocabulary
   ========================================================================== */

/* ---- archive-plate corner annotations on the hero ------------------------- */
.product-hero-editorial { position: relative; }
.kx-plate {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 0 var(--edge) clamp(14px, 2vw, 24px);
}
.kx-plate-l {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--outline);
}
.kx-plate-r { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ---- validation rail gains the reference beacon --------------------------- */
.product-validation-rail .wrap { position: relative; }

/* ---- risk list items read as glass cards ---------------------------------- */
.product-risk-list > li {
  background: var(--kx-tile);
  border: 1px solid var(--kx-hairline);
  transition: border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.product-risk-list > li:hover { border-color: var(--candy); box-shadow: inset 0 0 12px rgb(var(--candy-rgb) / .18); }

/* ---- ritual steps: the index becomes a ghost numeral ---------------------- */
.product-step-card { position: relative; }
.product-step-copy > span {
  display: block;
  font-family: var(--font-display) !important;
  font-size: clamp(40px, 4.4vw, 60px) !important;
  line-height: 1; letter-spacing: -.02em;
  color: var(--ink); opacity: .16;
  transition: color .3s var(--ease-out), opacity .3s var(--ease-out);
}
@media (hover: hover) {
  .product-step-card:hover .product-step-copy > span { color: var(--candy); opacity: .34; }
}

/* ---- care / maintenance mega-card with a corner watermark ----------------- */
.product-care-story { position: relative; overflow: hidden; }
.product-care-story::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 300px; height: 300px; opacity: .05; pointer-events: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='.9'%3E%3Cpath d='M9.2 3h5.6M10.4 3v6.1l-5.1 8.6A1.9 1.9 0 0 0 6.9 20.6h10.2a1.9 1.9 0 0 0 1.6-2.9L13.6 9.1V3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='.9'%3E%3Cpath d='M9.2 3h5.6M10.4 3v6.1l-5.1 8.6A1.9 1.9 0 0 0 6.9 20.6h10.2a1.9 1.9 0 0 0 1.6-2.9L13.6 9.1V3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.product-care-story > * { position: relative; z-index: 1; }

/* ---- section heads get the accent rule ------------------------------------ */
body[data-page="product"] .product-section-head h2 { margin-bottom: .7rem; }
body[data-page="product"] .product-section-head h2::after {
  content: ""; display: block; width: 96px; height: 4px; margin-top: .7rem; background: var(--candy);
}

@media (prefers-reduced-motion: reduce) {
  .product-risk-list > li, .product-step-copy > span { transition: none !important; }
}

/* ============================================================================
   KX / ROUNDED GLASS — global shape language override
   ----------------------------------------------------------------------------
   Supersedes the original "sharp 0px containers, bold 1px outlines, no shadows"
   rule stated at the top of this file. Approved 2026-08-04: the site adopts the
   reference's rounded-glass language.

   Light-theme translation of glassmorphism: the reference's frosting reads as
   depth because it sits on a dark photographic ground. On this porcelain ground
   a translucent fill is invisible, so depth is carried by radius + a hairline
   border + a soft shadow instead. Real backdrop-filter is reserved for layers
   that actually sit over imagery (hero overlays, media captions).

   To revert the site to its previous sharp language, delete this section.
   ========================================================================== */
:root {
  --kx-r-xs: 8px;
  --kx-r-sm: 12px;
  --kx-r: 16px;
  --kx-r-lg: 22px;
  --kx-r-xl: 28px;
  --kx-shadow-sm: 0 2px 10px rgba(10,11,13,.05);
  --kx-shadow: 0 8px 26px rgba(10,11,13,.07);
  --kx-shadow-lg: 0 18px 48px rgba(10,11,13,.10);
  --kx-tile-line: rgba(10,11,13,.10);
}

/* ---- 1 / hairline-divider grids become real gaps -------------------------
   These grids drew 1px dividers by leaking a dark parent background through a
   1px gap. Rounded corners would expose that fill as dark specks, so the trick
   is replaced by genuine gaps and per-tile borders.                        */
.shop-featured-grid,
.lab-process-track,
.lab-evidence-grid,
.ritual-path-grid,
.claim-ladder,
.safety-status-grid,
.lab-gates,
.lab-release-grid,
.fda-vocabulary,
.classification-split,
.evidence-summary-fields,
.privacy-principles,
.privacy-records-grid,
.concept-visual-atlas > div,
.concept-open-questions > div {
  gap: clamp(10px, 1.1vw, 16px);
  padding: 0;
  background: transparent;
}
.shop-featured-grid > *,
.lab-process-track > *,
.lab-evidence-grid > article,
.ritual-path-grid > *,
.claim-ladder > article,
.safety-status-grid > *,
.lab-gates > article,
.lab-release-grid > article,
.fda-vocabulary > article,
.classification-split > article,
.evidence-summary-fields > *,
.privacy-principles > article,
.privacy-records-grid > article,
.concept-visual-atlas > div > *,
.concept-open-questions > div > * {
  border-radius: var(--kx-r-lg);
  border: 1px solid var(--kx-tile-line);
  box-shadow: var(--kx-shadow-sm);
  overflow: hidden;
}
/* the two-column record split keeps its tonal halves but gains the same shape */
.lab-record-split { gap: clamp(10px, 1.1vw, 16px); background: transparent; }
.lab-record-split > article {
  border-radius: var(--kx-r-xl); border: 1px solid var(--kx-tile-line); box-shadow: var(--kx-shadow-sm);
}

/* ---- 2 / catalogue + feature cards ---------------------------------------- */
.pcard { border-radius: var(--kx-r-lg); overflow: hidden; box-shadow: var(--kx-shadow-sm); border: 1px solid var(--kx-tile-line); background: var(--paper); }
.pcard:hover { box-shadow: var(--kx-shadow); }
.pcard-media { border-radius: var(--kx-r-lg) var(--kx-r-lg) 0 0; overflow: hidden; }
.pcard-body { padding: 16px 18px 20px; }
.shop-feature-card.kx-feature { border-radius: var(--kx-r-xl); box-shadow: var(--kx-shadow); }
.shop-feature-card.kx-feature:hover { box-shadow: var(--kx-shadow-lg); }
.shop-hero-object { border-radius: var(--kx-r); overflow: hidden; }
.ritual-state figure { border-radius: var(--kx-r-lg); overflow: hidden; }
.ritual-path-card figure,
.ritual-path-card img { border-radius: var(--kx-r) var(--kx-r) 0 0; }
.ritual-video-card { border-radius: var(--kx-r-lg); overflow: hidden; border: 1px solid var(--kx-tile-line); box-shadow: var(--kx-shadow-sm); }

/* ---- 4 / needs index, vote, FAQ ------------------------------------------- */
.tb-need { border-radius: var(--kx-r); box-shadow: var(--kx-shadow-sm); }
.vote-box { border-width: 1px; border-radius: var(--kx-r-xl); box-shadow: var(--kx-shadow); }
.vote-opt { border-width: 1px; border-radius: var(--kx-r); }
.vote-bar { border-radius: 999px; overflow: hidden; }
.lab-honesty .faq-item { border-radius: var(--kx-r-lg); }
.study, .study img { border-radius: var(--kx-r-lg); }

/* ---- 5 / product detail --------------------------------------------------- */
.product-main-media, .product-main-media img { border-radius: var(--kx-r-lg); overflow: hidden; }
.product-thumbs button, .product-thumbs img { border-radius: var(--kx-r-sm); overflow: hidden; }
.product-buybox { border-radius: var(--kx-r-xl); }
.product-step-card { border-radius: var(--kx-r-lg); overflow: hidden; border: 1px solid var(--kx-tile-line); box-shadow: var(--kx-shadow-sm); }
.product-step-card figure, .product-step-card img { border-radius: var(--kx-r-lg) var(--kx-r-lg) 0 0; }
.product-risk-list > li { border-radius: var(--kx-r-lg); box-shadow: var(--kx-shadow-sm); }
.product-story-media, .product-story-media img,
.product-anatomy-media, .product-anatomy-media img,
.product-why-grid figure, .product-why-grid img { border-radius: var(--kx-r-lg); overflow: hidden; }
.product-action-gate { border-radius: var(--kx-r); }
/* .product-claim-tier paints nothing itself (its rows are hairlines), so a
   radius there would be invisible — only the padded step tiles get one. */
.product-care-steps > * { border-radius: var(--kx-r); }
.demo-frame, .demo-frame video { border-radius: var(--kx-r-lg); overflow: hidden; }

/* ---- 6 / join form ------------------------------------------------------- */
.join-panel { border-radius: var(--kx-r-xl); }
.join-selected { border-radius: var(--kx-r-lg); overflow: hidden; }
.join-selected figure, .join-selected img { border-radius: var(--kx-r-sm); overflow: hidden; }
.join-local-notice { border-radius: var(--kx-r); }
.join-promises > * { border-radius: 999px; }
.opt, .kit-row > * { border-radius: var(--kx-r); }
.interest-option > span { border-radius: var(--kx-r); }
.join-success { border-radius: var(--kx-r-xl); box-shadow: var(--kx-shadow); }
.join-progress li { border-radius: 999px; }

/* ---- 7 / safety, about, privacy ------------------------------------------ */
.safety-known, .safety-unknown, .safety-signal-row > * {
  border-radius: var(--kx-r-lg); border: 1px solid var(--kx-tile-line); box-shadow: var(--kx-shadow-sm);
}
.risk-accordion details {
  border-radius: var(--kx-r-lg); border: 1px solid var(--kx-tile-line);
  box-shadow: var(--kx-shadow-sm); overflow: hidden; margin-bottom: clamp(8px, 1vw, 12px);
}
.fda-sources a { border-radius: 999px; }
.privacy-updated, .privacy-flowline > * { border-radius: var(--kx-r); }
.lab-status-table > a { border-radius: var(--kx-r); }
.lab-status-table > a:hover { box-shadow: var(--kx-shadow-sm); }

/* ---- 8 / hero media + editorial figures ---------------------------------- */
.lab-hero-media, .lab-hero-media img,
.ritual-hero-media, .ritual-hero-media img,
.shop-hero-art { border-radius: var(--kx-r-xl); overflow: hidden; }

/* ---- 9 / controls: buttons, chips, stickers, fields ---------------------- */
.btn { border-radius: 999px; }
.chip { border-radius: 999px; }
.sticker { border-radius: 999px; }
.kx-chip { border-radius: 999px; }
.kx-badge { border-radius: 999px; }
.editorial-link, .sec-link, .foot-join, .foot-evidence { border-radius: 0; }
input[type="search"], input[type="email"], input[type="text"], textarea, select {
  border-radius: var(--kx-r-sm);
}
.shop-search { border-radius: 999px; }
.shop-sort, .shop-clear { border-radius: 999px; }
.field-error, .field-help { border-radius: 0; }
.lang-toggle { border-radius: 999px; overflow: hidden; }
.drawer-panel { border-radius: var(--kx-r-xl) 0 0 var(--kx-r-xl); }

/* ---- 10 / lab stepper follows the new shape ------------------------------ */
.kx-stepper { border-radius: var(--kx-r-lg); box-shadow: var(--kx-shadow-sm); }

/* ---- 11 / the footer stays a full-bleed ink band, only its tiles round --- */
.foot-top > * { border-radius: 0; }

/* ---- 12 / media inside any rounded tile must not poke out ---------------- */
.lab-evidence-grid > article > figure img,
.privacy-principles > article img,
.concept-visual-atlas img { border-radius: var(--kx-r-sm); overflow: hidden; }

@media (max-width: 700px) {
  :root { --kx-r-lg: 18px; --kx-r-xl: 20px; }
}

/* ---- 13 / corrections where the old sharp treatment out-specified §2 ------ */
/* The shop grid was deliberately frameless ("editorial") at line ~1413. With the
   rounded-glass language the reference frames every directory card, so the frame
   comes back — as a soft tile rather than the old 1px ink box. */
.editorial-product-grid .pcard {
  border: 1px solid var(--kx-tile-line);
  background: var(--paper);
  box-shadow: var(--kx-shadow-sm);
}
@media (hover: hover) and (pointer: fine) {
  .editorial-product-grid .pcard:hover { transform: translateY(-4px); box-shadow: var(--kx-shadow); }
}
.editorial-product-grid .pcard-media { border-radius: var(--kx-r-lg) var(--kx-r-lg) 0 0; }
.editorial-product-grid .pcard-body { padding: 16px 18px 20px; }

/* ---- 14 / row-to-card conversions need inner padding ---------------------
   The risk accordion was a set of full-bleed rows separated by hairlines, so it
   carried no horizontal padding and let the "+" marker sit flush on the edge.
   As rounded cards with overflow:hidden that marker was being clipped. */
.risk-accordion { --kx-acc-pad: clamp(18px, 2.2vw, 28px); border-top: 0; }
.risk-accordion summary { padding: 25px var(--kx-acc-pad); }
.risk-accordion summary i { justify-self: end; line-height: 1; }
.risk-accordion details > div { padding: 0 var(--kx-acc-pad) 28px calc(150px + var(--kx-acc-pad)); }
@media (max-width: 900px) {
  .risk-accordion details > div { padding: 0 var(--kx-acc-pad) 26px calc(102px + var(--kx-acc-pad)); }
}

/* ============================================================================
   KX / DENSITY — typographic and spatial recalibration
   ----------------------------------------------------------------------------
   The build was laid out as an editorial poster: 160px section padding, 70px
   section headings squeezed into an 11ch column, and 330–520px card floors. At
   desktop width that reads as a stack of tall, half-empty blocks.

   This pass keeps the same hierarchy but tightens it: display type is capped
   lower, measure is widened so headings wrap into 2 lines instead of 4, card
   floors drop roughly a third, and vertical rhythm comes in. Mobile floors move
   much less, so small screens do not become cramped.

   Delete this section to restore the original poster scale.
   ========================================================================== */

/* ---- 1 / section rhythm ---------------------------------------------------- */
.section { padding-block: clamp(44px, 5.5vw, 76px); }
.inner-section { padding: clamp(56px, 6.5vw, 96px) var(--pad-x); }
.inner-cta { padding-block: clamp(52px, 6vw, 88px); }

/* the grids that hung 78px below their section head */
.lab-gates,
.lab-release-grid,
.fda-vocabulary,
.classification-split,
.evidence-summary-fields { margin-top: clamp(26px, 3.2vw, 46px); }

/* ---- 2 / display type: lower caps, wider measure --------------------------
   A 70px heading held to 11ch wraps into four short lines and forces the block
   taller than its content needs. Capping the size and widening the measure lets
   the same words sit on two lines.                                          */
.inner-hero h1 { font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: .98; }
.inner-section-head h2 { max-width: 20ch; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1; }
.inner-cta h2 { max-width: 20ch; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1; }
.inner-hero-copy > p,
.inner-section-head > p { font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.7; }

.lab-gates h3 { font-size: clamp(1.35rem, 1.7vw, 1.85rem); line-height: 1.05; }
.lab-evidence-grid h3 { font-size: clamp(1.45rem, 1.9vw, 2.05rem); line-height: 1.04; }
.lab-release-grid h3 { max-width: 16ch; font-size: clamp(1.6rem, 2.2vw, 2.25rem); line-height: 1.02; }
.lab-record-split h2 { max-width: 18ch; margin-top: 26px; font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1; }
.risk-accordion summary strong { font-size: clamp(1.25rem, 1.8vw, 1.95rem); line-height: 1.1; }
.claim-ladder h3 { font-size: clamp(1.3rem, 1.8vw, 1.9rem); line-height: 1.06; }
.classification-split h3 { font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.04; }
.privacy-principles h3,
.privacy-records-grid h3 { font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.04; }
.concept-open-questions h3 { font-size: clamp(1.3rem, 1.7vw, 1.8rem); line-height: 1.06; }
.safety-status-grid h3 { font-size: clamp(1.25rem, 1.6vw, 1.7rem); line-height: 1.06; }
.fda-vocabulary h3 { font-size: clamp(1.3rem, 1.75vw, 1.8rem); line-height: 1.05; }
.lab-notes .lab-note-title h3 { font-size: clamp(1.35rem, 1.9vw, 2rem); line-height: 1.06; }

/* body copy inside cards was set at reading width for a wider column */
.lab-gates p,
.lab-evidence-grid p,
.lab-release-grid > article > p,
.classification-split p,
.privacy-principles p { font-size: .875rem; line-height: 1.66; }

/* ---- 3 / card floors ------------------------------------------------------ */
.lab-gates > article { min-height: 236px; padding: clamp(22px, 2.2vw, 32px); }
.lab-evidence-grid article { min-height: 252px; padding: clamp(22px, 2.6vw, 34px) 24px; }
.lab-release-grid article { min-height: 360px; padding: clamp(26px, 3.2vw, 46px); }
.lab-record-split article { min-height: 330px; padding: clamp(44px, 5vw, 82px) var(--edge); }
.fda-vocabulary article { min-height: 244px; }
.classification-split article { min-height: 296px; padding: clamp(26px, 3.2vw, 46px); }
.claim-ladder article { min-height: 148px; padding: 24px clamp(20px, 3vw, 40px); }
.safety-status-grid article { min-height: 232px; padding: 24px; }
.safety-signal-row > div { min-height: 98px; padding: 20px var(--edge); }
.privacy-principles article { min-height: 246px; padding: clamp(26px, 3.4vw, 46px) var(--edge); }
.privacy-records-grid article { min-height: 356px; padding: clamp(30px, 4vw, 62px); }
.privacy-flowline > div { min-height: 148px; padding: 22px; }
.concept-open-questions article { min-height: 236px; padding: 24px; }
.product-validation-grid article { min-height: 180px; padding: 21px; }
.product-step-copy { min-height: 150px; padding: 18px; }
.product-risk-list li { min-height: 92px; }
.product-anatomy-list li { min-height: 100px; padding: 16px; }
.lab-station { grid-template-rows: 236px auto; min-height: 400px; }
.interest-option > span { min-height: 92px; padding: 18px; }

/* ---- 4 / hero and media floors -------------------------------------------- */
.inner-hero-copy { padding-block: clamp(52px, 6vw, 92px); }
.shop-hero-art,
.ritual-hero-media,
.lab-hero-media { min-height: 520px; }
/* hero floors sized to their actual copy: the safety hero carries ~280px of
   content, the privacy hero ~190px — the old 540/470 floors were half air */
.safety-hero { min-height: 440px; }
.privacy-hero { min-height: 0; padding: clamp(60px, 7vw, 110px) var(--edge); }
.ritual-chapter { min-height: 560px; }
.ritual-chapter > figure { min-height: 560px; }
.ritual-path-card { min-height: 340px; }
.concept-visual,
.concept-typographic-cover { min-height: 540px; }

/* ---- 5 / anchors must clear the fixed nav --------------------------------- */
:target,
[id]:not(body) { scroll-margin-top: calc(var(--nav-h) + 18px); }

@media (max-width: 900px) {
  /* mobile keeps more of its original breathing room */
  .inner-section { padding: clamp(48px, 9vw, 68px) var(--pad-x); }
  .lab-record-split article { min-height: 300px; }
  .privacy-records-grid article { min-height: 320px; }
  .ritual-chapter,
  .ritual-chapter > figure { min-height: 440px; }
}


/* ============================================================================
   KX / POLISH — craft pass over the reduced layout
   Motion is transform/opacity only, short, and always disabled under
   prefers-reduced-motion. Nothing here animates a value that could be read as a
   device output or a measurement (COMPLIANCE.md §5).
   ========================================================================== */

/* ---- 1 / one consistent card interaction ---------------------------------
   Every tile in the site now lifts by the same 3px on the same curve, so the
   page reads as one system instead of a dozen local hover treatments.       */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lab-gates > article,
  .lab-evidence-grid > article,
  .fda-vocabulary > article,
  .classification-split > article,
  .claim-ladder > article,
  .safety-status-grid > article,
  .privacy-principles > article,
  .privacy-records-grid > article,
  .concept-open-questions > div > article,
  .ritual-path-card,
  .product-step-card,
  .tb-need {
    transition: transform .3s var(--mk-ease-out, cubic-bezier(.16,1,.3,1)),
                box-shadow .3s var(--mk-ease-out, cubic-bezier(.16,1,.3,1)),
                border-color .3s var(--ease-out);
  }
  .lab-gates > article:hover,
  .lab-evidence-grid > article:hover,
  .fda-vocabulary > article:hover,
  .classification-split > article:hover,
  .claim-ladder > article:hover,
  .safety-status-grid > article:hover,
  .privacy-principles > article:hover,
  .privacy-records-grid > article:hover,
  .concept-open-questions > div > article:hover,
  .ritual-path-card:hover,
  .product-step-card:hover,
  a.tb-need:hover {
    transform: translateY(-3px);
    box-shadow: var(--kx-shadow, 0 8px 26px rgba(10,11,13,.07));
  }
}

/* ---- 2 / nav: the active marker grows instead of snapping ----------------- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .26s var(--mk-ease-out, cubic-bezier(.16,1,.3,1));
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { border-bottom: 0; }
.nav-links a.active::after { transform: scaleX(1); }

/* ---- 3 / a single visible focus ring across the site --------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--candy);
  outline-offset: 3px;
  border-radius: var(--kx-r-xs, 8px);
}

/* ---- 4 / accordion chevron and disclosure feel --------------------------- */
.risk-accordion summary { transition: background-color .2s var(--ease-out); }
.risk-accordion summary:hover { background: var(--kx-wash, rgba(0,0,0,.045)); }
.risk-accordion summary i { transition: transform .28s var(--mk-ease-magnet, cubic-bezier(.34,1.56,.64,1)); }
.risk-accordion details[open] summary i { transform: rotate(45deg); }

/* ---- 5 / media never sits flush against a rounded frame ------------------ */
.lab-hero-media img,
.ritual-hero-media img,
.product-story-media img,
.product-why-grid img { will-change: auto; }
.lab-hero-media,
.ritual-hero-media,
.product-story-media { overflow: hidden; }

/* ---- 6 / mono metadata reads as a layer, not as body text ---------------- */
.inner-kicker,
.home-demos-kicker,
.ritual-kicker,
.vote-kicker,
.product-kicker { opacity: .92; }

/* ---- 7 / tables and long copy get a comfortable measure ----------------- */
.lab-release-grid li,
.privacy-records-grid li,
.safety-known li,
.safety-unknown li { font-size: .875rem; line-height: 1.62; }

/* ---- 8 / links in body copy get a growing underline --------------------- */
.editorial-link, .sec-link, .object-link, .campaign-link {
  transition: color .18s var(--ease-out), opacity .18s var(--ease-out);
}
.editorial-link:hover, .sec-link:hover { color: var(--candy); }

/* ---- 9 / images fade in rather than snapping when decoded --------------- */
@media (prefers-reduced-motion: no-preference) {
  .pcard-media img,
  .shop-feature-media img { animation: kx-fade-in .5s var(--mk-ease-out, cubic-bezier(.16,1,.3,1)) both; }
}
@keyframes kx-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
  .risk-accordion summary i { transition: none; }
}

/* ---- 10 / density, second pass -------------------------------------------
   Headings inside content blocks that the first pass missed. The campaign hero
   headline is deliberately left at poster scale — it is the one place the size
   is the point. Everything else is a section or card title and was competing
   with it at 60–96px.                                                       */
.sec-head h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.honesty h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.vote-box h2,
body[data-page="home"] .vote-box h2 { max-width: 22ch; font-size: clamp(1.6rem, 2.3vw, 2.15rem); }
.ritual-intro h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); }
.home-demos-head h2 { max-width: 20ch; font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.home-film-caption h3 { font-size: clamp(1.35rem, 2vw, 2.1rem); }
body[data-page="home"] .tb-cta h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
body[data-page="home"] .tb-cta { min-height: clamp(400px, 46svh, 560px); }

/* product detail — the densest text page, and the one still at poster scale */
.pdp h1 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
/* 15ch used less than half of the 660px column, so an English product name ran
   to four lines against the Chinese two — the widest single source of CN/EN
   height drift on this page. 28ch fills ~570px and brings English to two lines. */
.product-buybox h1 { max-width: 28ch; font-size: clamp(1.8rem, 2.8vw, 2.65rem); line-height: 1; }
.product-story-copy h2,
.product-section-head h2,
.product-why-grid h2 { max-width: 20ch; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.02; }
.product-film .sec-head h2 { max-width: 18ch; font-size: clamp(1.55rem, 2.2vw, 2.1rem); }
.product-story { padding-block: clamp(48px, 5.5vw, 82px); }
.product-anatomy,
.product-ritual-story { padding-block: clamp(48px, 5.5vw, 82px); }

.ritual-intro { min-height: auto; padding-block: clamp(44px, 5vw, 72px); }

/* ---- 11 / honest empty state for gate-withheld records -------------------- */
.kx-gated {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px dashed rgba(10,11,13,.26); border-radius: var(--kx-r-lg);
  background: rgba(10,11,13,.02);
}
.kx-gated p { max-width: 52ch; color: var(--on-surface-var); font-size: .9rem; line-height: 1.68; }
/* with the hero art withheld the hero becomes a single column instead of
   reserving 760px of empty panel */
.inner-hero:has(> [hidden]) { grid-template-columns: 1fr; min-height: auto; }

/* ---- 12 / density, third pass: page headlines and optical tracking --------
   The remaining 79-85px page headlines were held to a 9-12ch measure, which
   turns them into four-line walls. They stay the largest element on their page,
   just not a block of their own. The negative tracking throughout was tuned for
   70-85px; at 34-42px it closes the letterforms up, so it is relaxed with the
   size.                                                                     */
.ritual-copy h2 { max-width: 16ch; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: .98; letter-spacing: -.026em; }
.lab-manifesto h2 { max-width: 18ch; font-size: clamp(1.95rem, 3.1vw, 3rem); line-height: .98; letter-spacing: -.026em; }
.safety-hero h1 { max-width: 16ch; font-size: clamp(2rem, 3.3vw, 3.2rem); line-height: .98; letter-spacing: -.028em; }
.join-story h1 { max-width: 15ch; font-size: clamp(1.95rem, 3.1vw, 3rem); line-height: .98; letter-spacing: -.028em; }
.privacy-hero h1 { max-width: 17ch; font-size: clamp(1.95rem, 3.1vw, 3rem); line-height: .98; letter-spacing: -.028em; }
.concept-typographic-cover strong { max-width: 15ch; font-size: clamp(1.95rem, 3.1vw, 3rem); line-height: .98; letter-spacing: -.028em; }
.concept-file h1 { max-width: 16ch; font-size: clamp(1.9rem, 2.9vw, 2.85rem); line-height: .98; letter-spacing: -.026em; }
.product-care-copy h2 { max-width: 20ch; }

/* tracking relaxed to match the reduced sizes */
.inner-hero h1 { letter-spacing: -.026em; }
.inner-section-head h2,
.inner-cta h2 { letter-spacing: -.022em; }
.product-buybox h1,
.product-story-copy h2,
.product-section-head h2,
.product-why-grid h2,
.product-care-copy h2 { letter-spacing: -.024em; line-height: .98; }
.home-demos-head h2,
.ritual-intro h2,
body[data-page="home"] .tb-cta h2 { letter-spacing: -.028em; }
.lab-gates h3,
.lab-evidence-grid h3,
.lab-release-grid h3,
.fda-vocabulary h3,
.classification-split h3,
.privacy-principles h3,
.privacy-records-grid h3,
.safety-status-grid h3,
.claim-ladder h3,
.concept-open-questions h3 { letter-spacing: -.016em; }

/* ---- 13 / catalogue grid: four columns on wide screens -------------------
   140 records at three 430px columns reads like a lookbook rather than a
   directory; four columns matches the density the content actually has.    */
@media (min-width: 1280px) {
  .editorial-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 14 / keep the density floors from overriding mobile resets ------------
   The density pass sets min-height on cards and media wells. Because it is
   appended after the responsive rules, those floors also applied at mobile. For
   .product-why-grid figure that was a real break: its mobile rule pairs
   min-height:0 with an aspect-ratio (16/11 at the time, 1/1 today), so a
   reinstated 440px floor was solved for width instead — 440 x 16/11 = 640px
   inside a 356px column, overflowing the page. Media wells that carry an
   aspect-ratio must keep min-height:0. */
.product-why-grid figure { min-width: 0; }
@media (max-width: 980px) {
  .product-why-grid figure { min-height: 0; }
}
@media (max-width: 900px) {
  /* these had lower mobile floors before the density pass; restore them */
  .shop-hero-art,
  .ritual-hero-media { min-height: 500px; }
  .lab-hero-media { min-height: 460px; }
}
@media (max-width: 680px) {
  .shop-hero-art,
  .ritual-hero-media,
  .lab-hero-media { min-height: 420px; }
}


/* ============================================================================
   KX / OBJECT RAIL — home section 03 rebuilt as a two-up snap rail
   ----------------------------------------------------------------------------
   Was a 100svh cross-fade stage showing one card render full-bleed. The renders
   are 500px square, so that upscaled them roughly 2x (visibly soft) and
   object-fit: cover cropped a square into a landscape frame, cutting the object
   in half. Two per view keeps each well near the native size, and the media is
   contained on a plate so nothing is cropped at all.
   ========================================================================== */
.object-stage {
  height: auto; min-height: 0; overflow: visible;
  padding-block: clamp(48px, 6vw, 88px);
  background: #0e1013; color: #f6f5f2;
}
.object-stage-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(24px, 3vw, 40px);
}
.object-stage-kicker {
  display: block; margin-bottom: .8rem;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--object-accent, var(--candy));
}
.object-stage-head h2 {
  max-width: 20ch; font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.02; letter-spacing: -.028em; color: #fff;
}
.object-stage-head #objectDescription {
  max-width: 46ch; margin-top: .9rem;
  color: rgba(255,255,255,.66); font-size: .9rem; line-height: 1.7;
}
.object-stage-nav { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; flex: none; }
.object-stage-nav .object-link { color: #fff; border-bottom: 1px solid rgba(255,255,255,.55); }
.object-stage-nav .object-link:hover { color: var(--object-accent, var(--candy)); border-bottom-color: currentColor; }
.object-stage-count {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; color: rgba(255,255,255,.6);
}

/* --- transport: solid discs straddling the rail edge -----------------------
   The 42px outline steppers sat in the header, far from the cards they moved.
   Centring a filled disc on each edge of the content column puts the control
   where the gesture happens and reads at a glance on a dark band. */
.object-stage-viewport { position: relative; }
.object-stage-arrow {
  position: absolute; z-index: 3; top: 50%;
  width: var(--arrow-size); height: var(--arrow-size);
  --arrow-size: clamp(48px, 4vw, 64px);
  display: grid; place-items: center;
  color: #fff; background: var(--candy); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transform: translateY(-50%);
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
/* half the disc overhangs the card; max() keeps it on screen at small widths */
.object-stage-arrow.is-prev { left: max(6px, calc(var(--pad-x) - var(--arrow-size) / 2)); }
.object-stage-arrow.is-next { right: max(6px, calc(var(--pad-x) - var(--arrow-size) / 2)); }
.object-stage-arrow svg { width: 22px; height: 22px; stroke-width: 2; }
.object-stage-arrow:hover:not(:disabled) { background: #ff2d86; transform: translateY(-50%) scale(1.06); }
.object-stage-arrow:disabled { opacity: .22; cursor: default; box-shadow: none; }

/* --- the rail -------------------------------------------------------------- */
.object-stage-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--rail-gap)) / 2);
  --rail-gap: clamp(14px, 1.6vw, 24px);
  column-gap: var(--rail-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  /* the rail is a .wrap, so snapping must respect the page gutter or mandatory
     snap scrolls the left padding away and the first card sits flush to 0 */
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  /* the discs and the counter carry the affordance now, so the scrollbar track
     no longer has to sit under the cards */
  scrollbar-width: none;
}
.object-stage-rail::-webkit-scrollbar { display: none; }
.object-stage-rail:focus-visible { outline: 2px solid var(--candy); outline-offset: 6px; }

.object-card {
  scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--kx-r-xl, 28px);
  background: rgba(255,255,255,.04); overflow: hidden;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .object-card:hover { transform: translateY(-3px); border-color: rgb(var(--candy-rgb) / .5); background: rgba(255,255,255,.07); }
}
/* contained on a light plate: the render is never cropped and never upscaled
   past its 500px native size */
.object-card-media {
  /* a DEFINITE height, not aspect-ratio: the image below sizes with height:100%,
     and a percentage against a content-derived grid row resolves to auto, which
     let the 500px intrinsic size escape and overflow the well. */
  height: clamp(260px, 28vw, 420px); background: #f4f2ee;
  /* default stretch, NOT place-items:center — centering opts the item out of
     stretch, and an implicit auto row is indefinite for percentage resolution,
     so height:100% fell back to auto and the 1:1 render blew the well open.
     object-fit:contain does the centring and the letterboxing instead. */
  /* grid-template-rows: 100% makes the row DEFINITE. Without it the implicit
     auto row is content-sized, so height:100% on the image could not resolve
     (and an explicit height also opts the item out of stretch), leaving the
     1:1 render to size itself from its width and overflow the well. */
  display: grid; grid-template-rows: 100%; padding: clamp(14px, 1.8vw, 26px);
  overflow: hidden;
}
.object-card-media img {
  /* width+height 100% with contain letterboxes inside the well: the render can
     neither be cropped nor overflow it. width:auto let the 500px intrinsic size
     escape a capped well and get clipped by the card. */
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
}
.object-card-body { display: flex; flex-direction: column; gap: .5rem; padding: clamp(16px, 1.8vw, 24px); }
.object-card-code {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--object-accent, var(--candy));
}
.object-card-body h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.08; color: #fff; }
.object-card-body h3 a { color: inherit; }
.object-card-body h3 a:hover { color: var(--object-accent, var(--candy)); }
.object-card-body p { color: rgba(255,255,255,.6); font-size: .84rem; line-height: 1.6; }

@media (max-width: 900px) {
  .object-stage-head { flex-direction: column; align-items: flex-start; }
  .object-stage-nav { align-items: flex-start; width: 100%; }
  /* one and a bit per view, so the rail reads as scrollable on a phone */
  .object-stage-rail { grid-auto-columns: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  .object-stage-rail { scroll-behavior: auto; }
  .object-card { transition: none; }
}

/* ---- 15 / a radius needs a border on all four sides ----------------------
   These elements carry a single bottom border — a rule between list rows, or a
   link underline. Rounding them curved the side borders that do not exist, so
   the outline rendered as an ellipse missing its top half.

   Hairline rows keep their rule and lose the radius; the controls that should
   read as pills get a complete outline instead. */
.tb-need { border-radius: 0; box-shadow: none; }
.product-care-steps > * { border-radius: 0; }
.lab-status-table > a { border-radius: 0; }
.lab-status-table > a:hover { box-shadow: none; }
.fda-sources a { border-radius: 0; }

.shop-filterbar .shop-search {
  border: 1px solid rgba(10,11,13,.26); border-radius: 999px;
  padding: .55em 1.15em; background: rgba(255,255,255,.55);
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.shop-filterbar .shop-search:focus-within { border-color: var(--candy); background: #fff; }
.shop-clear { border: 1px solid currentColor; border-radius: 999px; padding: .5em 1.1em; }

/* any rounded form control must have a full outline, never just an underline */
input[type="search"], input[type="email"], input[type="text"],
input[type="tel"], input[type="number"], textarea, select {
  border-style: solid; border-width: 1px;
}
.shop-filterbar .shop-search input { border-width: 0; }
/* .field controls were underline-only (line ~433) while the textarea beside them
   was already a full box; rounded mode needs the outline all the way round. */
.field input, .field select {
  border: 1px solid rgba(10,11,13,.28); padding-inline: .9em;
  background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--candy); }
.product-select-field select { border: 1px solid rgba(10,11,13,.45); }

/* ---- 16 / row-to-card conversions need inner padding (2) -----------------
   .product-risk-list was a hairline row list: the container drew the top rule,
   each row the bottom one, and the 42px number column started at x=0 because a
   row needs no inset. As a rounded card that put "01" hard against the corner
   curve. Same mistake as the risk accordion in §14. */
.product-risk-list { border-top: 0; display: flex; flex-direction: column; gap: 12px; }
.product-risk-list li { padding: 18px clamp(18px, 2vw, 26px); }

/* the buybox paints no surface of its own, so a radius there was invisible —
   drop it rather than pad content away from a frame that does not exist */
.product-buybox { border-radius: 0; }

/* badges sat 10px inside a 22px corner, close enough to graze the curve */
.pcard-sticks { top: 14px; left: 14px; }

/* ============================================================================
   HERO COPY ALIGNMENT
   ----------------------------------------------------------------------------
   The section content below every inner-page hero sits in the centered 1440px
   column (via --pad-x). The hero copy previously started at the raw page edge,
   so its text no longer lined up with the content beneath it. Inset the hero's
   left edge by the same gutter (the band/media still bleeds to the right), and
   zero the copy's own left padding so its text shares that column's left line.
   Placed last so it wins over the earlier rhythm-layer padding shorthands. */
.inner-hero,
.safety-hero { padding-left: var(--pad-x); }
.inner-hero-copy,
.safety-hero-title { padding-left: 0; }
.privacy-hero { padding-left: var(--pad-x); }

/* Safety closes the column on the right as well: its hero is a three-column
   grid, so letting the two tonal panels bleed past 1440 left them wider than
   every section below and cut the right one against the viewport edge. The
   signal row underneath carried its inset on each cell (var(--edge)), which put
   its text at the raw page edge instead of the column — moving the inset to the
   row lets the band keep bleeding while its three lines start on the same line
   as the hero copy. */
.safety-hero { padding-right: var(--pad-x); }
.safety-signal-row { padding-inline: var(--pad-x); column-gap: clamp(24px, 3vw, 48px); }
/* a gap, not per-cell padding: the outer cells then start exactly on the column
   line, and the single-column phone layout keeps all three on that same line */
.safety-signal-row > div { padding-inline: 0; }

/* ============================================================================
   TYPE POLISH
   ----------------------------------------------------------------------------
   From the buddietherapy.com study: its confidence comes from body copy that is
   large and high-contrast, a single tight set of sizes, and a wide display-to-
   body ratio. Adopted here without giving up the serif + mono editorial voice —
   the sizes, colour and rhythm move; the typefaces do not. Placed last so it
   settles the per-component drift accumulated in the earlier layers.
   ========================================================================== */

/* --- A1 / B2 · primary reading copy: was .95rem (15px) and drifting ------- */
.inner-hero-copy > p,
.inner-section-head > p,
.product-story-copy > p,
.product-section-head > p,
.product-why-grid > div > p,
.product-care-copy > p,
.inner-cta p,
.lab-record-split p,
.lab-manifesto p,
.home-demos-head p,
.shop-core-band p,
.kx-gated p,
.concept-tagline,
.concept-open-questions p,
.concept-summary dd,
.safety-hero-title p,
.privacy-hero > p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- A1 / B2 · dense card copy: one step down, still comfortably readable - */
.lab-gates p,
.lab-evidence-grid p,
.lab-release-grid > article > p,
.classification-split p,
.privacy-principles p,
.lab-station p,
.lab-notes-list dd,
.ritual-path-card p,
.shop-feature-copy p,
.kx-feature .shop-feature-copy p,
.product-step-copy p,
.product-care-steps p,
.product-trust-columns li,
.product-validation-grid p {
  font-size: var(--fs-body-sm);
  line-height: 1.62;
}

/* --- A3 · mono labels sat at 9px: too small to register as a layer -------- */
.product-benefit-list span,
.product-label,
.product-kicker,
.inner-kicker { font-size: var(--fs-label); }

/* --- C3 · Latin sets tighter than CJK at the same measure ----------------- */
html[data-lang="en"] { --lh-body: 1.62; }

/* --- C1 · display-to-body ratio: the inner heroes topped out at 49px ------ */
.inner-hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.9rem); }
.safety-hero h1 { font-size: clamp(2.1rem, 3.8vw, 3.7rem); }
.privacy-hero h1 { font-size: clamp(2.05rem, 3.6vw, 3.5rem); }

/* --- C2 · the ghost numeral already exists on the ritual chapters; let it
       read as a real editorial layer rather than a faint 6rem mark. At this
       size it reaches the copy, so it drops behind the text (it was z-index 2,
       painting over the heading) and becomes a watermark, not an overlay. --- */
.ritual-number {
  top: clamp(10px, 1.6vw, 24px);
  font-size: clamp(4.5rem, 11vw, 11rem);
  opacity: .09;
  z-index: 0;
}
.ritual-chapter > .ritual-copy { position: relative; z-index: 1; }

/* ============================================================================
   HEADING MEASURE — one physical measure, both scripts
   ----------------------------------------------------------------------------
   Every display heading capped its line length in `ch`. `ch` is the advance of
   the digit "0" — about .5em in both EB Garamond and Inter — so a "20ch" cap is
   really ~10em: about 20 latin characters, but only about 10 Chinese ones,
   because a CJK glyph is a full em. §12 above already loosened several of these
   from 9-12ch to 16-18ch and the symptom stayed, because the unit was wrong,
   not the number.

   Measured at 1440px the caps were discarding 80-580px of the column that was
   actually available and breaking one-line titles into two — in Chinese AND in
   English. Index / "See the ritual, not just the object." needed 396px, had
   912px of column, and was held to 332px; the Chinese "不只看外形，也看它怎么用。"
   needed 437px in the same slot.

   `em` is the same physical measure in either script and tracks each heading's
   own clamp()ed size, so a single token settles all of them. Where the grid
   column is narrower than the token the column still wins, which is the case
   the caps were originally written for.
   ========================================================================== */
/* 18em ≈ 36 latin characters ≈ 18 Chinese characters — a real display measure
   in either script. Sentences longer than that still wrap, which is the job the
   cap was written to do; what it must not do is break a short title. */
:root { --heading-measure: 18em; }

.home-demos-head h2,
.object-stage-head h2,
.ritual-state h3,
.vote-box h2,
body[data-page="home"] .vote-box h2,
.inner-section-head h2,
.shop-intro .inner-section-head h1,
.inner-cta h2,
.ritual-copy h2,
.lab-record-split h2,
.lab-manifesto h2,
.lab-release-grid h3,
.classification-split h3,
.safety-hero h1,
.privacy-hero h1,
.join-story h1,
.product-story-copy h2,
.product-section-head h2,
.product-why-grid h2,
.product-care-copy h2 { max-width: var(--heading-measure); }

/* ============================================================================
   CARD ROW ALIGNMENT
   ----------------------------------------------------------------------------
   The safety cards were bottom-weighted: the mono kicker stayed at the top of a
   350px well and the title + body were pushed to the floor (`margin-top: auto`
   on .fda-vocabulary, a 90-150px spacer on .classification-split). Each heading
   therefore landed wherever its own paragraph length left it — four titles at
   four different heights in one row, and ~230px of dead air inside the two
   split cards.

   Top-aligning fixes the heading line. Sharing the three row tracks across the
   row (subgrid: kicker / title / body) fixes the body line too, so a title that
   wraps to two lines cannot push its paragraph out of step with its neighbours.

   Placed at the end because §1 ("hairline grids become real gaps") sets a
   `gap` on these same grids; declared any earlier, the row half of that
   shorthand wins and re-inserts a 16px gutter between the three rows of every
   card. Scoped above each grid's stacking breakpoint — once the cards wrap onto
   several rows the parent's row gutter is doing real work again.
   ========================================================================== */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1001px) {
    .fda-vocabulary { grid-template-rows: auto auto auto; row-gap: 0; }
    .fda-vocabulary > article { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
  @media (min-width: 701px) {
    .classification-split { grid-template-rows: auto auto auto; row-gap: 0; }
    .classification-split > article { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
}