/* ==========================================================================
   Rootline — SLP Compliance case study
   Page-specific components ONLY. All tokens, layout primitives, cards, flow,
   algo-grid, timeline, ba-table, stat strips, pull-quote, cta-band, footer,
   reveal + nav come from ../portfolio.css. This file adds:
     .speed-ledger  — hero speed comparison bars
     .shot / .browser-frame — faux-browser screenshot wrapper
     .module-desc   — "plain UI label" tail on module headings
     .tour / .mini  — alternating product-tour blocks + stat trio
     .shot-cap      — screenshot caption
   ========================================================================== */

/* 1. Speed ledger (hero) --------------------------------------------------- */
.speed-ledger{margin:24px 0 30px;max-width:560px}
.sl-row{margin-bottom:16px}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.84rem;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.sl-top b{font-weight:800;color:var(--ink)}
.sl-track{height:18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;overflow:hidden}
.sl-fill{height:100%;border-radius:100px}
.sl-fill.long{width:100%;background:repeating-linear-gradient(135deg,#dfe6e3,#dfe6e3 9px,#e9eeec 9px,#e9eeec 18px)}
.sl-fill.short{width:9%;min-width:52px;background:linear-gradient(90deg,var(--green-deep),var(--green))}
.sl-delta{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;color:var(--green-deep)}
.sl-delta .chip{background:var(--green-soft);border:1px solid var(--mint);border-radius:100px;padding:3px 12px;font-family:'Manrope',sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep)}

/* 2. Faux-browser screenshot frame ---------------------------------------- */
.shot{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xl);border:5px solid #fff;background:var(--bg-soft)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#eef2f0;border-bottom:1px solid var(--line)}
.browser-dot{width:11px;height:11px;border-radius:50%;flex:none}
.browser-dot.r{background:#f4a8a0}.browser-dot.y{background:#f2ce7e}.browser-dot.g{background:#a7d9bf}
.browser-url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line);border-radius:100px;padding:5px 14px;font-size:.72rem;color:var(--ink-faint);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;background:var(--bg-soft)}
.shot-cap{font-size:.82rem;color:var(--ink-faint);margin-top:12px;font-weight:500;max-width:62ch;line-height:1.5}

/* 3. Module heading "plain UI label" tail --------------------------------- */
.module-desc{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.03em;color:var(--green-deep);margin-top:2px}

/* 4. Product tour (alternating image / copy) ------------------------------ */
.tour{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center;margin-top:44px}
.tour + .tour{margin-top:56px}
.tour.rev .tour-media{order:2}
.tour-copy .kicker{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.tour-copy h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:12px}
.tour-copy p{color:var(--ink-soft);font-size:1rem;font-weight:500;line-height:1.7}

/* 5. Mini stat trio -------------------------------------------------------- */
.mini{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.mini > div{min-width:96px}
.mini b{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--green-deep);display:block;line-height:1}
.mini span{font-size:.78rem;color:var(--ink-faint);font-weight:600;margin-top:5px;display:block;line-height:1.35}

/* 6. Responsive ------------------------------------------------------------ */
@media(max-width:920px){
  .tour{grid-template-columns:1fr;gap:26px}
  .tour.rev .tour-media{order:0}
  .speed-ledger{max-width:none}
}