/* ============================================================
   NEXA TRAINING — refinement layer (Oct 2026, te59)
   ------------------------------------------------------------
   Loads AFTER styles.css. Keeps the TE system (hairline grid,
   square buttons, Inter + Space Mono, charcoal / purple / orange)
   and adds Apple-style material, motion and feedback on top.
   Rule: structure stays square and flat; anything that floats
   above it (nav, menus, pills) is rounded frosted glass.
   To roll back: remove refine.css + refine.js from layout.njk.
   ============================================================ */
:root{
  --on-ink:#ffffff; --on-ink-2:rgba(255,255,255,.68); --on-ink-3:rgba(255,255,255,.5);
  --glass:rgba(255,255,255,.72); --glass-heavy:rgba(255,255,255,.97); --glass-dark:rgba(24,22,26,.52);
  --glass-edge:rgba(255,255,255,.7); --glass-line:rgba(27,29,31,.08);
  --shadow-s:0 1px 2px rgba(27,29,31,.06),0 6px 18px -8px rgba(27,29,31,.22);
  --shadow-l:0 2px 6px rgba(27,29,31,.06),0 30px 60px -24px rgba(27,29,31,.38);
  --r-float:16px;
  /* springs sampled into CSS linear(): damping 1.0 / response .38s, and damping .8 / response .34s */
  --spring:linear(0, 0.0336, 0.112, 0.2108, 0.3152, 0.4164, 0.5094, 0.5922, 0.6641, 0.7254, 0.7769, 0.8198, 0.8551, 0.884, 0.9074, 0.9264, 0.9417, 0.9539, 0.9636, 0.9713, 0.9775, 0.9823, 0.9862, 0.9892, 0.9916, 0.9934, 0.9949, 0.996, 0.9969, 0.9976, 0.9981, 0.9986, 0.9989, 0.9991, 0.9993, 0.9995, 1);
  --spring-b:linear(0, 0.0402, 0.1361, 0.2589, 0.3889, 0.5138, 0.6262, 0.7227, 0.8022, 0.8655, 0.9142, 0.9503, 0.976, 0.9935, 1.0047, 1.0112, 1.0143, 1.0152, 1.0146, 1.0131, 1.0112, 1.0093, 1.0074, 1.0057, 1.0042, 1.003, 1.002, 1.0013, 1.0008, 1.0004, 1.0001, 0.9999, 0.9998, 0.9998, 0.9998, 0.9998, 1);
  --d-spring:.62s;
}
body{font-optical-sizing:auto}
[hidden]{display:none!important}

/* ---------- NAV: lighter glass, scroll-edge shadow instead of a fixed rule ---------- */
.nav{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border-bottom:0}
.nav::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transition:opacity .3s var(--ease);pointer-events:none}
.nav::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;opacity:0;
  background:linear-gradient(rgba(27,29,31,.07),rgba(27,29,31,0));transition:opacity .3s var(--ease)}
.nav.is-scrolled::before{opacity:0}
.nav.is-scrolled::after{opacity:1}
.nav__link .chev{width:9px;height:9px;opacity:.55;transition:transform .45s var(--spring)}
.nav__item:hover .chev,.nav__item:focus-within .chev,.nav__item.is-open .chev{transform:rotate(180deg)}
/* menus grow out of their trigger, in a heavier material so text stays crisp over the glass bar */
.nav__panel{top:calc(100% + 8px);left:10px;min-width:320px;padding:8px;border:0;border-radius:var(--r-float);
  background:var(--glass-heavy);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:var(--shadow-l),inset 0 0 0 1px var(--glass-line);
  transform-origin:24px -8px;transform:scale(.94);filter:blur(6px);
  transition:opacity .16s var(--ease),transform .5s var(--spring),filter .2s var(--ease),visibility 0s .2s}
.nav__panel::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel,.nav__item.is-open .nav__panel{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.05s,.05s,.05s,0s}
.nav__panel--right{left:auto;right:0;transform-origin:calc(100% - 40px) -8px}
.nav__phead{font-size:11px;letter-spacing:.12em;color:var(--muted);padding:10px 14px 8px}
.nav__panel a{padding:9px 14px;border-radius:10px;font-size:14.5px}
.nav__panel a:active{background:rgba(91,45,142,.13)}
.nav__panel a em{font-size:11px;color:var(--muted)}
.nav__pdiv{margin:6px 8px}

