/* ═══════════════════════════════════════════════════════════════════
   Oregon City Garage Door — Design A (premium-funnel, --single slot "a")
   Cinnabar Switchgear design system, scoped under [data-design="a"]
   All selectors: [data-design="a"] — zero cinnabar-switchgear residuals
   Keyframes: og- prefix
═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts (must precede other rules) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');

/* ── Design tokens (remapped from Cinnabar Switchgear) ── */
[data-design="a"] {
  /* Color — lacquered warm-industrial palette */
  --og-cinnabar:      #C8421E;  /* primary accent — lacquered enamel */
  --og-cinnabar-deep: #9C2F12;  /* pressed cinnabar (:active only) */
  --og-graphite:      #1A1612;  /* lacquered charcoal — dark surfaces */
  --og-aluminum:      #C5C2BB;  /* milled-aluminum dial */
  --og-brass:         #8A6A2A;  /* aged brass — interactive-control rim */
  --og-copper:        #B65A2C;  /* burnished copper — bus rail, underlines */
  --og-livewire:      #2A4A8A;  /* phase blue — secondary info accent */
  --og-paper:         #ECE6D5;  /* catalogue stock — default surface */
  --og-paper-2:       #E2DCC8;  /* aged gutter — secondary band */
  --og-ink:           #231C16;  /* body ink — never pure black */
  --og-ink-mute:      #605044;  /* muted ink — captions, metadata */
  --og-amber:         #E29A2C;  /* pilot-lamp amber */
  --og-amber-bright:  #FFD68A;  /* pilot-lamp highlight */
  --og-success:       #3B7A3F;  /* energized / verified — indicator only */
  --og-rule:          rgba(35,28,22,.20);
  --og-rule-faint:    rgba(35,28,22,.08);

  /* Spacing — named mechanical primitives (4px base) */
  --og-bolt:    4px;   /* inset on stamped pill */
  --og-bus:     8px;   /* tight routing gap */
  --og-conduit: 12px;  /* form-row gap */
  --og-plate:   20px;  /* plate internal padding */
  --og-rack:    32px;  /* inter-card gap */
  --og-floor:   64px;  /* section rhythm (tablet) */
  --og-room:    96px;  /* section rhythm (desktop) */

  /* Radius — nothing soft */
  --og-r-bolt:   2px;  /* stamped plates */
  --og-r-plate:  6px;  /* cards, inputs */
  --og-r-rocker: 10px; /* rocker switches, hero CTA */
  --og-r-pill:   9999px;

  /* Motion — mechanical-physical, never elastic */
  --og-clack: 90ms;    /* switch press feedback */
  --og-throw: 220ms;   /* breaker flips / step advance */
  --og-warm:  480ms;   /* filament glow on/off */
  --og-ease-throw: cubic-bezier(.2,.9,.15,1);
  --og-ease-warm:  cubic-bezier(.32,0,.15,1);
  --og-ease-clack: cubic-bezier(.5,1.8,.2,1);

  /* Typography */
  --og-display: 'Fraunces', 'Recoleta', Georgia, 'Iowan Old Style', serif;
  --og-body:    'Inter', 'Helvetica Neue', -apple-system, system-ui, sans-serif;
  --og-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Public design token exposed per forge invariant */
  --design-a-primary: #C8421E;

  /* Base layout */
  font-family: var(--og-body);
  background: var(--og-paper);
  color: var(--og-ink);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Defensive overflow */
  max-width: 100%;
  overflow-x: clip;
}

[data-design="a"] * { min-width: 0; box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════════
   ELEMENT 1: Header — cinnabar enamel masthead + copper bus rail
════════════════════════════════════════════════════════════════ */
[data-design="a"] .og-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--og-cinnabar);
  color: var(--og-paper);
  isolation: isolate;
}
[data-design="a"] .og-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--og-margin, 16px);
  padding: 14px clamp(16px,4vw,32px);
  max-width: 1240px; margin: 0 auto;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Logo — wordmark with slow shimmer (light over enamel) */
