/* ---------- Self-hosted fonts (Newsreader + Nunito Sans, variable; latin + latin-ext) ---------- */
/* Newsreader italic latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader italic latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader normal latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader normal latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito Sans italic latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans italic latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito Sans normal latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans normal latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/nunito-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Pulse Alert — "Golden Hour" design system
   Fresh standalone build · Fable 5 test · 2026-07-13
   ============================================================ */

:root {
  /* brand-derived core (logo crimson #A91E3A · logo azure → ink navy) */
  --ink: #122a40;
  --ink-deep: #0c1e30;
  --ink-soft: #2e4a63;
  --ivory: #faf6ee;
  --cream: #f3ecdd;
  --cream-deep: #ece2cd;
  --amber: #e9ce96;          /* champagne — the one warm accent */
  --amber-soft: #f1dfb8;
  --copper: #a91e3a;         /* crimson — action colour only */
  --copper-deep: #8e1830;
  --sage: #b9ccdc;           /* steel light */
  --sage-deep: #3e6e93;      /* steel — labels, small accents */
  --steel-tint: #dfe9f1;
  --line: #e2d8c3;
  --line-dark: rgba(250, 246, 238, 0.16);
  --text: #2c353d;
  --text-soft: #5c6670;
  --text-on-dark: #f4efe4;
  --text-on-dark-soft: #c6c4b4;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;

  --fs-hero: clamp(2.6rem, 5.5vw, 3.9rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.2rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 1.75rem);
  --fs-body: clamp(1.15rem, 1.35vw, 1.28rem);
  --fs-small: 1rem;
  --sp: 1;      /* section-spacing factor (mobile pass 2026-09-09); 1 = desktop untouched */
  --sp-top: 1;  /* page-top sections (hero/product-hero/page-head): top padding must still clear the fixed nav */

  --radius: 20px;
  --radius-lg: 28px;
  --shadow-soft: 0 24px 60px -30px rgba(18, 42, 64, 0.35);
  --shadow-card: 0 10px 40px -18px rgba(18, 42, 64, 0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
/* WebP delivery (2026-09-12): every photo ships as <picture><source webp><img jpg fallback>.
   `display: contents` keeps the wrapper out of the layout tree so the <img> still lays out as
   a direct child of whatever grid/flex parent it had before wrapping. */
picture { display: contents; }
/* `display: contents` hoists <source> into the parent's flex/grid box, where it counts
   as a zero-height item and steals a `space-between` gap (companion's .wc-moment bubbles
   shifted ~47px). Take it out of layout explicitly. */
picture > source { display: none; }
/* Exception: .img-swap animates its DIRECT CHILDREN (`.img-swap > *` + JS toggling `.on`),
   so there the <picture> must generate a real box and carry the class. */
.img-swap > picture { display: block; }

figure { margin: 0; } /* browser default is 1em 40px — it silently inset every split/hero figure 40px per side (Ty sitewide ruling 2026-08-04); class rules with explicit margins still win */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  text-wrap: balance; /* no orphaned last words in headlines */
}

p { margin: 0 0 1.1em; }

/* orphan control on running text + label/quote set pieces */
p, li, figcaption { text-wrap: pretty; }
.eyebrow, .pullquote, .wc-turn-line, .kick, .tagline, .form-head, .btn { text-wrap: balance; } /* .btn is GLOBAL (mobile pass G1): text-wrap inherits into the label text, so a wrapped CTA breaks into two even lines instead of orphaning its last word */

a { color: var(--copper); }

em.accent {
  font-style: italic;
  color: var(--copper);
  font-variation-settings: "opsz" 40;
}

.on-dark em.accent { color: var(--amber); }

::selection { background: var(--amber-soft); color: var(--ink-deep); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.small { font-size: var(--fs-small); color: var(--text-soft); }

/* ---------- Reveal animations ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}

.reveal.in { opacity: 1; transform: none; }

/* ?static=1 / reduced motion: main.js stamps .no-motion on <html> so reveals snap instantly (deterministic captures) */
.no-motion .reveal { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 18px 34px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.25s;
}

.btn-primary {
  background: var(--copper);
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(169, 30, 58, 0.6);
}

.btn-primary:hover { background: var(--copper-deep); transform: translateY(-2px); }

.btn-primary .arrow { transition: transform 0.35s var(--ease-out); }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 16px 30px;
}

.btn-ghost:hover { background: var(--ink); color: var(--ivory); }

/* solid light button — the high-contrast CTA for dark (navy/wine) sections */
.btn-light {
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 16px 38px -16px rgba(0, 0, 0, 0.55);
}

.btn-light:hover { background: #fff; transform: translateY(-2px); }
.btn-light .arrow { transition: transform 0.35s var(--ease-out); }
.btn-light:hover .arrow { transform: translateX(4px); }

.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 3px;
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
  padding: 22px 0;
}

.nav.scrolled {
  background: rgba(250, 246, 238, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}

.wordmark .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--copper);
  position: relative;
  flex: none;
}

.wordmark .dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--copper);
  opacity: 0;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 0.9; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  list-style: none;
  margin: 0; padding: 0;
}

.nav-links a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s;
  white-space: nowrap;
}

.nav .btn { white-space: nowrap; }

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"] { border-color: var(--amber); }

.nav .btn { padding: 12px 24px; font-size: 1rem; }

@media (max-width: 760px) {
  .nav-links li.hide-mobile { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: calc(clamp(130px, 16vh, 190px) * var(--sp-top)) 0 calc(clamp(60px, 8vh, 110px) * var(--sp));
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -18%;
  width: 68vw; height: 68vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(233, 206, 150, 0.28), rgba(233, 206, 150, 0) 62%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: start; /* image tops anchor to the headline, never float mid-section */
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 26px;
}

.eyebrow::before {
  content: "";
  width: 34px; height: 1.5px;
  background: var(--amber);
}

.hero h1 { font-size: var(--fs-hero); margin-bottom: 26px; }

.hero .lede {
  font-size: clamp(1.22rem, 1.7vw, 1.4rem);
  max-width: 34em;
  color: var(--text);
}

.hero .lede strong { color: var(--ink); }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 34px 0 14px;
}

.cta-note { font-size: 0.98rem; color: var(--text-soft); max-width: 21em; }

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  list-style: none;
  padding-left: 0;
}

.trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-soft);
}

.trust-chips .star { color: #c79a3d; }
.trust-chips .leaf { color: var(--sage-deep); }

.hero-figure { position: relative; margin-top: 10px; /* frame top sits just under the eyebrow top — Ty 2026-07-22: image rides higher, height matches the copy block */ }

.hero-figure .frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transform: rotate(1.2deg);
}

.hero-figure .frame img { width: 100%; height: auto; }

.hero-figure::before {
  content: "";
  position: absolute;
  inset: 22px -18px -18px 22px;
  border: 1.5px solid var(--amber);
  border-radius: var(--radius-lg);
  opacity: 0.55;
  transform: rotate(-1deg);
  pointer-events: none;
}

.hero-badge {
  position: absolute;
  left: -22px;
  bottom: 34px;
  background: rgba(250, 246, 238, 0.94);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 16px 22px 16px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 300px;
}

.hero-badge .ring {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: var(--amber);
}

.hero-badge .ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--copper);
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}

.hero-badge p { margin: 0; font-size: 0.94rem; line-height: 1.45; }
.hero-badge strong { color: var(--ink); display: block; font-size: 1rem; }

:where(.page-head) .hero-grid { grid-template-columns: 1.05fr 0.95fr; } /* was an inline style on about.html that also beat the 900px collapse (mobile pass C, 2026-09-09) */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { max-width: 460px; margin-top: 0; }
  .hero-badge { left: 10px; }
}

/* ---------- Stat band ---------- */

.stat-band {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: calc(clamp(44px, 6vh, 64px) * var(--sp)) 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.stat + .stat { border-left: 1px solid var(--line-dark); padding-left: 28px; }

.stat-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }

.stat-icon {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(233, 206, 150, 0.1);
  border: 1px solid rgba(233, 206, 150, 0.28);
  color: var(--amber);
  display: grid;
  place-items: center;
}

.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.stat .label { font-size: 0.99rem; color: var(--text-on-dark-soft); line-height: 1.45; } /* no nowrap — about's longer labels overflowed the 1fr tracks at 1440 (found 2026-08-04); labels that fit still render one line */

@media (max-width: 820px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; } /* minmax(0) so a 191px icon+number can't blow the tracks out to 425px (found 2026-09-09) */
  .stat + .stat { border-left: none; padding-left: 0; }
}
@media (max-width: 480px) {
  .stat-grid { gap: 30px 16px; }
  .stat-top { display: grid; gap: 10px; } /* icon above the number: the row was 191px, a 360 column is 152 */
  .stat-icon { width: 42px; height: 42px; }
}

/* ---------- Trust band (home; replaced the numeral stat band 2026-09-11 — .stat-band CSS above stays for about.html) ---------- */

