/* ══ Closing CTA ════════════════════════════════════════════════════════
   Ported from the design file; the positions, depths, easings and timings
   are its numbers.

   The cards, the toasts and the word behind them are placed and moved from
   js/cta.js — their coordinates change with the breakpoint, so they are not
   written here. This file owns the shapes, the hovers and the parts that
   must stand still when motion is turned off. ───────────────────────────── */

.cta2 {
  position: relative; overflow: hidden; isolation: isolate;
  background: #EAEDF7; color: #241C3E; text-align: center;
  padding: clamp(120px, 13vw, 200px) clamp(20px, 4vw, 56px);
  font-family: 'Instrument Sans', 'Montserrat', system-ui, sans-serif;
}
/* Narrow: the cards move above and below the words instead of beside them,
   so the section needs far more room top and bottom. */
@media (max-width: 1279px) {
  .cta2 { padding: clamp(200px, 40vw, 260px) 20px clamp(190px, 38vw, 250px); }
}

.cta2-bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.cta2-wash {
  position: absolute; left: 50%; top: 50%; width: 1200px; height: 900px;
  margin: -450px 0 0 -600px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.cta2-glow {
  position: absolute; left: 50%; bottom: -320px; width: 1100px; height: 640px;
  margin-left: -550px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(107,59,242,.2), rgba(107,59,242,0));
}
.cta2-wordwrap { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; }
.cta2-word {
  display: flex; gap: 60px; width: max-content; will-change: transform;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(140px, 22vw, 320px); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(107,59,242,.16);
}

/* ── The floating cards ───────────────────────────────────────────────── */
.cta2-cards { position: absolute; inset: 0; pointer-events: none; }
.cta2-card { position: absolute; max-width: 300px; }
@media (max-width: 1279px) { .cta2-card { max-width: 44vw; } }
.cta2-float { will-change: transform; }
.cta2-glass {
  pointer-events: auto;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.95); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(36,28,62,.05), 0 24px 50px -18px rgba(36,28,62,.28);
  padding: 16px 18px; text-align: left; display: flex; flex-direction: column; gap: 8px;
  transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .6s;
}
.cta2-glass:hover {
  box-shadow: 0 1px 2px rgba(36,28,62,.05), 0 36px 64px -18px rgba(107,59,242,.4);
}
.cta2-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: #8A819F; }
.cta2-num { font-family: 'Instrument Serif', serif; line-height: .9; color: #241C3E;
  font-variant-numeric: tabular-nums; }
.cta2-row { display: flex; align-items: baseline; gap: 8px; }
.cta2-sub { font-size: 12.5px; color: #6E6688; }
.cta2-unit { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; color: #6B3BF2; }
.cta2-strong { font-size: 13.5px; font-weight: 600; color: #241C3E; }
.cta2-meter { position: relative; display: block; width: 190px; max-width: 100%; height: 6px;
  border-radius: 6px; background: rgba(107,59,242,.12); overflow: hidden; }
.cta2-meter span { position: absolute; inset: 0; border-radius: 6px; transform-origin: left;
  background: linear-gradient(90deg, #6B3BF2, #3BC4F2); }
.cta2-faces { display: flex; align-items: center; }
.cta2-face { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.cta2-face + .cta2-face { margin-left: -10px; }
.cta2-pills { display: flex; flex-wrap: wrap; gap: 6px; max-width: 250px; }
.cta2-pill { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px;
  background: rgba(107,59,242,.08); font-size: 12.5px; font-weight: 600; color: #241C3E; }
.cta2-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cta2-meal { display: grid; grid-template-columns: auto 150px auto; align-items: center;
  gap: 8px 10px; font-size: 12.5px; color: #241C3E; }
.cta2-meal b { font-weight: 600; }
.cta2-meal i { font-style: normal; font-variant-numeric: tabular-nums; color: #6E6688; }
.cta2-track { position: relative; height: 6px; border-radius: 6px;
  background: rgba(107,59,242,.1); overflow: hidden; }
.cta2-track span { position: absolute; inset: 0; border-radius: 6px; transform-origin: left; }
.cta2-live { display: flex; align-items: center; gap: 12px; }
.cta2-ping { position: relative; width: 12px; height: 12px; flex: none; }
.cta2-ping span { position: absolute; border-radius: 50%; background: #3BC4F2; }
.cta2-ping span:first-child { inset: 0; }
.cta2-ping span:last-child { inset: 2px; }

/* ── Toasts ───────────────────────────────────────────────────────────── */
.cta2-toast {
  position: absolute; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 99px; background: #fff;
  box-shadow: 0 16px 40px -12px rgba(36,28,62,.35), 0 0 0 1px rgba(36,28,62,.06);
  white-space: nowrap; text-align: left;
}
.cta2-toast-av { width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.cta2-toast-t { display: flex; flex-direction: column; gap: 1px; }
.cta2-toast-n { font-size: 13px; font-weight: 600; color: #241C3E; }
.cta2-toast-w { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6E6688; }

/* ── The words ────────────────────────────────────────────────────────── */
.cta2-in { position: relative; z-index: 10; max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; }
.cta2-eyebrow { margin: 0 0 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; color: #6B3BF2; }
/* styles.css sets `color` on h1-h4 directly and a type selector beats an
   inherited one, so the heading states its own. */
.cta2 h2 {
  margin: 0 0 24px; font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(48px, 7.4vw, 112px); line-height: .98; letter-spacing: -.015em; color: #241C3E;
}
.cta2-l1 { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.cta2-l2 { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.cta2 h2 [data-mask] { display: inline-block; }
.cta2-sheen {
  font-style: italic; padding-right: .04em;
  background: linear-gradient(100deg, #6B3BF2 0%, #8B5CFF 30%, #3BC4F2 50%, #8B5CFF 70%, #6B3BF2 100%);
  background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta2-stop { color: #6B3BF2; }
.cta2-lede { margin: 0 auto 40px; max-width: 520px; font-size: 17px; line-height: 1.65;
  color: #6E6688; text-wrap: pretty; }
.cta2-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta2-go {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 16px 34px; border-radius: 99px; background: #6B3BF2; color: #fff;
  font-size: 16px; font-weight: 600; text-decoration: none;
  box-shadow: 0 16px 44px rgba(107,59,242,.42);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s, background-color .3s;
}
.cta2-go:hover { background: #7A4CFF; box-shadow: 0 22px 54px rgba(107,59,242,.55); color: #fff; }
.cta2-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  transform: translateX(-140%);
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); }
.cta2-in2 {
  display: flex; align-items: center; min-height: 58px; padding: 16px 34px; border-radius: 99px;
  border: 1px solid rgba(36,28,62,.22); background: rgba(255,255,255,.55); color: #241C3E;
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: border-color .3s, color .3s, background-color .3s, transform .5s cubic-bezier(.16,1,.3,1);
}
.cta2-in2:hover { border-color: #6B3BF2; color: #6B3BF2; background: #fff; transform: translateY(-2px); }
.cta2 a:focus-visible { outline: 2px solid #6B3BF2; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cta2-glass, .cta2-go, .cta2-in2 { transition: none !important; }
}