/* Zenovocare — E4 "Signal Studio". Shared by the homepage and (phase 2) the product pages. */

/* Zenovocare design tokens — machine-readable form of DESIGN.md. (verbatim) */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* colour */
  --bg: #F6F4F4;            /* Rest */
  --surface: #FFFFFF;
  --surface-warm: #DAD1C6;  /* Nurture */
  --fg: #221E1C;            /* Anchor */
  --fg-2: #484642;
  --muted: #6D6963;
  --meta: #6D6963;
  --border: #E6E0D9;
  --border-soft: #ECE8E3;
  --accent: #93664E;        /* Pulse */
  --accent-on: #FFFFFF;
  --accent-hover: #7B5541;
  --accent-active: #624434;
  --accent-light: #D1EAFF;  /* Breath */
  --success: #3D6B4A;
  --warn: #8A5A12;
  --danger: #A63D2F;

  /* brand extensions */
  --brand-anchor: #221E1C;
  --brand-pulse: #93664E;
  --brand-nurture: #DAD1C6;
  --brand-breath: #D1EAFF;
  --brand-rest: #F6F4F4;
  --brand-dusk: #788B9C;
  --gradient-breath: linear-gradient(135deg, #F6F4F4 0%, #D1EAFF 100%);
  --gradient-nurture: linear-gradient(135deg, #F6F4F4 0%, #DAD1C6 100%);
  --gradient-dusk: linear-gradient(135deg, #221E1C 0%, #788B9C 55%, #D1EAFF 100%);
  --gradient-earth: linear-gradient(135deg, #93664E 0%, #DAD1C6 100%);
  /* glass material (floating controls layer only — see DESIGN.md) */
  --glass-tint: rgba(246, 244, 244, 0.62);
  --glass-tint-strong: rgba(246, 244, 244, 0.80);
  --glass-tint-dark: rgba(34, 30, 28, 0.55);
  --glass-blur: blur(20px) saturate(160%);
  --glass-rim: rgba(255, 255, 255, 0.55);
  --glass-rim-dark: rgba(255, 255, 255, 0.14);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --glass-shadow: 0 10px 30px -12px rgba(34, 30, 28, 0.25);
  --nav-height: 72px;
  --nav-height-compact: 60px;

  /* type */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-md: 20px;
  --text-lg: 24px;
  --text-xl: 32px;
  --text-2xl: 48px;
  --text-3xl: 64px;
  --text-4xl: 84px;
  --leading-display: 1.0;
  --leading-tight: 1.1;
  --leading-dense: 1.35;
  --leading-body: 1.55;
  --tracking-display: -0.035em;
  --tracking-label: 0em;
  --tracking-eyebrow: 0.08em;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --section-y-desktop: 120px;
  --section-y-tablet: 88px;
  --section-y-phone: 64px;
  --container-max: 1280px;
  --container-gutter-desktop: 64px;
  --container-gutter-tablet: 40px;
  --container-gutter-phone: 24px;

  /* shape */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* elevation */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-ring-accent: 0 0 0 1px var(--accent);
  --elev-raised: 0 12px 40px -12px rgba(34, 30, 28, 0.18);
  --focus-ring: 0 0 0 3px rgba(147, 102, 78, 0.35);

  /* motion */
  --motion-fast: 140ms;
  --motion-base: 240ms;
  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme="dark"] {
  --bg: #221E1C;
  --surface: #2B2624;
  --surface-warm: #34302D;
  --fg: #F6F4F4;
  --fg-2: #B5B4B3;
  --muted: #B5B4B3;
  --meta: #918F8E;
  --border: #3E3936;
  --border-soft: #34302D;
  --accent: #DAD1C6;
  --accent-on: #221E1C;
  --accent-hover: #E6E0D9;
  --accent-active: #C9B3A7;
  --accent-light: #D1EAFF;
  --focus-ring: 0 0 0 3px rgba(209, 234, 255, 0.45);
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-tint: #F6F4F4; --glass-tint-strong: #F6F4F4; --glass-tint-dark: #221E1C; --glass-blur: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}

/* ---------- E4 signal + direction tokens (brief v5 §1) ---------- */
:root {
  --signal: #5ED97C;       /* live lines and LED glow on Anchor */
  --signal-ink: #1E8B47;   /* live lines and the "on" dot on light grounds */
  --signal-glow: color-mix(in srgb, var(--signal) 38%, transparent);
  --signal-live: var(--signal-ink);

  /* every primary action is Pulse, light or dark */
  --action: var(--brand-pulse);
  --action-hover: #7B5541;
  --action-active: #624434;
  --action-on: #FFFFFF;

  --ground: var(--brand-rest);
  --stage: var(--brand-nurture);
  --line: color-mix(in srgb, var(--fg) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--fg) 20%, transparent);
  --wave-rest: var(--fg);
  --wave-rest-width: 1.25px;
  --glass-tint-anchor: rgba(34, 30, 28, 0.72);
  --card-dark: #2B2624;
  --shadow-contact: rgba(34, 30, 28, 0.2);
  --scrim: rgba(34, 30, 28, 0.72);

  --ease: var(--ease-standard);
  --t-ctrl: 220ms;
  --t-photo: 450ms;
  --t-morph: 600ms;

  --gutter: var(--container-gutter-desktop);
  --section-y: var(--section-y-desktop);
  --container: min(var(--container-max), 100vw - 2 * var(--gutter));
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-anchor); /* solid ring, 2px offset: passes 3:1 on every light ground */
}
[data-theme="dark"] {
  --signal-live: var(--signal);
  --wave-rest: color-mix(in srgb, var(--brand-rest) 18%, transparent);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-nurture);
}
@media (max-width: 1100px) { :root { --gutter: var(--container-gutter-tablet); --section-y: var(--section-y-tablet); } }
@media (max-width: 700px)  { :root { --gutter: var(--container-gutter-phone); --section-y: var(--section-y-phone); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--text-base)/var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip; caret-color: var(--action);
}
::selection { background: var(--brand-nurture); color: var(--brand-anchor); }
img, canvas, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.zc-num, .zc-tab { font-variant-numeric: tabular-nums; }
.zc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zc-skip { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 20px; background: var(--brand-anchor); color: var(--brand-rest); border-radius: var(--radius-pill); transform: translateY(-160%); transition: transform var(--t-ctrl) var(--ease); }
.zc-skip:focus-visible { transform: none; }

.zc-container { width: var(--container); margin-inline: auto; }
.zc-section { padding: var(--section-y) 0 calc(var(--section-y) * 0.6); background: var(--bg); color: var(--fg); position: relative; }
.zc-section--tight-top { padding-top: calc(var(--section-y) * 0.5); }

/* ---------- Type ---------- */
.zc-h2 {
  font: 400 clamp(32px, 3.9vw, 56px)/1.05 var(--font-display);
  letter-spacing: -0.035em; text-wrap: balance;
}
.zc-h3 { font: 500 clamp(24px, 2.2vw, 28px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.zc-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; letter-spacing: -0.01em; color: var(--fg-2); max-width: 60ch; text-wrap: pretty; }
.zc-body { color: var(--fg-2); max-width: 62ch; text-wrap: pretty; }
.zc-mono { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.zc-note { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; color: var(--meta); }
.zc-section-head { margin-bottom: clamp(40px, 5vw, 64px); display: grid; gap: 20px; }

/* ---------- Buttons and links ---------- */
.zc-btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 24px; border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font-body); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-ctrl) var(--ease), color var(--t-ctrl) var(--ease), box-shadow var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease);
}
.zc-btn:active { transform: translateY(1px) scale(0.99); }
.zc-btn:focus-visible { border-radius: var(--radius-pill); }
.zc-btn--lg { --btn-h: 56px; padding: 0 28px; font-size: 16px; }
.zc-btn--primary { background: var(--action); color: var(--action-on); }
.zc-btn--primary:hover { background: var(--action-hover); }
.zc-btn--primary:active { background: var(--action-active); }
.zc-btn--ghost { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg); }
.zc-btn--ghost:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.zc-btn[disabled] { opacity: 0.45; pointer-events: none; }
.zc-btn__arrow { transition: transform var(--t-ctrl) var(--ease); }
.zc-btn:hover .zc-btn__arrow, .zc-link:hover .zc-btn__arrow { transform: translateX(3px); }
.zc-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); transition: text-decoration-color var(--t-ctrl) var(--ease); }
.zc-link:hover { text-decoration-color: currentColor; }
.zc-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Unconfirmed values + review mode (brief §3) ---------- */
.zc-tbc { font-variant-numeric: tabular-nums; }
.is-review .zc-tbc { text-decoration: underline dotted 1px; text-underline-offset: 0.22em; }
.is-review .zc-tbc::after { content: " to confirm"; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; vertical-align: 0.15em; }
.zc-review-pill { display: none; }
.is-review .zc-review-pill {
  display: block; position: fixed; left: 16px; bottom: 16px; z-index: 90; padding: 10px 14px; border-radius: var(--radius-pill);
  background: var(--brand-anchor); color: var(--brand-rest); font: 500 12px/1 var(--font-mono); letter-spacing: 0.02em;
}
.zc-review-only { display: none; }
.is-review .zc-review-only { display: block; }

/* ---------- Glass material (controls layer only) ---------- */
.zc-glass { position: relative; isolation: isolate; }
.zc-glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-tint-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-rim), var(--glass-shadow);
}
.zc-glass--dark::before {
  background: var(--glass-tint-anchor); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--glass-rim-dark), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

