/* Passes: where the student stands, the four passes, the payment result, and the paywall popup. */
.app.no-rail{grid-template-columns:240px minmax(0,1fr)}
@media (max-width:1180px){.app.no-rail{grid-template-columns:80px minmax(0,1fr)}}
@media (max-width:899px){.app.no-rail{display:block}}
.ps{max-width:1080px;margin:0 auto;padding-bottom:60px}
.ps-h{text-align:center}.ps-h small{display:block;color:var(--blue-500);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}.ps-h h1{margin:2px 0 4px;font-size:2.4rem;letter-spacing:-.02em}.ps-h p{margin:0 auto 18px;color:var(--ink-2);font-weight:700;max-width:620px;line-height:1.45}
.ps-now{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;border-radius:24px;border:2.5px solid var(--blue-100);box-shadow:0 14px 26px -20px rgba(31,64,140,.6)}
.ps-now .ps-m{width:64px;flex:none}.ps-now .ps-m .mortoti,.ps-big .mortoti{display:block;width:100%;overflow:visible}
.ps-now b{display:block;font-size:1.1rem}.ps-now small{display:block;color:var(--ink-2);font-weight:700;margin-top:3px;line-height:1.4}
.ps-err{max-width:720px;margin:14px auto 0;padding:12px 16px;border-radius:16px;background:#FFF0F2;color:#C0263F;font-weight:800}
/* the shared buttons: pass page, payment result, test checkout, the "Time for a pass" popup and the pass card */
.ps .b-main,.ps .b-ghost,.ps-test .b-main,.ps-test .b-ghost,.pw .b-main,.pw .b-ghost,.pnn .b-main,.pnn .b-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:16px;border:0;font:inherit;font-weight:800;font-size:1rem;cursor:pointer;text-decoration:none;font-family:var(--font)}
.ps .b-main,.ps-test .b-main,.pw .b-main,.pnn .b-main{background:var(--blue-500);color:#fff;box-shadow:0 4px 0 var(--blue-700)}
.ps .b-ghost,.ps-test .b-ghost,.pw .b-ghost,.pnn .b-ghost{background:#fff;color:var(--ink-2);box-shadow:0 4px 0 var(--blue-100)}
.ps .b-main:active,.ps-test .b-main:active,.pw .b-main:active,.pnn .b-main:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-700)}
.ps-note{margin:22px auto 0;max-width:620px;text-align:center;color:var(--ink-2);font-weight:700;font-size:.9rem}
@media (max-width:480px){.ps-now{align-items:flex-start}.ps-now .ps-m{width:52px}}