/* ---------- BUTTONS: answer on press ---------- */
.btn{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .5s var(--spring);touch-action:manipulation}
.btn:active{transform:scale(.965);transition-duration:.2s,.2s,.2s,.2s,.09s}
.btn .ar{transition:transform .45s var(--spring)}
.nav__link--login{transition:background-color .2s var(--ease),color .2s var(--ease),transform .5s var(--spring)}
.nav__link--login:active{transform:scale(.965)}

/* ---------- GOOGLE RATING: from a big circle to a small glass pill that steps aside ---------- */
.gball{width:auto;height:auto;border-radius:999px;flex-direction:row;gap:8px;padding:10px 14px 10px 12px;border:0;
  right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--shadow-s),inset 0 0 0 1px var(--glass-line),inset 0 1px 0 var(--glass-edge);
  transition:transform .55s var(--spring),opacity .25s var(--ease),filter .25s var(--ease)}
.gball:hover{transform:none;box-shadow:var(--shadow-l),inset 0 0 0 1px var(--glass-line)}
.gball:active{transform:scale(.95);transition-duration:.08s}
.gball__s{font-size:15px;letter-spacing:-.01em}
.gball__st{font-size:11px;color:var(--orange-deep);letter-spacing:1px}
.gball__g{font-size:10.5px;letter-spacing:.1em}
.gball.is-away{transform:translateY(18px) scale(.92);opacity:0;filter:blur(6px);pointer-events:none}
@media(max-width:640px){
  .gball{display:flex;width:auto;height:auto;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:9px 12px}
  .gball__s{font-size:14px}.gball__st{font-size:10px}.gball__g{display:none}
}

/* ---------- PHONE MENU: dragged by the thumb (refine.js), page eases back behind it ---------- */
.page{transform-origin:50% 0}
@media(max-width:600px){.cat__head .path{display:none}.cat__head{justify-content:flex-start}}
@media(max-width:1040px){
  .mnav__cta .btn{font-size:13.5px;padding-inline:6px}
  .mnav{transition:none;visibility:hidden;touch-action:pan-y;transform:translate3d(105%,0,0);box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
  .mnav.is-live{visibility:visible}
  .scrim{transition:none}
  .scrim.is-on{visibility:visible}
  .nav__burger{border-radius:12px}
}

/* ---------- HOMEPAGE HERO ---------- */
.hero__live .led{animation-iteration-count:3}
.hero--home .display{animation:rise 1.1s var(--spring) both}
.hero--home .display+.display{animation-delay:.08s}
@keyframes rise{from{transform:translateY(.09em);filter:blur(14px)}to{transform:none;filter:none}}
/* sized to its content on phones (no screen-filling white space) */
.hero--home > .wrap{min-height:0!important}
.hero--home .hero__hl--big{margin-top:0}
.hero--home .hero__sub{margin-bottom:0}
/* client logos, one quiet line inside the hero */
.herotrust{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;padding-top:26px;margin-top:4px}
.herotrust__k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.herotrust__logos{display:flex;align-items:center;gap:clamp(24px,4vw,52px)}
.herotrust__logo{width:auto;max-width:100%;opacity:.82;transition:opacity .4s var(--ease),filter .5s var(--ease)}
.herotrust__logo--wide{height:20px}.herotrust__logo--word{height:18px}.herotrust__logo--tall{height:38px}
@media(hover:hover){.herotrust__logo:hover{opacity:1;filter:brightness(.35)}}
@media(max-width:600px){.herotrust{flex-direction:column;align-items:flex-start}.herotrust__logos{gap:22px}
  .herotrust__logo--wide{height:15px}.herotrust__logo--word{height:13px}.herotrust__logo--tall{height:32px}}

/* ---------- FEATURED SHELF ---------- */
.fshelf{border-bottom:var(--hair);position:relative;padding-top:clamp(34px,4.6vw,64px)}
.fshelf__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:clamp(20px,2.6vw,32px)}
.fshelf__head h2{max-width:14ch;margin-top:12px}
.fshelf__ctl{display:flex;align-items:center;gap:10px}
.fshelf__count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.rbtn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--panel);box-shadow:inset 0 0 0 1px var(--rule);
  transition:transform .45s var(--spring),background-color .15s,opacity .2s}