/* ---------- Header (brief §4.0) ---------- */
.zc-nav {
  position: fixed; z-index: 50; top: 16px; left: 0; right: 0; height: var(--nav-height);
  color: var(--brand-anchor); pointer-events: none;
  transition: transform 460ms var(--ease), color var(--t-ctrl) var(--ease);
}
.zc-nav.is-dark { color: var(--brand-rest); }
.zc-nav__glass {
  position: absolute; top: 6px; bottom: 6px; left: 50%; width: min(var(--container) + 48px, 100vw - 32px); translate: -50% 0;
  border-radius: var(--radius-pill); opacity: 0; transform: scale(1.02, 1.12);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: opacity 420ms var(--ease), transform 460ms var(--ease);
}
.zc-nav__tint { position: absolute; inset: 0; border-radius: inherit; transition: opacity var(--t-ctrl) var(--ease); }
.zc-nav__tint--light { background: var(--glass-tint-strong); box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--glass-rim); }
.zc-nav__tint--dark { background: var(--glass-tint-anchor); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px var(--glass-rim-dark); opacity: 0; }
.zc-nav.is-dark .zc-nav__tint--light { opacity: 0; }
.zc-nav.is-dark .zc-nav__tint--dark { opacity: 1; }
.zc-nav.is-scrolled { transform: translateY(-4px); }
.zc-nav.is-scrolled .zc-nav__glass { opacity: 1; transform: none; }
.zc-nav__row { position: relative; height: 100%; width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; pointer-events: auto; }

.zc-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 500 19px/1 var(--font-display); letter-spacing: -0.02em; justify-self: start; padding: 8px 4px; border-radius: var(--radius-sm); }
.zc-lockup__mark { width: 28px; height: 28px; position: relative; flex: none; }
.zc-lockup__mark img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--t-ctrl) var(--ease); }
.zc-lockup__mark img + img, .zc-nav.is-dark .zc-lockup__mark img:first-child { opacity: 0; }
.zc-nav.is-dark .zc-lockup__mark img + img { opacity: 1; }
.zc-lockup__word { transition: font-size 400ms var(--ease); }
.zc-nav.is-scrolled .zc-lockup__word { font-size: 15px; } /* the name stays with the mark on scroll */

.zc-nav__links { display: flex; align-items: center; gap: 4px; }
.zc-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font-body); text-decoration: none; color: inherit; opacity: 0.78; transition: opacity var(--t-ctrl) var(--ease);
}
.zc-nav__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transform: scale(0.92); transition: opacity var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease); z-index: -1; }
.zc-nav__link:hover, .zc-nav__link[aria-expanded="true"] { opacity: 1; }
.zc-nav__link.is-active { opacity: 1; }
.zc-nav__link.is-active::before { opacity: 0.08; transform: none; }
.zc-nav__link:focus-visible { border-radius: var(--radius-pill); }
.zc-nav__chev { width: 14px; height: 14px; transition: transform var(--t-ctrl) var(--ease); }
.zc-nav__link[aria-expanded="true"] .zc-nav__chev { transform: rotate(180deg); }

.zc-nav__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.zc-iconbtn { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; color: inherit; transition: background-color var(--t-ctrl) var(--ease); }
.zc-iconbtn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.zc-iconbtn:focus-visible { border-radius: 50%; }
.zc-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--brand-anchor); color: var(--brand-rest); font: 500 11px/18px var(--font-body); text-align: center; font-variant-numeric: tabular-nums;
}
.zc-nav.is-dark .zc-count { background: var(--brand-rest); color: var(--brand-anchor); }
.zc-count[data-count="0"] { display: none; }
.zc-nav__buy { opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease), background-color var(--t-ctrl) var(--ease); }
.zc-nav.show-buy .zc-nav__buy { opacity: 1; transform: none; pointer-events: auto; }
.zc-nav__menu { display: none; }

/* Shop panel */
.zc-shop { position: relative; }
.zc-shop__panel {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 420px; padding: 10px; border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; color: var(--brand-anchor);
  opacity: 0; transform: translate(-50%, -6px); visibility: hidden;
  transition: opacity var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease), visibility 0s var(--t-ctrl);
}
.zc-shop__panel.is-open { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.zc-shop__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-md); text-decoration: none; font: 500 15px/1.25 var(--font-body); transition: background-color var(--t-ctrl) var(--ease); }
.zc-shop__item:hover { background: rgba(34, 30, 28, 0.06); }
.zc-shop__item small { display: block; font-weight: 400; font-size: 13px; color: var(--fg-2); margin-top: 3px; }
.zc-shop__thumb { width: 48px; height: 48px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; flex: none; overflow: hidden; }
.zc-shop__thumb img { width: 40px; height: 40px; object-fit: contain; }

/* Phone menu sheet */
.zc-sheet {
  position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 88px 24px 32px; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease), visibility 0s var(--t-ctrl);
}
.zc-sheet.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.zc-sheet a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font: 400 28px/1.1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; }
.zc-sheet .zc-btn { margin-top: 24px; font-size: 16px; border: 0; letter-spacing: 0.01em; }

/* Phone dock (brief §4.0) */
.zc-dock {
  position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 64px;
  border-radius: var(--radius-pill); padding: 6px 6px 6px 10px; display: none; align-items: center; gap: 2px;
  opacity: 0; transform: translateY(140%); transition: opacity 300ms var(--ease), transform 420ms var(--ease);
}
.zc-dock.is-shown { opacity: 1; transform: none; }
.zc-dock__item { flex: 1; height: 52px; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: var(--radius-pill); color: var(--brand-anchor); text-decoration: none; font: 500 12px/1 var(--font-body); position: relative; }
.zc-dock__item .zc-icon { transition: transform var(--t-ctrl) var(--ease); }
.zc-dock__label { font-size: 12px; line-height: 1; white-space: nowrap; }
.zc-dock__item .zc-count { top: 2px; right: calc(50% - 22px); }
.zc-dock .zc-btn { flex: none; min-height: 52px; padding: 0 20px; }

/* ---------- Hero (brief §4.1) ---------- */
.zc-hero { padding: 16px; background: var(--bg); }
.zc-hero__stage {
  position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--stage);
  height: calc(100svh - 32px); min-height: 680px; max-height: 960px;
}
.zc-hero__name { font: 500 20px/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 20px; }
.zc-hero__title { font: 400 clamp(56px, min(6.2vw, 10vh), 104px)/0.98 var(--font-display); letter-spacing: -0.04em; }
.zc-line { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.zc-line__inner { display: block; }
.zc-hero__title .zc-line:nth-child(-n+2) { color: var(--fg-2); }
.zc-hero__cta { margin-top: 40px; }
.zc-hero__object { position: relative; aspect-ratio: 1200 / 642; }
/* desktop (fix 4): one centred column — name, two-line headline, CTA, then the pad sized to what's left of the stage */
@media (min-width: 861px) {
  .zc-hero__stage {
    --hero-h: clamp(680px, calc(100svh - 32px), 960px); /* the stage's real height (min/max as above) */
    --hero-pt: clamp(104px, 14vh, 136px);
    --hero-fs: clamp(56px, min(6.2vw, 10vh), 104px);
    display: flex; flex-direction: column; align-items: center; padding-top: var(--hero-pt); text-align: center;
  }
  .zc-hero__inner { order: 1; width: var(--container); }
  .zc-hero__copy { display: flex; flex-direction: column; align-items: center; }
  .zc-hero__name { margin-bottom: 18px; }
  .zc-hero__title { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.26em; font-size: var(--hero-fs); }
  .zc-hero__title::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .zc-hero__title .zc-line:nth-child(-n+2) { order: 1; }
  .zc-hero__title .zc-line:nth-child(n+3) { order: 3; }
  .zc-hero__cta { margin-top: 32px; }
  /* headline = 2 lines × 0.98; 192px = name + gaps + CTA + ≥56px clear under the shadow (brief: 190; +2 keeps 1366×768 at 56) */
  .zc-hero__object { order: 2; flex: none; width: min(64vw, 920px, calc((var(--hero-h) - var(--hero-pt) - 1.96 * var(--hero-fs) - 192px) * 1.87)); }
}
.zc-hero__scale { position: absolute; inset: 0; will-change: transform; }
.zc-hero__shadow { position: absolute; left: 15%; width: 70%; top: 70%; height: 22%; border-radius: 50%; background: var(--shadow-contact); filter: blur(40px); transform: translateY(28px); }
.zc-hero__canvas, .zc-hero__still { position: absolute; inset: 0; width: 100%; height: 100%; }
.is-canvas-ready .zc-hero__still { visibility: hidden; }

/* Hero intro: pre-hidden only with JS; failsafe reveals after 2.5s (brief §2) */
.js .zc-hero__stage { opacity: 0; }
.js .zc-hero__object { opacity: 0; transform: translateY(14px) scale(0.965); }
.js .zc-hero__title .zc-line__inner { transform: translateY(105%); }
.js .zc-hero__name, .js .zc-hero__cta { opacity: 0; }
.zc-hero.is-intro .zc-hero__stage { opacity: 1; transition: opacity 700ms var(--ease); }
.zc-hero.is-intro .zc-hero__object { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.zc-hero.is-intro .zc-hero__title .zc-line__inner { transform: none; transition: transform 700ms var(--ease); }
.zc-hero.is-intro .zc-line:nth-child(1) .zc-line__inner { transition-delay: 300ms; }
.zc-hero.is-intro .zc-line:nth-child(2) .zc-line__inner { transition-delay: 390ms; }
.zc-hero.is-intro .zc-line:nth-child(3) .zc-line__inner { transition-delay: 480ms; }
.zc-hero.is-intro .zc-line:nth-child(4) .zc-line__inner { transition-delay: 570ms; }
.zc-hero.is-intro .zc-hero__name, .zc-hero.is-intro .zc-hero__cta { opacity: 1; transition: opacity 300ms var(--ease) 800ms; }
.js .zc-hero:not(.is-intro) :is(.zc-hero__stage, .zc-hero__object, .zc-hero__name, .zc-hero__cta, .zc-line__inner) { animation: zc-failsafe 0.01s linear 2.5s forwards; }
@keyframes zc-failsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .zc-hero__stage, .js .zc-hero__object, .js .zc-hero__name, .js .zc-hero__cta { opacity: 1; transform: none; }
  .js .zc-hero__title .zc-line__inner { transform: none; }
}

@media (max-width: 860px) {
  .zc-nav__links, .zc-nav__end .zc-nav__buy { display: none; }
  .zc-nav__menu { display: inline-grid; }
  .zc-nav { top: 8px; height: 60px; }
  .zc-nav__glass { top: 4px; bottom: 4px; width: calc(100vw - 16px); }
  .zc-nav__row, .zc-nav.is-scrolled .zc-nav__row { grid-template-columns: 1fr auto; width: calc(100vw - 40px); margin-inline: auto; }
  .zc-nav.is-scrolled { transform: none; }
  .zc-nav.is-scrolled .zc-lockup__word { font-size: inherit; }
  .zc-nav__cart { transition: opacity var(--t-ctrl) var(--ease); }
  .zc-nav.dock-on .zc-nav__cart { opacity: 0; pointer-events: none; }
  .zc-dock { display: flex; }
  .zc-hero { padding: 8px; }
  /* phone: the stage sizes to its content (name, headline, pad, CTA 24px under the pad) */
  .zc-hero__stage { height: auto; min-height: 0; max-height: calc(100svh - 16px); display: flex; flex-direction: column; align-items: center; padding: 92px 16px 24px; text-align: center; }
  .zc-hero__inner, .zc-hero__copy { display: contents; }
  .zc-hero__name { order: 1; margin-bottom: 12px; font-size: 18px; }
  .zc-hero__title { order: 2; font-size: clamp(44px, 12vw, 52px); }
  .zc-hero__object { order: 3; position: relative; left: auto; top: auto; translate: none; flex: none; margin-top: 16px; width: min(88vw, 360px); }
  .zc-hero__cta { order: 4; align-self: stretch; display: flex; margin-top: 24px; }
  .zc-hero__cta .zc-btn { width: 100%; }
}

/* ---------- Waveform signature (shared component) ---------- */
.zc-wave { width: 100%; height: 36px; overflow: visible; }
.zc-wave path { fill: none; stroke: var(--wave-rest); stroke-width: var(--wave-rest-width); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke var(--t-ctrl) var(--ease); }
.zc-wave.is-live path { stroke: var(--signal-live); stroke-width: 1.75; filter: drop-shadow(0 0 3px var(--signal-glow)) drop-shadow(0 0 8px var(--signal-glow)); }
.zc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal-live); flex: none; }

