/* =============================================================
   fragmentation-tax.css — Pillar One campaign landing page
   /fragmentation-tax · August 2026

   The page runs inside the site shell — tokens.css → site.css → this
   file → v12.css (last). site.css owns the reset, base type, nav,
   buttons, the .field form vocabulary and the canonical CTA blade;
   everything here is the campaign blades only.

   ORDER MATTERS. v12.css is linked last and its R1 rules are element
   selectors ([data-v12] h2 = 0,1,1), so a plain .ft-* class (0,1,0)
   loses to them. Where a heading here needs a weight the scope would
   otherwise reset — the close-blade display h2, the panel title — the
   selector carries two classes to climb over it. Matching values are
   left to the scope on purpose.

   Colour discipline: red (--bud-red) appears in section 01 ONLY —
   it marks the problem state. Everything downstream is violet.
   ============================================================= */

.ft-page [hidden] { display: none !important; }

/* ---------- shared shell ---------- */
.ft-wrap { max-width: 1160px; margin: 0 auto; }
.ft-sec { padding: 88px 32px; border-bottom: 1px solid var(--border); }
.ft-lead { max-width: 720px; }

/* eyebrow — E2 square tick, never a pill, never mono */
.ft-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--bud-electric-2);
}
.ft-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }
.ft-eyebrow.is-problem { color: var(--bud-red); }
.ft-eyebrow.is-problem::before { background: var(--bud-red); }

.ft-h2 {
  font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -.02em;
  line-height: 1.15; color: var(--fg1); margin: 16px 0 14px; text-wrap: pretty;
}
.ft-h2 em { font-style: normal; color: var(--bud-electric-2); }  /* solid violet emphasis — never gradient text */
.ft-h2:last-child { margin-bottom: 0; }
.ft-sub { font-size: 15px; line-height: 1.55; margin: 0; max-width: 52ch; }
.ft-cap { font-size: 12px; color: var(--fg3); margin-top: 12px; }

/* ---------- forms ----------
   Both instances use the site's .field vocabulary (label / input /
   .req / .err) so they validate and read exactly like /demo. Only the
   campaign-specific trim lives here. */
.ft-form .field:last-of-type { margin-bottom: 20px; }
.ft-form .btn[disabled] { cursor: default; opacity: .72; }
/* the panel sits on --surface, so its inputs drop a step further down */
.ft-panel .field input { background: var(--bud-midnight-purple); }
.ft-form-err { margin: 12px 0 0; color: var(--bud-alert); }

@keyframes ft-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ═════════ HERO ═════════ */
.ft-hero {
  position: relative; background: var(--bud-midnight-purple);
  border-bottom: 1px solid var(--border);
}
/* functional darkening over the pixel field — clearspace by overlay,
   never by fading the motif itself */
.ft-hero::after, .ft-close::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.ft-hero::after {
  background: linear-gradient(180deg, rgba(10, 7, 18, .92) 0%, rgba(10, 7, 18, .7) 50%, rgba(10, 7, 18, .95) 100%);
}
/* 56px top matches the site's .page-hero rhythm under the sticky nav —
   the rail used to supply that gap, and no longer does */
.ft-hero-in { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: 56px 32px 72px; }

/* Campaign rail above the hero grid. It exists for the co-brand variant
   only, so by default it holds nothing and costs no height; it earns its
   spacing back only when a partner name is actually set. */
.ft-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ft-topbar:has(.ft-cobrand-name) { margin-bottom: 44px; }
.ft-cobrand-name { font-size: 13px; font-weight: 600; color: var(--fg1); letter-spacing: .02em; }
.ft-campaign { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--fg3); }

.ft-hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px 64px; align-items: center;
}
.ft-h1 {
  font-size: clamp(36px, 4.6vw, 54px); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.06; color: var(--fg1); margin: 18px 0 20px; max-width: 15ch; text-wrap: pretty;
}
.ft-hero-sub { font-size: 17px; line-height: 1.55; margin: 0; max-width: 46ch; color: var(--fg2); }