.rbtn:hover{background:var(--panel-2)}
.rbtn:active{transform:scale(.9);transition-duration:.08s}
.rbtn[disabled]{opacity:.35;cursor:default}
.rbtn svg{width:18px;height:18px}
.fdots{display:flex;gap:6px;align-items:center}
.fdots i{width:6px;height:6px;border-radius:3px;background:var(--rule);transition:width .5s var(--spring),background-color .2s}
.fdots i.on{width:22px;background:var(--ink)}
.fshelf__vp{overflow:hidden;touch-action:pan-y;cursor:grab;outline:none;user-select:none;-webkit-user-select:none}
.fshelf__vp:focus-visible{box-shadow:inset 0 0 0 2.5px var(--purple)}
.fshelf.is-dragging .fshelf__vp{cursor:grabbing}
.fshelf__track{position:relative;display:flex;gap:14px;padding-inline:var(--pad-x);will-change:transform}
.fcard{position:relative;flex:none;width:clamp(272px,40vw,600px);aspect-ratio:4/5;overflow:hidden;background:var(--panel-2);-webkit-user-drag:none;color:var(--on-ink)}
@media(min-width:900px){.fcard{aspect-ratio:4/3}}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform .9s var(--spring),filter .4s var(--ease)}
.fcard:not(.is-active) img{filter:saturate(.8) brightness(.94)}
@media(hover:hover){.fcard:hover img{transform:scale(1.025)}}
.fcard__tag{position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink);
  padding:6px 10px;border-radius:999px;background:var(--glass-dark);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.fcard__lab{position:absolute;left:12px;right:12px;bottom:12px;padding:14px 16px;border-radius:14px;color:var(--on-ink);
  background:var(--glass-dark);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:end}
.fcard__code{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--on-ink-2);grid-column:1}
.fcard__name{font-size:clamp(1.2rem,1.7vw,1.55rem);font-weight:750;letter-spacing:-.022em;line-height:1.1;grid-column:1}
.fcard__price{grid-column:2;grid-row:1/3;font-weight:700;font-size:17px;letter-spacing:-.01em;text-align:right;font-variant-numeric:tabular-nums}
.fcard__price small{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.08em;color:var(--on-ink-2);text-transform:uppercase}
.fspec{display:grid;padding-block:clamp(26px,3.4vw,44px) clamp(34px,4.6vw,64px)}
.fspec__i{grid-area:1/1;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(22px,4vw,64px);align-items:start;transition:opacity .12s var(--ease),transform .12s var(--ease)}
.fspec__i.is-out{opacity:0;transform:translateX(calc(var(--dir,1) * 14px))}
.fspec__i.is-in{animation:fspecin .5s var(--spring) both}
@keyframes fspecin{from{opacity:0;transform:translateX(calc(var(--dir,1) * 14px))}}
.fspec__name{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.036em;line-height:1;margin-top:14px}
.fspec__blurb{color:var(--ink-2);font-size:16.5px;line-height:1.58;max-width:46ch;margin:14px 0 20px}
.fspec__cta{display:flex;gap:12px 22px;align-items:center;flex-wrap:wrap}
@media(max-width:820px){.fspec__i{grid-template-columns:1fr}.fshelf__ctl .rbtn{display:none}}

/* ---------- SEGMENTED CONTROL (shared) ---------- */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto;padding:3px;background:var(--panel-2);border-radius:12px;max-width:100%;touch-action:pan-y}
.seg__thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:9px;background:var(--paper);
  box-shadow:0 1px 2px rgba(27,29,31,.1),0 3px 10px -2px rgba(27,29,31,.12);transition:transform .55s var(--spring-b),width .55s var(--spring-b)}