.trust-band {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: calc(clamp(40px, 5.5vh, 56px) * var(--sp)) 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.plate {
  background: var(--ivory);
  color: var(--text);
  border-radius: 12px;
  padding: 14px 18px;
  min-height: 84px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}
a.plate:hover { background: #fff; }
a.plate:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.plate-mark { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.plate-mark svg, .plate-mark img { display: block; width: 100%; height: auto; }
.plate-scale .plate-mark { color: var(--copper); width: 40px; height: 40px; }

.plate-text { display: grid; gap: 3px; min-width: 0; }
.plate-title { font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.plate-sub { font-size: 0.82rem; line-height: 1.3; color: var(--text-soft); }

.plate-score { display: flex; align-items: center; gap: 8px; }
.plate-num { font-family: var(--font-body); font-weight: 800; font-size: 1.55rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.plate-stars { display: block; fill: #f6b100; flex: none; }
.plate-stars .star-empty { fill: #e2d8c3; }

.plate-vet { grid-template-columns: 1fr; justify-items: center; padding: 12px 16px; }
.plate-vet img { display: block; width: 100%; max-width: 190px; height: auto; } /* 349px source; keep ≤190 (2026-09-10 ruling) */

@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 480px) {
  .trust-band { padding: calc(32px * var(--sp)) 0; }
  .trust-grid { grid-template-columns: 1fr; gap: 12px; max-width: 340px; margin: 0 auto; }
  .plate { min-height: 72px; padding: 12px 16px; }
  .plate-vet img { max-width: 170px; }
}

/* ---------- Chapters / editorial sections ---------- */

.chapter { padding: calc(clamp(80px, 12vh, 140px) * var(--sp)) 0; position: relative; }

.chapter-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(28px, 4vh, 44px);
}

.chapter-label .no {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--copper);
}

.chapter-label .name {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.chapter-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: translateY(-4px);
}

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start; /* image tops anchor to the headline, never float mid-section */
}

.split h2 { font-size: var(--fs-h2); }

.split .body-max { max-width: 33em; }

.split-figure { position: relative; }

.split-figure img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  width: 100%;
  height: auto;
}

.split-figure .caption {
  position: absolute;
  bottom: -18px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-soft);
  box-shadow: var(--shadow-card);
}

.split-figure .caption.right { right: 26px; }
.split-figure .caption.left { left: 26px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  /* Mobile pass J1 (2026-09-09): headline, then image, then body. Both markup shapes
     (bare figure / figure wrapped in a div) collapse the same way once the wrapper
     divs become display:contents. Wrappers carrying .reveal keep their box so the
     fade still runs on them. */
  .split > div:not(.reveal) { display: contents; }
  .product-hero .split > div:first-child { display: block; } /* hero copy keeps its box in the 761-900 band; group C takes over under 760. first-child only: the mosaic is the second div and must stay display:grid */
  .split > h2, .split > div:not(.reveal) > h2 { order: -2; margin-bottom: 0; } /* the grid gap is the headline > image gap */
  .split-figure { order: -1; max-width: 520px; }
  .split .hero-cta { margin-top: 4px; } /* the grid gap already separates it from the body */
}

.cream-wash { background: var(--cream); }

/* big editorial quote */
.pullquote {
  position: relative;
  max-width: 20em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem); /* middle ground per Ty 2026-07-22 — was 2.4rem max, read far larger than other quotes */
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* Mobile pass D (GLOBAL, 2026-09-09): the mark now sits behind the opening words
   instead of floating up-left of them; the old left:-0.45em bled off the page on
   phones. The blockquote isolates its own stacking context so z-index:-1 stays
   above the section background. */
.pullquote { isolation: isolate; }
.pullquote::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  top: -0.13em; /* curls sit behind the first line, not above it */
  left: -0.1em;
  font-size: 4.6em;
  line-height: 1;
  font-style: normal;
  color: var(--amber);
  opacity: 0.32;
  pointer-events: none;
}

.pullquote-cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-soft);
}

.pullquote-cite::before { content: "— "; color: var(--amber); }

/* on-dark quote variant — the base .pullquote is ink-on-light and washes out on navy/wine */
.pullquote.on-dark { color: var(--text-on-dark); }
.pullquote.on-dark::before { color: var(--amber); opacity: 0.45; }
.pullquote.on-dark .pullquote-cite { color: var(--text-on-dark-soft); }

/* checklist */
.checklist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }

.checklist li { display: flex; gap: 14px; align-items: flex-start; font-weight: 600; color: var(--ink-soft); }

.checklist .tick {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--ink-deep);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 900;
  margin-top: 3px;
}

/* ---------- Protocol (dark centerpiece) ---------- */

.protocol {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--text-on-dark);
  padding: calc(clamp(90px, 13vh, 150px) * var(--sp)) 0;
  position: relative;
  overflow: clip; /* not `hidden` — a hidden-overflow ancestor disables position:sticky on .wp-stage */
}

.protocol::before {
  content: "";
  position: absolute;
  top: 12%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(233, 206, 150, 0.08), transparent 60%);
  pointer-events: none;
}

.protocol .chapter-label .name { color: var(--sage); }
.protocol .chapter-label .no { color: var(--amber); }
.protocol .chapter-label::after { background: var(--line-dark); }

.protocol h2 { color: var(--text-on-dark); font-size: var(--fs-h2); max-width: 17em; }

.protocol .intro { max-width: 36em; color: var(--text-on-dark-soft); font-size: 1.18rem; }


.protocol .closer {
  margin-top: clamp(30px, 6vh, 50px);
  padding-top: 40px;
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}

.protocol .closer .pullquote { color: var(--text-on-dark); }
.protocol .closer .pullquote::before { color: var(--amber); }

@media (max-width: 900px) {
  .protocol .closer { grid-template-columns: 1fr; }
}

/* ---------- Wellness Companion reveal (WC = navy) ---------- */

.wc-reveal {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--text-on-dark);
  padding: calc(clamp(90px, 13vh, 150px) * var(--sp)) 0;
  position: relative;
  overflow: clip;
}

.wc-reveal::before {
  content: "";
  position: absolute;
  top: 8%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(233, 206, 150, 0.09), transparent 60%);
  pointer-events: none;
}

/* the turn — centered set piece closing the watch section (light ground; leads into the navy WC reveal) */
.wc-turn {
  display: grid;
  justify-items: center;
  gap: 26px;
  text-align: center;
  padding: calc(clamp(64px, 9vh, 104px) * var(--sp)) 0 0;
}

.wc-turn .drop {
  width: 1.5px;
  height: clamp(44px, 7vh, 76px);
  background: linear-gradient(180deg, transparent, var(--amber));
}

.wc-turn-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.16;
  color: var(--ink);
  max-width: 17em;
}

.wc-turn-line em.accent { display: block; font-size: 1.1em; }

.wc-turn .dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

.wc-turn .dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
  opacity: 0;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}

.wc-reveal h2 em.accent { color: var(--amber); }

/* watch-section tile cards (image placeholder up top, headline + line below) */
.watch-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: clamp(44px, 6vh, 64px);
}

.watch-tile {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.watch-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.watch-tile .tile-img {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(62, 110, 147, 0.06) 0 12px, transparent 12px 24px),
    var(--cream);
  border-bottom: 1px solid var(--line);
  color: var(--sage-deep);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.watch-tile .txt { padding: 20px 22px 24px; }
.watch-tile h3 { font-size: 1.16rem; margin-bottom: 6px; }
.watch-tile p { font-size: 0.97rem; color: var(--text-soft); margin: 0; }

@media (max-width: 1020px) { .watch-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .watch-tiles { grid-template-columns: 1fr; } }

/* centered reveal head */
.wc-head { text-align: center; max-width: 50em; margin: 0 auto clamp(40px, 6vh, 64px); }
.wc-head h2 { font-size: var(--fs-h2); }
.wc-lede { color: var(--text-on-dark-soft); font-size: 1.18rem; max-width: 37em; margin: 0 auto; }

/* photo + spoken check-in, side by side */
.wc-stage {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.wc-photo img { aspect-ratio: 4 / 5; object-fit: cover; } /* portrait crop so the photo fills its column beside the conversation */

.wc-convo { display: flex; flex-direction: column; gap: 14px; }

.wc-convo-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}

.wc-convo-tag::before { content: ""; width: 30px; height: 1.5px; background: var(--amber); flex: none; }

.wc-bubble {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 88%;
  border-radius: 20px;
  padding: 18px 24px;
}

.wc-bubble.from-wc {
  align-self: flex-start;
  background: rgba(250, 246, 238, 0.08);
  border: 1px solid rgba(250, 246, 238, 0.16);
  border-top-left-radius: 6px;
}

.wc-bubble.from-senior {
  align-self: flex-end;
  background: rgba(233, 206, 150, 0.13);
  border: 1px solid rgba(233, 206, 150, 0.3);
  border-top-right-radius: 6px;
}

.wc-bubble p { margin: 0; color: var(--text-on-dark); font-size: 1.08rem; line-height: 1.5; }

.wc-speaker {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.from-wc .wc-speaker { color: var(--sage); }
.from-senior .wc-speaker { color: var(--amber); }

/* little sound-wave marker: these check-ins are audible, not texts */
.wc-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 15px; margin-top: 8px; flex: none; }
.wc-eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--amber);
  transform-origin: bottom;
  animation: eq-bounce 1.5s ease-in-out infinite;
}
.wc-eq i:nth-child(2) { animation-delay: 0.2s; }
.wc-eq i:nth-child(3) { animation-delay: 0.4s; }
.wc-eq i:nth-child(4) { animation-delay: 0.6s; }

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

.wc-convo-note { margin: 12px 0 0; color: var(--text-on-dark-soft); font-size: 1.02rem; max-width: 34em; }

/* what it watches — four quiet domains */
.wc-domains-label {
  margin: clamp(44px, 7vh, 64px) 0 16px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}

.wc-domains {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Redesigned 2026-09-10 (Ty: boxed icon-above-label cards read as AI slop, icons too small).
   Now: rule-topped columns, a 64px amber roundel on the left with a 32px Lucide icon,
   serif label + one-line note beside it. Same markup (icon / strong / small). */
.wc-domains li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto 1fr; /* 1fr: the 64px icon spans both rows, and any slack it forces goes under the note, not between label and note */
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
  padding: 24px 0 4px;
  border-top: 1px solid rgba(233, 206, 150, 0.35);
}

.wc-domains .icon {
  grid-row: 1 / span 2;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(233, 206, 150, 0.12);
  color: var(--amber);
  display: grid;
  place-items: center;
  margin: 0;
}
.wc-domains .icon svg { width: 32px; height: 32px; }

.wc-domains strong { display: block; color: var(--text-on-dark); font-family: var(--font-display); font-weight: 600; font-size: 1.42rem; line-height: 1.15; margin: 4px 0 0; }
.wc-domains small { color: var(--text-on-dark-soft); font-size: 0.98rem; line-height: 1.45; display: block; }

