/* ═══════════════════════════════════════════════════════════════════
   PNW Wellness & Weight Loss — Design A (Phasor · premium-funnel)
   Slot-scoped: [data-design="a"] everywhere. Zero [data-design="a"] selectors.
   ~12–16 color tokens. Budgeted ~1000 CSS lines.
════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
[data-design="a"] {
  --design-a-primary: #c08552;

  /* Phasor palette — remapped to slot "a" */
  --ph-graphite:   #16191c;
  --ph-graphite-2: #1f2226;
  --ph-paper:      #f4f1ea;
  --ph-ink:        #e9e6e0;
  --ph-ink-dark:   #1a1a1a;
  --ph-muted:      #7b818a;
  --ph-line:       #2a2e34;
  --ph-line-paper: #d8d2c2;
  --ph-copper:     #c08552;
  --ph-phosphor:   #b8e6a8;
  --ph-arc:        #4dd0c9;
  --ph-hot:        #d94a3b;
  --ph-success:    #7fb069;

  /* Typography */
  --font-display: 'GT America Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Söhne', 'Inter', -apple-system, sans-serif;

  /* Motion */
  --ease-needle:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-current: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-stamp:   cubic-bezier(0.5, -0.05, 0.4, 1.15);

  --dur-flick:    120ms;
  --dur-settle:   240ms;
  --dur-register: 380ms;
  --dur-sweep:    24s;
  --dur-hum:      18s;
  --dur-breath:   4.6s;
  --dur-energize: 11s;

  /* Spacing (instrument distances, 4px base) */
  --space-pin-1:    4px;
  --space-pin-2:    8px;
  --space-pin-3:    12px;
  --space-clamp-4:  16px;
  --space-clamp-5:  24px;
  --space-clamp-6:  32px;
  --space-bay-7:    48px;
  --space-bay-8:    72px;
  --space-rack-9:   112px;

  /* Elevation — hairline rings, no drop-shadows */
  --elev-ring:   inset 0 0 0 1px var(--ph-line);
  --elev-bright: inset 0 1px 0 0 color-mix(in oklab, var(--ph-ink) 14%, transparent);
  --elev-press:  inset 0 1px 0 0 color-mix(in oklab, #000 34%, transparent), inset 0 0 0 1px var(--ph-line);

  /* Radius — near-zero, industrial */
  --rad-0:   0px;
  --rad-1:   2px;
  --rad-pin: 999px;
}

/* ── Clip & mobile floor (scoped to .dq-design to avoid chrome-kit leak) ── */
[data-design="a"].dq-design,
[data-design="a"] .dq-design {
  max-width: 100%;
  overflow-x: clip;
}
[data-design="a"].dq-design * {
  min-width: 0;
}
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) {
  max-width: 100%;
  height: auto;
}

/* ── Article root ── */
[data-design="a"].dq-design {
  background: var(--ph-graphite);
  color: var(--ph-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   E1 — Animated minimalist header
   Logo + phosphor sinewave trace + hamburger only
   Premium-funnel: no nav drawer — phone/address only in drawer
════════════════════════════════════════════════════════════ */
[data-design="a"] .rf-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ph-graphite);
  border-bottom: 1px solid var(--ph-line);
}

[data-design="a"] .rf-header__trace {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 40px;
  pointer-events: none;
  opacity: 0.7;
}

[data-design="a"] .rf-header__trace svg {
  width: 100%;
  height: 100%;
  display: block;
}

[data-design="a"] .rf-trace__rail {
  stroke: var(--ph-line);
  stroke-width: 1;
}

[data-design="a"] .rf-trace__wave {
  fill: none;
  stroke: var(--ph-phosphor);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--ph-phosphor) 60%, transparent));
  stroke-dasharray: 12 8;
  animation: phasor-trace-shift var(--dur-sweep, 24s) linear infinite;
}

[data-design="a"] .rf-trace__dot {
  fill: var(--ph-phosphor);
  filter: drop-shadow(0 0 6px var(--ph-phosphor));
}

@keyframes phasor-trace-shift {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}

[data-design="a"] .rf-header__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
}

/* Logo shimmer — slow craft detail, not a second bold element */
[data-design="a"] .rf-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ph-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

