/* ==========================================================================
   TNA LIQUID GLASS — optical material layer (Apple Liquid Glass reference)
   Loads after tna-styles.css. Every rule is gated behind html.lg, which
   tna-glass.js adds ONLY when backdrop-filter is supported and the user has
   not asked for reduced transparency — so unsupported browsers keep the
   original design untouched.

   Material recipe (per Apple's Liquid Glass, WWDC25):
   - translucent wash + backdrop blur/saturation   (adaptive glass body)
   - top inset specular + bottom inset shade       (light from above)
   - 1px inner luminous ring                       (edge highlight, not a border)
   - edge-concentrated inner gradients             (lensing approximation)
   - soft ambient shadow                           (floating, not outlined)
   - capsule/rounded geometry, morphing motion     (controls feel physical)
   Glass is used ONLY on the functional layer (nav, AI, controls, badges) —
   content surfaces stay opaque and readable. No glass stacked on glass.
   ========================================================================== */

html.lg{
  --lg-wash:        rgba(247,245,242,.55);
  --lg-wash-strong: rgba(247,245,242,.70);
  --lg-smoke:       rgba(14,27,45,.38);
  --lg-smoke-strong:rgba(14,27,45,.55);
  --lg-navy-tint:   rgba(16,30,49,.86);
  --lg-sand-tint:   rgba(220,205,186,.80);
  --lg-ring:        rgba(255,255,255,.32);
  --lg-ring-dark:   rgba(255,255,255,.16);
  --lg-spec:        rgba(255,255,255,.50);
  --lg-shade:       rgba(14,27,45,.12);
  --lg-shadow:      0 14px 38px rgba(14,27,45,.16);
  --lg-shadow-soft: 0 8px 26px rgba(14,27,45,.12);
  --lg-blur:        blur(22px) saturate(1.65);
  --lg-blur-light:  blur(14px) saturate(1.5);
  --lg-spring:      cubic-bezier(.32,1.2,.35,1);
}

/* =========================================================
   01 · MAIN NAVIGATION — floating glass island
   ========================================================= */
html.lg body > nav{
  background:transparent;border-bottom:none;box-shadow:none;
  padding:12px 0;
  /* let the page rise up beneath the floating island */
  margin-bottom:-86px;
}
html.lg body{--lg-nav-h:86px}
/* heroes breathe under the island: every marketing page opens with a dark
   hero, so give its inner content a little extra headroom */
html.lg header.hero > .wrap{padding-top:44px}
html.lg body > nav .wrap{
  width:calc(100% - 28px);
  padding:11px 22px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 30%),
    radial-gradient(130% 220% at 50% -90%, rgba(255,255,255,.16), transparent 52%),
    var(--lg-wash);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:
    inset 0 1px 0 var(--lg-spec),
    inset 0 -1px 1px var(--lg-shade),
    inset 0 0 0 1px var(--lg-ring),
    var(--lg-shadow-soft);
  transition:background .45s,box-shadow .45s,padding .35s var(--ease);
}
html.lg body > nav.scrolled{padding:8px 0;background:transparent;box-shadow:none}
html.lg body > nav.scrolled .wrap{
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 30%),
    radial-gradient(130% 220% at 50% -90%, rgba(255,255,255,.18), transparent 52%),
    var(--lg-wash-strong);
  box-shadow:
    inset 0 1px 0 var(--lg-spec),
    inset 0 -1px 1px var(--lg-shade),
    inset 0 0 0 1px var(--lg-ring),
    var(--lg-shadow);
}
/* adaptive: while photography / navy sections pass beneath, the island
   turns to smoked glass and its content flips light (Apple: clear variant) */
