/* roam-chiropractic-gresham · design-a · wrap · premium-funnel · 2026
   ALL selectors scoped to [data-design="a"] — zero [data-design="a"] present.
   Token root: [data-design="a"] (REMAP from design.md's [data-design="a"]).
   Exposes --design-a-primary per slot contract.
   ─────────────────────────────────────────────────────────────────── */

/* ── 0. TOKEN ROOT ───────────────────────────────────────────────── */
[data-design="a"] {
  --canvas: #F7F4F0;
  --canvas-deep: #EDE7DD;
  --ink: #0A0913;
  --ink-soft: #3A364A;
  --muted: #7C7990;
  --rule: #1F1C2E;
  --magenta: #E5247A;
  --lime: #A8E834;
  --sun: #FFCF40;
  --ultramarine: #2B3DD8;
  --seal: #3FAE5C;
  --critical: #D03A2A;
  --gradient-1: linear-gradient(135deg, var(--magenta), var(--sun));
  --gradient-2: linear-gradient(135deg, var(--ultramarine), var(--lime));

  /* design-a slot alias */
  --design-a-primary: var(--magenta);

  --font-display: "Druk Wide Heavy", "Söhne Breit", "GT America Extended", sans-serif;
  --font-numeric: "Druk Condensed Super", "Cabinet Grotesk Variable", sans-serif;
  --font-body: "Inter", "Söhne", system-ui, sans-serif;
  --font-data: "Söhne Mono", "JetBrains Mono", ui-monospace, monospace;

  --space-tick: 4px;
  --space-em: 8px;
  --space-cue: 16px;
  --space-stack: 24px;
  --space-cascade: 48px;
  --space-flash: 80px;
  --space-pop: 128px;

  --dur-snap: 220ms;
  --dur-pop: 400ms;
  --dur-count: 1100ms;
  --dur-ambient: 30000ms;
  --ease-pop: cubic-bezier(.34, 1.6, .64, 1);
  --ease-count: cubic-bezier(.22, 1, .36, 1);
  --ease-morph: cubic-bezier(.45, .05, .55, .95);

  --radius-pop: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 0 var(--canvas-deep), 0 4px 0 1px var(--rule);
  --shadow-press: 0 1px 0 var(--canvas-deep), 0 1px 0 1px var(--rule);
  --shadow-pop: 0 8px 32px color-mix(in oklab, var(--magenta), transparent 78%);
  --shadow-focus: 0 0 0 3px var(--canvas), 0 0 0 6px var(--magenta);
}

@media (prefers-color-scheme: dark) {
  [data-design="a"] {
    --canvas: #0A0913;
    --canvas-deep: #13111C;
    --ink: #F7F4F0;
    --ink-soft: #C2BFCE;
    --muted: #7E7B92;
    --rule: #9A95B0;
    --magenta: #F44A95;
    --lime: #BDF248;
    --sun: #FFDA66;
    --ultramarine: #5063EE;
    --seal: #5EC57E;
    --critical: #E45848;
  }
}

[data-design="a"].dq-design *,
[data-design="a"].dq-design *::before,
[data-design="a"].dq-design *::after { box-sizing: border-box; }

/* ── MOBILE OVERFLOW GUARDS (scoped to .dq-design — never bare [data-design]) ── */
[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 BASE ────────────────────────────────────────────────── */
[data-design="a"].dq-design {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════
   E1 — ANIMATED MINIMALIST HEADER (Wrap Band — premium-funnel variant)
   Three things: logo · progress indicator · hamburger
   Animation: gradient-morph wash on hairline (≥28s — H-3)
   Logo shimmer: slow light-glint ~9-14s cycle (premium-funnel E1 contract)
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
}

[data-design="a"] .wrap-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cue);
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-cue) clamp(16px, 5vw, 40px);
}