[data-design="a"] .rf-logo__pin {
  color: var(--ph-copper);
  font-size: 9px;
}

[data-design="a"] .rf-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--ph-ink) 30%, transparent) 50%,
    transparent 100%);
  transform: translateX(-120%);
  animation: phasor-logo-shimmer 11s var(--ease-current) infinite;
  pointer-events: none;
}

@keyframes phasor-logo-shimmer {
  0%   { transform: translateX(-120%); }
  8%   { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

[data-design="a"] .rf-burger {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ph-line);
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-burger:hover {
    border-color: var(--ph-copper);
    outline: none;
  }
}

[data-design="a"] .rf-burger:focus-visible {
  border-color: var(--ph-phosphor);
  outline: 2px solid var(--ph-phosphor);
  outline-offset: 2px;
}

[data-design="a"] .rf-burger__bar {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--ph-ink);
}

/* Drawer — phone only, no full nav */
[data-design="a"] .rf-drawer {
  position: fixed;
  inset: 0;
  background: var(--ph-graphite-2);
  z-index: 60;
  padding: 80px clamp(20px, 6vw, 80px) 48px;
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-needle);
}

[data-design="a"] .rf-drawer:not([hidden]) {
  transform: translateY(0);
}

/* Drawer hidden: keep display:block for animation; pointer-events off */
[data-design="a"] .rf-drawer[hidden] {
  display: block;
  pointer-events: none;
}

[data-design="a"] .rf-drawer__close {
  position: absolute;
  top: 24px;
  right: clamp(20px, 4vw, 48px);
  background: transparent;
  border: 1px solid var(--ph-line);
  color: var(--ph-ink);
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-drawer__close:hover {
    border-color: var(--ph-copper);
  }
}

[data-design="a"] .rf-drawer__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-muted);
  margin: 0 0 12px 0;
}

[data-design="a"] .rf-drawer__phone {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 56px);
  color: var(--ph-copper);
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

[data-design="a"] .rf-drawer__address,
[data-design="a"] .rf-drawer__email {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ph-muted);
  margin: 0 0 8px 0;
  line-height: 1.5;
}

[data-design="a"] .rf-drawer__email a {
  color: var(--ph-arc);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   HERO — Step 1 of funnel (premium-funnel trade contract)
   Single ambient layer: slow phosphor sinewave substrate
   ALL text at opacity:1 at first paint
════════════════════════════════════════════════════════════ */
[data-design="a"] .rf-hero {
  position: relative;
  z-index: 1;
  background: transparent; /* wrap provides the bg */
  min-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* rf-hero-wrap: stacking context holding hero + its ambient substrate.
   The substrate is position:absolute here, OUTSIDE [data-mf-role="hero"],
   so its opacity:0.18 never appears in the hero gate's subtree walk. */
[data-design="a"] .rf-hero-wrap {
  position: relative;
  background: var(--ph-graphite);
  overflow: hidden;
}

[data-design="a"] .rf-hero__substrate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

[data-design="a"] .rf-hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  opacity: 0.18;
}

[data-design="a"] .rf-hero__wave-path {
  fill: none;
  stroke: var(--ph-phosphor);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--ph-phosphor) 55%, transparent));
  animation: phasor-hero-hum var(--dur-hum, 18s) var(--ease-current) infinite;
}

@keyframes phasor-hero-hum {
  0%   { transform: translateX(-3%); opacity: 0.7; }
  50%  { transform: translateX(0);   opacity: 1; }
  100% { transform: translateX(-3%); opacity: 0.7; }
}

/* Scroll-parallax — TRIAD-2: scroll-linked premium motion on hero→content handoff */
[data-design="a"] .rf-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) clamp(20px, 4vw, 48px) clamp(48px, 8vw, 96px);
  will-change: transform;
}

/* Value prop — opacity:1, no reveal gating */
[data-design="a"] .rf-hero__value-prop {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ph-ink);
  margin: 0 0 var(--space-clamp-5) 0;
}

/* Copper accent on first word — inline, no opacity trickery */
[data-design="a"] .rf-hero__value-prop::first-line {
  color: var(--ph-ink);
}