/* ---------- Safety notice (§4.2) — never animated ---------- */
.zc-safety { background: var(--bg); padding: 24px 0 0; }
.zc-safety__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 20px; padding: 20px 0; border-block: 1px solid var(--line); }
.zc-safety__disc { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-warm); display: grid; place-items: center; }
.zc-safety__disc .zc-icon { width: 16px; height: 16px; stroke-width: 1.9; }
.zc-safety__text { font: 400 15px/1.5 var(--font-body); color: var(--fg-2); }
.zc-safety__title, .zc-safety__text p { display: inline; font: inherit; }
.zc-safety__title { font-weight: 500; color: var(--fg); }
.zc-safety__link { white-space: nowrap; }

/* ---------- Statement (§4.3, tier 1) ---------- */
.zc-statement__text { max-width: 22.5em; font: 400 clamp(30px, 3.75vw, 54px)/1.12 var(--font-display); letter-spacing: -0.03em; text-wrap: pretty; }
.zc-statement .zc-statement__text { max-width: 19em; margin-inline: auto; text-align: center; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.14; text-wrap: balance; }
.zc-statement { padding-top: var(--section-y); padding-bottom: 64px; }
/* product capsules: inline after "pod", "pad", "remote" (fix 3 §1b); the word, capsule and punctuation never part (3b) */
.zc-capword { white-space: nowrap; }
.zc-cap { display: inline-block; position: relative; height: 0.9em; width: 1.7em; vertical-align: -0.12em; margin-inline: 0.08em; border-radius: var(--radius-pill); background: var(--surface-warm); overflow: hidden; }
.zc-cap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.zc-cap--pod img { padding: 0.06em; }
.zc-cap--pad img { mix-blend-mode: multiply; padding: 0.04em 0.1em; }
.zc-cap--remote img { width: 0.6em; height: 1.48em; margin: auto; transform: rotate(-90deg); }


