/* ═══════════════════════════════════════════════════════════════
   BOXiT Fitness Studio — Design A (Wrap remapped to [data-design="a"])
   All selectors scoped under [data-design="a"].dq-design
   Zero [data-design="a"].dq-design selectors present
   ~12–16 color tokens exposed on [data-design="a"]
═══════════════════════════════════════════════════════════════ */

/* ── Token block ── */
[data-design="a"] {
  --canvas:        #0A0913;
  --canvas-deep:   #13111C;
  --ink:           #F7F4F0;
  --ink-soft:      #C2BFCE;
  --muted:         #7E7B92;
  --rule:          #2A2740;
  --magenta:       #F44A95;
  --lime:          #BDF248;
  --sun:           #FFDA66;
  --ultramarine:   #5063EE;
  --seal:          #5EC57E;
  --critical:      #E45848;
  --gradient-1:    linear-gradient(135deg, var(--magenta), var(--sun));
  --gradient-2:    linear-gradient(135deg, var(--ultramarine), var(--lime));

  /* Primary alias — exposed per contract */
  --design-a-primary: var(--magenta);

  --font-display: "Druk Wide Heavy","GT America Extended","Arial Black",sans-serif;
  --font-numeric: "Druk Condensed Super","Cabinet Grotesk Variable","Impact",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);

  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

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

/* ── Base resets ── */
[data-design="a"].dq-design h1,
[data-design="a"].dq-design h2,
[data-design="a"].dq-design p { margin: 0; }

[data-design="a"].dq-design button,
[data-design="a"].dq-design input,
[data-design="a"].dq-design select,
[data-design="a"].dq-design a { font-family: inherit; }

[data-design="a"].dq-design a { color: inherit; }