/* Logo with slow shimmer (≥9s — quiet craft, not bold element) */
[data-design="a"] .wrap-logo {
  font-family: var(--font-display);
  font-size: clamp(16px, 3.5vw, 22px);
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
[data-design="a"] .wrap-logo::after {
  content: "";
  position: absolute;
  inset: 0 -100% 0 -100%;
  background: linear-gradient(105deg, transparent 35%, color-mix(in oklab, var(--sun), transparent 40%) 50%, transparent 65%);
  animation: wrap-logo-shimmer 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wrap-logo-shimmer {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  45% { opacity: 1; }
  55% { transform: translateX(200%); opacity: 0; }
}

/* Header progress indicator */
[data-design="a"] .wrap-header__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 200px;
}
[data-design="a"] .wrap-progress-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}
[data-design="a"] .wrap-progress-track {
  width: 100%;
  height: 3px;
  background: var(--canvas-deep);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
[data-design="a"] .wrap-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gradient-1);
  border-radius: var(--radius-pill);
  transform: scaleX(var(--fill-scale, 0.2));
  transform-origin: left center;
  transition: transform var(--dur-pop) var(--ease-count);
}

/* Gradient-morph wash on header hairline (H-3: ≥18s → 28s) */
[data-design="a"] .wrap-header__wash {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 3px;
  overflow: hidden;
}
[data-design="a"] .wrap-header__wash span { position: absolute; inset: 0; }
[data-design="a"] .wrap-header__wash-a {
  background: var(--gradient-1);
  animation: wrap-wash-a 28s var(--ease-morph) infinite;
}
[data-design="a"] .wrap-header__wash-b {
  background: var(--gradient-2);
  opacity: 0;
  animation: wrap-wash-b 28s var(--ease-morph) infinite;
}
@keyframes wrap-wash-a { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes wrap-wash-b { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Hamburger */
[data-design="a"] .wrap-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--canvas-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  cursor: pointer;
  flex: none;
}
[data-design="a"] .wrap-burger span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-snap) var(--ease-pop), opacity var(--dur-snap);
}
[data-design="a"] .wrap-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
[data-design="a"] .wrap-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-design="a"] .wrap-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer — phone CTA only (no nav links — premium-funnel) */
[data-design="a"] .wrap-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--canvas), transparent 6%);
}
[data-design="a"] .wrap-drawer__sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
  padding: clamp(64px, 16vw, 120px) clamp(20px, 8vw, 64px);
  max-width: 420px;
}
[data-design="a"] .wrap-drawer__phone {
  display: flex;
  flex-direction: column;
  gap: var(--space-tick);
  text-decoration: none;
  color: var(--ink);
}
[data-design="a"] .wrap-drawer__phone-label {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-design="a"] .wrap-drawer__phone-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px);
  letter-spacing: -.02em;
}
[data-design="a"] .wrap-drawer__note {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
}
[data-design="a"] .wrap-drawer__close {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  padding: 12px 24px;
  font: 14px var(--font-body);
  color: var(--muted);
  cursor: pointer;
  min-height: 44px;
  align-self: flex-start;
}
[data-design="a"] .wrap-drawer:not([hidden]) .wrap-drawer__sheet {
  animation: wrap-pop var(--dur-pop) var(--ease-pop) both;
}
@keyframes wrap-pop {
  from { opacity: 0; transform: translateY(-16px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — Step 1 of the funnel
   ONE ambient layer: gradient-morph blob (perceptible, sustained — hero.md v0.2.1)
   hero_role: funnel_step_1 → in-hero pointer allowed
   NO directional primitive in hero except pointer (funnel_step_1 override)
   All text opacity:1 at first paint — never reveal-gated
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-hero {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: clamp(64px, 10vw, 120px) clamp(16px, 5vw, 40px);
}

/* ONE ambient layer — gradient-morph blob (HERO-1: exactly one moving layer) */
[data-design="a"] .wrap-hero__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
[data-design="a"] .wrap-hero__blob-a,
[data-design="a"] .wrap-hero__blob-b {
  position: absolute;
  width: min(55vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  right: -8%;
  top: 10%;
}
[data-design="a"] .wrap-hero__blob-a {
  background: var(--gradient-1);
  animation: wrap-morph-a var(--dur-ambient) var(--ease-morph) infinite;
}
[data-design="a"] .wrap-hero__blob-b {
  background: var(--gradient-2);
  opacity: 0;
  animation: wrap-morph-b var(--dur-ambient) var(--ease-morph) infinite;
}
@keyframes wrap-morph-a {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.08); }
}
@keyframes wrap-morph-b {
  0%, 100% { opacity: 0; transform: scale(1.08); }
  50% { opacity: .35; transform: scale(1); }
}

[data-design="a"] .wrap-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* Hairline rule that draws in on load — permissible substrate motif */
[data-design="a"] .wrap-hero__rule {
  height: 2px;
  background: var(--gradient-1);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-stack);
  transform: scaleX(0);
  transform-origin: left center;
  animation: wrap-rule-draw 1s var(--ease-count) 0.2s both;
}
@keyframes wrap-rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

[data-design="a"] .wrap-hero__kicker {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-em);
  /* opacity:1 at first paint */
  opacity: 1;
}

