/* tc-cta.css — Conversion-grade CTA system for the PUBLIC / marketing pages.
 * 2026-10-16 (Daniel): "all buttons should be stylized according to practices
 * by world class online marketers." One sheet, loaded AFTER each page's own
 * <style>, so every primary CTA on index / courses / upgrade / academia /
 * manual / answers shares ONE geometry and ONE motion language:
 *   • 56px tall, 17px / 800, full pill, min 180px — a thumb target, not a link
 *   • gradient depth + 1px inner top highlight + colored glow (reads "pressable")
 *   • hover: 2px lift + stronger glow + a single shine sweep (one, not looping)
 *   • active: compresses (scale .98) — tactile confirmation
 *   • focus-visible: 3px ring in the brand tint (keyboard + a11y)
 *   • ≤640px: full-width, 58px tall (mobile is where most parents buy)
 *   • prefers-reduced-motion: no lift / sweep, instant color change
 * Tier CTAs on upgrade.html (PRO amber, Family purple) KEEP their gradients —
 * color carries meaning there — and inherit only geometry + motion.
 * Tokens with fallbacks because index/academia/manual don't load tc-shell.css.
 */

:root{
  --cta-blue:var(--teal,#0061D4);
  --cta-blue-dark:var(--teal2,var(--primary-dark,#0052B0));
  --cta-ring:rgba(0,97,212,.28);
  --cta-glow:0 8px 22px rgba(0,97,212,.28), 0 2px 4px rgba(0,97,212,.18);
  --cta-glow-hover:0 14px 32px rgba(0,97,212,.36), 0 3px 6px rgba(0,97,212,.22);
  --cta-h:56px;
  --cta-fs:17px;
  --cta-pad:0 30px;
}

/* ── Which elements are "primary CTAs" on each public page ─────────────────
 * index:    .btn-primary  .plan-cta-primary  .res-cta
 * courses:  .hero-cta-primary  .cta-pill  .pricing-cta
 * upgrade:  .plan-cta (tier gradients kept)
 * academia + manual: .btn (not .ghost — that's the secondary)
 * answers:  .cta a.b (not .b2 — secondary)
 */
.btn-primary, .plan-cta-primary, .res-cta,
.hero-cta-primary, .cta-pill, .pricing-cta,
.plan-cta,
.btn:not(.ghost), .btns .btn:not(.ghost),
.cta a.b:not(.b2),
.tc-cta, .sp-unit .tc-btn--primary{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-sizing:border-box;
  min-height:var(--cta-h); min-width:180px;
  padding:var(--cta-pad);
  font-family:inherit;
  font-size:var(--cta-fs); font-weight:800; line-height:1.15;
  letter-spacing:-.005em;
  text-decoration:none; text-align:center; white-space:nowrap;
  border:0; border-radius:999px;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  overflow:hidden; isolation:isolate;
  transform:translateZ(0);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease, background-color .18s ease;
  will-change:transform;
}

/* Blue primaries: depth gradient + inner highlight + glow */
.btn-primary, .plan-cta-primary, .res-cta,
.hero-cta-primary, .cta-pill, .pricing-cta,
.btn:not(.ghost), .btns .btn:not(.ghost),
.cta a.b:not(.b2),
.tc-cta, .sp-unit .tc-btn--primary{
  color:#fff;
  background-color:var(--cta-blue);
  background-image:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.08) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--cta-glow);
}
/* Tier CTAs: keep their own gradient, add the same highlight + a neutral glow */
.plan-cta{
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 8px 22px rgba(11,31,58,.18), 0 2px 4px rgba(11,31,58,.12);
}
.plan-cta.plan-cta-outline, .plan-cta.plan-cta-soft{
  box-shadow:none; color:inherit; background-image:none;
}

/* Shine sweep (one pass on hover) */
.btn-primary::after, .plan-cta-primary::after, .res-cta::after,
.hero-cta-primary::after, .cta-pill::after, .pricing-cta::after,
.plan-cta:not(.plan-cta-outline):not(.plan-cta-soft)::after,
.btn:not(.ghost)::after,
.cta a.b:not(.b2)::after,
.tc-cta::after, .sp-unit .tc-btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
  transform:translateX(-130%);
  pointer-events:none;
}

/* Hover: lift + glow + sweep */
.btn-primary:hover, .plan-cta-primary:hover, .res-cta:hover,
.hero-cta-primary:hover, .cta-pill:hover, .pricing-cta:hover,
.plan-cta:not(.plan-cta-outline):not(.plan-cta-soft):hover,
.btn:not(.ghost):hover,
.cta a.b:not(.b2):hover,
.tc-cta:hover, .sp-unit .tc-btn--primary:hover{
  transform:translateY(-2px) translateZ(0);
  filter:saturate(1.08) brightness(1.03);
  color:#fff;
}
.btn-primary:hover, .plan-cta-primary:hover, .res-cta:hover,
.hero-cta-primary:hover, .cta-pill:hover, .pricing-cta:hover,
.btn:not(.ghost):hover,
.cta a.b:not(.b2):hover,
.tc-cta:hover, .sp-unit .tc-btn--primary:hover{
  background-color:var(--cta-blue-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--cta-glow-hover);
}
.btn-primary:hover::after, .plan-cta-primary:hover::after, .res-cta:hover::after,
.hero-cta-primary:hover::after, .cta-pill:hover::after, .pricing-cta:hover::after,
.plan-cta:not(.plan-cta-outline):not(.plan-cta-soft):hover::after,
.btn:not(.ghost):hover::after,
.cta a.b:not(.b2):hover::after,
.tc-cta:hover::after, .sp-unit .tc-btn--primary:hover::after{
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  transform:translateX(130%);
}