/* ---------- How it works film (§4.4) ---------- */
.zc-how { padding-bottom: 0; }
.zc-how .zc-section-head { margin-bottom: 0; }
.zc-facts { display: flex; flex-wrap: wrap; font-size: 15px; color: var(--fg-2); }
.zc-facts li { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--line-strong); line-height: 1.2; }
.zc-facts li:last-child { border: 0; margin: 0; padding: 0; }
.zc-film { height: 200vh; position: relative; }
.zc-film__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 72px; }
.zc-film__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.zc-steps { grid-column: 1 / span 5; display: grid; gap: 4px; }
.zc-step { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; padding: 20px 0; border-top: 1px solid var(--line); color: var(--muted); transition: color var(--t-ctrl) var(--ease); }
.zc-step:last-child { border-bottom: 1px solid var(--line); }
.zc-step__idx { padding-top: 9px; }
.zc-step__title { font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--font-display); letter-spacing: -0.025em; margin-bottom: 6px; }
.zc-step__text { max-width: 34ch; }
.zc-step.is-active { color: var(--fg); }
.zc-step.is-active .zc-step__text { color: var(--fg-2); }
.zc-film__stage { grid-column: 6 / span 7; display: grid; gap: 20px; }
.zc-film__object { position: relative; aspect-ratio: 10 / 6.6; max-height: calc(100vh - 260px); width: 100%; margin-inline: auto; }
.zc-film__canvas, .zc-film__still { position: absolute; inset: 0; width: 100%; height: 100%; }
.zc-film__still { object-fit: contain; padding: 0 7%; }
.is-film-ready .zc-film__still { visibility: hidden; }
.zc-film__shadow { position: absolute; left: 22%; width: 56%; top: 62%; height: 16%; border-radius: 50%; background: var(--shadow-contact); filter: blur(36px); transform: translateY(24px); }
.zc-instrument { display: grid; gap: 14px; }
.zc-instrument__wave { height: 48px; }
.zc-instrument__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.zc-readout { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.zc-readout .zc-dot { opacity: 0; transition: opacity var(--t-ctrl) var(--ease); }
.zc-film.is-on .zc-readout .zc-dot { opacity: 1; }
.zc-meter { display: inline-flex; align-items: center; gap: 12px; color: var(--fg-2); }
.zc-meter__bars { display: inline-flex; gap: 3px; }
.zc-meter__bars i { width: 6px; height: 16px; border-radius: 2px; background: var(--line-strong); transition: background-color 160ms var(--ease); }
.zc-meter__bars i.is-on { background: var(--signal-ink); }
.zc-meter__val { min-width: 1.4em; color: var(--fg); }

/* ---------- Numbers (§4.5) ---------- */
.zc-numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.zc-number { display: grid; align-content: start; gap: 8px; }
.zc-number__fig { font: 400 clamp(56px, 7.8vw, 112px)/1 var(--font-display); letter-spacing: -0.04em; padding-bottom: 20px; margin-bottom: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; }
.zc-number__unit { font: 500 20px/1 var(--font-mono); letter-spacing: 0; color: var(--fg-2); }
.zc-number__title { font: 500 17px/1.3 var(--font-body); }
.zc-number .zc-body { font-size: 15px; }
.zc-numbers__foot { margin-top: 32px; color: var(--fg-2); }

@media (max-width: 860px) {
  .zc-safety__inner { grid-template-columns: auto 1fr; padding: 24px 0; }
  .zc-safety__link { grid-column: 2; justify-self: start; }
  .zc-safety__disc { align-self: start; }
  .zc-safety { padding-top: 24px; }
  .zc-facts { row-gap: 8px; }
  .zc-film { height: auto; }
  .zc-film__sticky { display: block; position: static; height: auto; padding: 0; }
  .zc-film__grid { display: flex; flex-direction: column-reverse; }
  .zc-film__stage { position: sticky; top: 64px; z-index: 2; background: var(--bg); padding: 8px 0 12px; width: 100%; gap: 8px; }
  .zc-film__object { max-height: none; aspect-ratio: 10 / 6.2; width: min(100%, 440px); }
  .zc-instrument__wave { height: 36px; }
  .zc-instrument__row { padding-top: 10px; }
  .zc-steps { gap: 0; }
  .zc-step { min-height: 30vh; align-content: start; padding: 24px 0; border-bottom: 0; }
  .zc-step:last-child { min-height: 20vh; }
  .zc-numbers__grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .zc-number__fig { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .zc-film { height: auto; }
  .zc-film__sticky { position: static; height: auto; }
  .zc-step { color: var(--fg); }
}

/* ---------- Where does it hurt? (§4.6) ---------- */
.zc-where { overflow-x: clip; }
.zc-where__head { margin-bottom: 32px; }
.zc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.zc-chip {
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--surface); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border); font: 500 15px/1 var(--font-body);
  transition: background-color var(--t-ctrl) var(--ease), color var(--t-ctrl) var(--ease), box-shadow var(--t-ctrl) var(--ease);
}
.zc-chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.zc-chip[aria-selected="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.zc-chip:focus-visible { border-radius: var(--radius-pill); }
.zc-rail {
  --rail-pad: max(var(--gutter), (100vw - var(--container-max)) / 2);
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px var(--rail-pad) 8px; scroll-padding-inline: var(--rail-pad); scrollbar-width: none;
}
.zc-rail::-webkit-scrollbar { display: none; }
.zc-spot-cell { flex: 0 0 clamp(280px, 26vw, 360px); scroll-snap-align: start; }
/* fix 4b, desktop with motion: the pinned block fits between the nav (96px) and the screen bottom;
   350px = pin top + chips + caption + progress line. Product pages add the 88px sticky purchase bar. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .zc-where { --where-budget: 350px; }
  body:has(.zc-buybar) .zc-where { --where-budget: 438px; }
  .zc-spot-cell { flex-basis: min(clamp(280px, 26vw, 360px), (100svh - var(--where-budget)) * 0.8); }
}
.zc-where__pin { overflow-x: clip; }
/* JS-driven track: the rail stops scrolling natively and is moved with translateX */
.zc-rail.is-driven { overflow: visible; scroll-snap-type: none; position: relative; will-change: transform; }
.zc-rail.is-driven .zc-spot-cell { scroll-snap-align: none; }
/* edge-zone blend: JS sets scale on the tile and opacity on tile + caption */
.zc-spot__tile { transform-origin: center bottom; }
.zc-rail.is-pre .zc-spot-cell { opacity: 0; transform: translateY(24px); }
.zc-rail.is-in .zc-spot-cell { transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.zc-spot { display: flex; flex-direction: column; width: 100%; text-align: left; border-radius: var(--radius-lg); }
.zc-spot:focus-visible { border-radius: var(--radius-lg); }
.zc-spot__tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); isolation: isolate; }
.zc-spot__tile::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 2px var(--fg); opacity: 0; transition: opacity var(--t-ctrl) var(--ease); pointer-events: none; }
.zc-spot[aria-pressed="true"] .zc-spot__tile::after { opacity: 1; }
.zc-spot__media { position: absolute; inset: 0; display: block; }
.zc-spot__img { width: 100%; height: 100%; object-fit: cover; user-select: none; transition: transform 600ms var(--ease); }
.zc-spot:is(:hover, :focus-visible) .zc-spot__img { transform: scale(1.04); }
/* signal ripple: current flows where the pod sits */
.zc-ripple { position: absolute; left: var(--rx); top: var(--ry); width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none; opacity: 0; transition: opacity var(--t-ctrl) var(--ease); }
.zc-ripple i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--signal); opacity: 0; }
.zc-spot:is(:hover, :focus-visible, [aria-pressed="true"]) .zc-ripple { opacity: 1; }
.zc-spot:is(:hover, :focus-visible, [aria-pressed="true"]) .zc-ripple i { animation: zc-ripple 1.8s var(--ease) infinite; }
.zc-ripple i + i { animation-delay: 0.9s !important; }
@keyframes zc-ripple { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
.zc-spot__mark {
  position: absolute; top: 16px; left: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px;
  border-radius: var(--radius-pill); background: var(--bg); color: var(--fg); font-size: 12px;
  opacity: 0; transform: translateY(4px); transition: opacity var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease);
}
.zc-spot[aria-pressed="true"] .zc-spot__mark { opacity: 1; transform: none; }
.zc-spot__name { margin-top: 20px; font: 400 28px/1.1 var(--font-display); letter-spacing: -0.025em; }
.zc-spot__progs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.zc-railbar { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.zc-railbar__track { position: relative; flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.zc-railbar__thumb { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0.3); }
@media (prefers-reduced-motion: reduce) {
  .zc-ripple i { animation: none !important; transform: none; opacity: 0.9; }
  .zc-ripple i + i { display: none; }
  .zc-spot__img { transition: none; }
}
@media (max-width: 700px) {
  .zc-spot-cell { flex-basis: 78vw; }
}
.zc-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px; border-radius: var(--radius-pill); background: var(--surface-warm); color: var(--brand-anchor); font: 500 14px/1 var(--font-body); }
.zc-wave--glyph { width: 22px; height: 12px; }
.zc-wave--glyph path { stroke: var(--brand-anchor); }
.zc-spot:is(:hover, :focus-visible) .zc-wave--glyph path { stroke: var(--signal-ink); }
.zc-where__foot { margin-top: 20px; }

/* ---------- Two ways to relief (§4.7, dark) ---------- */
.zc-programs__head { margin-bottom: 48px; display: grid; gap: 16px; }
.zc-programs__title { max-width: 14em; }
.zc-programs__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.zc-quick { grid-column: 1 / span 7; padding-right: 32px; }
.zc-quick .zc-h3 { margin-bottom: 20px; }
.zc-quick__list { border-top: 1px solid var(--line); }
.zc-prog {
  width: 100%; min-height: 88px; display: grid; grid-template-columns: 1fr 12px 200px; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--fg-2);
}
.zc-prog:focus-visible { border-radius: var(--radius-sm); }
.zc-prog__text { display: grid; gap: 4px; }
.zc-prog__name { display: flex; align-items: center; gap: 12px; font: 400 24px/1.15 var(--font-display); letter-spacing: -0.02em; transition: color var(--t-ctrl) var(--ease); }
.zc-prog__best { font-size: 15px; color: var(--fg-2); }
.zc-prog__tag { font: 500 13px/1 var(--font-body); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--brand-nurture); color: var(--brand-anchor); letter-spacing: 0; }
.zc-prog__dot { opacity: 0; transition: opacity var(--t-ctrl) var(--ease); }
.zc-prog__wave { height: 36px; }
.zc-prog:hover .zc-prog__name { color: var(--fg); }
.zc-prog.is-live .zc-prog__name { color: var(--fg); }
.zc-prog.is-live .zc-prog__dot { opacity: 1; }

.zc-smart { grid-column: 8 / span 5; background: var(--card-dark); border-radius: var(--radius-lg); padding: 32px; display: grid; gap: 16px; }
.zc-smart .zc-h3 { margin-bottom: 4px; }
.zc-smart__flow { margin-bottom: 8px; }
.zc-smart__notice { color: var(--fg); font-size: 16px; }
.zc-smart__notice a { text-decoration-color: currentColor; }
.zc-smart__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zc-smart__step { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding-top: 6px; font: 500 15px/1 var(--font-body); color: var(--fg-2); text-align: left; }
.zc-smart__step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: var(--line-strong); }
.zc-smart__step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.zc-smart__step.is-done::after, .zc-smart__step[aria-selected="true"]::after { transform: none; }
.zc-smart__step[aria-selected="true"], .zc-smart__step.is-done { color: var(--fg); }
.zc-smart__options { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.zc-opt {
  min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); font: 500 14px/1 var(--font-body); color: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-rest) 22%, transparent);
  transition: background-color var(--t-ctrl) var(--ease), color var(--t-ctrl) var(--ease), box-shadow var(--t-ctrl) var(--ease);
}
.zc-opt:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-rest) 50%, transparent); }
.zc-opt[aria-pressed="true"] { background: var(--brand-rest); color: var(--brand-anchor); box-shadow: none; }
.zc-opt:focus-visible { border-radius: var(--radius-pill); }
.zc-smart__pattern { display: grid; gap: 10px; padding-top: 8px; }
.zc-smart__wave { height: 44px; }
.zc-smart__result { color: var(--fg); }
.zc-smart__result:empty { display: none; }
.zc-smart__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.zc-smart__saved { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; opacity: 0; transition: opacity var(--t-ctrl) var(--ease); }
.zc-smart.is-saved .zc-smart__saved { opacity: 1; }
.zc-smart__restart { --btn-h: 44px; }

@media (max-width: 1100px) {
  .zc-quick, .zc-smart { grid-column: 1 / -1; padding-right: 0; }
  .zc-smart { margin-top: 48px; }
}
@media (max-width: 860px) {
  /* one scrolling row, bleeding to the viewport edge; the gutter becomes scroll padding */
  .zc-chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: -4px calc(-1 * var(--gutter)) 20px; padding: 4px var(--gutter); scroll-padding-inline: var(--gutter); /* 4px keeps the focus ring inside the scroller */
  }
  .zc-chips::-webkit-scrollbar { display: none; }
  .zc-chip { flex: none; scroll-snap-align: start; }
  /* compact rows: name + "Best for"; only the live row draws its waveform */
  .zc-prog { min-height: 0; grid-template-columns: 1fr 12px; row-gap: 10px; padding: 12px 0; }
  .zc-prog__text { gap: 2px; }
  .zc-prog__best { font-size: 14px; line-height: 1.35; text-wrap: pretty; } /* wraps rather than truncates */
  .zc-prog__wave { grid-column: 1 / -1; height: 32px; }
  .zc-prog:not(.is-live) .zc-prog__wave { display: none; }
  .zc-prog__name { font-size: 22px; flex-wrap: wrap; }
  .zc-smart { padding: 24px; }
  .zc-programs__head { margin-bottom: 40px; }
}
[data-theme="dark"] { --line: color-mix(in srgb, var(--brand-rest) 10%, transparent); --line-strong: color-mix(in srgb, var(--brand-rest) 22%, transparent); }

