/* ============================================================
   DESIGN A — Old Guy Painting · Premium Funnel
   Design language: Counselor (contemporary boutique gravitas)
   Fraunces display · Inter body · JetBrains Mono labels
   Warm sand neutrals · forest-green + copper signal
   ALL selectors scoped [data-design="a"]. Keyframes: ca-*
   ============================================================ */

/* ── Fonts (Google Fonts — graceful system fallback) ─────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&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 */
  --ca-bg:         #F5F2EC;   /* surface */
  --ca-bg-deep:    #EAE5DA;   /* elevated surface, fields rest */
  --ca-bg-edge:    #DCD5C5;   /* border accents */
  --ca-paper:      #FBF9F4;   /* funnel container, cards */
  --ca-ink:        #181715;   /* ink primary */
  --ca-ink-soft:   #3A352F;   /* body */
  --ca-ink-mute:   #6B655C;   /* caption / mute */
  --ca-forest:     #1F3A2E;   /* editorial accent: italic, focus, check */
  --ca-forest-deep:#122821;   /* footer field, pointer terminal */
  --ca-copper:     #9C5A2E;   /* signal: arc, dot, pointer, hairline */
  --ca-copper-deep:#6E3D1A;   /* hover deepen */
  --ca-sand:       #C9BFA5;   /* warm mid-tone */
  --ca-rule:       rgba(24,23,21,.22);  /* hairline */
  --ca-rule-faint: rgba(24,23,21,.08);  /* faint separators */

  /* expose primary for chrome-kit toggle swatch */
  --design-a-primary: #1F3A2E;

  /* type */
  --ca-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ca-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ca-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* spacing  1/4/8/16/24/40/64/96/144 */
  --ca-hair:   1px;  --ca-tight:  4px;  --ca-snug:   8px;
  --ca-margin: 16px; --ca-gutter: 24px; --ca-bay:    40px;
  --ca-stanza: 64px; --ca-chapter:96px; --ca-folio: 144px;

  /* motion */
  --ca-ease-quiet:  cubic-bezier(.22,.65,.27,1);
  --ca-ease-settle: cubic-bezier(.2,.8,.2,1);
  --ca-ease-press:  cubic-bezier(.4,0,.2,1);
  --ca-d-press:    160ms;
  --ca-d-register: 260ms;
  --ca-d-settle:   500ms;
  --ca-d-arc:      700ms;

  /* radius */
  --ca-r-card: 4px;
  --ca-r-pill: 999px;
}

/* ════════════════════════════════════════════════════════
   ROOT / BASE
   ════════════════════════════════════════════════════════ */
[data-design="a"] {
  background: var(--ca-bg);
  color: var(--ca-ink-soft);
  font-family: var(--ca-body);
  font-size: clamp(17px, 1.4vw, 19px);
  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: italic; color: var(--ca-forest); font-variation-settings: "SOFT" 0; }
[data-design="a"] a { color: inherit; }

/* shared eyebrow */
[data-design="a"] .ca-eyebrow {
  font-family: var(--ca-body); font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ca-ink-mute);
  margin: 0 0 var(--ca-margin);
}

/* ════════════════════════════════════════════════════════
   ELEMENT 1 — HEADER (slim, progress-aware, chromatic breath)
   No nav. Logo carries a slow copper shimmer glint.
   ════════════════════════════════════════════════════════ */