/* the form panel — the page's reason to exist */
.ft-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--accent); padding: 30px 30px 26px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  max-width: 460px; width: 100%; justify-self: end;
}
/* two classes so the -.01em survives [data-v12] h2's -.02em (0,1,1) */
.ft-panel .ft-panel-title { font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: var(--fg1); margin: 10px 0 16px; }
.ft-panel-list { display: flex; flex-direction: column; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.ft-panel-list li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.ft-panel-list li::before { content: ""; width: 6px; height: 6px; background: var(--bud-electric-2); flex: none; transform: translateY(-2px); }
.ft-form { display: flex; flex-direction: column; gap: 10px; margin: 0; position: relative; }

.ft-done { border-top: 1px solid var(--border); padding-top: 18px; animation: ft-fade 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.ft-done-head { display: flex; align-items: center; gap: 10px; }
.ft-done-head::before { content: ""; width: 8px; height: 8px; background: var(--bud-green); flex: none; }
.ft-done-head span { font-size: 16px; font-weight: 600; color: var(--fg1); }
.ft-done p { font-size: 13.5px; color: var(--fg2); margin: 10px 0 0; }
.ft-done p b { color: var(--fg1); font-weight: 600; overflow-wrap: anywhere; }

/* The unlocked guide. Only ever visible after a submit, so it isn't a second
   CTA competing with the form — it IS the thing the form promised. Bordered
   rather than solid: the page keeps one filled button. */
.ft-done-link {
  display: inline-block; margin-top: 16px; padding: 11px 20px;
  border: 1px solid var(--bud-electric); color: var(--bud-electric-2);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  transition: background 180ms ease, color 180ms ease;
}
.ft-done-link:hover { background: var(--bud-electric); color: #fff; }

/* ═════════ 01 · THE TAX, ITEMIZED ═════════
   Now an autoplay film — markup and styles live in ft-film.css under
   the .ftf-* scope. The static split layout, the count-up statement
   and their .ft-split/.ft-def/.ft-src/.ft-stmt/.ft-line rules retired
   with it. Red still appears in this section and nowhere else. */

/* ═════════ 02 · THE TOKEN PARADOX ═════════ */
.ft-chart { background: var(--bud-midnight-purple); border: 1px solid var(--border); padding: 32px 28px 24px; margin-top: 36px; }
.ft-chart svg { width: 100%; height: auto; display: block; }
.ft-legend {
  display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.ft-legend div { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--fg2); max-width: 46ch; }
.ft-legend i { width: 14px; height: 3px; flex: none; transform: translateY(-3px); }

/* the narration slot. Default (no JS, reduced motion): the two sentences
   simply stack. Armed: they share one cell and cross-fade on cue, so the
   panel never changes height mid-build. */
.ftc-caps { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ftc-cap { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg2); max-width: 54ch; text-wrap: pretty; }
.ftc-cap.is-close { color: var(--fg1); font-weight: 500; }
.ft-chart.is-armed .ftc-caps,
.ft-chart.is-done .ftc-caps { display: grid; }
.ft-chart.is-armed .ftc-cap,
.ft-chart.is-done .ftc-cap { grid-area: 1 / 1; align-self: start; }

/* armed hidden state — JS owns every opacity between here and is-done.
   Without JS none of this applies and the chart renders complete and still. */
.ft-chart.is-armed [data-ftc-frame],
.ft-chart.is-armed [data-ftc-end],
.ft-chart.is-armed [data-ftc-gap],
.ft-chart.is-armed [data-ftc-legend],
.ft-chart.is-armed .ftc-cap { opacity: 0; }

/* the resting frame. JS drops every inline style it set and swaps is-armed
   for this, so the chart lands back under CSS control: narration retired,
   conclusion held, everything else at its natural opacity. */
.ft-chart.is-done .ftc-cap { opacity: 0; }
.ft-chart.is-done .ftc-cap.is-close { opacity: 1; }
.ft-chart.is-done [data-ftc-gap] { opacity: .9; }

/* ═════════ 03 · THE FIX ═════════ */
.ft-sec.is-void { background: var(--bud-midnight-purple); }
.ft-ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; margin-top: 40px; }
.ft-ba-panel { border: 1px solid var(--border); background: var(--bud-midnight); padding: 20px; }
.ft-ba-panel.is-after { border-color: rgba(183, 133, 244, .4); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .55); }
.ft-ba-label { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--fg3); margin-bottom: 14px; }
.ft-ba-panel.is-after .ft-ba-label { color: var(--bud-electric-2); }
.ft-ba-panel svg { width: 100%; height: auto; display: block; }
.ft-ba-mid { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ft-stamp {
  align-self: center; background: var(--accent); color: var(--fg-on-accent);
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  padding: 8px 16px;
  box-shadow: 0 0 0 1px rgba(140, 51, 239, .35), 0 8px 32px rgba(140, 51, 239, .25);
}
.ft-rows { display: flex; flex-direction: column; gap: 8px; }
.ft-row { border-left: 4px solid var(--accent); background: var(--surface); padding: 14px 16px; }
.ft-row.is-2 { border-left-color: var(--bud-violet); }
.ft-row.is-3 { border-left-color: var(--bud-violet-deep); }
.ft-row b { display: block; font-size: 13.5px; font-weight: 600; color: var(--fg1); }
.ft-row span { display: block; font-size: 12px; color: var(--fg3); margin-top: 2px; }
.ft-row-out { border: 1px solid var(--border-strong); padding: 12px 16px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--bud-electric-2); }
.ft-tenets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
.ft-tenet { border-left: 4px solid var(--accent); background: var(--surface); padding: 18px 20px; font-size: 15px; font-weight: 600; color: var(--fg1); }

