.site-examples{margin:3rem 0 5rem;scroll-margin-top:110px}
.site-examples-heading{max-width:720px;margin-bottom:2rem}
.site-examples-heading h3{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:400;letter-spacing:-.04em;line-height:1.2;margin:.6rem 0 1rem}
.site-examples-heading>p:last-child{color:var(--muted);line-height:1.7;font-size:.9rem}
.site-examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.site-example{min-width:0}
.site-example-window{overflow:hidden;border:1px solid #ffffff26;border-radius:18px;background:#101014;box-shadow:0 18px 45px #0004;padding:8px}
.site-example-chrome{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:6px 5px 12px;color:#a29baa;font-size:.58rem;letter-spacing:.06em}
.site-example-chrome>span:first-child{color:#74677e;letter-spacing:.2em}
.site-example-screen{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:10px;background:#111}
.site-example-poster{display:block;width:100%;height:100%;object-fit:cover}
.site-example-screen iframe{position:absolute;top:0;left:0;width:1100px;height:825px;border:0;transform:scale(var(--site-scale,.5));transform-origin:top left;pointer-events:none;opacity:0;transition:opacity .3s;background:#111}
.site-example.is-loaded iframe{opacity:1}
.site-example-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.2rem 0 1rem}
.site-example-meta .kicker{font-size:.6rem;color:var(--muted);margin:0 0 .5rem}
.site-example-meta h4{font-size:1.35rem;font-weight:500;margin:0}
.site-example-meta a{font-size:.75rem;color:#e6dbfa;text-decoration:none;white-space:nowrap}
.site-examples-note{font-size:.7rem;line-height:1.7;color:var(--muted);margin-top:1.5rem}
@media(max-width:760px){.site-examples-grid{grid-template-columns:1fr;gap:2.5rem}.site-example-window{border-radius:14px}.site-example-screen{aspect-ratio:4/5}.site-example-chrome{font-size:.55rem}}
@media(prefers-reduced-motion:reduce){.site-example-screen iframe{transition:none}}

/* Keep each live example directly above its corresponding offer. */
.solution-offer{display:flex;flex-direction:column;gap:2rem;min-width:0}
.solution-offer>.solution-panel{flex:1}
#impact{scroll-margin-top:90px}
@media(max-width:900px){.solutions-grid{gap:4rem}.solution-offer{gap:1.5rem}}

/* Small credibility figures over the hero artwork, without an extra section. */
.site-hero .hero-proof{position:absolute;z-index:3;left:0;right:0;bottom:6rem;padding:0;border:0;background:none;scroll-margin-top:100px;text-shadow:0 2px 14px #000b}
.hero-proof-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:480px;gap:1.6rem}
.hero-proof-metrics p{margin:0}
.hero-proof-metrics strong{display:block;font-size:clamp(1.35rem,2.2vw,2rem);font-weight:300;letter-spacing:-.04em;line-height:1.1;color:#e7e4ed}
.hero-proof-metrics span{display:block;margin-top:.45rem;color:#c1bbc9;font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.6}
.hero-proof-note{margin:.8rem 0 0;color:#a49bac;font-size:.5rem;line-height:1.6;max-width:480px}
@media(min-width:1051px){.site-hero .hero-copy{padding-bottom:10rem}}
@media(max-width:1050px){
 .site-hero .hero-copy{padding-bottom:1.5rem}
 .site-hero .hero-proof{position:relative;top:auto;bottom:auto;padding:0 0 2.5rem;text-shadow:none}
 .hero-proof-metrics{max-width:430px;gap:1rem}
 .hero-proof-metrics strong{font-size:1.5rem}
 .site-hero:before{background-image:linear-gradient(0deg,rgba(5,4,9,.8),transparent 35%),url('editorial/hero-staircase-clean.png')}
}
@media(max-width:480px){.hero-proof-metrics{gap:.5rem}.hero-proof-metrics strong{font-size:1.3rem}.hero-proof-metrics span{font-size:.47rem;letter-spacing:.025em}.hero-proof-note{font-size:.45rem;max-width:320px}}