/* closing row: family quote + plan badge + CTA */
.wc-close {
  margin-top: clamp(44px, 7vh, 64px);
  padding-top: clamp(30px, 5vh, 44px);
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: 1.1fr auto;
  gap: 30px 40px;
  align-items: center;
}

.wc-close .pullquote { font-size: clamp(1.3rem, 2vw, 1.6rem); }

.wc-plan { display: grid; justify-items: start; }

.wc-badge {
  display: inline-flex;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(233, 206, 150, 0.14);
  border: 1px solid rgba(233, 206, 150, 0.4);
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.wc-badge-line { color: var(--text-on-dark); font-weight: 700; font-size: 1.06rem; margin: 0 0 20px; max-width: 20em; }

@media (max-width: 900px) {
  .wc-stage { grid-template-columns: 1fr; }
  .wc-photo { max-width: 520px; }
  .wc-bubble { max-width: 100%; }
  .wc-domains { grid-template-columns: repeat(2, 1fr); }
  .wc-close { grid-template-columns: 1fr; }
}

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

.wc-reveal .chapter-label .name { color: var(--sage); }
.wc-reveal .chapter-label .no { color: var(--amber); }
.wc-reveal .chapter-label::after { background: var(--line-dark); }

.wc-reveal h2 { color: var(--text-on-dark); }
.wc-reveal .body-max p { color: var(--text-on-dark-soft); }

.wc-reveal .checklist li { color: var(--text-on-dark-soft); }
.wc-reveal .checklist .tick { color: var(--amber); background: rgba(233, 206, 150, 0.12); }

.wc-reveal .btn-ghost {
  border-color: var(--text-on-dark);
  color: var(--text-on-dark);
}

.wc-reveal .btn-ghost:hover { background: rgba(250, 246, 238, 0.1); }

.wc-reveal .split-figure .caption { color: var(--ink-soft); }

/* ---------- Founder (deep wine — its own emotional register, distinct from navy) ---------- */

.founder {
  position: relative;
  color: var(--text-on-dark);
  padding: calc(clamp(110px, 16vh, 180px) * var(--sp)) 0;
  background: #2b0a13;
  overflow: clip;
}

.founder .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0.5;
}

.founder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(43, 9, 18, 0.96) 30%, rgba(62, 14, 26, 0.62) 70%, rgba(76, 21, 34, 0.42));
}

.founder .container { position: relative; z-index: 2; }

.founder .chapter-label .no { color: var(--amber); }
.founder .chapter-label .name { color: #d9a9b4; } /* dusty rose — steel blue goes muddy on wine */
.founder .chapter-label::after { background: rgba(250, 246, 238, 0.16); }

.founder h2 { color: var(--text-on-dark); font-size: var(--fs-h2); max-width: 15em; }
.founder h2 em.accent { display: block; } /* "Two days on the floor." / "Never again." — one sentence per line */
.founder em.accent { color: var(--amber); } /* crimson is invisible on wine */

.founder-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr; /* wide story column; compact photo */
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}

.founder-figure { margin: 0; }

.founder .placeholder-media {
  aspect-ratio: 1 / 1;
  border-color: rgba(233, 206, 150, 0.45);
  background:
    repeating-linear-gradient(45deg, rgba(250, 246, 238, 0.045) 0 12px, transparent 12px 24px),
    rgba(250, 246, 238, 0.04);
  color: var(--amber);
}

.founder .placeholder-media small { color: var(--text-on-dark-soft); }

/* Founder figure (2026-09-10, Ty): two real photographs, laid one on the other like prints
   on a table — the grandfather as the main image, Todd in uniform as an inset. */
.founder-stack .fs-wrap { position: relative; padding: 0 0 14% 0; }
.founder-stack .fs-main { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.founder-stack .fs-inset {
  position: absolute; right: -4%; bottom: 0; width: 40%; height: auto;
  border-radius: 12px; border: 4px solid var(--ivory);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.7);
  transform: rotate(2.5deg);
}
.founder-stack figcaption { margin-top: 14px; font-size: 0.9rem; color: var(--text-on-dark-soft); }

.founder .story {
  max-width: 36em;
  color: var(--text-on-dark-soft);
  font-size: 1.16rem;
}

.founder .story strong { color: var(--text-on-dark); }

.commitments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 20px;
  margin-top: 44px;
}

.commitment {
  border: 1px solid rgba(250, 246, 238, 0.14);
  border-left: 3px solid var(--amber);
  border-radius: 14px;
  padding: 22px 26px;
  background: rgba(250, 246, 238, 0.05);
  backdrop-filter: blur(4px);
}

.commitment strong { color: var(--text-on-dark); display: block; margin-bottom: 6px; font-size: 1.08rem; }
.commitment span { color: var(--text-on-dark-soft); font-size: 1rem; }

@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-figure { max-width: 440px; }
}

@media (max-width: 720px) { .commitments { grid-template-columns: 1fr; } }

/* ---------- Straight answers ---------- */

.answers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 14px;
}

.answer-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.answer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.answer-card .icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--steel-tint);
  color: var(--sage-deep);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.answer-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.answer-card p { font-size: 1.02rem; color: var(--text-soft); margin: 0; }
.answer-card p strong { color: var(--ink); }

.answers-grid.two { margin-top: 56px; grid-template-columns: repeat(2, 1fr); max-width: 900px; } /* was an inline style on about.html that beat the collapse below */
@media (max-width: 900px) { .answers-grid, .answers-grid.two { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- Features grid (watch page) ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s;
}

.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--amber-soft); }

.feature .icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--steel-tint);
  color: var(--sage-deep);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.feature h3 { font-size: 1.14rem; margin-bottom: 6px; }
.feature p { font-size: 0.97rem; color: var(--text-soft); margin: 0; }

@media (max-width: 1020px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* ---------- Day timeline (watch page) ---------- */

.day-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.day-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.day-card img { height: 190px; width: 100%; object-fit: cover; }

.day-card .txt { padding: 20px 22px 24px; }

.day-card .time {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sage-deep);
  font-size: 1.02rem;
  display: block;
  margin-bottom: 6px;
}

.day-card h3 { font-size: 1.16rem; margin-bottom: 6px; }
.day-card p { font-size: 0.96rem; color: var(--text-soft); margin: 0; }

@media (max-width: 1020px) { .day-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .day-strip { grid-template-columns: 1fr; } }

/* ---------- Comparison (watch page) ---------- */

.compare-wrap { overflow-x: auto; margin-top: 10px; }

.compare-hint {
  display: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--copper);
  margin: 6px 0 10px;
}

@media (max-width: 900px) {
  .compare-hint { display: block; }
}

.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
}

.compare th, .compare td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare thead th {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}

.compare .you { background: rgba(62, 110, 147, 0.09); }

.compare thead th.you {
  background: var(--ink);
  color: var(--ivory);
  border-radius: 14px 14px 0 0;
}

.compare td { color: var(--text-soft); }
.compare td.you { color: var(--ink); font-weight: 700; }

/* ---------- Offer stack ---------- */

.offer {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start; /* price column tops align with the headline, per the image-tops-anchor ruling */
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.offer .center { margin-top: 40px; } /* offsets the eyebrow so the product shot sits on the h2 cap line */

.offer-shot { width: 100%; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }

.offer h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

.offer-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }

.offer-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}

.offer-list .what { font-weight: 700; color: var(--ink); }
.offer-list .what small { display: block; font-weight: 600; color: var(--text-soft); font-size: 0.92rem; }
.offer-list .worth { font-family: var(--font-display); font-style: italic; color: var(--copper); white-space: nowrap; }

.price-line {
  margin-top: 26px;
  font-size: 1.15rem;
}

.price-line .big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 900px) { .offer { grid-template-columns: 1fr; } .offer .center { margin-top: 0; } }

/* ---------- FAQ ---------- */

.faq { max-width: 780px; }

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .plus {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s;
}

.faq details[open] summary .plus {
  transform: rotate(45deg);
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}

.faq .a { padding: 0 4px 24px; color: var(--text-soft); max-width: 60ch; }
.faq .a p { margin-bottom: 0.8em; }

/* ---------- Lead form ---------- */

.qualify {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
  padding: calc(clamp(90px, 12vh, 150px) * var(--sp)) 0;
}

.form-shell {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}

.form-side h2 { font-size: var(--fs-h2); }

/* qualify headline: one sentence per line, sized so neither wraps */
.form-side h2.h2-stack { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.h2-stack em.accent { display: block; }

.form-side .reassure { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }

.form-side .reassure li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-soft); font-size: 1.05rem; }

.form-side .reassure .tick {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--ink-deep);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 900;
  margin-top: 3px;
}

.lead-form {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-soft);
}

.lead-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.lead-form label {
  display: block;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.lead-form .field { margin-bottom: 18px; }

.lead-form input, .lead-form select {
  width: 100%;
  height: 58px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.lead-form input:focus, .lead-form select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(232, 163, 61, 0.18);
  outline: none;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.segmented input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } /* un-sized absolute inputs were widening the document past the viewport */

.segmented label {
  margin: 0;
  min-height: 54px; /* was a fixed height: a wrapped label overflowed the pill (mobile pass E1) */
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-size: 0.98rem;
  transition: all 0.25s;
  background: #fff;
}

.segmented input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.segmented input:focus-visible + label { outline: 3px solid var(--amber); outline-offset: 2px; }

.lead-form .btn { width: 100%; justify-content: center; margin-top: 8px; font-size: 1.15rem; padding: 20px; }

.lead-form .form-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  margin-bottom: 4px;
}
.lead-form .form-sub {
  color: var(--text-soft);
  font-size: 0.98rem;
  margin-bottom: 22px;
}

.form-fine {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--text-soft);
  text-align: center;
}

.form-success {
  display: none;
  text-align: center;
  padding: 40px 10px;
}

.form-success .ring {
  width: 74px; height: 74px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--amber);
  display: grid;
  place-items: center;
  position: relative;
}

.form-success .ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--copper);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}

.form-success h3 { font-size: 1.7rem; }