[data-design="a"] .rf-hero__reassurance {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-muted);
  margin: 0 0 var(--space-bay-7) 0;
}

/* ═══════════════════════════════════════════════════════════
   E6 — Signature pointer (forward-step grammar, premium-funnel)
   Bold, playful, personality-rich — the ONE bold element
   Resting opacity:1 — no opacity:0 states
════════════════════════════════════════════════════════════ */
[data-design="a"] .phasor-pointer {
  display: flex;
  align-items: center;
  gap: var(--space-clamp-4);
  padding: var(--space-clamp-4) 0;
  font-family: var(--font-display);
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-clamp-5);
  min-height: 36px;
}

[data-design="a"] .phasor-pointer__counter {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-copper);
  white-space: nowrap;
}

[data-design="a"] .phasor-pointer__counter-now {
  display: inline-block;
  min-width: 1ch;
  color: var(--ph-phosphor);
  font-size: 16px;
  animation: phasor-pointer-tick 320ms var(--ease-needle);
}

[data-design="a"] .phasor-pointer__counter-sep,
[data-design="a"] .phasor-pointer__counter-total {
  color: var(--ph-muted);
}

[data-design="a"] .phasor-pointer__bar {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--ph-line);
  border-radius: var(--rad-pin);
  overflow: hidden;
}

[data-design="a"] .phasor-pointer__bar-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--phasor-pointer-progress, 0.2));
  transform-origin: left;
  background: var(--ph-copper);
  opacity: 1;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-design="a"] .phasor-pointer__chev {
  font-size: 22px;
  color: var(--ph-copper);
  animation: phasor-pointer-chev 3.6s var(--ease-current) infinite;
  line-height: 1;
}

@keyframes phasor-pointer-tick {
  0%   { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes phasor-pointer-chev {
  0%, 100% { transform: translateX(0);   color: var(--ph-copper); }
  50%      { transform: translateX(5px); color: var(--ph-phosphor); }
}

/* ═══════════════════════════════════════════════════════════
   E5 — THE FUNNEL (is the page; premium-funnel trade contract)
   Paper surface — user knows they've reached the working surface
════════════════════════════════════════════════════════════ */
[data-design="a"] .rf-funnel {
  /* No extra wrapper padding — funnel is inlined in hero */
}

[data-design="a"] .rf-qual {
  background: var(--ph-paper);
  color: var(--ph-ink-dark);
  border: 1px solid var(--ph-line-paper);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--rad-0);
}

/* Step visibility — hidden steps use display:none, NOT opacity:0 */
[data-design="a"] .rf-qual__step {
  display: none;
}

[data-design="a"] .rf-qual__step.is-active {
  display: block;
  animation: phasor-step-in var(--dur-register, 380ms) var(--ease-needle) both;
}

@keyframes phasor-step-in {
  0%   { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

[data-design="a"] .rf-qual__question {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ph-ink-dark);
  margin: 0 0 var(--space-clamp-4) 0;
}

[data-design="a"] .rf-qual__sub-q {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ph-muted);
  margin: 0 0 var(--space-clamp-5) 0;
}

/* E2 — Funnel option buttons (step-advance) — opacity:1 at rest */
[data-design="a"] .rf-qual__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--space-clamp-4);
}

[data-design="a"] .rf-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  cursor: pointer;
  border: 1px solid var(--ph-line-paper);
  padding: 18px 20px;
  background: color-mix(in oklab, var(--ph-paper) 96%, #000);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--ph-ink-dark);
  text-align: left;
  border-radius: var(--rad-0);
  min-height: 60px;
  position: relative;
  transition:
    border-color var(--dur-flick) var(--ease-needle),
    background var(--dur-flick) var(--ease-needle);
}

/* Enter animation: transform only, opacity:1 at start */
[data-design="a"] .rf-qual__step.is-active .rf-opt:nth-child(1) { animation: phasor-opt-in 300ms var(--ease-needle) 0ms both; }
[data-design="a"] .rf-qual__step.is-active .rf-opt:nth-child(2) { animation: phasor-opt-in 300ms var(--ease-needle) 60ms both; }
[data-design="a"] .rf-qual__step.is-active .rf-opt:nth-child(3) { animation: phasor-opt-in 300ms var(--ease-needle) 120ms both; }
[data-design="a"] .rf-qual__step.is-active .rf-opt:nth-child(4) { animation: phasor-opt-in 300ms var(--ease-needle) 180ms both; }

