/* Academy · After the five days: the Blueprint mountain from the student panel, in the panel's frosted glass, on one
   screen (Six, 20 Oct 2026). Replaces the University "Six stages" dial and the workspace preview. Everything is scoped
   under .bpx so the site's own .stg, .facts and .note rules stay untouched. */
.bpx{position:relative;overflow:clip;min-height:100svh;display:flex;align-items:center;padding-block:calc(76px + env(safe-area-inset-top,0px)) clamp(24px,4vh,44px)!important;
  background:radial-gradient(60% 50% at 88% 6%,#f6dcb4,transparent 70%),radial-gradient(50% 45% at 6% 96%,#d7b391,transparent 70%),linear-gradient(165deg,#ece4d9,#d8d0c5 70%,#cfc4b6);color:#121214}
.bpx .bpx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;pointer-events:none;animation:bpxOrbit 18s ease-in-out infinite alternate}
.bpx .bpx-o1{width:44vw;height:44vw;max-width:620px;max-height:620px;left:-12vw;top:18%;background:#f3d3a6}
.bpx .bpx-o2{width:36vw;height:36vw;max-width:520px;max-height:520px;right:-8vw;top:-10%;background:#fff3e2;animation-delay:-6s}
.bpx .bpx-o3{width:30vw;height:30vw;max-width:440px;max-height:440px;right:24%;bottom:-16%;background:#c9a37e;opacity:.45;animation-delay:-11s}
@keyframes bpxOrbit{to{transform:translate(4vw,-5vh) scale(1.08)}}
.bpx .in{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.bpx .k{display:flex;align-items:center;gap:10px;color:#8a5f2e;margin:0 0 clamp(12px,2vh,20px)}
.bpx .k .cd{background:linear-gradient(135deg,#d9ae6e,#9c6f37)}
.bpx h2.big{margin:0;font-size:clamp(40px,min(4.6vw,8.5vh),72px);line-height:.95;white-space:nowrap}
.bpx h2 em{display:inline-block;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600;font-stretch:100%;font-size:1.14em;letter-spacing:-.01em;padding-right:.06em;
  background:linear-gradient(100deg,#6f4a24 0%,#9c6f37 30%,#d6ab6c 46%,#f3d39b 52%,#c99a5e 60%,#8a5f2e 85%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bpxGild 7s ease-in-out infinite}
@keyframes bpxGild{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.bpx .lead{margin:clamp(14px,2.2vh,22px) 0 0;max-width:42ch;font-size:clamp(15.5px,min(1.4vw,2.2vh),19px);color:#3d342d}
.bpx-glass{background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 2px 0 #fff,0 18px 36px -26px rgba(60,40,22,.6);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.bpx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(16px,3vh,30px)}
.bpx-facts div{padding:12px 14px;border-radius:18px}
.bpx-facts b{display:block;font-weight:800;font-stretch:125%;font-size:clamp(22px,3.4vh,30px);line-height:1;letter-spacing:-.02em}
.bpx-facts span{display:block;margin-top:5px;font-size:12.5px;line-height:1.35;color:#3d342d}
.bpx-acts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:clamp(16px,3vh,28px)}
.bpx-acts .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 30px -16px rgba(20,14,8,.7)}
.bpx-note{font:500 11.5px var(--m);letter-spacing:.06em;color:#7a6655}
.bpx-right{position:relative;min-width:0}
.bpx-mount{position:relative;padding:10px;border-radius:36px}
.bpx-mount svg{display:block;width:100%;height:auto;max-height:48vh;border-radius:27px}
.bpx-chip{position:absolute;left:22px;top:22px;display:flex;gap:10px;align-items:center;padding:8px 14px 8px 10px;border-radius:999px;font:600 11.5px var(--m);letter-spacing:.08em;color:#3d342d}
.bpx-chip i{width:20px;height:20px;border-radius:6px;transform:rotate(45deg);background:linear-gradient(145deg,#f6d7ae,#a8774f)}
.bpx-chip b{font:800 14px var(--f);font-stretch:112%;letter-spacing:0;color:#121214}
.bpx-phone{position:absolute;right:-18px;top:5%;width:clamp(120px,21%,180px);aspect-ratio:390/844;border-radius:28px;padding:5px;background:#16181b;box-shadow:0 40px 60px -30px rgba(40,24,10,.7),inset 0 0 0 2px #2b2e33;transform:rotate(4deg)}
.bpx-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:23px}
.bpx-phone span{position:absolute;left:50%;top:-28px;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;font:600 10px var(--m);letter-spacing:.12em;color:#7a6655}
/* the six stages: square glass tiles in one row, as wide as the mountain above, everything centred */
.bpx-stages{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.bpx-stages li{display:grid;min-width:0}
.bpx-stage{aspect-ratio:1;display:grid;grid-template-rows:1fr auto auto 1fr;justify-items:center;align-items:center;gap:4px;width:100%;min-width:0;padding:10px 6px;border-radius:20px;text-align:center;font:inherit;color:inherit;cursor:pointer;transition:box-shadow .4s,background .4s}
.bpx-stage .bpx-n{grid-row:1;align-self:end;margin-bottom:6px;width:30px;height:30px;border-radius:9px;transform:rotate(45deg) scale(.82);display:grid;place-items:center;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px #fff}
.bpx-stage .bpx-n b{transform:rotate(-45deg);font:600 10.5px var(--m);color:#7a6655}
.bpx-stage small{grid-row:2;display:block;max-width:100%;white-space:nowrap;font:600 9.5px var(--m);letter-spacing:.1em;text-transform:uppercase;color:#9a4f22}
.bpx-stage strong{grid-row:3;align-self:start;display:block;max-width:100%;white-space:nowrap;font-weight:800;font-stretch:104%;font-size:clamp(12px,1.05vw,15px);line-height:1.1;letter-spacing:-.015em}
.bpx-short{display:none}
.bpx-stage.on{background:linear-gradient(160deg,#fff,rgba(255,250,242,.82));box-shadow:inset 0 2px 0 #fff,0 0 0 4px rgba(243,211,155,.35),0 22px 40px -24px rgba(60,40,22,.7)}
.bpx-stage.on .bpx-n{background:linear-gradient(145deg,#f6d7ae,#c69670 55%,#a8774f)}
.bpx-stage.done .bpx-n{background:linear-gradient(145deg,#fbe6c8,#d9ab80 60%,#c69670)}
.bpx-stage.on .bpx-n b,.bpx-stage.done .bpx-n b{color:#fff}
.bpx-stage:focus-visible{outline:2px solid #9a4f22;outline-offset:3px}
.bpx-desc{margin:12px 0 0;text-align:center;min-height:2.9em;font-size:14.5px;line-height:1.45;color:#3d342d}
#bpxFlag{transform-origin:0 -21px;animation:bpxFlag 1.6s ease-in-out infinite}
@keyframes bpxFlag{50%{transform:skewY(-8deg) scaleX(.9)}}
#bpxHiker{animation:bpxBob .5s ease-in-out infinite}
@keyframes bpxBob{50%{transform:translateY(-1.2px)}}
@media (max-width:900px){
  .bpx{align-items:flex-start;padding-block:calc(70px + env(safe-area-inset-top,0px)) 18px!important}
  .bpx .in{grid-template-columns:minmax(0,1fr);gap:10px}
  .bpx .k,.bpx .lead{margin:0}
  .bpx-left{display:contents}.bpx-left>*{min-width:0}.bpx-right{order:1}.bpx-bottom{order:2}
  .bpx h2.big{font-size:clamp(34px,10vw,44px)}
  .bpx .lead{font-size:14.5px;line-height:1.45;margin-top:8px}
  .bpx-right{position:relative}
  .bpx-phone{display:block;top:-14px;right:6px;width:23%;border-radius:18px;padding:3px;transform:rotate(5deg);z-index:2;box-shadow:0 24px 34px -18px rgba(40,24,10,.75),inset 0 0 0 1.5px #2b2e33}
  .bpx-phone img{border-radius:15px}
  .bpx-phone span{display:none}
  .bpx-mount{padding:6px;border-radius:30px}.bpx-mount svg{border-radius:24px}
  .bpx-chip{left:14px;top:14px;font-size:10px;padding:6px 11px 6px 8px}.bpx-chip b{font-size:12.5px}
  .bpx-stages{gap:4px;margin-top:8px}
  .bpx-stage{aspect-ratio:auto;padding:7px 2px 8px;gap:4px;border-radius:15px}
  .bpx-stage .bpx-n{margin-bottom:1px;width:22px;height:22px}.bpx-stage .bpx-n b{font-size:9px}
  .bpx-full{display:none}.bpx-short{display:inline}
  .bpx-stage small{display:none}.bpx-stage strong{font-size:11px;letter-spacing:-.01em}
  .bpx-desc{font-size:13.5px;margin-top:6px;min-height:0}
  .bpx-facts{margin-top:0;gap:6px}.bpx-facts div{padding:8px 10px}.bpx-facts b{font-size:19px}.bpx-facts span{font-size:10.5px;line-height:1.3}
  .bpx-acts{margin-top:6px}.bpx-note{display:none}
}
@media (prefers-reduced-motion:reduce){.bpx *{animation:none!important;transition-duration:.01s!important}}
[data-site-section][hidden]{display:none!important}
/* The real mountain (Six, 20 Oct 2026): photo, the levels on its trail, smoked-glass labels */
.bpx-real{position:relative;border-radius:27px;overflow:hidden;aspect-ratio:1344/752;max-height:52vh;width:100%}
.bpx-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bpx-real svg{position:absolute;inset:0;width:100%;height:100%;max-height:none!important;border-radius:0!important}
.bpx-real::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(20,14,8,.25));pointer-events:none}
.bpx-pulse{animation:bpxPulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bpxPulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
.bpx-real .bpx-chip{position:absolute;z-index:2;left:3%;top:5%;display:block;padding:10px 16px;border-radius:16px;background:rgba(20,16,12,.38);border:1px solid rgba(255,236,200,.45);color:#fff8ea;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.bpx-real .bpx-chip small{display:block;font:600 10.5px var(--m);letter-spacing:.14em;text-transform:uppercase;color:#f3d39b}
.bpx-real .bpx-chip b{display:block;margin-top:3px;font:800 16px var(--f);font-stretch:112%;color:#fff8ea}
.bpx-flag{position:absolute;z-index:2;right:12%;top:2.5%;font:600 10px var(--m);letter-spacing:.14em;text-transform:uppercase;color:#fff8ea;padding:6px 10px;border-radius:999px;background:rgba(20,16,12,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bpx-mount{padding:8px}
/* the panel phone sits at the lower left, clear of the summit */
.bpx-phone{right:auto;left:-22px;top:auto;bottom:31%;transform:rotate(-4deg)}
.bpx-phone span{transform:translateX(-50%) rotate(4deg)}
/* stage tiles with their icons and states */
.bpx-stage{position:relative;grid-template-rows:1fr auto auto auto 1fr}
.bpx-ti{grid-row:2;width:30px;height:30px;border-radius:10px;transform:rotate(45deg);display:grid;place-items:center;margin-bottom:6px;background:linear-gradient(145deg,#fff,#f1e6d3);box-shadow:inset 0 0 0 1px #fff,0 10px 18px -10px rgba(90,60,25,.55)}
.bpx-ti svg{width:16px;height:16px;transform:rotate(-45deg);fill:none;stroke:#7a5228;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bpx-stage small{grid-row:3}.bpx-stage strong{grid-row:4}
.bpx-stage .bpx-n{display:none}
.bpx-stage.done .bpx-ti{background:linear-gradient(145deg,#f3d39b,#b8894f)}.bpx-stage.done .bpx-ti svg{stroke:#fff}
.bpx-stage.on{box-shadow:inset 0 2px 0 #fff,0 0 0 2px #e3c08a,0 0 30px rgba(227,192,138,.55),0 22px 40px -24px rgba(90,60,25,.7)!important}
.bpx-stage.on .bpx-ti{background:linear-gradient(145deg,#2a2622,#121214)}.bpx-stage.on .bpx-ti svg{stroke:#f3d39b}
.bpx-stage:not(.on):not(.done){opacity:.8}.bpx-stage:not(.on):not(.done) .bpx-ti svg{stroke:#a8957d}
.bpx-badge{position:absolute;top:7px;right:7px;font:700 9px var(--m);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.bpx-stage.done .bpx-badge{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#b8894f;color:#fff;font-size:10px}
.bpx-stage.on .bpx-badge{padding:3px 7px;border-radius:999px;background:#121214;color:#f3d39b}
@media (max-width:900px){
  .bpx-real{max-height:none}
  .bpx-real .bpx-chip{padding:6px 10px}.bpx-real .bpx-chip b{font-size:12.5px}.bpx-real .bpx-chip small{font-size:9px}
  .bpx-flag{display:none}
  .bpx-phone{left:8px;right:auto;top:21%;bottom:auto;width:19%;transform:rotate(-4deg)}
  .bpx-ti{width:22px;height:22px;border-radius:7px;margin-bottom:2px}.bpx-ti svg{width:12px;height:12px}
  .bpx-badge{top:3px;right:3px}.bpx-stage.on .bpx-badge{display:none}
}