/* =========================================================================
   swift-belief.css — BELIEF-FIRST identity layer
   Linked ONLY on the belief pages (home, /methodology, /accuracy) from
   partials/header.ejs. Scoped under .belief-* / .mth-* / .acc-* so it never
   bleeds into other lanes. Uses ONLY existing :root theme tokens from
   public/css/styles.css — no new global vars, no overrides of styles.css.
   ========================================================================= */

/* ---- shared belief band / eyebrow / proof tokens ---- */
.belief-band{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--brand-tint) 0%, transparent 55%),
    var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.belief-eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--brand-3);
  background:var(--brand-tint);border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
}
.belief-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}
.belief-grad{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
}

/* ---- HERO: AI predictions, graded in public ---- */
.belief-hero{padding:26px 20px;margin:14px 0 18px}
.belief-hero h1{
  font-size:clamp(1.75rem,6vw,2.65rem);line-height:1.08;margin:0 0 10px;letter-spacing:-.02em;
}
.belief-hero .lede{color:var(--muted);font-size:1.04rem;max-width:50ch;margin:0 0 16px}
.belief-calib{
  display:flex;align-items:flex-start;gap:9px;margin:0 0 18px;padding:11px 13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  font-size:.92rem;color:var(--text);max-width:52ch;
}
.belief-calib .ico{flex:0 0 auto;font-size:1.05rem;line-height:1.3;color:var(--brand)}
.belief-calib b{color:var(--brand-3)}
.belief-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.belief-rg{color:var(--muted);font-size:.8rem;margin:0}

/* proof stat strip (hero + accuracy) */
.belief-proof{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.belief-proof .pf{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 12px;text-align:center;
}
.belief-proof .pf b{
  display:block;font-size:1.6rem;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;
}
.belief-proof .pf span{
  display:block;color:var(--muted);font-size:.72rem;margin-top:6px;line-height:1.3;
}
.belief-proof .pf a{color:inherit}

/* ---- explainability teaser (why the model leans a way) ---- */
.belief-why{
  display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--ring);
}
.belief-why .why-row{display:flex;align-items:flex-start;gap:11px}
.belief-why .why-row .b{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-3);font-size:1rem;border:1px solid var(--line);
}
.belief-why .why-row h3{margin:0 0 3px;font-size:1rem}
.belief-why .why-row p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.belief-why .why-foot{
  margin:2px 0 0;font-size:.85rem;color:var(--muted);
}

/* ---- SwiftSquad SECONDARY block (demoted, not headlined) ---- */
.belief-squad{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(77,141,255,.10) 0%, transparent 50%),
    radial-gradient(120% 120% at 100% 100%, var(--brand-tint) 0%, transparent 55%),
    var(--surface);
  border:1px dashed var(--line);border-radius:var(--radius);padding:16px 18px;
}
.belief-squad .sq-ico{font-size:1.7rem;line-height:1}
.belief-squad .sq-body{flex:1 1 220px;min-width:0}
.belief-squad .sq-body h3{margin:0 0 4px;font-size:1.02rem}
.belief-squad .sq-body p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.4}
.belief-squad .sq-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.belief-squad .sq-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 9px;
}
.belief-squad .sq-cta{flex:0 0 auto}

/* ---- "what the numbers mean" explainer cards ---- */
.belief-explainer{
  display:grid;gap:10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
}
.belief-explainer h3{margin:0 0 2px;font-size:1.02rem}
.belief-explainer dl{margin:0;display:grid;gap:9px}
.belief-explainer dt{font-weight:700;color:var(--brand-3);font-size:.92rem}
.belief-explainer dd{margin:2px 0 0;color:var(--muted);font-size:.88rem;line-height:1.45}

/* ---- METHODOLOGY page ---- */
.mth-hero{padding:26px 20px;margin:14px 0 18px}
.mth-hero h1{font-size:clamp(1.7rem,5.5vw,2.4rem);line-height:1.1;margin:0 0 10px;letter-spacing:-.02em}
.mth-hero .lede{color:var(--muted);font-size:1.02rem;max-width:54ch;margin:0}
.mth-toc{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;list-style:none;padding:0;
}
.mth-toc a{
  display:inline-flex;font-size:.82rem;color:var(--brand-3);text-decoration:none;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
.mth-toc a:hover{border-color:var(--brand)}

.mth-stack{display:grid;gap:14px}
.mth-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--ring);scroll-margin-top:calc(var(--header-h) + 14px);
}
.mth-card h2{margin:0 0 10px;font-size:1.22rem}
.mth-card h3{margin:16px 0 6px;font-size:1rem}
.mth-card p{color:var(--muted);line-height:1.6;margin:0 0 10px}
.mth-card p:last-child{margin-bottom:0}
.mth-card strong{color:var(--text)}

/* the ensemble visual: three signals -> one SwiftScore */
.mth-ensemble{
  display:grid;grid-template-columns:1fr;gap:10px;margin:6px 0 4px;
}
.mth-signal{
  display:flex;align-items:flex-start;gap:12px;padding:13px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
}
.mth-signal .s-no{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-3);font-weight:700;border:1px solid var(--line);
}
.mth-signal h3{margin:0 0 3px;font-size:.98rem;color:var(--text)}
.mth-signal p{margin:0;font-size:.88rem;line-height:1.45}
.mth-merge{
  text-align:center;color:var(--muted);font-size:1.3rem;line-height:1;margin:2px 0;
}
.mth-out{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--brand-tint) 0%, transparent 60%),
    var(--surface-2);
  border:1px solid var(--line);
}
.mth-out .o-badge{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.02em;
}
.mth-out h3{margin:0 0 2px;font-size:1rem;color:var(--text)}
.mth-out p{margin:0;font-size:.86rem}

/* do / don't claim columns */
.mth-claims{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px}
.mth-claim{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.mth-claim.do{background:color-mix(in srgb, var(--win) 9%, var(--surface-2))}
.mth-claim.dont{background:color-mix(in srgb, var(--warn) 9%, var(--surface-2))}
.mth-claim h3{margin:0 0 8px;font-size:1rem}
.mth-claim ul{margin:0;padding-left:18px;display:grid;gap:6px}
.mth-claim li{color:var(--muted);font-size:.9rem;line-height:1.4}
.mth-claim li::marker{color:var(--brand)}

/* data sources / limitations chips */
.mth-sources{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:8px}
.mth-sources li{
  display:flex;gap:9px;align-items:flex-start;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  font-size:.9rem;color:var(--muted);line-height:1.45;
}
.mth-sources li b{color:var(--text);display:block;margin-bottom:1px}
.mth-sources .ico{flex:0 0 auto;color:var(--brand)}

@media (min-width:720px){
  .belief-hero{padding:40px 36px}
  .belief-proof{grid-template-columns:repeat(4,1fr)}
  .mth-hero{padding:36px 34px}
  .mth-ensemble{grid-template-columns:repeat(3,1fr)}
  .mth-merge{grid-column:1 / -1}
  .mth-claims{grid-template-columns:1fr 1fr}
}
@media (min-width:560px){
  .belief-proof{grid-template-columns:repeat(4,1fr)}
}