/* ═══════════════════════════════════════════════════════════════════
   West Coast Roofers & Gutters LLC — design-a
   Cipher design system (terminal / operator register) · premium-funnel trade
   ALL selectors scoped under [data-design="a"]. All keyframes prefixed a-.
   Zero "cipher" residuals. Single design (--single, slot "a").
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Design tokens (Cipher palette, remapped to a-namespace) ── */
[data-design="a"] {
  /* Expose primary for chrome-kit (the phosphor-green signal) */
  --design-a-primary: #58F500;

  /* Color */
  --a-bg:            #060606;  /* primary surface — dark-mode native */
  --a-bg-soft:       #0E0E0E;  /* elevated surface (cards, funnel) */
  --a-bg-line:       #1A1A1A;  /* border / rule on filled surfaces */
  --a-ink:           #FAFAFA;  /* primary text (off-white) */
  --a-ink-soft:      #C4C4C4;  /* body */
  --a-mute:          #6B6B6B;  /* caption, secondary mono */
  --a-dim:           #3A3A3A;  /* disabled / placeholder */
  --a-signal:        #58F500;  /* phosphor-green — primary signal */
  --a-signal-deep:   #2EAA00;  /* hover deepening, secondary green */
  --a-amber:         #FFB020;  /* secondary signal */
  --a-red:           #FF3B30;  /* errors / alarm */
  --a-rule:          rgba(250,250,250,.14);
  --a-rule-strong:   rgba(250,250,250,.28);
  --a-glow:          rgba(88,245,0,.18);

  /* Typography */
  --a-font-display:  'Inter Tight', 'Arial', system-ui, sans-serif;
  --a-font-body:     'Inter', 'Helvetica Neue', 'Arial', system-ui, sans-serif;
  --a-font-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Spacing (4px named scale) */
  --a-hair:   1px;
  --a-tight:  4px;
  --a-snug:   8px;
  --a-margin: 16px;
  --a-gutter: 24px;
  --a-bay:    32px;
  --a-stanza: 64px;
  --a-chapter: 96px;

  /* Motion */
  --a-ease-cmd:    cubic-bezier(.6,0,.4,1);   /* snap / command-register */
  --a-ease-linear: linear;                     /* ticker, blink, type-on */
  --a-ease-settle: cubic-bezier(.2,.7,.3,1);   /* structural settle */
  --a-d-snap:     100ms;
  --a-d-press:    120ms;
  --a-d-register: 200ms;
  --a-d-settle:   400ms;

  /* Radius (Cipher is rectilinear) */
  --a-r-0:    0;
  --a-r-1:    2px;
  --a-r-card: 4px;

  color: var(--a-ink);
  font-family: var(--a-font-body);
  -webkit-font-smoothing: antialiased;
  background: var(--a-bg);
}

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

[data-design="a"] {
  display: block;
  background: var(--a-bg);
  line-height: 1.55;
}

[data-design="a"] :is(h1,h2,h3,p,ul,form) { margin: 0; }
[data-design="a"] button { font: inherit; }


/* ═══════════════════════════════════════════════════════════
   ELEMENT 1 — Header: live status line + bracketed wordmark
   ═══════════════════════════════════════════════════════════ */
[data-design="a"] .a-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--a-bg);
  border-bottom: 1px solid var(--a-bg-line);
}
[data-design="a"] .a-header__bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--a-gutter);
  padding: 14px clamp(16px, 4vw, 40px);
  max-width: 1200px; margin: 0 auto;
}

