/* ============================================================
   PAGE-SPECIFIC: explainer layout
   (the block above is the shared site CSS, kept in sync across
   home.html, pricing.html and this page)
   ============================================================ */

/* jump strip under the hero */
.jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:42px}
.jump a{font-size:14px;font-weight:500;color:var(--ink);background:var(--bg-alt);border-radius:20px;padding:8px 17px}
.jump a:hover{background:var(--green-tint);color:var(--green-dark)}

/* section intro */
.sec-intro{max-width:720px;margin:0 auto 48px;text-align:center}
.sec-intro p{font-size:18px;line-height:1.66}
.sec-intro p:last-child{margin-bottom:0}

/* flow diagram */
.diagram{background:var(--bg);border:.8px solid var(--line);border-radius:var(--r-card-lg);padding:30px 26px 24px;margin:0 auto;max-width:960px}
.diagram--white{background:#fff}
.flow{display:flex;align-items:stretch;justify-content:center}
.flow__node{
  flex:1 1 0;max-width:210px;background:#fff;border:.8px solid var(--line);
  border-radius:var(--r-card);padding:18px 15px;text-align:center;box-shadow:var(--sh-card);
}
.flow__node b{display:block;font-size:14.5px;color:var(--ink);font-weight:600;margin-bottom:4px;line-height:1.3}
.flow__node span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.flow__ico{width:34px;height:34px;border-radius:9px;background:var(--green-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 11px}
.flow__node--bad{border-color:#EBCFCF;background:#FDF8F8}
.flow__node--bad .flow__ico{background:#F6E2E2}
.flow__node--good{border-color:var(--green-line);background:var(--green-tint)}
.flow__node--good .flow__ico{background:#fff}
.flow__link{flex:0 0 40px;display:flex;align-items:center;justify-content:center;color:#C6CBD0}
.flow__link svg{flex-shrink:0}
.diagram__cap{text-align:center;font-size:13px;color:var(--muted);margin:18px auto 0;max-width:640px;line-height:1.55}

/* break chips under a diagram */
.breaks{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:20px;padding-top:20px;border-top:.8px solid var(--line)}
.breaks__label{width:100%;text-align:center;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.break{font-size:12.5px;font-weight:500;color:#8C3B3B;background:#F6E2E2;border-radius:20px;padding:5px 13px}
.break--ok{color:#356B31;background:var(--green-soft)}

/* leak / unfixed cards */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.leak{background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:26px 24px}
.leak__n{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#B4696A;margin:0 0 10px}
.leak h4{font-size:17.5px;margin-bottom:9px}
.leak p{font-size:15px;line-height:1.62;margin:0}

/* fixes / doesn't fix */
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}
.verdict__col{border-radius:var(--r-card);padding:26px 28px;border:.8px solid}
.verdict__col--yes{background:var(--green-tint);border-color:var(--green-line)}
.verdict__col--no{background:var(--bg-alt);border-color:var(--line-2)}
.verdict__col h5{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;margin:0 0 16px}
.verdict__col--yes h5{color:#3B7A36}
.verdict__col--no h5{color:#6E767C}
.verdict ul{display:grid;gap:12px;margin:0;font-size:15px}
.verdict li{display:flex;gap:11px;line-height:1.55}
.verdict li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:8px}
.verdict__col--yes li::before{background:var(--green)}
.verdict__col--no li::before{background:#B9BFC4}

/* big number row */

/* mechanism cards */
.mcard{background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:28px 26px;display:flex;flex-direction:column}
.mcard__ico{width:44px;height:44px;border-radius:11px;background:var(--green-tint);border:.8px solid var(--green-line-2);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mcard h4{font-size:18.5px;margin-bottom:10px}
.mcard p{font-size:15px;line-height:1.63}
.mcard__closes{
  margin-top:auto;font-size:13.5px;line-height:1.52;
  background:var(--green-tint);border-radius:8px;padding:12px 15px;
}
.mcard__closes b{color:#3B7A36;font-weight:600}

/* full-width statement band */
.band{background:var(--ink);padding:64px 0;text-align:center}
.band__kicker{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--green);font-weight:600;margin:0 0 18px}
.band p.big{
  font-size:clamp(20px,2.7vw,28px);line-height:1.42;color:#fff;font-weight:500;
  letter-spacing:-.028em;max-width:840px;margin:0 auto;
}
.band p.sub{font-size:16.5px;color:rgba(255,255,255,.66);max-width:700px;margin:22px auto 0;line-height:1.6}

/* reports */
.report{background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);padding:24px 26px;box-shadow:var(--sh-card)}
.report h4{font-size:17px;margin-bottom:8px}
.report p{font-size:14.5px;line-height:1.6;margin:0}
.metrics{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:34px}
.metric{font-size:13.5px;color:var(--body);background:#fff;border:.8px solid var(--line);border-radius:20px;padding:6px 14px}

/* prose used sparingly */
.prose{max-width:720px;margin:0 auto}
.prose p{font-size:17px;line-height:1.7}

.nav a.is-active{color:var(--green)}

@media (max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .flow{flex-direction:column;align-items:stretch;gap:0}
  .flow__node{max-width:none}
  .flow__link{flex:0 0 30px;transform:rotate(90deg)}
}
@media (max-width:640px){
  .card-grid,.card-grid--2,.verdict{grid-template-columns:1fr}
  .diagram{padding:22px 16px 18px}
  .leak,.mcard,.report{padding:22px 20px}
  .verdict__col{padding:22px 20px}
  .sec-intro{margin-bottom:34px}
}