/* ================================================================
   OPINIONATED-COUNSEL × BEYER FAMILY DENTAL — design-a styles
   All selectors scoped to [data-design="a"].dq-design
   Palette: paper-white · near-black ink · sapphire stamp · warm accent
   12 color tokens + 9 spacing tokens (opinionated-counsel system)
   ================================================================ */

/* ── 1. DESIGN TOKENS ── */
[data-design="a"] {
  /* OC palette (remapped from opinionated-counsel) */
  --oc-canvas:       #F5F5F4;
  --oc-paper:        #FFFFFF;
  --oc-ink:          #171717;
  --oc-ink-2:        #3F3F3E;
  --oc-muted:        #7A7A78;
  --oc-rule:         #1A1A1A;
  --oc-soft:         #E5E4E1;
  --oc-stamp:        #1A47B8;
  --oc-stamp-deep:   #102E78;
  --oc-stamp-on:     #FFFFFF;
  --oc-warn:         #C2410C;
  --oc-warn-soft:    #FBE9DC;
  --oc-success:      #15803D;

  /* Typography */
  --oc-font-display: "Inter Display", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --oc-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --oc-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Spacing */
  --oc-space-hair:   2px;
  --oc-space-tick:   4px;
  --oc-space-bite:   8px;
  --oc-space-gap:    12px;
  --oc-space-stub:   16px;
  --oc-space-block:  24px;
  --oc-space-tile:   32px;
  --oc-space-bay:    48px;
  --oc-space-deck:   80px;

  /* Motion grammar (opinionated-counsel) */
  --oc-dur-snap:    120ms;
  --oc-dur-stamp:   220ms;
  --oc-dur-settle:  360ms;
  --oc-dur-breathe: 4400ms;
  --oc-dur-scrub:   22000ms;

  --oc-ease-decide:  cubic-bezier(.22,.61,.36,1);
  --oc-ease-stamp:   cubic-bezier(.34,1.42,.64,1);
  --oc-ease-bite:    cubic-bezier(.55,.06,.68,.19);
  --oc-ease-scrub:   cubic-bezier(.65,.05,.35,.95);

  /* Radius */
  --oc-radius-0:     0;
  --oc-radius-sm:    4px;
  --oc-radius-md:    8px;
  --oc-radius-lg:    12px;
  --oc-radius-stamp: 2px;

  /* Elevation */
  --oc-elev-flat:  none;
  --oc-elev-rule:  inset 0 0 0 2px var(--oc-rule);
  --oc-elev-stamp: 0 4px 0 0 var(--oc-rule);

  /* Design primary (read by Reforge Bar) */
  --design-a-primary: #1A47B8;

  /* Page */
  background: var(--oc-canvas);
  color: var(--oc-ink);
  font-family: var(--oc-font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* ================================================================
   ELEMENT 1 — Animated minimalist header
   Logo + ONE atmospheric sweep rule + hamburger (H-1/2/3)
   Premium-funnel addition: progress indicator in header
   ================================================================ */
[data-design="a"] .rf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--oc-canvas);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="a"] .rf-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--oc-space-stub) clamp(20px, 4vw, 48px);
  gap: var(--oc-space-stub);
  box-sizing: border-box;
  max-width: 100%;
}

/* Logo — slow shimmer (~11s, quiet craft detail per E1 contract) */
[data-design="a"] .rf-logo {
  display: inline-flex;
  gap: var(--oc-space-tick);
  align-items: baseline;
  color: var(--oc-ink);
  text-decoration: none;
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

[data-design="a"] .rf-logo__bracket {
  color: var(--oc-stamp);
  font-weight: 400;
}

/* Shimmer: light-glint across wordmark, ~11s cycle */
[data-design="a"] .rf-logo::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26,71,184,0.18) 50%,
    transparent 100%
  );
  animation: oc-logo-shimmer 11s var(--oc-ease-scrub) infinite;
  pointer-events: none;
}

@keyframes oc-logo-shimmer {
  0%   { transform: translateX(0);    opacity: 0; }
  8%   { opacity: 1; }
  18%  { transform: translateX(400%); opacity: 0; }
  100% { transform: translateX(400%); opacity: 0; }
}

