/* ============================================================
   DESIGN A — Best Owner Direct HVAC · Premium Funnel
   Design language: Aperture Glass (spatial-glass, lucid)
   Inter Display · Inter body · JetBrains Mono labels
   Midnight-indigo ground · single signal-mint accent
   ALL selectors scoped [data-design="a"]. Keyframes: apg-*
   ============================================================ */

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

/* ════════════════════════════════════════════════════════
   TOKENS  (16 trade-rooted; exposes --design-a-primary)
   ════════════════════════════════════════════════════════ */
[data-design="a"] {
  /* color — Aperture Glass dark (default) */
  --apg-ground:     #0B0E18;   /* page background — midnight indigo */
  --apg-ground-2:   #11162A;   /* secondary ground / fields rest */
  --apg-glass:      #1A2040AA; /* translucent panel surface */
  --apg-glass-edge: #FFFFFF14; /* inner-light hairline edge */
  --apg-ink:        #F2F4FA;   /* primary type ink */
  --apg-ink-2:      #B7BDD0;   /* secondary / body */
  --apg-muted:      #7E8499;   /* tertiary / mono numerals */
  --apg-rule:       #FFFFFF1F; /* hairline on glass */
  --apg-rule-faint: #FFFFFF10; /* faint separators */
  --apg-signal:     #3CE7B0;   /* single signal accent — mint */
  --apg-signal-2:   #1FBE93;   /* pressed/active signal */
  --apg-signal-ink: #051C12;   /* ink on mint surface */
  --apg-indigo:     #5662FF;   /* ambient pool only (not UI accent) */
  --apg-critical:   #FF6F86;   /* error */

  /* expose primary for chrome-kit toggle swatch */
  --design-a-primary: #3CE7B0;

  /* type */
  --apg-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --apg-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --apg-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* spacing  4/8/12/20/32/48/80/120 */
  --apg-near: 4px;  --apg-snug: 8px;   --apg-gap: 12px;
  --apg-room: 20px; --apg-room-2: 32px; --apg-stride: 48px;
  --apg-frame: 80px; --apg-frame-2: 120px;

  /* motion */
  --apg-ease-focus:  cubic-bezier(.22,.61,.36,1);   /* defocus -> focus */
  --apg-ease-settle: cubic-bezier(.32,.72,0,1);     /* ambient drift */
  --apg-ease-press:  cubic-bezier(.4,0,.2,1);       /* tactile feedback */
  --apg-dur-quick:  140ms;
  --apg-dur-step:   320ms;
  --apg-dur-breath: 3500ms;
  --apg-dur-settle: 480ms;

  /* radius */
  --apg-r-pill:  9999px;
  --apg-r-glass: 22px;
  --apg-r-card:  14px;
  --apg-r-tag:   8px;
}

/* ════════════════════════════════════════════════════════
   ROOT / BASE
   ════════════════════════════════════════════════════════ */