html.lg body > nav.lg-dark .wrap{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%),
    radial-gradient(130% 220% at 50% -90%, rgba(255,255,255,.08), transparent 52%),
    var(--lg-smoke);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 1px rgba(0,0,0,.22),
    inset 0 0 0 1px var(--lg-ring-dark),
    var(--lg-shadow);
}
html.lg body > nav.lg-dark.scrolled .wrap{background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%),
    radial-gradient(130% 220% at 50% -90%, rgba(255,255,255,.08), transparent 52%),
    var(--lg-smoke-strong)}
html.lg body > nav.lg-dark .nav-links{color:#F2EEE7}
html.lg body > nav.lg-dark .nav-links a:not(.btn):hover{color:var(--sand)}
html.lg body > nav.lg-dark .logo-img{filter:brightness(0) invert(1)}
html.lg body > nav.lg-dark .nav-burger{border-color:rgba(247,245,242,.4)}
html.lg body > nav.lg-dark .nav-burger span{background:#F2EEE7}
html.lg body > nav.lg-dark .btn-gold{
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0) 38%),
    var(--lg-sand-tint);
  color:var(--green-950);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(14,27,45,.18),
    inset 0 0 0 1px rgba(255,255,255,.30),
    0 8px 20px rgba(0,0,0,.24);
}
html.lg body > nav.lg-dark .btn-outline-dark{
  background:rgba(255,255,255,.10);color:#F2EEE7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(247,245,242,.34);
}

/* =========================================================
   02 · MOBILE NAVIGATION — glass capsule burger + morphing sheet
   ========================================================= */
html.lg .nav-burger{
  border-radius:999px;
  background:rgba(247,245,242,.4);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform .3s var(--lg-spring),box-shadow .3s;
}
html.lg .nav-burger:active{transform:scale(.94)}
@media(max-width:1230px){
  html.lg .nav-links{
    left:12px;right:12px;top:calc(100% + 8px);
    border-radius:22px;border-bottom:none;
    /* near-opaque: the sheet sits inside the island's backdrop root, where
       nested backdrop blur cannot render — readability comes first */
    background:
      linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 26%),
      rgba(247,245,242,.96);
    box-shadow:
      inset 0 1px 0 var(--lg-spec),
      inset 0 0 0 1px var(--lg-ring),
      0 26px 60px rgba(14,27,45,.24);
    padding:10px 22px 18px;
    transform-origin:calc(100% - 34px) -10px;
    transform:scale(.86) translateY(-8px);
    transition:opacity .28s,transform .42s var(--lg-spring),visibility .28s;
  }
  html.lg body > nav.menu-open .nav-links{transform:scale(1) translateY(0)}
  html.lg .nav-links a{border-bottom-color:rgba(14,27,45,.08);border-radius:10px;padding:15px 10px}
  html.lg .nav-links a:not(.btn):active{background:rgba(14,27,45,.05)}
  html.lg .nav-links .nav-menu-cta{border-radius:999px}
}

/* while the menu sheet is open, the AI nudge yields the stage */
html.lg body:has(> nav.menu-open) .tnaai-nudge{opacity:0;pointer-events:none;transition:opacity .2s}

/* =========================================================
   03 · BUTTON SYSTEM — capsules with three material levels
   ========================================================= */
html.lg .btn{
  border-radius:999px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease),transform .3s var(--lg-spring);
}
html.lg .btn:hover{transform:translateY(-1px) scale(1.015)}
html.lg .btn:active{transform:scale(.975);transition-duration:.12s}
/* moving specular highlight (position driven by tna-glass.js) */
html.lg .btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(130px 56px at var(--lgx,30%) -30%,rgba(255,255,255,.38),transparent 62%);
  opacity:0;transition:opacity .35s;
}
html.lg .btn:hover::after{opacity:1}

/* PRIMARY — navy-tinted glass (no blur on flat light backgrounds:
   nothing to refract there, and it saves compositor work on busy pages) */