/* Progress indicator — premium-funnel header contract */
[data-design="a"] .rf-header__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
  max-width: 240px;
  margin: 0 auto;
}

[data-design="a"] .rf-header__step-label {
  font-family: var(--oc-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oc-muted);
  white-space: nowrap;
}

[data-design="a"] .rf-header__bar-track {
  flex: 1;
  height: 2px;
  background: var(--oc-soft);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

[data-design="a"] .rf-header__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--oc-stamp);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform var(--oc-dur-settle) var(--oc-ease-decide);
}

/* Hamburger */
[data-design="a"] .rf-hamburger {
  appearance: none;
  background: transparent;
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-sm);
  padding: 10px 12px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition:
    background var(--oc-dur-snap) var(--oc-ease-decide),
    transform var(--oc-dur-snap) var(--oc-ease-bite);
  flex-shrink: 0;
}

[data-design="a"] .rf-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--oc-ink);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-hamburger:hover {
    background: var(--oc-soft);
  }
}

[data-design="a"] .rf-hamburger:active {
  transform: translateY(1px);
}

[data-design="a"] .rf-hamburger[aria-expanded="true"] {
  background: var(--oc-ink);
  border-color: var(--oc-ink);
}

[data-design="a"] .rf-hamburger[aria-expanded="true"] .rf-hamburger__bar {
  background: var(--oc-canvas);
}

/* Atmospheric sweep rule — ONE ambient layer in header (H-3: 22s cycle ≥18s) */
[data-design="a"] .rf-header__rule {
  position: relative;
  height: 2px;
  background: var(--oc-soft);
  overflow: hidden;
}

[data-design="a"] .rf-header__regmark {
  position: absolute;
  top: 0; left: -8%;
  width: 18%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--oc-ink) 22%,
    var(--oc-stamp) 60%,
    var(--oc-stamp) 78%,
    transparent 100%
  );
  animation: oc-header-scrub var(--oc-dur-scrub) var(--oc-ease-scrub) infinite;
  will-change: transform;
}

@keyframes oc-header-scrub {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(620%); }
}

/* ── Drawer (phone-only — no site nav) ── */
[data-design="a"] .rf-drawer {
  position: fixed;
  inset: 0;
  background: var(--oc-canvas);
  z-index: 60;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--oc-dur-settle) var(--oc-ease-decide);
}

[data-design="a"] .rf-drawer[hidden] {
  display: none;
}

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

[data-design="a"] .rf-drawer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--oc-space-stub) clamp(20px, 4vw, 48px);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="a"] .rf-drawer__brand {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.015em;
}

[data-design="a"] .rf-drawer__close {
  background: transparent;
  border: 0;
  font-size: 36px;
  line-height: 1;
  color: var(--oc-ink);
  cursor: pointer;
  padding: 0 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-design="a"] .rf-drawer__body {
  display: flex;
  flex-direction: column;
  padding: var(--oc-space-bay) clamp(20px, 4vw, 48px);
  gap: var(--oc-space-block);
}

[data-design="a"] .rf-drawer__phone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}

[data-design="a"] .rf-drawer__phone-label {
  font-family: var(--oc-font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--oc-muted);
}

[data-design="a"] .rf-drawer__phone-num {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.02em;
  color: var(--oc-ink);
}

[data-design="a"] .rf-drawer__addr {
  font-family: var(--oc-font-mono);
  font-size: 14px;
  color: var(--oc-ink-2);
  line-height: 1.6;
  margin: 0;
}

/* ================================================================
   HERO — Step 1 (hero_role: funnel_step_1)
   data-mf-role="hero". Value prop + reassurance + hairline substrate.
   Text opacity:1 at first paint (never gated).
   ONE animated layer: hairline draw-in → sustained ambient breath (HERO-1, v0.2.1)
   No directional primitive (HERO-2). No photography (trade FORBID-LIST).
   ================================================================ */