/* ---------- Reviews: film band + featured voice (§4.8) ---------- */
.zc-band { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 7; background: var(--brand-anchor); }
.zc-band__video { width: 100%; height: 100%; object-fit: cover; }
.zc-band__copy {
  position: absolute; left: 0; bottom: 0; max-width: 720px; padding: 120px 48px 44px; color: var(--brand-rest);
  background: radial-gradient(120% 100% at 0% 100%, var(--scrim) 0%, rgba(34, 30, 28, 0.35) 55%, transparent 80%);
}
.zc-band__title { font: 400 clamp(32px, 3.9vw, 56px)/1.04 var(--font-display); letter-spacing: -0.035em; margin-bottom: 12px; text-wrap: balance; }
.zc-band__text { max-width: 44ch; color: var(--brand-rest); opacity: 0.88; }
.zc-band__toggle { position: absolute; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--brand-anchor); }
.zc-band__toggle:focus-visible { border-radius: 50%; }
.zc-band__toggle .zc-icon { width: 18px; height: 18px; }

.zc-voices { padding-top: 88px; }
.zc-voices__title { margin-bottom: 48px; }
.zc-voices__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.zc-voice__index { grid-column: 1 / span 4; }
.zc-voice__tabs { display: grid; border-top: 1px solid var(--line); }
.zc-voice__tab { position: relative; height: 72px; display: flex; align-items: center; gap: 14px; text-align: left; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.zc-voice__tab:focus-visible { border-radius: var(--radius-sm); }
.zc-voice__who { display: grid; gap: 3px; }
.zc-voice__name { font: 500 17px/1.2 var(--font-body); transition: color var(--t-ctrl) var(--ease); }
.zc-voice__ctx { font-size: 14px; line-height: 1.2; color: var(--muted); }
.zc-voice__tab[aria-selected="true"] .zc-voice__name, .zc-voice__tab:hover .zc-voice__name { color: var(--fg); }
/* active disc inverts; a 52px ring (track + arc) fills clockwise from 12 o'clock over the 7 s, 4px clear of the 40px disc (fix 3 §3, 3b) */
.zc-voice__tab .zc-disc { position: relative; transition: background-color 240ms var(--ease), color 240ms var(--ease); }
.zc-voice__tab[aria-selected="true"] .zc-disc { background: var(--fg); color: var(--bg); }
.zc-ring { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; max-width: none; transform: rotate(-90deg); overflow: visible; opacity: 0; transition: opacity 200ms var(--ease); pointer-events: none; }
.zc-ring circle { fill: none; stroke-width: 1.5; }
.zc-ring__track { stroke: var(--line-strong); }
.zc-ring__arc { stroke: var(--fg); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.zc-voice__tab[aria-selected="true"] .zc-ring { opacity: 1; }
.zc-disc { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface-warm); color: var(--brand-anchor); display: grid; place-items: center; font: 500 14px/1 var(--font-body); }
.zc-voice__stage { grid-column: 6 / span 7; display: grid; align-self: center; }
.zc-voice__panel { grid-area: 1 / 1; display: grid; align-content: start; }
.js .zc-voice__panel { visibility: hidden; }
.js .zc-voice__panel:is(.is-active, .is-leaving) { visibility: visible; }
.zc-voice__quote [class$="-mask"] { margin-bottom: -0.14em; }
.zc-voice__quote .zc-ql { padding-bottom: 0.14em; } /* descender room inside the line, so yPercent ±100 clears the mask fully (3b) */
.zc-voice__mark { font: 400 120px/0.7 var(--font-display); color: var(--surface-warm); height: 60px; }
.zc-voice__quote { font: 400 clamp(28px, 3.05vw, 44px)/1.15 var(--font-display); letter-spacing: -0.02em; text-wrap: pretty; margin: 8px 0 32px; }
.zc-voice__by { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--fg-2); }
.zc-voice__by strong { font-weight: 500; color: var(--fg); margin-right: 4px; }
.zc-voice__disc { display: none; }
.zc-voice__dots { display: none; }

/* ---------- Supported by (§4.9) ---------- */
/* fix 4: two full-bleed rows of white tiles, logos in full colour, always moving (JS adds .is-anim + clone sets).
   Without JS or with reduced motion: a centred wrapping grid in the container, 6 per row (2 on phone). */
.zc-supported { overflow: clip; }
.zc-supported__title { margin-bottom: 48px; }
.zc-logos { --tile-w: 240px; --tile-h: 128px; --gap: 16px; --fade: 80px;
  width: var(--container); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.zc-logos__row { display: contents; }
.zc-logos__item { position: relative; flex: none; width: calc((100% - 5 * var(--gap)) / 6); height: var(--tile-h); display: grid; place-items: center; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; }
.zc-logos__item img { height: var(--h); width: auto; max-width: calc(100% - 32px); object-fit: contain; transition: transform var(--t-ctrl) var(--ease); }
.zc-logos__name { position: absolute; left: 16px; right: 16px; bottom: 10px; font: 400 12px/1.2 var(--font-body); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--t-ctrl) var(--ease); }
.zc-logos__item:hover img { transform: translateY(-8px); }
.zc-logos__item:hover .zc-logos__name { opacity: 1; }
.zc-logos.is-anim { width: auto; display: grid; justify-content: stretch; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--fade), black calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(to right, transparent, black var(--fade), black calc(100% - var(--fade)), transparent); }
.zc-logos.is-anim .zc-logos__row { display: flex; gap: var(--gap); width: max-content; animation: zc-loop 80s linear infinite; --to: translateX(calc(-1 * var(--set, 0px))); }
.zc-logos.is-anim .zc-logos__row--right { animation-duration: 70s; animation-direction: reverse; }
.zc-logos.is-anim .zc-logos__item { width: var(--tile-w); }
.zc-logos.is-paused .zc-logos__row { animation-play-state: paused; } /* off-screen only */
@keyframes zc-loop { from { transform: none; } to { transform: var(--to); } }
@media (max-width: 700px) {
  .zc-logos { --tile-w: 160px; --tile-h: 96px; --gap: 12px; --fade: 32px; }
  .zc-logos__item { width: calc((100% - var(--gap)) / 2); }
  .zc-logos__item img { height: calc(var(--h) * 0.72); }
}

/* ---------- iThera Pro (§4.10, dark) ---------- */
.zc-pro__head { display: grid; gap: 20px; margin-bottom: 48px; max-width: 900px; }
.zc-pro__title { font-size: clamp(36px, 4.45vw, 64px); }
.zc-pro__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.zc-pro__stage { grid-column: 1 / span 7; position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-xl); overflow: hidden; background: var(--card-dark); }
.zc-pro__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-photo) var(--ease); }
.zc-pro__photo.is-active { opacity: 1; }
.zc-seg { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-pill); }
.zc-seg::before { background: var(--glass-tint-strong); }
.zc-seg__btn { min-height: 44px; padding: 0 18px; white-space: nowrap; border-radius: var(--radius-pill); color: var(--brand-anchor); font: 500 14px/1 var(--font-body); transition: background-color var(--t-ctrl) var(--ease), color var(--t-ctrl) var(--ease); }
.zc-seg__btn:hover { background: rgba(34, 30, 28, 0.07); }
.zc-seg__btn[aria-selected="true"] { background: var(--brand-anchor); color: var(--brand-rest); }
.zc-seg__btn:focus-visible { border-radius: var(--radius-pill); }
.zc-pro__side { grid-column: 9 / span 4; display: grid; gap: 24px; }
.zc-pro__pods { width: min(320px, 100%); margin: -8px auto 0; }
.zc-pro__lines { display: grid; gap: 6px; }
.zc-pro__lines .zc-wave { height: 28px; }
.zc-pro__rows { border-top: 1px solid var(--line); }
.zc-pro__rows li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.zc-pro__rows h3 { font: 500 17px/1.3 var(--font-body); margin-bottom: 2px; }
.zc-pro__rows p { color: var(--fg-2); font-size: 15px; }
.zc-pro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 8px; }