[data-design="a"] .a-logo {
  text-decoration: none; color: var(--a-ink);
  font-family: var(--a-font-mono); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; min-width: 0;
}
[data-design="a"] .a-logo__bracket { color: var(--a-signal); }
[data-design="a"] .a-logo__mark {
  letter-spacing: -.005em; position: relative; overflow: hidden;
  background-image: linear-gradient(100deg,
      var(--a-ink) 0%, var(--a-ink) 40%,
      var(--a-signal) 50%, var(--a-ink) 60%, var(--a-ink) 100%);
  background-size: 280% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: a-shimmer 11s var(--a-ease-settle) infinite;
}
@keyframes a-shimmer {
  0%, 82% { background-position: 130% 0; }
  92%, 100% { background-position: -30% 0; }
}
[data-design="a"] .a-logo__cursor {
  color: var(--a-signal); margin-left: 2px;
  animation: a-blink 1.1s var(--a-ease-linear) infinite;
}
@keyframes a-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* Center progress strip — the QUIET wayfinding signal (not the bold element) */
[data-design="a"] .a-progress {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0;
  font-family: var(--a-font-mono); font-size: 12px; color: var(--a-mute);
}
[data-design="a"] .a-progress__label { white-space: nowrap; letter-spacing: .04em; }
[data-design="a"] .a-progress__now { color: var(--a-signal); }
[data-design="a"] .a-progress__bar {
  position: relative; height: 1px; width: 100%; max-width: 200px;
  background: var(--a-bg-line); overflow: hidden;
}
[data-design="a"] .a-progress__bar-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%; width: 20%;
  background: var(--a-signal); box-shadow: 0 0 4px rgba(88,245,0,.5);
  transition: width var(--a-d-settle) var(--a-ease-cmd);
}

/* Slim [ info ] burger */
[data-design="a"] .a-menu-btn {
  appearance: none; background: transparent; color: var(--a-ink);
  border: 1px solid var(--a-rule-strong); padding: 8px 14px; cursor: pointer; border-radius: var(--a-r-1);
  font-family: var(--a-font-mono); font-size: 13px; white-space: nowrap;
  transition: border-color var(--a-d-snap) var(--a-ease-cmd), color var(--a-d-snap) var(--a-ease-cmd);
}
[data-design="a"] .a-menu-btn:hover { border-color: var(--a-signal); color: var(--a-signal); }
[data-design="a"] .a-menu-btn:focus-visible { outline: 2px solid var(--a-signal); outline-offset: 3px; }

/* Info drawer — phone + license ONLY */
[data-design="a"] .a-drawer {
  position: fixed; inset: 0; z-index: 45; background: rgba(6,6,6,.94);
  display: grid; place-items: center; padding: var(--a-gutter);
  animation: a-fade-in 200ms var(--a-ease-cmd) forwards;
}
[data-design="a"] .a-drawer[hidden] { display: none; }
[data-design="a"] .a-drawer__inner {
  background: var(--a-bg-soft); border: 1px solid var(--a-rule-strong); border-radius: var(--a-r-card);
  box-shadow: 0 0 0 1px var(--a-glow), 0 24px 60px -40px rgba(88,245,0,.08);
  padding: var(--a-bay) var(--a-gutter); max-width: 360px; width: 100%; text-align: left;
}
[data-design="a"] .a-drawer__eyebrow {
  font-family: var(--a-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-mute); display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--a-margin);
}
[data-design="a"] .a-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--a-signal); flex: none;
  box-shadow: 0 0 6px rgba(88,245,0,.6);
  animation: a-status-pulse 1.6s var(--a-ease-settle) infinite;
}
@keyframes a-status-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
[data-design="a"] .a-drawer__phone {
  display: block; font-family: var(--a-font-display); font-weight: 700; font-size: clamp(28px, 7vw, 36px);
  color: var(--a-signal); text-decoration: none; letter-spacing: -.02em; line-height: 1.1;
}
[data-design="a"] .a-drawer__phone:hover { text-decoration: underline; }
[data-design="a"] .a-drawer__license {
  font-family: var(--a-font-mono); font-size: 13px; color: var(--a-ink-soft); margin-top: var(--a-margin);
}
[data-design="a"] .a-drawer__area {
  font-family: var(--a-font-mono); font-size: 12px; color: var(--a-mute); margin-top: var(--a-snug);
}


/* ═══════════════════════════════════════════════════════════
   ELEMENT 5 — THE FUNNEL (is the page)
   ═══════════════════════════════════════════════════════════ */
