/* Content pages (solutions + guide). Builds on styles.css tokens and components; only adds what those pages need. */
.subnav a.on{color:#fff;background:var(--grad);box-shadow:0 8px 18px -10px var(--glow)}
.sub-hero .wrap{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
.sub-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.sub-bot{width:clamp(150px,20vw,260px);justify-self:center}
.crumbs{display:flex;gap:.5em;align-items:center;flex-wrap:wrap;font-size:var(--s-1);color:var(--muted);margin-bottom:1.1rem}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.prose > *{max-width:860px}
.prose h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:1.2rem}
.prose p,.prose li{color:var(--muted);font-size:var(--s1);line-height:1.7}
.prose p + p{margin-top:1rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--blue)}
.prose ul,.prose ol{padding-inline-start:1.4em;margin:0}
.prose li + li{margin-top:.6rem}
.prose ul + p,.prose ol + p{margin-top:1.4rem}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.table-wrap table{width:100%;border-collapse:collapse;min-width:560px}
.table-wrap th,.table-wrap td{padding:16px 20px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap tr:last-child > *{border-bottom:0}
.table-wrap thead th{font:600 var(--s1)/1.3 var(--f-display);color:var(--ink);background:var(--soft)}
.table-wrap tbody th{font-weight:500;color:var(--ink)}
.table-wrap td{color:var(--muted)}

.related h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.4rem}
.related-links{display:flex;flex-wrap:wrap;gap:10px}
.related-links a{display:inline-flex;gap:.6em;align-items:center;text-decoration:none;color:var(--soft-ink);background:var(--soft);font-weight:500;padding:.7em 1.2em;border-radius:999px;transition:transform .2s}
.related-links a:hover{transform:translateY(-2px)}

.guide{text-decoration:none;color:inherit}
.guide .more{grid-column:2;display:inline-flex;gap:.5em;align-items:center;margin-top:6px;font-weight:600;color:var(--blue)}
.guide:hover .more span{transform:translateX(-4px)}
.guide .more span{transition:transform .2s}
.guides{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:960px){
  .sub-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .sub-bot{display:none}
  .guides{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .table-wrap table{min-width:0;font-size:.95rem}
  .table-wrap th,.table-wrap td{padding:12px 10px}
  .table-wrap thead th{font-size:1rem}
}