[data-design="a"] {
  background: var(--apg-ground);
  color: var(--apg-ink-2);
  font-family: var(--apg-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: block;
}
[data-design="a"] *,
[data-design="a"] *::before,
[data-design="a"] *::after { box-sizing: border-box; }
[data-design="a"] em { font-style: normal; color: var(--apg-signal); }
[data-design="a"] a { color: inherit; }

/* shared eyebrow */
[data-design="a"] .apg-eyebrow {
  font-family: var(--apg-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--apg-muted);
  margin: 0 0 var(--apg-room);
}

/* ════════════════════════════════════════════════════════
   ELEMENT 1 — HEADER (slim, progress-aware, glass + pools)
   No nav. Logo carries a slow mint shimmer glint.
   ════════════════════════════════════════════════════════ */
[data-design="a"] .apg-header {
  position: sticky; top: 0; z-index: 40; width: 100%;
  background: color-mix(in oklab, var(--apg-ground), transparent 30%);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--apg-rule-faint);
  isolation: isolate; overflow: hidden;
}
[data-design="a"] .apg-header__pools {
  position: absolute; inset: -60% -10% auto -10%; height: 240%;
  pointer-events: none; filter: blur(60px); opacity: .5;
}
[data-design="a"] .apg-pool {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  will-change: transform, opacity;
}
[data-design="a"] .apg-pool--mint {
  left: -8%; top: 20%;
  background: radial-gradient(circle, var(--apg-signal) 0%, transparent 65%);
  animation: apg-pool-a 24s var(--apg-ease-settle) infinite;
}
[data-design="a"] .apg-pool--indigo {
  right: -8%; top: 0%;
  background: radial-gradient(circle, var(--apg-indigo) 0%, transparent 70%);
  animation: apg-pool-b 31s var(--apg-ease-settle) infinite;
}
@keyframes apg-pool-a {
  0%,100% { transform: translate3d(0,0,0) scale(1);    opacity: .5; }
  50%     { transform: translate3d(20%,8%,0) scale(1.14); opacity: .7; }
}
@keyframes apg-pool-b {
  0%,100% { transform: translate3d(0,0,0) scale(1);     opacity: .4; }
  50%     { transform: translate3d(-16%,12%,0) scale(1.2); opacity: .6; }
}
[data-design="a"] .apg-header__bar {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
[data-design="a"] .apg-logo {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
}
[data-design="a"] .apg-logo__dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--apg-signal); box-shadow: 0 0 12px var(--apg-signal);
}
[data-design="a"] .apg-logo__mark {
  position: relative;
  font-family: var(--apg-display); font-weight: 600; font-size: clamp(16px, 4vw, 20px);
  letter-spacing: -.01em; white-space: nowrap; min-width: 0;
  /* shimmer glint — soft light pass over the wordmark */
  background: linear-gradient(100deg,
      var(--apg-ink) 0%, var(--apg-ink) 38%,
      var(--apg-signal) 50%,
      var(--apg-ink) 62%, var(--apg-ink) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: apg-logo-shimmer 12s ease-in-out infinite;
}
@keyframes apg-logo-shimmer {
  0%, 88%, 100% { background-position: 150% 0; }
  94%           { background-position: -50% 0; }
}
[data-design="a"] .apg-progress { display: flex; align-items: center; gap: 12px; flex: none; }
[data-design="a"] .apg-progress__num {
  font-family: var(--apg-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--apg-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
[data-design="a"] .apg-progress__bar {
  position: relative; display: block; width: clamp(56px, 16vw, 140px); height: 3px;
  background: var(--apg-rule); border-radius: var(--apg-r-pill); overflow: hidden;
}
[data-design="a"] .apg-progress__fill {
  position: absolute; inset: 0 auto 0 0; width: 20%;
  background: var(--apg-signal); border-radius: var(--apg-r-pill);
  box-shadow: 0 0 10px color-mix(in oklab, var(--apg-signal), transparent 40%);
  transition: width var(--apg-dur-settle) var(--apg-ease-focus);
}
@media (max-width: 600px) {
  [data-design="a"] .apg-progress__num { font-size: 10px; letter-spacing: .08em; }
}

/* ════════════════════════════════════════════════════════
   FUNNEL SECTION — the funnel IS the page.
   Ambient: drifting corona behind the glass plate (Element 3).
   ════════════════════════════════════════════════════════ */
[data-design="a"] .apg-funnel-section {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 58px);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(96px, 14vw, 140px);
  display: flex; flex-direction: column; justify-content: flex-start;
}
/* signal-mint corona — focused light gathered behind glass. Continuous
   orbit (linear, constant-velocity) so the at-rest motion never stalls. */
[data-design="a"] .apg-corona {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(-12%, 2vw, 4%); right: clamp(-26%, -4vw, -6%);
  width: clamp(340px, 56vw, 700px); aspect-ratio: 1/1;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--apg-signal), transparent 52%) 0%,
    transparent 70%);
  filter: blur(38px); opacity: .8;
  animation: apg-corona-orbit 14s linear infinite;
}
@keyframes apg-corona-orbit {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-9%, 5%, 0); }
  50%  { transform: translate3d(-3%, 11%, 0); }
  75%  { transform: translate3d(7%, 5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
/* slow diagonal light-sweep — a beam of focused light crossing the glass.
   Constant-velocity translate guarantees perceptible at-rest motion. */
[data-design="a"] .apg-sweep {
  position: absolute; z-index: 0; pointer-events: none;
  top: -30%; left: -40%; width: 60%; height: 160%;
  background: linear-gradient(105deg,
    transparent 0%,
    color-mix(in oklab, var(--apg-signal), transparent 78%) 42%,
    color-mix(in oklab, var(--apg-signal), transparent 64%) 50%,
    color-mix(in oklab, var(--apg-signal), transparent 78%) 58%,
    transparent 100%);
  filter: blur(26px); opacity: .55;
  transform: translate3d(0,0,0) rotate(8deg);
  animation: apg-sweep-move 13s linear infinite;
}
@keyframes apg-sweep-move {
  0%   { transform: translate3d(0, 0, 0) rotate(8deg); }
  100% { transform: translate3d(280%, 0, 0) rotate(8deg); }
}

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

/* value-prop / Step-1 hero text — FLOORED VISIBLE at first paint */
[data-design="a"] .apg-vp { opacity: 1; margin-bottom: clamp(20px, 3vw, 30px); }
[data-design="a"] .apg-vp__head {
  margin: 0 0 var(--apg-room);
  font-family: var(--apg-display); font-weight: 600;
  font-size: clamp(30px, 5.4vw, 50px); line-height: 1.06; letter-spacing: -.022em;
  color: var(--apg-ink); max-width: 18ch;
}
[data-design="a"] .apg-vp__sub {
  margin: 0; font-size: clamp(15px, 1.6vw, 18px); color: var(--apg-ink-2);
  max-width: 48ch;
}

/* ── Funnel container — the glass plate ──────────────────── */
[data-design="a"] .apg-plate {
  position: relative;
  background: var(--apg-glass);
  border: 1px solid var(--apg-glass-edge); border-radius: var(--apg-r-glass);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 1px 0 0 var(--apg-glass-edge) inset,
              0 22px 60px -32px rgba(0,0,0,.55),
              0 4px 14px -8px rgba(0,0,0,.35);
}
[data-design="a"] .apg-funnel__plate { padding: clamp(20px, 4vw, 32px); }

/* ════════════════════════════════════════════════════════
   THE SIGNATURE POINTER — the ONE bold element.
   Rests directly above the form; aperture opens + dips into it.
   Aperture Glass register: focus-pull, fluid, with personality.
   ════════════════════════════════════════════════════════ */
[data-design="a"] .apg-pointer {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin: 0 auto clamp(12px, 2vw, 18px); width: max-content;
  opacity: 1; pointer-events: none;
}
[data-design="a"] .apg-pointer__label {
  font-family: var(--apg-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--apg-signal);
  opacity: .95;
}
[data-design="a"] .apg-pointer__lens { display: block; width: 28px; height: 40px; color: var(--apg-signal); }
[data-design="a"] .apg-pointer__lens svg { width: 100%; height: 100%; display: block; overflow: visible; }
[data-design="a"] .apg-pointer__iris  { stroke: var(--apg-signal); stroke-width: 1.5; fill: none; opacity: .6; }
[data-design="a"] .apg-pointer__pupil { fill: var(--apg-signal); }
[data-design="a"] .apg-pointer__stem  { stroke: var(--apg-signal); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* personality: the iris focus-pulls (defocus->focus) while the stem dips toward the form */
[data-design="a"] .apg-pointer__lens {
  transform-origin: 50% 36%;
  animation: apg-pointer-dip 4.2s var(--apg-ease-settle) infinite;
}
@keyframes apg-pointer-dip {
  0%   { transform: translateY(0)   rotate(0deg); }
  16%  { transform: translateY(-3px) rotate(0deg); }  /* anticipation: lens lifts */
  42%  { transform: translateY(5px)  rotate(0deg); }  /* follow-through: dips into form */
  60%  { transform: translateY(2px)  rotate(0deg); }  /* settle */
  74%  { transform: translateY(3px)  rotate(0deg); }  /* a beat of wit — second small nod */
  100% { transform: translateY(0)   rotate(0deg); }
}
[data-design="a"] .apg-pointer__iris {
  transform-origin: 15px 14px;
  animation: apg-pointer-focus 4.2s var(--apg-ease-focus) infinite;
}
@keyframes apg-pointer-focus {
  0%,100% { opacity: .35; transform: scale(1); }
  42%     { opacity: .85; transform: scale(1.12); }  /* comes into focus on the dip */
}
[data-design="a"] .apg-pointer__pupil {
  transform-origin: 15px 14px;
  animation: apg-pointer-pupil 4.2s var(--apg-ease-focus) infinite;
}
@keyframes apg-pointer-pupil {
  0%,100% { transform: scale(.7); opacity: .8; }
  42%     { transform: scale(1);  opacity: 1; }
}
/* re-rest pulse fired on each step change (JS toggles .is-rerest) */
[data-design="a"] .apg-pointer.is-rerest .apg-pointer__lens { animation: apg-pointer-rerest 700ms var(--apg-ease-focus); }
@keyframes apg-pointer-rerest {
  0%   { transform: translateY(-10px) scale(.85); opacity: 0; }
  50%  { transform: translateY(6px)   scale(1.05); opacity: 1; }
  100% { transform: translateY(0)     scale(1); }
}

/* ════════════════════════════════════════════════════════
   STEP VIEWPORT + steps (forward-progressive focus-pull)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .apg-funnel__viewport {
  position: relative;
  display: grid;            /* all steps stacked in one cell */
}
[data-design="a"] .apg-step {
  grid-area: 1 / 1;
  border: 0; margin: 0; padding: 0; min-inline-size: 0;
  display: flex; flex-direction: column; gap: var(--apg-room);
  opacity: 0; visibility: hidden; pointer-events: none;
  filter: blur(6px); transform: translateY(8px);
  transition: opacity var(--apg-dur-step) var(--apg-ease-focus),
              filter var(--apg-dur-step) var(--apg-ease-focus),
              transform var(--apg-dur-step) var(--apg-ease-focus),
              visibility 0s linear var(--apg-dur-step);
}
/* STEP 1 floored visible at FIRST PAINT (no JS-reveal-gate) — until JS
   explicitly deactivates it. Keeps the hero visible on load yet lets the
   step machine hide it when advancing. */
[data-design="a"] .apg-step[data-step="1"]:not([data-active="false"]) {
  opacity: 1; visibility: visible; pointer-events: auto;
  filter: blur(0); transform: none; transition: none;
}
/* Explicitly deactivated steps are hidden + non-interactive (authoritative). */
[data-design="a"] .apg-step[data-active="false"] {
  opacity: 0; visibility: hidden; pointer-events: none;
  filter: blur(6px); transform: translateY(8px);
  transition: opacity var(--apg-dur-step) var(--apg-ease-focus),
              filter var(--apg-dur-step) var(--apg-ease-focus),
              transform var(--apg-dur-step) var(--apg-ease-focus),
              visibility 0s linear var(--apg-dur-step);
}
/* JS sets data-active="true" on the live step — focuses in */
[data-design="a"] .apg-step[data-active="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  filter: blur(0); transform: translateY(0);
  transition: opacity var(--apg-dur-step) var(--apg-ease-focus),
              filter var(--apg-dur-step) var(--apg-ease-focus),
              transform var(--apg-dur-step) var(--apg-ease-focus),
              visibility 0s;
}
[data-design="a"] .apg-step__q {
  display: block; float: none; width: 100%; padding: 0; margin: 0;
  font-family: var(--apg-display); font-weight: 600;
  font-size: clamp(22px, 3vw, 28px); line-height: 1.18; letter-spacing: -.018em;
  color: var(--apg-ink);
}
[data-design="a"] .apg-step__help {
  margin: calc(-1 * var(--apg-gap)) 0 0; font-size: 14px; color: var(--apg-muted); max-width: 48ch;
}

/* ── Option buttons (Element 2) — glass tap targets + chevron ── */
[data-design="a"] .apg-opts { display: flex; flex-direction: column; gap: var(--apg-gap); }
[data-design="a"] .apg-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 60px; padding: 16px 22px;
  background: color-mix(in oklab, var(--apg-ground-2), transparent 0%);
  color: var(--apg-ink);
  border: 1px solid var(--apg-rule); border-radius: var(--apg-r-card);
  font-family: var(--apg-body); font-size: 16px; font-weight: 500; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--apg-dur-quick) var(--apg-ease-press),
              border-color var(--apg-dur-quick) var(--apg-ease-press),
              transform var(--apg-dur-quick) var(--apg-ease-press),
              box-shadow var(--apg-dur-quick) var(--apg-ease-press);
}
[data-design="a"] .apg-opt__label { line-height: 1.25; }
[data-design="a"] .apg-opt__chev {
  font-family: var(--apg-mono); font-size: 20px; line-height: 1; color: var(--apg-muted);
  flex: none; transform: translateX(-2px); opacity: .5;
  transition: transform var(--apg-dur-quick) var(--apg-ease-press),
              color var(--apg-dur-quick) var(--apg-ease-press),
              opacity var(--apg-dur-quick) var(--apg-ease-press);
}
[data-design="a"] .apg-opt:hover {
  background: color-mix(in oklab, var(--apg-signal), var(--apg-ground-2) 88%);
  border-color: color-mix(in oklab, var(--apg-signal), transparent 55%);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -18px rgba(0,0,0,.6);
}
[data-design="a"] .apg-opt:hover .apg-opt__chev { color: var(--apg-signal); opacity: 1; transform: translateX(2px); }
[data-design="a"] .apg-opt:focus-visible { outline: 3px solid color-mix(in oklab, var(--apg-signal), transparent 55%); outline-offset: 2px; }
[data-design="a"] .apg-opt:active { transform: translateY(0) scale(.985); transition-duration: 60ms; }
/* selected stamp — mint surface, persists briefly before advance */
[data-design="a"] .apg-opt.is-selected {
  background: var(--apg-signal); border-color: var(--apg-signal); color: var(--apg-signal-ink);
}
[data-design="a"] .apg-opt.is-selected .apg-opt__chev { color: var(--apg-signal-ink); opacity: 1; transform: translateX(2px); }