.seg.is-drag .seg__thumb{transition:none}
.seg button{position:relative;z-index:1;padding:10px 16px;font-size:14px;font-weight:550;letter-spacing:-.006em;color:var(--muted);border-radius:9px;transition:color .2s,transform .4s var(--spring);white-space:nowrap}
.seg button[aria-checked="true"]{color:var(--ink)}
.seg button:active{transform:scale(.96)}
@media(max-width:480px){.seg{display:grid;grid-template-columns:auto 1fr auto}.seg button{padding:10px 11px;font-size:13.5px}}
.seg--dark{background:rgba(255,255,255,.08)}
.seg--dark .seg__thumb{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 14px -6px rgba(0,0,0,.6)}
.seg--dark button{color:var(--on-ink-3)}
.seg--dark button[aria-checked="true"]{color:var(--on-ink)}

/* ---------- COURSE DIRECTORY ---------- */
.cat__count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink);font-variant-numeric:tabular-nums}
.cat__count b{color:var(--purple);font-weight:700}
.chipsc{overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--pad-x));padding-right:var(--pad-x);--fl:0px;--fr:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.chipsc::-webkit-scrollbar{display:none}
.ichips{display:flex;gap:8px;width:max-content}
.ichip{font-size:13.5px;font-weight:500;letter-spacing:-.004em;padding:9px 15px;border-radius:999px;color:var(--ink-2);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--rule);transition:background-color .18s,color .18s,box-shadow .18s,transform .4s var(--spring);white-space:nowrap}
.ichip:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.ichip:active{transform:scale(.95);transition-duration:.18s,.18s,.18s,.08s}
.ichip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.crow{border-bottom:var(--hair)}
.crow:last-child{border-bottom:0}
.crow__head{display:grid;grid-template-columns:120px minmax(0,1fr) 180px 112px 28px;gap:16px;align-items:center;width:100%;text-align:left;
  padding:17px var(--pad-x);transition:background-color .25s var(--ease)}