[data-design="a"] .og-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; min-width: 0;
}
[data-design="a"] .og-logo__mark {
  width: 30px; height: 26px; flex: 0 0 auto; display: inline-flex;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
[data-design="a"] .og-logo__mark svg { width: 100%; height: 100%; }
[data-design="a"] .og-logo__text {
  font-family: var(--og-display);
  font-weight: 700; font-size: clamp(15px, 2.1vw, 21px);
  letter-spacing: -0.01em; line-height: 1.05;
  background: linear-gradient(90deg,
    var(--og-paper) 30%, #FFFFFF 50%, var(--og-paper) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: og-logo-shimmer 12s var(--og-ease-warm) 3s infinite;
}
@keyframes og-logo-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Header progress — step counter + bar */
[data-design="a"] .og-header__progress {
  display: flex; align-items: center; gap: var(--og-bus);
  flex: 1; max-width: 240px;
}
[data-design="a"] .og-header__step-label {
  font-family: var(--og-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--og-paper);
  white-space: nowrap; flex: none; opacity: .92;
  font-variant-numeric: tabular-nums;
}
[data-design="a"] .og-header__progress-track {
  flex: 1; height: 3px; background: rgba(0,0,0,.28);
  border-radius: 2px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.3);
}
[data-design="a"] .og-header__progress-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--hdr-pct, 20%);
  background: linear-gradient(90deg, var(--og-amber), var(--og-amber-bright));
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,214,138,.6);
  transition: width var(--og-warm) var(--og-ease-throw);
}

/* Copper bus rail — three-phase drift */
[data-design="a"] .og-busrail {
  height: 18px; overflow: hidden;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.22));
}
[data-design="a"] .og-busrail__svg { display: block; width: 100%; height: 100%; }
[data-design="a"] .og-phase--r { animation: og-phase-drift 24s linear infinite; }
[data-design="a"] .og-phase--s { animation: og-phase-drift 27s linear infinite; }
[data-design="a"] .og-phase--t { animation: og-phase-drift 31s linear infinite; }
@keyframes og-phase-drift { from { transform: translateX(0); } to { transform: translateX(1600px); } }

@media (max-width: 380px) {
  [data-design="a"] .og-header__bar { padding: 12px 14px; }
  [data-design="a"] .og-logo__text { font-size: 14px; }
  [data-design="a"] .og-header__progress { max-width: 130px; }
}

/* ════════════════════════════════════════════════════════════════
   HERO = FUNNEL SECTION (Element 3 substrate: warm-paper wash)
════════════════════════════════════════════════════════════════ */
[data-design="a"] .og-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(36px,6vw,80px) clamp(16px,4vw,56px) clamp(56px,9vw,112px);
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: var(--og-floor);
  background: linear-gradient(180deg, var(--og-paper) 0%, var(--og-paper-2) 100%);
}

/* Single animated substrate layer — themed movement (Element 3) */
[data-design="a"] .og-hero__wash {
  position: absolute; inset: -10%; z-index: 0; pointer-events: none;
}
[data-design="a"] .og-hero__wash::before {
  content: ""; position: absolute; inset: 0; filter: blur(8px); mix-blend-mode: multiply;
  background:
    radial-gradient(46% 42% at 22% 28%, rgba(200,66,30,.16), transparent 62%),
    radial-gradient(40% 40% at 80% 72%, rgba(182,90,44,.16), transparent 66%);
  animation: og-hero-wash 23s var(--og-ease-warm) infinite alternate;
}
@keyframes og-hero-wash {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .82; }
  100% { transform: translate3d(-2.5%,1.5%,0) scale(1.04); opacity: 1; }
}

