/* Interactive "See it work" suite — scoped under #suite-root so its global
   resets don't fight the pipeline above it. */
#suite-root{
  --bg:#090D17; --bg-soft:#0C1120; --win:#0E1424; --win-head:#0A0E1A;
  --raised:#141B2E; --bd:#1E2740; --bd-soft:#161D2E;
  --txt:#EEF1F6; --mut:#838CA1; --dim:#586173;
  --gold:#F6B73C; --gold-dim:#C9902C;
  --green:#3FC177; --blue:#5B9BF0;
  --hot-bg:#37161A; --hot-tx:#F0796B;
  --warm-bg:#352810; --warm-tx:#F2B43C;
  --new-bg:#142F54; --new-tx:#74B0F2;
  --disp:'Space Grotesk',sans-serif; --mono:'IBM Plex Mono',monospace; --body:'Inter',sans-serif;
  background:var(--bg);font-family:var(--body);color:var(--txt);line-height:1.5;display:block;
}
#suite-root *{box-sizing:border-box}
@media(prefers-reduced-motion:reduce){#suite-root *{animation:none!important;transition:none!important}}

#suite-root .sec{max-width:1240px;margin:0 auto;padding:80px 40px;position:relative}
#suite-root .sec::before{content:"";position:absolute;top:8%;left:38%;width:60%;height:70%;background:radial-gradient(ellipse at center,rgba(40,60,110,.32),transparent 70%);pointer-events:none;z-index:0}
#suite-root .sec>*{position:relative;z-index:1}

#suite-root .eye{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:500}
#suite-root h2.head{font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:-.02em;margin-top:20px;max-width:16ch}
#suite-root h2.head .g{color:var(--gold)}
#suite-root .intro{color:var(--mut);font-size:16.5px;max-width:46ch;margin-top:22px}

/* module tabs */
#suite-root .mods{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
#suite-root .mod{background:var(--win);border:1px solid var(--bd);border-radius:13px;padding:16px 22px;text-align:left;min-width:172px;transition:.18s;cursor:pointer}
#suite-root .mod:hover{border-color:#33405e}
#suite-root .mod.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 40px -20px rgba(246,183,60,.4)}
#suite-root .mod .ml{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);font-weight:500}
#suite-root .mod.on .ml{color:var(--gold)}
#suite-root .mod .mn{font-family:var(--disp);font-weight:700;font-size:19px;margin-top:7px;color:var(--txt)}

/* layout: desc + window */
#suite-root .stage{display:grid;grid-template-columns:300px 1fr;gap:34px;margin-top:34px;align-items:start}
#suite-root .desc h3{font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.25}
#suite-root .desc ul{list-style:none;margin-top:18px;display:grid;gap:13px}
#suite-root .desc li{font-size:14px;color:var(--mut);display:flex;gap:10px;align-items:flex-start}
#suite-root .desc li .ck{color:var(--green);font-weight:700;flex:none}
#suite-root .desc .open{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--gold);text-decoration:none;border:1px solid var(--bd);padding:8px 13px;border-radius:9px;transition:.15s}
#suite-root .desc .open:hover{border-color:var(--gold)}

/* app window */
#suite-root .app{background:var(--win);border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
#suite-root .app-head{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--bd-soft);background:var(--win-head)}
#suite-root .dots{display:flex;gap:6px}
#suite-root .dots i{width:11px;height:11px;border-radius:50%;display:block}
#suite-root .dots i:nth-child(1){background:#E85D52}#suite-root .dots i:nth-child(2){background:#E8B73C}#suite-root .dots i:nth-child(3){background:#41C76B}
#suite-root .app-url{font-family:var(--mono);font-size:12px;color:var(--dim);margin-left:8px}
#suite-root .app-url b{color:var(--mut);font-weight:500}
#suite-root .app-body{padding:16px}

/* controls row */
#suite-root .ctrl{display:flex;gap:10px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
#suite-root .inp{flex:1;min-width:160px;background:var(--raised);border:1px solid var(--bd);border-radius:9px;padding:10px 14px;font-family:var(--body);font-size:13.5px;color:var(--txt);outline:none}
#suite-root .inp::placeholder{color:var(--dim)}
#suite-root .inp:focus{border-color:#3a496c}
#suite-root .ddl{background:var(--raised);border:1px solid var(--bd);border-radius:9px;padding:10px 13px;font-family:var(--mono);font-size:12.5px;color:var(--mut);outline:none;cursor:pointer}
#suite-root .cnt{font-family:var(--mono);font-size:12px;color:var(--gold);white-space:nowrap}
#suite-root .btn-gold{background:var(--gold);color:#1a1407;border:none;font-family:var(--mono);font-weight:600;font-size:13px;padding:10px 16px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap}
#suite-root .btn-gold:hover{background:#ffc658}

/* table */
#suite-root .tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
#suite-root .tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:left;padding:12px 12px;border-bottom:1px solid var(--bd-soft);font-weight:500}
#suite-root .tbl td{padding:13px 12px;border-bottom:1px solid var(--bd-soft);color:var(--mut)}
#suite-root .tbl tr:last-child td{border-bottom:none}
#suite-root .tbl .lead{color:var(--txt);font-weight:600}
#suite-root .tbl tr.sel td{background:rgba(246,183,60,.06)}
#suite-root .cbx{width:16px;height:16px;border:1.5px solid var(--bd);border-radius:5px;display:inline-grid;place-items:center;cursor:pointer;color:transparent;font-size:11px;transition:.12s}
#suite-root .cbx.on{background:var(--gold);border-color:var(--gold);color:#1a1407}
#suite-root .pill{font-family:var(--body);font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
#suite-root .pill.hot{background:var(--hot-bg);color:var(--hot-tx)}
#suite-root .pill.warm{background:var(--warm-bg);color:var(--warm-tx)}
#suite-root .pill.new{background:var(--new-bg);color:var(--new-tx)}
#suite-root .pill.qd{background:var(--new-bg);color:var(--new-tx)}
#suite-root .foot{font-size:13px;color:var(--dim);padding:13px 4px 2px;font-family:var(--body)}
#suite-root .foot a{color:var(--blue);text-decoration:none;font-weight:500}
#suite-root .foot a:hover{text-decoration:underline}
#suite-root .empty{padding:30px;text-align:center;color:var(--dim);font-family:var(--mono);font-size:12.5px}

/* outreach */
#suite-root .compose{display:grid;grid-template-columns:1fr 230px;gap:18px}
#suite-root .seg{display:flex;gap:6px;margin-bottom:12px}
#suite-root .seg button{font-family:var(--mono);font-size:12px;background:var(--raised);border:1px solid var(--bd);color:var(--mut);padding:8px 14px;border-radius:8px;cursor:pointer}
#suite-root .seg button.on{background:var(--gold);border-color:var(--gold);color:#1a1407;font-weight:600}
#suite-root .ta{width:100%;min-height:118px;background:var(--raised);border:1px solid var(--bd);border-radius:10px;padding:13px;font-family:var(--body);font-size:13.5px;color:var(--txt);resize:vertical;outline:none;line-height:1.55}
#suite-root .merge{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}
#suite-root .merge span{font-family:var(--mono);font-size:11px;color:var(--gold);background:rgba(246,183,60,.1);border:1px solid var(--gold-dim);padding:3px 8px;border-radius:6px;cursor:pointer}
#suite-root .recip{background:var(--raised);border:1px solid var(--bd);border-radius:10px;padding:14px}
#suite-root .recip h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
#suite-root .recip .r{font-size:12.5px;color:var(--mut);padding:5px 0;display:flex;justify-content:space-between;border-bottom:1px solid var(--bd-soft)}
#suite-root .recip .r:last-child{border:none}
#suite-root .recip .r b{color:var(--txt);font-weight:600}
#suite-root .send-row{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#suite-root .outstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
#suite-root .outstats .o{background:var(--raised);border:1px solid var(--bd);border-radius:10px;padding:13px;text-align:center}
#suite-root .outstats .o .v{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--gold)}
#suite-root .outstats .o .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:3px}
#suite-root .tick{color:var(--green);font-family:var(--mono);font-size:12px}

/* finder */
#suite-root .fitem{display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--bd-soft);font-size:13px}
#suite-root .fitem .nm{color:var(--txt);font-weight:600}
#suite-root .fitem .src{font-family:var(--mono);font-size:11px;color:var(--blue)}
#suite-root .fitem .add{font-family:var(--mono);font-size:11px;background:var(--raised);border:1px solid var(--bd);color:var(--mut);padding:6px 11px;border-radius:7px;cursor:pointer}
#suite-root .fitem .add.done{background:rgba(63,193,119,.12);border-color:var(--green);color:var(--green)}

#suite-root .cta-line{margin-top:50px;font-family:var(--body);font-size:14px;color:var(--mut)}
#suite-root .cta-line a{color:var(--gold);text-decoration:none;font-weight:500}

@media(max-width:860px){
  #suite-root .sec{padding:54px 22px}
  #suite-root .stage{grid-template-columns:1fr}
  #suite-root .compose{grid-template-columns:1fr}
  #suite-root .app-body{overflow-x:auto}
}