/* Hero headline — opacity:1 at first paint (never reveal-gated) */
[data-design="a"] .wrap-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 var(--space-cue);
  /* opacity:1 at first paint */
  opacity: 1;
}

/* Reassurance line — opacity:1 at first paint */
[data-design="a"] .wrap-hero__reassurance {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 var(--space-cascade);
  line-height: 1.5;
  /* opacity:1 at first paint */
  opacity: 1;
}

/* Step 1 question */
[data-design="a"] .wrap-hero__step1 { width: 100%; }

[data-design="a"] .wrap-funnel__q {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 var(--space-stack);
  color: var(--ink);
  /* opacity:1 at first paint */
  opacity: 1;
}

[data-design="a"] .wrap-hero__chips {
  display: grid;
  gap: var(--space-cue);
}

/* Step counter in hero */
[data-design="a"] .wrap-hero__counter {
  margin: var(--space-stack) 0 0;
  opacity: 1;
}
[data-design="a"] .wrap-step-mono {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════
   E2 — WRAP CHIP (step-advance buttons = Element 2)
   Premium-funnel: chips ARE Element 2. Auto-advance on tap.
   Tap targets ≥56×56px (premium-funnel floor).
   Hover transforms gated behind @media(hover:hover) and (pointer:fine)
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cue);
  width: 100%;
  min-height: 56px;
  text-align: left;
  padding: var(--space-cue) var(--space-stack);
  cursor: pointer;
  background: var(--canvas-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  color: var(--ink);
  font: 500 16px/1.4 var(--font-body);
  box-shadow: var(--shadow-card);
  /* no transition:all — only specific props */
  transition: border-color var(--dur-snap), box-shadow var(--dur-snap);
}
[data-design="a"] .wrap-chip::after {
  content: "›";
  font-size: 22px;
  color: var(--muted);
  flex: none;
  transition: transform var(--dur-snap) var(--ease-pop), color var(--dur-snap);
}
/* Enter animation for chips (stagger, runs once on mount) */
[data-design="a"] .wrap-chip {
  animation: wrap-chip-in var(--dur-pop) var(--ease-pop) both;
  animation-delay: calc(var(--chip-i, 0) * 80ms);
}
@keyframes wrap-chip-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Hover / focus — gated for touch safety */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wrap-chip:hover {
    border-color: var(--lime);
    box-shadow: var(--shadow-pop);
  }
  [data-design="a"] .wrap-chip:hover::after {
    transform: translateX(4px);
    color: var(--ink);
  }
}
[data-design="a"] .wrap-chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--magenta);
}
[data-design="a"] .wrap-chip:active,
[data-design="a"] .wrap-chip.is-picked {
  box-shadow: var(--shadow-press);
  border-color: var(--magenta);
  transform: translateY(2px);
}

/* ══════════════════════════════════════════════════════════════════
   E6 — SIGNATURE POINTER
   Premium-funnel: rests directly above the funnel, draws eye into it.
   Bold, playful, personality-rich. Computed opacity > 0.5, height > 8px.
   NOT a button. Sits immediately before #funnel (no layout-prop animation).
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-em);
  padding: var(--space-cascade) var(--space-cue) var(--space-stack);
  /* opacity:1 — never hidden/reveal-gated */
  opacity: 1;
  min-height: 80px;
  position: relative;
}

