/* ============================================================
   SOLUTIONS LANDING PAGES (shared across all /solutions pages)
   Reuses v3.css tokens + home.css section grammar; only the
   pieces that don't exist elsewhere live here.
   ============================================================ */

/* hero — centre the visual (home.css pushes it to the right edge for the home collage) */
.sol .hero-visual{justify-self:center;margin-right:0}
/* let grid/flex items shrink below their content size so wide images never blow out the layout on phones */
.sol .hero-grid>*,.sol .split>*{min-width:0}
.sol .hero-visual,.sol .split-visual{max-width:100%}
.sol-hero-img{display:block;width:100%;height:auto;margin-inline:auto}
.sol-hero-img.collage{max-width:600px}
.sol-hero-img.wide{max-width:560px;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.sol-hero-img.tall{max-width:330px;border-radius:26px;box-shadow:var(--shadow-lg)}
@media(max-width:900px){
  .sol-hero-img.collage{max-width:440px}
  .sol-hero-img.wide{max-width:100%}
  .sol-hero-img.tall{max-width:250px}
}

/* feature split — portrait app screenshot */
.sol-split-img{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto;border-radius:24px;box-shadow:var(--shadow-lg)}
@media(max-width:900px){.sol-split-img{max-width:250px}}

/* three-pillar cards (home's .feat-grid is 5-col) */
.feat-grid.sol-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.feat-grid.sol-3{grid-template-columns:1fr}}

/* FAQ — native <details> accordion, no JS */
.sol-faq{max-width:760px;margin:38px auto 0;display:flex;flex-direction:column;gap:12px}
.sol-faq details{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.sol-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 22px;font-weight:700;font-size:.98rem}
.sol-faq summary::-webkit-details-marker{display:none}
.sol-faq summary::after{content:"+";font-size:1.4rem;font-weight:500;color:var(--primary);line-height:1;flex:none;transition:transform .25s var(--ease)}
.sol-faq details[open] summary::after{transform:rotate(45deg)}
.sol-faq details p{padding:0 22px 18px;margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
@media(max-width:640px){.sol-faq summary{padding:14px 16px;font-size:.9rem}.sol-faq details p{padding:0 16px 15px}}

/* cross-links between solutions — reuse .qchip as a link pill */
.sol-crosslinks{margin-top:64px;text-align:center}
.sol-crosslinks .xh{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
a.qchip{transition:border-color .2s,color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
a.qchip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}