/* ---------- Choose your iThera (§4.11) ---------- */
.zc-choose__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.zc-choice { background: var(--surface); border-radius: var(--radius-xl); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.zc-choice__media { display: grid; place-items: center; aspect-ratio: 5 / 2; }
/* same pod scale in both cards: one pod spans 424/486 (87%) of its frame in device-360, ~490/1000 (49%) in pods-float */
.zc-choice__media img { width: var(--img-w); height: auto; transition: transform 600ms var(--ease); }
.zc-choice[data-product_id="101"] { --img-w: calc(48% * 0.49 / 0.872); }
.zc-choice[data-product_id="102"] { --img-w: 48%; }
.zc-choice:hover .zc-choice__media img { transform: scale(1.03); }
.zc-choice__body { display: grid; align-content: start; gap: 10px; padding: 0 40px 36px; }
.zc-choice__name { font: 400 clamp(32px, 2.8vw, 40px)/1.05 var(--font-display); letter-spacing: -0.03em; }
.zc-choice__name a { text-decoration: none; }
.zc-tm { font-size: 0.45em; vertical-align: super; letter-spacing: 0; } /* ™ at display sizes only */
.zc-choice__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.zc-choice__line { color: var(--fg-2); }
.zc-choice__bullets { display: grid; border-top: 1px solid var(--line); }
.zc-choice__bullets li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--fg-2); }
.zc-choice__price { font: 400 28px/1 var(--font-display); letter-spacing: -0.02em; padding-top: 12px; font-variant-numeric: tabular-nums; }
.zc-choice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 8px; }
/* side by side: both cards share seven rows, so bullets, price and actions sit at the same y */
@media (min-width: 861px) {
  .zc-choose__cards { grid-template-rows: repeat(7, auto); row-gap: 0; }
  .zc-choice { grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .zc-choice__body { grid-row: span 6; grid-template-rows: subgrid; }
}

.zc-compare { margin-top: 64px; display: grid; gap: 24px; }
.zc-compare__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zc-compare__table th, .zc-compare__table td { text-align: left; vertical-align: top; padding: 14px 24px 14px 0; border-bottom: 1px solid var(--line); }
.zc-compare__table thead th { font: 500 17px/1.2 var(--font-body); color: var(--fg); }
.zc-compare__table tbody th { font: 500 14px/1.4 var(--font-body); color: var(--fg-2); width: 22%; }
.zc-compare__table td { width: 39%; color: var(--fg); }
.zc-disclosure summary, .zc-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.zc-disclosure summary::-webkit-details-marker, .zc-faq__q::-webkit-details-marker { display: none; }
.zc-disclosure summary { min-height: 48px; font-weight: 500; }
.zc-disclosure summary:focus-visible, .zc-faq__q:focus-visible { border-radius: var(--radius-sm); }
.zc-faq__icon { transition: transform var(--t-ctrl) var(--ease); }
details.is-open > summary .zc-faq__icon, html:not(.js) details[open] > summary .zc-faq__icon { transform: rotate(45deg); }
.zc-faq__a { display: grid; grid-template-rows: 1fr; }
.js details:not(.is-open) > .zc-faq__a { grid-template-rows: 0fr; }
.js .zc-faq__a { transition: grid-template-rows 320ms var(--ease); }
.zc-faq__a > div { overflow: hidden; min-height: 0; }
.zc-shared { display: grid; gap: 8px; padding: 8px 0 16px; color: var(--fg-2); }
.zc-shared li::before { content: "— "; color: var(--muted); }

.zc-pads { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 24px 0; border-block: 1px solid var(--line); }
.zc-pads__tiles { display: flex; gap: 8px; }
.zc-pads__tile { width: 56px; height: 56px; border-radius: 12px; background: var(--surface); overflow: hidden; display: grid; place-items: center; }
.zc-pads__tile img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.zc-pads .zc-link { margin-left: auto; }
.zc-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 24px; font-size: 15px; color: var(--fg-2); }

/* ---------- FAQ (§4.12) — never animated text ---------- */
.zc-faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.zc-faq__head { grid-column: 1 / span 4; display: grid; align-content: start; gap: 20px; }
.zc-faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--border-soft); }
.zc-faq__item { border-bottom: 1px solid var(--border-soft); }
.zc-faq__q { min-height: 64px; padding: 16px 0; font: 400 20px/1.3 var(--font-display); letter-spacing: -0.01em; }
.zc-faq__a p { padding: 0 48px 24px 0; color: var(--fg-2); max-width: 62ch; }

/* ---------- Footer (§4.13, dark) ---------- */
.zc-footer { background: var(--bg); color: var(--fg); padding: var(--section-y) 0 40px; overflow: hidden; }
.zc-footer__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; }
.zc-signup { grid-column: 1 / span 5; display: grid; gap: 16px; align-content: start; }
.zc-toggle { border: 0; margin: 4px 0 0; padding: 4px; display: inline-flex; justify-self: start; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); }
.zc-toggle label { position: relative; }
.zc-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.zc-toggle span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill); font: 500 14px/1 var(--font-body); color: var(--fg-2); transition: background-color var(--t-ctrl) var(--ease), color var(--t-ctrl) var(--ease); }
.zc-toggle input:checked + span { background: var(--brand-rest); color: var(--brand-anchor); }
.zc-toggle input:focus-visible + span { box-shadow: var(--focus-ring); }
.zc-signup__row { display: flex; gap: 8px; }
.zc-input {
  flex: 1; min-width: 0; height: 56px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--card-dark); color: var(--fg); font-size: 16px; transition: border-color var(--t-ctrl) var(--ease);
}
.zc-input::placeholder { color: var(--meta); }
.zc-input:hover { border-color: color-mix(in srgb, var(--brand-rest) 40%, transparent); }
.zc-input:focus-visible { outline: none; border-color: var(--brand-nurture); box-shadow: var(--focus-ring); }
.zc-signup__msg { min-height: 1.5em; font-size: 15px; color: var(--fg-2); }
.zc-footer__cols { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.zc-footer__cols h3 { font: 500 14px/1.3 var(--font-body); color: var(--fg); margin-bottom: 16px; }
.zc-footer__cols ul { display: grid; gap: 4px; }
.zc-footer__cols a { display: inline-flex; min-height: 32px; align-items: center; color: var(--fg-2); text-decoration: none; font-size: 15px; transition: color var(--t-ctrl) var(--ease); }
.zc-footer__cols a:hover { color: var(--fg); text-decoration: underline; }
.zc-footer__meta { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 14px; color: var(--fg-2); }
.zc-footer__meta a { color: var(--fg); }
.zc-footer__close { margin-top: 48px; }
.zc-footer__rule { display: block; height: 1px; background: var(--line-strong); }
.zc-footer__word { font: 400 clamp(72px, 14.5vw, 208px)/0.8 var(--font-display); letter-spacing: -0.055em; color: color-mix(in srgb, var(--brand-rest) 7%, transparent); margin: 32px 0 0 -0.04em; white-space: nowrap; user-select: none; }
.zc-footer__copy { margin-top: 24px; font-size: 14px; color: var(--meta); }

/* ---------- Mini-cart drawer ---------- */
.zc-drawer { margin: 0 0 0 auto; height: 100%; max-height: none; width: min(440px, 100vw); padding: 12px; border: 0; background: transparent; color: var(--fg); overflow: visible; }
.zc-drawer::backdrop { background: rgba(34, 30, 28, 0.36); }
.zc-drawer[open] .zc-drawer__panel { animation: zc-drawer-in 360ms var(--ease); }
@keyframes zc-drawer-in { from { transform: translateX(24px); opacity: 0; } }
.zc-drawer__panel { height: 100%; border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.zc-drawer__panel::before { background: rgba(246, 244, 244, 0.9); }
.zc-drawer__head { display: flex; justify-content: space-between; align-items: center; }
.widget_shopping_cart_content { flex: 1; overflow: auto; }
.zc-drawer__empty { color: var(--fg-2); }
.zc-drawer__items { display: grid; gap: 12px; }
.zc-drawer__items li { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-md); background: var(--surface); }
.zc-drawer__items img { width: 48px; height: 48px; object-fit: contain; }
.zc-drawer__line { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.zc-drawer__name { font-weight: 500; }
.zc-drawer__end { display: grid; justify-items: end; align-self: stretch; align-content: space-between; gap: 8px; }
.zc-drawer__end .zc-iconbtn { margin: -6px -6px 0 0; }
.zc-drawer__shop { color: var(--accent); }
.zc-drawer__foot { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.zc-drawer__sub { display: flex; justify-content: space-between; font-weight: 500; }

@media (max-width: 1100px) {
  .zc-pro__stage { grid-column: 1 / -1; }
  .zc-pro__side { grid-column: 1 / -1; margin-top: 40px; }
  .zc-faq__head { grid-column: 1 / -1; margin-bottom: 40px; }
  .zc-faq__list { grid-column: 1 / -1; }
  .zc-signup, .zc-footer__cols { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .zc-band { aspect-ratio: 4 / 5; }
  .zc-band__copy { padding: 96px 24px 28px; right: 0; }
  .zc-band__toggle { top: 16px; right: 16px; bottom: auto; }
  .zc-voices__title { margin-bottom: 32px; }
  .zc-voices__grid { display: block; }
  .zc-voice__index { display: none; }
  .zc-voice__stage { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .zc-voice__stage::-webkit-scrollbar { display: none; }
  .js .zc-voice__panel, .zc-voice__panel { flex: 0 0 86%; scroll-snap-align: start; opacity: 1; visibility: visible; background: var(--surface); border-radius: var(--radius-lg); padding: 24px; }
  .zc-voice__mark { font-size: 80px; height: 40px; }
  .zc-voice__quote { font-size: 28px; margin: 4px 0 24px; }
  .zc-voice__disc { display: grid; }
  .zc-voice__by { gap: 10px 12px; }
  .zc-voice__by > span:nth-child(2) { flex: 1; }
  .zc-voice__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
  .zc-voice__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: transform var(--t-ctrl) var(--ease), background-color var(--t-ctrl) var(--ease); }
  .zc-voice__dots span.is-on { background: var(--fg); transform: scale(1.35); }
  .zc-choose__cards { grid-template-columns: 1fr; }
  .zc-choice__body { padding: 0 24px 28px; }
  .zc-compare { margin-top: 64px; }
  .zc-compare__table { font-size: 14px; }
  .zc-compare__table tbody th { width: 26%; }
  .zc-pads .zc-link { margin-left: 0; }
  .zc-perks { grid-template-columns: 1fr; gap: 10px; }
  .zc-faq__q { font-size: 18px; }
  .zc-faq__a p { padding-right: 8px; }
  .zc-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .zc-signup__row { flex-direction: column; }
  .zc-footer { padding-bottom: 120px; }
}
@media (max-width: 600px) {
  /* compare: each row stacks, label first, then the two models side by side */
  .zc-compare__table thead { display: none; }
  .zc-compare__table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .zc-compare__table tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; border: 0; font: 500 14px/1.4 var(--font-body); color: var(--fg-2); }
  .zc-compare__table td { width: auto; padding: 0; border: 0; }
  .zc-compare__table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; line-height: 1.3; color: var(--muted); }
  .zc-signup .zc-input { flex: none; height: 48px; font-size: 16px; } /* 16px stops iOS zoom on focus */
  .zc-signup .zc-btn { --btn-h: 48px; }
}

/* dark chapters keep full padding: their edges are a change of ground */
.zc-section[data-theme="dark"] { padding-bottom: var(--section-y); }

/* =====================================================================
   Phase 2: product pages (single-product template). Homepage rules above are unchanged.
   ===================================================================== */
.zc-btn--outline { box-shadow: inset 0 0 0 1px var(--fg); color: var(--fg); }
.zc-btn--outline:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.zc-btn--outline:active { background: color-mix(in srgb, var(--fg) 12%, transparent); }

.zc-pp { padding: 96px 0 calc(var(--section-y) * 0.5); }
.zc-pp__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }

/* Gallery stage */
.zc-pg { grid-column: 1 / span 7; min-width: 0; }
.zc-pg__stage { position: relative; width: min(100%, 100svh - 240px); aspect-ratio: 1 / 1; border-radius: var(--radius-xl); background: var(--stage); overflow: hidden; color: var(--fg); }
[data-model="pro"] .zc-pg__stage { background: var(--brand-anchor); }
.zc-pg__track { position: absolute; inset: 0; }
.zc-pg__slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s 400ms; }
.zc-pg__slide.is-active { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease); }
.zc-pg__slide--kit { mix-blend-mode: multiply; } /* the flat-lay's white ground drops into the stage */
.zc-pg__obj { width: 86%; height: auto; user-select: none; }
.zc-pg__slide--obj-remote .zc-pg__obj { width: auto; height: 74%; }
.zc-pg__slide--kit .zc-pg__obj { width: 94%; filter: brightness(1.04) contrast(1.05); }
.zc-pg__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.zc-pg__pods { position: relative; width: 82%; }
.zc-pg__pods img { width: 100%; user-select: none; }
.zc-pg__halo { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; animation: zc-halo 3.6s var(--ease) infinite alternate; }
.zc-pg__glow { stop-color: var(--signal); stop-opacity: 0.38; }
.zc-pg__glow--out { stop-opacity: 0; }
@keyframes zc-halo { from { opacity: 0.55; } to { opacity: 1; } }