[data-design="a"] .ca-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--ca-bg);
  border-bottom: 1px solid var(--ca-rule-faint);
  isolation: isolate;
}
[data-design="a"] .ca-header__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 200% at 12% 50%, rgba(31,58,46,.16), transparent 55%),
    radial-gradient(140% 220% at 92% 50%, rgba(156,90,46,.14), transparent 60%);
  animation: ca-header-wash 32s var(--ca-ease-quiet) infinite alternate;
  opacity: .8;
}
@keyframes ca-header-wash {
  0%   { background-position: 0% 50%, 100% 50%; opacity: .65; }
  50%  { background-position: 8% 52%, 92% 48%; opacity: 1; }
  100% { background-position: 0% 50%, 100% 50%; opacity: .8; }
}
[data-design="a"] .ca-header__bar {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
[data-design="a"] .ca-logo {
  display: inline-flex; align-items: baseline; gap: 10px; min-width: 0;
}
[data-design="a"] .ca-logo__mark {
  position: relative;
  font-family: var(--ca-display); font-weight: 400; font-size: clamp(16px, 4.2vw, 23px);
  font-variation-settings: "opsz" 40, "SOFT" 100;
  color: var(--ca-ink); letter-spacing: -.01em; white-space: nowrap; min-width: 0;
  /* shimmer glint */
  background: linear-gradient(100deg,
      var(--ca-ink) 0%, var(--ca-ink) 38%,
      var(--ca-copper) 50%,
      var(--ca-ink) 62%, var(--ca-ink) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ca-logo-shimmer 12s ease-in-out infinite;
}
@keyframes ca-logo-shimmer {
  0%, 86%, 100% { background-position: 150% 0; }
  93%           { background-position: -50% 0; }
}
[data-design="a"] .ca-logo__bar { width: 18px; height: 1px; background: var(--ca-copper); flex: none; align-self: center; }
[data-design="a"] .ca-logo__sub {
  font-family: var(--ca-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ca-ink-mute); white-space: nowrap;
}
[data-design="a"] .ca-progress { display: flex; align-items: center; gap: 12px; flex: none; }
[data-design="a"] .ca-progress__num {
  font-family: var(--ca-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ca-ink-mute); white-space: nowrap;
}
[data-design="a"] .ca-progress__bar {
  position: relative; display: block; width: clamp(64px, 18vw, 150px); height: 2px;
  background: var(--ca-rule-faint); border-radius: 2px; overflow: hidden;
}
[data-design="a"] .ca-progress__fill {
  position: absolute; inset: 0 auto 0 0; width: 20%;
  background: linear-gradient(90deg, var(--ca-forest), var(--ca-copper));
  border-radius: 2px;
  transition: width var(--ca-d-arc) var(--ca-ease-quiet);
}
@media (max-width: 600px) {
  [data-design="a"] .ca-logo__sub,
  [data-design="a"] .ca-logo__bar { display: none; }
  [data-design="a"] .ca-progress__num { font-size: 9.5px; letter-spacing: .1em; }
}

/* ════════════════════════════════════════════════════════
   FUNNEL SECTION — the funnel IS the page. Compass arc backdrop.
   ════════════════════════════════════════════════════════ */
[data-design="a"] .ca-funnel-section {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 56px);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(120px, 16vw, 160px);
  display: flex; flex-direction: column; justify-content: flex-start;
}
/* compass arc — quiet focal substrate (single non-text motif) */
[data-design="a"] .ca-arc {
  position: absolute; top: clamp(8px, 3vw, 40px); right: clamp(-40px, -2vw, 24px);
  width: clamp(220px, 30vw, 400px); aspect-ratio: 1/1; z-index: 0; opacity: .5;
  pointer-events: none;
}
[data-design="a"] .ca-arc svg { width: 100%; height: 100%; display: block; }
[data-design="a"] .ca-arc-line {
  stroke: var(--ca-copper); stroke-width: 1; fill: none;
  stroke-dasharray: 800; stroke-dashoffset: 800;
  animation: ca-arc-draw 2200ms 200ms var(--ca-ease-quiet) forwards,
             ca-arc-breath 11s 2400ms var(--ca-ease-quiet) infinite;
}
[data-design="a"] .ca-arc-line--inner {
  stroke: var(--ca-forest); opacity: .55; stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: ca-arc-draw 2400ms 700ms var(--ca-ease-quiet) forwards;
}
[data-design="a"] .ca-arc-tick { stroke: var(--ca-ink); stroke-width: 1; opacity: 0; animation: ca-arc-fade 1400ms 2200ms var(--ca-ease-quiet) forwards; }
[data-design="a"] .ca-arc-label {
  fill: var(--ca-ink-mute); font-family: var(--ca-mono); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase; opacity: 0;
  animation: ca-arc-fade 1400ms 2700ms var(--ca-ease-quiet) forwards;
}
@keyframes ca-arc-draw  { to { stroke-dashoffset: 0; } }
@keyframes ca-arc-breath{ 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes ca-arc-fade  { to { opacity: 1; } }
@media (max-width: 720px) {
  [data-design="a"] .ca-arc { width: clamp(170px, 52vw, 260px); opacity: .32; top: 0; }
}

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

/* value-prop / Step-1 hero text — FLOORED VISIBLE at first paint */
[data-design="a"] .ca-vp { opacity: 1; margin-bottom: clamp(20px, 3vw, 30px); }
[data-design="a"] .ca-vp__head {
  margin: 0 0 var(--ca-margin);
  font-family: var(--ca-display); font-weight: 300;
  font-size: clamp(30px, 5.4vw, 52px); line-height: 1.04; letter-spacing: -.012em;
  font-variation-settings: "opsz" 80, "SOFT" 100; color: var(--ca-ink);
  max-width: 18ch;
}
[data-design="a"] .ca-vp__sub {
  margin: 0; font-size: clamp(15px, 1.6vw, 17px); color: var(--ca-ink-mute);
  max-width: 46ch;
}

/* ── Funnel container — Counselor's single drop shadow ───── */
[data-design="a"] .ca-funnel {
  position: relative;
  background: var(--ca-paper);
  border: 1px solid var(--ca-rule-faint); border-radius: var(--ca-r-card);
  box-shadow: 0 30px 60px -40px rgba(24,23,21,.20);
  padding: clamp(20px, 4vw, 34px);
}

/* ════════════════════════════════════════════════════════
   THE SIGNATURE POINTER — the ONE bold element.
   Rests above the form on every step; swings to point in.
   ════════════════════════════════════════════════════════ */
[data-design="a"] .ca-pointer {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 auto clamp(10px, 2vw, 16px); width: max-content;
  pointer-events: none;
}
[data-design="a"] .ca-pointer__label {
  font-family: var(--ca-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ca-copper);
  opacity: .9;
}
[data-design="a"] .ca-pointer__needle { display: block; width: 26px; height: 38px; color: var(--ca-copper); }
[data-design="a"] .ca-pointer__needle svg { width: 100%; height: 100%; display: block; overflow: visible; }
[data-design="a"] .ca-pointer__ring  { stroke: var(--ca-copper); stroke-width: 1.4; fill: none; opacity: .55; }
[data-design="a"] .ca-pointer__arrow { stroke: var(--ca-copper); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
[data-design="a"] .ca-pointer__hub   { fill: var(--ca-forest); }
/* the personality: a slow wind-up, a decisive dip, a settle — looped */
[data-design="a"] .ca-pointer__needle {
  transform-origin: 50% 38%;
  animation: ca-needle 4.2s var(--ca-ease-settle) infinite;
}
@keyframes ca-needle {
  0%   { transform: translateY(0) rotate(-7deg); }
  18%  { transform: translateY(-2px) rotate(-9deg); }   /* anticipation: lift + wind back */
  40%  { transform: translateY(5px) rotate(2deg); }     /* follow-through: decisive dip toward form */
  56%  { transform: translateY(2px) rotate(0deg); }     /* overshoot settle */
  72%  { transform: translateY(3px) rotate(1deg); }     /* a beat of wit — small second nod */
  100% { transform: translateY(0) rotate(-7deg); }
}
[data-design="a"] .ca-pointer__ring {
  transform-origin: 14px 14px;
  animation: ca-needle-ring 4.2s var(--ca-ease-quiet) infinite;
}
@keyframes ca-needle-ring {
  0%,100% { opacity: .35; transform: scale(1); }
  40%     { opacity: .7;  transform: scale(1.08); }
}
/* re-rest pulse fired on each step change (JS toggles .is-rerest) */
[data-design="a"] .ca-pointer.is-rerest .ca-pointer__needle { animation: ca-needle-rerest 760ms var(--ca-ease-settle); }
@keyframes ca-needle-rerest {
  0%   { transform: translateY(-9px) rotate(-22deg); opacity: 0; }
  45%  { transform: translateY(6px)  rotate(5deg);   opacity: 1; }
  70%  { transform: translateY(1px)  rotate(-2deg); }
  100% { transform: translateY(0)    rotate(-7deg); }
}

/* ════════════════════════════════════════════════════════
   STEP VIEWPORT + steps (forward-progressive transitions)
   ════════════════════════════════════════════════════════ */
[data-design="a"] .ca-funnel__viewport {
  position: relative;
  display: grid;            /* all steps stacked in one cell */
}
[data-design="a"] .ca-step {
  grid-area: 1 / 1;
  border: 0; margin: 0; padding: 0; min-inline-size: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
  transition: opacity var(--ca-d-settle) var(--ca-ease-quiet),
              transform var(--ca-d-settle) var(--ca-ease-quiet),
              visibility 0s linear var(--ca-d-settle);
}
/* STEP 1 floored visible at FIRST PAINT (no JS-reveal-gate) — but only
   until JS explicitly deactivates it (data-active="false"). This keeps the
   hero visible on load yet lets the step machine hide it when advancing. */
[data-design="a"] .ca-step[data-step="1"]:not([data-active="false"]) {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: none;
}
/* Explicitly deactivated steps are hidden + non-interactive (authoritative). */
[data-design="a"] .ca-step[data-active="false"] {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px);
  transition: opacity var(--ca-d-settle) var(--ca-ease-quiet),
              transform var(--ca-d-settle) var(--ca-ease-quiet),
              visibility 0s linear var(--ca-d-settle);
}
/* JS sets data-active="true" on the live step */
[data-design="a"] .ca-step[data-active="true"] {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity var(--ca-d-settle) var(--ca-ease-settle),
              transform var(--ca-d-settle) var(--ca-ease-settle),
              visibility 0s;
}
[data-design="a"] .ca-step__q {
  display: block; float: none; width: 100%; padding: 0; margin: 0 0 var(--ca-snug);
  font-family: var(--ca-display); font-weight: 400;
  font-size: clamp(21px, 3vw, 28px); line-height: 1.18; letter-spacing: -.01em;
  font-variation-settings: "opsz" 48, "SOFT" 100; color: var(--ca-ink);
}
[data-design="a"] .ca-step__help {
  margin: 0 0 var(--ca-gutter); font-size: 14px; color: var(--ca-ink-mute); max-width: 46ch;
}

/* ── Option buttons (Element 2) — pill + copper dot ──────── */
[data-design="a"] .ca-opts { display: flex; flex-direction: column; gap: 12px; }
[data-design="a"] .ca-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 58px; padding: 16px 22px;
  background: var(--ca-bg); color: var(--ca-ink);
  border: 1px solid var(--ca-bg-edge); border-radius: var(--ca-r-pill);
  font-family: var(--ca-body); font-size: 16px; font-weight: 500; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--ca-d-press) var(--ca-ease-press),
              border-color var(--ca-d-press) var(--ca-ease-press),
              transform var(--ca-d-press) var(--ca-ease-press),
              box-shadow var(--ca-d-press) var(--ca-ease-press);
}
[data-design="a"] .ca-opt__label { line-height: 1.25; }
[data-design="a"] .ca-opt__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--ca-copper); opacity: 0; transform: translateX(-4px);
  transition: opacity var(--ca-d-press) var(--ca-ease-press),
              transform var(--ca-d-press) var(--ca-ease-press);
}
[data-design="a"] .ca-opt:hover {
  background: var(--ca-bg-deep); border-color: var(--ca-ink); transform: translateY(-1px);
}
[data-design="a"] .ca-opt:hover .ca-opt__dot { opacity: 1; transform: translateX(0); }
[data-design="a"] .ca-opt:focus-visible { outline: 2px solid var(--ca-copper); outline-offset: 3px; }
[data-design="a"] .ca-opt:active { transform: translateY(0) scale(.99); transition-duration: 60ms; }
/* selected stamp — copper dot fills + checked persists briefly */
[data-design="a"] .ca-opt.is-selected {
  background: var(--ca-forest); border-color: var(--ca-forest); color: var(--ca-paper);
}
[data-design="a"] .ca-opt.is-selected .ca-opt__dot { opacity: 1; transform: translateX(0); background: var(--ca-copper); }

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

