/* walkthrough.css (2026-10-14): the SAT page's walkthrough pieces, shared with the math page */
.js .prow .ptx{opacity:0;transform:translate3d(-48px,0,0);transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.js .prow.flip .ptx{transform:translate3d(48px,0,0)}
.js .prow .ptx>*{opacity:0;transform:translate3d(0,14px,0);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.js .prow .pmedia{opacity:0;transform:translate3d(0,90px,0) scale(.93);transition:opacity 1s ease .08s,transform 1.4s cubic-bezier(.16,1,.3,1) .08s}
.js .prow.show .ptx,.js .prow.show .ptx>*,.js .prow.show .pmedia{opacity:1;transform:none}
.js .prow.show .ptx>:nth-child(2){transition-delay:.12s}.js .prow.show .ptx>:nth-child(3){transition-delay:.24s}
.js .dwin{transform:scale(var(--dz,1));transform-origin:50% 0;will-change:transform}
.capsteps{max-width:980px;margin:clamp(2.6rem,5vw,3.4rem) auto 0;text-align:center}
.capsteps h3{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);color:#fff;margin:0}
.capsteps .gs3{text-align:left;margin-top:0}
.capsteps .gs3 div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.capsteps .gs3 b{color:#fff}.capsteps .gs3 span:not(.n){color:rgba(237,231,229,.68)}
.capsteps .gs3 .n{color:var(--red-lift)}
.capsteps .gs-cta{margin-top:2rem}
.capcta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:1.8rem}
.capture .capdate{margin-top:1.6rem}
.pmail{max-width:520px;justify-self:center;width:100%;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
/* highlight tiles (2026-10-14): the original SAT highlight cards, reused */
.hx{background:#F5F5F7;padding:clamp(4.5rem,9vw,7rem) 0;overflow:hidden}
.hx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.hx-head h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0}
.hx-arrows{display:flex;gap:.6rem}
.hx-arrows button{width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.07);color:var(--ink);font-size:1.1rem;cursor:pointer;transition:background .2s}
.hx-arrows button:hover{background:rgba(0,0,0,.12)}
.hx-track{--hxl:max(var(--gut),calc((100vw - var(--shellw,1220px))/2 + var(--gut)));display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,330px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--hxl);padding:2.4rem var(--hxl) 1.6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hx-track::-webkit-scrollbar{display:none}
.hx-card{scroll-snap-align:start;background:#fff;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;height:440px;box-shadow:0 2px 12px rgba(0,0,0,.05);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.hx-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px -18px rgba(0,0,0,.22)}
.hx-card .tx{padding:1.8rem 1.7rem 0}
.hx-card .k{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.hx-card h3{font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1.12;color:var(--ink);margin:.55rem 0 0}
.hx-card h3 .tlink{color:inherit;text-decoration:none}
.hx-card p{font-size:.92rem;line-height:1.5;color:var(--muted);margin:.6rem 0 0}
.hx-vis{flex:1;display:flex;align-items:flex-end;padding:1.7rem}
.hx-ic{width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,#C8352A,#8E1F16);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -10px rgba(176,39,28,.6)}
.hx-ic svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hx-big{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:-.01em;color:var(--ink);line-height:1}
.hx-img{flex:1;min-height:0;margin:1.4rem 0 0 1.7rem;border-radius:14px 0 0 0;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.hx-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 30%}
.js .hx-card{opacity:0;transform:translate3d(60px,0,0);transition:opacity .8s ease,transform 1.1s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.js .hx.show .hx-card{opacity:1;transform:none}
.js .hx.show .hx-card:hover{transform:translateY(-4px) scale(1.01)}
.js .hx.show .hx-card:nth-child(1){transition-delay:0.00s,0.00s,0s}.js .hx.show .hx-card:nth-child(2){transition-delay:0.07s,0.07s,0s}.js .hx.show .hx-card:nth-child(3){transition-delay:0.14s,0.14s,0s}.js .hx.show .hx-card:nth-child(4){transition-delay:0.21s,0.21s,0s}.js .hx.show .hx-card:nth-child(5){transition-delay:0.28s,0.28s,0s}.js .hx.show .hx-card:nth-child(6){transition-delay:0.35s,0.35s,0s}.js .hx.show .hx-card:nth-child(7){transition-delay:0.42s,0.42s,0s}.js .hx.show .hx-card:nth-child(8){transition-delay:0.49s,0.49s,0s}.js .hx.show .hx-card:nth-child(9){transition-delay:0.56s,0.56s,0s}
.hx-steps{gap:18px}
.capsteps .hx-steps div{background:#fff;border:0;border-radius:28px;padding:1.9rem 1.8rem 2rem;box-shadow:0 2px 12px rgba(0,0,0,.05);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.capsteps .hx-steps div:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 24px 44px -20px rgba(0,0,0,.55)}
.capsteps .hx-steps .n{font-family:var(--display);font-size:2rem;line-height:1;color:var(--red)}
.capsteps .hx-steps b{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);margin-top:.8rem}
.capsteps .hx-steps span:not(.n){color:var(--muted)}
@media(max-width:600px){.hx-arrows{display:none}.hx-card{height:400px}}
@media(prefers-reduced-motion:reduce){.js .hx-card{opacity:1!important;transform:none!important}}
.chap{border-bottom:0!important}   /* a heading flows straight into what it introduces */
/* platform rows (2026-10-14) */
.plat{background:#fff;padding:clamp(1rem,3vw,2rem) 0 clamp(4.5rem,9vw,7rem);overflow-x:hidden;overflow-x:clip}
.prow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin:0 auto clamp(4rem,8vw,6.5rem);max-width:1180px}
.prow.flip{grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr)}.prow.flip .ptx{order:2}
.pk{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 .8rem}
.ptx h3{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:0}
.ptx h3 em{font-style:normal;color:var(--red)}
.ptx p:not(.pk){font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.6;color:var(--muted);margin:1rem 0 0;max-width:40ch}
.pmedia{margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -32px rgba(12,10,9,.4),0 0 0 1px rgba(0,0,0,.07)}
.pmedia img{display:block;width:100%;height:auto}
.pmore{max-width:1080px;margin:0 auto}
@media(max-width:860px){.prow,.prow.flip{grid-template-columns:1fr;gap:1.4rem}.prow.flip .ptx{order:0}.ptx p:not(.pk){max-width:none}}
.gs3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.4rem}
.gs3 div{background:#F5F5F7;border-radius:22px;padding:1.7rem 1.6rem}
.gs3 .n{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--red)}
.gs3 b{display:block;margin-top:.5rem;font-size:1.1rem;font-weight:600;color:var(--ink)}
.gs3 span{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.gs-cta{text-align:center;margin-top:2.2rem}
.chap{background:#fff;text-align:center;padding:clamp(3.4rem,6.5vw,4.8rem) 0 clamp(1.8rem,3.5vw,2.6rem);scroll-margin-top:calc(var(--navh,62px) + 40px)}
.chap-k{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 .9rem}
.chap-k i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-size:.8rem;letter-spacing:0}
.chap-h{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0 auto;max-width:20ch}
.chap-sub{font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.55;color:var(--muted);max-width:44ch;margin:1rem auto 0}
.chap-sub b{color:var(--ink);font-weight:600}
/* The reveal: when a chapter comes into view its label, headline (word by word) and sentence rise in, staggered. */
.js .chap .sc,.js .chap-h .w{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.chap-h .w{display:inline-block}
.js .chap.show .sc,.js .chap.show .chap-h .w{opacity:1;transform:none}
.js .chap.show .chap-h .w{transition-delay:calc(.12s + var(--i)*.06s)}
.js .chap.show .chap-sub{transition-delay:calc(.3s + var(--n)*.06s)}
@media(prefers-reduced-motion:reduce){.js .prow .ptx,.js .prow .ptx>*,.js .prow .pmedia{opacity:1!important;transform:none!important;transition:none!important}.js .chap .sc,.js .chap-h .w{opacity:1;transform:none;transition:none}}
@media(max-width:760px){.gs3{grid-template-columns:1fr}}
/* the trail (2026-10-14): a dashed line behind everything, from one [data-trail] element's center to the next,
   curving left and right; dark sections keep their color and simply cover it */
.trail{position:relative;background:#fff}
.trail>section{position:relative;z-index:1}
.trail>section:not(.dark){background:transparent!important}
.trail-svg{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.trail-dash{fill:none;stroke:var(--red);stroke-opacity:.55;stroke-width:2.5;stroke-dasharray:9 11;stroke-linecap:round}

/* the face card (2026-10-14): the tutor's photo as a portal row */
.pface{max-width:430px;justify-self:center;width:100%}
.pface img{aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.pcred{font-size:.88rem!important;color:var(--ink)!important;opacity:.7;margin-top:1.1rem!important}