/* ============================================================================
   Role landing pages — the sections the existing .lp-* set did not cover:
   the problem, the outcome, how it works, who it is for, the demo band, FAQ.
   Loaded after styles.css, so .lp-* keeps doing the rest.
   ========================================================================== */

/* ---- problem -> outcome, side by side ---------------------------------- */
.rl-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 4px}
.rl-side{border-radius:13px;padding:22px 24px}
.rl-side h2,
.rl-side .h-was-h2{font-size:20px;margin:0 0 12px;line-height:1.25}
.rl-side ul{margin:0;padding-left:19px}
.rl-side li{margin-bottom:9px;line-height:1.55;font-size:15.5px}
.rl-side li:last-child{margin-bottom:0}
.rl-bad{background:#fbf1ee;border:1px solid #f0dbd4}
.rl-bad h2,
.rl-bad .h-was-h2{color:#96331f}
.rl-bad li{color:#6d4238}
.rl-good{background:#eef5f0;border:1px solid #d3e6da}
.rl-good h2,
.rl-good .h-was-h2{color:#1c6b40}
.rl-good li{color:#335744}

/* ---- how it works ------------------------------------------------------- */
.rl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px;counter-reset:rl}
.rl-step{background:#fff;border:1px solid #e2e6ea;border-radius:12px;padding:20px 21px 21px;position:relative}
.rl-step:before{counter-increment:rl;content:counter(rl);display:block;font-size:13px;font-weight:800;
  color:#c8922b;letter-spacing:1px;margin-bottom:8px}
.rl-step b{display:block;font-size:16.5px;color:#16385c;margin-bottom:6px}
.rl-step span{display:block;font-size:14.5px;color:#5a6672;line-height:1.55}

/* ---- who it is for ------------------------------------------------------ */
.rl-who{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.rl-who span{background:#f1f4f7;border:1px solid #e2e6ea;border-radius:999px;
  padding:8px 15px;font-size:14.5px;color:#41505f}
.rl-who span.no{background:#fbf1ee;border-color:#f0dbd4;color:#96331f;text-decoration:line-through;
  text-decoration-color:rgba(150,51,31,.45)}

/* ---- the demo band ------------------------------------------------------ */
.rl-demo{background:linear-gradient(135deg,#16385c,#0f1115);color:#fff;border-radius:14px;
  padding:30px 32px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.rl-demo div{flex:1;min-width:270px}
.rl-demo h2,
.rl-demo .h-was-h2{color:#fff;font-size:23px;margin:0 0 9px;line-height:1.25}
.rl-demo p{color:#c8d2dd;margin:0 0 4px;font-size:15.5px;line-height:1.6;max-width:56ch}
.rl-demo .btn{white-space:nowrap}

/* ---- sample content ----------------------------------------------------- */
.rl-sample{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-top:6px}
.rl-sample figure{margin:0;border:1px solid #e2e6ea;border-radius:10px;overflow:hidden;background:#fff}
.rl-sample img{display:block;width:100%;height:auto}
.rl-sample figcaption{font-size:12px;color:#6b7885;padding:8px 10px;line-height:1.4;border-top:1px solid #eef1f4}

/* ---- faq ---------------------------------------------------------------- */
.rl-faq{margin-top:4px;border-top:1px solid #e2e6ea}
.rl-faq details{border-bottom:1px solid #e2e6ea}
.rl-faq summary{cursor:pointer;padding:15px 34px 15px 2px;font-weight:700;font-size:16px;
  color:#16385c;position:relative;list-style:none}
.rl-faq summary::-webkit-details-marker{display:none}
.rl-faq summary:after{content:"+";position:absolute;right:6px;top:13px;font-size:21px;
  font-weight:400;color:#8c98a5;line-height:1}
.rl-faq details[open] summary:after{content:"\2013"}
.rl-faq p{margin:0 0 16px;padding-right:34px;color:#4c5966;font-size:15.5px;line-height:1.65}

@media (max-width:760px){
  .rl-pair{grid-template-columns:1fr}
  .rl-steps{grid-template-columns:1fr}
  .rl-demo{padding:24px 22px}
}

/* the landing pages declare color-scheme: only light, so they render the same
   for everyone — no dark overrides here on purpose */