/* =============================================================================
   CTFY · Corporate Leadership Programme (/programs/consulting/, PRD pages/26) · page layer
   Builds on css/site.css and css/modules.css. The `.prog-*` classes are copied from the 28-Day Reset template
   (css/pages/28-day-reset.css §2, §3, §4 studio frame, §6) so the programme pages read as one family.
   PAGE-ONLY · the tier selector (the hero moment): `.tsel*`. The inline script at the end of <main> builds it from the
   three tier cards (segmented radiogroup, tweened monthly readout, price rail with a knob). Without JS the cards stack.
   Motion: transform/opacity only. Default CSS is the finished state (Standard selected); html[data-motion="off"],
   prefers-reduced-motion and no-JS never see the knob travel or the price tween.
   ============================================================================= */

#why,#inside,#method,#plans,#process,#seminar,#start{scroll-margin-top:96px}

/* ---------- Statement (M02) ---------- */
.prog-statement{padding-block:var(--section-y-tight)}
.prog-statement .m-lightup__quote{max-width:25ch}

/* ---------- Why + "Who it is for" (M14 + M28 --sans + group-room photo) ---------- */
.prog-why{padding-top:var(--section-y-tight)}
.prog-why__aside,.prog-seminar__aside{display:grid;gap:clamp(20px,2.4vw,32px)}
.prog-why__detail,.prog-seminar__photo{aspect-ratio:16/10;border-radius:var(--r-l)}
.prog-why__detail picture,.prog-seminar__photo picture{display:contents}
.prog-included .m-feel__list li,.prog-glance .m-feel__list li{align-items:center}
.prog-included .m-feel__list .icon{transform:none}
.prog-why .m-split__line{max-width:36ch}
.prog-why .m-split__line strong{font-weight:600}
@media (min-width:1024px){.prog-why__split,.prog-seminar__split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
@media (max-width:1023px){.prog-why .m-split__media,.prog-seminar .m-split__media{order:0}}

/* ---------- What's inside (porcelain M24 numbered, four parts as a 2 × 2) ---------- */
.prog-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
.prog-parts .m-pillar__media{aspect-ratio:21/9}
.prog-parts .m-pillar__media picture{display:contents}
.prog-parts .m-pillar p{max-width:56ch}
.prog-parts .m-pillar h3 a{color:inherit;text-decoration:underline;text-decoration-color:rgba(43,59,196,.4);text-decoration-thickness:1px;text-underline-offset:5px}
.prog-parts .m-pillar h3 a:hover{text-decoration-color:var(--theta-700)}
@media (max-width:599px){.prog-parts{grid-template-columns:minmax(0,1fr)}.prog-parts .m-pillar__media{aspect-ratio:16/9}}
.prog-studio{margin-top:clamp(56px,7vw,104px)}
.prog-studio__frame{aspect-ratio:21/9;border-radius:var(--r-l)}
.prog-studio__frame picture{display:contents}
@media (max-width:767px){.prog-studio__frame{aspect-ratio:4/3}}

/* ---------- Method (M18 name wall, dark: a trust claim, so names sit one step brighter than the library) ---------- */
.prog-names{max-width:980px;margin-inline:auto}
.prog-names .m-names__grid b{color:var(--text-2)}
.js .prog-names.is-pending li b{opacity:0;transform:translateY(8px)}
.prog-names.is-in li b{transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.prog-names.is-in li:nth-child(1) b{transition-delay:120ms}.prog-names.is-in li:nth-child(2) b{transition-delay:190ms}
.prog-names.is-in li:nth-child(3) b{transition-delay:260ms}.prog-names.is-in li:nth-child(4) b{transition-delay:330ms}
.prog-names.is-in li:nth-child(5) b{transition-delay:400ms}.prog-names.is-in li:nth-child(6) b{transition-delay:470ms}
.prog-method__led{max-width:56ch;margin:clamp(32px,4vw,52px) auto 0;text-align:center;color:var(--text-2)}
.prog-studio--long{margin-top:clamp(56px,7vw,96px)}

/* ---------- Tiers (M31) + selector (the hero moment) ---------- */
.prog-tiers{position:relative;overflow:hidden;overflow:clip}
.prog-tiers .wrap{position:relative}
.prog-tiers__bloom{position:absolute;left:50%;top:6%;width:min(1200px,130vw);aspect-ratio:2/1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(62,85,245,.26),rgba(62,85,245,.09) 55%,transparent)}
.prog-tiers .sec__head{margin-bottom:clamp(32px,4vw,48px)}
.prog-tiers .m-tiers{padding-top:14px}

.tsel{display:none}
.is-tsel .tsel{display:grid;justify-items:center;gap:clamp(26px,3vw,40px);margin-bottom:clamp(44px,5vw,72px)}
.tsel__seg{display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:var(--r-pill)}
.tsel__opt{min-width:120px;min-height:44px;padding:0 22px;border:0;border-radius:var(--r-pill);background:none;color:var(--text-2);cursor:pointer;
  font:600 .9375rem/1 var(--font-sans);transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.tsel__opt:hover{color:var(--text-1)}
.tsel__opt.is-on{background:var(--fg-1);color:var(--m-on-fg)}
.tsel__read{display:grid;justify-items:center;text-align:center;gap:14px;max-width:46ch}
.tsel__vis{display:grid;justify-items:center;gap:14px}
.tsel__price{display:flex;align-items:baseline;justify-content:center;gap:.5em;margin:0}
.tsel__num{font-variant-numeric:tabular-nums;line-height:1}
.tsel__unit{color:var(--text-2);font:500 1.0625rem/1 var(--font-sans);letter-spacing:0}
.tsel__term{margin:0;min-height:3.2em;color:var(--text-2);font-size:1rem;line-height:1.6;transition:opacity 140ms var(--ease-out)}
.tsel__term.is-swap{opacity:0}

/* price rail: 1px line, three notches placed in proportion to the printed prices (presentation only), a pearl knob */
.tsel__rail{width:min(100%,760px);padding:0 64px 58px}
.tsel__track{position:relative;height:22px}
.tsel__line,.tsel__fill{position:absolute;left:0;right:0;top:50%;height:1px}
.tsel__line{background:var(--line-2)}
.tsel__fill{background:linear-gradient(90deg,var(--theta-500),var(--theta-300));transform-origin:left;transition:transform 420ms var(--ease-in-out)}
.tsel__notch{position:absolute;top:50%;width:1px;height:11px;background:var(--line-2);transform:translate(-50%,-50%)}
.tsel__tick{position:absolute;top:calc(100% + 16px);display:grid;gap:4px;justify-items:center;min-width:92px;padding:0;border:0;background:none;color:var(--text-3);cursor:pointer;
  transform:translateX(-50%);font:600 calc(var(--t-micro) * 1) /1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.tsel__tick b{color:var(--text-2);font:500 .9375rem/1 var(--font-sans);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.tsel__knob{position:absolute;left:-11px;top:0;width:22px;height:22px;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle at 36% 30%,#fff,#E9ECFF 55%,#B9C1FF);
  box-shadow:0 0 0 7px rgba(62,85,245,.2),0 0 26px 4px var(--theta-glow);transition:transform 420ms var(--ease-in-out)}

/* cards: the selected tier lifts 6px and takes a theta edge, the others recede to 72% (desktop; mobile shows one card at a time) */
.is-tsel .m-tiers>li>.m-tier{transition:transform 320ms var(--ease-out),opacity 320ms var(--ease-out),border-color 320ms var(--ease-out),box-shadow 320ms var(--ease-out)}
@media (min-width:1024px){
  .is-tsel .m-tiers>li{cursor:pointer}
  .is-tsel .m-tiers>li:not(.is-sel)>.m-tier{opacity:.72}
  .is-tsel .m-tiers>li.is-sel>.m-tier{transform:translateY(-6px)}
  .is-tsel .m-tiers>li.is-sel>.m-tier:not(.m-tier--feature){border-color:var(--theta-400);box-shadow:0 0 0 1px rgba(107,125,255,.45),0 0 48px -10px var(--theta-glow)}
  .is-tsel .m-tiers>li.is-sel>.m-tier--feature{filter:drop-shadow(0 0 22px rgba(62,85,245,.35))}
}
@media (max-width:1023px){
  .is-tsel .tsel{display:contents}
  .tsel__seg{position:sticky;top:84px;z-index:6;display:grid;width:100%;max-width:520px;margin:0 auto clamp(24px,5vw,36px)}
  .tsel__opt{min-width:0;padding:0 8px}
  .tsel__read{margin:0 auto clamp(24px,4vw,32px)}
  .tsel__rail{width:100%;max-width:520px;margin:0 auto clamp(28px,5vw,40px);padding:0 44px 52px}
  .is-tsel .m-tiers{max-width:520px;margin-inline:auto}
}
@media (max-width:480px){.tsel__rail{padding-inline:36px}.tsel__tick{min-width:76px;letter-spacing:.1em}}

/* ---------- Steps (M27) ---------- */
.prog-process{padding-top:var(--section-y-tight)}

/* ---------- Seminar (M14 split + M28 glance card) ---------- */
.prog-strong{color:var(--text-1);font-weight:600}
.prog-champ{color:var(--champ-400);font-weight:600}
.prog-glance .m-feel__list li{align-items:center}
.prog-seminar .m-feel__list li{font-size:calc(var(--t-body) * var(--k-text))}

/* ---------- Note + bridge ---------- */
.prog-note{padding-block:var(--section-y-tight)}
.prog-bridge .m-bridge__line{max-width:24ch}

/* ---------- Calm states ---------- */
[data-motion="off"] :is(.tsel__knob,.tsel__fill,.tsel__term,.tsel__opt,.is-tsel .m-tiers>li>.m-tier){transition:none!important}
@media (prefers-reduced-motion:reduce){:is(.tsel__knob,.tsel__fill,.tsel__term,.tsel__opt,.is-tsel .m-tiers>li>.m-tier){transition:none!important}}

/* ---------- Hero: a nine-word H1 sits in the split panel one step below the library size ---------- */
.hero--media.hero--split .hero__title{font-size:calc(clamp(2.1rem,1.4rem + 2vw,3.3rem) * var(--k-display));text-wrap:balance}
@media (max-width:1023px){.hero--media.hero--split .hero__title{font-size:calc(2rem * var(--k-display))}}