/* ============================================================
   Case Studies — Animated Score-Trail CTA
   Page-specific mechanic, and a deliberate contrast with Full
   Score's ring: that page teases an undisclosed score ("?")
   because the visitor's own score isn't known yet. This page
   is where a real, disclosed, already-published score trail
   lives — ConnectAfrica's 20/40 → 30/40 → 35/40 — so the
   resolution here is the opposite: the numbers climb, and they
   are shown plainly, held, never hidden. Same honesty principle,
   opposite conclusion, because the two pages are showing two
   different things.

   Badge and final status both borrow the page's own real closing
   line — "Scored, not asserted" — rather than inventing new copy.

   Same site-wide loop discipline as Full Score and Rebrand Sprint:
   - Loops continuously while in view, pauses off-screen and on
     tab-hide, resumes on return.
   - prefers-reduced-motion: static, fully resolved, no animation.
   - CTA button and copy are real DOM throughout.
   ============================================================ */

.cs-trail-cta{
  padding:54px 0;
  border-top:1px solid rgba(122,164,255,.14);
  background:
    radial-gradient(circle at 78% 48%,rgba(18,104,255,.13),transparent 24rem),
    linear-gradient(180deg,#040914 0%,#02050b 100%);
  isolation:isolate;
}
.cs-trail-cta::before,.cs-trail-cta::after{ display:none; }
.cs-cta-grid{ position:absolute; inset:0; z-index:-1; opacity:.2; pointer-events:none;
  background-image:linear-gradient(rgba(122,164,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(122,164,255,.03) 1px,transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(90deg,transparent,#000 45%,#000 100%); }

.cs-cta-shell{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr); gap:clamp(38px,5vw,72px); align-items:center; }
.cs-cta-copy{ text-align:left; max-width:650px; }
.cs-cta-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:13px; font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:#6f8daf; }
.cs-live-dot{ width:7px; height:7px; border-radius:50%; background:#45d7ff; box-shadow:0 0 13px rgba(69,215,255,.72); }
.cs-trail-cta h2{ margin:0 0 14px; font-size:clamp(2.2rem,3.9vw,3.85rem); line-height:.98; letter-spacing:-.06em; text-wrap:balance; }
.cs-trail-cta .cs-cta-copy>p{ max-width:54ch; margin:0; color:#aebbd1; font-size:clamp(.94rem,1.1vw,1.06rem); line-height:1.55; }
.cs-cta-actions{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin-top:23px; }
.cs-cta-button{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:14px; min-width:205px; }
.cs-cta-button::before{ content:""; position:absolute; inset:-1px; transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.cs-cta-button:hover::before{ transform:translateX(110%); }
.cs-cta-button i{ font-style:normal; transition:transform .22s ease; }
.cs-cta-button:hover i{ transform:translateX(4px); }
.cs-cta-assurance{ font-family:var(--mono); font-size:.61rem; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; color:#7186a5; }

/* ── The trail card ── */
.cs-trail-card{
  position:relative; overflow:hidden; min-height:258px;
  border:1px solid rgba(122,164,255,.25); border-radius:23px 23px 23px 7px;
  background:linear-gradient(145deg,rgba(10,22,42,.94),rgba(3,8,18,.93));
  box-shadow:0 24px 64px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04),0 0 60px rgba(18,104,255,.07);
  transform:translateY(10px) scale(.99); opacity:.72;
  transition:opacity .55s ease,transform .55s cubic-bezier(.1,.9,.2,1),border-color .55s ease;
}
.cs-trail-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 18% 28%,rgba(69,215,255,.075),transparent 34%); }
.cs-trail-cta.is-visible .cs-trail-card{ opacity:1; transform:none; border-color:rgba(69,215,255,.34); }

.cs-card-head{ position:relative; z-index:2; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:13px 17px; border-bottom:1px solid rgba(122,164,255,.12); font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:#6e85a6; }
.cs-trail-badge{ padding:5px 8px; border:1px solid rgba(69,215,255,.28); border-radius:999px; color:#9bdfff; background:rgba(69,215,255,.045); transition:border-color .5s ease,color .5s ease,background .5s ease; white-space:nowrap; }
.cs-trail-cta.is-complete .cs-trail-badge{ border-color:rgba(63,240,162,.34); color:#8ff4c6; background:rgba(63,240,162,.05); }

.cs-card-body{ position:relative; z-index:2; padding:20px 21px 18px; }

.cs-bars{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
.cs-bar-col{ display:flex; flex-direction:column; align-items:center; text-align:center; opacity:.4; transition:opacity .35s ease; }
.cs-bar-col.active{ opacity:1; }
.cs-bar-readout{ font-family:var(--display); font-size:1.55rem; letter-spacing:-.04em; color:#fff; line-height:1; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.cs-bar-readout small{ font-family:var(--mono); font-size:.6rem; font-weight:400; letter-spacing:.04em; color:#7188a9; }
.cs-bar-col.active .cs-bar-readout{ color:#45d7ff; text-shadow:0 0 14px rgba(69,215,255,.35); }
.cs-bar-track{ position:relative; width:100%; height:64px; border-radius:8px; background:#141f33; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); overflow:hidden; margin-bottom:10px; display:flex; align-items:flex-end; }
.cs-bar-fill{ width:100%; height:0%; border-radius:6px; background:linear-gradient(180deg,#45d7ff,#1268ff); box-shadow:0 0 10px rgba(69,215,255,.4); transition:height 1s cubic-bezier(.2,.8,.2,1); }
.cs-trail-cta.is-resetting .cs-bar-fill{ transition:none; height:0%; }
.cs-bar-col b{ font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; color:#4e89d8; display:block; }
.cs-bar-col span{ font-size:.7rem; color:#9eacc3; display:block; margin-top:2px; }

.cs-status-line{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:#7188a9; }
.cs-status-line::before{ content:""; width:6px; height:6px; border-radius:50%; background:#526782; transition:background .25s ease,box-shadow .25s ease; }
.cs-trail-cta.is-complete .cs-status-line{ color:#a8c6e9; }
.cs-trail-cta.is-complete .cs-status-line::before{ background:#3ff0a2; box-shadow:0 0 12px rgba(63,240,162,.62); }

.cs-scan-line{ position:absolute; z-index:3; top:0; bottom:0; left:0; width:1px; opacity:0;
  background:linear-gradient(transparent,#45d7ff,transparent); box-shadow:0 0 15px rgba(69,215,255,.75); pointer-events:none; }
.cs-trail-cta.is-scanning .cs-scan-line{ animation:csCardScan 2.1s cubic-bezier(.2,.8,.2,1) .08s both; }
@keyframes csCardScan{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 82%{ opacity:1; } 100%{ left:100%; opacity:0; } }

.cs-trail-cta.is-scanning:not(.is-complete) .cs-live-dot{ animation:csBlink .8s ease-in-out infinite; }
@keyframes csBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

@media (max-width:980px){
  .cs-trail-cta{ padding:52px 0; }
  .cs-cta-shell{ grid-template-columns:minmax(0,1fr) minmax(390px,.9fr); gap:34px; }
  .cs-trail-cta h2{ font-size:clamp(2.15rem,4.9vw,3.25rem); }
}
@media (max-width:780px){
  .cs-cta-shell{ grid-template-columns:1fr; gap:30px; }
  .cs-cta-copy{ max-width:680px; }
  .cs-trail-card{ max-width:620px; width:100%; }
}
@media (max-width:620px){
  .cs-trail-cta{ padding:46px 0 42px; }
  .cs-trail-cta h2{ font-size:clamp(2.2rem,11vw,3.2rem); }
  .cs-cta-actions{ align-items:stretch; margin-top:20px; }
  .cs-cta-button{ width:100%; justify-content:center; }
  .cs-cta-assurance{ width:100%; text-align:center; }
  .cs-trail-card{ min-height:0; border-radius:20px 20px 20px 6px; }
  .cs-card-head{ padding:12px 13px; font-size:.5rem; letter-spacing:.08em; gap:8px; }
  .cs-card-body{ padding:16px 13px 15px; }
  .cs-bars{ gap:8px; }
  .cs-bar-track{ height:48px; }
  .cs-bar-readout{ font-size:1.2rem; }
  .cs-bar-col span{ font-size:.62rem; }
}

@media (prefers-reduced-motion:reduce){
  .cs-trail-card,.cs-bar-col,.cs-bar-fill,.cs-cta-button::before,.cs-cta-button i{ transition:none !important; }
  .cs-live-dot,.cs-scan-line{ animation:none !important; }
  .cs-trail-card{ opacity:1; transform:none; }
  .cs-bar-col{ opacity:1; }
}