/* ── Contact fields ──────────────────────────────────────── */
[data-design="a"] .ca-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
[data-design="a"] .ca-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-design="a"] .ca-field--full { grid-column: 1 / -1; }
[data-design="a"] .ca-field__label {
  font-family: var(--ca-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ca-ink-mute);
}
[data-design="a"] .ca-field__opt { text-transform: none; letter-spacing: 0; color: var(--ca-sand); }
[data-design="a"] .ca-field__input {
  width: 100%; min-height: 56px; padding: 14px 16px;
  background: var(--ca-bg); color: var(--ca-ink);
  border: 1px solid var(--ca-bg-edge); border-radius: var(--ca-r-card);
  font-family: var(--ca-body); font-size: 16px;
  transition: border-color var(--ca-d-press) var(--ca-ease-press), box-shadow var(--ca-d-press) var(--ca-ease-press);
}
[data-design="a"] .ca-field__input::placeholder { color: var(--ca-sand); }
[data-design="a"] .ca-field__input:focus {
  outline: none; border-color: var(--ca-forest);
  box-shadow: 0 0 0 3px rgba(31,58,46,.12);
}
[data-design="a"] .ca-step__err {
  margin: 14px 0 0; font-size: 13.5px; color: var(--ca-copper-deep); font-weight: 500;
}
[data-design="a"] .ca-step__actions { margin-top: clamp(18px, 3vw, 24px); }