html.lg .btn-gold{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 34%),
    rgba(16,30,49,.93);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 1px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 8px 22px rgba(14,27,45,.20);
}
html.lg .btn-gold:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 34%),
    rgba(20,36,58,.90);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 1px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 14px 32px rgba(14,27,45,.28);
}
/* PRIMARY on dark sections — sand-tinted glass */
html.lg .on-dark .btn-gold,html.lg .hero .btn-gold,html.lg .final .btn-gold,html.lg .img-band .btn-gold{
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0) 38%),
    var(--lg-sand-tint);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  color:var(--green-950);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(14,27,45,.18),
    inset 0 0 0 1px rgba(255,255,255,.30),
    0 10px 28px rgba(0,0,0,.28);
}
html.lg .on-dark .btn-gold:hover,html.lg .hero .btn-gold:hover,html.lg .final .btn-gold:hover,html.lg .img-band .btn-gold:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0) 38%),
    rgba(230,218,201,.88);
  color:var(--green-950);
}
/* SECONDARY — clear glass with subtle luminous edge */
html.lg .btn-outline-dark{
  background:rgba(247,245,242,.38);
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(14,27,45,.20);
}
html.lg .btn-outline-dark:hover{background:rgba(247,245,242,.55);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(14,27,45,.34),0 6px 18px rgba(14,27,45,.10)}
html.lg .btn-outline-light{
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(247,245,242,.36);
}
html.lg .btn-outline-light:hover{background:rgba(255,255,255,.18);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),inset 0 0 0 1px var(--sand)}
/* TERTIARY (text links like .jc-apply / .text-link) stay minimal — untouched */

/* =========================================================
   04 · HERO — floating stat capsules + AI ask-bar
   ========================================================= */
html.lg .hero-stats{border-top:none;padding-top:14px;gap:10px;flex-wrap:wrap}
html.lg .hero-stats .stat,
html.lg .hero-cine .hero-stats .stat{
  display:flex;align-items:center;gap:12px;
  border-left:none;padding:11px 18px;border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%),
    rgba(14,27,45,.30);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 1px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 6px 18px rgba(0,0,0,.18);
}
html.lg .hero-cine .hero-stats{border-top:none;padding-top:10px;gap:10px}

/* homepage hero ask-bar → smoked clear glass over the photograph */
html.lg .tnaai-hero.tnaai-hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
    rgba(14,27,45,.34);
  border:none;border-radius:18px;
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 1px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 18px 44px rgba(0,0,0,.30);
}
html.lg .tnaai-hero.tnaai-hero input{color:#F7F5F2}
html.lg .tnaai-hero.tnaai-hero input::placeholder{color:rgba(247,245,242,.62)}
html.lg .tnaai-hero.tnaai-hero button{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 40%),var(--lg-sand-tint);
  color:var(--green-950);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.28);
}
html.lg .tnaai-hero.tnaai-hero button:hover{background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%),rgba(230,218,201,.9)}
html.lg .tnaai-hero-ex button{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(247,245,242,.20);
  border-color:transparent;background:rgba(247,245,242,.12);
}
html.lg .tnaai-hero-ex button:hover{background:rgba(247,245,242,.2);border-color:transparent}

/* =========================================================
   05 · ASK TNA AI — launcher capsule + morphing glass window
   (doubled class names out-specify the assistant's runtime styles)
   ========================================================= */
html.lg .tnaai-fab.tnaai-fab{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 36%),
    var(--lg-navy-tint);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 1px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 12px 34px rgba(14,27,45,.30);
  transition:transform .3s var(--lg-spring),box-shadow .3s;
}
html.lg .tnaai-fab.tnaai-fab:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 1px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 18px 44px rgba(14,27,45,.34),
    0 0 0 6px rgba(182,139,94,.08);
}
html.lg .tnaai-fab.tnaai-fab:active{transform:scale(.96)}