/* ═══════════════════════════════════════════════════════════════
   E1 — Animated Header (Wrap Band)
   Three things: logo + gradient-morph wash + hamburger
   H-1/2/3: no inline nav, no descriptor, no CTA in bar
   H-3: slow wash cycle (28s ≥ 18s)
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .a-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
}
[data-design="a"] .a-header__bar {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-cue);
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-cue) clamp(16px,5vw,40px);
}
/* Logo — slow shimmer: light-glint passes across every ~12s */
[data-design="a"] .a-logo {
  font-family: var(--font-display);
  font-size: clamp(18px,4vw,26px);
  letter-spacing: -.02em; color: var(--ink);
  text-decoration: none; position: relative; overflow: hidden;
  animation: a-logo-shimmer 12s linear infinite;
}
@keyframes a-logo-shimmer {
  0%   { filter: brightness(1); }
  45%  { filter: brightness(1); }
  50%  { filter: brightness(1.35) saturate(1.1); }
  55%  { filter: brightness(1); }
  100% { filter: brightness(1); }
}
/* Progress indicator (center) */
[data-design="a"] .a-progress {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-tick); flex: 1; min-width: 0;
}
[data-design="a"] .a-progress__label {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
[data-design="a"] .a-progress__bar {
  width: 100%; max-width: 160px; height: 3px;
  background: var(--canvas-deep); border-radius: var(--radius-pill); overflow: hidden;
}
[data-design="a"] .a-progress__fill {
  display: block; height: 100%; width: 100%;
  background: var(--gradient-1);
  /* MOTION GATE: animate transform:scaleX, not width */
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform var(--dur-pop) var(--ease-count);
}
/* Gradient-morph atmospheric wash at header base */
[data-design="a"] .a-header__wash {
  position: absolute; inset: auto 0 -1px 0; height: 3px; overflow: hidden; pointer-events: none;
}
[data-design="a"] .a-header__wash span { position: absolute; inset: 0; }
[data-design="a"] .a-header__wash-a {
  background: var(--gradient-1);
  animation: a-wash-a 28s var(--ease-morph) infinite;
}
[data-design="a"] .a-header__wash-b {
  background: var(--gradient-2); opacity: 0;
  animation: a-wash-b 28s var(--ease-morph) infinite;
}
@keyframes a-wash-a { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes a-wash-b { 0%,100% { opacity:0; } 50% { opacity:1; } }

/* Hamburger */
[data-design="a"] .a-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-shrink: 0;
}
[data-design="a"] .a-burger span {
  width: 20px; height: 2px; background: var(--ink);
  transition: transform var(--dur-snap) var(--ease-pop), opacity var(--dur-snap);
}
[data-design="a"] .a-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="a"] .a-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-design="a"] .a-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer — phone only */
[data-design="a"] .a-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in oklab,var(--canvas),transparent 6%);
}
[data-design="a"] .a-drawer__sheet {
  display: flex; flex-direction: column; gap: var(--space-stack);
  padding: clamp(48px,12vw,96px) clamp(20px,8vw,64px);
  max-width: 480px; position: relative;
}
[data-design="a"] .a-drawer__close {
  position: absolute; top: var(--space-cue); right: var(--space-cue);
  width: 44px; height: 44px; background: var(--canvas-deep);
  border: 1px solid var(--rule); border-radius: var(--radius-pop);
  color: var(--ink); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
[data-design="a"] .a-drawer__phone {
  font-family: var(--font-display);
  font-size: clamp(28px,8vw,44px); color: var(--magenta);
  text-decoration: none; letter-spacing: -.02em;
}
[data-design="a"] .a-drawer__sub {
  font-family: var(--font-data); font-size: 13px;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
}
[data-design="a"] .a-drawer:not([style*="display:none"]) .a-drawer__sheet {
  animation: a-pop var(--dur-pop) var(--ease-pop) both;
}
@keyframes a-pop {
  from { opacity: 0; transform: translateY(-16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — Step 1 (hero_role: funnel_step_1)
   HERO-1: one animated layer (hairline draw-in + ambient breath)
   HERO-2: no directional primitive
   HERO-3: visual-presence floor — button geometry + hairline substrate
   Text opacity:1 at first paint — NEVER opacity:0 on text
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .a-hero {
  min-height: 80vh; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: clamp(40px,10vw,96px) clamp(16px,5vw,40px);
  max-width: 1200px; margin: 0 auto; position: relative;
}
/* Single ambient layer: hairline rule draws in on load then pulses slowly */
[data-design="a"] .a-hero__rule-wrap {
  position: absolute; left: clamp(16px,5vw,40px); right: clamp(16px,5vw,40px);
  top: clamp(40px,10vw,96px); pointer-events: none; overflow: hidden;
}
[data-design="a"] .a-hero__rule {
  height: 2px; background: var(--gradient-1);
  transform: scaleX(0); transform-origin: left;
  animation: a-rule-in 1.2s var(--ease-count) 0.15s both,
             a-rule-breath 6s ease-in-out 1.35s infinite;
}
@keyframes a-rule-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes a-rule-breath {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}

[data-design="a"] .a-hero__inner {
  display: flex; flex-direction: column; gap: var(--space-stack);
  max-width: 640px; padding-top: var(--space-cascade);
  position: relative;
}
/* Value prop — opacity:1 at first paint (hardcoded, never gated) */
[data-design="a"] .a-hero__value {
  font-family: var(--font-display);
  font-size: clamp(26px,5.5vw,48px);
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink);
  opacity: 1;
}
/* Reassurance — opacity:1 at first paint */
[data-design="a"] .a-hero__reassurance {
  font-family: var(--font-data);
  font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  opacity: 1;
}
/* Step 1 question text */
[data-design="a"] .a-hero__q-text {
  font-family: var(--font-display);
  font-size: clamp(20px,4vw,28px);
  line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: var(--space-cue);
  opacity: 1;
}
/* Answer button chips — the visual mass of the hero */
[data-design="a"] .a-hero__chips {
  display: flex; flex-direction: column; gap: var(--space-cue);
  width: 100%;
}

/* ── Shared chip style (hero + funnel steps) ── */
[data-design="a"] .a-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: 1.5px solid var(--rule);
  border-radius: var(--radius-pop); color: var(--ink);
  font: 500 16px/1.4 var(--font-body);
  box-shadow: var(--shadow-card);
  /* opacity:1 at first paint — animation uses transform only, never opacity:0 */
  opacity: 1;
  animation: a-chip-in var(--dur-pop) var(--ease-pop) both;
  animation-delay: calc(var(--chip-i, 0) * 100ms);
}
/* Stagger via nth-child so no JS needed */
[data-design="a"] .a-chip:nth-child(1) { --chip-i: 0; }
[data-design="a"] .a-chip:nth-child(2) { --chip-i: 1; }
[data-design="a"] .a-chip:nth-child(3) { --chip-i: 2; }
[data-design="a"] .a-chip:nth-child(4) { --chip-i: 3; }
[data-design="a"] .a-chip:nth-child(5) { --chip-i: 4; }

/* MOTION GATE: entrance uses transform + clip-path only — opacity starts at 1,
   never at 0. clip-path slide from right; transform scale for overshoot feel. */
@keyframes a-chip-in {
  from { clip-path: inset(0 100% 0 0 round var(--radius-pop)); transform: translateX(12px) scale(.97); }
  60%  { clip-path: inset(0 0% 0 0 round var(--radius-pop)); transform: translateX(-2px) scale(1.01); }
  to   { clip-path: inset(0 0% 0 0 round var(--radius-pop)); transform: none; }
}
[data-design="a"] .a-chip::after {
  content: "›"; font-size: 22px; color: var(--muted); flex-shrink: 0;
}
/* Hover / focus only on pointer devices */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-chip:hover {
    border-color: var(--lime); box-shadow: var(--shadow-pop);
    transform: translateX(2px);
  }
  [data-design="a"] .a-chip:hover::after {
    transform: translateX(4px); color: var(--ink);
  }
  [data-design="a"] .a-chip:focus-visible {
    outline: none; box-shadow: var(--shadow-focus);
    border-color: var(--magenta);
  }
}
[data-design="a"] .a-chip.is-picked {
  transform: translateY(2px); box-shadow: var(--shadow-press);
  border-color: var(--magenta);
}
/* Chip transition only on non-layout props */
[data-design="a"] .a-chip {
  transition: border-color var(--dur-snap), box-shadow var(--dur-snap),
              transform var(--dur-snap) var(--ease-pop);
}

/* ═══════════════════════════════════════════════════════════════
   E6 — Signature Pointer (between hero and funnel)
   TRIAD-1: eye-handoff hero → funnel
   Visibly rendered: opacity:1, height ≥ 8px
   NOT a button (PTR-2)
   pointer_register: forward-progressive — above-form each step
   Above-form pointer CSS is cloned per step in JS
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .a-pointer {
  display: flex; justify-content: center; align-items: center;
  padding: var(--space-cue) 0 var(--space-em);
  opacity: 1; /* HARD: never opacity:0 */
  pointer-events: none;
}
[data-design="a"] .a-pointer__track {
  display: flex; align-items: center; justify-content: center;
  animation: a-ptr-bounce 2.4s var(--ease-pop) infinite;
}
[data-design="a"] .a-pointer__chevron {
  display: block; filter: drop-shadow(0 2px 8px color-mix(in oklab,var(--magenta),transparent 55%));
}
/* Pointer bounce: authored easing — not a generic bounce */
@keyframes a-ptr-bounce {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(6px) scale(1.05,0.97); }
  50%  { transform: translateY(10px) scale(0.97,1.04); }
  72%  { transform: translateY(5px) scale(1.02,0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   E5 — The Funnel
   Steps 2–5 live here; step 1 is in the hero
   Forward-step transitions (slide from right, ease-out)
   Step transitions ≤600ms
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .a-funnel {
  max-width: 640px; margin: 0 auto;
  padding: var(--space-cascade) clamp(16px,5vw,40px) var(--space-flash);
}
[data-design="a"] .a-funnel__step { width: 100%; }
[data-design="a"] .a-funnel__step-inner {
  display: flex; flex-direction: column; gap: var(--space-stack);
  animation: a-step-in var(--dur-pop) var(--ease-pop) both;
}
@keyframes a-step-in {
  from { opacity: 0; transform: translateX(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
[data-design="a"] .a-funnel__q {
  font-family: var(--font-display);
  font-size: clamp(20px,4vw,28px); line-height: 1.2;
  letter-spacing: -.01em; color: var(--ink); opacity: 1;
}
[data-design="a"] .a-funnel__chips {
  display: flex; flex-direction: column; gap: var(--space-cue);
}
/* Back button */
[data-design="a"] .a-funnel__back {
  margin-top: var(--space-stack);
  background: none; border: 0;
  color: var(--muted); font: 14px/1 var(--font-body);
  cursor: pointer; min-height: 44px;
}
/* Contact form fields */
[data-design="a"] .a-contact-form {
  display: flex; flex-direction: column; gap: var(--space-stack);
}
[data-design="a"] .a-field {
  display: grid; gap: var(--space-tick);
}
[data-design="a"] .a-field label {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
[data-design="a"] .a-field input,
[data-design="a"] .a-field select {
  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);
  -webkit-appearance: none; appearance: none;
}
[data-design="a"] .a-field input:focus-visible,
[data-design="a"] .a-field select:focus-visible {
  outline: none; border: 2px solid var(--magenta);
}
/* Submit button */
[data-design="a"] .a-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);
  animation: a-cta-breath 4.5s ease-in-out infinite;
  letter-spacing: -.01em; width: 100%;
}
@keyframes a-cta-breath {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.025); }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-submit:hover {
    background: var(--gradient-2); box-shadow: var(--shadow-pop);
  }
  [data-design="a"] .a-submit:focus-visible {
    outline: none; box-shadow: var(--shadow-focus),var(--shadow-pop);
  }
  [data-design="a"] .a-submit:active {
    box-shadow: var(--shadow-press); transform: translateY(3px) scale(.99);
    background: var(--magenta);
  }
}
/* Confirmation block — shown via display toggle, NEVER opacity:0 */
[data-design="a"] .a-funnel__done {
  display: flex; flex-direction: column; gap: var(--space-stack);
  animation: a-pop var(--dur-pop) var(--ease-pop) both;
}
[data-design="a"] .a-done__kicker {
  font-family: var(--font-data); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--seal);
}
[data-design="a"] .a-done__headline {
  font-family: var(--font-display);
  font-size: clamp(28px,6vw,48px); letter-spacing: -.02em;
  line-height: 1.1; color: var(--ink);
}
[data-design="a"] .a-done__body {
  font-size: 17px; line-height: 1.6; color: var(--ink-soft);
}
[data-design="a"] .a-done__call {
  display: inline-flex; align-items: center;
  min-height: 56px; padding: 0 var(--space-stack);
  background: var(--canvas-deep); border: 1px solid var(--rule);
  border-radius: var(--radius-pill); font: 18px/1 var(--font-display);
  color: var(--magenta); text-decoration: none;
  box-shadow: var(--shadow-card);
}