/* Value prop + reassurance — always opacity:1, no JS gating */
[data-design="a"] .og-hero__intro {
  position: relative; z-index: 2;
  text-align: center; max-width: 620px;
}
[data-design="a"] .og-hero__value-prop {
  font-family: var(--og-display);
  font-weight: 600;
  font-size: clamp(26px, 6.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--og-ink);
  margin: 0 0 var(--og-margin, 16px);
  overflow-wrap: break-word; word-break: normal; text-wrap: balance;
  opacity: 1; /* HARD INVARIANT */
}
[data-design="a"] .og-hero__value-prop em {
  font-style: normal; color: var(--og-cinnabar);
}
[data-design="a"] .og-hero__reassurance {
  font-family: var(--og-body); font-size: clamp(15px,1.2vw,18px); font-weight: 400;
  color: var(--og-ink-mute); letter-spacing: 0;
  margin: 0; line-height: 1.55;
  opacity: 1; /* HARD INVARIANT */
}

/* ════════════════════════════════════════════════════════════════
   ELEMENT 5: Funnel — multi-step qualifying machine (the page itself)
════════════════════════════════════════════════════════════════ */
[data-design="a"] .og-funnel {
  position: relative; z-index: 2;
  width: 100%; max-width: 660px;
  background: var(--og-paper);
  border: 1px solid var(--og-ink);
  border-radius: var(--og-r-plate);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 var(--og-ink), 0 30px 60px -42px rgba(20,12,8,.4);
  overflow: hidden;
}
/* Corner screws — the "bolted down" plate detail */
[data-design="a"] .og-funnel::before,
[data-design="a"] .og-funnel::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--og-aluminum), #604812);
  top: 56px; z-index: 5; pointer-events: none;
}
[data-design="a"] .og-funnel::before { left: 12px; }
[data-design="a"] .og-funnel::after  { right: 12px; }

/* Progress header inside funnel */
[data-design="a"] .og-funnel__progress {
  display: flex; align-items: center; gap: var(--og-bus);
  padding: 14px var(--og-plate) 12px;
  border-bottom: 1px solid var(--og-rule-faint);
  background: var(--og-paper-2);
}
[data-design="a"] .og-funnel__progress-num {
  font-family: var(--og-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--og-ink-mute); white-space: nowrap; flex: none;
  font-variant-numeric: tabular-nums;
}
[data-design="a"] .og-funnel__progress-bar {
  flex: 1; height: 3px; background: var(--og-rule-faint);
  border-radius: 2px; position: relative; overflow: hidden;
}
[data-design="a"] .og-funnel__progress-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--og-fn-pct, 20%);
  background: linear-gradient(90deg, var(--og-copper), var(--og-cinnabar));
  border-radius: 2px;
  transition: width var(--og-warm) var(--og-ease-throw);
}

/* Steps container — fixed stage for slide transition.
   A top band (--og-ptr-band) is reserved for the signature pointer so the
   absolutely-positioned steps never collide with it. */
[data-design="a"] .og-funnel__steps {
  position: relative;
  --og-ptr-band: 88px;
  padding: clamp(28px,5vw,44px);
  padding-top: calc(clamp(28px,5vw,44px) + var(--og-ptr-band));
  min-height: 480px;
  overflow: hidden;
}

/* ── SIGNATURE POINTER — rocker switch above the answer row ──
   The ONE bold element. Cinnabar enamel rocker that THROWS down with a
   mechanical snap, brass bezel + breathing amber pilot, pointing into the
   form. Re-rests on every step (JS replays the throw).
   Pinned to the reserved top band so it sits ABOVE every step's content. */
