/* Solution pages (site owners, consultants, legal): shared template styles. */

.sol-hero { background: radial-gradient(ellipse 90% 80% at 70% 40%, #17263D 0%, #0F1B2D 45%, #0A1220 80%, #070D17 100%); }
.sol-hero h1 { max-width: 13em; }
.sol-hero .lede { max-width: 36em; color: #C2CBD8; }
.sol-hero .who { color: var(--fog); font-size: 0.98rem; margin-bottom: 22px; }
.sol-hero .who a { color: var(--mist); }
.sol-hero .who a:hover { color: var(--cream); }

/* the role's problem, in their words */
.pain { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pain-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pain-list li { display: block; padding: 22px 0; border-top: 1px solid var(--night-line); color: var(--mist); font-size: 1.08rem; line-height: 1.55; }
.pain-list li:last-child { border-bottom: 1px solid var(--night-line); }
.pain-list li b { color: var(--cream); font-weight: 600; }
.pain .answer { margin-top: 32px; }
@media (max-width: 900px) { .pain { grid-template-columns: 1fr; } }

/* outcomes reuse .feature; tighten the list rhythm here */
.outcomes-sol .feature-text .body-copy { font-size: 1.06rem; }

/* proof block on paper */
.proof { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--paper-line); }
.proof-stats .stat-num { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.proof-stats .stat-label { font-size: 0.94rem; margin-top: 10px; }
.proof-card { padding: clamp(28px, 3.4vw, 40px); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--paper-line), 0 30px 60px -40px rgba(15, 23, 42, 0.35); }
.proof-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 14px; }
.proof-card + .proof-card { margin-top: 20px; }
.proof-card .eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 22px 0 18px; font-family: var(--title); color: var(--paper-ink); }
.proof-card .eq b { font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.proof-card .eq span { font-family: var(--sans); font-size: 0.9rem; color: var(--paper-muted); }
.proof-card .eq i { font-style: normal; color: var(--paper-muted); font-family: var(--sans); }
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 1.4em 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--paper-line); color: var(--paper-body); }
.steps li::before { content: ''; width: 9px; height: 9px; margin-top: 0.55em; background: var(--blue); }
.steps li b { display: block; color: var(--paper-ink); font-weight: 600; }
.disclaimer { margin-top: 28px; padding: 18px 20px; border-radius: 12px; background: var(--paper-2); color: var(--paper-muted); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } .proof-stats { grid-template-columns: 1fr 1fr; } }

/* links to the other solution pages */
.siblings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sibling { position: relative; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; }
.sibling .art { position: absolute; right: -8%; bottom: -14%; height: 120%; width: auto; max-width: none; opacity: 0.55; pointer-events: none; transition: transform 1.2s var(--ease-out), opacity 0.5s; }
.sibling:hover .art { transform: translateY(-8px); opacity: 0.8; }
.sibling .who { position: relative; color: var(--fog); font-size: 0.95rem; }
.sibling h3 { position: relative; margin-top: 10px; max-width: 12em; }
.sibling .link-arrow { position: relative; }
@media (max-width: 760px) { .siblings { grid-template-columns: 1fr; } }

/* hero art stays below the nav and clear of the headline */
.sol-hero h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.sol-hero { --art-w: min(32vw, 440px); }

/* ------------------------------------------------------------------ Solutions hub */
.hub-hero { --art-w: 0px; }
.hub-pixels { --px: 14px; --gap: 6px; --cols: 11; right: max(var(--gutter), calc((100vw - 1400px) / 2)); top: calc(var(--nav-h) + 40px); }
@media (max-width: 760px) { .hub-pixels { --px: 9px; --gap: 4px; top: calc(var(--nav-h) + 8px); opacity: 0.6; } }
.roles { display: grid; gap: clamp(56px, 7vw, 96px); }
.role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.role.flip .role-art { order: 2; }
.role-art { aspect-ratio: 2 / 3; max-height: 440px; justify-self: center; width: 100%; }
.role-art img { width: 100%; height: 100%; object-fit: contain; }
.role-who { color: var(--fog); font-size: 0.95rem; margin-bottom: 12px; }
.role h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.05; }
.role-quote { margin: 20px 0 6px; padding-left: 18px; border-left: 2px solid var(--night-line-strong); font-family: var(--title); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--mist); max-width: 32em; }
.role .check-list { margin-top: 22px; }
.role .link-arrow { margin-top: 26px; }
@media (max-width: 860px) { .role { grid-template-columns: 1fr; } .role.flip .role-art { order: 0; } .role-art { max-height: 260px; width: auto; } }

.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.uc { display: flex; flex-direction: column; min-height: 210px; }
.uc h3 { font-size: 1.45rem; }
.uc p { margin-top: 8px; font-size: 0.98rem; }
.uc-live { grid-row: span 2; background: var(--night-1) !important; color: var(--cream); box-shadow: 0 30px 60px -36px rgba(15, 23, 42, 0.6) !important; }
.uc-live h3 { color: var(--cream); font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.uc-live p { color: var(--mist) !important; font-size: 1.05rem; }
.uc-live .link-arrow { color: var(--sky); }
.uc-soon { margin-top: auto; padding-top: 18px; font-size: 0.85rem; color: var(--paper-muted); }
@media (max-width: 980px) { .uc-grid { grid-template-columns: 1fr 1fr; } .uc-live { grid-row: auto; grid-column: 1 / -1; } }
@media (max-width: 600px) { .uc-grid { grid-template-columns: 1fr; } }
.proof-link { display: flex; flex-direction: column; color: var(--paper-ink); transition: transform 0.5s var(--ease-out), box-shadow 0.4s; }
.proof-link:hover { transform: translateY(-4px); }
.proof-link .eq { margin-top: 16px; }
.proof-link .link-arrow { margin-top: auto; padding-top: 18px; }

/* ------------------------------------------------------------------ Site closure use case */
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.path-card { display: flex; flex-direction: column; }
.path-card h3 { font-size: 1.45rem; margin-bottom: 10px; }
.path-card .link-arrow { margin-top: auto; padding-top: 20px; font-size: 0.95rem; }
@media (max-width: 980px) { .path-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .path-grid { grid-template-columns: 1fr; } }
.ab { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ab-text .body-copy + .body-copy { margin-top: 18px; }
.ab-text .disclaimer { margin-top: 24px; }
@media (max-width: 860px) { .ab { grid-template-columns: 1fr; } }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; }
.related-list li { border-top: 1px solid var(--paper-line); }
.related-list a { display: block; padding: 14px 0; color: var(--paper-ink); font-weight: 500; transition: color 0.2s; }
.related-list a:hover { color: var(--blue); }
/* the heading column is only 4/11 of the row: keep its display type inside it */
.ab > :first-child h2 { font-size: clamp(2rem, 2.6vw + 0.6rem, 3.2rem); }