[data-design="a"] .wrap-pointer__body {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The track line — scaleY draw-in then breath loop */
[data-design="a"] .wrap-pointer__track {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--gradient-1);
  border-radius: var(--radius-pill);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  animation: wrap-ptr-draw 0.6s var(--ease-count) 0.4s both,
             wrap-ptr-breath 3s ease-in-out 1.2s infinite;
}
@keyframes wrap-ptr-draw {
  from { transform: translateX(-50%) scaleY(0); }
  to { transform: translateX(-50%) scaleY(1); }
}
@keyframes wrap-ptr-breath {
  0%, 100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  50% { opacity: 0.55; transform: translateX(-50%) scaleY(0.85); }
}

/* The dot — arrives with overshoot pop, then gentle bob */
[data-design="a"] .wrap-pointer__dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, 0) scale(0.92);
  animation: wrap-ptr-dot-in 0.5s var(--ease-pop) 0.9s both,
             wrap-ptr-bob 3s ease-in-out 1.6s infinite;
}
@keyframes wrap-ptr-dot-in {
  from { opacity: 0; transform: translate(-50%, 0) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes wrap-ptr-bob {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, 6px) scale(1.08); }
}

/* Pulse ring — expands outward from dot */
[data-design="a"] .wrap-pointer__pulse {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--magenta);
  transform: translate(-50%, 0);
  animation: wrap-ptr-pulse 3s ease-out 2s infinite;
  pointer-events: none;
}
@keyframes wrap-ptr-pulse {
  0% { opacity: 0.7; transform: translate(-50%, 0) scale(1); }
  70% { opacity: 0; transform: translate(-50%, 0) scale(2.8); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(2.8); }
}

[data-design="a"] .wrap-pointer__label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
  animation: wrap-ptr-label-in 0.5s var(--ease-pop) 1s both;
}
@keyframes wrap-ptr-label-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   E5 — THE FUNNEL (Steps 2–5 + contact)
   Element 5: the page. Step transitions = wrap-step-in (Element 3).
   Progress bar animates on advance. No layout-prop transitions.
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-funnel {
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(16px, 5vw, 40px);
}

[data-design="a"] .wrap-funnel__kicker {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-cue);
  opacity: 1;
}

[data-design="a"] .wrap-funnel__progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--canvas-deep);
  overflow: hidden;
  margin: 0 0 var(--space-em);
}
[data-design="a"] .wrap-funnel__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gradient-1);
  border-radius: var(--radius-pill);
  transform: scaleX(var(--fill-scale, 0.2));
  transform-origin: left center;
  transition: transform var(--dur-pop) var(--ease-count);
}

[data-design="a"] .wrap-funnel__counter {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-stack);
  opacity: 1;
}

[data-design="a"] .wrap-funnel__view {
  display: grid;
  gap: var(--space-cue);
}

/* E3 — step-transition motion (Element 3 = inter-step animation) */
[data-design="a"] .wrap-funnel__view > * {
  animation: wrap-step-in var(--dur-pop) var(--ease-pop) both;
}
@keyframes wrap-step-in {
  from { opacity: 0; transform: translateX(20px) scale(.98); }
  to { opacity: 1; transform: none; }
}

[data-design="a"] .wrap-btn-back {
  margin-top: var(--space-stack);
  background: none;
  border: 0;
  color: var(--muted);
  font: 14px/1 var(--font-body);
  cursor: pointer;
  min-height: 44px;
  padding: 0;
}