.zc-pg__spin { position: relative; width: 52%; aspect-ratio: 486 / 506; cursor: grab; touch-action: pan-y; user-select: none; }
.zc-pg__spin:active { cursor: grabbing; }
.zc-pg__spin:focus-visible { border-radius: var(--radius-lg); }
.zc-pg__spin-still, .zc-pg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zc-pg__spin.is-ready .zc-pg__spin-still { visibility: hidden; }
.zc-pg__hint {
  position: absolute; left: 50%; bottom: 24px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px;
  border-radius: var(--radius-pill); background: var(--surface); color: var(--fg); font: 500 13px/1 var(--font-body); white-space: nowrap; pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.zc-pg__hint .zc-icon { width: 18px; height: 18px; }
html:not(.js) .zc-pg__hint, .zc-pg__slide.is-touched .zc-pg__hint { opacity: 0; transform: translateY(6px); }

.zc-pg__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.zc-pg__thumb { position: relative; width: 72px; height: 72px; border-radius: var(--radius-md); background: var(--surface); overflow: hidden; display: grid; place-items: center; }
.zc-pg__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--t-ctrl) var(--ease); }
.zc-pg__thumb img { width: 78%; height: 78%; object-fit: contain; user-select: none; }
.zc-pg__thumb--photo img { width: 100%; height: 100%; object-fit: cover; }
.zc-pg__thumb:hover::after { box-shadow: inset 0 0 0 1px var(--line-strong); }
.zc-pg__thumb[aria-selected="true"]::after { box-shadow: inset 0 0 0 2px var(--brand-anchor); }
.zc-pg__thumb:focus-visible { border-radius: var(--radius-md); }
[data-model="pro"] .zc-pg__thumb { background: var(--brand-anchor); }
[data-model="pro"] .zc-pg__thumb::after { box-shadow: inset 0 0 0 1px transparent; }
[data-model="pro"] .zc-pg__thumb:hover::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-rest) 40%, transparent); }
[data-model="pro"] .zc-pg__thumb[aria-selected="true"]::after { box-shadow: inset 0 0 0 2px var(--brand-rest); }
.zc-pg__dots { display: none; }