[data-design="a"] .og-pointer {
  position: absolute; z-index: 4;
  top: clamp(20px,4vw,32px); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
  opacity: 1; /* HARD INVARIANT — visible at first paint */
}
[data-design="a"] .og-pointer__label {
  font-family: var(--og-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--og-copper);
}
[data-design="a"] .og-pointer__rocker {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 38px;
  background: linear-gradient(180deg, #D14E29 0%, var(--og-cinnabar) 60%, #B43816 100%);
  border-radius: var(--og-r-rocker);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 1px 0 var(--og-brass),
    0 2px 0 #604812,
    0 5px 10px rgba(20,12,8,.32);
  transform-origin: top center;
  /* The throw: rocker tips forward then settles — mechanical snap, replays per step */
  animation: og-pointer-throw 5.2s var(--og-ease-throw) 1.2s infinite;
}
[data-design="a"] .og-pointer__pilot {
  position: absolute; top: 4px; left: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--og-amber-bright) 0%, var(--og-amber) 55%, #8A4B0E 100%);
  box-shadow: 0 0 5px rgba(226,154,44,.6), inset 0 0 2px rgba(0,0,0,.4);
  animation: og-pilot-breath 4.6s var(--og-ease-warm) infinite;
}
[data-design="a"] .og-pointer__throw {
  display: inline-flex; color: var(--og-amber-bright);
  filter: drop-shadow(0 0 4px rgba(255,214,138,.5));
}
[data-design="a"] .og-pointer__throw svg { width: 18px; height: 20px; }
/* Replay class set by JS on each step change — re-runs the throw once */
[data-design="a"] .og-pointer.is-throwing .og-pointer__rocker {
  animation: og-pointer-snap 620ms var(--og-ease-throw);
}
@keyframes og-pointer-throw {
  /* idle long-cycle: a small periodic tip so the rocker feels "switched on" */
  0%, 84%, 100% { transform: rotateX(0deg) translateY(0); }
  90%           { transform: rotateX(20deg) translateY(2px); }
  95%           { transform: rotateX(0deg) translateY(0); }
}
@keyframes og-pointer-snap {
  /* deliberate one-shot throw when a new step arrives */
  0%   { transform: rotateX(0deg) translateY(0); }
  35%  { transform: rotateX(26deg) translateY(3px); }
  60%  { transform: rotateX(-6deg) translateY(-1px); }
  100% { transform: rotateX(0deg) translateY(0); }
}
@keyframes og-pilot-breath {
  0%,100% { box-shadow: 0 0 4px rgba(226,154,44,.45), inset 0 0 2px rgba(0,0,0,.4); opacity: .85; }
  50%      { box-shadow: 0 0 9px rgba(255,214,138,.85), inset 0 0 2px rgba(0,0,0,.4); opacity: 1; }
}

/* Individual step — positioned for forward-progressive slide.
   Top inset clears the reserved pointer band so the question never collides
   with the signature pointer. */
[data-design="a"] .og-funnel__step {
  position: absolute;
  inset: calc(clamp(28px,5vw,44px) + var(--og-ptr-band, 88px)) clamp(28px,5vw,44px) clamp(28px,5vw,44px);
  border: 0; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
  transform: translateX(18px);
  transition:
    opacity var(--og-throw) var(--og-ease-throw),
    transform var(--og-throw) var(--og-ease-throw);
}
[data-design="a"] .og-funnel__step[data-active="true"] {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
[data-design="a"] .og-funnel__step[data-exiting="true"] {
  opacity: 0; transform: translateX(-14px); pointer-events: none;
}

/* Question text — always opacity:1 */
[data-design="a"] .og-funnel__q {
  display: block;
  font-family: var(--og-display);
  font-weight: 600;
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--og-ink);
  margin: 0 0 var(--og-plate);
  opacity: 1; /* HARD INVARIANT */
}