/* ── CTA (Element 2 end-of-funnel) — magnetic ink pill ───── */
[data-design="a"] .ca-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 18px 26px; justify-content: center;
  background: var(--ca-ink); color: var(--ca-bg);
  font-family: var(--ca-body); font-size: 16px; font-weight: 600; letter-spacing: -.005em;
  border: 0; border-radius: var(--ca-r-pill); cursor: pointer; text-decoration: none;
  isolation: isolate; overflow: hidden; text-align: center;
  transition: transform var(--ca-d-press) var(--ca-ease-press);
  animation: ca-cta-breath 5.4s var(--ca-ease-quiet) infinite;
}
[data-design="a"] .ca-cta__bg {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(120px 120px at var(--ca-cta-x, 50%) var(--ca-cta-y, 50%), rgba(156,90,46,.5), transparent 70%);
  opacity: 0; transition: opacity var(--ca-d-register) var(--ca-ease-press);
}
[data-design="a"] .ca-cta:hover .ca-cta__bg { opacity: 1; }
[data-design="a"] .ca-cta__label { position: relative; z-index: 1; }
[data-design="a"] .ca-cta__dot {
  position: relative; z-index: 1; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ca-copper); flex: none;
  transition: transform var(--ca-d-register) var(--ca-ease-press), background var(--ca-d-press) var(--ca-ease-press);
}
[data-design="a"] .ca-cta:hover .ca-cta__dot { transform: translateX(3px) scale(1.25); background: var(--ca-bg); }
[data-design="a"] .ca-cta:active { transform: translateY(1px) scale(.99); }
[data-design="a"] .ca-cta:focus-visible { outline: 2px solid var(--ca-copper); outline-offset: 3px; }
@keyframes ca-cta-breath { 0%,100% { box-shadow: 0 0 0 0 rgba(156,90,46,0); } 50% { box-shadow: 0 0 0 7px rgba(156,90,46,.10); } }