/* the pricing cards, all the same height: a round price seal with a peeling corner over each card, a tick list, and a best-value card */
.pr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:84px}
.pr{--bg:#fff;--fg:var(--ink);--sub:var(--ink-2);--seal:var(--blue-500);--seal-fg:#fff;--tick:var(--blue-500);--tick-fg:#fff;--btn:var(--blue-500);--btn-fg:#fff;--btn-edge:var(--blue-700)}
.pr-day{--bg:#fff;--seal:#3A4A6E}
.pr-week{--bg:var(--blue-100);--seal:var(--blue-600)}
.pr-month{--bg:var(--blue-500);--fg:#fff;--sub:#DCE7FF;--seal:var(--blue-200);--seal-fg:var(--blue-700);--tick:#fff;--tick-fg:var(--blue-500);--btn:#fff;--btn-fg:var(--blue-600);--btn-edge:var(--blue-200)}
.pr-semester{--bg:var(--blue-700);--fg:#fff;--sub:#C4D7FF;--seal:#fff;--seal-fg:var(--blue-700);--tick:var(--gold);--tick-fg:var(--blue-700);--btn:var(--gold);--btn-fg:#3A2700;--btn-edge:#D68600}
.pr{position:relative;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border-radius:26px;padding:84px 20px 22px;box-shadow:0 18px 32px -22px rgba(31,64,140,.7);min-height:430px}
.pr.feat{box-shadow:0 26px 44px -22px rgba(23,55,146,.85);z-index:1}
.pr-seal{position:absolute;top:-64px;left:50%;width:132px;height:132px;margin-left:-66px;border-radius:50%;background:var(--seal);color:var(--seal-fg);display:grid;place-content:center;justify-items:center;text-align:center;box-shadow:0 14px 24px -14px rgba(17,27,51,.7);overflow:hidden}
.pr-seal b{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.pr-seal span{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pr-seal small{font-size:.9rem;margin-right:2px;vertical-align:.7em;letter-spacing:0}
/* the peel: the bottom-right of the seal curls up, showing its white back */
.pr-seal i{position:absolute;right:0;bottom:0;width:46%;height:46%;border-top-left-radius:100%;background:linear-gradient(135deg,#fff 0%,#F2F5FB 45%,#C9D3E6 100%);box-shadow:-6px -6px 12px -4px rgba(17,27,51,.35)}
.pr-tag{display:inline-block;margin-right:6px;vertical-align:1px;white-space:nowrap;padding:2px 10px;border-radius:99px;background:var(--gold);color:#3A2700;font-style:normal;font-weight:800;font-size:.74rem}
.pr-for{margin:0 0 14px;text-align:center;color:var(--sub);font-weight:800;font-size:.92rem;min-height:2.6em;line-height:1.3}
.pr-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.pr-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-weight:700;font-size:.93rem;line-height:1.35}
.pr-list .i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--tick);color:var(--tick-fg);stroke-width:3.2}
.pr-go{margin-top:auto;align-self:center;width:100%;max-width:220px;padding:13px 18px;border:0;border-radius:99px;font:inherit;font-weight:800;font-size:1rem;background:var(--btn);color:var(--btn-fg);box-shadow:0 4px 0 var(--btn-edge);cursor:pointer;transition:transform .12s}
.pr-go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-edge)}
.pr-go:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1100px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:96px}}
@media (max-width:560px){.pr-grid{grid-template-columns:1fr;row-gap:92px;margin-top:92px}.pr{min-height:0}.pr-for{min-height:0}}
@media (prefers-reduced-motion:reduce){.pr-go{transition:none}}

/* payment result */
.ps-done{max-width:480px;text-align:center;display:grid;justify-items:center;gap:10px;padding-top:24px}
.ps-big{width:150px}.ps-done h1{margin:0;font-size:1.8rem;letter-spacing:-.02em}.ps-done p{margin:0;color:var(--ink-2);font-weight:700;line-height:1.45}
.ps-acts{display:grid;gap:10px;width:100%;margin-top:8px}

/* the pretend checkout (development only) */
body:has(.ps-test){margin:0;font-family:var(--font);color:var(--ink);background:var(--bg)}
.ps-test{max-width:420px;margin:40px auto;padding:24px 16px;display:grid;gap:12px;text-align:center}
.ps-test h1{margin:0}.ps-test .ps-price{margin:0;font-size:2.4rem;font-weight:800}.ps-test .ps-price small{font-size:1rem;margin-right:3px;color:var(--ink-2)}.ps-test form{display:grid;gap:10px}
.ps-warn{margin:0;padding:10px 14px;border-radius:14px;background:#FFFBF0;border:1.5px solid #FFE3A3;color:#8A5A00;font-weight:800;font-size:.88rem}

/* the paywall popup (paywall.js), on any page */
.pw,.pw *{box-sizing:border-box}
.pw{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(17,27,51,.45);animation:pwin .2s ease-out}
@keyframes pwin{from{opacity:0}}
.pw-c{width:100%;max-width:380px;background:#fff;border-radius:26px;padding:22px 20px 18px;display:grid;gap:10px;text-align:center;font-family:var(--font);color:var(--ink);box-shadow:0 30px 60px -20px rgba(17,27,51,.5)}
.pw-c h2{margin:0;font-size:1.35rem}.pw-c p{margin:0;color:var(--ink-2);font-weight:700;line-height:1.45}
.pw-c .b-main,.pw-c .b-ghost{width:100%}
@media (prefers-reduced-motion:reduce){.pw{animation:none}}

/* the plan in the shell: a chip in the phone top bar and a pill in the sidebar */
.cap .chips .chip.plan{white-space:nowrap;color:var(--ink-2);background:var(--blue-50);border-radius:99px;padding:3px 9px 3px 7px;font-size:.82rem;text-decoration:none}
.cap .chips .chip.plan .i{width:15px;height:15px;font-size:15px}
.cap .chips .chip.plan.on{color:#8A5A00;background:#FFF4D6}
.cap .chips .chip.plan.out{color:#fff;background:var(--blue-500)}
@media (max-width:380px){.cap .wm{display:none}}                     /* room for the plan chip on small phones */
.plan-pill{display:flex;align-items:center;gap:10px;margin:auto 0 10px;padding:11px 12px;border-radius:16px;background:var(--blue-50);color:var(--ink-2);font-weight:800;font-size:.86rem;text-decoration:none;border:2px solid var(--blue-100);transition:transform .2s var(--ease-out)}
.plan-pill:hover{transform:translateY(-2px)}
.plan-pill .i{width:20px;height:20px;flex:none;color:var(--blue-500)}
.plan-pill span{display:grid;line-height:1.25;min-width:0}.plan-pill span small{font-size:.76rem;font-weight:700;opacity:.85}
.plan-pill.on{background:#FFF4D6;border-color:#FFE3A3;color:#8A5A00}.plan-pill.on .i{color:#D68600}
.plan-pill.out{background:var(--blue-500);border-color:var(--blue-500);color:#fff}.plan-pill.out .i{color:#fff}
.plan-pill+.me{margin-top:0}
@media (max-width:1180px){.plan-pill{justify-content:center;padding:10px}.plan-pill span{display:none}}

/* the pass card in the middle of the screen: the login sky with Mortoti, the free pack as rings, the month pass */
.pnn{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px}
.pnn[hidden]{display:none}
.pnn,.pnn *{box-sizing:border-box}
.pnn-bg{position:absolute;inset:0;background:rgba(23,40,92,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.pnn.show .pnn-bg{opacity:1}
.pnn-c{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:30px;font-family:var(--font);color:var(--ink);
  box-shadow:0 40px 80px -24px rgba(10,20,60,.65);opacity:0;transform:translateY(24px) scale(.94);transition:.45s var(--ease-spring)}
.pnn.show .pnn-c{opacity:1;transform:none}
.pnn-c:focus{outline:none}
.pnn-x{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.75);color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.pnn-x .i{width:18px;height:18px}
.pnn-hero{position:relative;height:176px;background:radial-gradient(260px 200px at 80% 10%,#D6E4FF,transparent 70%),linear-gradient(160deg,#C9DAFF 0%,#E3EDFF 55%,#EAF1FF 100%)}
.pnn-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.pnn-m{position:absolute;left:18px;bottom:2px;width:112px;z-index:2}.pnn-m .mortoti{display:block;width:100%;overflow:visible}
.pnn-say{position:absolute;left:142px;right:58px;top:34px;z-index:2;margin:0;background:#fff;border-radius:18px;padding:10px 16px;font-weight:800;font-size:15px;line-height:1.3;text-align:left;box-shadow:0 10px 22px -12px rgba(31,64,140,.55)}
.pnn-say::after{content:"";position:absolute;left:-6px;top:50%;width:14px;height:14px;margin-top:-7px;background:#fff;transform:rotate(45deg);border-radius:3px}
.pnn-body{padding:2px 24px 20px;display:grid;gap:14px}
.pnn-body h2{margin:0;font-size:19px;letter-spacing:-.01em;text-align:left}
.pnn-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pnn-ring{position:relative;display:grid;justify-items:center;gap:4px}
.pnn-ring svg{width:58px;height:58px}
.pnn-ring circle{fill:none;stroke-width:7}.pnn-ring .tr{stroke:#EEF2FA}.pnn-ring .on{stroke-linecap:round}
.pnn-lesson .on{stroke:#7B61FF}.pnn-mock .on{stroke:#2F6BFF}.pnn-teach .on{stroke:#17B69A}
.pnn-ring b{position:absolute;top:18px;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pnn-ring span{font-size:13px;font-weight:800;color:var(--ink-2)}
.pnn-ring.none b{color:var(--ink-3)}
.pnn-offer{position:relative;display:flex;align-items:center;gap:12px;padding:18px 18px 14px;margin-top:6px;border-radius:20px;background:linear-gradient(135deg,#FFF8E1 0%,#FFEDB8 100%);border:2px solid #FFC94D;color:#2A1C00;text-decoration:none}
.pnn-tag{position:absolute;top:-11px;left:16px;background:#FFB020;color:#3A2700;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:3px 10px;box-shadow:0 2px 0 #D68600}
.pnn-ol{flex:1;min-width:0;display:grid}.pnn-ol small{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8A5A00}
.pnn-ol b{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05}.pnn-ol b span{font-size:15px;margin-right:2px;color:#8A5A00;letter-spacing:0}
.pnn-or{display:grid;gap:4px;text-align:right}.pnn-or em{font-style:normal;font-size:13px;font-weight:700;color:#8A5A00}.pnn-or em+em{font-weight:800;color:#2A1C00;font-size:14px}
.pnn-chips{display:flex;gap:6px;justify-content:center}
.pnn-chips a{flex:1 1 auto;white-space:nowrap;text-align:center;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--blue-50);border-radius:99px;padding:7px 9px;text-decoration:none}
.pnn-chips b{color:var(--ink)}
.pnn-body .b-main{width:100%;font-size:17px;padding:15px;border-radius:18px;box-shadow:0 5px 0 var(--blue-700),0 14px 24px -12px rgba(47,107,255,.7);margin-top:4px}
.pnn-body .b-ghost{width:100%;background:none;box-shadow:none;padding:6px}
@media (max-width:380px){.pnn-say{font-size:14px;left:130px}.pnn-m{width:100px}.pnn-body{padding:2px 18px 18px}.pnn-or em:first-child{display:none}}
@media (prefers-reduced-motion:reduce){.pnn-c,.pnn-bg{transition:none}}