/* Answer option buttons — Element 2 (step-advance) */
[data-design="a"] .og-funnel__options {
  display: flex; flex-direction: column; gap: var(--og-conduit);
}
[data-design="a"] .og-funnel__opt {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--og-bus);
  background: var(--og-paper);
  color: var(--og-ink);
  border: 1px solid var(--og-brass);
  border-radius: var(--og-r-plate);
  padding: 15px 20px;
  font-family: var(--og-body); font-size: clamp(15px,1.15vw,17px); font-weight: 500;
  cursor: pointer; text-align: left;
  min-height: 56px; /* ≥56px premium-funnel tap-target floor */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition:
    background var(--og-clack) var(--og-ease-warm),
    border-color var(--og-clack) var(--og-ease-warm),
    transform var(--og-clack) var(--og-ease-clack),
    box-shadow var(--og-clack) var(--og-ease-warm);
  opacity: 1; /* HARD INVARIANT */
}
/* Staggered mount — runs once when a step becomes active */
[data-design="a"] .og-funnel__step[data-active="true"] .og-funnel__opt:nth-child(1) { animation: og-opt-in 300ms 60ms  var(--og-ease-throw) both; }
[data-design="a"] .og-funnel__step[data-active="true"] .og-funnel__opt:nth-child(2) { animation: og-opt-in 300ms 120ms var(--og-ease-throw) both; }
[data-design="a"] .og-funnel__step[data-active="true"] .og-funnel__opt:nth-child(3) { animation: og-opt-in 300ms 180ms var(--og-ease-throw) both; }
[data-design="a"] .og-funnel__step[data-active="true"] .og-funnel__opt:nth-child(4) { animation: og-opt-in 300ms 240ms var(--og-ease-throw) both; }
[data-design="a"] .og-funnel__step[data-active="true"] .og-funnel__opt:nth-child(5) { animation: og-opt-in 300ms 300ms var(--og-ease-throw) both; }
@keyframes og-opt-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-design="a"] .og-funnel__opt:hover {
  background: var(--og-paper-2); border-color: var(--og-cinnabar);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px -8px rgba(20,12,8,.3);
}
[data-design="a"] .og-funnel__opt:active {
  transform: translateY(0) scale(.99);
  transition-duration: 60ms; /* INSTANT press — 60ms snap */
}
/* Selected "checked" stamp — persists ~200ms before advance (set by JS) */
[data-design="a"] .og-funnel__opt[aria-pressed="true"] {
  background: var(--og-graphite); color: var(--og-paper);
  border-color: var(--og-cinnabar);
}
[data-design="a"] .og-funnel__opt[aria-pressed="true"] .og-funnel__opt-tip {
  background: var(--og-cinnabar);
  box-shadow: 0 0 8px rgba(200,66,30,.8);
}
[data-design="a"] .og-funnel__opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(181,90,44,.65), inset 0 1px 0 rgba(255,255,255,.4);
}
[data-design="a"] .og-funnel__opt-label { flex: 1; line-height: 1.3; }
/* Breaker tip — the switched-state indicator */
[data-design="a"] .og-funnel__opt-tip {
  width: 12px; height: 12px; border-radius: var(--og-r-bolt);
  background: var(--og-graphite); flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  transition: background var(--og-throw) var(--og-ease-throw), box-shadow var(--og-throw);
}
[data-design="a"] .og-funnel__opt:hover .og-funnel__opt-tip {
  background: var(--og-amber);
  box-shadow: 0 0 6px rgba(226,154,44,.7);
}
[data-design="a"] .og-funnel__opt-chevron {
  font-size: 18px; color: var(--og-cinnabar); opacity: 0; flex: none;
  transition: opacity var(--og-clack) var(--og-ease-warm),
              transform var(--og-clack) var(--og-ease-warm);
}
[data-design="a"] .og-funnel__opt:hover .og-funnel__opt-chevron {
  opacity: 1; transform: translateX(3px);
}

/* Back navigation — ghost rocker */
[data-design="a"] .og-funnel__nav {
  margin-top: var(--og-plate); display: flex; align-items: center; min-height: 4px;
}
[data-design="a"] .og-funnel__back {
  background: none; border: none; padding: 8px 0;
  font-family: var(--og-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; color: var(--og-ink-mute); cursor: pointer;
  min-height: 44px;
  transition: color var(--og-clack) var(--og-ease-warm);
}
[data-design="a"] .og-funnel__back:hover { color: var(--og-cinnabar); }
[data-design="a"] .og-funnel__back:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(181,90,44,.4); border-radius: var(--og-r-bolt);
}