/* Form fields (contact step) */
[data-design="a"] .wrap-field {
  display: grid;
  gap: var(--space-tick);
}
[data-design="a"] .wrap-field label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-design="a"] .wrap-field input {
  min-height: 52px;
  padding: 0 var(--space-cue);
  background: var(--canvas-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  color: var(--ink);
  font: 16px/1.4 var(--font-body);
  outline: none;
  transition: border-color var(--dur-snap);
}
[data-design="a"] .wrap-field input:focus-visible {
  border: 2px solid var(--magenta);
}

/* Submit button on contact step */
[data-design="a"] .wrap-funnel__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--space-stack);
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font: 18px/1 var(--font-display);
  color: var(--ink);
  background: var(--gradient-1);
  box-shadow: var(--shadow-card);
  width: 100%;
  transition: box-shadow var(--dur-snap);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wrap-funnel__submit:hover {
    background: var(--gradient-2);
    box-shadow: var(--shadow-pop);
  }
}
[data-design="a"] .wrap-funnel__submit:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Done state */
[data-design="a"] .wrap-funnel__done {
  animation: wrap-pop var(--dur-pop) var(--ease-pop) both;
  display: grid;
  gap: var(--space-cue);
  padding: var(--space-stack) 0;
}
[data-design="a"] .wrap-funnel__done-kicker {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seal);
}
[data-design="a"] .wrap-funnel__done-head {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}
[data-design="a"] .wrap-funnel__done-body {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   E2 (CTA variant) — wrap-cta (in done state and hero reassurance region)
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-em);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(15px, 3vw, 18px);
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  background: var(--gradient-1);
  box-shadow: var(--shadow-card);
  will-change: transform;
  animation: wrap-cta-breath 4.5s ease-in-out infinite;
  transition: box-shadow var(--dur-snap), transform var(--dur-snap) var(--ease-pop);
}
[data-design="a"] .wrap-cta__arrow {
  display: inline-flex;
  transition: transform var(--dur-snap) var(--ease-pop);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .wrap-cta:hover {
    background: var(--gradient-2);
    box-shadow: var(--shadow-pop);
    outline: none;
  }
  [data-design="a"] .wrap-cta:hover .wrap-cta__arrow {
    transform: translateX(4px);
  }
}
[data-design="a"] .wrap-cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-pop);
}
[data-design="a"] .wrap-cta:active {
  box-shadow: var(--shadow-press);
  transform: translateY(3px) scale(.99);
  background: var(--magenta);
}
@keyframes wrap-cta-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* ══════════════════════════════════════════════════════════════════
   E4 — REASSURANCE BAR / CARD CASCADE (below-funnel trust signals)
   Cards cascade in with stagger on viewport entry.
   Edge-pulse ambient loop (hue-rotate on ::before — not layout prop).
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-reel {
  padding: clamp(48px, 8vw, 96px) clamp(16px, 5vw, 40px);
  max-width: 900px;
  margin: 0 auto;
  background: var(--canvas-deep);
}

[data-design="a"] .wrap-reel__grid {
  display: grid;
  gap: var(--space-stack);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

[data-design="a"] .wrap-card {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pop);
  padding: var(--space-stack);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(40px) scale(.96);
}
[data-design="a"] .wrap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-1);
}
[data-design="a"] .wrap-card[data-grad="2"]::before { background: var(--gradient-2); }

[data-design="a"] .wrap-reel__grid.is-in .wrap-card {
  animation: wrap-cascade var(--dur-pop) var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}