/* Active: compress */
.btn-primary:active, .plan-cta-primary:active, .res-cta:active,
.hero-cta-primary:active, .cta-pill:active, .pricing-cta:active,
.plan-cta:active,
.btn:not(.ghost):active,
.cta a.b:not(.b2):active,
.tc-cta:active, .sp-unit .tc-btn--primary:active{
  transform:translateY(0) scale(.98) translateZ(0);
  transition-duration:.08s;
}

/* Focus ring (keyboard) */
.btn-primary:focus-visible, .plan-cta-primary:focus-visible, .res-cta:focus-visible,
.hero-cta-primary:focus-visible, .cta-pill:focus-visible, .pricing-cta:focus-visible,
.plan-cta:focus-visible,
.btn:focus-visible,
.cta a.b:focus-visible,
.tc-cta:focus-visible, .sp-unit .tc-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--cta-ring), var(--cta-glow);
}

/* Disabled / loading */
.btn-primary:disabled, .pricing-cta:disabled, .plan-cta:disabled, .btn:disabled, .sp-unit .tc-btn--primary:disabled,
.btn-primary[aria-disabled="true"], .plan-cta[aria-disabled="true"], .btn[aria-disabled="true"]{
  opacity:.62; cursor:default; transform:none; filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 6px rgba(11,31,58,.10);
}
.btn-primary:disabled::after, .pricing-cta:disabled::after, .plan-cta:disabled::after, .btn:disabled::after{ display:none; }

/* Secondary (ghost) — quieter so the primary wins the eye; same height for alignment */
.btn.ghost, .btns .btn.ghost, .plan-cta.plan-cta-outline, .plan-cta.plan-cta-soft, .cta a.b2,
.tc-cta--ghost, .sp-cta .tc-btn--ghost, .sp-unit .tc-btn--ghost, .sp-exam .tc-btn--ghost{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; min-height:var(--cta-h); padding:var(--cta-pad);
  font-size:var(--cta-fs); font-weight:800; line-height:1.15;
  border-radius:999px; white-space:nowrap; text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease, border-color .18s ease;
}
.btn.ghost:hover, .plan-cta.plan-cta-outline:hover, .plan-cta.plan-cta-soft:hover, .cta a.b2:hover{ transform:translateY(-1px); }
.btn.ghost:active, .plan-cta.plan-cta-outline:active, .plan-cta.plan-cta-soft:active, .cta a.b2:active{ transform:scale(.98); }

/* Explicit secondary look where the page has none (hub + generic) */
.tc-cta--ghost, .sp-cta .tc-btn--ghost, .sp-unit .tc-btn--ghost, .sp-exam .tc-btn--ghost{
  background:#fff; color:var(--navy,#0B3F82); border:2px solid var(--navy,#0B3F82);
}
.tc-cta--ghost:hover, .sp-cta .tc-btn--ghost:hover, .sp-unit .tc-btn--ghost:hover, .sp-exam .tc-btn--ghost:hover{
  background:var(--sky,#E3EFFC); color:var(--navy,#0B3F82); text-decoration:none;
}

/* Small contexts that must stay compact (nav pill, sticky bar) */
nav .cta-pill, .sticky-cta .cta-pill, .nav-cta{
  min-height:42px; min-width:0; padding:0 18px; font-size:14.5px;
}

/* Mobile: full-width, taller — most parents buy on the phone */
@media (max-width:640px){
  .btn-primary, .plan-cta-primary, .res-cta,
  .hero-cta-primary, .pricing-cta, .plan-cta,
  .btn:not(.ghost), .btns .btn:not(.ghost), .btn.ghost,
  .cta a.b,
  .tc-cta, .tc-cta--ghost, .sp-unit .tc-btn, .sp-cta .tc-btn, .sp-exam .tc-btn--ghost{
    width:100%; min-height:58px; font-size:17.5px;
    white-space:normal; padding:12px 22px; line-height:1.2;   /* long labels wrap instead of clipping */
  }
  .cta a.b2{ white-space:normal; padding:12px 22px; }
  nav .cta-pill, .sticky-cta .cta-pill{ width:auto; min-height:42px; }
}

/* Motion-sensitive users: no lift / sweep */
@media (prefers-reduced-motion:reduce){
  .btn-primary, .plan-cta-primary, .res-cta, .hero-cta-primary, .cta-pill, .pricing-cta, .plan-cta, .btn, .cta a.b{
    transition:background-color .1s ease, box-shadow .1s ease;
  }
  .btn-primary:hover, .plan-cta-primary:hover, .res-cta:hover, .hero-cta-primary:hover, .cta-pill:hover, .pricing-cta:hover, .plan-cta:hover, .btn:hover, .cta a.b:hover{ transform:none; filter:none; }
  .btn-primary::after, .plan-cta-primary::after, .res-cta::after, .hero-cta-primary::after, .cta-pill::after, .pricing-cta::after, .plan-cta::after, .btn::after, .cta a.b::after{ display:none; }
}