/* Contact step */
[data-design="a"] .og-funnel__step--contact .og-funnel__q {
  font-size: clamp(20px, 2.4vw, 26px);
}
[data-design="a"] .og-funnel__contact-note {
  font-size: 14px; color: var(--og-ink-mute); margin: -8px 0 var(--og-plate);
  line-height: 1.5; opacity: 1; /* HARD INVARIANT */
}
[data-design="a"] .og-funnel__fields {
  display: flex; flex-direction: column; gap: var(--og-margin, 16px); margin-bottom: var(--og-plate);
}
[data-design="a"] .og-funnel__field-group { display: flex; flex-direction: column; gap: var(--og-bolt); }
[data-design="a"] .og-funnel__label {
  font-family: var(--og-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--og-ink-mute);
}
[data-design="a"] .og-funnel__optional {
  font-weight: 400; text-transform: none; letter-spacing: 0;
}
[data-design="a"] .og-funnel__field {
  width: 100%; background: var(--og-paper); color: var(--og-ink);
  border: 1px solid var(--og-brass); border-radius: var(--og-r-plate);
  padding: 13px 15px;
  font-family: var(--og-body); font-size: 16px; font-weight: 400;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
  transition: border-color var(--og-clack) var(--og-ease-warm), box-shadow var(--og-clack);
  min-height: 52px;
}
[data-design="a"] .og-funnel__field::placeholder { color: rgba(96,80,68,.6); }
[data-design="a"] .og-funnel__field:focus {
  outline: none; border-color: var(--og-cinnabar);
  box-shadow: 0 0 0 3px rgba(200,66,30,.22), inset 0 1px 0 rgba(0,0,0,.05);
}
[data-design="a"] .og-funnel__field--textarea {
  min-height: 76px; resize: vertical; line-height: 1.5;
}

/* Primary CTA — the loudest button on the page (rocker, earned its volume) */
[data-design="a"] .og-cta {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--og-conduit);
  padding: 18px 26px;
  background: linear-gradient(180deg, #D14E29 0%, var(--og-cinnabar) 60%, #B43816 100%);
  color: var(--og-paper);
  font-family: var(--og-display); font-size: clamp(15px,1.4vw,18px); font-weight: 700;
  letter-spacing: .01em;
  border: 0; border-radius: var(--og-r-rocker); cursor: pointer; text-decoration: none;
  width: 100%; min-height: 60px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.3),
    0 1px 0 var(--og-brass),
    0 2px 0 #604812,
    0 6px 12px rgba(20,12,8,.35);
  transition:
    transform var(--og-throw) var(--og-ease-throw),
    box-shadow var(--og-throw) var(--og-ease-throw),
    background-color var(--og-clack) var(--og-ease-clack);
}
[data-design="a"] .og-cta__pilot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, var(--og-amber-bright) 0%, var(--og-amber) 55%, #8A4B0E 100%);
  box-shadow: 0 0 6px rgba(226,154,44,.55), inset 0 0 2px rgba(0,0,0,.4);
  animation: og-pilot-breath 4.6s var(--og-ease-warm) infinite;
}
[data-design="a"] .og-cta__label { line-height: 1.15; }
[data-design="a"] .og-cta__arrow {
  display: inline-flex; align-items: center; color: var(--og-amber-bright); flex: 0 0 auto;
  transition: color var(--og-warm) var(--og-ease-warm), filter var(--og-warm);
}
[data-design="a"] .og-cta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.32),
    0 1px 0 var(--og-brass),
    0 3px 0 #604812,
    0 10px 18px rgba(20,12,8,.42);
}
[data-design="a"] .og-cta:hover .og-cta__pilot { animation-duration: 2.2s; }
[data-design="a"] .og-cta:hover .og-cta__arrow { color: #FFE2A8; filter: drop-shadow(0 0 6px rgba(255,214,138,.65)); }
[data-design="a"] .og-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(181,90,44,.7), inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 var(--og-brass), 0 2px 0 #604812;
}
[data-design="a"] .og-cta:active {
  background: linear-gradient(180deg, var(--og-cinnabar-deep) 0%, #82240C 100%);
  transform: translateY(3px) rotateX(6deg);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45), 0 1px 2px rgba(20,12,8,.3);
  transition-duration: 90ms;
}