/* ── 04 · the three-beat loop ─────────────────────────────────
   The whole choreography is declared per step below; JS only writes
   data-step="1..3" on the section, on a looping clock with BudFilmNav
   step controls attached to .ftx-stage (no BudFilmProgress line — three
   slow beats don't need a timeline).
   Everything stays in the DOM and in layout the whole way
   through — only opacity and small offsets move — so the section never
   changes height mid-sequence. (The old opening beat — the Before stack
   alone with its promoted caption — was cut 19 Aug 2026; the loop opens
   on the router.)

   NOTHING here applies without a data-step attribute. No JS, reduced
   motion and ≤900px all render the complete static section: Before
   stack + its caption, stamp, After plane + its line, router, tenets. */
.ftx-stage { position: relative; display: grid; margin-top: 40px; }
.ftx-ba, .ftx-router { grid-area: 1 / 1; }
.ftx-ba { margin-top: 0; }
.ftx-midline { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--fg1); text-align: center; text-wrap: pretty; }
.ftx-note { max-width: 46ch; }

/* the router — ported from .hc-router/.hc-savings on the homepage hero,
   squared for v1.2 and with the mono label roles moved to Montserrat */
.ftx-router { align-self: center; }
.ftx-rt-plot { position: relative; height: clamp(200px, 22vw, 250px); }
.ftx-rt-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes ftxDash { to { stroke-dashoffset: -40; } }
.ftx-rt-in { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); line-height: 1.5; }
.ftx-rt-in b { color: var(--fg1); font-weight: inherit; }
.ftx-rt-chip { position: absolute; left: 34%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(183, 133, 244, .4); background: rgba(18, 14, 28, .9); padding: 9px 14px;
  text-align: center; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(140, 51, 239, .35), 0 0 18px rgba(140, 51, 239, .25); }
.ftx-rt-chip .t { font-size: 13px; font-weight: 700; color: var(--fg1); }
.ftx-rt-chip .s { margin-top: 3px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bud-electric-2); }
.ftx-rt-slm { position: absolute; left: 63.5%; top: 20%; transform: translateY(-50%); }
.ftx-rt-slm .big { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fg1); }
.ftx-rt-slm .t { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--fg1); }
.ftx-rt-slm .s { margin-top: 3px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--bud-electric-2); }
.ftx-rt-llm { position: absolute; left: 63.5%; right: 0; bottom: 0; }
.ftx-rt-llm .row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ftx-rt-llm .big { font-size: clamp(18px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fg2); }
.ftx-rt-llm .t { font-size: 13px; font-weight: 600; color: var(--fg2); }
.ftx-rt-llm .s { margin-top: 4px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg3); }
.ftx-savings { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border); }
.ftx-save { background: var(--surface); padding: 15px 18px; }
.ftx-save .n { font-size: clamp(19px, 2.1vw, 27px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fg1); }
.ftx-save .d { margin-top: 6px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg3); line-height: 1.5; }
.ftx-save.is-hi { background: linear-gradient(rgba(140, 51, 239, .14), rgba(140, 51, 239, .14)), var(--surface); }
.ftx-save.is-hi .d { color: var(--bud-electric-2); }