.crow__head:hover{background:var(--panel)}
.crow__head:active,.crow__head.is-press{background:var(--panel-2);transition-duration:0s}
.crow__code{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.crow__code.is-aw{font-weight:400;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crow__name{font-size:16.5px;font-weight:600;letter-spacing:-.014em;line-height:1.3;min-width:0}
.crow__name .badge{margin-left:9px}
.crow__meta{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em}
.crow__price{font-weight:700;font-size:15.5px;letter-spacing:-.01em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.crow__price small{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-left:5px;text-transform:uppercase}
.crow__price.is-free{color:var(--purple)}
.crow__chev{justify-self:end;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:transform .6s var(--spring),background-color .2s,color .2s}
.crow__chev svg{width:12px;height:12px}
.crow.is-open .crow__chev{transform:rotate(180deg);background:var(--ink);color:#fff}
.crow.is-open .crow__head{background:var(--panel)}
.crow__panel{display:grid;grid-template-rows:0fr;background:var(--panel);transition:grid-template-rows var(--d-spring) var(--spring)}
.crow.is-open .crow__panel{grid-template-rows:1fr}
.crow__clip{overflow:hidden;min-height:0}
.crow__in{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);
  padding:6px var(--pad-x) clamp(24px,3vw,36px);opacity:0;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .6s var(--spring)}
.crow.is-open .crow__in{opacity:1;transform:none;transition-delay:.06s,0s}
.crow__art{display:block;align-self:start;overflow:hidden;background:var(--panel-2)}
.crow__thumb{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--spring)}
.crow__art:hover .crow__thumb{transform:scale(1.03)}
.crow__main{min-width:0}
.crow__card{font-size:18px;font-weight:650;letter-spacing:-.016em;line-height:1.35;color:var(--ink);max-width:40ch;margin:0 0 10px;text-wrap:pretty}
.crow__facts{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:14px 0 0;padding-top:14px;border-top:var(--hair);font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink)}
.crow__facts dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:11px;padding-top:1px}
.crow__facts dd{margin:0}
.crow__actions{display:flex;gap:12px 20px;align-items:center;margin-top:20px;flex-wrap:wrap}
.crow__side{min-width:0;border-left:var(--hair);padding-left:clamp(20px,2.6vw,36px)}
.crow__h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.crow__cov{list-style:none;margin:0;padding:0;counter-reset:cv}
.crow__cov li{counter-increment:cv;display:grid;grid-template-columns:28px 1fr;gap:8px;padding:9px 0;border-bottom:var(--hair);font-size:14.5px;font-weight:550;letter-spacing:-.008em;line-height:1.35}
.crow__cov li::before{content:counter(cv,decimal-leading-zero);font-family:var(--mono);font-size:11px;font-weight:400;color:var(--purple);padding-top:2px}
.cat__empty{padding:34px var(--pad-x);display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.crow.is-enter .crow__head{animation:crowin .45s var(--ease) both}
@keyframes crowin{from{opacity:.25;transform:translateY(4px)}}
@media(min-width:821px) and (max-width:1100px){.crow__in{grid-template-columns:minmax(200px,260px) minmax(0,1fr)}.crow__side{grid-column:2;border-left:0;padding-left:0}}
@media(max-width:820px){
  .crow__head{grid-template-columns:minmax(0,1fr) auto 28px;gap:4px 14px;padding:15px var(--pad-x)}
  .crow__code{grid-column:1;grid-row:1;font-size:11.5px}
  .crow__name{grid-column:1;grid-row:2}
  .crow__meta{grid-column:1;grid-row:3;font-size:12px}
  .crow__price{grid-column:2;grid-row:1/4}
  .crow__chev{grid-column:3;grid-row:1/4}
  .crow__in{grid-template-columns:104px minmax(0,1fr);gap:16px 14px}
  .crow__art{grid-column:1;grid-row:1}
  .crow__main{display:contents}
  .crow__card{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:16px}
  .crow__facts{grid-column:1/-1;grid-row:2;margin-top:0}
  .crow__side{grid-column:1/-1;grid-row:3;border-left:0;padding-left:0}
  .crow__actions{grid-column:1/-1;grid-row:4;margin-top:0}
  .crow__actions .btn--purple{flex:1;justify-content:center}
}

/* ---------- MICROLEARNING PACKS (dark): filter + FLIP glide; swipe row on phones ---------- */
.pkbar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-bottom:22px}
.pkbar__count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--on-ink-3);font-variant-numeric:tabular-nums}
.pkgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--hair-d)}
.pkcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.2vw,30px);min-height:280px;border-right:var(--hair-d);border-bottom:var(--hair-d);
  background:var(--ink);color:var(--on-ink);transition:transform .6s var(--spring),opacity .3s var(--ease),background-color .25s var(--ease)}
.pkcard:hover{background:#25282b}
.pkcard:active{background:#2c2f33}
.pkcard__top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-3)}
.pkcard__ix{color:var(--orange)}
.pkcard__name{font-size:clamp(19px,1.5vw,22px);font-weight:750;letter-spacing:-.02em;line-height:1.15;color:var(--on-ink)}
.pkcard__list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px;flex:1;align-content:start}
.pkcard__list li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.4;color:var(--on-ink-2)}
.pkcard__list li::before{content:'';position:absolute;left:0;top:calc(.7em - 1px);width:6px;height:2px;background:var(--on-ink-3);transition:background-color .2s,width .45s var(--spring)}
.pkcard:hover .pkcard__list li::before{background:var(--orange);width:8px}
.pkcard__link{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);display:inline-flex;gap:6px;margin-top:8px}
.pkcard__link span{transition:transform .45s var(--spring)}
.pkcard:hover .pkcard__link span{transform:translateX(4px)}
@media(max-width:1100px){.pkgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .pkgrid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,320px);overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad-x);padding-inline:var(--pad-x);gap:12px;border-top:0;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
  .pkgrid::-webkit-scrollbar{display:none}
  .pkcard{scroll-snap-align:start;border:1px solid var(--rule-dark);min-height:300px;background:#212427}
}