[data-design="a"] .a-funnel {
  position: relative;
  max-width: 720px; margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 40px) clamp(56px, 8vw, 96px);
  min-height: 60vh;
}

[data-design="a"] .a-step { display: none; }
[data-design="a"] .a-step.is-active { display: block; }
[data-design="a"] .a-step__inner {
  position: relative;
  background: var(--a-bg-soft);
  border: 1px solid var(--a-rule-strong); border-radius: var(--a-r-card);
  box-shadow: 0 0 0 1px var(--a-glow), 0 24px 60px -40px rgba(88,245,0,.10);
  padding: clamp(24px, 5vw, 44px);
}

/* Hero substrate — ONE themed layer (a green hairline that draws in). No ambient backdrop. */
[data-design="a"] .a-hero-substrate {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: var(--a-r-card);
}
[data-design="a"] .a-hero-substrate__rule {
  position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--a-signal), transparent);
  transform-origin: left center; transform: scaleX(0);
  animation: a-rule-draw 900ms 120ms var(--a-ease-cmd) forwards;
  opacity: .8;
}
@keyframes a-rule-draw { to { transform: scaleX(1); } }

/* Mono command preamble */
[data-design="a"] .a-preamble {
  font-family: var(--a-font-mono); font-size: clamp(12px, 1.1vw, 14px);
  color: var(--a-signal); margin-bottom: var(--a-margin); letter-spacing: 0;
}
[data-design="a"] .a-preamble__prompt { color: var(--a-mute); margin-right: 6px; }

/* Text element 1 — value prop (horror-story hook condensed) */
[data-design="a"] .a-value-prop {
  font-family: var(--a-font-display); font-weight: 700;
  font-size: clamp(26px, 4.6vw, 42px); line-height: 1.08; letter-spacing: -.02em;
  color: var(--a-ink); max-width: 20ch; text-wrap: balance;
}
/* Text element 2 — reassurance */
[data-design="a"] .a-reassurance {
  font-family: var(--a-font-body); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55;
  color: var(--a-ink-soft); margin-top: var(--a-margin); max-width: 52ch;
}

/* Step question */
[data-design="a"] .a-question {
  font-family: var(--a-font-display); font-weight: 700;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.18; letter-spacing: -.015em;
  color: var(--a-ink); margin-top: var(--a-stanza);
}
[data-design="a"] .a-step:not([data-mf-hero-role]) .a-question { margin-top: 0; }
[data-design="a"] .a-prompt { font-family: var(--a-font-mono); color: var(--a-signal); margin-right: 8px; font-weight: 500; }
[data-design="a"] .a-step__sub {
  font-family: var(--a-font-body); font-size: 15px; color: var(--a-ink-soft);
  margin-top: var(--a-snug); max-width: 50ch;
}


/* ── THE SIGNATURE POINTER — the ONE bold, playful element ──
   Cipher register: a phosphor cursor + "// your move" tag that types-and-snaps
   in, with a green tick that drops down into the answer row each step. */