[data-design="a"] .rf-hero {
  padding: clamp(48px, 9vh, 80px) clamp(20px, 4vw, 48px) clamp(32px, 5vh, 48px);
  background: var(--oc-canvas);
  position: relative;
}

[data-design="a"] .rf-hero__inner {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-gap);
}

/* ONE substrate layer: hairline draw-in then slow breath oscillation (HERO-1, v0.2.1) */
[data-design="a"] .rf-hero__rule {
  display: block;
  position: relative;
  height: 2px;
  background: var(--oc-soft);
  margin-bottom: var(--oc-space-stub);
  max-width: 480px;
  overflow: visible;
}

[data-design="a"] .rf-hero__rule-fill {
  position: absolute;
  inset: 0;
  background: var(--oc-stamp);
  transform-origin: left;
  /* Draw-in: scaleX 0→1 (GPU transform, not width) */
  animation:
    oc-hero-drawin 1.2s var(--oc-ease-decide) both,
    oc-hero-breathe 5s 1.3s var(--oc-ease-scrub) infinite;
}

@keyframes oc-hero-drawin {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Sustained ambient: slow opacity + scaleX oscillation (perceptible, not frozen) */
@keyframes oc-hero-breathe {
  0%, 100% { opacity: 1;    transform: scaleX(1);    }
  42%      { opacity: 0.28; transform: scaleX(0.78); }
  58%      { opacity: 0.28; transform: scaleX(0.78); }
}

[data-design="a"] .rf-hero__value-prop {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--oc-ink);
  margin: 0;
  opacity: 1; /* GATE: hero text visible at first paint */
  max-width: 22ch;
}

[data-design="a"] .rf-hero__reassurance {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oc-muted);
  margin: 0;
  opacity: 1; /* GATE: hero text visible at first paint */
}

/* ================================================================
   ELEMENT 6 — POINTER (data-mf-role="pointer")
   Sits DIRECTLY before #funnel (0 siblings between).
   Bold, playful signature element — bold chevron pulse, counter flip,
   progress bar scaleX. Opacity:1 at all times; wrapper height ≥8px.
   premium-funnel: forward-progressive, above-form.
   ================================================================ */
[data-design="a"] [data-mf-role="pointer"] {
  /* GATE: opacity must be >0.5, height >8px */
  opacity: 1;
  display: block;
  padding: var(--oc-space-stub) clamp(20px, 4vw, 48px);
  background: var(--oc-canvas);
  border-bottom: 2px solid var(--oc-rule);
}

[data-design="a"] .rf-pointer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  min-height: 44px; /* GATE: bounding-box height > 8px — well clear */
  font-variant-numeric: tabular-nums;
}

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

[data-design="a"] .rf-pointer__counter-now {
  display: inline-block;
  min-width: 1ch;
  color: var(--oc-stamp);
  font-weight: 700;
  animation: oc-pointer-tick 320ms var(--oc-ease-decide) both;
}

[data-design="a"] .rf-pointer__bar {
  position: relative;
  flex: 1;
  height: 3px;
  min-height: 12px; /* visible track within taller wrapper */
  background: var(--oc-soft);
  border-radius: 1px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

[data-design="a"] .rf-pointer__bar-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0.20);
  transform-origin: left;
  background: var(--oc-stamp);
  opacity: 1;
  transition: transform 480ms var(--oc-ease-decide);
}

/* Bold, playful chevron — the signature pointer personality moment */
[data-design="a"] .rf-pointer__chev {
  font-family: var(--oc-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--oc-stamp);
  /* Deliberate authored motion: anticipation + follow-through, 4s cycle */
  animation: oc-pointer-chev 4s var(--oc-ease-stamp) infinite;
  display: inline-block;
}

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

@keyframes oc-pointer-chev {
  0%    { transform: translateX(0)   scale(1);    opacity: 0.55; }
  30%   { transform: translateX(-3px) scale(0.92); opacity: 0.4;  }
  55%   { transform: translateX(6px)  scale(1.12); opacity: 1.0;  }
  75%   { transform: translateX(4px)  scale(1.06); opacity: 0.9;  }
  100%  { transform: translateX(0)   scale(1);    opacity: 0.55; }
}

