/* ==========================================================================
   QUOTARIDER — ENTERPRISE VISUAL LAYER
   Data-forward marketing components. Same tokens, same palette.
   Load AFTER theme.css + viz.css
   ========================================================================== */

/* ─────────────────────────────────────────────
   1. STAT BAND — the "problem, in numbers" strip
   ───────────────────────────────────────────── */
.band{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; margin:0;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--line); overflow:hidden;
}
.band-cell{
  padding:28px 24px; background:var(--bg-2);
  transition:var(--t); position:relative;
}
.band-cell:hover{ background:var(--bg-3); }
.band-cell::after{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--violet); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
.band-cell:hover::after{ transform:scaleY(1); }
.band-n{
  font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:800;
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--violet-2);
}
.band-n.r{ color:var(--red); }
.band-n.g{ color:var(--green); }
.band-n.a{ color:var(--amber); }
.band-l{
  margin-top:9px; font-size:.84rem; font-weight:600;
  color:var(--text); line-height:1.4;
}
.band-s{
  margin-top:5px; font-size:.75rem; color:var(--text-3); line-height:1.5;
}

/* ─────────────────────────────────────────────
   2. PROBLEM CARD — assertion + proof
   ───────────────────────────────────────────── */
.prob{
  padding:30px; border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
  transition:var(--t); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.prob:hover{ border-color:var(--line-violet); transform:translateY(-3px); }
.prob-stat{
  font-size:clamp(2.2rem,4vw,3rem); font-weight:800;
  letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--red);
}
.prob-stat.a{ color:var(--amber); }
.prob-stat.v{ color:var(--violet-2); }
.prob h4{
  margin:14px 0 10px; font-size:1.08rem; line-height:1.35;
}
.prob p{ font-size:.89rem; line-height:1.65; flex:1; }
.prob-src{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--text-3); font-style:italic;
}

/* ─────────────────────────────────────────────
   3. SPLIT PROOF — before / after, side by side
   ───────────────────────────────────────────── */
.proof{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:0; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.proof-side{ padding:32px; }
.proof-side.bad{ background:rgba(248,113,113,.045); }
.proof-side.good{ background:rgba(52,211,153,.045); }
.proof-vs{
  display:grid; place-items:center; padding:0 20px;
  background:var(--bg-2); border-inline:1px solid var(--line);
  font-family:var(--serif); font-style:italic;
  font-size:1.1rem; color:var(--text-3);
}
.proof-side h4{ font-size:1.02rem; margin-bottom:16px; }
.proof-side .cmp-tag{ margin-bottom:14px; }
.proof-list{ display:flex; flex-direction:column; gap:11px; }
.proof-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.88rem; line-height:1.55; color:var(--text-2);
}
.proof-list li::before{
  content:"→"; flex-shrink:0; font-weight:700; opacity:.6;
}
.proof-side.bad .proof-list li::before{ color:var(--red); }
.proof-side.good .proof-list li::before{ color:var(--green); }
@media(max-width:800px){
  .proof{ grid-template-columns:1fr; }
  .proof-vs{ padding:12px; border-inline:0; border-block:1px solid var(--line); }
}

/* ─────────────────────────────────────────────
   4. SECTION CTA — inline, contextual
   ───────────────────────────────────────────── */
.scta{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:26px 30px; margin-top:34px;
  border:1px solid var(--line-violet); border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(139,92,246,.11), rgba(109,40,217,.03));
}
.scta-t{ flex:1; min-width:260px; }
.scta-t strong{
  display:block; font-size:1.02rem; font-weight:700;
  color:var(--text); letter-spacing:-.01em;
}
.scta-t span{
  display:block; margin-top:5px; font-size:.87rem; color:var(--text-2);
}
.scta-b{ display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }

/* ─────────────────────────────────────────────
   5. TRUST STRIP
   ───────────────────────────────────────────── */
.trust{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
  padding:18px 24px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface);
}
.trust-i{
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; color:var(--text-2);
  white-space:nowrap;
}
.trust-i i{ font-style:normal; color:var(--green); font-size:.9rem; }
.trust-sep{ width:1px; height:15px; background:var(--line-2); }
@media(max-width:680px){ .trust-sep{ display:none; } }

/* ─────────────────────────────────────────────
   6. TIMELINE — "how it plays out"
   ───────────────────────────────────────────── */
.tline{ position:relative; padding-left:30px; }
.tline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--violet), rgba(139,92,246,.12));
}
.tline-i{ position:relative; padding-bottom:28px; }
.tline-i:last-child{ padding-bottom:0; }
.tline-i::before{
  content:""; position:absolute; left:-30px; top:5px;
  width:16px; height:16px; border-radius:50%;
  background:var(--bg-2); border:2px solid var(--violet);
  box-shadow:0 0 0 4px rgba(139,92,246,.12);
}
.tline-i.bad::before{ border-color:var(--red); box-shadow:0 0 0 4px rgba(248,113,113,.12); }
.tline-d{
  font-size:.7rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--violet-2);
}
.tline-i.bad .tline-d{ color:var(--red); }
.tline-h{ margin:6px 0 5px; font-size:.98rem; font-weight:700; color:var(--text); }
.tline-p{ font-size:.87rem; line-height:1.6; }

