/* tools/shared/footer-cta.css - sitewide footer conversion band (WhatsApp + Calendly).
   Additive: injected just above the existing <footer>. Scoped to the .rlt-fcta
   prefix so it never collides with tool/global styles. Height is reserved on the
   empty mount so JS fill-in causes zero layout shift. Three concepts:
     .rlt-fcta--b  loss framing  -> tool pages (WhatsApp-first + testimonial)
     .rlt-fcta--a  the rank jump -> blog / guides / industry / city (Calendly-first)
     .rlt-fcta--c  chat preview  -> homepage + tools hub (WhatsApp-first)
   Icon grammar: 1.75px stroke, squared terminals, ONE gold accent max. No emoji,
   no icon libraries. Brand tokens mirror styles.css / tokens.css.
   Per-concept min-heights reserve close to the rendered height so JS fill-in adds
   near-zero layout shift (the band sits just above the footer, below the fold). */

.rlt-fcta {
  --fc-navy: #0B132E;
  --fc-navy-card: #12203F;
  --fc-gold: #F7BF34;
  --fc-cream: #F4F1E9;
  --fc-wa: #25D366;
  --fc-wa-ink: #04342C;
  --fc-red: #E5484D;
  --fc-body: rgba(244,241,233,.68);
  --fc-micro: rgba(244,241,233,.58);
  --fc-line: rgba(244,241,233,.14);
  --fc-r: 14px;

  display: block;
  background: var(--fc-navy);
  color: var(--fc-cream);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 232px;                 /* floor; per-concept values below reserve closer */
  box-sizing: border-box;
}
/* Per-concept height reservations (desktop) - close to rendered height so JS
   fill-in causes near-zero layout shift. */
.rlt-fcta--a { min-height: 232px; }
.rlt-fcta--b { min-height: 288px; }
.rlt-fcta--c { min-height: 340px; }
.rlt-fcta *, .rlt-fcta *::before, .rlt-fcta *::after { box-sizing: border-box; }
.rlt-fcta svg { display: block; flex-shrink: 0; }

.rlt-fcta__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 24px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.rlt-fcta--b .rlt-fcta__inner { align-items: flex-start; }

.rlt-fcta__main { flex: 1; min-width: 260px; }
.rlt-fcta__eyebrow {
  font: 700 11px/1 'Geist', system-ui;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fc-gold); margin: 0 0 10px;
}
.rlt-fcta__head {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: clamp(20px, 3vw, 27px); line-height: 1.15;
  letter-spacing: -.01em; color: var(--fc-cream); margin: 0 0 8px;
}
.rlt-fcta__body { font-size: 14.5px; line-height: 1.55; color: var(--fc-body); margin: 0 0 16px; max-width: 560px; }
.rlt-fcta__micro {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10.5px/1.3 'Geist', system-ui; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fc-micro); margin: 12px 0 0;
}
.rlt-fcta__micro svg { width: 14px; height: 14px; }

/* ---- buttons ---- */
.rlt-fcta__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rlt-fcta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 800 14px/1 'Geist', system-ui; text-decoration: none;
  padding: 13px 22px; border-radius: 11px; min-height: 46px;   /* >=44px tap target */
  cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, background .15s ease;
}
.rlt-fcta__btn:hover { transform: translateY(-1px); }
.rlt-fcta__btn svg { width: 17px; height: 17px; }
.rlt-fcta__btn--wa { background: var(--fc-wa); color: var(--fc-wa-ink); }
.rlt-fcta__btn--gold { background: var(--fc-gold); color: var(--fc-navy); }
.rlt-fcta__btn--ghost { background: transparent; color: var(--fc-cream); border-color: rgba(244,241,233,.42); font-weight: 700; }  /* >=3:1 non-text contrast on navy */
.rlt-fcta__btn--ghost:hover { border-color: rgba(244,241,233,.7); }
/* Keyboard focus: explicit high-contrast ring (gold on navy). */
.rlt-fcta a:focus-visible { outline: 2px solid var(--fc-gold); outline-offset: 3px; border-radius: 12px; }
.rlt-fcta__textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 13px/1 'Geist', system-ui; color: var(--fc-cream); text-decoration: none; opacity: .92; min-height: 44px;
}
.rlt-fcta__textlink:hover { opacity: 1; text-decoration: underline; }
.rlt-fcta__textlink .fc-wa-ic { color: var(--fc-wa); }