/* ================================================================
   ELEMENT 5 — THE FUNNEL (#funnel, data-mf-role="funnel")
   Steps 1-5 + confirmation. Auto-advances on tap.
   premium-funnel: the funnel IS the page.
   ================================================================ */
[data-design="a"] .rf-interactive {
  background: var(--oc-canvas);
  padding: 0 clamp(20px, 4vw, 48px) clamp(48px, 8vh, 80px);
}

/* Step panels */
[data-design="a"] .rf-funnel__panel {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

[data-design="a"] .rf-funnel__panel[hidden] {
  display: none;
}

[data-design="a"] .rf-funnel__panel.is-active {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-block);
  padding-top: var(--oc-space-bay);
  max-width: 640px;
  animation: oc-step-in var(--oc-dur-settle) var(--oc-ease-stamp) both;
}

@keyframes oc-step-in {
  0%   { opacity: 0; transform: translateX(20px) scale(0.98); }
  60%  { opacity: 1; transform: translateX(0) scale(1.003); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

[data-design="a"] .rf-funnel__legend {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.5vw, 32px);
  letter-spacing: -0.020em;
  line-height: 1.1;
  color: var(--oc-ink);
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 28ch;
}

/* ================================================================
   ELEMENT 2 — Answer buttons (step-advance, auto-advance on tap)
   60ms snap press. Hover chevron. Selected stamp. ≥56px tap target.
   ================================================================ */
[data-design="a"] .rf-funnel__opts {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-bite);
}

[data-design="a"] .rf-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc-space-gap);
  min-height: 56px; /* ≥56px tap target (premium-funnel floor) */
  padding: 16px var(--oc-space-stub);
  background: var(--oc-paper);
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--oc-font-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--oc-ink);
  box-shadow: var(--oc-elev-stamp);
  transform: translateY(0);
  transition:
    border-color var(--oc-dur-snap) var(--oc-ease-decide),
    background var(--oc-dur-snap) var(--oc-ease-decide),
    box-shadow var(--oc-dur-snap) var(--oc-ease-decide),
    transform var(--oc-dur-snap) var(--oc-ease-decide);
  position: relative;
  will-change: transform;
}

/* Selected: stamp-into-shadow press */
[data-design="a"] .rf-opt.is-selected {
  background: var(--oc-stamp);
  color: var(--oc-stamp-on);
  border-color: var(--oc-stamp);
  box-shadow: 0 0 0 0 var(--oc-rule);
  transform: translateY(4px);
}

[data-design="a"] .rf-opt__label {
  flex: 1;
  min-width: 0;
}

[data-design="a"] .rf-opt__chev {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--oc-muted);
  flex-shrink: 0;
  transition: transform var(--oc-dur-snap) var(--oc-ease-decide),
              color var(--oc-dur-snap) var(--oc-ease-decide);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-opt:hover {
    border-color: var(--oc-stamp);
    box-shadow: 0 6px 0 0 var(--oc-rule);
    transform: translateY(-2px);
  }
  [data-design="a"] .rf-opt:hover .rf-opt__chev {
    transform: translateX(4px);
    color: var(--oc-stamp);
  }
}

[data-design="a"] .rf-opt:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--oc-rule);
  transition-duration: 60ms;
  transition-timing-function: var(--oc-ease-bite);
}

/* Back button */
[data-design="a"] .rf-funnel__back-row {
  display: flex;
  align-items: center;
  padding-top: var(--oc-space-tick);
}

[data-design="a"] .rf-funnel__prev {
  background: transparent;
  color: var(--oc-muted);
  border: 2px solid var(--oc-soft);
  border-radius: var(--oc-radius-md);
  padding: 10px 18px;
  font-family: var(--oc-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--oc-dur-snap) var(--oc-ease-decide),
              color var(--oc-dur-snap) var(--oc-ease-decide);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-funnel__prev:hover {
    border-color: var(--oc-rule);
    color: var(--oc-ink);
  }
}

/* ── Contact step fields ── */
[data-design="a"] .rf-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-block);
}

[data-design="a"] .rf-funnel__fields {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-block);
}