html.lg .tnaai-panel.tnaai-panel{
  border:none;border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 16%),
    rgba(247,245,242,.72);
  -webkit-backdrop-filter:blur(30px) saturate(1.75);
  backdrop-filter:blur(30px) saturate(1.75);
  box-shadow:
    inset 0 1px 0 var(--lg-spec),
    inset 0 0 0 1px var(--lg-ring),
    0 34px 90px rgba(14,27,45,.30);
}
/* the launcher morphs into the window: grows out of the corner it lives in */
html.lg .tnaai-panel.tnaai-panel.open{
  transform-origin:calc(100% - 52px) calc(100% - 30px);
  animation:lgMorphIn .46s var(--lg-spring);
}
@keyframes lgMorphIn{
  from{opacity:0;transform:scale(.42) translateY(26px);border-radius:60px}
  60%{opacity:1}
  to{opacity:1;transform:none;border-radius:24px}
}
html.lg .tnaai-head.tnaai-head{
  background:linear-gradient(180deg, rgba(16,30,49,.92), rgba(16,30,49,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
html.lg .tnaai-msgs.tnaai-msgs{background:transparent}
/* content ON the glass stays near-opaque — no glass stacked on glass */
html.lg .tnaai-b.bot{background:rgba(255,255,255,.92);border-color:rgba(226,218,206,.7)}
html.lg .tnaai-b.me{border-radius:16px 16px 4px 16px}
html.lg .tnaai-b.bot,html.lg .tnaai-card.tnaai-card,html.lg .tnaai-form.tnaai-form{border-radius:16px}
html.lg .tnaai-card.tnaai-card{background:rgba(255,255,255,.92)}
html.lg .tnaai-chip.tnaai-chip{
  background:rgba(255,255,255,.62);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(14,27,45,.10);
  transition:box-shadow .25s,background .25s,transform .25s var(--lg-spring);
}
html.lg .tnaai-chip.tnaai-chip:hover{
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(182,139,94,.45),0 4px 12px rgba(14,27,45,.08);
  transform:translateY(-1px);
}
html.lg .tnaai-foot.tnaai-foot{background:transparent;border-top-color:rgba(14,27,45,.08)}
html.lg .tnaai-note.tnaai-note{background:transparent}
html.lg .tnaai-input.tnaai-input{
  border-radius:14px;border-color:transparent;background:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 2px rgba(14,27,45,.06),inset 0 0 0 1px rgba(14,27,45,.10);
}
html.lg .tnaai-input.tnaai-input:focus{box-shadow:inset 0 0 0 1.5px rgba(14,27,45,.55)}
html.lg .tnaai-send.tnaai-send{border-radius:12px}
html.lg .tnaai-btn.pri{border-radius:999px;background:
  linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%),var(--lg-navy-tint);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.10)}
html.lg .tnaai-btn.sec{border-radius:999px}
html.lg .tnaai-typing.tnaai-typing{background:rgba(255,255,255,.85);border-radius:16px}
html.lg .tnaai-nudge.tnaai-nudge{
  border:none;border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 30%),rgba(247,245,242,.72);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:inset 0 1px 0 var(--lg-spec),inset 0 0 0 1px var(--lg-ring),0 20px 48px rgba(14,27,45,.24);
}
html.lg .tnaai-inline.tnaai-inline{border-radius:18px}

/* =========================================================
   06 · JOBS — glass filter capsules + card badge chips
   ========================================================= */
html.lg .jf-btn{
  border-radius:999px;border-color:transparent;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(14,27,45,.12);
  transition:box-shadow .25s,background .25s,color .25s,transform .25s var(--lg-spring);
}
html.lg .jf-btn:hover{border-color:transparent;background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(182,139,94,.5);transform:translateY(-1px)}
html.lg .jf-btn.active{
  border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%),var(--lg-navy-tint);
  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);
}
/* card chips: lightweight glass approximation — dozens per page, so no
   per-chip backdrop blur (performance rule, Apple would approve) */