/* launch 2026-09-14: real submit — validation + error states */
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form input.invalid { border-color: #A91E3A; box-shadow: 0 0 0 3px rgba(169, 30, 58, 0.12); }
.form-error { display: none; margin: 0 0 14px; font-size: 0.95rem; color: #A91E3A; text-align: center; }
.lead-form form.has-error .form-error { display: block; }
.lead-form .btn[disabled] { opacity: 0.7; cursor: wait; }
.lead-form.submitted form { display: none; }
.lead-form.submitted .form-success { display: block; }

@media (max-width: 900px) {
  .form-shell { grid-template-columns: 1fr; }
  .lead-form .row { grid-template-columns: 1fr; gap: 0; } /* gap 0: the row gap stacked on top of each field's 18px margin made row fields sit 34px apart vs 18px elsewhere (mobile pass E2) */
}

/* ---------- Footer ---------- */

.footer {
  background: var(--ink-deep);
  color: var(--text-on-dark-soft);
  padding: 70px 0 40px;
  font-size: 0.98rem;
}

.footer .wordmark { color: var(--ivory); }

.footer a { color: var(--text-on-dark-soft); text-decoration: none; }
.footer a:hover { color: var(--amber); }

/* ---------- Footer — horizontal-bar layout (Ty ref, 2026-07-20) ----------
   Global footer on all pages (rolled out 2026-07-20; the old .footer-grid
   three-column footer is retired). Live-site content; colors stay in our
   dark palette — only the arrangement follows the reference. */
.footer--bar { padding-bottom: 44px; }

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 30px;
  padding-bottom: 30px;
}
.footer-logo { flex: 0 0 auto; }
.footer-logo .logo-img { height: 44px; width: auto; }

.footer-addr {
  font-style: normal;
  line-height: 1.5;
  color: var(--text-on-dark-soft);
}

.footer-contact { display: flex; align-items: center; gap: 13px; }
.footer-contact .fc-icon {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line-dark);
  display: grid; place-items: center;
  color: var(--text-on-dark-soft);
}
.footer-contact .fc-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
.footer-contact .fc-label {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  opacity: 0.72;
}
.footer .fc-value {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--ivory);
}
.footer .fc-value:hover { color: var(--amber); }

.footer-social { display: flex; gap: 14px; margin-left: auto; } /* far right, like the reference */
.footer-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--text-on-dark-soft);
}
.footer-social a:hover { color: var(--amber); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding: 4px 0 2px;   /* sits under the contact band on whitespace alone — no divider */
  font-size: 0.94rem;
}
.footer-nav a { color: var(--text-on-dark-soft); }
.footer-nav a:hover { color: var(--amber); }

/* the single hairline — separates the contact + nav zone from all legal copy */
.footer-lower {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}
.footer-fine p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-on-dark-soft);
  opacity: 0.66;
}
.footer-fine p + p { margin-top: 7px; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 30px;
  margin-top: 24px;
  font-size: 0.82rem; /* match the fine-print notes above */
  color: var(--text-on-dark-soft);
}
.footer-meta .legal-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.footer-meta a { color: var(--text-on-dark-soft); }
.footer-meta a:hover { color: var(--amber); }

@media (max-width: 900px) {
  .footer-bar { gap: 22px 34px; }
}
@media (max-width: 640px) {
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .footer-social { margin-left: 0; }
}

/* ---------- Watch page hero ---------- */

.product-hero {
  padding: calc(clamp(130px, 16vh, 190px) * var(--sp-top)) 0 calc(clamp(60px, 9vh, 110px) * var(--sp));
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
}

.product-hero .free-tag {
  position: absolute;
  top: 26px; right: 26px;
  background: var(--copper);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 1rem;
  box-shadow: 0 14px 30px -12px rgba(192, 91, 43, 0.6);
  transform: rotate(3deg);
}

.spec-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; list-style: none; padding: 0; }

.spec-chips li {
  border: 1.5px solid var(--line);
  background: var(--ivory);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* protocol mini (horizontal, watch page) */
.mini-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: step;
}

.mini-step {
  position: relative;
  background: rgba(250, 246, 238, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 26px 22px;
}

.mini-step .idx {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--copper);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 16px;
}

.mini-step h3 { color: var(--text-on-dark); font-size: 1.12rem; margin-bottom: 6px; }
.mini-step p { color: var(--text-on-dark-soft); font-size: 0.95rem; margin: 0; }

@media (max-width: 900px) { .mini-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mini-steps { grid-template-columns: 1fr; } }

/* ---------- Logo ---------- */

.logo-img { height: 44px; width: auto; display: block; transition: height 0.4s var(--ease-out); }
.nav.scrolled .logo-img { height: 36px; }
.footer .logo-img { height: 36px; }

/* ---------- Page head (blog / about) ---------- */

.page-head { padding: calc(clamp(130px, 15vh, 175px) * var(--sp-top)) 0 calc(clamp(26px, 4vh, 46px) * var(--sp)); }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 15em; }
.page-head .lede { font-size: clamp(1.18rem, 1.6vw, 1.35rem); max-width: 36em; color: var(--text-soft); }

/* ---------- Blog index ---------- */

.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 6px; }

.pill {
  border: 1.5px solid var(--line);
  background: var(--ivory);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-soft);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.pill.on, .pill:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

.featured-post {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  margin-top: 30px;
}

.featured-post img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }

.featured-post .fp-body { padding: clamp(28px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

.featured-post h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.featured-post h2 a { color: var(--ink); text-decoration: none; }
.featured-post h2 a:hover { color: var(--copper); }

.post-tag {
  display: inline-flex;
  background: var(--steel-tint);
  color: var(--sage-deep);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.post-meta { font-size: 0.9rem; color: var(--text-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }

.post-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.post-card img { height: 200px; object-fit: cover; width: 100%; }
.post-card .pc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: flex-start; }
.post-card .post-tag { margin-bottom: 0; }
.post-card h3 { font-size: 1.26rem; margin: 0; line-height: 1.25; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--copper); }
.post-card .pc-body p { font-size: 0.97rem; color: var(--text-soft); margin: 0; flex: 1; }

@media (max-width: 1020px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .featured-post { grid-template-columns: 1fr; } }

.newsletter {
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  padding: clamp(30px, 5vw, 54px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  align-items: center;
}

.newsletter h3 { color: var(--text-on-dark); font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 6px; }
.newsletter p { color: var(--text-on-dark-soft); margin: 0; }

.newsletter form { display: flex; gap: 10px; }
.newsletter input {
  flex: 1;
  height: 56px;
  border-radius: 999px;
  border: 1.5px solid var(--line-dark);
  background: rgba(250, 246, 238, 0.08);
  color: var(--text-on-dark);
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 1.02rem;
}
.newsletter input::placeholder { color: var(--text-on-dark-soft); }
.newsletter .btn { padding: 15px 26px; }

@media (max-width: 820px) { .newsletter { grid-template-columns: 1fr; } .newsletter form { flex-direction: column; } .newsletter input { flex: none; width: 100%; box-sizing: border-box; } } /* flex:1 in the column gave the input a zero basis and it collapsed to ~38px (Ty, 2026-09-10) */

/* ---------- Blog article ---------- */

.article-head { max-width: 780px; }
.article-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.article-head .dek { font-size: 1.3rem; color: var(--text-soft); max-width: 32em; }

.article-hero-img { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); width: 100%; margin: 38px 0 0; }
.article-hero-cap { font-size: 0.9rem; color: var(--text-soft); margin-top: 12px; }

.article-body { max-width: 700px; font-size: 1.19rem; line-height: 1.75; }
.article-body h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-top: 1.9em; }
.article-body .drop-cap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.3em;
  float: left;
  line-height: 0.85;
  padding: 4px 12px 0 0;
  color: var(--copper);
}

.article-body figure { margin: 2.2em 0; }
.article-body figure img { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.article-body figcaption { font-size: 0.9rem; color: var(--text-soft); margin-top: 10px; }

.article-body .callout {
  background: var(--cream);
  border-left: 3px solid var(--sage-deep);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 2em 0;
  font-size: 1.05rem;
}
.article-body .callout strong { color: var(--ink); }

.author-box {
  display: flex;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  margin: 50px 0 0;
  max-width: 700px;
}

.avatar {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.author-box p { margin: 0; font-size: 0.98rem; color: var(--text-soft); }
.author-box strong { display: block; color: var(--ink); font-size: 1.05rem; }

/* ---------- About ---------- */

.placeholder-media {
  border-radius: var(--radius-lg);
  border: 2px dashed var(--sage);
  background:
    repeating-linear-gradient(45deg, rgba(62, 110, 147, 0.05) 0 12px, transparent 12px 24px),
    var(--cream);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--sage-deep);
  font-weight: 800;
  padding: 24px;
  aspect-ratio: 4 / 3;
}

.placeholder-media.portrait { aspect-ratio: 3 / 4; }
.placeholder-media small { display: block; font-weight: 600; color: var(--text-soft); margin-top: 6px; font-size: 0.9rem; }

.press-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.press-strip.two { grid-template-columns: 1fr 1fr; } /* was an inline style on about.html that beat the collapse below, forcing an 822px layout on phones */
@media (max-width: 900px) { .press-strip, .press-strip.two { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .placeholder-media { min-width: 0; } } /* aspect-ratio transferred a min-width from the text height and forced about.html to 411px on phones; scoped so desktop tiles keep their current size (2026-09-09). Widened 900→1200 on 2026-09-20: the two-up press strip overflowed 119px at 1024 (901–1200 band); 1280+ pixel-identical. */

.review-hero {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  color: var(--ink);
}
.review-hero .score { font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 700; line-height: 1; }
.review-hero .stars { color: #c79a3d; font-size: 1.6rem; letter-spacing: 3px; }
/* the count line sat hard against the lede below it (2026-09-12) */
.review-hero + .lede { margin-top: clamp(18px, 2.4vh, 28px); }
.review-hero .small a { color: var(--ink); text-decoration-color: var(--amber); text-underline-offset: 3px; }
.review-hero .small a:hover { color: var(--copper); text-decoration-color: var(--copper); }

/* ---------- Reviews ---------- */

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 1020px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .review-grid { grid-template-columns: 1fr; } }

.review-card {
  background: #fff;                       /* was --ivory: identical to the page ground, so cards read as background (Ty, 2026-09-12) */
  border: 1px solid rgba(226, 216, 195, 0.9);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: 0 2px 3px rgba(18, 42, 64, 0.05), 0 14px 34px -20px rgba(18, 42, 64, 0.30);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-stars { color: #c79a3d; letter-spacing: 2px; font-size: 1.05rem; }
.review-card p { margin: 0; flex: 1; font-size: 1.02rem; color: var(--ink-soft); }
.review-card .who { font-size: 0.92rem; font-weight: 800; color: var(--text-soft); }

/* ---------- Contact ---------- */

.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 900px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-cards .big-line { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); font-weight: 700; }

/* ---------- Legal pages ---------- */

.legal-body { max-width: 760px; font-size: 1.08rem; }
.legal-body h2 { font-size: 1.45rem; margin-top: 2em; }
.legal-body h3 { font-size: 1.15rem; margin-top: 1.6em; }
.legal-body ul { padding-left: 22px; }
.legal-note {
  background: var(--steel-tint);
  border-left: 3px solid var(--sage-deep);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.95rem;
  margin: 26px 0;
  color: var(--text-soft);
}

/* ---------- 404 ---------- */

.err-wrap { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 140px 20px 80px; }
.err-ring {
  width: 96px; height: 96px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--amber);
  display: grid;
  place-items: center;
  position: relative;
}
.err-ring::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--copper);
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}
.err-code { font-family: var(--font-display); font-style: italic; color: var(--copper); font-size: 1.2rem; letter-spacing: .08em; }