/* ---- Concept A: rank jump ---- */
.rlt-fcta--a .rlt-fcta__badges { flex-shrink: 0; }
.rlt-fcta--a .rlt-fcta__actions { flex-direction: column; align-items: stretch; flex-shrink: 0; }
.rlt-fcta--a .rlt-fcta__textlink { justify-content: center; }

/* ---- Concept B: testimonial rail ---- */
.rlt-fcta--b .rlt-fcta__aside { flex-shrink: 0; min-width: 210px; max-width: 270px; }
.rlt-fcta__quote { display: flex; gap: 12px; margin-bottom: 12px; }
.rlt-fcta__quote-rule { width: 3px; border-radius: 2px; background: var(--fc-gold); flex-shrink: 0; }
.rlt-fcta__quote p { margin: 0; }
.rlt-fcta__quote-text { font-size: 13.5px; line-height: 1.45; color: var(--fc-cream); font-style: italic; }
.rlt-fcta__quote-cite { font: 700 10.5px/1.3 'Geist', system-ui; letter-spacing: .09em; text-transform: uppercase; color: var(--fc-micro); margin-top: 5px !important; }
.rlt-fcta__trust { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px/1.4 'Geist', system-ui; letter-spacing: .07em; text-transform: uppercase; color: var(--fc-micro); }
.rlt-fcta__trust svg { width: 15px; height: 15px; color: var(--fc-micro); }

/* ---- Concept C: chat preview card ---- */
.rlt-fcta--c .rlt-fcta__chat {
  flex-shrink: 0; width: 268px; background: var(--fc-navy-card);
  border: 1px solid var(--fc-line); border-radius: var(--fc-r); padding: 15px;
}
.rlt-fcta__chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.rlt-fcta__chat-head span { font: 700 10.5px/1 'Geist', system-ui; letter-spacing: .09em; text-transform: uppercase; color: var(--fc-micro); }
.rlt-fcta__bubble { border-radius: 11px; padding: 9px 12px; margin-bottom: 8px; max-width: 92%; }
.rlt-fcta__bubble p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fc-cream); }
.rlt-fcta__bubble--them { background: rgba(37,211,102,.14); border-radius: 11px 11px 11px 3px; }
.rlt-fcta__bubble--us { background: rgba(244,241,233,.08); border-radius: 11px 11px 3px 11px; margin-left: auto; }
.rlt-fcta__bubble--us b { color: var(--fc-red); }
.rlt-fcta__chat-foot { text-align: center; margin: 10px 0 0 !important; }

/* ---- responsive: 375px stack, full-width buttons, hide chat card < 480 ---- */
@media (max-width: 640px) {
  .rlt-fcta { min-height: 300px; }          /* stacked layouts run taller */
  .rlt-fcta--a { min-height: 340px; }
  .rlt-fcta--b { min-height: 430px; }
  .rlt-fcta--c { min-height: 360px; }
  .rlt-fcta__inner { gap: 20px; padding: 28px 18px; }
  .rlt-fcta__actions { width: 100%; }
  .rlt-fcta__btn { width: 100%; }
  .rlt-fcta--a .rlt-fcta__badges { align-self: center; }
  .rlt-fcta--b .rlt-fcta__aside { max-width: 100%; }
}
@media (max-width: 480px) {
  .rlt-fcta--c .rlt-fcta__chat { display: none; }   /* heading carries the message */
}
@media (prefers-reduced-motion: reduce) {
  .rlt-fcta__btn { transition: none; }
}