[data-design="a"] .a-sig-pointer {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: var(--a-gutter) 0 var(--a-margin);
  font-family: var(--a-font-mono); font-size: 14px;
  color: var(--a-signal); pointer-events: none;
}
[data-design="a"] .a-sig-pointer__cursor {
  color: var(--a-signal); font-size: 16px; line-height: 1;
  animation: a-blink 1.1s var(--a-ease-linear) infinite;
}
[data-design="a"] .a-sig-pointer__label {
  position: relative; letter-spacing: .02em; white-space: nowrap;
  /* type-and-snap: clipped from 0 width, snaps open with the command ease */
  overflow: hidden; max-width: 0;
}
/* tick — a small green block that drops from the label down toward the options */
[data-design="a"] .a-sig-pointer__tick {
  position: absolute; left: 7px; top: calc(100% + 2px);
  width: 2px; height: 14px; background: var(--a-signal);
  box-shadow: 0 0 5px rgba(88,245,0,.7);
  transform-origin: top; transform: scaleY(0); opacity: 0;
}
/* When the step is active, run the pointer's authored entrance ONCE */
[data-design="a"] .a-step.is-active .a-sig-pointer__label {
  animation: a-pointer-type 360ms 120ms var(--a-ease-cmd) forwards;
}
[data-design="a"] .a-step.is-active .a-sig-pointer__cursor {
  animation: a-blink 1.1s var(--a-ease-linear) infinite, a-pointer-nudge 520ms var(--a-ease-cmd);
}
[data-design="a"] .a-step.is-active .a-sig-pointer__tick {
  animation: a-tick-drop 620ms 420ms var(--a-ease-cmd) forwards;
}
@keyframes a-pointer-type { from { max-width: 0; } to { max-width: 18ch; } }
@keyframes a-pointer-nudge { 0% { transform: translateX(-4px); } 60% { transform: translateX(2px); } 100% { transform: translateX(0); } }
@keyframes a-tick-drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: .9; }
}


/* ── ELEMENT 2 — step-advance answer buttons (auto-advance) ── */
[data-design="a"] .a-options {
  display: grid; gap: 1px; background: var(--a-bg-line);
  border: 1px solid var(--a-bg-line); border-radius: var(--a-r-1); overflow: hidden;
}
[data-design="a"] .a-opt {
  appearance: none; background: var(--a-bg-soft); color: var(--a-ink); border: 0;
  padding: 18px 18px; text-align: left; cursor: pointer; width: 100%;
  min-height: 60px;
  font-family: var(--a-font-mono); font-size: 15px;
  display: grid; grid-template-columns: 34px 1fr 18px; gap: 12px; align-items: center;
  transition: background var(--a-d-snap) var(--a-ease-cmd), color var(--a-d-snap) var(--a-ease-cmd);
}
[data-design="a"] .a-opt:hover { background: var(--a-bg); color: var(--a-signal); }
[data-design="a"] .a-opt:focus-visible { outline: 2px solid var(--a-signal); outline-offset: -2px; }
[data-design="a"] .a-opt__key { color: var(--a-mute); font-size: 13px; }
[data-design="a"] .a-opt:hover .a-opt__key,
[data-design="a"] .a-opt.is-selected .a-opt__key { color: var(--a-signal); }
[data-design="a"] .a-opt__text { line-height: 1.35; }
[data-design="a"] .a-opt__arrow {
  color: var(--a-signal); opacity: 0; justify-self: end;
  transition: opacity var(--a-d-snap) var(--a-ease-cmd), transform var(--a-d-snap) var(--a-ease-cmd);
}
[data-design="a"] .a-opt:hover .a-opt__arrow { opacity: 1; transform: translateX(2px); }
/* selected "checked" stamp — persists ~200ms before advance */
[data-design="a"] .a-opt.is-selected {
  background: var(--a-bg); color: var(--a-signal);
  box-shadow: inset 0 0 0 1px var(--a-signal-deep);
}
[data-design="a"] .a-opt.is-selected .a-opt__arrow { opacity: 1; }
[data-design="a"] .a-opt:active { transform: translateY(1px); }

/* Stagger-in on step mount (completes well within 2s) */
[data-design="a"] .a-step.is-active .a-opt {
  opacity: 0; transform: translateX(6px);
  animation: a-opt-in 320ms var(--a-ease-cmd) forwards;
  animation-delay: calc(180ms + var(--btn-i, 0) * 55ms);
}
@keyframes a-opt-in { to { opacity: 1; transform: translateX(0); } }

/* Back control */
[data-design="a"] .a-step__back-row { margin-top: var(--a-gutter); }
[data-design="a"] .a-back {
  appearance: none; background: transparent; border: 0; color: var(--a-mute); cursor: pointer;
  font-family: var(--a-font-mono); font-size: 13px; padding: 8px 0;
  transition: color var(--a-d-snap) var(--a-ease-cmd);
}
[data-design="a"] .a-back:hover { color: var(--a-ink); }
[data-design="a"] .a-back:focus-visible { outline: 2px solid var(--a-signal); outline-offset: 3px; }


