/* Extra styles for the solutions showcase, on top of ../suite/css/suite.css (same look as the live app). */
.top .ind{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.top .ind select{max-width:230px}
.demo-pill{font-size:.72rem;font-weight:600;color:var(--warn);background:var(--warn-soft);padding:3px 9px;border-radius:99px;white-space:nowrap}
@media (max-width:720px){.top .ind span{display:none}.top .ind select{max-width:150px}.demo-pill{display:none}}

/* pipeline board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:8px;align-content:start;min-width:0}
.colh{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;padding:0 2px}
.colh span{color:var(--muted);font-variant-numeric:tabular-nums}
.kcard{display:grid;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer;width:100%}
.kcard:hover{border-color:var(--accent)}
.kcard>span{font-size:.84rem;color:var(--muted)}
.kmeta{display:flex;gap:8px;flex-wrap:wrap;font-size:.76rem;margin-top:4px}
.score{background:var(--bad-soft);color:var(--bad);padding:0 6px;border-radius:99px;font-weight:600}
.score.mid{background:var(--warn-soft);color:var(--warn)} .score.hi{background:var(--ok-soft);color:var(--ok)}
.empty-col{color:var(--muted);text-align:center;font-size:.85rem;padding:8px 0}
.sev{width:4px;height:22px;border-radius:2px;background:var(--warn);flex:none}
.sev.bad{background:var(--bad)} .sev.info{background:var(--accent)}
.letter{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:18px;line-height:1.6}
.list label.li{color:var(--fg)}

/* ---------- solutions (landing) page ---------- */
.hero{padding-block:48px 28px;display:grid;gap:16px;max-width:860px}
.hero h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.05;letter-spacing:-.01em}
.hero p{font-size:1.1rem;color:var(--muted);margin:0;max-width:62ch}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.wrap{max-width:1160px;margin:0 auto;padding-inline:16px}
.section{padding-block:28px}
.section>h2{font-size:1.5rem;margin-bottom:6px}
.section>p.lead{color:var(--muted);margin:0 0 18px;max-width:70ch}
.inds{display:flex;flex-wrap:wrap;gap:8px}
.inds a{text-decoration:none;color:inherit}
.groups{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:820px){.groups{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.groups{grid-template-columns:1fr 1fr 1fr}}
.grp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:12px;align-content:start}
.grp h3{font-size:1.15rem}
.grp .gb{color:var(--muted);font-size:.92rem;margin:-6px 0 0}
.mods{display:grid;gap:10px}
.m{border-top:1px solid var(--line);padding-top:10px}
.m b{display:block}
.m span{font-size:.9rem;color:var(--muted)}
.steps4{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));counter-reset:s}
.steps4>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.steps4 .n{font-family:var(--display);font-weight:700;color:var(--accent);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.steps4 h3{margin:4px 0 6px}
.steps4 p{margin:0;color:var(--muted);font-size:.92rem}
.fit{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:10px}
.fit .chips{gap:6px}
footer.foot{border-top:1px solid var(--line);margin-top:24px;padding-block:20px;color:var(--muted);font-size:.88rem}

@media (max-width:520px){.hide-narrow{display:none!important}}