:root{
  --taupe:#7D7062;--taupe-d:#5E5348;--taupe-l:#A99D90;--ink:#26211D;--cream:#F7F3EE;--sand:#EDE6DC;--stone:#D9CFC3;--white:#FFFDFA;--esp:#2B241F;
  --c-oo:#53B8EA;--c-ilk:#E9B312;--yel:#FDC821;--c-orta:#8A1531;--c-lise:#40A54A;
  --lc:#53B8EA;--lc-d:#2F8FC4;--lc-dd:#0B3049;--lc-t:#EAF6FD;
  --serif:"Ivy Mode","Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:140px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:16px}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
ul,ol{list-style:none}
img{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe)}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.4vw,58px);line-height:1.05;letter-spacing:-.01em}
.h2 em{font-style:italic;color:var(--lc-d)}
.lead{font-size:17px;line-height:1.7;color:var(--taupe-d)}
.ph{position:relative;overflow:hidden;background:
  radial-gradient(60% 60% at 70% 30%,rgba(255,244,228,.55),transparent 60%),
  linear-gradient(150deg,#A9CDE0 0%,#6FA9C9 40%,#7D7062 100%)}
.ph.t2{background:radial-gradient(55% 55% at 30% 30%,rgba(255,240,215,.5),transparent 60%),linear-gradient(160deg,#D7C9B6,#A99D90 50%,#5E5348)}
.ph.t3{background:radial-gradient(60% 60% at 60% 40%,rgba(255,255,255,.35),transparent 60%),linear-gradient(140deg,#BFE3F4,#53B8EA 55%,#2F6F95)}
.ph.t4{background:radial-gradient(50% 50% at 40% 35%,rgba(255,236,190,.55),transparent 60%),linear-gradient(150deg,#E9DFC9,#C2B49E 50%,#6E8F6A)}
.ph::after{content:"";position:absolute;inset:0;opacity:.2;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph .lbl{position:absolute;right:14px;top:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.4);padding:5px 9px;z-index:2}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:40px;font-size:14.5px;font-weight:500;transition:.3s;white-space:nowrap}
.btn svg{width:14px;height:14px}
.btn.d{background:var(--ink);color:#fff}.btn.d:hover{background:var(--lc-d)}
.btn.w{background:#fff;color:var(--ink)}.btn.w:hover{background:var(--ink);color:#fff}
.btn.o{border:1px solid currentColor}.btn.o:hover{background:rgba(255,255,255,.12)}
.btn.l{background:var(--lc);color:#fff}.btn.l:hover{background:var(--lc-dd)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}
.play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;transition:transform .3s}
.play:hover{transform:scale(1.08)}
/* ===== shared: breadcrumb, faq, level switcher ===== */
.bc{font-size:12.5px;color:var(--taupe);display:flex;gap:10px;align-items:center}
.bc a:hover{color:var(--ink)}
.bc i{font-style:normal;opacity:.5}
.faq details{border-bottom:1px solid var(--stone)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;cursor:pointer;font-family:var(--serif);font-size:23px;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:0 0 36px;height:36px;border-radius:50%;border:1px solid var(--stone);display:grid;place-items:center;font-style:normal;font-family:var(--sans);font-size:18px;transition:.3s}
.faq details[open] summary i{transform:rotate(45deg);background:var(--lc);border-color:var(--lc);color:#fff}
.faq details p{padding:0 60px 26px 0;color:var(--taupe-d);line-height:1.7;font-size:15.5px}
.lvs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lvs a{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:26px 24px;border-radius:18px;background:var(--k);color:#fff;min-height:150px;overflow:hidden;transition:transform .4s}
.lvs a:hover{transform:translateY(-5px)}
.lvs a.y{color:var(--ink)}
.lvs a b{position:absolute;right:16px;top:-14px;font-family:var(--serif);font-weight:300;font-size:130px;line-height:1;opacity:.25}
.lvs a small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.lvs a span{font-family:var(--serif);font-size:26px;line-height:1.1;position:relative}
.lvs a em{font-style:normal;font-size:20px;position:relative}
.vg{position:relative;aspect-ratio:9/14;border-radius:18px;overflow:hidden;color:#fff;cursor:pointer}
.vg .ph{position:absolute;inset:0}
.vg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 55%,rgba(0,0,0,.6))}
.vg .who{position:absolute;left:14px;top:14px;z-index:2;font-size:12.5px;display:flex;gap:8px;align-items:center}
.vg .who i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center;font-style:normal;font-family:var(--serif)}
.vg .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:50px;height:50px}
.vg .play:hover{transform:translate(-50%,-50%) scale(1.08)}
.vg p{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;font-family:var(--serif);font-size:19px;line-height:1.25}
.vg .len{position:absolute;right:14px;top:16px;z-index:2;font-size:11px;background:rgba(0,0,0,.35);padding:3px 8px;border-radius:20px}
.demo{display:none}.demo.on{display:block}