/* Completion state — conversion payoff */
[data-design="a"] .og-funnel__step--done {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--og-conduit);
  opacity: 0; /* shown via JS data-active */
}
[data-design="a"] .og-funnel__step--done[data-active="true"] { opacity: 1; }
[data-design="a"] .og-funnel__energized {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--og-success); color: var(--og-paper);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px rgba(59,122,63,.14);
  transform: scale(0); animation: og-energize 600ms var(--og-ease-throw) forwards;
}
@keyframes og-energize {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
[data-design="a"] .og-funnel__done-stamp { color: var(--og-success); margin: 4px 0 0; }
[data-design="a"] .og-funnel__done-title {
  font-family: var(--og-display); font-weight: 700;
  font-size: clamp(22px,2.6vw,30px); letter-spacing: -0.015em;
  color: var(--og-ink); margin: 0; line-height: 1.15;
}
[data-design="a"] .og-funnel__done-body {
  font-family: var(--og-body); font-size: 15px; color: var(--og-ink-mute);
  line-height: 1.6; margin: 0 0 var(--og-bus); max-width: 380px;
}
[data-design="a"] .og-funnel__call { max-width: 360px; }

/* ════════════════════════════════════════════════════════════════
   reduced-motion — funnel still fully functional, motion removed
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .og-phase--r,
  [data-design="a"] .og-phase--s,
  [data-design="a"] .og-phase--t { animation: none !important; transform: translateX(-400px); }
  [data-design="a"] .og-logo__text { animation: none !important; background-position: 0% 50% !important; }
  [data-design="a"] .og-hero__wash::before { animation: none !important; }
  [data-design="a"] .og-pointer__rocker { animation: none !important; transform: none !important; }
  [data-design="a"] .og-pointer.is-throwing .og-pointer__rocker { animation: none !important; }
  [data-design="a"] .og-pointer__pilot,
  [data-design="a"] .og-cta__pilot { animation: none !important; }
  [data-design="a"] .og-funnel__step { transition-duration: 120ms !important; transform: none !important; }
  [data-design="a"] .og-funnel__step .og-funnel__opt { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-design="a"] .og-funnel__energized { animation: none !important; transform: scale(1) !important; }
  [data-design="a"] .og-cta:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   ELEMENT 4: Reassurance bar — marquee drift below funnel (REAL signals)
════════════════════════════════════════════════════════════════ */
[data-design="a"] .og-reassurance {
  background: var(--og-graphite);
  color: var(--og-paper);
  overflow: hidden; padding: 16px 0;
  border-top: 1px solid rgba(0,0,0,.4);
}
[data-design="a"] .og-reassurance__inner { overflow: hidden; }
[data-design="a"] .og-reassurance__track { display: flex; }
[data-design="a"] .og-reassurance__items {
  display: flex; align-items: center; gap: var(--og-plate);
  white-space: nowrap;
  animation: og-marquee 40s linear infinite;
}
[data-design="a"] .og-reassurance__item {
  font-family: var(--og-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--og-aluminum);
  padding: 0 var(--og-bolt);
}
[data-design="a"] .og-reassurance__sep { color: var(--og-cinnabar); font-size: 14px; }
@keyframes og-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .og-reassurance__items { animation: none !important; }
}