/* ═══════════════════════════════════════════════════════════════
   E3/E4 — Reassurance bar (card cascade + trust signals)
   Cards cascade in on viewport entry — Element 4 ambient
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .a-reassurance {
  padding: var(--space-flash) clamp(16px,5vw,40px);
  max-width: 1200px; margin: 0 auto;
}
[data-design="a"] .a-reel__grid {
  display: grid; gap: var(--space-stack);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  margin-bottom: var(--space-cascade);
}
[data-design="a"] .a-reel-card {
  position: relative; overflow: hidden;
  background: var(--canvas-deep); 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"] .a-reel-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 4px; background: var(--gradient-1);
}
[data-design="a"] .a-reel-card[data-grad="2"]::before { background: var(--gradient-2); }
[data-design="a"] .a-reel__grid.is-in .a-reel-card {
  animation: a-cascade var(--dur-pop) var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}
[data-design="a"] .a-reel__grid.is-in .a-reel-card::before {
  animation: a-edge 14s ease-in-out infinite;
}
@keyframes a-cascade {
  0%   { opacity: 0; transform: translateY(40px) scale(.96); }
  70%  { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes a-edge {
  0%,100% { filter: hue-rotate(0deg); }
  50%     { filter: hue-rotate(22deg); }
}
[data-design="a"] .a-reel-card__num {
  font-family: var(--font-numeric);
  font-size: clamp(40px,10vw,72px); line-height: .9;
  font-variant-numeric: tabular-nums;
}
[data-design="a"] .a-reel-card__unit {
  font-family: var(--font-data); font-size: 13px;
  color: var(--muted); margin-top: var(--space-em);
}
/* Trust bar */
[data-design="a"] .a-trust-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-em) var(--space-stack);
  align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