/* ── Back control ────────────────────────────────────────── */
[data-design="a"] .ca-funnel__foot { margin-top: var(--ca-margin); min-height: 24px; }
[data-design="a"] .ca-back {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--ca-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ca-ink-mute); padding: 8px 4px;
  transition: color var(--ca-d-press) var(--ca-ease-press);
}
[data-design="a"] .ca-back:hover { color: var(--ca-forest); }
[data-design="a"] .ca-back:focus-visible { outline: 2px solid var(--ca-copper); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════
   PAYOFF — forest completion check + phone-call reveal
   ════════════════════════════════════════════════════════ */
[data-design="a"] .ca-payoff { text-align: center; }
[data-design="a"] .ca-payoff__check {
  width: 64px; height: 64px; margin: 0 auto var(--ca-gutter); border-radius: 50%;
  background: var(--ca-forest); color: var(--ca-bg);
  display: grid; place-items: center;
}
[data-design="a"] .ca-payoff__check svg { width: 34px; height: 34px; }
[data-design="a"] .ca-step[data-active="true"].ca-payoff .ca-payoff__check { animation: ca-check-pop 600ms var(--ca-ease-settle) both; }
[data-design="a"] .ca-step[data-active="true"].ca-payoff .ca-payoff__tick {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: ca-tick 460ms 240ms var(--ca-ease-settle) forwards;
}
@keyframes ca-check-pop { 0% { transform: scale(0); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ca-tick { to { stroke-dashoffset: 0; } }
[data-design="a"] .ca-payoff__head {
  margin: 0 0 var(--ca-snug); font-family: var(--ca-display); font-weight: 300;
  font-size: clamp(24px, 4vw, 38px); line-height: 1.1; letter-spacing: -.01em;
  font-variation-settings: "opsz" 60, "SOFT" 100; color: var(--ca-ink);
}
[data-design="a"] .ca-payoff__sub {
  margin: 0 auto var(--ca-bay); font-size: clamp(15px, 1.6vw, 17px); color: var(--ca-ink-mute);
  max-width: 42ch;
}
[data-design="a"] .ca-cta--call { background: var(--ca-forest); }
[data-design="a"] .ca-payoff__alt { margin: var(--ca-gutter) 0 0; font-size: 13px; color: var(--ca-ink-mute); }

/* ════════════════════════════════════════════════════════
   ELEMENT 4 — REASSURANCE BAR (below funnel) — real signals
   ════════════════════════════════════════════════════════ */
[data-design="a"] .ca-reassure {
  background: var(--ca-bg-deep); border-top: 1px solid var(--ca-rule-faint);
  border-bottom: 1px solid var(--ca-rule-faint);
  padding: clamp(40px, 6vw, 64px) 0;
  overflow: hidden;
}
[data-design="a"] .ca-reassure__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
}
[data-design="a"] .ca-reassure__lede { max-width: 640px; margin: 0 0 var(--ca-bay); }
[data-design="a"] .ca-reassure__line {
  margin: 0; font-family: var(--ca-display); font-weight: 300;
  font-size: clamp(20px, 2.8vw, 30px); line-height: 1.25; letter-spacing: -.01em;
  font-variation-settings: "opsz" 48, "SOFT" 100; color: var(--ca-ink);
}
/* marquee — slow horizontal drift (Element 4 ambient) */
[data-design="a"] .ca-marquee {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 14px; width: max-content;
  animation: ca-marquee 36s linear infinite;
}
[data-design="a"] .ca-marquee.is-paused { animation-play-state: paused; }
@keyframes ca-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-design="a"] .ca-fact {
  flex: none; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 22px; background: var(--ca-paper);
  border: 1px solid var(--ca-rule-faint); border-radius: var(--ca-r-card);
}
[data-design="a"] .ca-fact__v {
  font-family: var(--ca-display); font-weight: 400; font-size: 20px;
  font-variation-settings: "opsz" 36, "SOFT" 60; color: var(--ca-forest); white-space: nowrap;
}
[data-design="a"] .ca-fact__k {
  font-family: var(--ca-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ca-ink-mute); white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   FOOTER (minimal) — forest-deep field
   ════════════════════════════════════════════════════════ */
[data-design="a"] .ca-footer {
  background: var(--ca-forest-deep); color: var(--ca-bg);
  padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 40px);
}
[data-design="a"] .ca-footer__inner { max-width: 1240px; margin: 0 auto; }
[data-design="a"] .ca-footer__firm {
  margin: 0 0 var(--ca-margin); font-family: var(--ca-display); font-weight: 400;
  font-size: clamp(22px, 3vw, 30px); font-variation-settings: "opsz" 48, "SOFT" 100;
  color: var(--ca-bg);
}
[data-design="a"] .ca-footer__line,
[data-design="a"] .ca-footer__area,
[data-design="a"] .ca-footer__copy { margin: 0 0 var(--ca-snug); font-size: 14px; color: rgba(245,242,236,.78); }
[data-design="a"] .ca-footer__line a { color: var(--ca-bg); text-decoration: none; border-bottom: 1px solid rgba(245,242,236,.3); }
[data-design="a"] .ca-footer__line a:hover { color: var(--ca-copper); border-color: var(--ca-copper); }
[data-design="a"] .ca-footer__sep { color: rgba(245,242,236,.4); margin: 0 6px; }
[data-design="a"] .ca-footer__copy { font-size: 12.5px; color: rgba(245,242,236,.55); margin-top: var(--ca-margin); }

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

/* ════════════════════════════════════════════════════════
   REDUCED MOTION — every animation has a fallback
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .ca-header__wash,
  [data-design="a"] .ca-arc-line,
  [data-design="a"] .ca-arc-line--inner,
  [data-design="a"] .ca-pointer__needle,
  [data-design="a"] .ca-pointer__ring,
  [data-design="a"] .ca-cta,
  [data-design="a"] .ca-marquee {
    animation: none !important;
  }
  [data-design="a"] .ca-logo__mark {
    background: none; -webkit-text-fill-color: var(--ca-ink); color: var(--ca-ink);
    animation: none !important;
  }
  [data-design="a"] .ca-arc-line,
  [data-design="a"] .ca-arc-line--inner { stroke-dashoffset: 0 !important; }
  [data-design="a"] .ca-arc-tick,
  [data-design="a"] .ca-arc-label { opacity: 1 !important; animation: none !important; }
  [data-design="a"] .ca-pointer__needle { transform: translateY(2px) rotate(0deg); }
  [data-design="a"] .ca-pointer__ring { opacity: .5; }
  [data-design="a"] .ca-pointer.is-rerest .ca-pointer__needle { animation: none !important; }
  [data-design="a"] .ca-step {
    transition-duration: 120ms !important;
    transform: none !important;
  }
  [data-design="a"] .ca-step .ca-opt,
  [data-design="a"] .ca-step[data-step="1"] .ca-opt { animation: none !important; }
  [data-design="a"] .ca-payoff__check,
  [data-design="a"] .ca-payoff__tick { animation: none !important; }
  [data-design="a"] .ca-payoff__tick { stroke-dashoffset: 0 !important; }
}

/* ════════════════════════════════════════════════════════
   DEFENSIVE — no horizontal scroll at any viewport ≥320px
   ════════════════════════════════════════════════════════ */
[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; }

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