/* mount stagger for arriving step's options (reduced-motion safe) */
[data-design="a"] .apg-step[data-active="true"] .apg-opt { animation: apg-opt-in 360ms var(--apg-ease-focus) both; }
[data-design="a"] .apg-step[data-step="1"] .apg-opt { animation: apg-opt-in 420ms var(--apg-ease-focus) both; }
@keyframes apg-opt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Contact fields ──────────────────────────────────────── */
[data-design="a"] .apg-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
[data-design="a"] .apg-field { display: flex; flex-direction: column; gap: var(--apg-near); min-width: 0; }
[data-design="a"] .apg-field--full { grid-column: 1 / -1; }
[data-design="a"] .apg-field__label {
  font-family: var(--apg-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--apg-muted);
}
[data-design="a"] .apg-field__input {
  width: 100%; min-height: 56px; padding: 14px 16px;
  background: color-mix(in oklab, var(--apg-ground), transparent 40%);
  color: var(--apg-ink);
  border: 1px solid var(--apg-rule); border-radius: var(--apg-r-card);
  font-family: var(--apg-body); font-size: 16px;
  transition: border-color var(--apg-dur-quick) var(--apg-ease-press), box-shadow var(--apg-dur-quick) var(--apg-ease-press);
}
[data-design="a"] .apg-field__input::placeholder { color: var(--apg-muted); }
[data-design="a"] .apg-field__input:focus {
  outline: none; border-color: color-mix(in oklab, var(--apg-signal), transparent 40%);
  box-shadow: inset 0 0 0 1px var(--apg-signal);
}
[data-design="a"] .apg-step__err {
  margin: 0; font-size: 13.5px; color: var(--apg-critical); font-weight: 500;
}
[data-design="a"] .apg-step__actions { margin-top: var(--apg-snug); }