html.lg .jc-loc{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;text-shadow:none;font-size:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%),rgba(14,27,45,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.14);
}
html.lg .jc-comp{
  border:none;border-radius:999px;padding:5px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 46%),rgba(220,205,186,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(182,139,94,.34);
}
html.lg .jc{border-radius:18px;transition:transform .3s var(--lg-spring),box-shadow .3s,border-color .3s}
html.lg .jc:hover{
  box-shadow:var(--shadow-hover),inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(182,139,94,.30);
}
html.lg .jc-closed-label{border-radius:999px}
html.lg .fsch-tag{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%),rgba(14,27,45,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
}
/* verified-badge popover (tna-verify.js) */
html.lg .vb-panel{
  border-radius:16px;border:none;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 26%),rgba(247,245,242,.78);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:inset 0 1px 0 var(--lg-spec),inset 0 0 0 1px var(--lg-ring),0 20px 48px rgba(14,27,45,.22);
}

/* =========================================================
   07 · FLOATING CONTACT — WhatsApp orb
   ========================================================= */
html.lg .wa-float{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 42%),
    var(--lg-navy-tint);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 1px rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 10px 28px rgba(14,27,45,.26);
  transition:transform .3s var(--lg-spring),box-shadow .3s;
}
html.lg .wa-float:hover{transform:scale(1.06);box-shadow:
  inset 0 1px 0 rgba(255,255,255,.36),inset 0 0 0 1px rgba(255,255,255,.18),0 16px 36px rgba(14,27,45,.32)}

/* =========================================================
   08 · MEMBERSHIP & APP SURFACES
   ========================================================= */
html.lg .plan{border-radius:18px;transition:border-color .25s,box-shadow .3s,transform .3s var(--lg-spring)}
html.lg .plan:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(182,139,94,.35),0 14px 34px rgba(14,27,45,.12)}
html.lg .plan .tag{
  border-radius:999px;padding:5px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%),rgba(182,139,94,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.22),0 6px 14px rgba(14,27,45,.16);
}
html.lg .pill,html.lg .chip-x{box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}

/* app shell (dashboard / profile / admin): ambient depth + glass top bar */
html.lg .app-body{
  background:
    radial-gradient(1100px 520px at 88% -140px, rgba(182,139,94,.12), transparent 60%),
    radial-gradient(900px 520px at -140px 34%, rgba(14,27,45,.06), transparent 55%),
    var(--beige);
}
html.lg .app-topbar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 34%),
    rgba(247,245,242,.60);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  border-bottom:none;
  box-shadow:inset 0 -1px 0 rgba(14,27,45,.06),0 8px 26px rgba(14,27,45,.07);
}
html.lg .side{
  border:none;border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 22%),rgba(247,245,242,.66);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.30),var(--lg-shadow-soft);
}
html.lg .side a{border-radius:12px}
html.lg .side a.active{border-radius:999px;background:
  linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%),var(--lg-navy-tint);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.10)}
html.lg .card{border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow)}
html.lg .chip-stat{border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
html.lg .auth-card{border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),var(--shadow)}
html.lg .field input,html.lg .field select,html.lg .field textarea{border-radius:12px}
html.lg .drop{border-radius:16px}
html.lg .pref-row{border-radius:16px}

/* =========================================================
   09 · SMALL GLOBAL POLISH
   ========================================================= */
html.lg .globe-legend .chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
html.lg .nav-cta{border-radius:999px}

/* =========================================================
   11 · CONTENT-LAYER GLASS — the broad material pass
   Light surfaces use a warm translucent-white glass that picks
   up the beige behind them; dark surfaces use smoked tiles with
   luminous rings. Animated/repeated pieces skip backdrop blur
   (performance), the big hero surfaces get the real thing.
   ========================================================= */