/* ── armed: JS is driving, so declare every step explicitly ── */
.ftx-sec[data-step] .ftx-ba { grid-template-columns: repeat(3, 1fr); align-items: center; }
/* LEAVING — a plain fade, in place. The offset is reset with a 0s
   transition delayed until the fade is over, so nothing is ever seen
   sliding backwards on its way out; it just dissolves. */
.ftx-sec[data-step] [data-ftx],
.ftx-sec[data-step] .ft-tenet {
  opacity: 0; transform: translateY(12px);
  transition: opacity .42s ease, transform 0s linear .42s;
}
/* the note only shows in the static (unarmed) section now; while armed it
   still needs a grid cell so auto-placement can't shuffle the row — it sits
   across the right-hand side, invisible, holding the layout still */
.ftx-sec[data-step] .ftx-note { grid-column: 2 / -1; grid-row: 1; align-self: center; max-width: 34ch; font-size: 14px; }
.ftx-sec[data-step] [data-ftx="mid"] { grid-column: 2; grid-row: 1; }
.ftx-sec[data-step] [data-ftx="after"] { grid-column: 3; grid-row: 1; }
/* BudFilmNav's veil exists to darken a motif behind film copy — this stage
   has no motif, and its scenes carry no z-index, so the injected veil would
   paint OVER the content instead of under it. Kill it here. The nav pill
   floats bottom-right, so the armed stage reserves room for it. */
.ftx-stage > .bud-film-veil { display: none; }
.ftx-sec[data-step] .ftx-stage { padding-bottom: 56px; }

/* ARRIVING — fade up, held back until the outgoing content has cleared.
   The .34s base delay is just under the .42s exit, so the two overlap by
   a hair instead of dissolving through each other. Per-element delays
   after that let each step arrive in reading order rather than all at
   once, which is what made the old version feel abrupt. */
.ftx-sec[data-step="1"] [data-ftx="router"],
.ftx-sec[data-step="2"] [data-ftx="before"],
.ftx-sec[data-step="2"] [data-ftx="mid"],
.ftx-sec[data-step="2"] [data-ftx="midline"],
.ftx-sec[data-step="2"] [data-ftx="after"],
.ftx-sec[data-step="3"] [data-ftx="before"],
.ftx-sec[data-step="3"] [data-ftx="mid"],
.ftx-sec[data-step="3"] [data-ftx="midline"],
.ftx-sec[data-step="3"] [data-ftx="after"],
.ftx-sec[data-step="3"] [data-ftx="tenets"],
.ftx-sec[data-step="3"] .ft-tenet {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ease-out-expo), transform .62s var(--ease-out-expo);
  transition-delay: .34s;
}

/* step 1 — the router; its dashed flow only runs while it is on screen */
.ftx-sec[data-step="1"] .ftx-dash { animation: ftxDash 1.5s linear infinite; }

/* step 2 — left to right: the stack, the stamp, its line, then the plane */
.ftx-sec[data-step="2"] [data-ftx="mid"] { transition-delay: .46s; }
.ftx-sec[data-step="2"] [data-ftx="after"] { transition-delay: .54s; }
.ftx-sec[data-step="2"] [data-ftx="midline"] { transition-delay: .66s; }

/* step 3 — the three tenets count in one after another */
.ftx-sec[data-step="3"] .ft-tenet:nth-child(1) { transition-delay: .40s; }
.ftx-sec[data-step="3"] .ft-tenet:nth-child(2) { transition-delay: .52s; }
.ftx-sec[data-step="3"] .ft-tenet:nth-child(3) { transition-delay: .64s; }

/* The sequence is a three-column story — below 900px it stacks, where the
   before/after transition has nothing left to say, so it never arms and the
   section renders static. The router's labels are absolutely positioned
   against the curve, which at 375px puts the chip on top of the "Requests"
   label, so they come out of position and stack. The curve goes with them:
   its only job is to connect the chip to the two outcomes, and once those
   are in a list it connects nothing. */
@media (max-width: 900px) {
  .ftx-sec[data-step] .ftx-ba { grid-template-columns: 1fr; }
  .ftx-router { margin-top: 24px; }
  .ftx-rt-plot { height: auto; display: grid; gap: 16px; }
  .ftx-rt-plot svg { display: none; }
  .ftx-rt-in, .ftx-rt-chip, .ftx-rt-slm, .ftx-rt-llm {
    position: static; transform: none; left: auto; right: auto; bottom: auto;
  }
  .ftx-rt-chip { justify-self: start; }
}