/* ── Contact step (final) ── */
[data-design="a"] .a-contact { margin-top: var(--a-gutter); display: grid; gap: var(--a-margin); }
[data-design="a"] .a-field { display: grid; gap: 6px; }
[data-design="a"] .a-field__label {
  font-family: var(--a-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-mute);
}
[data-design="a"] .a-field__or { color: var(--a-dim); text-transform: none; letter-spacing: 0; margin-left: 6px; }
[data-design="a"] .a-field__input {
  background: var(--a-bg); color: var(--a-ink); border: 1px solid var(--a-rule-strong);
  padding: 14px 14px; font-family: var(--a-font-mono); font-size: 15px; outline: none;
  border-radius: var(--a-r-1); width: 100%; min-height: 52px;
  transition: border-color var(--a-d-register) var(--a-ease-cmd), box-shadow var(--a-d-register) var(--a-ease-cmd);
}
[data-design="a"] .a-field__input::placeholder { color: var(--a-dim); }
[data-design="a"] .a-field__input:focus { border-color: var(--a-signal); box-shadow: 0 0 0 1px rgba(88,245,0,.4); }
[data-design="a"] .a-field__input.is-error { border-color: var(--a-red); box-shadow: 0 0 0 1px rgba(255,59,48,.35); }
[data-design="a"] .a-contact__note { font-family: var(--a-font-mono); font-size: 12px; color: var(--a-amber); }
[data-design="a"] .a-contact__note[hidden] { display: none; }

