/* SALA — Solutions (by audience) page */
.shero{ padding:74px 0 10px; text-align:center; background:
  radial-gradient(900px 440px at 50% -10%, var(--blue-tint) 0%, rgba(233,240,255,0) 62%); }
.shero .h1{ max-width:17ch; margin:18px auto 0; }
.shero .lead{ max-width:56ch; margin:18px auto 0; }

/* audience chooser */
.chooser{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px; }
.chooser a{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font-size:14.5px; font-weight:600; color:var(--ink-2);
  box-shadow:var(--shadow-sm); transition:all .15s; }
.chooser a:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.chooser a .ci{ width:19px; height:19px; color:var(--blue); flex:none; }

/* audience section */
.sol{ padding:84px 0; border-top:1px solid var(--line); scroll-margin-top:80px; }
.sol:first-of-type{ border-top:0; }
.sol-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center; }
.sol:nth-of-type(even) .sol-media{ order:-1; }
.sol-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.sol-eyebrow .ci{ width:18px; height:18px; flex:none; }
.sol h2{ margin:16px 0 14px; font-size:clamp(26px,2.6vw,36px); letter-spacing:-0.028em; line-height:1.05; }
.sol-pain{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:11px; }
.sol-pain li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.sol-pain li::before{ content:""; position:absolute; left:0; top:6px; width:17px; height:17px; border-radius:5px;
  background:var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%230050D2' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.sol-mods{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.sol-mod{ font-size:13px; font-weight:600; color:var(--blue-700); background:var(--blue-tint); border-radius:999px; padding:6px 13px; }
.sol-foot{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line-2); }
.sol-stat .n{ font-size:30px; font-weight:700; letter-spacing:-0.03em; line-height:1; }
.sol-stat .l{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-top:5px; }

/* browser frame for real screenshots */
.frame{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; }
.frame .fbar{ height:40px; display:flex; align-items:center; gap:7px; padding:0 14px; background:#f7f9fc; border-bottom:1px solid var(--line-2); }
.frame .fbar .d{ width:11px; height:11px; border-radius:50%; }
.frame .fbar .furl{ margin-left:14px; font-family:var(--mono); font-size:11px; color:var(--muted-2);
  background:#fff; border:1px solid var(--line-2); border-radius:7px; padding:4px 12px; }
.frame img{ width:100%; display:block; }

/* government band accent */
.sol.gov{ background:var(--bg-soft); }
.gov-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 4px; }
.gov-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 13px; }
.gov-badge .gd{ width:8px; height:8px; border-radius:50%; background:var(--blue); }

@media(max-width:860px){
  .sol-grid{ grid-template-columns:1fr; gap:34px; }
  .sol:nth-of-type(even) .sol-media{ order:0; }
  .sol{ padding:60px 0; }
}

/* clickable Hero panel */
a.bridge-panel{ display:block; text-decoration:none; color:inherit; }
a.bridge-panel.hero-side{ cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.bridge-panel.hero-side:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#9cc2ff; }
a.bridge-panel.hero-side:hover .bp-url{ color:var(--blue); }
.bp-ext{ display:inline-block; font-weight:700; transition:transform .2s ease; }
a.bridge-panel.hero-side:hover .bp-ext{ transform:translate(2px,-2px); }