/* ---------- COMFORT SETTINGS ---------- */
@media (prefers-reduced-motion: reduce){
  .btn,.ichip,.rbtn,.crow__chev,.seg__thumb,.nav__panel,.gball,.fspec__i,.crow__in,.pkcard{transition-property:opacity,background-color,color,box-shadow!important;transition-duration:.2s!important;transition-timing-function:ease!important}
  .crow__panel{transition:none}
  .nav__panel{transform:none!important;filter:none!important}
  .hero--home .display,.fspec__i.is-in{animation:none}
}
@media (prefers-reduced-transparency: reduce){
  .nav,.nav__panel,.gball{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  .fcard__lab,.fcard__tag{background:rgba(20,18,22,.88);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast: more){
  :root{--muted:#4a443d;--rule:#9b948a}
  .nav,.nav__panel,.gball{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
}

/* ============================================================
   COURSE PAGES (te59 step 2)
   ============================================================ */
.detail__art img{animation:cpsettle 1.6s var(--spring) both}
@keyframes cpsettle{from{transform:scale(1.06);filter:blur(8px)}to{transform:none;filter:none}}
.detail h1{animation:rise 1.1s var(--spring) both}
.feature__tag{border-radius:999px;padding:6px 10px;background:var(--glass-dark);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
/* facts in the hero, right under the button */
.cp-facts{list-style:none;margin:4px 0 0;padding:16px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;border-top:var(--hair);width:100%;max-width:600px}
.cp-facts li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.4;color:var(--ink-2);letter-spacing:-.006em}
.cp-facts li b{color:var(--ink);font-weight:700}
.cp-facts svg{flex:none;width:19px;height:19px;margin-top:1px;color:var(--purple);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:480px){.cp-facts{grid-template-columns:1fr}}

/* product sub-nav: where am I, and the button is always in reach */
.subnav{position:sticky;top:57px;z-index:90;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border-bottom:var(--hair)}
.subnav__in{max-width:var(--max);margin:0 auto;padding-inline:var(--pad-x);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:54px}
.subnav__title{font-weight:700;font-size:15.5px;letter-spacing:-.014em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subnav__links{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;height:54px;align-items:stretch}
.subnav__links::-webkit-scrollbar{display:none}
.subnav__links a{display:flex;align-items:center;padding:0 13px;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s}
.subnav__links a:hover,.subnav__links a.is-on{color:var(--ink)}
.subnav__ind{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--purple);border-radius:2px;opacity:0;
  transition:transform .55s var(--spring),width .55s var(--spring),opacity .2s}
.subnav__buy{justify-self:end;display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .5s var(--spring)}
.subnav.is-stuck .subnav__buy{opacity:1;transform:none;pointer-events:auto}
.subnav__price{font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.subnav__price small{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.subnav__buy .btn{padding:11px 16px;font-size:13.5px}
@media(max-width:1100px){.subnav__price{display:none}}
@media(max-width:860px){.subnav__in{grid-template-columns:minmax(0,1fr);padding-inline:0}.subnav__title,.subnav__buy{display:none}.subnav__links{padding-inline:calc(var(--pad-x) - 13px)}}
#overview,#reel,#audience,#covered,#assessed,#onday,#faq,#book,#enrol-info,#reviews{scroll-margin-top:124px}

/* who it's for: a tidy list instead of tag chips */
.aud2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--hair)}
.aud2 li{position:relative;padding:14px 16px 14px 22px;border-bottom:var(--hair);font-size:15.5px;font-weight:550;letter-spacing:-.01em;line-height:1.35}
.aud2 li:nth-child(odd){border-right:var(--hair)}
.aud2 li::before{content:'';position:absolute;left:0;top:1.35em;width:10px;height:1.5px;background:var(--orange)}
@media(max-width:620px){.aud2{grid-template-columns:1fr}.aud2 li:nth-child(odd){border-right:0}}

/* what's covered: clean two-by-two outline */
.mods2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--hair);border-left:var(--hair)}
.mod{border-right:var(--hair);border-bottom:var(--hair);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;transition:background-color .25s}
.mod:hover{background:var(--panel)}
.mod:only-child{grid-column:1/-1}
.mod__h{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
.mod__n{font-family:var(--mono);font-size:12px;color:var(--purple);grid-row:1/3}
.mod__t{font-size:18px;font-weight:700;letter-spacing:-.016em;line-height:1.25;margin:0}
.mod__c{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mod ul{list-style:none;margin:0;padding:0 0 0 calc(1ch + 22px);display:grid;gap:8px}
.mod li{font-size:14.5px;line-height:1.45;color:var(--ink-2);position:relative}
.mod li::before{content:'';position:absolute;left:-16px;top:.65em;width:7px;height:1.5px;background:var(--rule)}
@media(max-width:700px){.mods2{grid-template-columns:1fr}}

/* photo band caption as a glass chip */
.band__cap{border-radius:999px;padding:7px 12px;color:#fff;background:var(--glass-dark);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}

/* FAQ: spring open, reversible */
.faq2{border-top:var(--hair)}
.faq2__i{border-bottom:var(--hair)}
.faq2__q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;padding:18px 4px 18px 0;font-size:17px;font-weight:600;letter-spacing:-.014em;line-height:1.35;color:var(--ink);transition:color .15s}
.faq2__q:hover{color:var(--purple)}
.faq2__q:active{opacity:.7}
.faq2__pm{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--panel);color:var(--ink);transition:transform .55s var(--spring),background-color .2s,color .2s}
.faq2__pm svg{width:12px;height:12px}
.faq2__i.is-open .faq2__pm{transform:rotate(45deg);background:var(--ink);color:#fff}
.faq2__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-spring) var(--spring)}
.faq2__i.is-open .faq2__a{grid-template-rows:1fr}
.faq2__clip{overflow:hidden;min-height:0}
.faq2__body{padding:0 44px 20px 0;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:66ch;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .55s var(--spring)}
.faq2__i.is-open .faq2__body{opacity:1;transform:none;transition-delay:.05s,0s}
@media(max-width:600px){.faq2__q{font-size:16px}.faq2__body{padding-right:8px;font-size:15px}}

/* related: drag shelf of cards */
.fshelf--related{border-top:var(--hair);padding-top:clamp(34px,4.4vw,56px)}
.rcard{flex:none;width:clamp(250px,26vw,360px);display:flex;flex-direction:column;background:var(--paper);border:var(--hair);-webkit-user-drag:none;color:var(--ink)}
.rcard__art{aspect-ratio:3/2;overflow:hidden;background:var(--panel-2);display:block}
.rcard__art img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform .9s var(--spring)}
@media(hover:hover){.rcard:hover .rcard__art img{transform:scale(1.03)}}
.rcard__b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.rcard__k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.rcard__k b{font-family:var(--sans);font-size:14px;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.rcard__n{font-size:18px;font-weight:700;letter-spacing:-.016em;line-height:1.2}
.rcard__p{font-size:14px;line-height:1.5;color:var(--muted);flex:1}
.rcard__l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);margin-top:6px}
.fshelf__all{padding-block:18px clamp(34px,4.4vw,56px)}

