/* TGCC Learning Centre – [tgcc_membership] join page: page-specific parts only.
 * Shared components (top bar, hero, stats, buttons, toggle, table, cards, reviews, FAQ, CTA, sticky bar)
 * come from the TGCC design kit (assets/kit.css). Everything here is scoped under .tgcc-ms. */
.tgcc-ms .ms-stack{position:relative;height:470px}
.tgcc-ms .ms-stack a{position:absolute;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);transition:transform .25s}
.tgcc-ms .ms-stack a:hover{transform:translateY(-6px) rotate(0deg)!important;z-index:9}
.tgcc-ms .ms-stack .lc{left:0;right:0;top:0;border-radius:18px}
.tgcc-ms .ms-stack .lc img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.tgcc-ms .ms-stack .b1,.tgcc-ms .ms-stack .b2,.tgcc-ms .ms-stack .b3,.tgcc-ms .ms-stack .b4{width:150px}
.tgcc-ms .ms-stack .b1{left:-10px;bottom:0;transform:rotate(-7deg);z-index:1}
.tgcc-ms .ms-stack .b2{left:130px;bottom:-10px;transform:rotate(-1deg);z-index:2}
.tgcc-ms .ms-stack .b3{left:270px;bottom:6px;transform:rotate(5deg);z-index:3}
.tgcc-ms .ms-stack .b4{right:-10px;bottom:-2px;transform:rotate(9deg);z-index:4}
.tgcc-ms .ms-stack img{width:100%}
.tgcc-ms .ms-stack .lbl{position:absolute;top:14px;left:14px;background:#e53935;color:#fff;font-size:11px;font-weight:800;letter-spacing:1.5px;padding:6px 10px;border-radius:6px;text-transform:uppercase}

/* rank cards */
.tgcc-ms .ms-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tgcc-ms .ms-tier{position:relative;border-radius:24px;padding:2px;background:var(--g)}
.tgcc-ms .ms-tier .in{background:var(--tgcc-panel);border-radius:22px;height:100%;display:flex;flex-direction:column;overflow:hidden}
.tgcc-ms .ms-tier .art{position:relative;display:block;aspect-ratio:827/470;overflow:hidden}
.tgcc-ms .ms-tier .art img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .4s}
.tgcc-ms .ms-tier .art:hover img{transform:scale(1.05)}
.tgcc-ms .ms-tier .art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--tgcc-panel));pointer-events:none}
.tgcc-ms .ms-tier .bd{padding:6px 26px 26px;display:flex;flex-direction:column;flex:1}
.tgcc-ms .ms-tier .rank{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--c)}
.tgcc-ms .ms-tier h3{margin:4px 0 10px;font-size:28px;font-weight:900;line-height:1.2;color:#fff}
.tgcc-ms .ms-tier .price{display:flex;align-items:baseline;gap:6px}
.tgcc-ms .ms-tier .price b{font-size:46px;font-weight:900;letter-spacing:-1px;line-height:1.1;color:#fff}
.tgcc-ms .ms-tier .price span{color:var(--tgcc-mut);font-weight:700}
.tgcc-ms .ms-tier .sub{min-height:22px;font-size:13px;color:var(--tgcc-green);font-weight:700;margin-top:4px}
.tgcc-ms .ms-tier .perks{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:11px;font-size:15px}
.tgcc-ms .ms-tier .perks li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:0;list-style:none}
.tgcc-ms .ms-tier .perks li:before{content:"\2713";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}
.tgcc-ms .ms-tier .perks li.big b{color:var(--c)}
.tgcc-ms .ms-tier .go{margin-top:auto;display:block;text-align:center;padding:16px;border-radius:12px;font-weight:900;font-size:16px;letter-spacing:.3px;color:#fff;background:var(--tgcc-panel2);border:1px solid rgba(255,255,255,.14);transition:.2s}
.tgcc-ms .ms-tier .go:hover{background:var(--c);color:#0b0814}
.tgcc-ms .ms-tier.rec{transform:translateY(-14px);box-shadow:0 30px 80px rgba(142,67,240,.35)}
.tgcc-ms .ms-tier.rec .go{background:linear-gradient(135deg,var(--tgcc-purple),var(--tgcc-purple2));border:0;box-shadow:0 10px 28px rgba(142,67,240,.45)}
.tgcc-ms .ms-tier.rec .go:hover{filter:brightness(1.12);color:#fff}
.tgcc-ms .ms-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;background:linear-gradient(135deg,#c77dff,var(--tgcc-purple));padding:7px 16px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 22px rgba(142,67,240,.5)}

/* campaign */
.tgcc-ms .ms-camp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.tgcc-ms .ms-photos{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.tgcc-ms .ms-photos a{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--tgcc-line);transition:transform .2s}
.tgcc-ms .ms-photos a:hover{transform:translateY(-4px)}
.tgcc-ms .ms-photos img{width:100%;height:100%;object-fit:cover}
.tgcc-ms .ms-photos a:first-child{aspect-ratio:3/4}
.tgcc-ms .ms-photos a:last-child{align-self:center;aspect-ratio:680/581}
.tgcc-ms .ms-camp h2{font-size:42px;line-height:1.05;margin:14px 0 16px;font-weight:900;color:#fff}
.tgcc-ms .ms-camp p{color:#d8d1e3;font-size:16px;line-height:1.7;margin:0 0 14px}

@media (max-width:1020px){
 .tgcc-ms .ms-stack{height:420px;max-width:620px;width:100%}
 .tgcc-ms .ms-tiers{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:30px}
 .tgcc-ms .ms-tier.rec{transform:none}
 .tgcc-ms .ms-camp{grid-template-columns:1fr}
}
@media (max-width:640px){
 .tgcc-ms .ms-stack{height:300px}
 .tgcc-ms .ms-stack .b1,.tgcc-ms .ms-stack .b2,.tgcc-ms .ms-stack .b3,.tgcc-ms .ms-stack .b4{width:92px}
 .tgcc-ms .ms-stack .b2{left:74px}
 .tgcc-ms .ms-stack .b3{left:auto;right:80px}
 .tgcc-ms .ms-stack .b4{right:-6px}
 .tgcc-ms .ms-tier .price b{font-size:42px}
 .tgcc-ms .ms-tier .art{aspect-ratio:16/7}
 .tgcc-ms .ms-tier .bd{padding:6px 20px 22px}
 .tgcc-ms .ms-camp h2{font-size:32px}
}

/* 2.3.0: CTAs use the Learning Centre purple (.tgcc-lc .lc-btn.p: linear-gradient(135deg,#8e43f0,#6300e2), glow 0 10px 30px rgba(142,67,240,.45));
 * pills + gradient words use the Learning Centre sky (.lc-eyebrow / h1.lc-h1 span). Replaces the coral kit defaults on the join page only. */
.tgcc-ms.tgcc-kit{
 --tgcc-lc-cta:linear-gradient(135deg,#8e43f0,#6300e2);
 --tgcc-lc-cta-glow:0 10px 30px rgba(142,67,240,.45);
}

/* ---- A. Coral CTAs -> purple ---- */
/* "Join now" (top bar), "Choose your rank →", "Fund the campaign →", "Yes, sign me up →", mobile sticky "Join now" */
.tgcc-ms.tgcc-kit .tgcc-top-cta,
.tgcc-ms.tgcc-kit .tgcc-btn--coral,
.tgcc-ms.tgcc-kit .tgcc-sticky a{
 background:var(--tgcc-lc-cta);
 box-shadow:var(--tgcc-lc-cta-glow);
 color:#fff;
}
.tgcc-ms.tgcc-kit .tgcc-btn--coral{transition:transform .15s,filter .15s}
.tgcc-ms.tgcc-kit .tgcc-top-cta,
.tgcc-ms.tgcc-kit .tgcc-sticky a{transition:filter .15s}
.tgcc-ms.tgcc-kit .tgcc-top-cta:hover,.tgcc-ms.tgcc-kit .tgcc-top-cta:focus-visible,
.tgcc-ms.tgcc-kit .tgcc-btn--coral:hover,.tgcc-ms.tgcc-kit .tgcc-btn--coral:focus-visible,
.tgcc-ms.tgcc-kit .tgcc-sticky a:hover,.tgcc-ms.tgcc-kit .tgcc-sticky a:focus-visible{
 filter:brightness(1.12);
 color:#fff;
}

/* Plan CTAs ("Join as …"): recommended card uses the exact LC gradient + glow; the other two stay dark at rest
 * (keeps the recommended rank as the one filled button) but fill with the LC purple on hover instead of the rank colour
 * (Major's hover was coral #ff6b61 with dark text). */
.tgcc-ms.tgcc-kit .ms-tier .go{transition:background .2s,box-shadow .2s,filter .2s,border-color .2s}
.tgcc-ms.tgcc-kit .ms-tier .go:hover,
.tgcc-ms.tgcc-kit .ms-tier .go:focus-visible{
 background:var(--tgcc-lc-cta);
 border-color:transparent;
 box-shadow:var(--tgcc-lc-cta-glow);
 color:#fff;
}
.tgcc-ms.tgcc-kit .ms-tier.rec .go{
 background:var(--tgcc-lc-cta);
 border:0;
 box-shadow:var(--tgcc-lc-cta-glow);
 color:#fff;
}
.tgcc-ms.tgcc-kit .ms-tier.rec .go:hover,
.tgcc-ms.tgcc-kit .ms-tier.rec .go:focus-visible{filter:brightness(1.12);color:#fff}

/* ---- B. Pill + headline gradient -> Learning Centre styling ---- */
/* "JOIN THE CLIMATE CON" pill and the other section pills: LC .lc-eyebrow is sky #5ec8ff (not coral), weight 700 */
.tgcc-ms.tgcc-kit .tgcc-eyebrow{
 border-color:#5ec8ff;
 color:#5ec8ff;
 font-weight:700;
}
/* "Unlock everything." and the other gradient words: LC h1 span is sky -> purple (90deg), not coral -> purple */
.tgcc-ms.tgcc-kit .tgcc-grad{
 background:linear-gradient(90deg,#5ec8ff,#8e43f0);
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
 -webkit-text-fill-color:transparent;
}
/* mobile Join bar without JS: fade in once the hero has left the screen (scroll-driven animations); otherwise it stays hidden (kit.css) */
@media screen and (max-width:640px){@supports (animation-timeline:view()){
 .tgcc-ms:not(.tgcc-bar-js){timeline-scope:--tgcc-ms-hero}
 .tgcc-ms:not(.tgcc-bar-js) .tgcc-hero{view-timeline-name:--tgcc-ms-hero}
 .tgcc-ms:not(.tgcc-bar-js) .tgcc-sticky[data-tgcc-hide-until]{animation:tgcc-ms-bar-in linear both;animation-timeline:--tgcc-ms-hero;animation-range:exit 97% exit 100%}
}}
@keyframes tgcc-ms-bar-in{from{transform:translateY(130%);opacity:0;pointer-events:none}to{transform:none;opacity:1;pointer-events:auto}}