/* ELEMENT 2 — the loudest button (earned through completion) */
[data-design="a"] .a-submit {
  appearance: none; cursor: pointer; margin-top: var(--a-snug);
  background: var(--a-signal); color: #041100;
  border: 1px solid var(--a-signal);
  padding: 18px 22px; min-height: 60px; width: 100%;
  font-family: var(--a-font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--a-r-1);
  transition: background var(--a-d-register) var(--a-ease-cmd), transform var(--a-d-press) var(--a-ease-cmd), box-shadow var(--a-d-register) var(--a-ease-cmd);
  box-shadow: 0 0 0 0 rgba(88,245,0,0);
}
[data-design="a"] .a-submit:hover { background: #6BFF1A; box-shadow: 0 0 24px -4px rgba(88,245,0,.5); }
[data-design="a"] .a-submit:active { transform: translateY(1px); }
[data-design="a"] .a-submit:focus-visible { outline: 2px solid var(--a-signal); outline-offset: 3px; }
[data-design="a"] .a-submit__arrow { font-weight: 700; }


/* ── CONVERSION PAYOFF (receipt) ── */
[data-design="a"] .a-receipt { display: none; }
[data-design="a"] .a-receipt:not([hidden]) { display: block; }
[data-design="a"] .a-receipt__inner {
  background: var(--a-bg-soft);
  border: 1px solid var(--a-rule-strong); border-radius: var(--a-r-card);
  box-shadow: 0 0 0 1px var(--a-glow), 0 24px 60px -40px rgba(88,245,0,.12);
  padding: clamp(24px, 5vw, 44px);
  animation: a-fade-in 400ms var(--a-ease-settle) forwards;
}
[data-design="a"] .a-receipt__log {
  display: inline-grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: baseline;
  font-family: var(--a-font-mono); font-size: 12.5px; color: var(--a-ink-soft);
  background: var(--a-bg); border: 1px solid var(--a-bg-line); border-radius: var(--a-r-1);
  padding: 10px 14px; margin-bottom: var(--a-gutter); width: 100%;
}
[data-design="a"] .a-receipt__ts { color: var(--a-mute); white-space: nowrap; }
[data-design="a"] .a-receipt__level {
  color: var(--a-signal); border: 1px solid var(--a-signal-deep); border-radius: var(--a-r-1);
  padding: 1px 7px; font-size: 11px; letter-spacing: .08em; white-space: nowrap;
}
[data-design="a"] .a-receipt__msg { color: var(--a-ink); }
[data-design="a"] .a-receipt__title {
  font-family: var(--a-font-display); font-weight: 700; font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -.02em; line-height: 1.1; color: var(--a-ink);
}
[data-design="a"] .a-receipt__body {
  font-family: var(--a-font-body); font-size: 16px; color: var(--a-ink-soft);
  margin-top: var(--a-margin); max-width: 52ch; line-height: 1.6;
}
[data-design="a"] .a-receipt__phone {
  display: inline-flex; align-items: center; gap: 10px; margin-top: var(--a-gutter);
  font-family: var(--a-font-mono); font-size: clamp(16px, 2vw, 19px); font-weight: 500;
  color: var(--a-signal); text-decoration: none;
  border: 1px solid var(--a-signal-deep); border-radius: var(--a-r-1); padding: 14px 18px; min-height: 56px;
  transition: border-color var(--a-d-register) var(--a-ease-cmd), box-shadow var(--a-d-register) var(--a-ease-cmd);
}
[data-design="a"] .a-receipt__phone:hover { border-color: var(--a-signal); box-shadow: 0 0 24px -6px rgba(88,245,0,.5); }
[data-design="a"] .a-receipt__phone-cur { animation: a-blink 1.1s var(--a-ease-linear) infinite; }
[data-design="a"] .a-receipt__id {
  font-family: var(--a-font-mono); font-size: 11px; color: var(--a-mute); margin-top: var(--a-margin); letter-spacing: .08em;
}


/* ═══════════════════════════════════════════════════════════
   ELEMENT 4 — Below-funnel reassurance bar (trust signals)
   NO reviews / ratings / counters — brand-new business.
   ═══════════════════════════════════════════════════════════ */
[data-design="a"] .a-reassurance {
  background: var(--a-bg); border-top: 1px solid var(--a-bg-line); border-bottom: 1px solid var(--a-bg-line);
  padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 40px);
}
[data-design="a"] .a-reassurance__strip {
  max-width: 1000px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px clamp(16px, 3vw, 32px);
}
[data-design="a"] .a-reassurance__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--a-font-mono); font-size: 13px; color: var(--a-ink-soft); white-space: nowrap;
}
[data-design="a"] .a-reassurance__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--a-signal); flex: none;
  box-shadow: 0 0 5px rgba(88,245,0,.5);
}
[data-design="a"] .a-reassurance__creed {
  max-width: 760px; margin: var(--a-gutter) auto 0; text-align: center;
  font-family: var(--a-font-body); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6;
  color: var(--a-mute); font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER — minimal (system-status row + firm/contact/license)
   ═══════════════════════════════════════════════════════════ */
[data-design="a"] .a-footer {
  background: var(--a-bg); color: var(--a-ink-soft);
  padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 40px) clamp(32px, 5vw, 48px);
}
[data-design="a"] .a-footer__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
[data-design="a"] .a-footer__status {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--a-gutter);
  font-family: var(--a-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--a-mute);
}
[data-design="a"] .a-footer__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--a-signal); flex: none;
  box-shadow: 0 0 6px rgba(88,245,0,.6); animation: a-status-pulse 1.6s var(--a-ease-settle) infinite;
}
[data-design="a"] .a-footer__firm {
  font-family: var(--a-font-display); font-weight: 700; font-size: clamp(20px, 3vw, 28px);
  color: var(--a-ink); letter-spacing: -.02em;
}
[data-design="a"] .a-footer__meta {
  font-family: var(--a-font-mono); font-size: 14px; margin-top: var(--a-margin);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px;
}
[data-design="a"] .a-footer__meta--quiet { font-size: 12.5px; color: var(--a-mute); margin-top: var(--a-snug); }
[data-design="a"] .a-footer__phone, [data-design="a"] .a-footer__email { color: var(--a-signal); text-decoration: none; }
[data-design="a"] .a-footer__phone:hover, [data-design="a"] .a-footer__email:hover { text-decoration: underline; }
[data-design="a"] .a-footer__sep { color: var(--a-dim); }
[data-design="a"] .a-footer__disclaimer {
  font-family: var(--a-font-body); font-size: 12px; color: var(--a-mute); line-height: 1.6;
  max-width: 64ch; margin: var(--a-gutter) auto 0;
}
[data-design="a"] .a-footer__copy {
  font-family: var(--a-font-mono); font-size: 11px; color: var(--a-dim); margin-top: var(--a-margin); letter-spacing: .04em;
}