/* ── CTA (Element 2 end-of-funnel) — the loudest button ───── */
[data-design="a"] .apg-cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  width: 100%; min-height: 60px; padding: 18px 26px; justify-content: center;
  background: var(--apg-signal); color: var(--apg-signal-ink);
  font-family: var(--apg-display); font-size: 16px; font-weight: 600; letter-spacing: -.005em;
  border: 0; border-radius: var(--apg-r-pill); cursor: pointer; text-decoration: none;
  isolation: isolate; text-align: center;
  box-shadow: 0 14px 40px -18px color-mix(in oklab, var(--apg-signal), transparent 30%);
  transition: transform var(--apg-dur-quick) var(--apg-ease-press),
              background var(--apg-dur-quick) var(--apg-ease-press),
              box-shadow var(--apg-dur-quick) var(--apg-ease-press);
}
[data-design="a"] .apg-cta__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--apg-signal-ink);
  animation: apg-cta-breath var(--apg-dur-breath) var(--apg-ease-settle) infinite;
}
[data-design="a"] .apg-cta__label { position: relative; z-index: 1; }
[data-design="a"] .apg-cta__arrow { width: 15px; height: 15px; flex: none; transition: transform var(--apg-dur-quick) var(--apg-ease-press); }
[data-design="a"] .apg-cta:hover { background: var(--apg-signal-2); box-shadow: 0 18px 48px -16px color-mix(in oklab, var(--apg-signal), transparent 20%); }
[data-design="a"] .apg-cta:hover .apg-cta__arrow { transform: translateX(4px); }
[data-design="a"] .apg-cta:active { transform: scale(.985); }
[data-design="a"] .apg-cta:focus-visible { outline: 3px solid color-mix(in oklab, var(--apg-signal), transparent 50%); outline-offset: 3px; }
@keyframes apg-cta-breath {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--apg-signal-ink), transparent 50%); transform: scale(1); }
  50%     { box-shadow: 0 0 0 5px color-mix(in oklab, var(--apg-signal-ink), transparent 100%); transform: scale(1.12); }
}

