/* §9 — speed: pagespeed + load-time comparison + mobile-first */
.rsg-page .sp-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: stretch; margin: 0 0 26px; }
.rsg-page .sp-hero .cs-window { margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.rsg-page .sp-hero .cs-window img { width: 100%; flex: 1; object-fit: cover; object-position: top; display: block; min-height: 230px; }
.rsg-page .sp-panel { position: relative; overflow: hidden; background: linear-gradient(150deg, #FFFFFF 0%, #F1F8F3 100%); border: 1px solid rgba(44,122,75,0.24); border-radius: 18px; padding: 26px; box-shadow: 0 14px 34px rgba(20,62,37,0.09); display: flex; flex-direction: column; }
.rsg-page .sp-panel::after { content: ""; position: absolute; top: -50px; right: -50px; width: 170px; height: 170px; background: radial-gradient(circle, rgba(44,122,75,0.12) 0%, rgba(44,122,75,0) 70%); pointer-events: none; }
.rsg-page .sp-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; color: var(--green-700); background: rgba(44,122,75,0.10); border: 1px solid rgba(44,122,75,0.22); border-radius: 999px; padding: 5px 11px; margin-bottom: 13px; }
.rsg-page .sp-pill svg { width: 11px; height: 11px; }
.rsg-page .sp-panel h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--ink-900); margin: 0 0 9px; line-height: 1.25; }
.rsg-page .sp-panel > p { position: relative; z-index: 1; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; }
.rsg-page .sp-bars { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; gap: 13px; }
.rsg-page .sp-row-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.rsg-page .sp-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.rsg-page .sp-t { font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.rsg-page .sp-t.fast { color: var(--green-600); }
.rsg-page .sp-t.target { color: #C77D26; }
.rsg-page .sp-t.bounce { color: var(--red); }
.rsg-page .sp-track { height: 11px; background: #EAEEE9; border-radius: 999px; overflow: hidden; }
.rsg-page .sp-fill { height: 100%; border-radius: 999px; }
.rsg-page .sp-fill.fast { background: linear-gradient(90deg, #46946A, #2C7A4B); }
.rsg-page .sp-fill.target { background: linear-gradient(90deg, #ECA94E, #C77D26); }
.rsg-page .sp-fill.bounce { background: linear-gradient(90deg, #E2434E, #C8202B); }
.rsg-page .sp-note { position: relative; z-index: 1; margin-top: 16px; font-size: 11.5px; line-height: 1.5; color: var(--ink-500); }
.rsg-page .sp-note strong { color: var(--ink-900); }
.rsg-page .sp-mob { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) { .rsg-page .sp-hero { grid-template-columns: 1fr; } .rsg-page .sp-mob { grid-template-columns: 1fr; } }