[data-design="a"] .rf-funnel__field {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-bite);
  border: 0;
  padding: 0;
  margin: 0;
}

[data-design="a"] .rf-funnel__field-label {
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--oc-ink);
}

[data-design="a"] .rf-funnel__field input {
  font-family: var(--oc-font-body);
  font-size: 17px;
  color: var(--oc-ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--oc-rule);
  padding: 8px 0;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--oc-dur-snap) var(--oc-ease-decide);
}

[data-design="a"] .rf-funnel__field input:focus {
  border-bottom-color: var(--oc-stamp);
  border-bottom-width: 3px;
}

[data-design="a"] .rf-funnel__radio-row {
  display: flex;
  gap: var(--oc-space-gap);
  flex-wrap: wrap;
  margin-top: var(--oc-space-tick);
}

[data-design="a"] .rf-funnel__radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--oc-font-mono);
  font-size: 13px;
  color: var(--oc-ink-2);
  cursor: pointer;
  min-height: 44px;
}

[data-design="a"] .rf-funnel__radio input[type="radio"] {
  accent-color: var(--oc-stamp);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Actions row */
[data-design="a"] .rf-funnel__actions {
  display: flex;
  gap: var(--oc-space-gap);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--oc-space-tick);
}

/* Submit — LOUDEST button on page (earned its volume through funnel) */
[data-design="a"] .rf-funnel__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--oc-space-gap);
  padding: 18px 26px;
  background: var(--oc-stamp);
  color: var(--oc-stamp-on);
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-md);
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--oc-elev-stamp);
  transform: translateY(0);
  transition:
    transform var(--oc-dur-snap) var(--oc-ease-decide),
    box-shadow var(--oc-dur-snap) var(--oc-ease-decide),
    background var(--oc-dur-snap) var(--oc-ease-decide);
  animation: oc-cta-breath var(--oc-dur-breathe) var(--oc-ease-decide) infinite;
  min-height: 56px;
}

[data-design="a"] .rf-funnel__submit-label { flex: 1; }

[data-design="a"] .rf-funnel__submit-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: var(--oc-radius-stamp);
  font-family: var(--oc-font-mono);
  font-size: 13px;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-funnel__submit:hover {
    background: var(--oc-stamp-deep);
    box-shadow: 0 6px 0 0 var(--oc-rule);
    transform: translateY(-2px);
  }
}

[data-design="a"] .rf-funnel__submit:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--oc-rule);
  transition-duration: var(--oc-dur-snap);
  transition-timing-function: var(--oc-ease-bite);
}

[data-design="a"] .rf-funnel__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,71,184,0.32), var(--oc-elev-stamp);
}

@keyframes oc-cta-breath {
  0%, 100% { box-shadow: var(--oc-elev-stamp), 0 0 0 0 rgba(26,71,184,0.18); }
  50%      { box-shadow: var(--oc-elev-stamp), 0 0 0 8px rgba(26,71,184,0.12); }
}

/* ── Confirmation ── */
[data-design="a"] .rf-funnel__confirm.is-active {
  gap: var(--oc-space-block);
}

[data-design="a"] .rf-funnel__receipt {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-block);
}

[data-design="a"] .rf-funnel__receipt-id {
  display: inline-block;
  font-family: var(--oc-font-mono);
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--oc-stamp-on);
  letter-spacing: 0.06em;
  padding: 12px 20px;
  border: 2px solid var(--oc-stamp);
  border-radius: var(--oc-radius-stamp);
  background: var(--oc-stamp);
  width: max-content;
  max-width: 100%;
}

[data-design="a"] .rf-funnel__receipt-body {
  font-family: var(--oc-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--oc-ink-2);
  margin: 0;
  max-width: 56ch;
}

[data-design="a"] .rf-funnel__call-now {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--oc-paper);
  border: 2px solid var(--oc-rule);
  border-radius: var(--oc-radius-md);
  color: var(--oc-ink);
  text-decoration: none;
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 17px;
  box-shadow: var(--oc-elev-stamp);
  transition: transform var(--oc-dur-snap) var(--oc-ease-decide),
              box-shadow var(--oc-dur-snap) var(--oc-ease-decide);
  width: max-content;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-funnel__call-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 var(--oc-rule);
  }
}

