/* =========================================================================
 * slides.css — GENERATED by tools/gen_slides.php from the live capture at
 * tests/harvest/page-slides.html (SLIDES_HTML in app.ts).
 *
 * Scoped under .tool-slides: the original styled bare element selectors,
 * which would leak across the shared stylesheet cascade.
 * ========================================================================= */

.tool-slides,
.tool-slides::before,
.tool-slides::after { box-sizing: border-box; margin: 0; padding: 0; }
.tool-slides,
.tool-slides { width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; background: #070c2e; color: #fff; }
.tool-slides #deck { position: fixed; inset: 0; }
.tool-slides .slide {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
      padding: 6vh 7vw;
      background: linear-gradient(135deg, #191f6c 0%, #0f1447 55%, #080c33 100%);
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s ease;
      overflow: hidden;
    }
.tool-slides .slide.active { opacity: 1; pointer-events: auto; }
.tool-slides .slide::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(0,152,68,0.08) 0%, transparent 60%),
                  radial-gradient(ellipse 50% 50% at 10% 80%, rgba(25,31,108,0.5) 0%, transparent 70%);
      pointer-events: none;
    }
.tool-slides .label { font-size: clamp(10px,1.1vw,14px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #4cd87a; margin-bottom: 1.4vh; }
.tool-slides .headline { font-size: clamp(26px,4.6vw,68px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.8vh; text-wrap: balance; }
.tool-slides .headline span { color: #4cd87a; }
.tool-slides .subhead { font-size: clamp(13px,1.55vw,22px); font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.62); max-width: 52vw; margin-bottom: 2.4vh; }
.tool-slides .accent-bar { width: 5vw; height: 4px; background: #009844; border-radius: 2px; margin-bottom: 2.4vh; }
.tool-slides .cards-row { display: flex; gap: 1.6vw; width: 100%; margin-top: 0.8vh; }
.tool-slides .card { flex: 1; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 2.8vh 2.2vw; }
.tool-slides .card.green { border-color: rgba(0,152,68,0.35); background: rgba(0,152,68,0.07); }
.tool-slides .card.green .card-title { color: #4cd87a; }
.tool-slides .card-icon { font-size: clamp(20px,2.4vw,32px); margin-bottom: 1.2vh; }
.tool-slides .card-title { font-size: clamp(12px,1.3vw,19px); font-weight: 700; color: #fff; margin-bottom: 0.7vh; }
.tool-slides .card-body { font-size: clamp(11px,1.05vw,15px); color: rgba(255,255,255,0.55); line-height: 1.6; }
.tool-slides .split { display: flex; gap: 5vw; width: 100%; align-items: flex-start; }
.tool-slides .split-left { flex: 1.1; }
.tool-slides .split-right { flex: 1.2; display: flex; flex-direction: column; gap: 1.3vh; }
.tool-slides .signal { display: flex; align-items: flex-start; gap: 1vw; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 11px; padding: 1.4vh 1.5vw; }
.tool-slides .signal-dot { width: clamp(7px,0.85vw,11px); height: clamp(7px,0.85vw,11px); border-radius: 50%; background: #009844; flex-shrink: 0; margin-top: 0.35em; }
.tool-slides .signal-text { font-size: clamp(10px,1.1vw,16px); color: rgba(255,255,255,0.72); line-height: 1.5; }
.tool-slides .signal-text strong { color: #fff; font-weight: 600; }
.tool-slides .stat-row { display: flex; gap: 3.5vw; margin-top: 1.8vh; }
.tool-slides .stat-num { font-size: clamp(28px,4.8vw,68px); font-weight: 900; color: #4cd87a; line-height: 1; letter-spacing: -0.03em; }
.tool-slides .stat-label { font-size: clamp(10px,1vw,14px); color: rgba(255,255,255,0.45); margin-top: 0.5vh; line-height: 1.4; }
.tool-slides .pillar { flex: 1; border-radius: 14px; padding: 2.8vh 2vw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tool-slides .pillar-num { font-size: clamp(30px,4.5vw,64px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin-bottom: 0.8vh; }
.tool-slides .pillar-title { font-size: clamp(12px,1.3vw,18px); font-weight: 700; margin-bottom: 0.7vh; }
.tool-slides .pillar-body { font-size: clamp(10px,1vw,14px); color: rgba(255,255,255,0.5); line-height: 1.55; }
.tool-slides .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 2.5vw; width: 100%; margin-top: 1vh; }
.tool-slides .ba-col-head { font-size: clamp(11px,1.2vw,17px); font-weight: 700; padding: 1.1vh 1.6vw; border-radius: 9px; text-align: center; }
.tool-slides .ba-col-head.before { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.45); }
.tool-slides .ba-col-head.after { background: rgba(0,152,68,0.15); color: #4cd87a; }
.tool-slides .ba-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 1.3vh 1.5vw; font-size: clamp(10px,1.05vw,15px); color: rgba(255,255,255,0.62); line-height: 1.5; }
.tool-slides .ba-item.after-item { border-color: rgba(0,152,68,0.2); background: rgba(0,152,68,0.05); color: rgba(255,255,255,0.78); }
.tool-slides .tools-row { display: flex; flex-wrap: wrap; gap: 1vh 1.2vw; margin-top: 1.8vh; }
.tool-slides .tool-chip { background: rgba(0,152,68,0.12); border: 1px solid rgba(0,152,68,0.28); border-radius: 100px; padding: 0.7vh 1.6vw; font-size: clamp(10px,1vw,14px); font-weight: 600; color: #4cd87a; }
.tool-slides .cta-box { display: inline-flex; align-items: center; gap: 1vw; background: rgba(0,152,68,0.15); border: 1px solid rgba(0,152,68,0.35); border-radius: 11px; padding: 1.6vh 2.2vw; margin-top: 2.2vh; }
.tool-slides .cta-url { font-size: clamp(12px,1.3vw,19px); font-weight: 700; color: #4cd87a; }
.tool-slides .cta-desc { font-size: clamp(9px,1vw,14px); color: rgba(255,255,255,0.5); margin-top: 0.3vh; }
.tool-slides .brand { display: flex; align-items: center; gap: 0.7vw; margin-bottom: 2.6vh; }
.tool-slides .brand-dot { width: clamp(7px,0.9vw,13px); height: clamp(7px,0.9vw,13px); border-radius: 50%; background: #009844; }
.tool-slides .brand-name { font-size: clamp(10px,1.05vw,15px); font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
.tool-slides .brand-name span { color: #4cd87a; }
.tool-slides #nav { position: fixed; bottom: 3vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1vw; z-index: 100; }
.tool-slides .dot { width: clamp(6px,0.65vw,9px); height: clamp(6px,0.65vw,9px); border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.tool-slides .dot.active { background: #009844; transform: scale(1.35); }
.tool-slides #prev-btn,
.tool-slides #next-btn {
      position: fixed; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 50%; width: clamp(34px,3.2vw,50px); height: clamp(34px,3.2vw,50px);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.2s, border-color 0.2s; color: rgba(255,255,255,0.45);
      font-size: clamp(13px,1.4vw,20px); user-select: none; z-index: 100;
    }
.tool-slides #prev-btn { left: 1.5vw; }
.tool-slides #next-btn { right: 1.5vw; }
.tool-slides #prev-btn:hover,
.tool-slides #next-btn:hover { background: rgba(0,152,68,0.2); color: #fff; border-color: rgba(0,152,68,0.4); }
.tool-slides #slide-counter { position: fixed; top: 2.6vh; right: 2.2vw; font-size: clamp(9px,0.95vw,13px); color: rgba(255,255,255,0.28); font-weight: 500; letter-spacing: 0.06em; z-index: 100; }
.tool-slides #back-link { position: fixed; top: 2.4vh; left: 1.8vw; font-size: clamp(9px,0.95vw,13px); color: rgba(255,255,255,0.32); text-decoration: none; transition: color 0.2s; z-index: 100; }
.tool-slides #back-link:hover { color: #4cd87a; }
.tool-slides #slide-1 { align-items: center; text-align: center; justify-content: center; }
.tool-slides #slide-1 .headline { font-size: clamp(32px,6vw,90px); }
.tool-slides #slide-1 .subhead { max-width: 58vw; text-align: center; }
.tool-slides #slide-8 { align-items: center; text-align: center; justify-content: center; }
.tool-slides #slide-8 .subhead { text-align: center; max-width: 52vw; }
@media (max-width: 768px) {
.tool-slides .slide { padding: 5vh 5vw; }
.tool-slides .split { flex-direction: column; gap: 2vh; }
.tool-slides .cards-row { flex-direction: column; gap: 1.4vh; }
.tool-slides .ba-grid { grid-template-columns: 1fr; }

    
}