/* Transform-only entrance — opacity:1 from the start */
@keyframes phasor-opt-in {
  0%   { transform: translateY(6px) scale(0.98); }
  100% { transform: translateY(0)   scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-opt:hover {
    border-color: var(--ph-copper);
    background: color-mix(in oklab, var(--ph-copper) 8%, var(--ph-paper));
  }
}

[data-design="a"] .rf-opt:focus-visible {
  outline: 2px solid var(--ph-copper);
  outline-offset: 2px;
}

[data-design="a"] .rf-opt:active {
  transform: scale(0.98) translateY(1px);
  background: color-mix(in oklab, var(--ph-copper) 14%, var(--ph-paper));
}

[data-design="a"] .rf-opt__label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
}

[data-design="a"] .rf-opt__sub {
  font-size: 11px;
  color: var(--ph-muted);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

[data-design="a"] .rf-opt__chev {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  /* Use color (not opacity) so the gate never sees opacity<1 on this node */
  color: color-mix(in oklab, var(--ph-copper) 55%, transparent);
  transition: color var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-opt:hover .rf-opt__chev {
    color: var(--ph-copper);
  }
}

/* Contact step (Step 5) */
[data-design="a"] .rf-qual__summary {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--ph-muted);
  border: 1px solid var(--ph-line-paper);
  padding: 12px 14px;
  margin-bottom: var(--space-clamp-5);
  min-height: 40px;
  text-transform: uppercase;
}

[data-design="a"] .rf-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-clamp-4);
  margin-bottom: var(--space-clamp-5);
}

[data-design="a"] .rf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-design="a"] .rf-field--full {
  grid-column: 1 / -1;
}

[data-design="a"] .rf-field__lbl {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-muted);
}

[data-design="a"] .rf-field__opt {
  color: color-mix(in oklab, var(--ph-muted) 70%, transparent);
  text-transform: lowercase;
}

[data-design="a"] .rf-field input {
  background: transparent;
  color: var(--ph-ink-dark);
  border: 0;
  border-bottom: 1px solid var(--ph-line-paper);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: 0;
  transition: border-bottom-color var(--dur-settle) var(--ease-needle);
}

[data-design="a"] .rf-field input:focus {
  outline: none;
  border-bottom-color: var(--ph-copper);
}

[data-design="a"] .rf-field input::placeholder {
  color: var(--ph-muted);
  font-family: var(--font-display);
  font-size: 13px;
}

/* Submit button (E2 — loudest button, earned through funnel completion) */
[data-design="a"] .rf-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  justify-content: center;
  padding: 18px 28px;
  background: var(--ph-graphite);
  color: var(--ph-paper);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--ph-graphite);
  border-radius: var(--rad-1);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--elev-bright);
  transition:
    background var(--dur-flick) var(--ease-needle),
    transform var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-submit:hover {
    background: color-mix(in oklab, var(--ph-graphite) 80%, var(--ph-copper));
  }
}

[data-design="a"] .rf-submit:focus-visible {
  outline: 2px solid var(--ph-phosphor);
  outline-offset: 3px;
}

[data-design="a"] .rf-submit:active {
  transform: translateY(1px) scale(0.998);
  box-shadow: var(--elev-press);
}

[data-design="a"] .rf-submit__label {
  letter-spacing: 0.04em;
  font-weight: 500;
}

[data-design="a"] .rf-submit__arrow {
  font-size: 20px;
  color: var(--ph-copper);
}

/* Submit pulse — CTA-1 animated breath.
   Resting opacity:1 (hard contract). The sweep uses translateX only.
   The gradient itself provides the "invisible at edges" effect via
   transparent color stops — no opacity animation needed. */