/* ================================================================
   ELEMENT 3 — Ambient A: services snap-grid (below funnel)
   ================================================================ */
[data-design="a"] .rf-ambient-a {
  padding: var(--oc-space-deck) clamp(20px, 4vw, 48px);
  border-top: 2px solid var(--oc-rule);
  background: var(--oc-canvas);
}

[data-design="a"] .rf-ambient-a__head {
  display: flex;
  flex-direction: column;
  gap: var(--oc-space-bite);
  margin-bottom: var(--oc-space-bay);
  max-width: 720px;
}

[data-design="a"] .rf-ambient-a__kicker {
  font-family: var(--oc-font-mono);
  font-size: 12px;
  color: var(--oc-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

[data-design="a"] .rf-ambient-a h2 {
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin: 0;
  color: var(--oc-ink);
}

[data-design="a"] .rf-ambient-a__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--oc-rule);
}

[data-design="a"] .rf-area {
  display: grid;
  grid-template-columns: 80px 1.3fr 2fr 160px;
  align-items: center;
  gap: var(--oc-space-block);
  padding: var(--oc-space-stub) 4px;
  border-bottom: 2px solid var(--oc-rule);
  transition: background var(--oc-dur-snap) var(--oc-ease-decide);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .rf-area:hover {
    background: var(--oc-paper);
  }
}

[data-design="a"] .rf-area__id {
  font-family: var(--oc-font-mono);
  font-size: 12px;
  color: var(--oc-muted);
  letter-spacing: 0.06em;
}

[data-design="a"] .rf-area__name {
  font-family: var(--oc-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--oc-ink);
}

[data-design="a"] .rf-area__summary {
  font-family: var(--oc-font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--oc-ink-2);
}

[data-design="a"] .rf-area__bar {
  position: relative;
  height: 3px;
  background: var(--oc-soft);
  overflow: hidden;
}

[data-design="a"] .rf-area__fill {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--oc-stamp);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--oc-ease-decide);
}

[data-design="a"] .rf-area.is-revealed .rf-area__fill {
  transform: scaleX(var(--rf-fill-scale, 0.7));
}

@media (max-width: 720px) {
  [data-design="a"] .rf-area {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "id name" ". summary" ". bar";
    gap: 4px 14px;
    padding: 14px 0;
  }
  [data-design="a"] .rf-area__id      { grid-area: id; }
  [data-design="a"] .rf-area__name    { grid-area: name; }
  [data-design="a"] .rf-area__summary { grid-area: summary; font-size: 12px; }
  [data-design="a"] .rf-area__bar     { grid-area: bar; margin-top: 6px; }
}

/* ================================================================
   ELEMENT 4 — Ambient B: status typewriter (reassurance)
   ================================================================ */
[data-design="a"] .rf-ambient-b {
  padding: var(--oc-space-deck) clamp(20px, 4vw, 48px);
  border-top: 2px solid var(--oc-rule);
  border-bottom: 2px solid var(--oc-rule);
  background: var(--oc-paper);
}

[data-design="a"] .rf-status {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--oc-font-mono);
  font-size: clamp(17px, 2.5vw, 28px);
  line-height: 1.3;
  color: var(--oc-ink);
}

[data-design="a"] .rf-status__prompt {
  color: var(--oc-stamp);
  flex-shrink: 0;
}

