/* ==========================================================================
   TNA ECOSYSTEM COMPONENTS — Learning Hub cards, video modal, expert band,
   partner cards, ecosystem pillars, financial-wellness form.
   Built on the site tokens + Liquid Glass recipes (tna-glass.css).
   ========================================================================== */

/* ---- content grid + cards ---- */
.lh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:26px}
.lh-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;text-align:left;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 36%),
    rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 14px 34px rgba(14,27,45,.10);
  transition:transform .3s cubic-bezier(.32,1.2,.35,1),box-shadow .3s}
.lh-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(182,139,94,.30),0 22px 48px rgba(14,27,45,.15)}
.lh-card.soon-card{opacity:.78}
.lh-media{position:relative;aspect-ratio:16/9;background:var(--green-950,#0E1B2D);overflow:hidden}
.lh-media img{width:100%;height:100%;object-fit:cover;display:block}
.lh-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#14243A,#0E1B2D)}
.lh-thumb-ph svg{width:38px;height:38px;fill:none;stroke:#DCCDBA;stroke-width:1.4;opacity:.7}
.lh-access{position:absolute;left:12px;bottom:12px;font-family:var(--font-ui);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;padding:6px 12px;border-radius:999px;color:#F7F5F2;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 44%),rgba(14,27,45,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.14)}
.lh-access.free{background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 44%),rgba(47,107,79,.72)}
.lh-access.premium{background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 44%),rgba(182,139,94,.8)}
.lh-access.coming_soon{background:rgba(88,101,115,.6)}
.lh-flag{position:absolute;right:12px;top:12px;font-family:var(--font-ui);font-size:9px;font-weight:700;
  letter-spacing:.16em;padding:5px 11px;border-radius:999px;color:var(--green-950,#0E1B2D);
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 44%),rgba(220,205,186,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.3)}
.lh-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:8px}
.lh-expert{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep,#9A7247)}
.lh-body h3{font-family:var(--font-ui);font-size:18px;font-weight:700;letter-spacing:-.015em;
  color:var(--green-950,#0E1B2D);margin:0;line-height:1.3}
.lh-meta{font-family:var(--font-ui);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#586573)}
.lh-body p{font-size:13.5px;line-height:1.6;color:var(--muted,#586573);margin:0;flex:1}
.lh-compare{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--font-ui);font-size:12px;color:var(--muted,#586573)}
.lh-compare span{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(14,27,45,.10)}
.lh-compare span.inc{color:#2F6B4F;background:rgba(95,191,139,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(47,107,79,.26)}
.lh-compare b{font-weight:700}
.lh-ctarow{margin-top:10px}
.lh-ctarow .btn{padding:11px 20px;font-size:11px}
.lh-lockmsg{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted,#586573);
  background:rgba(220,205,186,.2);border-radius:12px;padding:11px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(182,139,94,.3)}
.lh-lockmsg a{color:var(--gold-deep,#9A7247);font-weight:600}

/* dark-section variant (index previews) */
.on-dark .lh-card{background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 32%),rgba(247,245,242,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.09),0 16px 40px rgba(0,0,0,.3)}
.on-dark .lh-body h3{color:var(--cream,#F7F5F2)}
.on-dark .lh-body p,.on-dark .lh-meta,.on-dark .lh-compare{color:rgba(247,245,242,.66)}
.on-dark .lh-compare span{background:rgba(247,245,242,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.10);color:rgba(247,245,242,.8)}
.on-dark .lh-compare span.inc{color:#8FD6AF}

/* ---- category filter pills ---- */
.lh-filters{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 4px}
.lh-filters button{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border:none;border-radius:999px;padding:10px 18px;cursor:pointer;
  color:var(--green-950,#0E1B2D);background:rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(14,27,45,.12);
  transition:background .25s,box-shadow .25s,color .25s,transform .25s cubic-bezier(.32,1.2,.35,1)}
.lh-filters button:hover{background:rgba(255,255,255,.65);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(182,139,94,.5)}
.lh-filters button.active{color:#F7F5F2;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%),rgba(16,30,49,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.10),0 6px 16px rgba(14,27,45,.16)}

/* ---- video modal ---- */
#lh-modal{position:fixed;inset:0;z-index:2147483100;display:flex;align-items:center;justify-content:center;padding:18px}
.lh-modal-bg{position:absolute;inset:0;background:rgba(8,15,26,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lh-modal-box{position:relative;width:min(960px,96vw);border-radius:22px;padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%),rgba(20,32,50,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.5)}
.lh-modal-frame{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.lh-modal-frame iframe{width:100%;height:100%;display:block}
.lh-modal-x{position:absolute;top:-16px;right:-14px;width:38px;height:38px;border:none;border-radius:50%;
  cursor:pointer;color:#F7F5F2;font-size:20px;line-height:1;
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 44%),rgba(16,30,49,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.4)}
.lh-modal-note{font-family:var(--font-ui);font-size:11.5px;color:rgba(247,245,242,.55);text-align:center;padding:10px 6px 2px}

/* ---- expert band ---- */
.xp-card{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start;border-radius:22px;padding:30px 32px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 34%),rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 14px 34px rgba(14,27,45,.10)}
.xp-photo{width:150px;height:150px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#14243A,#0E1B2D);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 26px rgba(14,27,45,.18)}
.xp-photo img{width:100%;height:100%;object-fit:cover}
.xp-photo svg{width:52px;height:52px;fill:none;stroke:#DCCDBA;stroke-width:1.3}
.xp-name{font-family:var(--font-ui);font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--green-950,#0E1B2D)}
.xp-role{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep,#9A7247);margin:5px 0 12px}
.xp-bio{font-size:14.5px;line-height:1.7;color:var(--muted,#586573)}
.xp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.xp-tags span{font-family:var(--font-ui);font-size:11.5px;font-weight:600;color:var(--green-950,#0E1B2D);
  padding:7px 13px;border-radius:999px;background:rgba(220,205,186,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(182,139,94,.3)}
@media(max-width:700px){.xp-card{grid-template-columns:1fr;justify-items:center;text-align:center}
  .xp-tags{justify-content:center}}

/* ---- partner cards + logo containers ---- */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:26px}
.pt-card{display:flex;flex-direction:column;gap:12px;border-radius:22px;padding:30px 30px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 34%),rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 14px 34px rgba(14,27,45,.10)}
.pt-logo{height:74px;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:12px 18px;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(14,27,45,.08)}
.pt-logo img{max-height:100%;max-width:100%;object-fit:contain}
.pt-logo .ph{font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:.14em;color:#a99e90;
  text-transform:uppercase;text-align:center}
.pt-cat{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep,#9A7247)}
.pt-card h3{font-family:var(--font-ui);font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--green-950,#0E1B2D);margin:0}
.pt-card p{font-size:13.5px;line-height:1.65;color:var(--muted,#586573);margin:0;flex:1}
.pt-benefit{font-size:13px;line-height:1.6;color:var(--green-900,#1F3527);border-radius:12px;padding:11px 14px;
  background:rgba(95,191,139,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(47,107,79,.22)}

/* ---- ecosystem pillars (homepage / membership) ---- */
.eco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}
.eco-cell{border-radius:18px;padding:24px 22px;text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 40%),rgba(247,245,242,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .25s cubic-bezier(.32,1.2,.35,1),box-shadow .25s;text-decoration:none;display:block}
.eco-cell:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(220,205,186,.28),0 12px 28px rgba(0,0,0,.25)}
.eco-cell .k{font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--gold-soft,#DCCDBA)}
.eco-cell b{display:block;font-family:var(--font-ui);font-size:16.5px;font-weight:700;color:var(--cream,#F7F5F2);margin:8px 0 6px}
.eco-cell span{font-size:13px;line-height:1.55;color:rgba(247,245,242,.62)}

/* value-stack checklist (membership) */
.vs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 22px;margin-top:20px}
.vs-item{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink,#1A1A1A);
  padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(14,27,45,.08)}
.vs-item svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;fill:none;stroke:#2F6B4F;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.vs-item small{display:block;color:var(--muted,#586573);font-size:12px;margin-top:2px}

/* ---- financial wellness form ---- */
.fw-form{max-width:620px;border-radius:22px;padding:32px 32px 28px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 30%),rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 18px 44px rgba(14,27,45,.12)}
.fw-form .fw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fw-form .full{grid-column:1/-1}
.fw-form label{display:block;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink,#1A1A1A);margin-bottom:6px}
.fw-form input,.fw-form select,.fw-form textarea{width:100%;font-family:var(--font-ui);font-size:14.5px;
  color:var(--ink,#1A1A1A);border:none;border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 2px rgba(14,27,45,.05),inset 0 0 0 1px rgba(14,27,45,.12);outline:none}
.fw-form input:focus,.fw-form select:focus,.fw-form textarea:focus{
  box-shadow:inset 0 1px 2px rgba(14,27,45,.05),inset 0 0 0 1.5px rgba(182,139,94,.6),0 0 0 4px rgba(182,139,94,.12)}
.fw-form textarea{min-height:88px;resize:vertical}
.fw-consent{display:flex;gap:11px;align-items:flex-start;margin:16px 0;font-size:13px;line-height:1.6;
  color:var(--muted,#586573);cursor:pointer}
.fw-consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--gold,#B68B5E)}
.fw-msg{display:none;margin-top:14px;font-size:13.5px;line-height:1.55;border-radius:12px;padding:12px 15px}
.fw-msg.show{display:block}
.fw-msg.ok{color:#2F6B4F;background:rgba(95,191,139,.12);box-shadow:inset 0 0 0 1px rgba(47,107,79,.25)}
.fw-msg.err{color:#8C2F1F;background:rgba(140,47,31,.08);box-shadow:inset 0 0 0 1px rgba(140,47,31,.25)}
.fw-note{font-size:12px;line-height:1.65;color:var(--muted,#586573)}

/* ---- live sessions strip ---- */
.lh-live{display:flex;flex-wrap:wrap;gap:16px;align-items:center;border-radius:18px;padding:20px 24px;margin:26px 0 4px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 44%),rgba(220,205,186,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(182,139,94,.3)}
.lh-live .dot{width:9px;height:9px;border-radius:50%;background:#3E7C55;box-shadow:0 0 0 4px rgba(95,191,139,.2);
  animation:lhPulse 2.2s ease-in-out infinite}
@keyframes lhPulse{0%,100%{opacity:1}50%{opacity:.4}}
.lh-live b{font-family:var(--font-ui);font-size:14.5px;color:var(--green-950,#0E1B2D)}
.lh-live span{font-family:var(--font-ui);font-size:13px;color:var(--muted,#586573)}

/* ---- site-wide partner logo band ---- */
.pb-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:30px}
.pb-tile{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;
  border-radius:18px;padding:24px 20px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 40%),rgba(247,245,242,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .25s cubic-bezier(.32,1.2,.35,1),box-shadow .25s}
.pb-tile:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(220,205,186,.28),0 12px 28px rgba(0,0,0,.25)}
.pb-logo{height:64px;width:100%;max-width:230px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  padding:10px 16px;background:#fff;box-shadow:inset 0 0 0 1px rgba(14,27,45,.08)}
.pb-logo.dark{background:#0E1B2D;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pb-logo img{max-height:100%;max-width:100%;object-fit:contain}
.pb-tile b{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--cream,#F7F5F2);letter-spacing:-.01em}
.pb-tile span{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft,#DCCDBA)}

/* ---- "your membership unlocks" locked-benefit cards (public pages) ---- */
.ub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:30px}
.ub-card{position:relative;border-radius:18px;padding:24px 22px 22px;text-align:left;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 36%),
    rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 14px 34px rgba(14,27,45,.10);
  transition:transform .25s cubic-bezier(.32,1.2,.35,1),box-shadow .25s}
.ub-card:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(182,139,94,.30),0 20px 44px rgba(14,27,45,.14)}
.ub-lock{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;padding:6px 12px;border-radius:999px;color:#F7F5F2;margin-bottom:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 44%),rgba(14,27,45,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.14)}
.ub-lock.inc{background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 44%),rgba(47,107,79,.72)}
.ub-card b{display:block;font-family:var(--font-ui);font-size:16.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--green-950,#0E1B2D);margin-bottom:6px}
.ub-card p{font-size:13px;line-height:1.6;color:var(--muted,#586573);margin:0}
.ub-part{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep,#9A7247);margin-top:12px;display:block}
.ub-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.on-dark .ub-card{background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 34%),rgba(247,245,242,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.09),0 16px 40px rgba(0,0,0,.30)}
.on-dark .ub-card b{color:var(--cream,#F7F5F2)}
.on-dark .ub-card p{color:rgba(247,245,242,.66)}

@media(max-width:620px){
  .lh-grid{grid-template-columns:1fr}
  .fw-form .fw-grid{grid-template-columns:1fr}
  .lh-modal-x{top:-12px;right:-6px}
}