/* Solution pages and hub (November 2026). Builds on site.css + ghostwriting.css. */
.sol-crumbs{ font-size:.85rem; color:var(--mute); margin-bottom:22px }
.sol-crumbs ol{ display:flex; flex-wrap:wrap; gap:.5em; list-style:none; margin:0; padding:0 }
.sol-crumbs li+li::before{ content:"/"; margin-right:.5em; opacity:.6 }
.sol-crumbs a:hover{ color:var(--fg) }
.sol .phead h1{ max-width:18ch; font-size:clamp(2.3rem,5.6vw,5.2rem) }

/* Answer + facts */
.sol-answer{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:start }
.sol-answer__p{ font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.45; letter-spacing:-.01em; margin-top:18px; max-width:46ch }
.sol-meta{ margin-top:22px; font-size:.9rem; color:var(--mute) }
.sol-facts{ background:var(--bg-2); border-radius:22px; padding:26px 26px 18px }
.sol-facts dl{ margin:14px 0 0 }
.sol-facts dl div{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:12px; padding:11px 0; border-top:1px solid var(--line) }
.sol-facts dt{ color:var(--mute); font-size:.9rem }
.sol-facts dd{ margin:0; font-size:.98rem }

/* Cards, lists, notes */
.sol-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.sol-card{ background:var(--bg-2); border-radius:22px; padding:24px; display:grid; gap:10px; align-content:start; transition-delay:calc(var(--d) * 60ms) }
.sol-card h3{ font-size:clamp(1.15rem,1.6vw,1.35rem); letter-spacing:-.015em }
.sol-card p{ color:var(--mute); font-size:.97rem }
.sol-list{ columns:2; column-gap:clamp(24px,4vw,60px); display:block }
.sol-list li{ break-inside:avoid; margin-bottom:12px }
.sol-note{ margin-top:22px; color:var(--mute); font-size:.92rem; max-width:75ch }
.sol-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:clamp(40px,5vw,64px); padding:22px 26px; border-radius:22px; border:1px solid var(--line); font-size:1.05rem }

/* Tables */
.sol-table{ overflow-x:auto; border-radius:18px; border:1px solid var(--line) }
.sol-table table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:560px }
.sol-table th,.sol-table td{ text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line) }
.sol-table thead th{ font-weight:500; color:var(--mute); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; background:var(--bg-2) }
.sol-table tbody th{ font-weight:500 }
.sol-table tbody tr:last-child > *{ border-bottom:0 }

/* Fit */
.sol-fit{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.sol-fit__col{ border:1px solid var(--line); border-radius:22px; padding:26px }
.sol-fit__col .label{ margin-bottom:16px }
.sol-fit__col--no{ background:var(--bg-2); border-color:transparent }

/* Steps */
.sol-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:s }
.sol-steps li{ border-top:2px solid var(--line); padding-top:18px; display:grid; gap:8px; align-content:start; transition-delay:calc(var(--d) * 80ms) }
.sol-steps li:first-child{ border-color:var(--accent) }
.sol-steps__n{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--fg); color:var(--bg); font-size:.9rem }
.sol-steps h3{ font-size:1.15rem; letter-spacing:-.015em; margin-top:6px }
.sol-steps p{ color:var(--mute); font-size:.95rem }

/* Related + sources */
.sol-more{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,80px) }
.sol-links{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line) }
.sol-links li{ border-bottom:1px solid var(--line) }
.sol-links a{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; min-height:44px }
.sol-links a::after{ content:"→"; color:var(--mute); transition:transform .3s var(--ease) }
.sol-links a:hover::after{ transform:translateX(4px); color:var(--accent) }
.sol-links--src a{ font-size:.92rem; color:var(--mute) }
.sol-links--src a::after{ content:"↗" }

/* Hub */
.sol-hub{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.sol-hub__card{ display:grid; gap:12px; align-content:start; padding:26px; border-radius:22px; background:var(--bg-2); transition:transform .5s var(--ease-out), background .3s; transition-delay:calc(var(--d) * 60ms) }
.sol-hub__card h3{ font-size:clamp(1.2rem,1.8vw,1.5rem); letter-spacing:-.02em }
.sol-hub__card p{ color:var(--mute); font-size:.95rem }
.sol-hub__go{ margin-top:6px; font-size:.9rem; color:var(--accent-2,#14684a) }
:root[data-theme="dark"] .sol-hub__go{ color:#6fe0b0 }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sol-hub__go{ color:#6fe0b0 } }
@media (hover:hover) and (pointer:fine){ .sol-hub__card:hover{ transform:translateY(-6px) } }

/* Sticky mobile CTA */
.sol-sticky{ display:none }
@media (max-width:900px){
  .sol-sticky{ display:flex; gap:10px; position:fixed; left:12px; right:96px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:40; transform:translateY(160%); transition:transform .45s var(--ease) }
  .sol-sticky.is-shown{ transform:none }
  .sol-sticky .pill{ flex:1; justify-content:center; box-shadow:0 10px 30px #0003; background:var(--fg); color:var(--bg) }
  .sol-sticky .sol-sticky__wa{ flex:none; background:var(--bg); color:var(--fg); border-color:var(--line) }
}

@media (max-width:1000px){
  .sol-answer,.sol-more{ grid-template-columns:minmax(0,1fr) }
  .sol-cards,.sol-hub{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sol-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px }
}
@media (max-width:640px){
  .sol-cards,.sol-hub,.sol-fit,.sol-steps{ grid-template-columns:minmax(0,1fr) }
  .sol-list{ columns:1 }
  .sol-inline{ padding:18px }
}
@media print{ .sol-sticky,.phead__ctas,.gw-cta,.sol-inline{ display:none!important } }