@font-face{font-family:Abar;src:url(assets/abar.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{color-scheme:light;--paper:#f9f8fd;--field:#eeebf7;--white:#fff;--ink:#211734;--subtle:#5f546d;--accent:#572bd6;--accent-deep:#3f1ca8;--accent-soft:#ddd2fd;--page-width:1328px;--gutter:clamp(18px,4vw,60px);--cut:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);font-family:Abar,Tahoma,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.8}
figure,fieldset,h1,h2,h3,p,dl,dd{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.frame{width:min(100% - 2 * var(--gutter),var(--page-width));margin-inline:auto}
.skip,.visually-hidden,.sample-picker>input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{z-index:5;top:12px;inset-inline-start:12px;width:auto;height:auto;padding:8px 14px;clip-path:none;background:var(--white)}
.site-head{min-height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:12px;justify-self:start;font-size:27px;font-weight:850}
.brand img{width:40px;height:40px;clip-path:var(--cut)}
.site-head nav{display:flex;gap:clamp(18px,3vw,42px);font-size:15px}
.site-head nav a,.head-action,.site-routes a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:650}
.site-head a:hover,.site-routes a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:5px}
.head-action{justify-self:end;font-size:15px}
.hero{min-height:650px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(22px,3.2vw,53px);padding-block:48px 72px}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(50px,7vw,102px);line-height:1.14;font-weight:850;letter-spacing:-.025em}
.hero h1>span{display:block;margin-block-start:8px;font-size:.47em;line-height:1.4;font-weight:750;letter-spacing:-.025em;white-space:nowrap}
.hero p{max-width:32ch;margin-block:28px 28px;font-size:clamp(17px,1.55vw,21px);line-height:1.85}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:52px;padding:12px 21px;background:var(--accent);color:var(--white);font-weight:750;font-size:16px;clip-path:var(--cut)}
.button:hover,.button:focus-visible{background:var(--accent-deep)}
.button:focus-visible{outline:3px solid var(--white);outline-offset:-6px}
.button:active{transform:translateY(2px)}
.button span{font-size:19px;line-height:1;transition:transform .2s}
.button:hover span{transform:translateX(-4px)}
.hero-shot{position:relative;margin:0;isolation:isolate;padding:clamp(23px,4vw,62px) clamp(16px,2.8vw,42px) 0;min-width:0}
.folder-stage{position:absolute;z-index:-1;inset:0 0 34px;background:var(--accent);clip-path:polygon(0 17%,54% 17%,65% 0,94% 0,100% 11%,100% 100%,0 100%)}
.shot-window{background:var(--white);overflow:hidden;clip-path:var(--cut);aspect-ratio:1.48}
.shot-window img{height:100%;object-fit:cover;object-position:top;animation:open-folder .85s cubic-bezier(.22,.78,.3,1) both}
.hero-shot figcaption{font-size:14px;color:var(--subtle);padding-block:8px 0}
h2{font-size:clamp(35px,4.6vw,65px);line-height:1.28;font-weight:800;letter-spacing:-.025em}
h3{font-size:clamp(27px,3.25vw,47px);line-height:1.3;font-weight:800}
.field{background:var(--field)}
.gallery{padding-block:87px 72px}
.sample-picker{border:0;padding:0;min-inline-size:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:32px}
.sample-picker label{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px;text-align:center;cursor:pointer;background:var(--white);clip-path:var(--cut);font-size:16px;font-weight:700;color:var(--ink)}
.sample-picker label:hover{background:var(--accent-soft)}
.sample-picker input:checked+label{background:var(--accent);color:var(--white)}
.sample-picker input:focus-visible+label{background:var(--ink);color:var(--white)}
.sample{display:none;grid-column:1/-1;grid-template-columns:1.4fr .6fr;align-items:center;gap:clamp(22px,5vw,84px);padding:32px 0}
#course-tab:checked~.course-sample,#lesson-tab:checked~.lesson-sample,#student-tab:checked~.student-sample,#certificate-tab:checked~.certificate-sample{display:grid}
.sample figure,.proof{background:var(--accent-soft);padding:16px;clip-path:var(--cut)}
.sample img,.proof img{aspect-ratio:1.6;object-fit:cover;object-position:top}
.sample p{margin-block:18px 22px;max-width:34ch}
.site-routes{display:flex;flex-wrap:wrap;gap:12px clamp(22px,5vw,66px);padding-top:6px}
.site-routes a{gap:11px}
.site-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-block-start:14px}
.site-pages>a{display:grid;grid-template-columns:1fr .56fr;align-items:center;gap:14px;background:var(--white);font-weight:700;clip-path:var(--cut);padding:9px}
.site-pages>a:hover,.site-pages>a:focus-visible{background:var(--accent-soft)}
.site-pages>a:focus-visible{outline-offset:-4px}
.site-pages>a>span{display:flex;gap:12px;justify-content:space-between;padding-inline-end:12px}
.site-pages img{aspect-ratio:1.9;object-fit:cover;object-position:top}
.workflow{display:grid;grid-template-columns:1fr .85fr;gap:clamp(36px,7vw,108px);padding-block:112px}
.workflow p{max-width:40ch;margin-top:20px}
.workflow .proof{margin-top:30px;max-width:615px}
.workflow dl{align-self:center;display:grid;gap:24px}
.workflow dl>div{background:var(--field);padding:20px 24px;clip-path:var(--cut)}
.workflow dt{font-size:21px;font-weight:750;line-height:1.5}
.workflow dd{color:var(--subtle);margin-top:5px;max-width:42ch}
.questions{padding-block:85px 100px}
.questions>.frame{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px}
.answer-list{display:grid;gap:9px}
details{background:var(--white);clip-path:var(--cut)}
summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:59px;padding:14px 20px;font-weight:750}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;line-height:1;flex:none;color:var(--accent)}
summary:focus-visible{outline-offset:-4px}
details[open]{background:var(--accent-soft)}
details[open] summary::after{content:"−"}
details p{padding:0 20px 17px;max-width:61ch}
.closing{background:var(--ink);color:var(--white);padding-block:76px 30px}
.closing .frame{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px}
.closing h2{font-size:clamp(34px,5vw,72px)}
.closing p{grid-column:1/-1;color:var(--accent-soft);font-size:14px}
.closing .button{background:var(--white);color:var(--ink)}
.closing .button:hover,.closing .button:focus-visible{background:var(--accent-soft);outline-color:var(--ink)}
@keyframes open-folder{from{transform:scale(1.055);opacity:.55}to{transform:scale(1);opacity:1}}
@supports (animation-timeline:view()){
  .gallery h2,.site-pages,.workflow h2,.workflow .proof,.workflow dl,.questions h2,.answer-list,.closing h2,.closing .button{animation:arrive both linear;animation-timeline:view();animation-range:entry 0% entry 85%}
  @keyframes arrive{from{transform:translateY(16px);opacity:.82}to{transform:translateY(0);opacity:1}}
}
@media (max-width:1050px){.hero{min-height:530px;padding-block:46px 60px}.hero h1{font-size:clamp(49px,7.7vw,79px)}.workflow{gap:36px}}
@media (max-width:700px){
  .site-head{min-height:66px;display:flex;justify-content:space-between;gap:8px}
  .site-head nav{display:none}.brand{font-size:23px;gap:8px}.brand img{width:34px;height:34px}.head-action{font-size:14px}
  .hero{min-height:0;grid-template-columns:minmax(0,1fr);gap:29px;padding-block:26px 49px}
  .hero h1{font-size:clamp(53px,13vw,64px)}.hero p{margin-block:17px 20px;max-width:36ch}.hero-shot{padding:30px 13px 0}.folder-stage{inset-block-end:31px}
  .gallery,.questions{padding-block:49px}.sample-picker{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:23px}
  .sample{grid-template-columns:1fr;gap:18px;padding:16px 0 20px}.sample figure,.proof{padding:8px}.sample p{margin-block:10px 13px}
  .site-routes{gap:2px 18px;padding-top:0}.site-routes a{font-size:14px}
  .site-pages{gap:8px}.site-pages>a{grid-template-columns:1fr;gap:8px;font-size:14px}.site-pages>a>span{padding-inline-end:2px}
  .workflow{grid-template-columns:1fr;padding-block:60px;gap:25px}.workflow dl{gap:10px}.workflow dl>div{padding:14px 17px}.workflow .proof{margin-top:20px}
  .questions>.frame,.closing .frame{grid-template-columns:1fr;gap:20px}.closing{padding-block:51px 22px}.closing .button{justify-self:start}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}