/* Buy box (summary) */
.zc-buy { grid-column: 8 / span 5; position: sticky; top: 96px; display: flex; flex-direction: column; padding-left: 24px; }
.zc-model { display: inline-grid; grid-template-columns: 1fr 1fr; align-self: flex-start; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.zc-model__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border-radius: var(--radius-pill); font: 500 14px/1 var(--font-body); color: var(--fg-2); text-decoration: none; white-space: nowrap; transition: background-color var(--t-ctrl) var(--ease), color var(--t-ctrl) var(--ease); }
.zc-model__opt:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }
.zc-model__opt[aria-current="page"] { background: var(--brand-anchor); color: var(--brand-rest); }
.zc-model__opt:focus-visible { border-radius: var(--radius-pill); }
[data-model="pro"] .zc-model { background: var(--brand-anchor); box-shadow: none; }
[data-model="pro"] .zc-model__opt { color: color-mix(in srgb, var(--brand-rest) 82%, transparent); }
[data-model="pro"] .zc-model__opt:hover { background: color-mix(in srgb, var(--brand-rest) 12%, transparent); color: var(--brand-rest); }
[data-model="pro"] .zc-model__opt[aria-current="page"] { background: var(--brand-rest); color: var(--brand-anchor); }
.zc-buy__name { margin-top: 24px; font: 400 56px/1 var(--font-display); letter-spacing: -0.035em; }
.zc-buy__line { margin-top: 12px; font-size: 17px; color: var(--fg-2); max-width: 40ch; text-wrap: pretty; }
.zc-buy__priceRow { margin-top: 20px; display: flex; align-items: center; min-height: 48px; gap: 16px; }
.zc-buy__price { font: 400 32px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zc-qty { display: inline-flex; align-items: center; height: 48px; padding: 0 2px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.zc-qty__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: background-color var(--t-ctrl) var(--ease); }
.zc-qty__btn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.zc-qty__btn:focus-visible { border-radius: 50%; }
.zc-qty__btn[disabled] { opacity: 0.35; cursor: default; background: none; }
.zc-qty__btn .zc-icon { width: 18px; height: 18px; }
.zc-qty__val { min-width: 28px; text-align: center; font-weight: 500; }
.zc-buy__box { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.zc-buy__facts { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; line-height: 1.35; color: var(--fg-2); }
.zc-buy__actions { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.zc-buy__actions .zc-btn { width: 100%; }
.zc-buy__actions .zc-buy-now { grid-column: 1 / -1; }
.zc-buy__actions .zc-qty { height: 56px; padding: 0 6px; }
.zc-buy__perks { margin-top: 20px; display: grid; gap: 2px; font-size: 15px; color: var(--fg-2); }
.zc-buy__perks li { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.zc-buy__perks .zc-icon { color: var(--fg); }
.zc-buy__safety { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.zc-buy__safety a { color: var(--fg); }

/* Sticky purchase bar (desktop) */
.zc-buybar {
  position: fixed; z-index: 45; left: 50%; bottom: 24px; width: min(720px, 100vw - 48px); height: 64px; translate: -50% 0;
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 12px; border-radius: var(--radius-pill); color: var(--brand-anchor);
  opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden;
  transition: opacity 300ms var(--ease), transform 420ms var(--ease), color var(--t-ctrl) var(--ease), visibility 0s 420ms;
}
.zc-buybar.is-shown { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.zc-buybar.zc-glass--dark { color: var(--brand-rest); }
.zc-buybar__thumb { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex: none; overflow: hidden; }
.zc-buybar__thumb img { width: 30px; height: 30px; object-fit: contain; }
.zc-buybar__name { font: 500 16px/1 var(--font-body); white-space: nowrap; }
.zc-buybar__price { margin-left: auto; font: 400 18px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zc-buybar .zc-btn { min-height: 48px; }
.zc-nav.bar-on .zc-nav__buy { opacity: 0; transform: translateX(8px); pointer-events: none; }

/* Specifications */
.zc-specs { margin-top: 88px; display: grid; gap: 24px; }
.zc-specsec .zc-specs { margin-top: 0; }
.zc-programs__more { margin-top: 32px; }
.zc-specs__list { columns: 2; column-gap: 48px; border-top: 1px solid var(--line); }
.zc-specs__row { break-inside: avoid; display: grid; grid-template-columns: minmax(140px, 0.8fr) 1.4fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.zc-specs__row dt { font: 500 14px/1.45 var(--font-body); color: var(--fg-2); }
.zc-specs__row dd { font-size: 15px; line-height: 1.45; color: var(--fg); }

/* What's in the box (iThera) */
.zc-kit__card { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; background: var(--surface); border-radius: var(--radius-xl); padding: 40px; }
.zc-kit__fig { grid-column: 1 / span 7; position: relative; }
.zc-kit__fig img { width: 100%; mix-blend-mode: multiply; filter: brightness(1.04) contrast(1.05); } /* lifts the photo's off-white ground to pure white */
.zc-kit__spot { position: absolute; left: var(--x); top: var(--y); width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--glass-rim), 0 0 0 2px var(--brand-anchor), 0 0 0 4px var(--glass-rim); opacity: 0; transform: scale(0.82); /* white keylines keep the Anchor ring legible on the black kit */ transition: opacity var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease); pointer-events: none; }
.zc-kit__tag { position: absolute; left: var(--x); top: calc(var(--y) + 44px); translate: -50% 0; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--brand-anchor); color: var(--brand-rest); font: 500 13px/1 var(--font-body); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity var(--t-ctrl) var(--ease), transform var(--t-ctrl) var(--ease); pointer-events: none; }
.zc-kit__tag[data-k="remote"] { translate: -78% 0; }
.zc-kit__spot.is-on, .zc-kit__tag.is-on { opacity: 1; transform: none; }
.zc-kit__side { grid-column: 9 / span 4; display: grid; gap: 28px; }
.zc-kit__list { border-top: 1px solid var(--line); }
.zc-kit__list li { border-bottom: 1px solid var(--line); }
.zc-kit__item { width: 100%; min-height: 48px; display: flex; align-items: center; text-align: left; font: 500 16px/1.3 var(--font-body); color: var(--fg-2); transition: color var(--t-ctrl) var(--ease); }
.zc-kit__item:hover, .zc-kit__item:focus-visible, .zc-kit__item[aria-pressed="true"] { color: var(--fg); }
.zc-kit__item::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0; transition: opacity var(--t-ctrl) var(--ease); }
.zc-kit__item:is(:hover, :focus-visible, [aria-pressed="true"])::after { opacity: 1; }
.zc-kit__np { min-height: 48px; display: flex; align-items: center; gap: 6px; font: 500 16px/1.3 var(--font-body); color: var(--fg-2); }
.zc-kit__np span { font-weight: 400; color: var(--muted); }
.zc-kitpro .zc-pro__side { align-self: center; }

/* Compare, reviews, refills */
.zc-cmp__foot { margin-top: 24px; }
.zc-reviews--product .zc-voices { padding-top: 0; }
.zc-refills__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.zc-refill { display: grid; grid-template-rows: auto auto auto auto 1fr; gap: 8px; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); }
.zc-refill__media { position: relative; aspect-ratio: 1 / 1; margin-bottom: 8px; }
.zc-refill__media img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.04) contrast(1.05); }
.zc-refill__name { font: 500 17px/1.3 var(--font-body); }
.zc-refill__fit { margin-top: -4px; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.zc-refill__price { font: 400 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.zc-refill .zc-btn { align-self: end; margin-top: 12px; width: 100%; }

@media (max-width: 1100px) {
  .zc-pg { grid-column: 1 / span 6; }
  .zc-buy { grid-column: 7 / span 6; padding-left: 8px; }
  .zc-buy__name { font-size: 48px; }
  .zc-kit__fig, .zc-kit__side { grid-column: 1 / -1; }
  .zc-kit__side { margin-top: 32px; }
  .zc-refills__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .zc-pp { padding-top: 76px; }
  .zc-buybar { display: none; }
  .zc-specs { margin-top: 64px; }
  .zc-specs__list { columns: 1; }
  .zc-kit__card { padding: 24px; }
}
@media (max-width: 600px) {
  /* one column: switch, gallery, name, line, price, buttons, box, perks, safety */
  .zc-pp__grid { display: flex; flex-direction: column; align-items: stretch; }
  .zc-buy { display: contents; }
  .zc-model { order: 0; align-self: center; margin-bottom: 16px; }
  .zc-pg { order: 1; width: 100%; }
  .zc-buy__name { order: 2; font-size: 44px; margin-top: 20px; }
  .zc-buy__line { order: 3; }
  .zc-buy__priceRow { order: 4; margin-top: 16px; }
  .zc-buy__actions { order: 5; }
  .zc-buy__box { order: 6; margin-top: 28px; }
  .zc-buy__perks { order: 7; }
  .zc-buy__safety { order: 8; }
  .zc-pg__stage { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
  .zc-pg__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .zc-pg__track::-webkit-scrollbar { display: none; }
  .zc-pg__slide, .zc-pg__slide.is-active { position: relative; flex: 0 0 100%; scroll-snap-align: start; opacity: 1; visibility: visible; transition: none; }
  .zc-pg__slide--kit { mix-blend-mode: normal; }
  .zc-pg__slide--kit .zc-pg__obj { mix-blend-mode: multiply; }
  .zc-pg__spin { width: 62%; }
  .zc-pg__thumbs { display: none; }
  .zc-pg__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .zc-pg__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: transform var(--t-ctrl) var(--ease), background-color var(--t-ctrl) var(--ease); }
  .zc-pg__dots span.is-on { background: var(--fg); transform: scale(1.35); }
  .zc-specs__row { grid-template-columns: 1fr 1.3fr; }
  .zc-kit__tag { display: none; }
  .zc-kit__spot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .zc-refills__grid { gap: 12px; }
  .zc-refill { padding: 16px; }
  .zc-refill .zc-btn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .zc-pg__halo { animation: none; }
  .zc-pg__slide, .zc-pg__slide.is-active, .zc-buybar { transition: none; }
}

/* Finish the existing E4 layout without changing its visual language. */
section[id], details[id] { scroll-margin-top: 104px; }
.zc-nav.is-menu-open { z-index: 70; }
.zc-nav.is-menu-open .zc-nav__glass { opacity: 1; transform: none; }
.js .zc-hero__stage, .js .zc-hero__object, .js .zc-hero__name, .js .zc-hero__cta { opacity: 1; transform: none; }
.js .zc-hero__title .zc-line__inner { transform: none; }
.zc-where { padding-block: 48px; }
.zc-where__head { margin-bottom: 20px; }
.zc-where__head .zc-h2 { font-size: clamp(30px, 3vw, 42px); }
.zc-where__head .zc-lead { font-size: 17px; }
.zc-rail { display: block; scroll-snap-type: none; position: relative; }
.zc-rail-motion { display: flex; gap: inherit; width: max-content; will-change: transform; }
.zc-spot-cell { flex-basis: 240px; width: 240px; }
.zc-spot__tile { aspect-ratio: 12 / 13; }
.zc-spot__name { margin-top: 12px; font-size: 22px; }
.zc-spot__progs { gap: 5px; margin-top: 8px; }
.zc-spot__progs .zc-pill { padding: 0 9px; gap: 5px; height: 28px; font-size: 12px; }
.zc-spot__progs .zc-wave { width: 18px; }
.zc-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; margin-bottom: 16px; }
.zc-chip { flex: none; font-size: 14px; padding-inline: 16px; }
.zc-railbar { margin-top: 16px; }
.zc-contact-block { grid-column: 1 / span 5; display: grid; gap: 20px; align-content: start; justify-items: start; }
.zc-contact-email { color: var(--fg); overflow-wrap: anywhere; }
.zc-pads__tiles { flex-wrap: wrap; }
.zc-pads__tile { width: 150px; height: auto; padding: 16px; display: grid; gap: 8px; font-size: 13px; }
.zc-pads__tile img { width: 56px; height: 56px; justify-self: center; }
.zc-pads__tile strong { font-size: 16px; font-weight: 500; }
.zc-footer__cols { grid-template-columns: repeat(3, 1fr); }
.zc-info-page { padding: 150px 0 100px; min-height: 65svh; }
.zc-info-page h1 { font: 400 clamp(40px, 5vw, 72px)/1.05 var(--font-display); letter-spacing: -0.04em; max-width: 18ch; margin: 24px 0; }
.zc-info-page .zc-lead { max-width: 44ch; }
.zc-info-body { max-width: 760px; margin-top: 48px; display: grid; gap: 24px; }
.zc-info-body h2 { font: 400 28px/1.2 var(--font-display); letter-spacing: -0.025em; }
.zc-info-body p { line-height: 1.65; color: var(--fg-2); }
.zc-info-body .zc-btn { justify-self: start; }
.zc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.zc-info-grid article { display: grid; align-content: start; gap: 20px; }
.zc-contact-address { overflow-wrap: anywhere; }
@media (min-width: 861px) and (max-width: 1100px) {
  .zc-nav__link { padding-inline: 10px; font-size: 14px; }
  .zc-nav__buy { padding-inline: 20px; }
  .zc-lockup { gap: 8px; }
}
@media (max-width: 1000px) { .zc-contact-block { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .zc-hero__stage { max-height: none; }
  .zc-where { padding-block: 36px; }
  .zc-spot-cell { flex-basis: 196px; width: 196px; }
  .zc-spot__tile { aspect-ratio: 4 / 5; }
  .zc-spot__name { font-size: 20px; }
  .zc-spot__progs { min-height: 61px; align-content: start; }
  .zc-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zc-info-page { padding: 112px 0 64px; }
  .zc-info-body { margin-top: 32px; }
  .zc-info-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .zc-rail { scroll-behavior: auto; } }