/* ============================================================
   tg-cta.css — Telegram growth touchpoints
   Upload to: public_html/css/tg-cta.css
   ------------------------------------------------------------
   Three small components, all using the site's existing tokens
   from core.min.css (brand blue, Inter Tight, radii, easing).

   .tg-cta      end-of-lesson / end-of-post box (static HTML)
   .tg-bar      mobile-only sticky join bar (injected by tg-cta.js)
   .hero-story-link  quiet third link under the home hero buttons
   ============================================================ */

/* ---------- 1. End-of-content CTA box ---------- */
.tg-cta{
  text-align:left;
  max-width:820px;
  margin:56px auto 24px;
  padding:0 var(--gutter,24px);
}
.tg-cta .tg-cta-box{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding:30px 32px;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,#0c1e3e,#0d2659);
  overflow:hidden;
}
.tg-cta .tg-cta-box::after{
  /* soft brand glow bottom-right — one accent, nothing else */
  content:'';
  position:absolute; right:-80px; bottom:-120px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(28,105,212,.45),transparent 65%);
  pointer-events:none;
}
.tg-cta .tg-cta-icon{
  width:52px; height:52px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.tg-cta .tg-cta-icon svg{ width:26px; height:26px; fill:#fff; }
.tg-cta .tg-cta-text h3{
  margin:0 0 6px;
  text-transform:none;
  font-size:21px; font-weight:700; line-height:1.2; letter-spacing:-.01em;
  color:#fff;
}
.tg-cta .tg-cta-text p{
  margin:0;
  font-weight:400;
  font-size:14.5px; line-height:1.55;
  color:#aecbf0;
  max-width:52ch;
}
.tg-cta a.tg-cta-btn{
  position:relative; z-index:1;
  border:0; text-transform:none; box-shadow:none;
  display:inline-flex; align-items:center; gap:10px;
  height:50px; padding:0 24px;
  border-radius:100px;
  background:#fff; color:#1c69d4;
  font-weight:700; font-size:15px; letter-spacing:0;
  text-decoration:none; white-space:nowrap;
  transition:transform var(--t-base,240ms), box-shadow var(--t-base,240ms);
}
.tg-cta a.tg-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.tg-cta a.tg-cta-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.tg-cta a.tg-cta-btn svg{ width:18px; height:18px; fill:currentColor; }
.tg-cta .tg-cta-note{
  grid-column:1 / -1;
  margin:4px 0 0;
  font-size:12.5px; color:rgba(255,255,255,.55);
}
@media (max-width:720px){
  .tg-cta{ margin:44px auto 8px; padding:0 16px; }
  .tg-cta .tg-cta-box{
    grid-template-columns:auto 1fr;
    padding:24px 22px;
    gap:16px;
  }
  .tg-cta a.tg-cta-btn{ grid-column:1 / -1; justify-content:center; width:100%; }
  .tg-cta .tg-cta-text h3{ font-size:19px; }
}

/* ---------- 2. Mobile sticky join bar ---------- */
.tg-bar{
  position:fixed; left:0; right:0; bottom:0;
  z-index:var(--z-toast,300);
  display:none;               /* enabled by JS on small screens only */
  align-items:center; gap:12px;
  padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:#fff;
  border-top:1px solid #e8e8ea;
  box-shadow:0 -8px 24px rgba(20,23,28,.10);
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  transform:translateY(110%);
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}
.tg-bar.tg-bar-on{ display:flex; }
.tg-bar.tg-bar-show{ transform:translateY(0); }
.tg-bar-icon{
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:12px;
  background:#dde8f9;
}
.tg-bar-icon svg{ width:20px; height:20px; fill:#1c69d4; }
.tg-bar-text{ flex:1; min-width:0; line-height:1.2; }
.tg-bar-text b{ display:block; font-size:14px; font-weight:700; color:#1a1d23; }
.tg-bar-text span{ display:block; font-size:12px; color:#4a4e57; margin-top:2px; }
.tg-bar-btn{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 18px;
  border-radius:100px;
  background:#1c69d4; color:#fff;
  font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.tg-bar-btn:active{ background:#0653b6; }
.tg-bar-x{
  flex-shrink:0;
  width:32px; height:32px; margin-left:-2px;
  border:0; background:transparent; color:#8a8f99;
  font-size:22px; line-height:1; cursor:pointer;
  border-radius:50%;
}
.tg-bar-x:hover{ background:#f5f6f8; color:#1a1d23; }
body.tg-bar-space{ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
@media (prefers-reduced-motion:reduce){
  .tg-bar{ transition:none; }
  .tg-cta a.tg-cta-btn{ transition:none; }
}
@media (prefers-color-scheme:dark){
  /* The site itself is light-themed; keep the bar readable if a page
     ever runs a dark scheme. */
  .tg-bar{ background:#16191e; border-top-color:rgba(255,255,255,.14); }
  .tg-bar-text b{ color:#fff; }
  .tg-bar-text span{ color:rgba(255,255,255,.72); }
  .tg-bar-x:hover{ background:rgba(255,255,255,.08); color:#fff; }
}

/* ---------- 3. Home hero: quiet story link ---------- */
.hero-story-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px;
  font-size:14px; font-weight:500; letter-spacing:.02em;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:2px;
  transition:color var(--t-base,240ms), border-color var(--t-base,240ms);
}
.hero-story-link:hover{ color:#fff; border-color:#fff; }
.hero-story-link svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.hero-ctas + .hero-story-link{ display:inline-flex; }

/* ---- keep cRyPi clear of the sticky Telegram bar (mobile) ----
   tg-cta.js adds body.tg-bar-space while the bar is on screen; lift the
   launcher and its greeting above the bar, and hide the bar when the
   chat panel is open so they never fight for the same corner. */
body.tg-bar-space #crypi-launch{ bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important; }
body.tg-bar-space #crypi-greet{ bottom:calc(164px + env(safe-area-inset-bottom,0px)) !important; }
body.tg-bar-space .tg-bar{ padding-right:14px; }
body.crypi-open .tg-bar{ transform:translateY(110%) !important; }