/* ── Shared ── */
@keyframes a-fade-in { from { opacity: 0; } to { opacity: 1; } }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  [data-design="a"] .a-header__bar { grid-template-columns: auto 1fr auto; gap: 10px; }
  [data-design="a"] .a-progress__bar { max-width: 120px; }
  [data-design="a"] .a-progress__label { font-size: 11px; }
}
@media (max-width: 560px) {
  [data-design="a"] .a-progress__label { display: none; }
  [data-design="a"] .a-progress { gap: 0; }
}
@media (max-width: 390px) {
  [data-design="a"] .a-logo { font-size: 13px; }
  [data-design="a"] .a-header__bar { padding: 12px 14px; }
  [data-design="a"] .a-menu-btn { padding: 8px 10px; font-size: 12px; }
  [data-design="a"] .a-question { font-size: 21px; }
  [data-design="a"] .a-opt { font-size: 14px; padding: 16px 14px; }
}
@media (max-width: 320px) {
  [data-design="a"] .a-logo { font-size: 12px; }
  [data-design="a"] .a-value-prop { font-size: 24px; }
  [data-design="a"] .a-question { font-size: 20px; }
  [data-design="a"] .a-opt { min-height: 56px; padding: 14px 12px; grid-template-columns: 30px 1fr 16px; gap: 10px; }
  [data-design="a"] .a-submit { font-size: 15px; }
}


/* ═══════════════════════════════════════════════════════════
   prefers-reduced-motion — every animation has a fallback
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] *,
  [data-design="a"] *::before,
  [data-design="a"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-design="a"] .a-logo__mark {
    animation: none !important;
    -webkit-background-clip: initial; background-clip: initial;
    color: var(--a-ink); -webkit-text-fill-color: var(--a-ink);
    background: none;
  }
  [data-design="a"] .a-logo__cursor,
  [data-design="a"] .a-sig-pointer__cursor,
  [data-design="a"] .a-receipt__phone-cur,
  [data-design="a"] .a-dot,
  [data-design="a"] .a-footer__dot { opacity: 1 !important; }
  [data-design="a"] .a-hero-substrate__rule { transform: scaleX(1) !important; }
  [data-design="a"] .a-sig-pointer__label { max-width: 18ch !important; }
  [data-design="a"] .a-sig-pointer__tick { transform: scaleY(1) !important; opacity: .9 !important; }
  [data-design="a"] .a-progress__bar-fill { transition: none !important; }
  [data-design="a"] .a-step.is-active .a-opt { opacity: 1 !important; transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   FIRST-PAINT VISIBILITY FLOOR (orchestrator backstop)
   Step-1 IS the hero; its step-in animation may race the chrome's
   content injection. Force hero/funnel-step-1 text, CTA, options, and
   pointer visible on first paint regardless of JS/animation 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),
[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;
}
/* Keep the progress wayfinding visible at all widths */
[data-design="a"] [data-mf-role="pointer"].a-progress { display: flex !important; }


/* ═══════════════════════════════════════════════════════════
   NO HORIZONTAL SCROLL — viewport clip + media safety
   ═══════════════════════════════════════════════════════════ */
[data-design="a"] { max-width: 100%; overflow-x: clip; }
[data-design="a"] * { min-width: 0; }
[data-design="a"] img,
[data-design="a"] svg,
[data-design="a"] video,
[data-design="a"] canvas {
  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; }