/* ==========================================================
   /results — trades, students, reviews. Mobile-first. Brand D.
   One dark scene: the trade videos. Screenshots and reviews sit on white cards.
   ========================================================== */

/* ---------- counts that jump to each section ---------- */
/* 0.8.2: labels at 12px — narrower side padding, gap and tracking on phones, so «02 STUDENTS» stays on one line at 360px */
.rs-jump{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:24px}
.rs-jump a{display:flex;flex-direction:column;gap:6px;min-height:48px;padding:14px 10px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:border-color .18s}
@media(hover:hover){.rs-jump a:hover{border-color:var(--line3)}}
.rs-jump .k{font-size:12px;letter-spacing:.02em;color:var(--ink3)}
.rs-jump b{font-size:clamp(28px,7.4vw,36px);font-weight:900;letter-spacing:-.03em;line-height:1}
.rs-jump .t{font-size:12px;line-height:1.6;color:var(--ink2)}
@media(min-width:700px){.rs-jump{gap:14px}.rs-jump a{padding:20px 18px 22px}.rs-jump .t{font-size:13px}}

/* ---------- shared list pieces ---------- */
.rs .lead+.rs-note{margin-top:14px}
.rs-note{max-width:70ch;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  font-size:12.5px;line-height:1.9;color:var(--ink2)}
.rs-x{display:none}
.all>.rs-x{display:block}
.rs-more{display:flex;align-items:baseline;justify-content:center;gap:10px;width:100%;min-height:50px;margin-top:12px;padding:12px 18px;
  background:var(--card);border:1px solid var(--line3);border-radius:999px;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer}
.rs-more .mn{font-size:12px;font-weight:400;color:var(--ink3)}
@media(hover:hover){.rs-more:hover{border-color:var(--ink3)}}
.scene .rs-more{background:transparent}

.rs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:24px}
@media(min-width:600px){.rs-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:1000px){.rs-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- 01 trades: one dark scene holds every video card; nothing loads until tapped ---------- */
.rs-stage{margin-top:24px;padding:10px;border-radius:20px;
  background:radial-gradient(360px 200px at 20% 0%,rgba(35,40,122,.5) 0%,rgba(35,40,122,0) 75%),var(--scene);
  box-shadow:0 18px 40px rgba(14,16,36,.22)}
@media(min-width:760px){.rs-stage{padding:16px}}
.rs-stage .rs-grid{margin-top:0}
.rs-tr>li{border-radius:14px;background:var(--card);border:1px solid var(--line)}
.tr{display:flex;flex-direction:column;justify-content:space-between;gap:6px;aspect-ratio:16/10;padding:10px 12px;border-radius:14px;transition:background-color .18s}
@media(hover:hover){.tr:hover{background:#1D2146}.tr:hover .pl{background:#fff;border-color:#fff}.tr:hover .pl svg{fill:var(--scene)}}
.tr-h{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink3)}
.tr-h .k{letter-spacing:.08em;color:#fff}
.tr .pl{align-self:center;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line3);border-radius:50%;transition:background-color .18s,border-color .18s}
.tr .pl svg{width:11px;height:13px;margin-left:3px;fill:#fff}
.tr-f{font-size:12px;color:var(--ink3)}

/* ---------- 02 students: screenshots on white cards ---------- */
.rs-st>li{border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.st{position:relative;display:block}
.st img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.st .k{position:absolute;top:8px;left:8px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.92);
  font-size:12px;letter-spacing:.06em;color:var(--ink)}
@media(hover:hover){.st img{transition:opacity .18s}.st:hover img{opacity:.88}}

/* ---------- 03 reviews ---------- */
.rs-q{margin-top:24px}
@media(min-width:760px){.rs-q{columns:2;column-gap:14px}}
@media(min-width:1100px){.rs-q{columns:3}}
.rs-q figure{margin:0 0 10px;padding:18px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);break-inside:avoid}
@media(min-width:760px){.rs-q figure{margin-bottom:14px}}
.rs-q .m{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;font-size:12px;color:var(--ink3)}
.rs-q .m b{color:var(--ink2);font-weight:500;font-family:var(--sans)}
.rs-q .m .tg{margin-inline-start:auto;padding:1px 9px;border-radius:999px;background:var(--bg);font-family:var(--sans);font-size:12px;color:var(--ink2)}
.rs-q blockquote{font-size:14px;line-height:1.95}
.rs-q .nm{margin-top:12px;font-size:13px;font-weight:900}
.rs-q+.rs-more{margin-top:2px}

/* ---------- viewer (video / full screenshot): a dark scene ---------- */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--scene);color:#fff}
.lb[open]{display:flex;flex-direction:column}
.lb::backdrop{background:rgba(14,16,36,.92)}
html.lb-on{overflow:hidden}
.lb-bar{flex:none;display:flex;align-items:center;gap:14px;min-height:60px;padding:env(safe-area-inset-top) 16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.lb-cap{font-size:12px;letter-spacing:.08em;color:#fff}
.lb-n{font-size:12px;color:#9CA0C4}
.lb-x{margin-inline-start:auto;min-height:44px;padding-inline:18px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer}
.lb-x:hover{border-color:#fff}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px}
.lb-stage video{width:100%;max-height:100%;background:#000;border-radius:10px}
.lb-nav{flex:none;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1)}
.lb-nav button{flex:1;min-height:50px;border-radius:999px;background:rgba(255,255,255,.08);border:0;color:#fff;
  font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer}
.lb-nav button:disabled{color:#6A6F8E;background:rgba(255,255,255,.03);cursor:default}
@media(hover:hover){.lb-nav button:not(:disabled):hover{background:rgba(255,255,255,.14)}}