/* Website Rescue showcase (/website-rescue): score strip, before/after phones, PageSpeed rings */
.rs-hero h1 { max-width: none; }
.rs-strip { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 7vh; max-width: 1100px; }
.rs-score { display: grid; gap: 6px; padding: 22px 22px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: #b9b3ab; font-size: 13.5px; line-height: 1.35;
  transition: border-color .3s, transform .4s; transition-delay: var(--d, 0s); }
.rs-score:hover { border-color: rgba(200,255,0,.5); transform: translateY(-4px); }
.rs-n { font: 500 10.5px var(--sans); letter-spacing: .3em; color: var(--red); }
.rs-score b { font: 400 clamp(54px, 6vw, 88px)/.95 var(--display); color: var(--red); text-shadow: 0 0 30px rgba(200,255,0,.35); display: flex; align-items: baseline; gap: 12px; }
.rs-score b em { font-style: normal; color: #ff6b3d; text-shadow: none; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(255,107,61,.6); }
.rs-score b i { font: 400 .45em var(--sans); color: var(--muted); font-style: normal; }
.rs-score span:last-child { color: var(--ink); font-weight: 500; }
.rs-score small { color: var(--muted); font-weight: 400; }
.rs-note { position: relative; margin-top: 22px; font-size: 12.5px; color: var(--muted); max-width: 720px; }

.rs-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 6vw; align-items: start; }
.rs-ep:nth-of-type(odd) .rs-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
.rs-ep:nth-of-type(odd) .rs-phone { order: 2; }

/* the phone */
.rs-phone { position: sticky; top: 100px; }
.rs-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; background: #111; border: 10px solid #1a1918;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(200,255,0,.12); }
.rs-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.rs-screen video.on { opacity: 1; }
.rs-toggle { display: flex; gap: 4px; padding: 4px; margin: 0 auto 14px; width: max-content; border-radius: 40px; border: 1px solid var(--line); background: #0d0c0c; }
.rs-toggle button { border: 0; background: none; color: var(--muted); padding: 9px 20px; border-radius: 40px; font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.rs-toggle button[aria-pressed="true"] { background: var(--red); color: #0a0a0a; }
.rs-toggle button[data-v="before"][aria-pressed="true"] { background: #ff6b3d; }

/* the copy */
.rs-copy h2 { max-width: 16ch; }
.rs-copy h2 em { display: block; font-size: .55em; margin-top: 10px; }
.rs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 5vh; }
.rs-cols h3 { font: 600 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.rs-cols ul { list-style: none; display: grid; gap: 12px; }
.rs-cols li { position: relative; padding-left: 28px; font-size: 15.5px; color: #d4cec6; }
.bad-list li::before { content: '✕'; position: absolute; left: 0; color: #ff6b3d; font-weight: 700; }
.good-list li::before { content: '✓'; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* PageSpeed rings */
.rs-scores { margin-top: 5vh; padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.rs-scores .label span { color: var(--muted); margin-left: 10px; letter-spacing: .2em; }
.rs-scores ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rs-scores li { display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 12px; color: var(--muted); }
.pair { display: flex; gap: 8px; }
.g { position: relative; width: 58px; height: 58px; }
.g b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 20px var(--display); color: var(--ink); }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.ring .arc { stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); }
.ring.bad .arc { stroke: #ff6b3d; }
.ring.good .arc { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(200,255,0,.6)); }
.go .ring .arc { stroke-dashoffset: var(--off); }
.g.good b { color: var(--red); }

@media (max-width: 900px) {
  .rs-strip { grid-template-columns: 1fr; }
  .rs-grid, .rs-ep:nth-of-type(odd) .rs-grid { grid-template-columns: 1fr; }
  .rs-ep:nth-of-type(odd) .rs-phone { order: 0; }
  .rs-phone { position: relative; top: 0; width: min(320px, 82vw); margin: 0 auto 4vh; }
  .rs-cols { grid-template-columns: 1fr; }
  .rs-scores ul { grid-template-columns: 1fr 1fr; row-gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ring .arc { transition: none; } }