/* ---- shared recipes ---- */
html.lg .pcard,
html.lg .jf-step,
html.lg .jp,
html.lg .vt-inner,
html.lg .tnaai-inline.tnaai-inline{
  border-color:transparent;border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 36%),
    radial-gradient(130% 170% at 50% -70%, rgba(255,255,255,.55), transparent 55%),
    rgba(255,255,255,.58);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(14,27,45,.08),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 14px 34px rgba(14,27,45,.10);
}
html.lg .pcard:hover{
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 1px rgba(14,27,45,.08),
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 0 0 1px rgba(182,139,94,.28),
    0 22px 48px rgba(14,27,45,.14);
}
/* dark variant keeps its own smoked recipe */
html.lg .steps-sec .pcard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%),
    rgba(247,245,242,.055);
  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);
}

/* glass icon orbs everywhere */
html.lg .icon-circle,
html.lg .mini .mc,
html.lg .aic-ic,
html.lg .ae-ic{
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 46%),
    rgba(220,205,186,.14);
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(182,139,94,.30),
             inset 0 -1px 1px rgba(14,27,45,.08);
}
html.lg .why .trust .icon-circle,
html.lg .on-dark .icon-circle{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%),
    rgba(247,245,242,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(220,205,186,.26),
             inset 0 -1px 1px rgba(0,0,0,.2);
}

/* audience cards: Popular tag + live-stat tile */
html.lg .pcard .tag{
  border-radius:999px;padding:6px 13px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),rgba(16,30,49,.90);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(14,27,45,.18);
}
html.lg .pc-live{
  border-radius:14px;border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 44%),rgba(220,205,186,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(182,139,94,.30);
}

/* Why-TNA feature rows → smoked glass tiles */
html.lg .trust{
  border-top:none!important;border-bottom:none!important;
  border-radius:18px;padding:20px 20px;margin-bottom:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%),
    rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(182,139,94,.16);
}
html.lg .why .trust{
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 40%),
    rgba(247,245,242,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1px rgba(255,255,255,.09),
             0 10px 26px rgba(0,0,0,.14);
}
html.lg .trust:hover{padding-left:26px}

/* floating photo badges → true glass capsules over the image */
html.lg .img-badge{
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 42%),
    rgba(247,245,242,.55);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(255,255,255,.35),0 10px 26px rgba(0,0,0,.28);
}
html.lg .img-badge.b2{
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 42%),
    rgba(220,205,186,.72);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.32),0 12px 28px rgba(182,139,94,.35);
}

/* hero eyebrow badge → glass capsule over the photo */
html.lg .hero-badge{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 44%),rgba(14,27,45,.30);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14);
}

/* live board ticker → smoked glass capsules (no blur: 40 animated nodes) */
html.lg .tick-item{
  border-radius:999px;border-color:transparent;padding:11px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 42%),
    rgba(247,245,242,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 0 0 1px rgba(255,255,255,.10),
             inset 0 -1px 1px rgba(0,0,0,.18);
}
html.lg .tick-item:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
    rgba(247,245,242,.12);
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(220,205,186,.35),
             0 8px 20px rgba(0,0,0,.25);
}
html.lg .tick-item .ti-sport{border-radius:999px}

/* employer verification → one glass panel, glass proof pieces */
html.lg .vt-inner{padding:44px 46px}
html.lg .vt-badge{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 44%),rgba(95,191,139,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(47,107,79,.28);
}
html.lg .vt-count{
  border-radius:16px;border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 44%),rgba(95,191,139,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(47,107,79,.22);
}

/* AI hub (homepage) → glass output panel + glass capability tiles */
html.lg .aic-out{
  border-radius:20px;border-color:transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 30%),
    rgba(8,15,26,.45);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(220,205,186,.14),
             0 20px 48px rgba(0,0,0,.30);
}
html.lg .aic-caps li{
  border-radius:16px;padding:16px 16px;
  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:box-shadow .25s,background .25s,transform .25s var(--lg-spring);
}
html.lg .aic-caps li:hover{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%),
    rgba(247,245,242,.08);
  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);
}
html.lg .aic-form input,html.lg .aic-form textarea{
  border-radius:14px;
  background:rgba(247,245,242,.08);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.14);
}
html.lg .aic-form input:focus,html.lg .aic-form textarea:focus{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1.5px rgba(220,205,186,.55);
}
html.lg .aic-route{
  border:none;border-radius:18px;margin:6px;
  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:box-shadow .25s,background .25s,transform .25s var(--lg-spring);
}
html.lg .aic-route:hover{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 40%),
    rgba(247,245,242,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(220,205,186,.30),
             0 12px 28px rgba(0,0,0,.25);
}
html.lg .ar-ic{
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%),rgba(247,245,242,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(220,205,186,.26);
  border-color:transparent;
}