/* ─────────────────────────────────────────────
   7. MINI CHART — inline bars, no library
   ───────────────────────────────────────────── */
.mchart{ display:flex; align-items:flex-end; gap:5px; height:90px; }
.mbar{
  flex:1; border-radius:4px 4px 0 0; min-height:5px;
  background:linear-gradient(180deg, var(--violet), var(--violet-deep));
  transition:height .7s var(--ease), opacity .3s;
  position:relative; opacity:.55;
}
.mbar.hi{ opacity:1; box-shadow:0 0 18px rgba(139,92,246,.4); }
.mbar.r{ background:linear-gradient(180deg, var(--red), #b91c1c); }
.mbar.g{ background:linear-gradient(180deg, var(--green), #047857); }
.mchart-x{
  display:flex; gap:5px; margin-top:8px;
  font-size:.62rem; color:var(--text-3);
}
.mchart-x span{ flex:1; text-align:center; }

/* ─────────────────────────────────────────────
   8. FEATURE ROW — icon + text + metric
   ───────────────────────────────────────────── */
.frow{
  display:flex; align-items:center; gap:18px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.frow:last-child{ border-bottom:0; }
.frow-i{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center; font-size:1.05rem;
  background:rgba(139,92,246,.13); border:1px solid rgba(139,92,246,.24);
}
.frow-t{ flex:1; min-width:0; }
.frow-t strong{ display:block; font-size:.95rem; color:var(--text); }
.frow-t span{ display:block; margin-top:3px; font-size:.84rem; color:var(--text-2); }
.frow-m{
  flex-shrink:0; text-align:right;
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em;
  color:var(--violet-2); font-variant-numeric:tabular-nums;
}
@media(max-width:560px){
  .frow{ flex-wrap:wrap; }
  .frow-m{ width:100%; text-align:left; margin-top:6px; }
}

/* ─────────────────────────────────────────────
   9. QUOTE
   ───────────────────────────────────────────── */
.quote{
  padding:30px; border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(139,92,246,.07), transparent);
  border-left:3px solid var(--violet);
}
.quote-t{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.5;
  color:var(--text); letter-spacing:-.01em;
}
.quote-a{
  margin-top:18px; display:flex; align-items:center; gap:11px;
  font-size:.83rem; color:var(--text-3);
}
.quote-av{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--violet-deep));
  display:grid; place-items:center; flex-shrink:0;
  font-size:.72rem; font-weight:800; color:#fff;
}

/* ─────────────────────────────────────────────
   10. RESPONSIVE — the real fixes
   ───────────────────────────────────────────── */
@media(max-width:900px){
  .band{ grid-template-columns:repeat(2,1fr); }
  .scta{ flex-direction:column; align-items:stretch; text-align:left; }
  .scta-b{ width:100%; }
  .scta-b .btn{ flex:1; justify-content:center; }
}
@media(max-width:560px){
  .band{ grid-template-columns:1fr; }
  .band-cell{ padding:22px 20px; }
  .prob{ padding:24px; }
  .proof-side{ padding:24px; }
  .quote{ padding:24px; }
  .tline{ padding-left:26px; }
  .tline-i::before{ left:-26px; width:14px; height:14px; }
}

/* Anything the theme forgot */
@media(max-width:680px){
  .split{ gap:36px; }
  .head{ margin-bottom:34px; }
  h1{ font-size:clamp(2rem,8vw,2.6rem) !important; }
  h2{ font-size:clamp(1.6rem,6vw,2.1rem) !important; }
  .lead{ font-size:1rem; }
  .btn-lg{ padding:13px 24px; font-size:.9rem; }
  .card{ padding:22px; }
  .calc-tabs{ width:100%; overflow-x:auto; }
  .calc-tab{ flex-shrink:0; }
  .tbl-wrap{ border-radius:var(--r); }
}

/* ─────────────────────────────────────────────
   11. ANSWER BLOCK — AI-citable, plain, early
   ───────────────────────────────────────────── */
.answer-block{
  border-left:3px solid var(--violet);
  transition:var(--t);
}
.answer-block:hover{ border-left-color:var(--violet-2); }
.answer-block h3{
  color:var(--text); letter-spacing:-.02em;
}
.answer-block p{ color:var(--text-2); }
.ab-src{
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--line);
  font-size:.74rem; color:var(--text-3); font-style:italic;
}