[data-design="a"] .rf-status__line {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

[data-design="a"] .rf-status__cursor {
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  background: var(--oc-ink);
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: oc-cursor-blink 1.1s steps(1, end) infinite;
}

[data-design="a"] .rf-status__lane {
  font-family: var(--oc-font-mono);
  font-size: 11px;
  color: var(--oc-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes oc-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@media (max-width: 560px) {
  [data-design="a"] .rf-status__lane { display: none; }
}

/* ================================================================
   TRUST SIGNALS
   ================================================================ */
[data-design="a"] .rf-trust {
  padding: clamp(40px, 6vh, 64px) clamp(20px, 4vw, 48px);
  border-top: 2px solid var(--oc-rule);
  background: var(--oc-canvas);
}

[data-design="a"] .rf-trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--oc-space-block);
}

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

[data-design="a"] .rf-trust__label {
  font-family: var(--oc-font-mono);
  font-size: 11px;
  color: var(--oc-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

[data-design="a"] .rf-trust__value {
  font-family: var(--oc-font-body);
  font-size: 15px;
  color: var(--oc-ink);
}

[data-design="a"] .rf-trust__value a {
  color: var(--oc-ink);
  text-decoration: underline;
  text-decoration-color: var(--oc-stamp);
  text-underline-offset: 3px;
}

/* ================================================================
   FOOTER
   ================================================================ */
[data-design="a"] .rf-footer {
  padding: clamp(32px, 5vh, 56px) clamp(20px, 4vw, 48px);
  border-top: 2px solid var(--oc-rule);
  background: var(--oc-paper);
}

[data-design="a"] .rf-footer__inner {
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);
}

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

[data-design="a"] .rf-footer__name {
  display: block;
  font-family: var(--oc-font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--oc-ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}

[data-design="a"] .rf-footer__addr {
  display: block;
  font-family: var(--oc-font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--oc-muted);
}

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

[data-design="a"] .rf-footer__tel,
[data-design="a"] .rf-footer__email {
  font-family: var(--oc-font-mono);
  font-size: 13px;
  color: var(--oc-muted);
  text-decoration: underline;
  text-decoration-color: var(--oc-stamp);
  text-underline-offset: 3px;
}

[data-design="a"] .rf-footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--oc-soft);
  padding-top: var(--oc-space-block);
  margin-top: var(--oc-space-bite);
}

[data-design="a"] .rf-footer__legal p {
  font-family: var(--oc-font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--oc-muted);
  margin: 0 0 4px;
}

/* ================================================================
   VISUALLY HIDDEN UTILITY
   ================================================================ */
[data-design="a"] .rf-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   SCROLL-DRIVEN MOTION — TRIAD-2 (premium scroll effect)
   CSS scroll-driven animation: sections translate + fade in on scroll.
   Genuine scroll-linked motion (not just a fade-in-on-scroll observer).
   Fallback: graceful for older browsers (no animation).
   ================================================================ */
@supports (animation-timeline: scroll()) {
  [data-design="a"] .rf-ambient-a,
  [data-design="a"] .rf-ambient-b,
  [data-design="a"] .rf-trust {
    animation: oc-scroll-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }

  @keyframes oc-scroll-rise {
    from { opacity: 0.4; transform: translateY(32px); }
    to   { opacity: 1;   transform: translateY(0);    }
  }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .rf-header__regmark              { animation: none; transform: translateX(50%); opacity: 1; }
  [data-design="a"] .rf-logo::after                  { animation: none; }
  [data-design="a"] .rf-hero__rule-fill               { animation: none; transform: scaleX(1); opacity: 1; }
  [data-design="a"] .rf-funnel__panel.is-active       { animation: none; }
  [data-design="a"] .rf-pointer__counter-now          { animation: none; }
  [data-design="a"] .rf-pointer__chev                 { animation: none; }
  [data-design="a"] .rf-pointer__bar-fill             { transition: none; }
  [data-design="a"] .rf-funnel__submit                { animation: none; }
  [data-design="a"] .rf-area__fill                    { transition: none; transform: scaleX(1); }
  [data-design="a"] .rf-status__cursor                { animation: none; opacity: 1; }
  [data-design="a"] .rf-drawer                        { transition: none; }
}

/* ================================================================
   MOBILE OVERFLOW GUARD (bottom of file — scoped to .dq-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;
}

/* Hero/CTA text visibility floor — ensures opacity:1 survives injection */
[data-design="a"] [data-mf-role="hero"] :is(h1, h2, h3, p, .rf-hero__value-prop, .rf-hero__reassurance),
[data-design="a"] [data-mf-role="cta"] {
  opacity: 1 !important;
}

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