/* utility */
.nowrap { white-space: nowrap; }
@media (max-width: 560px) {
  .offer-list li { flex-direction: column; gap: 4px; }
  .offer-list .worth { white-space: normal; }
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.block { display: block; }
.section-intro { max-width: 38em; }
.section-intro.center { margin-inline: auto; }
h2.section-intro { font-size: var(--fs-h2); } /* standalone section headlines match the split/wc-head/q-head scale */

/* ==================================================
   Watch page v2 (2026-07-16) — v8 copy spine
   ================================================== */

/* --- hero slider (manual, no autoplay) --- */
.hero-slider .frame.slides { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.hero-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.hero-slider .slide.on { opacity: 1; }
.hero-slider .slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slider .slide .placeholder-media { height: 100%; aspect-ratio: auto; border-radius: 0; border: 0; }
.no-motion .hero-slider .slide { transition: none; }

.slider-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
  z-index: 2;
}

.slider-btn {
  pointer-events: auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(250, 246, 238, 0.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-out), background 0.3s;
}

.slider-btn:hover { background: #fff; transform: scale(1.08); }

.hero-slider .hero-badge { bottom: 64px; } /* clears the dots row below the frame */

.slider-dots { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.slider-dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.slider-dots button.on { background: var(--copper); transform: scale(1.2); }
/* invisible hit area so the 11px dots meet a usable tap size (2026-09-20 cutover sweep); no pixel change */
.slider-dots button { position: relative; }
.slider-dots button::before { content: ""; position: absolute; inset: -14px -6px; }
@media (max-width: 760px) {
  .slider-dots { gap: 22px; }
  .slider-dots button::before { inset: -16px -11px; }
}

/* --- shared crossfading image stage --- */
.img-swap {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.img-swap > * { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s var(--ease-out); }
.img-swap > .on { opacity: 1; }
.img-swap img { width: 100%; height: 100%; object-fit: cover; }
.img-swap .placeholder-media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.img-swap.tall { aspect-ratio: 3 / 4; } /* taller stage so the image column tracks the step column height */
.no-motion .img-swap > * { transition: none; }

/* --- the watch: one-open feature accordion --- */
.acc-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
  margin-top: clamp(40px, 6vh, 60px);
}

.acc-stage { position: sticky; top: 110px; }

.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }

.acc-btn {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
}

.acc-btn .plus {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  font-family: var(--font-body);
  transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s;
}

.acc-item.open .acc-btn .plus {
  transform: rotate(45deg);
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { margin: 0; padding: 0 4px 24px; color: var(--text-soft); max-width: 34em; }
.no-motion .acc-panel { transition: none; }

.acc-mimg { display: none; }

/* --- WC summary tiles (3-up variant of the home domain cards) --- */
.wc-domains.three { grid-template-columns: repeat(3, 1fr); }
.wc-domains.three li { padding: 26px 0 6px; }
.wc-cta { text-align: center; margin-top: clamp(36px, 5vh, 52px); }

/* --- icon + headline on one row (opt-in; watch page cards/tiles) --- */
.head-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.head-row .icon { margin: 0; flex: none; }
.head-row h3, .head-row strong { margin: 0; }

/* --- everything-else cards: italic kicker line --- */
.answer-card .kicker {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--copper);
  text-wrap: pretty;
}

/* --- everyday wear protocol: sticky image sequence --- */
.wp-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(44px, 6vh, 68px);
}

.wp-stage { position: sticky; top: 22vh; } /* smaller stage rides nearer the viewport centre, level with the active bullet */
.wp-stage .img-swap.tall {
  aspect-ratio: 1 / 1;
  max-width: 440px;
  margin-inline: auto;
}

.wp-steps { display: grid; gap: calc(clamp(48px, 9vh, 90px) * var(--sp)); padding: 8px 0; }
#protocol .wp-steps { padding-bottom: calc(clamp(130px, 24vh, 260px) * var(--sp)); } /* run-out room: keeps the stage pinned until step 3 reaches the centre band (companion's .wc-day carries the same run-out in its own block) */

.wp-step {
  position: relative;
  padding-left: 74px;
  opacity: 0.4;
  transition: opacity 0.5s var(--ease-out);
}
.wp-step.active, .no-motion .wp-step { opacity: 1; }

.wp-step .idx {
  position: absolute;
  left: 0; top: 2px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sage-deep);
  background: rgba(250, 246, 238, 0.6);
  transition: background 0.5s, border-color 0.5s, color 0.5s;
}
.wp-step.active .idx { background: var(--copper); border-color: var(--copper); color: #fff; }

.wp-step h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.wp-step p { color: var(--text-soft); max-width: 32em; margin: 0; }
.wp-step .tagline {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--copper);
  text-wrap: pretty;
}

.wp-mimg { display: none; }

/* --- monitoring vs 911 (champagne = the safety color) --- */
.champagne { background: linear-gradient(180deg, #F6EEDA 0%, #EFE2C2 100%); }

.q-head { max-width: 54em; } /* left-aligned per Ty ruling 2026-07-17: centering is reserved for centerpiece sections */
.q-head h2 { font-size: var(--fs-h2); }
.q-head .intro { margin: 18px 0 0; max-width: 41em; color: var(--text-soft); font-size: 1.15rem; }

.body-911 { font-size: 1.14rem; color: var(--ink-soft); max-width: 34em; }
.body-911 em.accent { font-family: var(--font-display); font-size: 1.06em; }

.close-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 26em;
  margin: clamp(44px, 7vh, 70px) 0 0;
}

/* --- social proof quote cards --- */
.quote-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(36px, 5vh, 52px);
}

.quote-card {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  isolation: isolate;
}

.quote-card .mark { /* mobile pass D2 (GLOBAL): stays in flow (the vignette photo above it has no fixed height) but the negative bottom margin pulls the quote up so its first line runs over the curls */
  position: relative;
  z-index: -1;
  margin: 13px 0 -68px;
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--copper);
  opacity: 0.3;
  pointer-events: none;
}
.quote-card .q {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
}
.quote-card .who { font-size: 0.9rem; font-weight: 800; color: var(--text-soft); letter-spacing: 0.04em; text-transform: uppercase; }

/* photo vignette bleeding to the card's top edge — the quote's proof shot */
.quote-card .vignette {
  margin: -28px -28px 4px;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  overflow: hidden;
}
.quote-card .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- trust rows --- */
.trust-rows { display: grid; gap: clamp(56px, 8vh, 92px); margin-top: clamp(40px, 6vh, 60px); }

.trust-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* uniform 50/50 — all three media blocks read the same size */
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.trust-row.rev { grid-template-columns: 1fr 1fr; }

.trust-row h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.trust-row h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 12px; }
.trust-row p { color: var(--text-soft); max-width: 34em; margin: 0; }
.trust-row p + p { margin-top: 1em; }
.trust-media { margin: 0; position: relative; }
.trust-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } /* uniform media footprint — square sources center-crop; height:auto beats the width/height attrs so the ratio applies */
.trust-media .placeholder-media { aspect-ratio: 4 / 3; } /* uniform media footprint across all trust rows */
.trust-row .google-badge { aspect-ratio: 4 / 3; align-content: center; }

.google-badge {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  justify-items: center;
  gap: 8px;
}

/* CHCH row: hero still + tilted inset (Ty picked concept A, 2026-09-11; replaces the square collage) */
.chch-stack { padding-bottom: 60px; }
.chch-stack .chch-main { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.chch-stack .chch-inset {
  position: absolute; right: -8px; bottom: 0;
  width: 43%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; border: 6px solid var(--ivory);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
  transform: rotate(-2.5deg);
}
.chch-pill {
  position: absolute; left: 14px; bottom: 74px;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ivory); color: var(--ink);
  font-weight: 800; font-size: 0.86rem; letter-spacing: 0.02em;
  padding: 7px 14px 7px 9px; border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.chch-pill img { width: 34px; height: auto; display: block; box-shadow: none; border-radius: 0; }

/* --- watch page v2 mobile --- */
@media (max-width: 480px) {
  .chch-stack { padding-bottom: 52px; }
  .chch-stack .chch-inset { right: 0; width: 42%; }
  .chch-pill { left: 0; bottom: 6px; font-size: 0.74rem; padding: 6px 11px 6px 7px; gap: 7px; } /* under the photo, left of the inset — over the photo it collided with the inset at 390 */
  .chch-pill img { width: 26px; }
}
@media (max-width: 900px) {
  .acc-grid, .wp-grid { grid-template-columns: 1fr; }
  .acc-stage, .wp-stage { display: none; }
  .acc-mimg { display: block; border-radius: var(--radius); overflow: hidden; margin: 0 4px 16px; }
  .acc-mimg img { width: 100%; display: block; }
  .acc-mimg .placeholder-media { aspect-ratio: 16 / 10; }
  .wp-mimg { display: block; border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
  .wp-mimg img { width: 100%; display: block; }
  .wp-step { opacity: 1; padding-left: 0; padding-top: 60px; }
  .wp-step .idx { top: 0; }
  .quote-cards { grid-template-columns: 1fr; }
  .trust-row, .trust-row.rev { grid-template-columns: 1fr; }
  .wc-domains.three { grid-template-columns: 1fr; }
  .slider-btn { width: 44px; height: 44px; }
  .hero-slider .hero-badge { position: static; margin: 14px auto 0; } /* overlaps the arrows if it stays absolute at this width */
}

/* ============================================================
   Companion page v2 — "A day with your Companion"
   sticky voice-bubble centerpiece + signal detection (2026-07-16)
   ============================================================ */

/* --- the navy day section (WC = navy, per colour semantics) --- */
.wc-day {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--text-on-dark);
  padding: calc(clamp(90px, 13vh, 150px) * var(--sp)) 0;
  position: relative;
  overflow: clip; /* not `hidden` — would disable position:sticky on the stage */
}

.wc-day::before {
  content: "";
  position: absolute;
  top: 10%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(62, 110, 147, 0.16), transparent 60%);
  pointer-events: none;
}

.wc-day .chapter-label .name { color: var(--sage); }
.wc-day .chapter-label .no { color: var(--amber); }
.wc-day .chapter-label::after { background: var(--line-dark); }
.wc-day h2 { color: var(--text-on-dark); font-size: var(--fs-h2); max-width: 19em; }
.wc-day h2 em.accent { color: var(--amber); }

.wc-day-intro .intro { max-width: 40em; color: var(--text-on-dark-soft); font-size: 1.14rem; margin-bottom: 0.9em; }

/* section head: headline on top (left, ~2/3 width), then intro copy + image
   placeholder in a row beneath it (Ty, 2026-07-20 — the side-by-side head
   crowded the two-line title against the image) */
.wc-day-head { display: block; }
.wc-day-title { max-width: 66%; } /* left-justified, roughly two-thirds of the row */
.wc-day-head-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  margin-top: clamp(26px, 4vh, 46px);
}
.wc-day-figure { margin: 0; }
.wc-day-figure .placeholder-media { aspect-ratio: 4 / 3; }
.wc-day-figure img {
  display: block;
  width: 100%;
  height: auto; /* the site img reset has no height:auto — HTML height attrs would fix the height otherwise */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* --- sticky grid: bubbles pinned left, feature steps scroll right --- */
.wc-day-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  margin-top: clamp(60px, 9vh, 104px); /* breathing room between the intro head and the sticky grid (Ty, 2026-07-20) */
}

.wc-day-stage { position: sticky; top: 120px; } /* overrides .wp-stage's 22vh */

/* bare bubbles on navy, like the home reveal — no card chrome */
.wc-day-swap {
  aspect-ratio: auto;
  min-height: 560px; /* was 730 to clear moment 1's old five-bubble exchange; every moment is 3 bubbles now (2026-08-04) — 560 clears them and keeps the sticky stage short */
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.wc-day-swap > .wc-moment {
  padding: clamp(18px, 2.2vw, 28px);
  gap: 12px; /* minimum only — space-between does the real distribution */
  justify-content: space-between; /* bubbles spread across the full panel so the backdrop photo shows between them (Ty, 2026-08-04) */
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* per-step Joan scene photos ride as BACKDROPS under the live HTML bubbles
   (Ty ruling 2026-07-30, wired 2026-07-31) — desktop stage only; the mobile
   inline cards stay bare. The scrim keeps bubble edges and the time kicker
   legible over the photo. */
.wc-moment-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wc-day-swap > .wc-moment::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 30, 48, 0.38) 0%, rgba(12, 30, 48, 0.56) 100%);
}
.wc-day-swap > .wc-moment > :not(.wc-moment-bg) { position: relative; z-index: 2; }

.wc-moment {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

/* .wc-moment-time kickers removed from the stage panels 2026-08-04 (Ty: redundant
   with the steps column's .kick eyebrows) — rules pruned with them */

/* --- navy re-skin of the wp steps (base styles are light-context) --- */
/* step rhythm matches the watch protocol (Ty, 2026-07-18): base gap + run-out
   room so the stage stays pinned until the last step reaches the centre band */
.wc-day .wp-steps { gap: calc(clamp(48px, 9vh, 90px) * var(--sp)); padding-bottom: calc(clamp(90px, 16vh, 170px) * var(--sp)); }
.wc-day .wp-step { padding-left: 0; }
.wc-day .wp-step p + p { margin-top: 0.85em; } /* v1 steps carry two paragraphs; base .wp-step p is margin:0 */
.wc-day .wp-step .tagline { color: var(--amber); }
.wc-day .wp-step .kick {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.wc-day .wp-step h3 { color: var(--text-on-dark); }
.wc-day .wp-step p { color: var(--text-on-dark-soft); }

/* mobile-only inline exchanges (stage is hidden ≤900px) */
.wc-moment-inline { display: none; }

/* --- section close --- */
.wc-day-close {
  margin-top: clamp(28px, 4.5vh, 46px);
  display: grid;
  justify-items: start;
  gap: 26px;
  max-width: 46em;
}

.wc-day-close-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  color: var(--text-on-dark);
  text-wrap: balance;
}
.wc-day-close-line em.accent { color: var(--amber); }

/* --- signal detection: steel-blue band (Ty, 2026-07-18 — was deeper ink;
   lighter blue breaks up the navy run while staying in the WC family) --- */
.signal {
  background: linear-gradient(180deg, #1D3F5E 0%, #16334E 100%);
  color: var(--text-on-dark);
  padding: calc(clamp(80px, 11vh, 130px) * var(--sp)) 0;
  position: relative;
}

.signal .chapter-label .name { color: var(--sage); }
.signal .chapter-label .no { color: var(--amber); }
.signal .chapter-label::after { background: var(--line-dark); }
.signal h2 { color: var(--text-on-dark); font-size: clamp(2rem, 3.1vw, 2.7rem); } /* stacked head: sized so "And underneath it all —" holds one line in the 1.05fr column */
.signal h2 em.accent { color: var(--amber); }
.signal .body-max p { color: var(--text-on-dark-soft); }
.signal .body-max strong { color: var(--text-on-dark); }

.signal-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.signal-tagline {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--amber);
}

.signal-card {
  border: 1px solid rgba(250, 246, 238, 0.3);
  border-radius: var(--radius-lg);
  background: rgba(250, 246, 238, 0.16); /* brighter tile against the steel band (Ty) */
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.45);
}

.signal-card-head {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}

.signal-list { list-style: none; margin: 0; padding: 0; }
.signal-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-on-dark);
  font-size: 1.04rem;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
}

.sig-flag-ico {
  flex: none;
  width: 17px; height: 17px;
  color: var(--amber);
  transform: translateY(2px);
}

.signal-flag {
  margin: 18px 0 0;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--amber);
}
.signal-flag span { margin-right: 6px; }

/* --- companion page mobile --- */
@media (max-width: 900px) {
  .wc-day-head-row, .wc-day-grid, .signal-grid { grid-template-columns: 1fr; }
  .wc-day-title { max-width: 100%; }
  .wc-day-figure { max-width: 460px; }
  .wc-day .wp-step { padding-top: 0; } /* no idx circle on these steps */
  .wc-day .wc-moment-inline {
    display: flex;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius);
    background: rgba(250, 246, 238, 0.04);
  }
  .wc-day .wc-moment-inline .wc-bubble { max-width: 100%; }
  .wc-day-close { max-width: none; }
  .signal-grid { gap: 34px; }
}

/* ============================================================
   Home v3 pass (2026-07-17, revised same day per Ty) —
   stakes strip (identity reframe), WC habit-loop set piece,
   Independence System chapter-break band
   ============================================================ */

/* the stakes — full-width champagne strip (safety register), unlike any split */
.stakes-strip {
  background: linear-gradient(165deg, var(--amber-soft), var(--cream));
  padding: calc(clamp(72px, 10vh, 124px) * var(--sp)) 0;
}

.stakes-strip .chapter-label::after { background: rgba(18, 42, 64, 0.14); }

.stakes-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.stakes-grid h2 { font-size: var(--fs-h2); }

/* the three-row ledger (replaced the 44% numeral, Ty 2026-09-11): ratio · figure row · one line */
.stakes-story {
  display: grid;
  padding-left: clamp(28px, 4vw, 56px);
  border-left: 1px solid rgba(18, 42, 64, 0.16);
}
.stakes-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 20px 0;
}
.stakes-step + .stakes-step { border-top: 1px solid rgba(18, 42, 64, 0.12); }
.stakes-step .ratio {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
  min-width: 3.4em;
  font-variant-numeric: tabular-nums;
}
.stakes-step .ratio b { color: var(--copper); font-weight: 700; }
.stakes-step .txt { display: grid; gap: 8px; }
.stakes-step .figs { display: flex; gap: 6px; }
.stakes-step .figs svg { width: 15px; height: auto; display: block; }
.stakes-step .fig { --f: var(--copper); --s: none; }          /* filled = the one — same crimson as the numeral (Ty) */
.stakes-step .fig.out { --f: none; --s: var(--ink); }         /* outlined = the rest */
.stakes-step .line { font-size: 1.02rem; line-height: 1.35; color: var(--text); margin: 0; max-width: 24em; }
.stakes-step .line b { font-weight: 800; color: var(--ink); }
.stakes-story .source { font-size: 0.82rem; color: var(--text-soft); margin: 14px 0 0; }

/* the pivot line — hands the page to the watch chapter */
.stakes-pivot {
  margin-top: clamp(52px, 8vh, 84px);
  text-align: center;
}

.stakes-pivot p {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 24em;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .stakes-grid { grid-template-columns: 1fr; }
  .stakes-story {
    border-left: none;
    border-top: 1px solid rgba(18, 42, 64, 0.16);
    padding: 8px 0 0;
    max-width: 480px;
  }
}

/* bright bubbles that pop off the navy (Ty, 2026-07-17; extended to companion's
   day-scroll 2026-07-18 — home + companion now share the treatment) */
.wc-convo .wc-bubble,
.wc-day .wc-bubble {
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.4);
}

.wc-convo .wc-bubble.from-wc,
.wc-day .wc-bubble.from-wc {
  background: var(--ivory);
  border-color: var(--ivory);
}

.wc-convo .wc-bubble.from-senior,
.wc-day .wc-bubble.from-senior {
  background: var(--amber-soft);
  border-color: var(--amber-soft);
}

.wc-convo .wc-bubble p,
.wc-day .wc-bubble p { color: var(--text); }

.wc-convo .from-wc .wc-speaker,
.wc-convo .from-senior .wc-speaker,
.wc-day .from-wc .wc-speaker,
.wc-day .from-senior .wc-speaker { color: var(--sage-deep); }

.wc-convo .wc-eq i,
.wc-day .wc-eq i { background: var(--sage-deep); }

/* WC habit-loop line — centered set piece between the domains and the close */
.wc-habit {
  margin-top: clamp(44px, 7vh, 64px);
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
}

.wc-habit .rule {
  width: 1.5px;
  height: clamp(32px, 5vh, 50px);
  background: linear-gradient(180deg, transparent, var(--amber));
}

.wc-habit p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.35;
  color: var(--text-on-dark);
  max-width: 30em;
  text-wrap: balance;
}

.wc-habit p em {
  font-style: italic;
  color: var(--amber);
  font-variation-settings: "opsz" 40;
}

/* Independence System band — light chapter break after the navy WC reveal,
   mirroring the wc-turn that opens it (bookends of the reveal) */
.is-band { padding: calc(clamp(72px, 10vh, 116px) * var(--sp)) 0; }

.is-inner {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.is-band .drop {
  width: 1.5px;
  height: clamp(40px, 6vh, 64px);
  background: linear-gradient(180deg, transparent, var(--amber));
}

.is-band .dot {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

.is-band .dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
  opacity: 0;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}

.is-lines {
  color: var(--text-soft);
  font-size: 1.08rem;
  max-width: 42em;
  margin: 0;
  text-wrap: balance;
}

.is-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* ================= Global CTA rollout (2026-07-18, Ty-revised) =================
   Nav = ONE CTA: the phone number as the button (click-to-call).
   Heroes carry no CTA for now; offers use a single "Get Started Today"
   jump to #qualify; the qualify section holds the Call/Callback pair. */

.nav-phone { gap: 9px; }
.nav-phone svg { flex: none; }

@media (max-width: 760px) {
  .nav .nav-phone { font-size: 0.88rem; padding: 9px 13px; gap: 7px; } /* compact pill: logo + phone + burger must fit at 360 (mobile pass A1). `.nav .btn` specificity beat the old `.nav-phone` rule, so the pill never shrank */
  .nav .logo-img { height: 32px; }
  .nav .wordmark { flex: none; } /* never let flex squeeze the logo */
}

@media (max-width: 400px) {
  .nav .nav-phone { font-size: 0.84rem; padding: 8px 11px; }
  .nav .logo-img { height: 28px; }
}

/* ============================================================
   In-Home v7-copy pass (2026-07-18, per Ty) — protocol centerpiece
   rebuilt on the wp sticky machinery (image placeholders swap per
   step; CSS base-unit illustration retired), setup tiles on the
   home §03 watch-tile pattern
   ============================================================ */

/* wp steps re-skinned for the navy protocol shell */
.protocol .wp-step h3 { color: var(--text-on-dark); }
.protocol .wp-step p { color: var(--text-on-dark-soft); }
.protocol .wp-step .idx {
  border-color: var(--line-dark);
  background: rgba(250, 246, 238, 0.08);
  color: var(--sage);
}
.protocol .wp-step.active .idx { background: var(--copper); border-color: var(--copper); color: #fff; }
#how .wp-steps { padding-bottom: calc(clamp(90px, 16vh, 170px) * var(--sp)); } /* run-out: stage pinned until step 4 centres */

/* 3-up variant of the home §03 watch tiles (inhome setup) */
.watch-tiles.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1020px) { .watch-tiles.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .watch-tiles.three { grid-template-columns: 1fr; } }

/* ============ Home imagery v2 — "Clear Day" (2026-07-21) ============ */
/* Tile placeholders now carry real photos: kill the placeholder chrome, cover-fit the image. */
.watch-tile .tile-img.has-img { padding: 0; background: var(--cream); }
.tile-img.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Companion hero mosaic — round 8 (2026-09-07)
   Replaces the 3-slide hero slider on companion.html only.
   Three photographed moments + one navy tile carrying the four
   pillars as the legend the photos are instances of.
   ============================================================ */

/* companion hero sits on the site container (1180) like every other hero;
   the 1340 override from the mosaic build broke the page grid (Ty, 2026-09-09) */

.companion-hero .split {
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(32px, 4.4vw, 60px);
}

.hero-mosaic {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 14px;
  /* content-driven: the pillar tile sets column b's height; the row can grow
     past the floor but never clips the legend (it did, 22px even at 1440) */
  height: auto;
  min-height: clamp(430px, 38vw, 550px);
  margin-top: 8px;
}

.mos-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.mos-col > * {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 0;
  box-shadow: var(--shadow-soft);
}

/* the variance: each column splits at a different ratio, so no two
   tiles share an inner edge and it never reads as four even squares */
.mos-col.a > :nth-child(1) { flex: 0 0 43%; }
.mos-col.a > :nth-child(2) { flex: 1 1 0; }
.mos-col.b > :nth-child(1) { flex: 0 0 auto; }
.mos-col.b > :nth-child(2) { flex: 1 1 0; min-height: 180px; }

.mos-photo { background: var(--cream-deep); }
.mos-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* time chips — the three photos are one day; the chips are what say so */
.mos-photo .tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(250, 246, 238, 0.92);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1;
  padding: 7px 10px; border-radius: 6px;
}

/* the legend — the only dark object in the hero, and the largest cell */
.mos-pillars {
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--text-on-dark);
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2.2vw, 28px) clamp(18px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
}

.mos-pillars .asks {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0;
}

.mos-pillars ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mos-pillars li { display: flex; align-items: center; gap: 13px; }
.mos-pillars img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.mos-pillars span { font-size: 0.94rem; font-weight: 800; color: var(--text-on-dark); }

/* load-bearing rule: above it is what the Companion asks about daily,
   below it is what happens when an answer comes back wrong */
.mos-pillars .sep {
  height: 1px;
  background: rgba(233, 206, 150, 0.28);
  margin: 16px 0 0;
  flex: none;
}

.mos-signal {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 13px 0 0;
  font-size: 0.81rem;
  line-height: 1.4;
  color: var(--text-on-dark-soft);
  flex: none;
}

.mos-signal .pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
  margin-top: 6px;
}

.mos-signal b { color: var(--text-on-dark); font-weight: 800; }

@media (max-width: 900px) {
  .companion-hero .split { grid-template-columns: 1fr; }
  .hero-mosaic {
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
    max-width: 520px;
    margin-top: 26px;
  }
  .mos-col { display: contents; }
  .hero-mosaic > .mos-col > * { border-radius: 16px; }
  .mos-photo.sq { aspect-ratio: 1 / 1; }
  .mos-photo.wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .mos-pillars { grid-column: 1 / -1; }
  .mos-pillars ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
  }
  .mos-pillars img { width: 32px; height: 32px; }
  .mos-pillars span { font-size: 0.88rem; }
}

/* ============================================================
   Mobile pass (2026-09-09) - everything below is scoped to
   <=760px unless marked GLOBAL. Desktop must stay pixel-identical;
   the 1440 before/after diff in design-src/qa proves it per group.
   ============================================================ */

/* B. Section spacing - the --sp factor multiplies every section-level
   padding clamp (see :root); page-top sections use --sp-top so the
   hero still clears the fixed nav (~78px at 760). */
@media (max-width: 760px) {
  :root { --sp: 0.42; --sp-top: 0.72; } /* 0.55 -> 0.42 after Ty's 2026-09-09 review: still too airy */

  /* B2 - inner rhythm: label / headline / figure / lede gaps tighten with the sections */
  .eyebrow { margin-bottom: 16px; }
  .hero h1 { margin-bottom: 18px; }
  .chapter-label { margin-bottom: 14px; }
  .hero-grid, .split { gap: 18px; }   /* one column here, so the gap is the figure's vertical clearance */
  .wc-head { margin-bottom: 22px; }
}

/* A. Nav - burger + slide-down menu. Desktop: both hidden, nothing else changes. */
.nav-burger, .nav-menu { display: none; }
@media (max-width: 760px) {
  .nav-inner { gap: 10px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; flex: none; margin: -4px -8px -4px 0; /* 44px hit area without growing the bar */
    padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  }
  .nav-burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--ink); margin: 0 auto; transition: transform 0.25s var(--ease-out), opacity 0.2s; }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav.open { background: var(--ivory); box-shadow: 0 1px 0 var(--line); } /* solid ground under the bar while the panel is open */
  .nav.open .nav-phone { box-shadow: none; } /* its drop shadow smudged the panel top */
  .nav-menu {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ivory); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(18, 42, 64, 0.35);
    padding: 4px clamp(20px, 5vw, 48px) 12px;
  }
  .nav-menu[hidden] { display: none; }
  .nav-menu ul { list-style: none; margin: 0; padding: 0; }
  .nav-menu a { display: block; padding: 15px 0; font-weight: 700; font-size: 1.12rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .nav-menu li:last-child a { border-bottom: 0; }
  .nav-menu a[aria-current="page"] { color: var(--copper); }
}