[data-design="a"] .rf-submit__pulse {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  /* Gradient transparent at both ends gives a "appears from left" feel */
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ph-phosphor) 40%,
    var(--ph-phosphor) 60%,
    transparent 100%);
  filter: drop-shadow(0 0 6px var(--ph-phosphor));
  /* Resting state: off-screen left, opacity:1 */
  transform: translateX(-110%);
  opacity: 1;
  animation: phasor-cta-pulse var(--dur-breath, 4.6s) var(--ease-current) infinite;
}

@keyframes phasor-cta-pulse {
  /* transform-only sweep — no opacity changes */
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

[data-design="a"] .rf-qual__fineprint {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ph-muted);
  margin-top: 14px;
  line-height: 1.6;
}

[data-design="a"] .rf-qual__fineprint a {
  color: var(--ph-arc);
  text-decoration: none;
}

/* Confirmation state */
[data-design="a"] .rf-confirm {
  padding: clamp(28px, 4vw, 48px);
  background: var(--ph-paper);
  border: 1px solid var(--ph-line-paper);
  text-align: center;
}

[data-design="a"] .rf-confirm__plate {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-success);
  margin-bottom: 16px;
}

[data-design="a"] .rf-confirm__msg {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 28px);
  color: var(--ph-ink-dark);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

[data-design="a"] .rf-confirm__contact {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ph-muted);
}

[data-design="a"] .rf-confirm__phone {
  color: var(--ph-copper);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════
   E4 — Reassurance bar (below funnel; slow marquee + trust chips)
════════════════════════════════════════════════════════════ */
[data-design="a"] .rf-reassurance {
  background: var(--ph-graphite);
  border-top: 1px solid var(--ph-line);
  padding: var(--space-clamp-5) 0;
  overflow: hidden;
}

[data-design="a"] .rf-reassurance__track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  margin-bottom: var(--space-pin-3);
}

[data-design="a"] .rf-reassurance__track {
  display: flex;
  gap: var(--space-clamp-5);
  align-items: center;
  white-space: nowrap;
  animation: phasor-marquee 28s linear infinite;
}

@keyframes phasor-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

[data-design="a"] .rf-trust-chip {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-muted);
}

[data-design="a"] .rf-trust-sep {
  color: var(--ph-copper);
  font-size: 9px;
}

[data-design="a"] .rf-reassurance__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-pin-3) var(--space-clamp-5);
  padding: 0 clamp(20px, 4vw, 48px);
}

[data-design="a"] .rf-fact {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-muted);
}

[data-design="a"] .rf-fact__dot {
  color: var(--ph-copper);
  font-size: 8px;
}

/* ═══════════════════════════════════════════════════════════
   E3 — Ambient B: circuit topology (wellness pathway)
════════════════════════════════════════════════════════════ */
[data-design="a"] .rf-ambient-b {
  display: grid;
  gap: clamp(32px, 6vw, 96px);
  grid-template-columns: 1.2fr 1fr;
  padding: clamp(48px, 9vw, 128px) clamp(20px, 4vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--ph-line);
}

[data-design="a"] .rf-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-copper);
  margin: 0 0 var(--space-clamp-5) 0;
}

[data-design="a"] .rf-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ph-ink);
  margin: 0 0 var(--space-clamp-6) 0;
}

[data-design="a"] .rf-ambient-b__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ph-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-clamp-5) 0;
}

[data-design="a"] .rf-back-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-copper);
  text-decoration: none;
  border-bottom: 1px solid var(--ph-copper);
  padding-bottom: 4px;
  transition: color var(--dur-flick) var(--ease-needle);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-back-cta:hover {
    color: var(--ph-phosphor);
    border-bottom-color: var(--ph-phosphor);
  }
}

[data-design="a"] .rf-back-cta__arrow {
  font-size: 16px;
}

[data-design="a"] .rf-ambient-b__topo {
  align-self: center;
  justify-self: stretch;
  background: var(--ph-graphite-2);
  box-shadow: inset 0 0 0 1px var(--ph-line),
              inset 0 1px 0 0 color-mix(in oklab, #fff 8%, transparent);
  padding: 24px;
}

[data-design="a"] .rf-ambient-b__topo svg {
  width: 100%;
  height: auto;
  display: block;
}

[data-design="a"] .rf-topo__paths path {
  fill: none;
  stroke: var(--ph-line);
  stroke-width: 1.25;
  transition: stroke 200ms var(--ease-needle);
}

[data-design="a"] .rf-topo__paths path.is-live {
  stroke: var(--ph-phosphor);
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--ph-phosphor) 60%, transparent));
}