/* Trust signals section */
[data-design="a"] .og-trust {
  padding: clamp(40px,6vw,72px) clamp(16px,4vw,56px);
  background: var(--og-paper-2);
}
[data-design="a"] .og-trust__inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--og-margin, 16px);
  text-align: center;
}
[data-design="a"] .og-trust__tagline {
  font-family: var(--og-display); font-weight: 700;
  font-size: clamp(22px,3vw,34px); letter-spacing: -0.015em;
  color: var(--og-ink); margin: 0;
}
[data-design="a"] .og-trust__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--og-bus);
}
[data-design="a"] .og-trust__item {
  font-family: var(--og-body); font-size: clamp(14px,1.1vw,16px);
  color: var(--og-ink-mute); line-height: 1.55; margin: 0;
  opacity: 1; /* HARD INVARIANT */
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — graphite plate, copper bus echo. NO sitemap nav.
════════════════════════════════════════════════════════════════ */
[data-design="a"] .og-footer {
  background: var(--og-graphite); color: var(--og-aluminum);
  padding: clamp(40px,6vw,72px) clamp(16px,4vw,56px) clamp(32px,5vw,56px);
  border-top: 2px solid var(--og-copper);
}
[data-design="a"] .og-footer__inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--og-margin, 16px);
}
[data-design="a"] .og-footer__brand { display: flex; flex-direction: column; gap: var(--og-bolt); }
[data-design="a"] .og-footer__name {
  font-family: var(--og-display); font-weight: 700;
  font-size: clamp(19px,2.2vw,24px); letter-spacing: -0.01em;
  color: var(--og-paper);
}
[data-design="a"] .og-footer__license {
  font-family: var(--og-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--og-aluminum); text-transform: uppercase;
}
[data-design="a"] .og-footer__contact {
  display: flex; flex-wrap: wrap; gap: var(--og-conduit) var(--og-plate);
}
[data-design="a"] .og-footer__phone,
[data-design="a"] .og-footer__email {
  font-family: var(--og-body); font-size: 15px; font-weight: 600;
  color: var(--og-amber-bright); text-decoration: none;
  transition: color var(--og-clack) var(--og-ease-warm);
}
[data-design="a"] .og-footer__phone:hover,
[data-design="a"] .og-footer__email:hover { color: #FFFFFF; }
[data-design="a"] .og-footer__address {
  font-family: var(--og-body); font-size: 13px; color: var(--og-aluminum); opacity: .7;
}
[data-design="a"] .og-footer__disclaimer {
  font-family: var(--og-body); font-size: 12px; color: var(--og-aluminum); opacity: .55;
  line-height: 1.6; margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — no h-scroll, thumb-usable 320 / 390 / 768 / 1440
════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  [data-design="a"] .og-funnel__steps { --og-ptr-band: 84px; padding: 24px; padding-top: calc(24px + var(--og-ptr-band)); min-height: 440px; }
  [data-design="a"] .og-funnel__step  { inset: calc(24px + var(--og-ptr-band, 84px)) 24px 24px; }
  [data-design="a"] .og-funnel::before,
  [data-design="a"] .og-funnel::after { top: 54px; }
  [data-design="a"] .og-hero { gap: var(--og-rack); }
}
@media (max-width: 390px) {
  [data-design="a"] .og-funnel__progress { padding: 12px 16px; }
  [data-design="a"] .og-funnel__steps { --og-ptr-band: 80px; padding: 20px 16px; padding-top: calc(20px + var(--og-ptr-band)); }
  [data-design="a"] .og-funnel__step  { inset: calc(20px + var(--og-ptr-band, 80px)) 16px 20px; }
  [data-design="a"] .og-funnel__opt { padding: 14px 16px; }
}

/* ════════════════════════════════════════════════════════════════
   Phase-3.4 visibility floor (orchestrator backstop)
   Premium-funnel step-1 IS the hero; chrome injects content after load so
   any JS-gated activation can race the fetch → blank hero. Force the
   hero/funnel-step-1 text, the CTA, and the pointer visible at first paint
   regardless of JS timing.
════════════════════════════════════════════════════════════════ */
[data-design="a"] [data-mf-role="hero"],
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,h3,p,span,div,button,a,label,li,legend),
[data-design="a"] [data-mf-role="cta"],
[data-design="a"] [data-mf-role="funnel-option"],
[data-design="a"] [data-mf-role="pointer"],
[data-design="a"] [data-mf-role="pointer"] * {
  opacity: 1 !important;
}
/* But inactive steps must stay hidden (they overlap absolutely in the stage)
   — re-assert the step machine over the blanket floor above. */
[data-design="a"] .og-funnel__step:not([data-active="true"]) {
  opacity: 0 !important; pointer-events: none;
}
[data-design="a"] .og-funnel__step[data-active="true"] {
  opacity: 1 !important; pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════════
   Defensive overflow / media block (bottom of file)
════════════════════════════════════════════════════════════════ */
[data-design="a"] { max-width: 100%; overflow-x: clip; }
[data-design="a"] * { min-width: 0; }
[data-design="a"] img,
[data-design="a"] svg { max-width: 100%; height: auto; display: block; }

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