[data-design="a"] .a-trust-bar__sep { color: var(--rule); }

/* ═══════════════════════════════════════════════════════════════
   Footer
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .a-footer {
  border-top: 1px solid var(--rule);
  padding: var(--space-cascade) clamp(16px,5vw,40px);
  background: var(--canvas-deep);
}
[data-design="a"] .a-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--space-em);
}
[data-design="a"] .a-footer__name {
  font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em;
}
[data-design="a"] .a-footer__addr,
[data-design="a"] .a-footer__hours,
[data-design="a"] .a-footer__copy {
  font-family: var(--font-data); font-size: 12px;
  color: var(--muted); letter-spacing: .06em;
}
[data-design="a"] .a-footer__phone {
  font-family: var(--font-data); font-size: 14px;
  color: var(--magenta); letter-spacing: .06em;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   TRIAD-2 — Premium scroll motion (scroll-linked parallax)
   Hero rule-wrap parallax on scroll — CIN-1 scroll-linked shift
   Implemented via JS scroll listener (transform: translateY)
   CSS class hook:
═══════════════════════════════════════════════════════════════ */
[data-design="a"] .a-hero__rule-wrap {
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════
   Reduced-motion fallbacks
   Every signature animation has a fallback
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .a-header__wash-a,
  [data-design="a"] .a-header__wash-b { animation: none; opacity: .5; }
  [data-design="a"] .a-logo { animation: none; }
  [data-design="a"] .a-hero__rule { animation: none; transform: scaleX(1); opacity: .6; }
  [data-design="a"] .a-chip { animation: none; }
  [data-design="a"] .a-pointer__track { animation: none; }
  [data-design="a"] .a-funnel__step-inner { animation: none; }
  [data-design="a"] .a-funnel__done { animation: none; }
  [data-design="a"] .a-reel-card { opacity: 1; transform: none; }
  [data-design="a"] .a-reel__grid.is-in .a-reel-card { animation: none; }
  [data-design="a"] .a-reel__grid.is-in .a-reel-card::before { animation: none; }
  [data-design="a"] .a-progress__fill { transition: none; transform: scaleX(0.2); }
  [data-design="a"] .a-submit { animation: none; }
  [data-design="a"] .a-cta-breath { animation: none; }
  [data-design="a"] .a-drawer:not([style*="display:none"]) .a-drawer__sheet { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — no h-scroll at 320/390/768/1440
   Scoped to .dq-design as required by contract
═══════════════════════════════════════════════════════════════ */
[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;
}

@media (max-width: 560px) {
  [data-design="a"] .a-header__bar { padding: var(--space-cue); }
  [data-design="a"] .a-hero { min-height: 100svh; padding: var(--space-stack) var(--space-cue); }
  [data-design="a"] .a-hero__rule-wrap { left: var(--space-cue); right: var(--space-cue); }
  [data-design="a"] .a-chip { padding: 14px var(--space-cue); min-height: 56px; }
  [data-design="a"] .a-submit { font-size: 16px; }
  [data-design="a"] .a-progress { display: none; } /* too narrow — hide at 560 */
}
@media (max-width: 320px) {
  [data-design="a"] .a-logo { font-size: 17px; }
  [data-design="a"] .a-chip { padding: 12px var(--space-cue); }
  [data-design="a"] .a-reel__grid { grid-template-columns: 1fr; }
  [data-design="a"] .a-hero__value { font-size: 22px; }
}

/* 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; }