/* polish_v1 · PROG-POLISH-01 (Arhal, LOCAL BUILD, 2026-11-03). Look + motion only: no copy, order, price, status or link changes.
   Phase 1 = sections 1-3 from the top: hero (#top), course shelf (#shelf), What every course includes (#about-programs).
   Ported to plain CSS/JS from free library items in /workspace/nrai_resource_library (Rowan cleared all free items 20:04):
   - effects/tiltcard (pointer tilt with perspective + eased return)  -> hero card cluster tilt; centre-book pointer sheen (no cover tilt)
   - carousels/coverflow (damped, eased book travel)                  -> shelf book transition curve + depth falloff
   - buttons/liquid-glass-buttons, buttons/glass-button (glass sheen) -> shelf arrows, format chips, hero pill
   - scroll/scroll-zoom-reveal, effects/hoverrevealframe              -> soft rise/scale-in for headings and glass cards (polish.js adds .pl-in)
   Brand tokens unchanged (ink #14204A, navy #253679, orange #BF5508/#A64508, line #D6DCE8; site fonts). Rollback: remove the polish_v1 tags. */
:root{--pl-ease:cubic-bezier(.16,1,.3,1);--pl-spring:cubic-bezier(.34,1.1,.64,1)} /* overshoot capped at 1.1 (Growth fix 5) */

/* ---------- 1. HERO (#top) ---------- */
/* soft staggered entrance (Growth fix 4): the H1 is never hidden (translate only); other copy starts at .01 opacity; last delay 180 ms + .2 s stage = all motion starts within 400 ms */
html.pl-js .ap-hero .ap-hero-copy>*{opacity:.01;translate:0 12px;transition:opacity .45s var(--pl-ease),translate .55s var(--pl-ease)}
html.pl-js .ap-hero .ap-hero-copy>h1{opacity:1}
html.pl-js .ap-hero.pl-in .ap-hero-copy>*{opacity:1;translate:0 0}
html.pl-js .ap-hero.pl-in .ap-hero-copy>:nth-child(2){transition-delay:.06s}
html.pl-js .ap-hero.pl-in .ap-hero-copy>:nth-child(3){transition-delay:.12s}
html.pl-js .ap-hero.pl-in .ap-hero-copy>:nth-child(4){transition-delay:.18s}
html.pl-js .ap-hero .hb-stage{opacity:.01;translate:0 14px;transition:opacity .5s var(--pl-ease) .2s,translate .6s var(--pl-ease) .2s}
html.pl-js .ap-hero.pl-in .hb-stage{opacity:1;translate:0 0}
/* format chips: glass with a light sheen sweep and gentle lift on hover (not links; purely visual) */
.ap-fmtbox li{position:relative;overflow:hidden;border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(214,220,232,.9),0 6px 18px -8px rgba(20,32,74,.22);
  transition:translate .45s var(--pl-ease),box-shadow .45s var(--pl-ease)}
.ap-fmtbox li::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%) -160% 0/220% 100% no-repeat;transition:background-position .9s var(--pl-ease)}
@media (hover:hover){.ap-fmtbox li:hover::after{background-position:160% 0}} /* Growth fix 5: no lift, chips are not clickable */
/* pill: same sheen on hover */
.hb-pill{position:relative;transition:background-color .3s,box-shadow .35s var(--pl-ease),translate .35s var(--pl-ease)}
.hb-pill::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%) -160% 0/220% 100% no-repeat;transition:background-position .9s var(--pl-ease)}
@media (hover:hover){.hb-pill:hover{translate:0 -1px}.hb-pill:hover::after{background-position:160% 0}}
.hb-pill:active{translate:0 0;transition-duration:.1s}
/* step cards: smoother, slightly springy settle; tilt container driven by polish.js (--pl-rx/--pl-ry, max 5deg) */
.hb-cards{transform:perspective(900px) rotateX(var(--pl-rx,0deg)) rotateY(var(--pl-ry,0deg));transform-style:preserve-3d;transition:transform .6s var(--pl-ease)}
.hb-cards.pl-tilting{transition:transform .12s linear}
.hb-cd{transition:transform .8s var(--pl-ease),box-shadow .45s var(--pl-ease),filter .45s var(--pl-ease)!important}
.hb-cd.on{box-shadow:inset 0 1px 0 #fff,0 26px 44px -18px rgba(20,32,74,.42),0 3px 8px rgba(20,32,74,.1)}
/* COMPONENT_MAP #3: faint mist glow behind the H1 (decorative, no layout change) */
.nr-rack .ap-hero{position:relative;isolation:isolate}
.nr-rack .ap-hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-4%;top:-6%;width:62%;height:90%;
  background:radial-gradient(closest-side,rgba(220,238,249,.75),rgba(220,238,249,0));filter:blur(6px)}