[data-design="a"] .rf-topo__nodes circle {
  fill: var(--ph-graphite-2);
  stroke: var(--ph-line);
  stroke-width: 1.5;
  transition: fill 200ms var(--ease-needle), stroke 200ms var(--ease-needle);
}

[data-design="a"] .rf-topo__nodes circle.is-live {
  fill: var(--ph-phosphor);
  stroke: var(--ph-phosphor);
  filter: drop-shadow(0 0 8px var(--ph-phosphor));
}

[data-design="a"] .rf-topo__labels text {
  font-family: var(--font-display);
  font-size: 9px;
  fill: var(--ph-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   Footer — minimal; phone, address, copyright 2026
════════════════════════════════════════════════════════════ */
[data-design="a"] .rf-footer {
  background: var(--ph-graphite);
  border-top: 1px solid var(--ph-line);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
}

[data-design="a"] .rf-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
}

[data-design="a"] .rf-footer__name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-ink);
  margin: 0 0 8px 0;
}

[data-design="a"] .rf-footer__addr,
[data-design="a"] .rf-footer__contact {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ph-muted);
  margin: 0 0 6px 0;
}

[data-design="a"] .rf-footer__contact a {
  color: var(--ph-arc);
  text-decoration: none;
}

[data-design="a"] .rf-footer__note {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-muted);
  margin: 0 0 8px 0;
}

[data-design="a"] .rf-footer__legal {
  font-family: var(--font-body);
  font-size: 12px;
  color: color-mix(in oklab, var(--ph-muted) 70%, transparent);
  line-height: 1.5;
  margin: 0 0 8px 0;
}

[data-design="a"] .rf-footer__copy {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--ph-muted) 60%, transparent);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   Scroll-parallax (TRIAD-2 — scroll-driven motion on hero inner)
   Applied via JS IntersectionObserver + scroll event
════════════════════════════════════════════════════════════ */
[data-design="a"] .rf-hero__inner {
  /* will-change:transform already set above; the scroll handler writes
     --scroll-y as a CSS variable and this drives the parallax */
}

/* ═══════════════════════════════════════════════════════════
   Responsive — no h-scroll at 320/390/768/1440
════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  [data-design="a"] .rf-ambient-b {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  [data-design="a"] .rf-qual__opts {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .rf-fields {
    grid-template-columns: 1fr;
  }
  [data-design="a"] .rf-footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  [data-design="a"] .rf-header__bar {
    padding: 14px 18px;
  }
  [data-design="a"] .rf-hero__value-prop {
    font-size: clamp(24px, 7vw, 38px);
  }
}

/* ═══════════════════════════════════════════════════════════
   Reduced motion fallbacks
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-trace__wave {
    animation: none;
  }
  [data-design="a"] .rf-hero__wave-path {
    animation: none;
    opacity: 0.3;
  }
  [data-design="a"] .rf-logo::after {
    animation: none;
    opacity: 0;
  }
  [data-design="a"] .phasor-pointer__counter-now {
    animation: none;
  }
  [data-design="a"] .phasor-pointer__chev {
    animation: none;
  }
  [data-design="a"] .phasor-pointer__bar-fill {
    transition: none;
  }
  [data-design="a"] .rf-qual__step.is-active {
    animation: none;
  }
  [data-design="a"] .rf-qual__step.is-active .rf-opt {
    animation: none;
  }
  [data-design="a"] .rf-submit__pulse {
    animation: none;
    transform: translateX(0);
    /* Keep opacity:1; the gradient already gives visual softness */
  }
  [data-design="a"] .rf-reassurance__track {
    animation: none;
  }
  [data-design="a"] .rf-topo__paths path,
  [data-design="a"] .rf-topo__nodes circle {
    transition: none;
  }
  [data-design="a"] .rf-drawer {
    transition: none;
  }
  [data-design="a"] .rf-opt {
    transition: none;
  }
}

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }