/* ============================================================
   inner-v4.css — homepage design-language harmonization
   Brings the homepage's signature polish (eyebrow, card frames +
   hover-lift, section numerals) to the inner & product pages.
   Layered AFTER inner.css and scoped to body.v4-inner, so /about
   and any non-opted page are untouched. Uses base.css tokens.
   ============================================================ */

/* ---------- 1. Section eyebrow → homepage .ch-kicker ---------- */
body.v4-inner .kicker {
  letter-spacing: 0.28em;
  gap: 14px;
  font-size: 10.5px;
}
body.v4-inner .kicker::before {
  width: 34px;
  opacity: 1;
  background: var(--brand);
}
/* status chip after the eyebrow label, e.g. <span class="st live">Live</span> */
body.v4-inner .kicker .st {
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--line-strong);
  padding: 3px 8px;
  border-radius: 2px;
}
body.v4-inner .kicker .st.live {
  color: var(--gain);
  border-color: rgba(110, 199, 136, 0.32);
}

/* ---------- 2. Faint serif section numerals (homepage .ch-numeral) ---------- */
/* Opt-in per section: add data-chap="01" to a top-level .sec. Kept off by
   default so heterogeneous inner sections don't all get numbered. */
body.v4-inner .sec[data-chap] { overflow: hidden; }
body.v4-inner .sec[data-chap]::before {
  content: attr(data-chap);
  position: absolute;
  top: 18px;
  right: 8px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(120px, 17vw, 230px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(201, 123, 74, 0.30);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
body.v4-inner .sec[data-chap].alt::before { right: auto; left: 8px; }
body.v4-inner .sec[data-chap] > * { position: relative; z-index: 1; }

/* ---------- 3. Card frame + hover-lift (homepage .ch-shot-frame era) ---------- */
body.v4-inner .feature-card,
body.v4-inner .stat-box,
body.v4-inner .statband .s,
body.v4-inner .ct-trust-item,
body.v4-inner .pf-card,
body.v4-inner .mk-card,
body.v4-inner .arc-item,
body.v4-inner .news-card,
body.v4-inner .rm-card,
body.v4-inner .st-foundation-card,
body.v4-inner .st-pain-card,
body.v4-inner .cm-card,
body.v4-inner .hw-card,
body.v4-inner .wl-card {
  box-shadow: inset 0 1px 0 rgba(240, 185, 137, 0.05);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
body.v4-inner .feature-card:hover,
body.v4-inner .stat-box:hover,
body.v4-inner .statband .s:hover,
body.v4-inner .ct-trust-item:hover,
body.v4-inner .pf-card:hover,
body.v4-inner .mk-card:hover,
body.v4-inner .arc-item:hover,
body.v4-inner .news-card:hover,
body.v4-inner .rm-card:hover,
body.v4-inner .st-foundation-card:hover,
body.v4-inner .st-pain-card:hover,
body.v4-inner .cm-card:hover,
body.v4-inner .hw-card:hover,
body.v4-inner .wl-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 123, 74, 0.42);
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(240, 185, 137, 0.1);
}

/* large structural panels: border/sheen polish only, no lift */
body.v4-inner .sig-panel,
body.v4-inner .formcard {
  box-shadow: inset 0 1px 0 rgba(240, 185, 137, 0.05);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
body.v4-inner .sig-panel:hover,
body.v4-inner .formcard:hover {
  border-color: rgba(201, 123, 74, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  body.v4-inner .feature-card,
  body.v4-inner .stat-box,
  body.v4-inner .statband .s,
  body.v4-inner .ct-trust-item,
  body.v4-inner .pf-card,
  body.v4-inner .mk-card,
  body.v4-inner .arc-item,
  body.v4-inner .news-card,
  body.v4-inner .rm-card,
  body.v4-inner .st-foundation-card,
  body.v4-inner .st-pain-card,
  body.v4-inner .cm-card,
  body.v4-inner .hw-card,
  body.v4-inner .wl-card { transition: none; }
  body.v4-inner .feature-card:hover,
  body.v4-inner .stat-box:hover,
  body.v4-inner .statband .s:hover,
  body.v4-inner .ct-trust-item:hover,
  body.v4-inner .pf-card:hover,
  body.v4-inner .mk-card:hover,
  body.v4-inner .arc-item:hover,
  body.v4-inner .news-card:hover,
  body.v4-inner .rm-card:hover,
  body.v4-inner .st-foundation-card:hover,
  body.v4-inner .st-pain-card:hover,
  body.v4-inner .cm-card:hover,
  body.v4-inner .hw-card:hover,
  body.v4-inner .wl-card:hover { transform: none; }
}