/* COMPONENT_MAP #4 (navigation/stepprogress): connected track fills orange up to the active step (--pl-prog set by polish.js), check on done steps */
.hb-ticks::after{content:"";position:absolute;left:36px;top:21px;height:2px;width:calc((100% - 72px) * var(--pl-prog,0));background:#BF5508;border-radius:2px;
  transition:width .6s var(--pl-ease)}
.hb-tk i{position:relative;z-index:1}
.hb-tk.done i::after{content:"";position:absolute;left:2.5px;top:.5px;width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.hb-cd:not(.on){opacity:.9}
/* step ticks: dots pop */
.hb-tk i{transition:background-color .35s var(--pl-ease),border-color .35s var(--pl-ease),box-shadow .45s var(--pl-ease),transform .45s var(--pl-spring)}
.hb-tk[aria-pressed="true"] i{transform:scale(1.18)}
@media (hover:hover){.hb-tk:hover i{transform:scale(1.12)}}
.hb-line{transition:opacity .35s var(--pl-ease)}
/* phone sheet (<=1020): smoother rise, softer dim (sheet structure and phone stack unchanged) */
.hb-sheet{transition:transform .55s var(--pl-ease)!important}
.hb-dim{transition:opacity .45s var(--pl-ease)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.hb-vb{transition:background-color .3s var(--pl-ease),box-shadow .3s var(--pl-ease)}

/* ---------- 2. COURSE SHELF (#shelf) ---------- */
/* damped, longer book travel (coverflow port). Growth fix 1: no filter on books and no transform on covers, both flatten the books' preserve-3d depth */
.ap-cf .ap-book{transition:transform .78s var(--pl-ease),opacity .5s var(--pl-ease)!important}
.ap-cf .ap-book .ap-see,.ap-cf .ap-book .ap-tags,.ap-cf .ap-book .ap-enroll{transition:opacity .45s var(--pl-ease),transform .5s var(--pl-ease)}
/* centre cover: pointer-following glass sheen (tiltcard light only; polish.js sets --pl-sx/--pl-sy). Rings, plate and band untouched */
.ap-cf .ap-book .ap-cover>.pl-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;opacity:0;
  background:radial-gradient(120% 80% at var(--pl-sx,30%) var(--pl-sy,0%),rgba(255,255,255,.26),transparent 55%);transition:opacity .45s var(--pl-ease)}
.ap-cf .ap-book.is-c .ap-cover:hover>.pl-sheen{opacity:1}
/* Enroll on the centre book: soft press */
.ap-cf .ap-book .ap-enroll{transition:background-color .25s,box-shadow .35s var(--pl-ease),translate .35s var(--pl-ease)}
@media (hover:hover){.ap-cf .ap-book.is-c .ap-enroll:hover{translate:0 -2px;box-shadow:0 10px 20px -8px rgba(191,85,8,.55)}}
.ap-cf .ap-book .ap-enroll:active{translate:0 0;transition-duration:.08s}
/* arrows: glass buttons with press feedback (same size, colours and states) */
.ap-arr{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,246,251,.9));
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(214,220,232,.9),0 6px 14px -6px rgba(20,32,74,.28);
  transition:background-color .25s,box-shadow .35s var(--pl-ease),transform .35s var(--pl-spring),opacity .2s!important}