/* ── Back control ────────────────────────────────────────── */
[data-design="a"] .apg-funnel__foot { margin-top: var(--apg-room); min-height: 24px; }
[data-design="a"] .apg-back {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--apg-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--apg-muted); padding: 8px 4px;
  transition: color var(--apg-dur-quick) var(--apg-ease-press);
}
[data-design="a"] .apg-back:hover { color: var(--apg-signal); }
[data-design="a"] .apg-back:focus-visible { outline: 2px solid color-mix(in oklab, var(--apg-signal), transparent 50%); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════
   PAYOFF — mint completion check + phone-call reveal
   ════════════════════════════════════════════════════════ */
[data-design="a"] .apg-payoff { text-align: center; align-items: center; }
[data-design="a"] .apg-payoff__check {
  width: 60px; height: 60px; border-radius: 50%;
  background: color-mix(in oklab, var(--apg-signal), transparent 78%);
  color: var(--apg-signal);
  display: grid; place-items: center;
  box-shadow: 0 0 30px color-mix(in oklab, var(--apg-signal), transparent 60%);
}
[data-design="a"] .apg-step[data-active="true"].apg-payoff .apg-payoff__check { animation: apg-check-pop 600ms var(--apg-ease-focus) both; }
[data-design="a"] .apg-step[data-active="true"].apg-payoff .apg-payoff__tick {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: apg-tick 460ms 240ms var(--apg-ease-focus) forwards;
}
@keyframes apg-check-pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes apg-tick { to { stroke-dashoffset: 0; } }
[data-design="a"] .apg-payoff__head {
  margin: 0; font-family: var(--apg-display); font-weight: 600;
  font-size: clamp(24px, 4vw, 36px); line-height: 1.1; letter-spacing: -.018em; color: var(--apg-ink);
}
[data-design="a"] .apg-payoff__sub {
  margin: 0 auto; font-size: clamp(15px, 1.6vw, 18px); color: var(--apg-ink-2); max-width: 42ch;
}
[data-design="a"] .apg-payoff__alt { margin: 0; font-size: 13px; color: var(--apg-muted); }

/* ════════════════════════════════════════════════════════
   ELEMENT 4 — REASSURANCE BAR (below funnel) — real signals
   ════════════════════════════════════════════════════════ */
[data-design="a"] .apg-reassure {
  position: relative; background: var(--apg-ground-2);
  border-top: 1px solid var(--apg-rule-faint); border-bottom: 1px solid var(--apg-rule-faint);
  padding: clamp(40px, 6vw, 64px) 0; overflow: hidden;
}
[data-design="a"] .apg-reassure__inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
[data-design="a"] .apg-reassure__lede { max-width: 640px; margin: 0 0 var(--apg-stride); }
[data-design="a"] .apg-reassure__line {
  margin: 0; font-family: var(--apg-display); font-weight: 600;
  font-size: clamp(20px, 2.8vw, 30px); line-height: 1.25; letter-spacing: -.018em; color: var(--apg-ink);
}
/* marquee — slow horizontal drift (Element 4 ambient) */
[data-design="a"] .apg-marquee {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 14px; width: max-content;
  animation: apg-marquee 38s linear infinite;
}
[data-design="a"] .apg-marquee.is-paused { animation-play-state: paused; }
@keyframes apg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-design="a"] .apg-fact {
  flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 22px;
  background: var(--apg-glass); border: 1px solid var(--apg-glass-edge); border-radius: var(--apg-r-card);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
[data-design="a"] .apg-fact__v {
  font-family: var(--apg-display); font-weight: 600; font-size: 20px;
  color: var(--apg-signal); white-space: nowrap; font-variant-numeric: tabular-nums;
}
[data-design="a"] .apg-fact__k {
  font-family: var(--apg-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--apg-muted); white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   FOOTER (minimal)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .apg-footer {
  background: var(--apg-ground); color: var(--apg-ink-2);
  padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 40px);
  border-top: 1px solid var(--apg-rule-faint);
}
[data-design="a"] .apg-footer__inner { max-width: 1200px; margin: 0 auto; }
[data-design="a"] .apg-footer__firm {
  margin: 0 0 var(--apg-room); font-family: var(--apg-display); font-weight: 600;
  font-size: clamp(20px, 3vw, 28px); letter-spacing: -.018em; color: var(--apg-ink);
}
[data-design="a"] .apg-footer__line,
[data-design="a"] .apg-footer__area,
[data-design="a"] .apg-footer__copy { margin: 0 0 var(--apg-snug); font-size: 14px; color: var(--apg-ink-2); }
[data-design="a"] .apg-footer__line a { color: var(--apg-ink); text-decoration: none; border-bottom: 1px solid var(--apg-rule); }
[data-design="a"] .apg-footer__line a:hover { color: var(--apg-signal); border-color: var(--apg-signal); }
[data-design="a"] .apg-footer__sep { color: var(--apg-muted); margin: 0 6px; }
[data-design="a"] .apg-footer__copy { font-size: 12.5px; color: var(--apg-muted); margin-top: var(--apg-room); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  [data-design="a"] .apg-fields { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   REDUCED MOTION — every animation has a fallback
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .apg-pool,
  [data-design="a"] .apg-corona,
  [data-design="a"] .apg-sweep,
  [data-design="a"] .apg-pointer__lens,
  [data-design="a"] .apg-pointer__iris,
  [data-design="a"] .apg-pointer__pupil,
  [data-design="a"] .apg-cta__dot,
  [data-design="a"] .apg-marquee { animation: none !important; }
  [data-design="a"] .apg-logo__mark {
    background: none; -webkit-text-fill-color: var(--apg-ink); color: var(--apg-ink);
    animation: none !important;
  }
  [data-design="a"] .apg-pool { opacity: .45; }
  [data-design="a"] .apg-corona { opacity: .6; }
  [data-design="a"] .apg-sweep { opacity: .4; }
  [data-design="a"] .apg-pointer__lens { transform: translateY(2px); }
  [data-design="a"] .apg-pointer__iris { opacity: .6; }
  [data-design="a"] .apg-pointer__pupil { opacity: 1; }
  [data-design="a"] .apg-pointer.is-rerest .apg-pointer__lens { animation: none !important; }
  [data-design="a"] .apg-step {
    transition-duration: 120ms !important; filter: none !important; transform: none !important;
  }
  [data-design="a"] .apg-step .apg-opt,
  [data-design="a"] .apg-step[data-step="1"] .apg-opt { animation: none !important; }
  [data-design="a"] .apg-payoff__check,
  [data-design="a"] .apg-payoff__tick { animation: none !important; }
  [data-design="a"] .apg-payoff__tick { stroke-dashoffset: 0 !important; }
}

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

/* ════════════════════════════════════════════════════════
   DEFENSIVE — no horizontal scroll at any viewport ≥320px
   (appended LAST per build contract)
   ════════════════════════════════════════════════════════ */
[data-design="a"].dq-design,
[data-design="a"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="a"] * { min-width: 0; }
[data-design="a"] img,
[data-design="a"] svg:not([data-keep-size]) { max-width: 100%; height: auto; }