/* reel phone settles into place */
.reel .phone.is-pre{transform:translateY(36px) scale(.97);transition:transform 1.1s var(--spring)}
.reel .phone.is-pre.is-in{transform:none}

/* phone buy bar: only after the hero button scrolls away */
.buybar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:130;display:none;align-items:center;gap:12px;
  padding:10px 10px 10px 16px;border-radius:18px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-l),inset 0 0 0 1px var(--glass-line),inset 0 1px 0 var(--glass-edge);
  transform:translateY(140%);filter:blur(6px);opacity:0;pointer-events:none;transition:transform .55s var(--spring),opacity .2s var(--ease),filter .25s var(--ease)}
.buybar.is-on{transform:none;opacity:1;filter:none;pointer-events:auto}
.buybar__t{display:flex;flex-direction:column;min-width:0;flex:1}
.buybar__t b{font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__t span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .btn{padding:13px 16px;border-radius:12px;white-space:nowrap}
@media(max-width:860px){.buybar{display:flex}}
body.has-buybar .gball{opacity:0;transform:translateY(20px) scale(.92);pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .detail__art img,.detail h1{animation:none}
  .subnav__ind,.buybar,.subnav__buy,.faq2__body,.faq2__pm{transition-property:opacity!important;transition-duration:.2s!important}
  .faq2__a{transition:none}
  .reel .phone.is-pre{transform:none}
}
@media (prefers-reduced-transparency: reduce){.subnav,.buybar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}