/* ============================================================
   Telegram Tracker — page-specific styles
   Reused conversion components (wt-*) come from whatsapp-tracker.css.
   The .sh-related 3-card block comes from design-system.css.
   This file only adds the Telegram-unique pieces so every class
   referenced on the page is guaranteed to exist:
     - .tg-cap   capture mechanism list
     - .tg-cando CAN / CANNOT honesty table
     - .tg-risk  Telegram risk-explainer card
     - .tg-sticky-cta mobile sticky bottom bar (~94% mobile)
   ============================================================ */

/* Capture-mechanism list (received messages + Social Snap) */
.tg-cap{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.tg-cap__row{display:flex;gap:14px;align-items:flex-start;background:#0d1222;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:15px 18px}
.tg-cap__row i{flex:0 0 auto;font-size:18px;color:#229ED9;margin-top:3px;width:24px;text-align:center}
.tg-cap__row strong{display:block;color:#e8ecf4;font-size:15.5px;margin-bottom:3px;font-family:'Kumbh Sans',sans-serif}
.tg-cap__row span{display:block;color:#b4bccd;font-size:14px;line-height:1.6}

/* CAN / CANNOT capability honesty table */
.tg-cando{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
@media(max-width:768px){.tg-cando{grid-template-columns:1fr}}
.tg-cando__col{background:#0d1222;border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:20px 22px}
.tg-cando__col--can{border-top:3px solid #0bb855}
.tg-cando__col--cant{border-top:3px solid #e0683f}
.tg-cando__col h4{font-family:'Kumbh Sans',sans-serif;font-size:17px;margin:0 0 14px;display:flex;align-items:center;gap:9px;color:#e8ecf4}
.tg-cando__col--can h4 i{color:#0bb855}
.tg-cando__col--cant h4 i{color:#e0683f}
.tg-cando__col ul{list-style:none;margin:0;padding:0}
.tg-cando__col li{position:relative;padding:0 0 11px 26px;color:#c2c9d8;font-size:14.5px;line-height:1.6}
.tg-cando__col li:last-child{padding-bottom:0}
.tg-cando__col li::before{position:absolute;left:0;top:1px;font-family:"Font Awesome 6 Free";font-weight:900;font-size:13px}
.tg-cando__col--can li::before{content:"\f00c";color:#0bb855}
.tg-cando__col--cant li::before{content:"\f00d";color:#e0683f}

/* Telegram risk-explainer card */
.tg-risk{background:linear-gradient(135deg,rgba(34,158,217,.08),rgba(13,18,34,.45));border:1px solid rgba(34,158,217,.22);border-left:3px solid #229ED9;border-radius:0 12px 12px 0;padding:20px 22px;margin:26px 0}
.tg-risk h3{color:#fff;font-size:21px;margin-bottom:10px;font-family:'Kumbh Sans',sans-serif}
.tg-risk p{color:#c2c9d8;font-size:15px;line-height:1.75;margin-bottom:10px}
.tg-risk p:last-child{margin-bottom:0}

/* Mobile sticky bottom CTA (~94% mobile audience) */
.tg-sticky-cta{display:none}
@media(max-width:991px){
  .tg-sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:999;gap:8px;padding:9px 12px;background:rgba(8,11,22,.97);border-top:1px solid rgba(6,152,69,.28);box-shadow:0 -4px 18px rgba(0,0,0,.4);backdrop-filter:blur(6px)}
  .tg-sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;padding:12px 8px;border-radius:9px;text-decoration:none}
  .tg-sticky-cta .tg-sticky-cta__primary{background:linear-gradient(135deg,#069845,#0bb855);color:#fff;box-shadow:0 4px 14px rgba(6,152,69,.3)}
  .tg-sticky-cta .tg-sticky-cta__ghost{border:1.5px solid #069845;color:#0bb855;background:transparent}
}