/* how-it-works steps + pricing bands (homepage) */
html.lg .jf-step .jf-n{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%),rgba(16,30,49,.90);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(14,27,45,.20);
  border-color:transparent;color:#F7F5F2;
}
html.lg .jp{border-radius:22px}
html.lg .jp-tag{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 42%),rgba(220,205,186,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(182,139,94,.35);
  border-color:transparent;
}

/* mini feature rows (used across scholarship / university / webinar pages) */
html.lg .mini{
  border-radius:16px;padding:14px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 42%),
    rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(182,139,94,.14);
}
html.lg .on-dark .mini,html.lg .why .mini{
  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);
}

/* featured-scholarship band + membership step chips */
html.lg .fsch{border-radius:24px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.10),0 24px 56px rgba(14,27,45,.22)}
html.lg .steps .st{
  border-radius:999px;padding:8px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 44%),rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(14,27,45,.10);
}
html.lg .steps .st .n{
  background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 42%),rgba(182,139,94,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);border-radius:50%;
}

/* =========================================================
   12 · EVERY PAGE, EVERY INTERACTION — site-wide sweep
   Page-local components from jobs, scholarships, webinars,
   coaches, academies, success stories, university pathways,
   about, contact and the coach profile pages.
   ========================================================= */

/* light glass cards across all templates */
html.lg .price-card,
html.lg .prog-card,
html.lg .uni-card,
html.lg .placed-card,
html.lg .mtier,
html.lg .promo-card,
html.lg .founder-card,
html.lg .pillar,
html.lg .spec-card,
html.lg .web-feat,
html.lg .coach-card,
html.lg .stage,
html.lg .price,
html.lg .soon{
  border-color:transparent;border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 36%),
    radial-gradient(130% 170% at 50% -70%, rgba(255,255,255,.55), transparent 55%),
    rgba(255,255,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(14,27,45,.08),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 14px 34px rgba(14,27,45,.10);
}
html.lg .price-card:hover,html.lg .prog-card:hover,html.lg .uni-card:hover,
html.lg .placed-card:hover,html.lg .coach-card:hover,html.lg .pillar:hover{
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 1px rgba(14,27,45,.08),
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 0 0 1px rgba(182,139,94,.28),
    0 22px 48px rgba(14,27,45,.14);
}

/* FAQ accordions (shared) → glass rows */
html.lg details{
  border-color:transparent;border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 40%),
    rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),
             0 8px 22px rgba(14,27,45,.07);
}
html.lg details:hover{border-color:transparent;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(182,139,94,.32),0 12px 28px rgba(14,27,45,.10)}
html.lg details[open]{border-color:transparent;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(182,139,94,.38),0 16px 36px rgba(14,27,45,.12)}

/* filter capsules on featured coaches (same system as the job board) */
html.lg .cf-btn{
  border-radius:999px;border-color:transparent;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:var(--lg-blur-light);
  backdrop-filter:var(--lg-blur-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(14,27,45,.12);
  transition:box-shadow .25s,background .25s,color .25s,transform .25s var(--lg-spring);
}
html.lg .cf-btn:hover{border-color:transparent;background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(182,139,94,.5);transform:translateY(-1px)}
html.lg .cf-btn.active{
  border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%),var(--lg-navy-tint);
  color:#F7F5F2;
  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);
}