/* ═════════ GO DEEPER — promo cards ═════════
   Ported from the SENTRY product page, where this CSS is page-inline.
   Two v1.2 corrections on the way over: the hover LIFT retires (hover is
   a border/tint step only), and the radii come from --radius-* tokens so
   the [data-v12] purge squares them — v12.css already pins .pc-flag and
   .promo-card .icon-badge by name. */
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.promo-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 36px;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface);
  overflow: hidden; isolation: isolate; transition: border-color .18s ease, background .18s ease; }
a.promo-card:hover { border-color: var(--border-strong); background: var(--surface-elev); }
.promo-card .pc-motif { position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; z-index: 0; opacity: .35; pointer-events: none; }
.promo-card > * { position: relative; z-index: 1; }
.promo-card .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo-card .icon-badge { width: 52px; height: 52px; }
.promo-card .icon-badge i, .promo-card .icon-badge svg { width: 26px; height: 26px; }
.promo-card .pc-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); font-weight: 600; margin: 0 0 6px; }
.promo-card h3 { font-size: 26px; line-height: 1.12; letter-spacing: -.02em; margin: 0; color: var(--fg1); }
.promo-card .pc-sub { font-size: 14px; font-weight: 600; color: var(--bud-electric-2); margin: 6px 0 0; }
.promo-card p.pc-desc { font-size: 15.5px; line-height: 1.6; color: var(--fg2); margin: 0; }
.promo-card .pc-cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent); }
.promo-card .pc-cta i, .promo-card .pc-cta svg { width: 17px; height: 17px; }
.promo-card .pc-flag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.promo-card .pc-flag.ready { color: var(--accent); background: var(--accent-muted); }
.promo-card .pc-flag.soon { color: var(--fg3); border: 1px solid var(--border); }
@media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr; } }

/* ═════════ 05 · CLOSE ═════════ */
.ft-close { position: relative; background: var(--bud-midnight-purple); }
.ft-close::after {
  background: linear-gradient(180deg, rgba(10, 7, 18, .94) 0%, rgba(10, 7, 18, .78) 55%, rgba(10, 7, 18, .94) 100%);
}
.ft-close-in { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 96px 32px; text-align: center; }
.ft-close .ft-eyebrow { justify-content: center; }
/* display-scale close headline — two classes so 600/-.03em survives
   [data-v12] h2, which would otherwise reset it to 500/-.02em */
.ft-close .ft-close-title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--fg1); margin: 18px 0 12px; }
.ft-close-sub { font-size: 15px; color: var(--fg2); margin: 0 0 32px; }
/* three fields now, so the close form is a narrow centred column
   rather than the old single-field row */
.ft-close-form { max-width: 420px; margin: 0 auto; text-align: left; }
.ft-close-done {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-strong); background: rgba(30, 26, 43, .85);
  padding: 16px 24px; animation: ft-fade 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ft-close-done::before { content: ""; width: 8px; height: 8px; background: var(--bud-green); flex: none; }
.ft-close-done span { font-size: 15px; font-weight: 600; color: var(--fg1); }
.ft-close-done b { font-weight: 600; overflow-wrap: anywhere; }
/* the chip carries the link inline here, so drop the block spacing it needs
   in the hero panel and let the pair wrap on a narrow screen */
.ft-close-done { flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
.ft-close-done .ft-done-link { margin-top: 0; padding: 8px 15px; font-size: 12.5px; }
/* the quiet second ask — a text link, never a button. One CTA per page. */
.ft-quiet { font-size: 13px; color: var(--fg3); margin: 28px 0 0; }

/* ═════════ RESPONSIVE ═════════
   auto-fit does the column work; these steps only reclaim gutter and
   padding so the hero message + form survive intact at 375px. */
@media (max-width: 860px) {
  .ft-panel { justify-self: stretch; max-width: none; }
  .ft-hero-grid { gap: 40px; }
  .ft-ba-mid { padding: 4px 0; }
}
@media (max-width: 560px) {
  .ft-sec { padding: 64px 20px; }
  .ft-hero-in { padding: 40px 20px 56px; }
  .ft-close-in { padding: 72px 20px; }
  .ft-panel { padding: 24px 20px 22px; }
  .ft-chart { padding: 24px 18px 18px; }
  .ft-campaign { font-size: 10.5px; }
  .promo-card { padding: 26px 22px; }
}