/* C. Hero order under 760px: eyebrow + headline, then the image, then the lede.
   The copy column is a classless <div>; display:contents lifts its children
   into the grid so `order` can interleave them with the figure. */
@media (max-width: 760px) {
  .hero-grid > div:first-child,
  .product-hero .split > div:first-child { display: contents; }
  .hero-grid, .product-hero .split { gap: 0; } /* spacing comes from the margins below, not the grid gap */
  .hero-grid .eyebrow, .product-hero .split .eyebrow { order: -3; }
  .hero-grid h1, .product-hero .split h1 { order: -2; margin-bottom: 22px; }
  .hero-figure, .hero-mosaic { order: -1; margin: 0 0 44px; } /* 24 -> 44: the amber frame (::before) overhangs 18px, so the lede was ~6px off it (Ty, 2026-09-10) */
  .hero-figure.hero-slider { margin-bottom: 18px; } /* the dots row already adds 18px; no frame overhang */
  .hero-mosaic { margin-bottom: 28px; } /* no overhang either */
  .hero-grid .lede, .product-hero .split .lede { order: 0; }
  /* J2: split photos end inside a screen; composite/dialogue figures opt out with .keep-ratio */
  .split .split-figure:not(.keep-ratio) img { aspect-ratio: 4 / 3; object-fit: cover; max-height: 300px; }
  /* C3: photo heroes end inside the first screen; sliders keep 1:1 (their slides carry type) */
  .hero-figure:not(.hero-slider) .frame img { aspect-ratio: 4 / 3; object-fit: cover; }
}

/* G. Orphans - block CTAs go full-width under 760px so labels rarely wrap at all;
   when they do, .btn's text-wrap:balance (GLOBAL, above) evens the lines. */
@media (max-width: 760px) {
  .btn:not(.nav-phone) { display: block; width: 100%; text-align: center; padding: 16px 22px; font-size: 1.02rem; line-height: 1.3; } /* block, not flex: the arrow flows after the last word instead of floating at the far edge of a two-line label */
  .btn:not(.nav-phone) .arrow, .btn:not(.nav-phone) > span[aria-hidden] { display: inline-block; margin-left: 6px; }
  .btn-ghost:not(.nav-phone) { padding: 14px 22px; }
  .hero-cta { gap: 12px; }
  .hero-cta .cta-note { text-align: center; max-width: none; }
}

/* H. Alignment under 760px: centred set pieces read left on a phone. Kept centred
   on Ty's call (2026-09-09): CTA buttons / .wc-cta, .form-fine, .form-success,
   .stakes-num tiles, the offer price column, the 404 page, segmented labels. */
@media (max-width: 760px) {
  .wc-turn, .wc-habit, .is-inner { justify-items: start; text-align: left; }
  .wc-head, .stakes-pivot { text-align: left; }
  .wc-head { margin-left: 0; margin-right: 0; }
  .wc-lede, .stakes-pivot p { margin-left: 0; margin-right: 0; }
}

/* E. Forms under 760px */
@media (max-width: 760px) {
  .segmented label { font-size: 0.92rem; padding: 6px 8px; line-height: 1.15; }
  .form-fine { font-size: 0.88rem; margin-top: 14px; }
  .form-success { padding: 28px 0; }
  .form-success h3 { font-size: 1.45rem; }
}
@media (max-width: 480px) {
  .segmented { grid-template-columns: 1fr 1fr; }
  .segmented label:last-of-type { grid-column: 1 / -1; } /* "Someone else" can't fit a third of a 360 column */
}

/* F + I. Icon family (GLOBAL): assets/img/icons.svg sprite, drawn to match the
   pillar PNGs. Day-scroll step heads carry one beside the h3 on every width. */
.wc-day-steps .wp-step h3 { display: flex; align-items: center; gap: 12px; }
.step-ico { flex: none; width: 28px; height: 28px; color: var(--amber); display: grid; place-items: center; }
.step-ico svg { width: 28px; height: 28px; }
@media (max-width: 760px) {
  .wp-step h3 { font-size: 1.55rem; } /* I1: the step headline carries the scroll on a phone; .kick stays small */
}

/* Round 2 (Ty's phone review, 2026-09-09): tighter still, and the set pieces that carry
   their own margins get phone values. Pullquote margins are inline in the markup, hence !important. */
@media (max-width: 760px) {
  .pullquote { margin-top: 16px !important; }
  .hero-cta { margin: 18px 0 8px; }
  .lede { margin-bottom: 0.7em; }
  .close-line { margin-top: 22px; }
  .watch-tiles { margin-top: 18px; }
  .acc-grid { margin-top: 16px; }
  .protocol .closer { margin-top: 14px; gap: 16px; }
  .wp-steps, .wc-day .wp-steps { gap: 34px; }
  #protocol .wp-steps, #how .wp-steps, .wc-day .wp-steps { padding-bottom: 0; } /* run-outs only exist for the sticky stage, which is hidden on phones */
  .wc-day-grid { margin-top: 20px; }
  .wp-grid { margin-top: 12px; }
  .answers-grid.two { margin-top: 24px; }
  .hero .eyebrow, .product-hero .eyebrow { font-size: 0.8rem; letter-spacing: 0.12em; }
  .hero .eyebrow::before, .product-hero .eyebrow::before { display: none; } /* the 34px rule + gap is what pushed "For active, independent Canadians" (309px of a 320px column at 360) onto two lines; text alone fits */
  .founder-stack .fs-inset { right: 0; }
  .contact-figure { order: 1; } /* the form is the action; the building photo follows it on phones */

  /* Image -> first line of copy (Ty's 2026-09-10 phone review: too tight on most of them).
     The 18px grid gap stays; each figure adds its own clearance. Caption pills overhang
     their image by 18px, so captioned figures get more. */
  .split .split-figure { margin-bottom: 14px; }
  .split .split-figure:has(.caption) { margin-bottom: 28px; }
  .wp-mimg, .acc-mimg { margin-bottom: 22px; }
  .wc-day-figure { margin-bottom: 10px; }
  .trust-media { margin-bottom: 8px; }

  /* Companion hero mosaic on phones: one row of three squares, then the pillar tile.
     Three stacked full-width photos was the wrong answer (Ty, 2026-09-09). */
  .companion-hero .hero-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: none; margin-top: 0; }
  .companion-hero .mos-photo.sq, .companion-hero .mos-photo.wide { aspect-ratio: 1 / 1; height: auto; min-width: 0; min-height: 0; grid-column: auto; grid-row: auto; order: 1; }
  .companion-hero .mos-pillars { grid-column: 1 / -1; order: 2; }
  .companion-hero .hero-mosaic > .mos-col > * { border-radius: 12px; }
  .companion-hero .mos-photo .tag { top: 8px; left: 8px; font-size: 0.62rem; padding: 5px 7px; }
}

@media (max-width: 480px) {
  .stakes-step { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .stakes-step .ratio { font-size: 2rem; }
}


/* ============ Reviews page — proof wall (2026-09-12) ============ */

/* Screenshots of public Google reviews and Facebook comments. They are deliberately
   NOT normalised to one size: the mixed dimensions are what makes them read as
   evidence rather than as marketing. Each sits on a white card so it lifts off the
   cream ground; the image itself never upscales past its natural width. */

.rv-note { font-size: 0.92rem; color: var(--text-soft); margin-top: 10px; }

.rv-wall { columns: 2; column-gap: 22px; margin-top: clamp(30px, 4vh, 44px); }
@media (max-width: 900px) { .rv-wall { columns: 1; } }

.rv-shot {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  background: #fff;
  border: 1px solid rgba(226, 216, 195, 0.9);
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(18, 42, 64, 0.05), 0 14px 34px -20px rgba(18, 42, 64, 0.30);
  padding: 14px;
  margin: 0 0 22px;
  text-align: center;
}
.rv-shot img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; border-radius: 4px; }
.rv-src {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}
.rv-src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage-deep); }
.rv-src.is-google::before { background: #c79a3d; }

/* Feature: one member's own post, shot on her phone — its own layout so it
   doesn't read as just a bigger tile in the wall. */
.rv-feature { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .rv-feature { grid-template-columns: 1fr; } }
.rv-phone {
  background: #fff;
  border: 1px solid rgba(226, 216, 195, 0.9);
  border-radius: 20px;
  box-shadow: 0 30px 70px -34px rgba(18, 42, 64, 0.45);
  padding: 12px;
  max-width: 400px;
  margin-inline: auto;
}
.rv-phone img { display: block; width: 100%; height: auto; border-radius: 12px; }
.rv-feature h2 { margin-top: 6px; }

/* five quote cards: the lead one runs wide so the row doesn't end on a gap */
.review-grid.is-five > .review-card:first-child { grid-column: span 2; }
@media (max-width: 1020px) { .review-grid.is-five > .review-card:first-child { grid-column: span 2; } }
@media (max-width: 640px)  { .review-grid.is-five > .review-card:first-child { grid-column: span 1; } }

/* Phone: the wall drops to one column and a 680px Google screenshot was landing at
   305 CSS px (0.45x -> ~6px text), which this audience cannot read. Claw back the
   gutters, and make every shot open full size on tap. */
.rv-zoom { display: block; }
.rv-shot .rv-hint { display: none; }
@media (max-width: 640px) {
  .rv-wall { margin-inline: -14px; }
  .rv-shot { padding: 8px; border-radius: 10px; }
  .rv-shot .rv-hint {
    display: inline; font-weight: 700; color: var(--sage-deep);
    text-transform: none; letter-spacing: 0; margin-left: 6px;
  }
  .rv-shot .rv-hint::before { content: "·"; margin-right: 6px; color: var(--text-soft); }
}