@media (hover:hover){.ap-arr:hover:not([disabled]){transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #D6DCE8,0 10px 20px -8px rgba(20,32,74,.35)}}
.ap-arr:active:not([disabled]){transform:scale(.94);transition-duration:.08s!important}
.ap-arr[disabled]{box-shadow:none}
/* panel: slightly deeper inner glow so the books sit "in" the shelf */
.ap-cfwrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -18px 30px -24px rgba(122,74,18,.22),0 14px 34px -18px rgba(20,32,74,.22)}
/* section heading reveal */
html.pl-js .pl-rise{opacity:0;translate:0 16px;transition:opacity .7s var(--pl-ease),translate .8s var(--pl-ease)}
html.pl-js .pl-rise.pl-in{opacity:1;translate:0 0}

/* ---------- 3. WHAT EVERY COURSE INCLUDES (#about-programs) ---------- */
.ap-mc{transition:transform .45s var(--pl-ease),box-shadow .45s var(--pl-ease)!important;overflow:hidden}
.ap-mc::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 66%) -160% 0/220% 100% no-repeat;transition:background-position 1s var(--pl-ease)}
@media (hover:hover){.ap-mc:hover::after{background-position:160% 0}}
.ap-mc .ap-n{transition:transform .5s var(--pl-ease)}
@media (hover:hover){.ap-mc:hover .ap-n{transform:translateY(-2px) scale(1.06)}}
html.pl-js #about-programs .ap-mc.pl-rise{translate:0 18px;scale:.985;transition:opacity .7s var(--pl-ease),translate .8s var(--pl-ease),scale .8s var(--pl-ease)}
html.pl-js #about-programs .ap-mc.pl-rise.pl-in{translate:0 0;scale:1}
html.pl-js #about-programs .ap-mc.pl-rise+.ap-dv+.ap-mc.pl-rise{transition-delay:.09s}
#about-programs .ap-bonus,#about-programs .ap-note,#about-programs .ap-cue{line-height:1.55}
/* COMPONENT_MAP #14: bonus pill mist tint + 1px rim (same text) */
#about-programs .ap-bonus{background:linear-gradient(180deg,rgba(220,238,249,.95),rgba(234,243,246,.95));box-shadow:inset 0 0 0 1px rgba(200,208,226,.72),inset 0 1px 0 #fff}
/* Growth fix 2: the two cards stay stacked on phones (no swipe row) */

/* ---------- Growth fix 6: 44px hit areas on phones, no visual change (transparent pseudo layer; no transforms, so it hit-tests inside the 3D shelf) ---------- */
@media (max-width:600px){
  .hb-pill,.ap-cf .ap-book>.ap-enroll,.ap-cf .ap-book>.ap-see,.menu-btn{position:relative}
  .hb-pill::before,.ap-cf .ap-book>.ap-enroll::before,.ap-cf .ap-book>.ap-see::before,.menu-btn::before{
    content:"";position:absolute;background:transparent;pointer-events:auto;
    left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px));top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
  /* Enroll sits 6px above 'See the course': grow Enroll upward and See the course downward so the two 44px zones do not overlap */
  .ap-cf .ap-book>.ap-enroll::before{top:min(0px,calc(100% - 44px));bottom:0}
  .ap-cf .ap-book>.ap-see::before{top:0;bottom:min(0px,calc(100% - 44px))}
  /* inline text links that can wrap onto two lines (waitlist, group booking): transparent vertical padding on every line fragment.
     Inline padding does not change line height or layout, so nothing moves; each fragment's tap box becomes >=44px tall */
  .ap-wl,.ap-gb{position:relative;z-index:2;padding-block:15px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}

/* ==================== PHASE 2 (sections 04-12 + dialogs) ==================== */
/* ---------- 04. COURSE SCENES (#programming-lab ... #ai-business) · scroll/scroll-zoom-reveal + buttons/glass-button + pricing/liquidglass-pricing (surface only) ----------
   The scroll-linked book opening (.obook/.lid, rack app) is untouched; only the listing card, stats and CTAs get motion. */
html.pl-js .nr-rack .scene .pg-stats3 .pg-st{transition:opacity .55s var(--pl-ease),translate .6s var(--pl-ease)}
html.pl-js .nr-rack .scene:not(.rk-in) .pg-stats3 .pg-st{opacity:.01;translate:0 8px} /* listing itself is revealed by the rack app (.rk-in); stats follow it */
html.pl-js .nr-rack .scene.rk-in .pg-st:nth-child(2){transition-delay:.26s}
html.pl-js .nr-rack .scene.rk-in .pg-st:nth-child(1){transition-delay:.2s}html.pl-js .nr-rack .scene.rk-in .pg-st:nth-child(4){transition-delay:.32s}
.nr-rack .scene .listing{transition:box-shadow .45s var(--pl-ease)}
.nr-rack .scene .ap-price{position:relative;isolation:isolate}
.nr-rack .scene .ap-price::before{content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(214,220,232,.35));opacity:.9}
.ap-btn{transition:background-color .25s,box-shadow .35s var(--pl-ease),translate .35s var(--pl-ease)}
@media (hover:hover){.ap-btn:not(.ap-off):not([disabled]):not([aria-disabled="true"]):hover{translate:0 -1px;box-shadow:0 6px 16px rgba(191,85,8,.28)}
  .ap-btn.ap-ghost:not(.ap-off):hover{box-shadow:0 6px 16px rgba(20,32,74,.16)}}