/* chips & tags across pages */
html.lg .role-tags span{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 44%),
    rgba(247,245,242,.08);
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 0 0 1px rgba(220,205,186,.30);
}
html.lg .coach-roles span,
html.lg .sch-chip,
html.lg .uni-conf,
html.lg .wf-tags span,
html.lg .trust-line,
html.lg .price-badge,
html.lg .region-head .region,
html.lg .lang-strip span{
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(182,139,94,.24);
  border-color:transparent;
}
html.lg .price-pop,html.lg .wf-price{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 40%),rgba(16,30,49,.90);
  color:#F7F5F2;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(14,27,45,.18);
}

/* light feature/checklist tiles on profile + pathway pages */
html.lg .hl-item,
html.lg .fit-item,
html.lg .path-tier,
html.lg .uni-fit,
html.lg .checklist li,
html.lg .wf-incl li{
  border-radius:14px;border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 44%),rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(182,139,94,.14);
}

/* webinar play control → true glass orb over the poster */
html.lg .wf-play{
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 46%),
    rgba(247,245,242,.42);
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.4),0 14px 36px rgba(0,0,0,.35);
}
html.lg .wf-memberline{
  border-radius:16px;border-color:transparent;
  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,.30);
}

/* contact page: glass form fields + direct-contact rows + icon orbs */
html.lg .cfield input,html.lg .cfield select,html.lg .cfield textarea,
html.lg .cform input,html.lg .cform select,html.lg .cform textarea{
  border-radius:12px;border-color:transparent;
  background:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 2px rgba(14,27,45,.05),inset 0 0 0 1px rgba(14,27,45,.12);
}
html.lg .cfield input:focus,html.lg .cfield select:focus,html.lg .cfield textarea:focus,
html.lg .cform input:focus,html.lg .cform select:focus,html.lg .cform textarea:focus{
  outline:none;
  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);
}
html.lg .cd-row{
  border-radius:16px;border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 44%),rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(182,139,94,.16);
}
html.lg .cd-ic,html.lg .spec-ic{
  border-radius:50%;border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 46%),rgba(220,205,186,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(182,139,94,.30);
}

/* dark-section corrections: components living inside .on-dark keep their
   original luminance — smoked tiles where the text is light, near-opaque
   white glass where a light card sits on a dark band */
html.lg .on-dark .spec-card,
html.lg .on-dark .founder-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%),
    rgba(247,245,242,.055);
  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);
}
html.lg .on-dark .spec-card:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(220,205,186,.32),
    0 24px 52px rgba(0,0,0,.40);
}
html.lg .on-dark .spec-ic{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%),rgba(247,245,242,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(220,205,186,.26);
}
html.lg .on-dark .path-tier,
html.lg .on-dark .uni-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 34%),
    rgba(255,255,255,.90);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 18px 44px rgba(0,0,0,.28);
}

/* global-reach map cards + footer social orbs */
html.lg .gcard{
  border-radius:18px!important;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(220,205,186,.28),0 20px 48px rgba(0,0,0,.45);
}
html.lg .footer-social .soc{
  border-radius:50%;border-color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 46%),rgba(247,245,242,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(247,245,242,.20);
}
html.lg .footer-social .soc:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 46%),rgba(247,245,242,.12);
  transform:translateY(-2px);
}

/* =========================================================
   10 · ACCESSIBILITY, MOTION & PRINT SAFEGUARDS
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  html.lg .btn:hover,html.lg .tnaai-fab.tnaai-fab:hover,html.lg .jf-btn:hover,
  html.lg .plan:hover,html.lg .jc:hover,html.lg .tnaai-chip.tnaai-chip:hover{transform:none}
  html.lg .tnaai-panel.tnaai-panel.open{animation:none}
  html.lg .nav-links{transition:opacity .2s,visibility .2s}
}
@media print{
  html.lg *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
  html.lg .btn-gold{background:var(--green-950)!important}
}