[data-design="a"] .wrap-reel__grid.is-in .wrap-card::before {
  animation: wrap-edge 14s ease-in-out infinite;
}
[data-design="a"] .wrap-reel__grid.is-out .wrap-card::before {
  animation-play-state: paused;
}
@keyframes wrap-cascade {
  0% { opacity: 0; transform: translateY(40px) scale(.96); }
  70% { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes wrap-edge {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(22deg); }
}

[data-design="a"] .wrap-card__num {
  font-family: var(--font-numeric);
  font-size: clamp(36px, 8vw, 60px);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
[data-design="a"] .wrap-card__unit {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--space-em);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-footer {
  background: var(--canvas-deep);
  border-top: 1px solid var(--rule);
  padding: clamp(32px, 6vw, 64px) clamp(16px, 5vw, 40px);
}
[data-design="a"] .wrap-footer__inner {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-em);
}
[data-design="a"] .wrap-footer__name {
  font-family: var(--font-display);
  font-size: clamp(16px, 3vw, 20px);
  letter-spacing: -.02em;
  margin: 0;
}
[data-design="a"] .wrap-footer__meta {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
[data-design="a"] .wrap-footer__tel,
[data-design="a"] .wrap-footer__link {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-design="a"] .wrap-footer__disc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: var(--space-cue) 0 0;
}
[data-design="a"] .wrap-footer__copy {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL PARALLAX — TRIAD-2 genuine scroll-driven motion
   Hero ambient blob parallax on scroll (scroll-linked, not just fade-in).
   Uses JS scroll listener applying transform:translate (GPU-only).
   ══════════════════════════════════════════════════════════════════ */
[data-design="a"] .wrap-hero__blob-a,
[data-design="a"] .wrap-hero__blob-b {
  will-change: transform;
}
/* Blob parallax is driven by JS (sets --scroll-y CSS var → translateY) */
[data-design="a"] .wrap-hero__ambient[data-parallax] .wrap-hero__blob-a {
  transform: translateY(calc(var(--py, 0) * -0.3px)) scale(1);
}
[data-design="a"] .wrap-hero__ambient[data-parallax] .wrap-hero__blob-b {
  transform: translateY(calc(var(--py, 0) * -0.18px)) scale(1.08);
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACKS
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .wrap-header__wash-a,
  [data-design="a"] .wrap-header__wash-b { animation: none; opacity: .5; }
  [data-design="a"] .wrap-logo::after { animation: none; opacity: 0; }
  [data-design="a"] .wrap-hero__blob-a,
  [data-design="a"] .wrap-hero__blob-b { animation: none; opacity: .3; }
  [data-design="a"] .wrap-hero__rule { animation: none; transform: scaleX(1); }
  [data-design="a"] .wrap-pointer__track { animation: none; transform: translateX(-50%) scaleY(1); opacity: 1; }
  [data-design="a"] .wrap-pointer__dot { animation: none; transform: translate(-50%, 0) scale(1); opacity: 1; }
  [data-design="a"] .wrap-pointer__pulse { animation: none; opacity: 0; }
  [data-design="a"] .wrap-pointer__label { animation: none; opacity: 1; }
  [data-design="a"] .wrap-chip { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .wrap-funnel__view > * { animation: none; }
  [data-design="a"] .wrap-funnel__done { animation: none; }
  [data-design="a"] .wrap-funnel__fill { transition: none; }
  [data-design="a"] .wrap-progress-fill { transition: none; }
  [data-design="a"] .wrap-chip,
  [data-design="a"] .wrap-chip::after { transition: none; }
  [data-design="a"] .wrap-cta { animation: none; }
  [data-design="a"] .wrap-cta__arrow { transition: none; }
  [data-design="a"] .wrap-card { opacity: 1; transform: none; }
  [data-design="a"] .wrap-reel__grid.is-in .wrap-card { animation: none; }
  [data-design="a"] .wrap-reel__grid.is-in .wrap-card::before { animation: none; }
  [data-design="a"] .wrap-drawer:not([hidden]) .wrap-drawer__sheet { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   All scoped to .dq-design — never bare [data-design] descendants
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-design="a"].dq-design .wrap-header__bar { padding: var(--space-cue); }
  [data-design="a"].dq-design .wrap-hero { min-height: 100dvh; align-items: flex-start; padding-top: clamp(48px, 10vw, 80px); }
  [data-design="a"].dq-design .wrap-hero__blob-a,
  [data-design="a"].dq-design .wrap-hero__blob-b { width: min(80vw, 320px); right: -15%; top: -5%; }
  [data-design="a"].dq-design .wrap-funnel { padding: clamp(32px, 6vw, 64px) clamp(16px, 5vw, 24px); }
  [data-design="a"].dq-design .wrap-reel__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  [data-design="a"].dq-design .wrap-chip { padding: 14px 16px; }
  [data-design="a"].dq-design .wrap-header__progress { max-width: 120px; }
}
@media (max-width: 390px) {
  [data-design="a"].dq-design .wrap-reel__grid { grid-template-columns: 1fr; }
  [data-design="a"].dq-design .wrap-cta { padding: 14px 20px; width: 100%; justify-content: center; }
}
@media (max-width: 320px) {
  [data-design="a"].dq-design .wrap-logo { font-size: 15px; }
  [data-design="a"].dq-design .wrap-hero__headline { font-size: 26px; }
  [data-design="a"].dq-design .wrap-chip { padding: 12px 12px; font-size: 15px; }
  [data-design="a"].dq-design .wrap-funnel__q { font-size: 19px; }
  [data-design="a"].dq-design .wrap-header__progress { display: 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; }