.ap-btn:not(.ap-off):active{translate:0 0;transition-duration:.08s}
/* (arrow nudge on .ap-more dropped: inline-block changed innerText whitespace) */

/* ---------- 05. BUNDLES (#bundles) · cards/minimal-price-card: course-colour top rule, quiet chip; stacked on phones ---------- */
#bundles .ap-bundle{position:relative;overflow:hidden}
#bundles .ap-bundle::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#7A5AF8;opacity:.85}
#bundles .ap-bundle+.ap-bundle::before{background:#4DBAE5}
#bundles .ap-bundle .ap-btn.ap-off{box-shadow:inset 0 0 0 1px rgba(74,85,120,.22)}

/* ---------- 06. WHAT STUDENTS MAKE (#what-your-learner-makes) · sections/spotlight-bento-grid: cursor spotlight + course-colour left rule ----------
   MOB-SWIPE-01: swipe row at <=768px (data-mobswipe on .ap-grid3) */
#what-your-learner-makes .ap-ex{position:relative;overflow:hidden;isolation:isolate}
#what-your-learner-makes .ap-ex::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:#4DBAE5}
#what-your-learner-makes .ap-ex:nth-child(2)::before{background:#F57E20}
#what-your-learner-makes .ap-ex:nth-child(3)::before{background:#7A5AF8}
#what-your-learner-makes .ap-ex::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s var(--pl-ease);
  background:radial-gradient(220px circle at var(--pl-mx,50%) var(--pl-my,50%),rgba(255,255,255,.75),transparent 70%)}
@media (hover:hover){#what-your-learner-makes .ap-ex:hover::after{opacity:1}}
.ap-ex{transition:transform .45s var(--pl-ease),box-shadow .45s var(--pl-ease)!important}
@media (max-width:768px){
  #what-your-learner-makes .ap-grid3[data-mobswipe]>.ap-ex{min-height:118px}}

/* ---------- 07. CLASS TIMES (#class-times) · brand underline accent only ---------- */
#class-times .sec-head h2{background:linear-gradient(90deg,#F57E20,#FEC623) left bottom/0 3px no-repeat;padding-bottom:4px;transition:background-size .9s var(--pl-ease) .1s}
#class-times .sec-head.in h2{background-size:64px 3px} /* .in is added by site.js reveal */

/* ---------- 08. SIX PATHWAYS (#six-pathways) · interactive/interactive-chips (no drag): spring float on hover; stays wrapped ---------- */
#six-pathways .pw-list li{transition:translate .45s var(--pl-spring),box-shadow .45s var(--pl-ease),background-color .3s}
@media (hover:hover){#six-pathways .pw-list li:hover{translate:0 -2px;box-shadow:0 8px 16px -8px rgba(122,74,18,.35)}}

/* ---------- 09. HIGHLIGHTS (.hl-band) · effects/tiltcard (3deg, fine pointers) · MOB-SWIPE-01 row at <=768px ---------- */
.hl-list>li{transform:perspective(700px) rotateX(var(--pl-ty,0deg)) rotateY(var(--pl-tx,0deg));transition:transform .55s var(--pl-ease),box-shadow .45s var(--pl-ease)}
.hl-list>li.pl-tilting{transition:transform .1s linear,box-shadow .45s var(--pl-ease)}
@media (max-width:768px){.hl-list[data-mobswipe]>li{min-height:112px}}
/* MOB-SWIPE-01 rows on this page: room for the card shadows on every side (padding + matching negative margin + scroll-padding, so cards still line up with the heading) */
@media (max-width:768px){#what-your-learner-makes .ap-grid3[data-mobswipe],.hl-band .hl-list[data-mobswipe]{padding:10px 14px 26px!important;margin-inline:-14px!important;max-width:none!important;scroll-padding-inline:14px}}

/* ---------- 10. FAQ (#before-you-begin) · accordions/liquid-glass-faq-pro: height + fade (polish.js, WAAPI), + turns to x smoothly; native <details> kept ---------- */
details.qa summary::after{transition:transform .25s var(--pl-ease)}
details.qa .ans.pl-anim{overflow:hidden}
details.qa{transition:border-color .3s var(--pl-ease),box-shadow .35s var(--pl-ease)}
details.qa summary:focus-visible{outline:3px solid #14204A;outline-offset:2px;border-radius:18px}

/* ---------- 11. CONTACT (#contact) · existing glass, soft rise only (polish.js) ---------- */
/* ---------- 12. FOOTER (programs page only, this file loads only here) · footers/liquid-glass-footer: underline grows on hover ---------- */
.site-footer a:not(.btn){background:linear-gradient(currentColor,currentColor) left calc(100% - 1px)/0 1px no-repeat;transition:background-size .35s var(--pl-ease)}
@media (hover:hover){.site-footer a:not(.btn):hover{background-size:100% 1px}}

/* ---------- DIALOGS ---------- */
/* open book (#ap-ob) · sections/chapters-timeline: beats fade in staggered once the book is open; dashed line, avatars, LESSON column unchanged */
html.pl-js #ap-ob .pp-beat{transition:opacity .4s var(--pl-ease),translate .45s var(--pl-ease)}
html.pl-js #ap-ob.pl-opening .pp-beat{opacity:.01;translate:0 6px}
html.pl-js #ap-ob .pp-beat:nth-child(2){transition-delay:.06s}html.pl-js #ap-ob .pp-beat:nth-child(3){transition-delay:.12s}
html.pl-js #ap-ob .pp-beat:nth-child(4){transition-delay:.18s}html.pl-js #ap-ob .pp-beat:nth-child(5){transition-delay:.24s}
/* stills · effects/hoverrevealframe + tiltcard: small lift/rotate on hover (desktop) */
@media (hover:hover){.pp-still{transition:transform .4s var(--pl-ease),box-shadow .4s var(--pl-ease)}
  .pp-still:hover{transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 8px 16px rgba(0,0,0,.28)}}
/* waitlist / group / interest form (#ap-form) · forms/email-waitlist-form: focus ring + soft field transitions; fields, labels, order unchanged */
#ap-form input,#ap-form select,#ap-form textarea{transition:border-color .2s,box-shadow .25s var(--pl-ease)}
#ap-form input:focus-visible,#ap-form select:focus-visible,#ap-form textarea:focus-visible{outline:none;border-color:#124A92;box-shadow:0 0 0 3px rgba(18,74,146,.22)}

/* ---------- Waitlist tap target (finish of Growth fix 6): the link is the last line of .ap-tl inside .ap-acts; give it room below so nothing paints over its 44px zone ---------- */
@media (max-width:600px){.nr-rack .ap-acts-u .ap-tl .ap-wl{z-index:3}}

/* ---------- reduced motion: everything static, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  html.pl-js .ap-hero .ap-hero-copy>*,html.pl-js .ap-hero .hb-stage,html.pl-js .pl-rise{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
  .hb-cards,.hl-list>li{transform:none!important}
  html.pl-js #ap-ob.pl-opening .pp-beat,html.pl-js .nr-rack .scene:not(.rk-in) .pg-stats3 .pg-st{opacity:1!important;translate:none!important}
  .ap-btn,.pp-still,#six-pathways .pw-list li,details.qa summary::after,.site-footer a{transition:none!important}
  #class-times .sec-head h2{background-size:64px 3px!important;transition:none!important}
  .hb-ticks::after,.ap-fmtbox li,.ap-fmtbox li::after,.hb-pill,.hb-pill::after,.hb-tk i,.ap-arr,.ap-mc,.ap-mc::after,.ap-mc .ap-n,.ap-cf .ap-book .ap-enroll{transition:none!important}
  .hb-pill:hover,.ap-arr:hover,.ap-cf .ap-book .ap-enroll:hover{translate:none!important;transform:none!important}
}