.cx-crumb{position:relative;z-index:2}
#city-body .lp2-root h1,#city-body .lp2-root h2,#city-body .lp2-root h3{margin-top:0}
#city-body .lp2-root ul,#city-body .lp2-root ol{overflow:visible;margin-bottom:0}
#city-body .lp2-root figure{max-width:none}
@media (min-width:992px){.lp2-root .lp2-v3in{column-gap:88px!important}
.lp2-root .lp2-v3copy{max-width:600px}
}
.lp2-root .lp2-v3btns{grid-template-columns:1fr 1fr!important;gap:12px}
.lp2-root:not(.cx-clean) .lp2-vgrid,.lp2-root:not(.cx-clean) .lp2-wall{visibility:hidden}
.lp2-root .cx-local .lp2-story{margin-bottom:0}
.lp2-root .cx-local .lp2-ticks{margin-top:24px}
.lp2-root .cx-subs{margin-top:32px!important;padding-top:24px;border-top:1px solid #DCEEF9;flex-wrap:wrap;row-gap:10px}
.lp2-root .cx-local .lp2-cs-photo img{object-fit:cover}
.lp2-root a.lp2-chip{text-decoration:none;color:inherit;font-style:normal}
.lp2-root a.lp2-chip:hover{border-color:#00A3FF;color:#0082CC}
.lp2-root .cx-links{justify-content:center;margin-top:48px;flex-wrap:wrap;row-gap:10px}
.lp2-root .lp2-foot{margin-top:40px}
.lp2-root .lp2-v3trust{margin-top:24px!important}
.lp2-root .lp2-v3ask .lp2-v3btns{margin-top:14px}
@media (max-width:991px){.lp2-root .lp2-close .lp2-r{margin-top:28px}
.lp2-root .lp2-v3subm{margin-bottom:24px}
}

/* ---------- v7 base polish ---------- */
.lp2-root{-webkit-tap-highlight-color:transparent}
.lp2-root .lp2-btn,.lp2-root .lp2-v3b,.lp2-root .lp2-seg,.lp2-root a.lp2-chip{transition:transform .18s ease,box-shadow .2s ease,background-color .2s,border-color .2s,color .2s}
.lp2-root .lp2-btn:active,.lp2-root .lp2-v3b:active,.lp2-root .lp2-seg:active,.lp2-root a.lp2-chip:active{transform:scale(.97)}
@media (max-width:720px){.lp2-root h1.lp2-v3h1{font-size:min(28.7px,6.8vw)!important}}
.lp2-root .cx-reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.lp2-root .cx-reveal.cx-pre{opacity:0;transform:translateY(24px)}

/* ---------- hero city film ---------- */
.lp2-root .cx-film{position:absolute;z-index:1;left:26px;top:0;width:400px;height:500px;border-radius:26px;overflow:hidden;background:#17394D;box-shadow:0 30px 60px rgba(14,38,53,.22);isolation:isolate}
.lp2-root .lp2-v3media.cx-filmbox{height:520px!important}
.lp2-root .lp2-v3media.cx-filmbox::before{height:470px}
/* only the incoming ("on") and outgoing ("was") scenes are painted; the rest are hidden so they hold no GPU layers */
.lp2-root .cx-sc{position:absolute;inset:0;margin:0!important;opacity:0;visibility:hidden;z-index:0;transition:none}
.lp2-root .cx-sc.was{opacity:1;visibility:visible;z-index:1;transition:none}
.lp2-root .cx-sc.on{opacity:1;visibility:visible;z-index:2;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.lp2-root .cx-sc picture,.lp2-root .cx-sc img{display:block;width:100%;height:100%}
.lp2-root .cx-sc img{object-fit:cover;object-position:var(--pos,50% 45%);transform:scale(1.1) translate(var(--px,0),var(--py,0))}
.lp2-root .cx-sc.on img,.lp2-root .cx-sc.was img{will-change:transform;animation:cxPan calc(var(--cx-dur,4200ms) + 1600ms) linear forwards}
@keyframes cxPan{from{transform:scale(1.12) translate(var(--px,0),var(--py,0))}to{transform:scale(1.02) translate(0,0)}}
.lp2-root .cx-sc::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,30,45,.28) 0%,rgba(10,30,45,0) 26%,rgba(10,30,45,0) 58%,rgba(10,30,45,.55) 100%)}
.lp2-root .cx-ftag{position:absolute;z-index:6;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 20px -10px rgba(14,38,53,.5);font-family:Outfit,sans-serif;color:#17394D;line-height:1}
.lp2-root .cx-ftag svg{width:16px;height:16px;flex:none}
.lp2-root .cx-ftag b{font-weight:700;font-size:13.5px}
.lp2-root .cx-ftag small{font-weight:500;font-size:11px;color:#5b7383;letter-spacing:.02em;padding-left:8px;border-left:1px solid #D6E6F0}
.lp2-root .cx-segs{position:absolute;z-index:6;left:16px;right:16px;bottom:14px;display:flex;gap:5px}
.lp2-root .cx-seg{all:unset;flex:1;height:14px;cursor:pointer;display:flex;align-items:center}
.lp2-root .cx-seg i{display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.38);overflow:hidden}
.lp2-root .cx-seg i::after{content:"";display:block;height:100%;width:0;background:#fff;border-radius:3px}
.lp2-root .cx-seg.done i::after{width:100%}
.lp2-root .cx-seg.on i::after{animation:cxSeg var(--cx-dur,4200ms) linear forwards}
.lp2-root .cx-film.cx-paused .cx-seg.on i::after{animation-play-state:paused}
.lp2-root .cx-film.cx-static .cx-seg.on i::after{animation:none;width:100%}
@keyframes cxSeg{to{width:100%}}
.lp2-root .cx-seg:focus-visible i{outline:2px solid #fff;outline-offset:3px}
/* lesson card (tutoring scenes) */
.lp2-root .cx-card{position:absolute;z-index:4;left:16px;bottom:40px;max-width:78%;padding:14px 18px 15px;border-radius:18px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 36px -16px rgba(14,38,53,.55);color:#17394D;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s ease .35s,transform .6s cubic-bezier(.2,.7,.2,1) .35s}
.lp2-root .cx-sc.on .cx-card{opacity:1;transform:none}
.lp2-root .cx-card em{display:block;font-style:normal;font-family:Outfit,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#0082CC;margin-bottom:6px}
.lp2-root .cx-card b{display:block;font-family:Satoshi,sans-serif;font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-.01em}
.lp2-root .cx-card span{position:relative;display:inline-block;margin-top:4px;font-family:Satoshi,sans-serif;font-weight:700;font-size:17px;color:#0E5F8F;clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.6,0,.3,1) 1.1s}
.lp2-root .cx-card span::after{content:"";position:absolute;left:-2px;right:-2px;bottom:1px;height:8px;border-radius:4px;background:rgba(43,210,170,.35);z-index:-1}
.lp2-root .cx-sc.on .cx-card span{clip-path:inset(0 0 0 0)}
/* city scenes: drawn route, pin, place caption */
.lp2-root .cx-place{position:absolute;z-index:4;left:16px;bottom:40px;display:flex;flex-direction:column;gap:2px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);transition:opacity .5s ease .5s,transform .6s ease .5s}
.lp2-root .cx-sc.on .cx-place{opacity:1;transform:none}
.lp2-root .cx-place em{font-style:normal;font-family:Outfit,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.lp2-root .cx-place b{font-family:Satoshi,sans-serif;font-weight:700;font-size:22px;line-height:1.2}
/* title scene */
.lp2-root .cx-sc-title::after{background:linear-gradient(180deg,rgba(0,103,166,.25) 0%,rgba(10,40,60,.72) 100%)}
.lp2-root .cx-title{position:absolute;z-index:4;left:24px;right:24px;bottom:48px;color:#fff}
.lp2-root .cx-title em{display:block;font-style:normal;font-family:Outfit,sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#BFE6FF;margin-bottom:10px;opacity:0;transition:opacity .5s ease .3s}
.lp2-root .cx-title b{display:block;font-family:Satoshi,sans-serif;font-weight:900;font-size:38px;line-height:1.04;letter-spacing:-.02em}
.lp2-root .cx-title b i{display:block;font-style:normal;opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.lp2-root .cx-title b i:nth-child(1){transition-delay:.45s}.lp2-root .cx-title b i:nth-child(2){transition-delay:.6s;color:#4CC0FF}
.lp2-root .cx-title u{display:block;width:72px;height:4px;margin-top:16px;border-radius:4px;background:#2BD2AA;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.6,0,.3,1) .9s;text-decoration:none}
.lp2-root .cx-sc-title.on .cx-title em,.lp2-root .cx-sc-title.on .cx-title b i{opacity:1;transform:none}
.lp2-root .cx-sc-title.on .cx-title u{transform:scaleX(1)}
@media (max-width:1099px){
 .lp2-root .lp2-v3media.cx-filmbox{height:auto!important}
 .lp2-root .cx-film{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:5/3;border-radius:20px}
}
@media (max-width:720px){
 .lp2-root .cx-film{border-radius:18px;aspect-ratio:16/10}
 .lp2-root .cx-ftag{left:10px;top:10px;padding:5px 10px 5px 7px;gap:6px}
 .lp2-root .cx-ftag b{font-size:12px}.lp2-root .cx-ftag small{display:none}.lp2-root .cx-ftag svg{width:13px;height:13px}
 .lp2-root .cx-segs{left:10px;right:10px;bottom:6px;gap:4px}
 .lp2-root .cx-card{left:10px;bottom:24px;padding:9px 12px 10px;border-radius:13px;max-width:72%}
 .lp2-root .cx-card em{font-size:9.5px;margin-bottom:3px}.lp2-root .cx-card b{font-size:15px}.lp2-root .cx-card span{font-size:13px;margin-top:2px}
 .lp2-root .cx-card span::after{height:6px}
 .lp2-root .cx-place{left:12px;bottom:26px}.lp2-root .cx-place em{font-size:9.5px}.lp2-root .cx-place b{font-size:16px}
 .lp2-root .cx-title{left:14px;right:14px;bottom:28px}.lp2-root .cx-title em{font-size:9.5px;margin-bottom:6px}.lp2-root .cx-title b{font-size:24px}.lp2-root .cx-title u{width:48px;height:3px;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){.lp2-root .cx-sc img{animation:none!important;transform:none}.lp2-root .cx-card,.lp2-root .cx-card span,.lp2-root .cx-place,.lp2-root .cx-title *{transition:none!important}}

/* ---------- year explorer (navy section) ---------- */
.lp2-root .cx-exs .lp2-head{margin-bottom:48px}
.lp2-root .cx-ex{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;text-align:left}
.lp2-root .cx-extabs{display:flex;flex-direction:column;gap:8px}
.lp2-root .cx-ext{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;cursor:pointer;color:#BCD2DF;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.lp2-root .cx-ext:hover{background:rgba(255,255,255,.05);color:#fff}
.lp2-root .cx-ext.on{background:#fff;color:#17394D;box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.lp2-root .cx-ext:focus-visible{outline:2px solid #4CC0FF;outline-offset:2px}
.lp2-root .cx-exic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(76,192,255,.14);color:#4CC0FF}
.lp2-root .cx-ext.on .cx-exic{background:#E6F6FF;color:#0082CC}
.lp2-root .cx-exic .lp2-svg{width:20px;height:20px}
.lp2-root .cx-ext b{font-family:Satoshi,sans-serif;font-weight:700;font-size:16px;line-height:1.25}
.lp2-root .cx-exp{border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.lp2-root .cx-exp.in>*{animation:cxIn .45s cubic-bezier(.2,.7,.2,1) both}.lp2-root .cx-exp.in>*:nth-child(2){animation-delay:.08s}
@keyframes cxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lp2-root .cx-exp h3{color:#fff;font-size:26px;line-height:1.2;margin:0 0 12px}
.lp2-root .cx-exnow{color:#D3E3EC;font-size:17px;line-height:1.6;margin:0 0 20px}
.lp2-root .cx-extop{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.lp2-root .cx-extop li{padding:7px 13px;border-radius:999px;background:rgba(76,192,255,.12);color:#CDEBFF;font-family:Outfit,sans-serif;font-weight:600;font-size:13.5px}
.lp2-root .cx-extutor{display:flex;gap:12px;align-items:flex-start;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#BCD2DF;font-size:15px;line-height:1.55;margin:0}
.lp2-root .cx-extutor i{flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:#2BD2AA;box-shadow:0 0 0 4px rgba(43,210,170,.18)}
.lp2-root .cx-excard{background:#fff;color:#17394D;border-radius:22px;padding:24px 24px 22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.lp2-root .cx-excard em{display:inline-block;font-style:normal;font-family:Outfit,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#0082CC;background:#E6F6FF;border-radius:999px;padding:5px 10px;margin-bottom:14px}
.lp2-root .cx-exq{font-family:Satoshi,sans-serif;font-weight:700;font-size:19px;line-height:1.4;margin:0 0 14px}
.lp2-root .cx-exsteps{list-style:none;margin:0 0 14px;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:8px}
.lp2-root .cx-exsteps li{counter-increment:s;display:flex;gap:10px;font-size:15.5px;line-height:1.5;color:#3d5160}
.lp2-root .cx-exsteps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#F0FAFF;color:#0082CC;font-family:Outfit,sans-serif;font-weight:700;font-size:12px;margin-top:1px}
.lp2-root .cx-exa{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#EAFBF6;color:#0D6B55;font-family:Satoshi,sans-serif;font-weight:700;font-size:16px}
.lp2-root .cx-exa::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:#2BD2AA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.lp2-root .cx-extask{color:#4a5d6e;font-size:15px;line-height:1.55;margin:0 0 12px}
.lp2-root .cx-exsample{position:relative;margin:0 0 14px;padding:14px 16px 14px 20px;border-radius:14px;background:#F6FBFE;font-family:Satoshi,sans-serif;font-weight:500;font-size:17px;line-height:1.55;color:#17394D}
.lp2-root .cx-exsample::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:4px;background:#00A3FF}
.lp2-root .cx-exwhy{display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:#3d5160;margin:0}
.lp2-root .cx-exwhy b{color:#0D6B55;font-family:Outfit,sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase;flex:none;margin-top:2px}
@media (max-width:991px){
 .lp2-root .cx-ex{grid-template-columns:minmax(0,1fr);gap:20px}
 .lp2-root .cx-extabs{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:4px 16px 8px;scroll-padding:0 16px;min-width:0;max-width:calc(100% + 32px)}
 .lp2-root .cx-extabs::-webkit-scrollbar{display:none}
 .lp2-root .cx-ext{flex:none;scroll-snap-align:start;padding:10px 14px 10px 10px;gap:10px;border-color:rgba(255,255,255,.14)}
 .lp2-root .cx-exic{width:30px;height:30px;border-radius:9px}.lp2-root .cx-exic .lp2-svg{width:16px;height:16px}
 .lp2-root .cx-ext b{font-size:14.5px;white-space:nowrap}
 .lp2-root .cx-exp{grid-template-columns:1fr;padding:24px 20px;gap:24px;border-radius:24px}
}
@media (max-width:560px){.lp2-root .cx-exp h3{font-size:22px}.lp2-root .cx-exnow{font-size:16px}.lp2-root .cx-excard{padding:20px 18px}.lp2-root .cx-exq{font-size:17px}}

/* ---------- parent's handbook (guide + FAQ) ---------- */
.lp2-root .cx-hb{background:#fff}
.lp2-root .cx-hbgrid{display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:80px}
.lp2-root .cx-hbhead{grid-column:1;grid-row:1}
.lp2-root .cx-hbnav{grid-column:1;grid-row:2;align-self:start;position:sticky;top:calc(var(--cx-hdr,72px) + 28px)}
.lp2-root .cx-hbbody{grid-column:2;grid-row:1 / span 2;min-width:0}
.lp2-root .cx-hbhead h2{margin:16px 0 14px}
.lp2-root .cx-hbhead>p{color:#4a5d6e;font-size:17px;line-height:1.6;margin:0 0 24px}
.lp2-root .cx-hbstat{background:linear-gradient(135deg,#F0FAFF,#E4F4FF);border:1px solid #D6EEFC;border-radius:20px;padding:20px 22px;margin:0 0 28px;display:flex;flex-direction:column;gap:6px}
.lp2-root .cx-hbstat b{font-family:Satoshi,sans-serif;font-weight:900;font-size:40px;line-height:1;color:#00A3FF;letter-spacing:-.02em}
.lp2-root .cx-hbstat span{font-weight:600;color:#17394D;line-height:1.45;font-size:15px}
.lp2-root .cx-hbstat small{color:#5b6b78;font-size:12.5px}.lp2-root .cx-hbstat a{color:inherit}
.lp2-root .cx-hbnav ol{list-style:none;margin:0 0 28px;padding:0;border-left:2px solid #E3EEF5}
.lp2-root .cx-hbnav li{margin:0}
.lp2-root .cx-hbnav ol a{display:flex;gap:12px;padding:10px 0 10px 18px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:#6c8394;font-family:Outfit,sans-serif;font-weight:600;font-size:15px;line-height:1.4;transition:color .2s,border-color .2s}
.lp2-root .cx-hbnav ol a span{color:#9AB0BF;font-size:13px;margin-top:1px;transition:color .2s}
.lp2-root .cx-hbnav ol a:hover{color:#17394D}
.lp2-root .cx-hbnav ol a.on{color:#17394D;border-left-color:#00A3FF}.lp2-root .cx-hbnav ol a.on span{color:#00A3FF}
.lp2-root .cx-ch{padding:0 0 44px;margin:0 0 44px;border-bottom:1px solid #E1F1FB;scroll-margin-top:calc(var(--cx-hdr,72px) + 28px)}
.lp2-root .cx-ch:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.lp2-root .cx-chn{display:inline-block;font-family:Outfit,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#0082CC;margin-bottom:10px}
.lp2-root .cx-ch h3{font-size:28px;line-height:1.22;letter-spacing:-.01em;margin:0 0 16px}
.lp2-root .cx-ch p{color:#3d5160;font-size:17px;line-height:1.75;margin:0 0 16px;max-width:680px}
.lp2-root .cx-ch .lp2-ticks{margin-top:8px}.lp2-root .cx-ch .lp2-ticks li{font-size:16px}
.lp2-root .cx-ch .lp2-faq{margin-top:8px}
.lp2-root .cx-ch .lp2-faq summary{font-size:18px;padding:20px 0}
.lp2-root .cx-ch .lp2-a p{font-size:16.5px}
@media (max-width:991px){
 .lp2-root .cx-hbgrid{display:block}
 .lp2-root .cx-hbnav{position:sticky;top:var(--cx-hdr,64px);z-index:5;margin:0 -16px 32px;padding:10px 0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 #E3EEF5}
 .lp2-root .cx-hbnav ol{display:flex;gap:8px;margin:0;border:0;overflow-x:auto;scrollbar-width:none;padding:0 16px;scroll-padding:0 16px}
 .lp2-root .cx-hbnav ol::-webkit-scrollbar{display:none}
 .lp2-root .cx-hbnav li{flex:none}
 .lp2-root .cx-hbnav ol a{margin:0;padding:8px 14px;border:1px solid #D6E6F0;border-radius:999px;white-space:nowrap;font-size:14px;gap:8px;background:#fff}
 .lp2-root .cx-hbnav ol a.on{background:#17394D;border-color:#17394D;color:#fff}.lp2-root .cx-hbnav ol a.on span{color:#4CC0FF}
 .lp2-root .cx-hbnav .lp2-btn{display:none}
 .lp2-root .cx-ch{scroll-margin-top:calc(var(--cx-hdr,64px) + 72px)}
}
@media (max-width:560px){.lp2-root .cx-ch h3{font-size:23px}.lp2-root .cx-ch p{font-size:16px;line-height:1.7}.lp2-root .cx-hbstat b{font-size:34px}.lp2-root .cx-ch{padding-bottom:36px;margin-bottom:36px}}

/* ---------- phone CTA bar ---------- */
.cx-mbar{display:none}
@media (max-width:720px){
 .cx-mbar{display:flex;position:fixed;z-index:900;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:18px;background:rgba(23,57,77,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 16px 40px -12px rgba(14,38,53,.6);transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1);font-family:Outfit,sans-serif}
 .cx-mbar.on{transform:none}
 .cx-mbar span{flex:1;min-width:0;color:#fff;font-weight:600;font-size:14px;line-height:1.25}
 .cx-mbar span small{display:block;color:#9FC6DC;font-weight:500;font-size:12px}
 .cx-mbar a{flex:none;padding:12px 16px;border-radius:12px;background:#00A3FF;color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
 .cx-mbar a:active{transform:scale(.97)}
}
/* outgoing scene: its photo holds while the next one fades in over it; its words leave first (.3s), before the next scene's words arrive, so text never double-exposes */
.lp2-root .cx-sc-title.was .cx-title em,.lp2-root .cx-sc-title.was .cx-title b i{opacity:1;transform:none;transition:none}
.lp2-root .cx-sc.was .cx-card span{clip-path:inset(0 0 0 0);transition:none}
.lp2-root .cx-sc-title.was .cx-title u{transform:scaleX(1);transition:none}
@media (max-width:991px){#city-body .lp2-root .cx-hbnav ol{overflow-x:auto;overflow-y:hidden}}
.lp2-root .cx-exp[hidden]{display:none!important}
.lp2-root .cx-hbhead h2{font-size:clamp(28px,2.6vw,38px);line-height:1.12}
.lp2-root .cx-hbnav .lp2-btn{width:100%;justify-content:center}
/* the site wrapper's overflow:hidden breaks position:sticky; clip keeps the same clipping without a scroll container */
@supports (overflow:clip){.page-wrapper:has(.lp2-root){overflow:clip}}
/* interviews: a single row of cards; lp2 sizes the grid for two stacked cards, so let it fit the row */
.lp2-root .lp2-vgrid{height:auto!important;align-items:stretch}
.lp2-root .lp2-vgrid .lp2-vcol{display:flex}
.lp2-root .lp2-vgrid .lp2-vcard{flex:1}
.lp2-root .lp2-s4 .lp2-center{margin-bottom:40px}

/* hero + ratings ticker fit the first screen: lp2 assumes a 76px header, these pages add the breadcrumb bar under it */
@media (min-width:1100px){.lp2-root .lp2-v3hero{min-height:calc(100svh - var(--cx-hdr,72px) - 32px - var(--lp2-mrq))}}

/* suburb chips end with a quiet "and more" so the list reads as examples, not the full coverage */
.lp2-root .cx-subs .cx-more{background:none;border-color:transparent;color:var(--muted,#5B7282);font-style:normal;font-weight:500}

/* hero film: no route line or pulsing pin on the photos (Joey 28 Oct) */
/* shorter laptop screens: shrink the photo card so the hero and ticker still fit the first screen */
@media (min-width:1100px) and (max-height:880px){.lp2-root .lp2-v3hero{padding:24px 0}.lp2-root .lp2-v3media{zoom:.9}}
@media (min-width:1100px) and (max-height:820px){.lp2-root .lp2-v3media{zoom:.82}}
@media (min-width:1100px) and (max-height:760px){.lp2-root .lp2-v3media{zoom:.74}}

/* hero film: outgoing words (lesson card, place label, title) ease out in .3s instead of blinking off or ghosting over the next photo */
.lp2-root .cx-sc.was .cx-card,.lp2-root .cx-sc.was .cx-place,.lp2-root .cx-sc-title.was .cx-title{opacity:0!important;transform:none;transition:opacity .3s ease!important}
/* phone bar: one line, never an orphan word */
@media (max-width:991px){.cx-mbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cx-mbar span small{overflow:hidden;text-overflow:ellipsis}}
@media (max-width:380px){.cx-mbar span{font-size:13px}.cx-mbar a{padding:11px 13px;font-size:14px}}
/* comparison table on phones: the row labels stay pinned while the columns scroll */
@media (max-width:991px){
 .lp2-root .lp2-s7 table td:first-child,.lp2-root .lp2-s7 table th:first-child{position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 var(--line-2,#E2EEF5)}
 .lp2-root .lp2-s7 table td:first-child{min-width:132px;max-width:150px;white-space:normal}
}

/* r24 hero film guard: Webflow rich text (.w-richtext figure{max-width:60%}) must never shrink the scene figures */
.lp2-root .cx-film .cx-sc,#city-body .cx-film .cx-sc,#city-body .cx-film figure,#city-body figure.cx-sc,.w-richtext .lp2-root .cx-film figure.cx-sc{max-width:none!important;width:100%!important;height:100%;margin:0!important;padding:0}
.lp2-root .cx-film .cx-sc picture,.lp2-root .cx-film .cx-sc img,#city-body .cx-film .cx-sc picture,#city-body .cx-film .cx-sc img,#city-body figure.cx-sc picture,#city-body figure.cx-sc img{max-width:none!important;width:100%!important;height:100%!important}
/* r24 interviews: the wrap's 48px grid gap plus a 40px margin left ~90px of dead space above the cards */
.lp2-root .lp2-s4 .lp2-center{margin-bottom:0}
.lp2-root .lp2-s4>.lp2-wrap{row-gap:36px}
@media (max-width:767px){.lp2-root .lp2-s4>.lp2-wrap{row-gap:24px}}
/* hero, phone: tighter subtext and trust row (Joey 29 Oct) */
@media (max-width:767px){.lp2-root .lp2-v3copy{gap:12px}.lp2-root .lp2-v3subm{margin-bottom:4px}.lp2-root .lp2-v3trust{margin-top:12px!important}.lp2-root .lp2-v3in{gap:16px}}
/* "Families in": left aligned, label above, lighter chips */
.lp2-root .cx-subs{display:flex!important;flex-wrap:wrap;justify-content:flex-start!important;align-items:center;gap:8px!important;text-align:left}
.lp2-root .cx-subs .lp2-lbl{flex-basis:100%;margin:0 0 4px!important;text-align:left;font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7d93a3}
.lp2-root .cx-subs .lp2-chip{margin:0!important;padding:8px 14px!important;border:1px solid #DCEBF5!important;border-radius:999px;background:#F5FBFF!important;font-family:var(--ui);font-weight:600;font-size:14px!important;line-height:1.2;color:#17394D;box-shadow:none!important}
.lp2-root .cx-subs a.lp2-chip:hover{background:#fff!important;border-color:#00A3FF!important;color:#0082CC}
.lp2-root .cx-subs .cx-more{background:none!important;border-color:transparent!important;padding-left:4px!important;color:#7d93a3;font-weight:500}
/* local section: tilted photo wall, two columns drifting in opposite directions (29 Oct, replaces the crossfade reel) */
.lp2-root .cx-mosaic{position:relative;overflow:hidden;isolation:isolate;background:#0E2635;aspect-ratio:4/5;border-radius:28px}
.lp2-root .cx-mwall{position:absolute;left:50%;top:50%;width:128%;height:150%;display:grid;grid-template-columns:1fr 1fr;gap:14px;transform:translate(-50%,-50%) rotate(-7deg)}
.lp2-root .cx-mcol{position:relative;overflow:visible;min-width:0}
.lp2-root .cx-mtrack{display:flex;flex-direction:column;gap:14px;animation:cx-mup 46s linear infinite;will-change:transform}
.lp2-root .cx-mcol-b .cx-mtrack{animation-name:cx-mdown;animation-duration:52s}
.lp2-root .cx-mosaic:hover .cx-mtrack{animation-play-state:paused}
@keyframes cx-mup{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
@keyframes cx-mdown{from{transform:translateY(calc(-50% - 7px))}to{transform:translateY(0)}}
.lp2-root .cx-mt{position:relative;margin:0;max-width:none;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#17394D;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.lp2-root .cx-mt img{display:block;width:100%;height:100%;object-fit:cover}
.lp2-root .cx-mt figcaption{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:5px;max-width:calc(100% - 20px);padding:6px 10px 6px 7px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#17394D;font-family:var(--ui);font-weight:600;font-size:12.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp2-root .cx-mt figcaption svg{flex:none;width:13px;height:13px}
.lp2-root .cx-mosaic::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,38,53,.45) 0%,rgba(14,38,53,0) 18%,rgba(14,38,53,0) 78%,rgba(14,38,53,.55) 100%)}
.lp2-root .cx-mosaic .lp2-pill{z-index:2}
@media (max-width:767px){.lp2-root .cx-mosaic{aspect-ratio:1/1;border-radius:22px}.lp2-root .cx-mwall{width:140%;gap:10px}.lp2-root .cx-mtrack{gap:10px}.lp2-root .cx-mt{border-radius:14px}.lp2-root .cx-mt figcaption{font-size:11px;left:8px;bottom:8px}
 @keyframes cx-mup{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 5px))}}@keyframes cx-mdown{from{transform:translateY(calc(-50% - 5px))}to{transform:translateY(0)}}}
@media (prefers-reduced-motion:reduce){.lp2-root .cx-mtrack{animation:none}}
/* mosaic v2: three columns, smaller tiles, light wall */
.lp2-root .cx-mosaic{background:#E6F4FD}
.lp2-root .cx-mwall{width:118%;height:160%;grid-template-columns:repeat(3,1fr);gap:12px;transform:translate(-50%,-50%) rotate(-6deg)}
.lp2-root .cx-mtrack{gap:12px}
.lp2-root .cx-mcol-b .cx-mtrack{animation-name:cx-mdown;animation-duration:58s}
.lp2-root .cx-mcol-c .cx-mtrack{animation-duration:50s}
.lp2-root .cx-mt{border-radius:16px;box-shadow:0 18px 34px -22px rgba(14,38,53,.55)}
.lp2-root .cx-mt figcaption{left:50%;right:auto;transform:translateX(-50%);bottom:9px;font-size:11.5px;padding:5px 9px 5px 6px}
.lp2-root .cx-mosaic::after{background:linear-gradient(180deg,rgba(230,244,253,.9) 0%,rgba(230,244,253,0) 14%,rgba(230,244,253,0) 80%,rgba(230,244,253,.9) 100%)}
@keyframes cx-mup{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 6px))}}
@keyframes cx-mdown{from{transform:translateY(calc(-50% - 6px))}to{transform:translateY(0)}}
@media (max-width:767px){.lp2-root .cx-mosaic{aspect-ratio:4/5}.lp2-root .cx-mwall{width:122%;gap:8px}.lp2-root .cx-mtrack{gap:8px}.lp2-root .cx-mt{border-radius:12px}.lp2-root .cx-mt figcaption{font-size:10px;bottom:6px;padding:4px 7px 4px 5px}.lp2-root .cx-mt figcaption svg{width:10px;height:10px}
 @keyframes cx-mup{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 4px))}}@keyframes cx-mdown{from{transform:translateY(calc(-50% - 4px))}to{transform:translateY(0)}}}
.lp2-root .cx-mwall{width:104%;transform:translate(-50%,-50%) rotate(-5deg)}
@media (max-width:767px){.lp2-root .cx-mwall{width:106%}}
.lp2-root .cx-mwall{width:100%}
.lp2-root .cx-mt figcaption{max-width:calc(100% - 14px)}
@media (prefers-reduced-motion:reduce){.lp2-root .cx-mosaic .cx-mtrack{animation:none!important}}
/* r33 photo wall: pale tiles until each photo arrives; no drift while off screen */
.lp2-root .cx-mt{background:#D6EBF8}
.lp2-root .cx-mt img:not([src]){visibility:hidden}
.lp2-root .cx-mosaic.cx-moff .cx-mtrack{animation-play-state:paused}
/* r33b: hero words never below 10.5px; the first scene's words wait for its photo */
@media (max-width:991px){.lp2-root .cx-card em,.lp2-root .cx-place em,.lp2-root .cx-title em{font-size:10.5px}}
.lp2-root .cx-film:not(.cx-ready) .cx-card,.lp2-root .cx-film:not(.cx-ready) .cx-place,.lp2-root .cx-film:not(.cx-ready) .cx-title{opacity:0!important;transition:none!important}
/* r33b photo wall: calm pale tiles, each photo fades in when it arrives, its label only after */
.lp2-root .cx-mt{background:linear-gradient(160deg,#E4F3FC,#D3E9F7)}
.lp2-root .cx-mt img{opacity:0;transition:opacity .6s ease}
.lp2-root .cx-mt.in img{opacity:1}
.lp2-root .cx-mt figcaption{opacity:0;transition:opacity .4s ease .2s}
.lp2-root .cx-mt.in figcaption{opacity:1}
@media (prefers-reduced-motion:reduce){.lp2-root .cx-mt img,.lp2-root .cx-mt figcaption{transition:none}}
/* r35: longer H1 lines (e.g. "Chemistry tutors in Newcastle") step down on phones so each line still fits */
.lp2-root h1.lp2-v3h1.cx-h1l{--cx-h1max:52px;font-size:min(var(--cx-h1max),calc(100cqi / (var(--cx-h1c) * .5)))!important}
@media (max-width:1099px){.lp2-root h1.lp2-v3h1.cx-h1l{--cx-h1max:32px}}
@media (max-width:720px){.lp2-root h1.lp2-v3h1.cx-h1l{--cx-h1max:28.7px}}
/* r38 hero film, phones and tablets: each photo has its own face-safe framing; the card can sit bottom right; a compact card on phones */
@media (max-width:1099px){
 .lp2-root .cx-sc img{object-position:var(--posm,var(--pos,50% 45%))}
 .lp2-root .cx-sc.cx-sc-cr .cx-card{left:auto;right:16px;max-width:46%}
}
@media (max-width:720px){
 .lp2-root .cx-card{bottom:20px;padding:7px 11px 8px;max-width:64%}
 .lp2-root .cx-card span{display:none}
 .lp2-root .cx-sc.cx-sc-cr .cx-card{left:10px;right:auto;max-width:64%}
 .lp2-root .cx-sc.on img,.lp2-root .cx-sc.was img{animation-name:cxPanS}
}
@keyframes cxPanS{from{transform:scale(1.04)}to{transform:scale(1)}}
/* r38 phones: a slightly taller frame and the place tag top right, so every face (all left of centre) stays clear */
@media (max-width:720px){
 .lp2-root .cx-film{aspect-ratio:3/2}
 .lp2-root .cx-ftag{left:auto;right:10px}
}
/* r40: reserve the space under the template's absolutely positioned breadcrumb before any script runs, so the hero never
   jumps down on load (the inline fit script, now placed right after the hero, only fine-tunes it) */
.cx-crumb.for-new-header~.lp2-root .lp2-v3{padding-top:106px}
@media (max-width:991px){.cx-crumb.for-new-header~.lp2-root .lp2-v3{padding-top:98px}}
@media (max-width:479px){.cx-crumb.for-new-header~.lp2-root .lp2-v3{padding-top:88px}}
/* r41: comparison table scroll cue (phones) and stronger "As seen in" logos */
.lp2-root .lp2-s7 .lp2-tbl-wrap.cx-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),rgba(0,0,0,.25));mask-image:linear-gradient(90deg,#000 calc(100% - 56px),rgba(0,0,0,.25))}
.lp2-root .cx-tblcue{display:flex;align-items:center;justify-content:flex-end;gap:6px;height:0;margin:0;overflow:hidden;font:600 13px/1 var(--ui,sans-serif);color:#5E7687;opacity:0;transition:opacity .3s,height .3s,margin .3s}
.lp2-root .cx-tblcue{justify-content:center}
.lp2-root .cx-tblcue.cx-on{height:18px;margin:14px 0 0;opacity:1}
.lp2-root .cx-tblcue svg{width:16px;height:16px;color:#00A3FF}
.lp2-root .lp2-press-logo{opacity:.95;filter:grayscale(1) contrast(1.15)}
/* r41: the breadcrumb's top matches the settled header per breakpoint from the first paint; the fit script (build2) now runs only
   once fonts and the page have loaded, and only moves things by 3px or more, so nothing jumps while the header's fonts swap in */
.cx-crumb.for-new-header{top:72px}
@media (max-width:991px){.cx-crumb.for-new-header{top:56px}}
@media (max-width:479px){.cx-crumb.for-new-header{top:52px}}

/* v42 (Joey): city-subject pages only (.cx-local-mid is added by build2.py, not by the lpx generator). On phones the city
   photo card sits between the paragraph and the tick list. Desktop unchanged. */
@media (max-width:767px){
 .lp2-root .cx-local-mid .lp2-cs{display:flex;flex-direction:column;align-items:stretch;gap:20px}
 .lp2-root .cx-local-mid .lp2-cs>.lp2-copy{display:contents}
 .lp2-root .cx-local-mid .lp2-kick{order:1}.lp2-root .cx-local-mid .lp2-copy>h2{order:2}.lp2-root .cx-local-mid .lp2-story{order:3}
 .lp2-root .cx-local-mid .lp2-cs>.cx-mosaic{order:4;margin:4px 0}
 .lp2-root .cx-local-mid .lp2-ticks{order:5;margin-top:4px}.lp2-root .cx-local-mid .cx-subs{order:6}
}

/* ---------- year by year v7 (r42, Joey 29 Oct: "symbiotic with the other sections")
   Same language as the parent's handbook beside it: dash eyebrow, navy Satoshi heading with one blue phrase,
   body-size lede, the standard CTA on the right; a quiet underline tab row; one white card (20px radius, #DCEBF5 line)
   with each year as a soft sky tile. Every band and year stays in the DOM. */
.lp2-root .cx-ex5{--x5-navy:#17394D;--x5-body:#3B4F5E;--x5-mute:rgba(23,57,77,.66);--x5-line:#DCEBF5;--x5-hair:#E6EEF3;--x5-blue:#00A3FF;--x5-blue-d:#0077BB;--x5-sky:#F0FAFF;--x5-tile:#F5FBFF;
  --x5-out:cubic-bezier(.22,1,.36,1);
  --x5-display:"lp2 Satoshi","Satoshi",system-ui,sans-serif;--x5-body-f:"lp2 Hanken","Hanken Grotesk",system-ui,sans-serif;--x5-ui:"lp2 Outfit","Outfit",system-ui,sans-serif}
.lp2-root .cx-ex5.lp2-s3{position:relative;padding-block:96px;border-block:0;color:var(--x5-navy);background:var(--x5-sky)}
.lp2-root .cx-ex5.lp2-s3 .lp2-wrap{display:block}
.lp2-root .cx-ex5 *,.lp2-root .cx-ex5 *::before,.lp2-root .cx-ex5 *::after{box-sizing:border-box}
#city-body .lp2-root .cx-ex5 p,.lp2-root .cx-ex5 p{margin:0}

/* head: exactly the handbook's head */
.lp2-root .cx-ex5 .cx5-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin:0 0 40px}
.lp2-root .cx-ex5 .cx5-head>div{min-width:0;max-width:680px}
.lp2-root .cx-ex5 .cx5-head .lp2-btn{flex:none}
.lp2-root .cx-ex5 .cx5-eye{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-family:var(--x5-ui);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--x5-blue-d)}
.lp2-root .cx-ex5 .cx5-eye::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--x5-blue)}
#city-body .lp2-root .cx-ex5 h2,.lp2-root .cx-ex5 h2{max-width:none;margin:0 0 16px;font-family:var(--x5-display);font-weight:900;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.028em;color:var(--x5-navy);text-align:left;text-wrap:balance}
.lp2-root .cx-ex5 .cx-x2l1{display:inline}
.lp2-root .cx-ex5 .cx-x2g{display:inline;color:var(--x5-blue);background:none;-webkit-text-fill-color:currentColor;padding:0;margin:0}
#city-body .lp2-root .cx-ex5 .cx5-lede,.lp2-root .cx-ex5 .cx5-lede{margin:0;font-family:var(--x5-body-f);font-size:17px;line-height:1.6;color:var(--x5-body);max-width:36em;text-wrap:pretty}

/* tabs: plain words on one hairline, a blue underline under the open band */
.lp2-root .cx-ex5 .cx5{display:flex;flex-direction:column;gap:24px}
.lp2-root .cx-ex5 .cx5-tabs{position:relative;display:flex;gap:32px;padding:0;border-radius:0;background:none;box-shadow:inset 0 -1px 0 var(--x5-line);overflow-x:auto;scrollbar-width:none}
.lp2-root .cx-ex5 .cx5-tabs::-webkit-scrollbar{display:none}
/* more tabs waiting off the right edge: a soft fade says so */
.lp2-root .cx-ex5 .cx5-tabs:not(.is-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.lp2-root .cx-ex5 .cx5-tab{-webkit-appearance:none;appearance:none;position:relative;flex:none;display:flex;align-items:center;margin:0;padding:0 0 14px;border:0;border-radius:0;
  background:none;color:var(--x5-mute);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
.lp2-root .cx-ex5 .cx5-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--x5-blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--x5-out)}
.lp2-root .cx-ex5 .cx5-tab:focus-visible{outline:2px solid var(--x5-blue);outline-offset:4px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.lp2-root .cx-ex5 .cx5-tab:hover{color:var(--x5-navy)}}
.lp2-root .cx-ex5 .cx5-tab[aria-selected="true"]{color:var(--x5-navy)}
.lp2-root .cx-ex5 .cx5-tab[aria-selected="true"]::after{transform:none}
.lp2-root .cx-ex5 .cx5-ic{display:none}
.lp2-root .cx-ex5 .cx5-tn{font-family:var(--x5-ui);font-weight:600;font-size:16px;line-height:1.2;white-space:nowrap}

/* panels share one grid cell, so the tallest band sets the height and nothing below moves (only once JS runs: without it every band shows, stacked) */
.lp2-root .cx-ex5 .cx5-panels{display:grid;gap:16px;min-width:0}
.lp2-root .cx-ex5 .cx5-panel{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--x5-line);border-radius:20px;padding:36px 36px 28px;
  box-shadow:0 1px 2px rgba(23,57,77,.04);outline:none}
html:not(.lp2-on) .lp2-root .cx-ex5 .cx5-tabs{display:none}
.lp2-on .lp2-root .cx-ex5 .cx5-panel{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .3s var(--x5-out),transform .45s var(--x5-out),visibility 0s .3s}
.lp2-on .lp2-root .cx-ex5 .cx5-panel.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .4s var(--x5-out) .05s,transform .55s var(--x5-out) .05s,visibility 0s}
.lp2-root .cx-ex5 .cx5-panel:focus-visible{box-shadow:0 0 0 2px var(--x5-blue)}

/* band title over a short overview, like a handbook chapter */
.lp2-root .cx-ex5 .cx5-top{display:block;max-width:44em;margin:0 0 28px}
#city-body .lp2-root .cx-ex5 .cx5-top h3,.lp2-root .cx-ex5 .cx5-top h3{margin:0 0 10px;font-family:var(--x5-display);font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.018em;color:var(--x5-navy);text-wrap:balance}
#city-body .lp2-root .cx-ex5 .cx5-top p,.lp2-root .cx-ex5 .cx5-top p{font-family:var(--x5-body-f);font-size:16.5px;line-height:1.6;color:var(--x5-body);text-wrap:pretty}

/* what is taught: one soft tile per year level */
.lp2-root .cx-ex5 .cx5-years{display:grid;grid-template-columns:repeat(var(--c,2),minmax(0,1fr));gap:12px;padding:0;border:0}
.lp2-root .cx-ex5 .cx5-yr{min-width:0;background:var(--x5-tile);border:1px solid #E3F1FA;border-radius:16px;padding:20px 20px 22px}
#city-body .lp2-root .cx-ex5 .cx5-yr h4,.lp2-root .cx-ex5 .cx5-yr h4{margin:0 0 12px;font-family:var(--x5-ui);font-weight:600;font-size:13px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--x5-blue-d)}
#city-body .lp2-root .cx-ex5 .cx5-yr ul,.lp2-root .cx-ex5 .cx5-yr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#city-body .lp2-root .cx-ex5 .cx5-yr li,.lp2-root .cx-ex5 .cx5-yr li{position:relative;margin:0;padding:0 0 0 16px;font-family:var(--x5-body-f);font-size:15.5px;line-height:1.4;color:var(--x5-navy)}
.lp2-root .cx-ex5 .cx5-yr li::before{content:"";position:absolute;left:1px;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--x5-blue)}
@media (min-width:992px){
  #city-body .lp2-root .cx-ex5 .cx5-c1 .cx5-yr ul.cx5-many,.lp2-root .cx-ex5 .cx5-c1 .cx5-yr ul.cx5-many,
  #city-body .lp2-root .cx-ex5 .cx5-c2 .cx5-yr ul.cx5-many,.lp2-root .cx-ex5 .cx5-c2 .cx5-yr ul.cx5-many{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:8px}
  #city-body .lp2-root .cx-ex5 .cx5-c1 .cx5-yr ul.cx5-many,.lp2-root .cx-ex5 .cx5-c1 .cx5-yr ul.cx5-many{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* an example and how a tutor helps, side by side under a hairline */
.lp2-root .cx-ex5 .cx5-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:28px;padding-top:28px;border-top:1px solid var(--x5-hair);align-items:start}
.lp2-root .cx-ex5 .cx5-k{display:block;margin:0 0 10px;font-family:var(--x5-ui);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--x5-blue-d)}
.lp2-root .cx-ex5 .cx5-ex{min-width:0;background:none;border-radius:0;padding:0 0 0 20px;border-left:2px solid var(--x5-blue)}
#city-body .lp2-root .cx-ex5 .cx5-q,.lp2-root .cx-ex5 .cx5-q{font-family:var(--x5-display);font-weight:700;font-size:18px;line-height:1.4;color:var(--x5-navy);text-wrap:pretty}
#city-body .lp2-root .cx-ex5 .cx5-a,.lp2-root .cx-ex5 .cx5-a{display:flex;align-items:baseline;gap:10px;margin-top:8px;font-family:var(--x5-body-f);font-size:16px;color:var(--x5-navy)}
.lp2-root .cx-ex5 .cx5-a .cx5-ab{font-family:var(--x5-ui);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--x5-blue-d);background:#E0F4FF;border-radius:999px;padding:3px 10px}
.lp2-root .cx-ex5 .cx5-a b{font-weight:700}
#city-body .lp2-root .cx-ex5 blockquote.cx5-sample,.lp2-root .cx-ex5 blockquote.cx5-sample{margin:0;padding:0;border:0;font-size:inherit}
#city-body .lp2-root .cx-ex5 .cx5-sample p,.lp2-root .cx-ex5 .cx5-sample p{font-family:var(--x5-display);font-weight:700;font-size:17px;line-height:1.5;color:var(--x5-navy);text-wrap:pretty}
.lp2-root .cx-ex5 mark.cx-x2hl{color:inherit;padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 46%,#C2E9FF 46%,#C2E9FF 82%,transparent 82%)}
.lp2-root .cx-ex5 .cx-x2m{font-family:var(--x5-body-f);font-weight:600}
.lp2-root .cx-ex5 .cx5-tutor{min-width:0;padding:0 0 0 20px;border-left:2px solid var(--x5-blue)}
#city-body .lp2-root .cx-ex5 .cx5-tutor p,.lp2-root .cx-ex5 .cx5-tutor p{font-family:var(--x5-body-f);font-size:16px;line-height:1.6;color:var(--x5-body);text-wrap:pretty}
#city-body .lp2-root .cx-ex5 .cx5-src,.lp2-root .cx-ex5 .cx5-src{margin-top:auto;padding-top:24px;font-family:var(--x5-body-f);font-size:13px;line-height:1.4;color:var(--x5-mute)}

/* tablets and phones: tabs scroll as a strip; year tiles swipe sideways */
@media (max-width:991px){
  .lp2-root .cx-ex5 .cx5-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:32px}
  .lp2-root .cx-ex5 .cx5{gap:20px}
  .lp2-root .cx-ex5 .cx5-tabs{gap:26px;margin:0 -16px;padding:0 16px;scroll-padding-inline:16px;box-shadow:none;background:linear-gradient(var(--x5-line),var(--x5-line)) 16px 100%/calc(100% - 32px) 1px no-repeat}
  .lp2-root .cx-ex5 .cx5-panel{padding:28px 24px 22px}
  .lp2-root .cx-ex5 .cx5-top{margin-bottom:22px}
  .lp2-root .cx-ex5 .cx5-years{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
  .lp2-root .cx-ex5 .cx5-yr{padding:18px 18px 20px}
  .lp2-root .cx-ex5 .cx5-foot{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:22px;padding-top:22px}
}
@media (min-width:600px) and (max-width:991px){
  .lp2-root .cx-ex5 .cx5-foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
}
@media (max-width:720px){
  .lp2-root .cx-ex5.lp2-s3{padding-block:80px}
  #city-body .lp2-root .cx-ex5 .cx5-lede,.lp2-root .cx-ex5 .cx5-lede{font-size:16px}
  /* phones already carry the sticky "Get matched" bar, so the section CTA goes to save height */
  .lp2-root .cx-ex5 .cx5-head .lp2-btn{display:none}
}
@media (max-width:640px){
  .lp2-root .cx-ex5 .cx5-tn{font-size:15px}
  .lp2-root .cx-ex5 .cx5-tabs{gap:22px}
  .lp2-root .cx-ex5 .cx5-panel{padding:24px 20px 20px;border-radius:16px}
  .lp2-root .cx-ex5 .cx5-years{grid-template-columns:minmax(0,1fr);gap:8px}
  .lp2-root .cx-ex5 .cx5-yr{padding:16px 18px 18px}
  #city-body .lp2-root .cx-ex5 .cx5-top h3,.lp2-root .cx-ex5 .cx5-top h3{font-size:21px}
  #city-body .lp2-root .cx-ex5 .cx5-top p,.lp2-root .cx-ex5 .cx5-top p{font-size:16px}
  #city-body .lp2-root .cx-ex5 .cx5-yr li,.lp2-root .cx-ex5 .cx5-yr li{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .lp2-on .lp2-root .cx-ex5 .cx5-panel,.lp2-on .lp2-root .cx-ex5 .cx5-panel.is-on{transition:none;transform:none}
  .lp2-root .cx-ex5 .cx5-tab::after{transition:none}
}
/* other page contexts (lpx pages): one shared gap after a review section on the same pale background */
.lp2-root .lp2-s6+.cx-ex5{padding-top:0}
.lp2-root .lp2-s6:has(+.cx-ex5){padding-bottom:72px}
@media (max-width:767px){.lp2-root .lp2-s6:has(+.cx-ex5){padding-bottom:48px}}
.lp2-root .lp2-s6:has(+.cx-ex5) .lp2-foot{display:none}
.lp2-root .lp2-s5+.cx-ex5{padding-top:96px;padding-bottom:96px}
@media (max-width:767px){.lp2-root .lp2-s5+.cx-ex5{padding-top:80px;padding-bottom:80px}}
/* (r42 QA) the handbook just above already ends on the same CTA: the explorer's own button stays off there */
.lp2-root .cx-hb2+.cx-ex5 .cx5-head .lp2-btn{display:none}
/* r43 (Joey: "too tall"): the whole section fits 800px at 1440x900. One-line heading and lede when the CTA sits in the
   handbook above, tighter card, year lists set closer. Nothing is dropped. (Tablets too, from 600px.) */
@media (min-width:600px){
  .lp2-root .cx-hb2+.cx-ex5 .cx5-head>div{max-width:none}
  #city-body .lp2-root .cx-ex5 .cx5-lede,.lp2-root .cx-ex5 .cx5-lede{max-width:none}
  #city-body .lp2-root .cx-ex5 h2,.lp2-root .cx-ex5 h2{margin-bottom:12px}
  .lp2-root .cx-ex5 .cx5-eye{margin-bottom:12px}
  .lp2-root .cx-ex5 .cx5-head{margin-bottom:28px}
  .lp2-root .cx-ex5 .cx5{gap:16px}
  .lp2-root .cx-ex5 .cx5-panel{padding:24px 32px 20px}
  .lp2-root .cx-ex5 .cx5-top{max-width:none;margin-bottom:16px}
  #city-body .lp2-root .cx-ex5 .cx5-top h3,.lp2-root .cx-ex5 .cx5-top h3{font-size:22px;margin-bottom:6px}
  #city-body .lp2-root .cx-ex5 .cx5-top p,.lp2-root .cx-ex5 .cx5-top p{font-size:16px;line-height:1.55}
  .lp2-root .cx-ex5 .cx5-yr{padding:16px 18px 17px}
  #city-body .lp2-root .cx-ex5 .cx5-yr h4,.lp2-root .cx-ex5 .cx5-yr h4{margin-bottom:8px}
  #city-body .lp2-root .cx-ex5 .cx5-yr ul,.lp2-root .cx-ex5 .cx5-yr ul{gap:4px}
  #city-body .lp2-root .cx-ex5 .cx5-yr ul.cx5-many,.lp2-root .cx-ex5 .cx5-yr ul.cx5-many{row-gap:4px}
  #city-body .lp2-root .cx-ex5 .cx5-yr li,.lp2-root .cx-ex5 .cx5-yr li{font-size:15px;line-height:1.35}
  .lp2-root .cx-ex5 .cx5-foot{margin-top:16px;padding-top:16px}
  .lp2-root .cx-ex5 .cx5-k{margin-bottom:6px}
  #city-body .lp2-root .cx-ex5 .cx5-q,.lp2-root .cx-ex5 .cx5-q{font-size:17px}
  #city-body .lp2-root .cx-ex5 .cx5-src,.lp2-root .cx-ex5 .cx5-src{padding-top:12px}
  .lp2-root .cx-hb2+.cx-ex5.lp2-s3{padding-bottom:80px}
}
/* r43 tablets: year tiles in fixed columns (four years as 2x2), and every band shares one grid cell as on desktop, so the
   panel keeps one height when the tab changes. Phones (under 600) show only the open band. */
@media (min-width:600px) and (max-width:991px){
  .lp2-root .cx-ex5 .cx5-years{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp2-root .cx-ex5 .cx5-c1{grid-template-columns:minmax(0,1fr)}
  .lp2-root .cx-ex5 .cx5-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px) and (max-width:991px){.lp2-root .cx-ex5 .cx5-c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:599px){.lp2-on .lp2-root .cx-ex5 .cx5-panel:not(.is-on){display:none}}
/* r43: the overflow chevron sits on the tab bar's right end (added by explorer.js only while tabs overflow) */
.lp2-root .cx-ex5 .cx5{position:relative}
.lp2-root .cx-ex5 .cx5-more{position:absolute;top:-4px;right:0;display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--x5-navy);box-shadow:0 0 0 1px var(--x5-line),0 4px 10px -6px rgba(14,38,53,.35);cursor:pointer}
.lp2-root .cx-ex5 .cx5-more[hidden]{display:none}
.lp2-root .cx-ex5 .cx5-more svg{width:14px;height:14px}
@media (max-width:991px){.lp2-root .cx-ex5 .cx5-more{right:-4px}}
/* r45: below 960 a four-year band runs 2x2 and is much taller than the rest, so from 600 to 959 the panel sizes to the open
   band (no shared height there; desktop and 960+ keep one height) */
@media (min-width:600px) and (max-width:959px){.lp2-on .lp2-root .cx-ex5 .cx5-panel:not(.is-on){display:none}}

/* How tutoring works in {City}: steps stacked on the left, a pinned photo stage on the right that changes with scroll (phones: one picture card per step). */
.lp2-root .cx-how3{background:#fff;padding-block:0!important}
.lp2-root .cx-h3sticky{padding-block:112px}
.lp2-root .cx-h3grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:80px;align-items:center}
#city-body .lp2-root .cx-h3l h2,.lp2-root .cx-h3l h2{margin:0 0 40px}
#city-body .lp2-root .cx-h3steps{list-style:none;margin:0;padding:0;border-top:1px solid #E3EEF5}
.lp2-root .cx-h3st{position:relative;border-bottom:1px solid #E3EEF5}
.lp2-root .cx-h3b{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:18px;padding:22px 0;cursor:pointer}
.lp2-root .cx-h3b:focus-visible{outline:2px solid #00A3FF;outline-offset:4px;border-radius:8px}
.lp2-root .cx-h3n{font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:.06em;color:#9AB0BF;width:28px;transition:color .3s}
.lp2-root .cx-h3t{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.3;color:#7d93a3;transition:color .3s}
.lp2-root .cx-h3st.on .cx-h3n{color:#00A3FF}
.lp2-root .cx-h3st.on .cx-h3t,.lp2-root .cx-h3b:hover .cx-h3t{color:#17394D}
.lp2-root .cx-h3d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.lp2-root .cx-h3d>p{overflow:hidden;margin:0;padding-left:46px;color:#4a5d6e;font-size:17px;line-height:1.5}
.lp2-root .cx-h3st.on .cx-h3d{grid-template-rows:1fr}
.lp2-root .cx-h3st.on .cx-h3d>p{padding-bottom:22px}
.lp2-root .cx-h3bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;display:block}
.lp2-root .cx-h3bar i{display:block;height:100%;width:0;background:#00A3FF;transform-origin:left}
.lp2-root .cx-h3st.done .cx-h3bar i{width:100%}
.lp2-root .cx-h3m{display:none}
.lp2-root .cx-h3cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
/* stage: zoomed-out composition on a pale sky panel */
.lp2-root .cx-h3stage{position:relative;aspect-ratio:5/6;border-radius:32px;overflow:hidden;background:radial-gradient(120% 90% at 85% 0%,#fff 0%,rgba(255,255,255,0) 55%),linear-gradient(160deg,#EEF8FF 0%,#D6EEFF 100%);box-shadow:inset 0 0 0 1px rgba(0,130,204,.08)}
.lp2-root .cx-h3stage::before{content:"";position:absolute;right:28px;top:28px;width:96px;height:96px;background-image:radial-gradient(rgba(0,130,204,.22) 1.6px,transparent 1.6px);background-size:16px 16px;opacity:.9}
.lp2-root .cx-h3fig{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.lp2-root .cx-h3fig.on{opacity:1}
.lp2-root .cx-h3scene{position:absolute;inset:0}
/* r24 scenes scale with their box: --u is 1% of the scene width */
.lp2-root .cx-h3scene{container-type:size;--u:5.6px;--u:1cqw}
.lp2-root .cx-h3glow{position:absolute;inset:-10%;pointer-events:none;filter:blur(calc(var(--u) * 7));opacity:.9;
  background:radial-gradient(34% 30% at 26% 30%,rgba(0,163,255,.42),transparent 70%),radial-gradient(30% 28% at 78% 72%,rgba(102,166,147,.36),transparent 70%),radial-gradient(22% 20% at 76% 22%,rgba(232,169,9,.22),transparent 70%),radial-gradient(26% 24% at 24% 82%,rgba(29,73,227,.18),transparent 70%)}
.lp2-root .cx-h3fig .cx-h3glow{opacity:0;transition:opacity 1.2s ease}
.lp2-root .cx-h3fig.on .cx-h3glow{opacity:.9}

/* step 4: the parent app at an angle, a push notification and highlights lifted from the report */
.lp2-root .cx-h3s-report{overflow:hidden}
.lp2-root .cx-h3glow-r{background:radial-gradient(36% 30% at 70% 40%,rgba(0,163,255,.40),transparent 70%),radial-gradient(28% 24% at 32% 70%,rgba(102,166,147,.32),transparent 70%),radial-gradient(18% 16% at 86% 82%,rgba(232,169,9,.22),transparent 70%)}
.lp2-root .cx-h3dev{position:absolute;right:6%;top:21%;width:40%;transform:rotate(4deg) translateY(calc(var(--u) * 3));transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.lp2-root .cx-h3fig.on .cx-h3dev{transform:rotate(4deg)}
.lp2-root .cx-h3dev .cx-h3phone{display:block;width:100%;height:auto;margin:0;transform:none;filter:drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 7) rgba(14,38,53,.3))}
.lp2-root .cx-h3push{position:absolute;z-index:3;left:6%;top:6%;width:64%;display:flex;align-items:center;gap:calc(var(--u) * 2.4);padding:calc(var(--u) * 2.4);border-radius:calc(var(--u) * 4);
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * -2.4) rgba(14,38,53,.32),0 0 0 1px rgba(255,255,255,.7) inset;
  opacity:0;transform:translateY(calc(var(--u) * -3));transition:opacity .5s ease .3s,transform .7s cubic-bezier(.2,.9,.3,1.15) .3s}
.lp2-root .cx-h3app{flex:none;display:grid;place-items:center;width:calc(var(--u) * 7.6);height:calc(var(--u) * 7.6);border-radius:calc(var(--u) * 1.9);background:linear-gradient(145deg,#1D49E3,#00A3FF);color:#fff}
.lp2-root .cx-h3app svg{width:calc(var(--u) * 4);height:calc(var(--u) * 4)}
.lp2-root .cx-h3pt{display:flex;flex-direction:column;gap:calc(var(--u) * .5);min-width:0;flex:1}
.lp2-root .cx-h3pr{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lp2-root .cx-h3pr b{font-family:var(--ui);font-weight:700;font-size:calc(var(--u) * 2.8);color:#17394D}
.lp2-root .cx-h3pr em{font-style:normal;font-family:var(--ui);font-weight:500;font-size:calc(var(--u) * 2.2);color:#7d93a3}
.lp2-root .cx-h3pt small{font-family:var(--ui);font-weight:500;font-size:calc(var(--u) * 2.5);line-height:1.3;color:#3B4F5E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp2-root .cx-h3hl{position:absolute;z-index:2;left:6%;width:42%;display:flex;align-items:center;gap:calc(var(--u) * 2.2);padding:calc(var(--u) * 2.4) calc(var(--u) * 2.8) calc(var(--u) * 2.4) calc(var(--u) * 2.4);border-radius:calc(var(--u) * 3.2);background:#fff;
  box-shadow:0 calc(var(--u) * 3.4) calc(var(--u) * 7) calc(var(--u) * -2.6) rgba(14,38,53,.34),0 0 0 1px rgba(23,57,77,.05);font-family:var(--ui);font-weight:600;font-size:calc(var(--u) * 2.6);line-height:1.3;color:#17394D;
  opacity:0;transform:translateX(calc(var(--u) * -3));transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.lp2-root .cx-h3hl-1{top:31%}
.lp2-root .cx-h3hl-2{top:48.5%}
.lp2-root .cx-h3hl-3{top:66%}
.lp2-root .cx-h3fig.on .cx-h3push,.lp2-root .cx-h3fig.on .cx-h3hl,.lp2-root .cx-h3m.in .cx-h3push,.lp2-root .cx-h3m.in .cx-h3hl{opacity:1;transform:none}
.lp2-root .cx-h3fig.on .cx-h3hl-1,.lp2-root .cx-h3m.in .cx-h3hl-1{transition-delay:.55s}
.lp2-root .cx-h3fig.on .cx-h3hl-2,.lp2-root .cx-h3m.in .cx-h3hl-2{transition-delay:.7s}
.lp2-root .cx-h3fig.on .cx-h3hl-3,.lp2-root .cx-h3m.in .cx-h3hl-3{transition-delay:.85s}
.lp2-root .cx-h3hl .cx-h3ic{width:calc(var(--u) * 5.6);height:calc(var(--u) * 5.6);border-radius:calc(var(--u) * 1.8)}
.lp2-root .cx-h3hl .cx-h3ic svg{width:calc(var(--u) * 3);height:calc(var(--u) * 3)}
.lp2-root .cx-h3hl em{display:block;font-style:normal;font-weight:600;font-size:calc(var(--u) * 2.1);letter-spacing:.06em;text-transform:uppercase;color:#7d93a3}
.lp2-root .cx-h3hl b{font-family:var(--display);font-weight:700;font-size:calc(var(--u) * 3.1)}
.lp2-root .cx-h3num{flex:none;font-family:var(--display);font-weight:900;font-size:calc(var(--u) * 6.2)!important;line-height:1;letter-spacing:-.03em;background:linear-gradient(90deg,#1D49E3 0%,#00A3FF 60%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* desktop: pin the section while the steps advance with scroll */
@media (min-width:992px){
 .lp2-root .cx-how3.cx-h3scroll .cx-h3track{height:calc(100vh + 3 * 46vh)}
 .lp2-root .cx-how3.cx-h3scroll .cx-h3sticky{position:sticky;top:var(--cx-hdr,72px);min-height:calc(100vh - var(--cx-hdr,72px));display:flex;align-items:center;padding-block:40px;box-sizing:border-box}
 .lp2-root .cx-how3.cx-h3scroll .cx-h3sticky>.lp2-wrap{width:100%}
 .lp2-root .cx-h3st.on .cx-h3d>p{box-sizing:content-box;min-height:calc(4 * 1.5em)}
 .lp2-root .cx-h3dots{display:none}
}
.lp2-root .cx-h3d>p{max-width:440px;text-wrap:pretty}

/* tablets and phones: a swipeable row of step cards (scene on top, then the step), with progress dots */
@media (max-width:991px){
 .lp2-root .cx-h3sticky{padding-block:64px 60px}
 .lp2-root .cx-h3grid{grid-template-columns:minmax(0,1fr);gap:0}
 .lp2-root .cx-h3stage{display:none}
 #city-body .lp2-root .cx-h3l h2,.lp2-root .cx-h3l h2{margin:0 0 24px}
 #city-body .lp2-root .cx-h3steps{display:flex;flex-direction:row;align-items:stretch;gap:14px;border:0;margin:0 -20px;padding:6px 20px 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 #city-body .lp2-root .cx-h3steps::-webkit-scrollbar{display:none}
 .lp2-root .cx-h3st{flex:0 0 min(82%,380px);display:flex;flex-direction:column;scroll-snap-align:start;border:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #E3EEF5,0 16px 32px -24px rgba(14,38,53,.35)}
 .lp2-root .cx-h3m{display:block;order:-1;position:relative;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(120% 90% at 85% 0%,#fff 0%,rgba(255,255,255,0) 55%),linear-gradient(160deg,#EEF8FF 0%,#D6EEFF 100%)}
 .lp2-root .cx-h3b{padding:18px 22px 8px;gap:4px;flex-direction:column;align-items:flex-start;cursor:default}
 .lp2-root .cx-h3st .cx-h3n{width:auto;font-size:14px;color:#00A3FF}
 .lp2-root .cx-h3st .cx-h3t{font-size:19px;line-height:1.25;color:#17394D}
 .lp2-root .cx-h3d{grid-template-rows:1fr}
 .lp2-root .cx-h3d>p,.lp2-root .cx-h3st.on .cx-h3d>p{padding:0 22px 24px;font-size:15.5px;line-height:1.5;max-width:none}
 .lp2-root .cx-h3bar{display:none}
 .lp2-root .cx-h3dots{display:flex;justify-content:center;gap:0;margin-top:-6px}
 .lp2-root .cx-h3dots button{-webkit-appearance:none;appearance:none;display:grid;place-items:center;min-width:28px;height:32px;margin:0;padding:0 4px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .lp2-root .cx-h3dots button:focus-visible{outline:2px solid #00A3FF;outline-offset:-2px;border-radius:10px}
 .lp2-root .cx-h3dots i{display:block;width:7px;height:7px;border-radius:7px;background:#CFE3EF;transition:width .3s ease,background-color .3s ease}
 .lp2-root .cx-h3dots button.on i{width:24px;background:#00A3FF}
 .lp2-root .cx-h3cta{margin-top:28px}
 .lp2-root .cx-h3cta .lp2-btn{width:100%;justify-content:center}
}
@media (min-width:600px) and (max-width:991px){
 /* tablets: one card and a peek, wide enough that every card can come to the front (keeps the dots in step) */
 .lp2-root .cx-h3st{flex-basis:72%}
 .lp2-root .cx-h3m{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
 .lp2-root .cx-h3fig,.lp2-root .cx-h3d,.lp2-root .cx-h3book,.lp2-root .cx-h3toast,.lp2-root .cx-h3glow,.lp2-root .cx-h3dots i{transition:none!important}
 #city-body .lp2-root .cx-h3steps{scroll-behavior:auto}
}
/* r26: carousel bleeds exactly to the page gutter (16px under 768, 24px above) so it never adds sideways scroll */
@media (max-width:991px){#city-body .lp2-root .cx-h3steps,.lp2-root .cx-h3steps{margin:0 -24px;padding:6px 24px 18px;scroll-padding-inline:24px}}
@media (max-width:767px){#city-body .lp2-root .cx-h3steps,.lp2-root .cx-h3steps{margin:0 -16px;padding:6px 16px 18px;scroll-padding-inline:16px}}

/* ================= scene system (r33, 29 Oct) =================
   One set of tokens for the four scenes (tutor, plan, lesson, report): the same photo frame, card radius, shadow,
   padding, icon box and type scale. Desktop scenes scale with the stage (--u = 1% of its width) with a readable floor;
   the phone/tablet cards use fixed sizes. Layout rule shared by every photo scene: a context chip top left on the photo,
   the main card floating over the photo's bottom edge, 7% margins top and bottom. */
.lp2-root .cx-how3 .cx-h3scene{
 --fx:8%;--fy:7%;--fb:13%;                       /* photo frame: side, top and bottom insets */
 --sr:calc(var(--u) * 3.4);--pr:calc(var(--u) * 4.6);
 --sp:calc(var(--u) * 2.4) calc(var(--u) * 3.2) calc(var(--u) * 2.4) calc(var(--u) * 2.4);
 --sg:calc(var(--u) * 2.2);
 --ic:calc(var(--u) * 6.6);--icr:calc(var(--u) * 2);--ics:calc(var(--u) * 3.4);
 --f-eye:max(11px,calc(var(--u) * 1.95));--f-t:max(13.5px,calc(var(--u) * 3));--f-s:max(12px,calc(var(--u) * 2.4));
 --sh:0 calc(var(--u) * 3) calc(var(--u) * 6.4) calc(var(--u) * -2.4) rgba(14,38,53,.34),0 0 0 1px rgba(23,57,77,.06);
 --ink:#17394D;--mut:#6B8394;--quiet:#8BA0AE}
.lp2-root .cx-how3 .cx-h3m .cx-h3scene{
 --fx:6%;--fy:7%;--fb:7%;--sr:14px;--pr:14px;--sp:8px 12px 8px 8px;--sg:9px;--ic:28px;--icr:9px;--ics:15px;
 --f-eye:10.5px;--f-t:13px;--f-s:11.5px;--sh:0 10px 22px -12px rgba(14,38,53,.42),0 0 0 1px rgba(23,57,77,.06)}

/* photo frame */
.lp2-root .cx-how3 .cx-h3scene .cx-h3photo{position:absolute;left:var(--fx);right:var(--fx);top:var(--fy);bottom:var(--fb);width:auto;height:auto;border-radius:var(--pr);overflow:hidden;
 background:#DCEEF9;box-shadow:0 calc(var(--u) * 5) calc(var(--u) * 11) calc(var(--u) * -5) rgba(14,38,53,.42),0 0 0 1px rgba(255,255,255,.6);transform:translateY(calc(var(--u) * 2)) scale(.985);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3photo img{display:block;width:100%;height:100%;object-fit:cover;transform:none;margin:0}
.lp2-root .cx-how3 .cx-h3fig.on .cx-h3photo,.lp2-root .cx-how3 .cx-h3m .cx-h3photo{transform:none}

/* cards: one shell */
.lp2-root .cx-how3 .cx-h3scene .cx-h3card{position:absolute;z-index:2;display:flex;align-items:center;gap:var(--sg);padding:var(--sp);border-radius:var(--sr);background:#fff;box-shadow:var(--sh);color:var(--ink);
 max-width:none;opacity:0;transform:translateY(calc(var(--u) * 2.4));transition:opacity .5s ease .3s,transform .7s cubic-bezier(.2,.7,.2,1) .3s}
.lp2-root .cx-how3 .cx-h3fig.on .cx-h3card,.lp2-root .cx-how3 .cx-h3m.in .cx-h3card{opacity:1;transform:none}
.lp2-root .cx-how3 .cx-h3scene .cx-h3card b{display:block;font-family:var(--display);font-weight:700;font-size:var(--f-t);line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3card small{display:block;font-family:var(--ui);font-weight:600;font-size:var(--f-eye);line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);margin:0 0 3px}
.lp2-root .cx-how3 .cx-h3scene .cx-h3ic{flex:none;display:grid;place-items:center;width:var(--ic);height:var(--ic);border-radius:var(--icr);background:#E6F6FF;color:#00A3FF}
.lp2-root .cx-how3 .cx-h3scene .cx-h3ic svg{width:var(--ics);height:var(--ics)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3ic-ok{background:#E8FAF4;color:#14A57E}

/* chips (location, today): white pills, top left on the photo */
.lp2-root .cx-how3 .cx-h3scene .cx-h3pin,.lp2-root .cx-how3 .cx-h3scene .cx-h3logo{position:absolute;z-index:2;left:calc(var(--fx) + var(--u) * 3);top:calc(var(--fy) + var(--u) * 3);
 display:inline-flex;align-items:center;background:#fff;box-shadow:0 calc(var(--u) * 1.6) calc(var(--u) * 4) calc(var(--u) * -1.6) rgba(14,38,53,.38);opacity:0;transition:opacity .5s ease .2s}
.lp2-root .cx-how3 .cx-h3fig.on .cx-h3pin,.lp2-root .cx-how3 .cx-h3m.in .cx-h3pin,.lp2-root .cx-how3 .cx-h3fig.on .cx-h3logo,.lp2-root .cx-how3 .cx-h3m.in .cx-h3logo{opacity:1}
.lp2-root .cx-how3 .cx-h3scene .cx-h3pin{bottom:auto;gap:calc(var(--u) * 1.2);padding:calc(var(--u) * 1.5) calc(var(--u) * 2.6) calc(var(--u) * 1.5) calc(var(--u) * 1.8);border-radius:999px;
 font-family:var(--ui);font-weight:600;font-size:var(--f-s);line-height:1;color:var(--ink);white-space:nowrap}
.lp2-root .cx-how3 .cx-h3scene .cx-h3pin svg{width:calc(var(--f-s) * 1.2);height:calc(var(--f-s) * 1.2);color:#00A3FF;flex:none}

/* the Tutero logo badge (lesson scene): the live header logo on white, never in a navy box */
.lp2-root .cx-how3 .cx-h3scene .cx-h3logo{padding:calc(var(--u) * 1.7) calc(var(--u) * 2.4);border-radius:calc(var(--u) * 2.2)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3logo img{display:block;height:calc(var(--u) * 3.2);width:auto;max-width:none;margin:0}

/* step 1, tutor: chip top left, "Tutor matched" centred over the photo's bottom edge */
.lp2-root .cx-how3 .cx-h3s-tutor .cx-h3photo img{object-position:50% 24%!important}
.lp2-root .cx-how3 .cx-h3s-tutor .cx-h3c-tr{left:0;right:0;top:auto;bottom:var(--fy);width:max-content;max-width:80%;margin-inline:auto}
.lp2-root .cx-how3 .cx-h3s-tutor .cx-h3ct small{margin:3px 0 0;text-transform:none;letter-spacing:0;font-weight:500;font-size:var(--f-s);color:var(--mut)}

/* step 2, plan: "Today" chip top left, the term's plan as a glass card over the bottom edge */
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,38,53,0) 50%,rgba(14,38,53,.32) 100%)}
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3photo img{object-position:56% 46%!important}
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3now{left:calc(var(--fx) + var(--u) * 3);top:calc(var(--fy) + var(--u) * 3);right:auto;bottom:auto;border-radius:999px;gap:calc(var(--u) * 1.8);
 padding:calc(var(--u) * 1.6) calc(var(--u) * 3) calc(var(--u) * 1.6) calc(var(--u) * 2.2)}
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3now small{margin:0 0 2px}
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3now b{font-size:var(--f-s)!important;font-family:var(--ui);font-weight:700}
.lp2-root .cx-how3 .cx-h3pulse{position:relative;flex:none;width:calc(var(--u) * 1.8);height:calc(var(--u) * 1.8);min-width:8px;min-height:8px;border-radius:50%;background:#00A3FF}
.lp2-root .cx-how3 .cx-h3pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#00A3FF;animation:cx-h3pulse 1.8s ease-out infinite}
@keyframes cx-h3pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3glass{position:absolute;z-index:2;left:calc(var(--fx) + var(--u) * 4);right:calc(var(--fx) + var(--u) * 4);bottom:var(--fy);padding:calc(var(--u) * 3.2);border-radius:var(--sr);
 background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--sh);color:var(--ink);
 opacity:0;transform:translateY(calc(var(--u) * 2.4));transition:opacity .5s ease .3s,transform .7s cubic-bezier(.2,.7,.2,1) .3s}
.lp2-root .cx-how3 .cx-h3fig.on .cx-h3glass,.lp2-root .cx-how3 .cx-h3m.in .cx-h3glass{opacity:1;transform:none}
.lp2-root .cx-how3 .cx-h3gl-h{display:flex;align-items:center;gap:var(--sg);margin:0 0 calc(var(--u) * 3.4)}
.lp2-root .cx-how3 .cx-h3gl-h .cx-h3ic{background:linear-gradient(135deg,#1D49E3,#00A3FF);color:#fff}
.lp2-root .cx-how3 .cx-h3gl-h small{display:block;font-family:var(--ui);font-weight:600;font-size:var(--f-eye);letter-spacing:.08em;text-transform:uppercase;color:#0088D6;margin:0 0 3px}
.lp2-root .cx-how3 .cx-h3gl-h b{display:block;margin:0;font-family:var(--display);font-weight:700;font-size:var(--f-t);line-height:1.2}
.lp2-root .cx-how3 .cx-h3gl-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 2);margin:0;padding:0;list-style:none}
.lp2-root .cx-how3 .cx-h3gl-s li{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;padding:calc(var(--u) * 2.6) 0 0;border-top:3px solid #DCE8F0;border-image:none}
.lp2-root .cx-how3 .cx-h3gl-s li::before{display:none}
.lp2-root .cx-how3 .cx-h3gl-s li.cx-h3pl-done{border-color:#00A3FF}
.lp2-root .cx-how3 .cx-h3gl-s li.cx-h3pl-now{border-image:linear-gradient(90deg,#00A3FF 55%,#DCE8F0 55%) 1}
.lp2-root .cx-how3 .cx-h3gl-s i{position:absolute;top:calc(var(--u) * -1.9 - 1.5px);left:0;display:grid;place-items:center;width:calc(var(--u) * 3.4);height:calc(var(--u) * 3.4);min-width:15px;min-height:15px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #DCE8F0;color:#fff}
.lp2-root .cx-how3 .cx-h3gl-s .cx-h3pl-done i{background:#00A3FF;box-shadow:none}
.lp2-root .cx-how3 .cx-h3gl-s .cx-h3pl-now i{box-shadow:inset 0 0 0 2px #00A3FF}
.lp2-root .cx-how3 .cx-h3gl-s .cx-h3pl-now i::after{content:"";width:40%;height:40%;border-radius:50%;background:#00A3FF}
.lp2-root .cx-how3 .cx-h3gl-s i svg{width:60%;height:60%}
.lp2-root .cx-how3 .cx-h3gl-s b{font-family:var(--display);font-weight:700;font-size:var(--f-s);line-height:1.25;color:var(--ink)}
.lp2-root .cx-how3 .cx-h3gl-s .cx-h3pl-next b{color:var(--mut)}
.lp2-root .cx-how3 .cx-h3gl-s em{font-style:normal;font-family:var(--ui);font-weight:600;font-size:var(--f-eye);letter-spacing:.04em;color:var(--quiet);background:none;padding:0}
.lp2-root .cx-how3 .cx-h3gl-s .cx-h3pl-done em{color:#14A57E}
.lp2-root .cx-how3 .cx-h3gl-s .cx-h3pl-now em{color:#0077BB}

/* step 3, lesson: logo top left; the "this week" chip sits on the school-year card, both over the photo's bottom edge.
   The scene is a bottom-aligned column so the chip always clears the card, whatever its height */
.lp2-root .cx-how3 .cx-h3s-lesson{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:calc(var(--u) * 1.6);padding:0 calc(var(--fx) + var(--u) * 4) var(--fy);box-sizing:border-box}
.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3photo img{object-position:62% 24%!important}
.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3yrc,.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3yrchip{position:relative;left:auto;right:auto;top:auto;bottom:auto}
.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3yrchip{order:-1;align-self:flex-start;padding:calc(var(--u) * 1.5) calc(var(--u) * 3) calc(var(--u) * 1.5) calc(var(--u) * 1.5);border-radius:999px;transition-delay:.45s}
.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3yrchip .cx-h3ic{width:calc(var(--ic) * .82);height:calc(var(--ic) * .82);border-radius:50%}
.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3yrchip small{margin:0 0 2px}
.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3yrc{flex-direction:column;align-items:stretch;gap:calc(var(--u) * 2.8);padding:calc(var(--u) * 3) calc(var(--u) * 3.2) calc(var(--u) * 2.8)}
.lp2-root .cx-how3 .cx-h3yrh{display:flex;align-items:center;gap:var(--sg)}
.lp2-root .cx-how3 .cx-h3yric{flex:none;display:grid;place-items:center;width:var(--ic);height:var(--ic);border-radius:var(--icr);background:#E6F6FF;color:#00A3FF}
.lp2-root .cx-how3 .cx-h3yric svg{width:var(--ics);height:var(--ics)}
.lp2-root .cx-how3 .cx-h3yrht small{display:none}
.lp2-root .cx-how3 .cx-h3yrt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 2);margin:0;padding:0;list-style:none}
.lp2-root .cx-how3 .cx-h3yrt li{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;padding:0}
.lp2-root .cx-how3 .cx-h3yrt li::before{display:none}
.lp2-root .cx-how3 .cx-h3yrt li>i{position:relative;display:block;height:5px;margin:0 0 calc(var(--u) * 1.2);border-radius:5px;background:#E3EEF5;overflow:hidden}
.lp2-root .cx-how3 .cx-h3yrt li>i u{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:#00A3FF;transition:width 1s cubic-bezier(.2,.7,.2,1) .55s}
.lp2-root .cx-how3 .cx-h3fig.on .cx-h3yrt li.d>i u,.lp2-root .cx-how3 .cx-h3m.in .cx-h3yrt li.d>i u{width:100%}
.lp2-root .cx-how3 .cx-h3fig.on .cx-h3yrt li.n>i u,.lp2-root .cx-how3 .cx-h3m.in .cx-h3yrt li.n>i u{width:55%}
.lp2-root .cx-how3 .cx-h3yrt b{display:block;font-family:var(--ui);font-weight:700;font-size:var(--f-s);line-height:1.2;color:var(--quiet)}
.lp2-root .cx-how3 .cx-h3yrt li.d b,.lp2-root .cx-how3 .cx-h3yrt li.n b{color:var(--ink)}
.lp2-root .cx-how3 .cx-h3yrt small{display:block;font-family:var(--ui);font-weight:500;font-size:var(--f-eye);line-height:1.3;color:var(--quiet);text-transform:none;letter-spacing:0;margin:0}
.lp2-root .cx-how3 .cx-h3yrt li.n small{color:#0088D6;font-weight:600}

/* step 4, report: notification top left, three highlights down the left, the phone on the right */
.lp2-root .cx-how3 .cx-h3s-report .cx-h3push{left:var(--fx);top:var(--fy);width:66%;gap:var(--sg);padding:calc(var(--u) * 2.4);border-radius:var(--sr);box-shadow:var(--sh)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3app{width:var(--ic);height:var(--ic);border-radius:var(--icr)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3app svg{width:var(--ics);height:var(--ics)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3pr b{font-family:var(--display);font-size:var(--f-t);line-height:1.2}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3pr em{font-size:var(--f-eye)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3pt small{font-size:var(--f-s);color:var(--mut)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3dev{right:var(--fx);top:22%;width:38%}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl{left:var(--fx);width:46%;gap:var(--sg);padding:var(--sp);border-radius:var(--sr);box-shadow:var(--sh);font-family:var(--display);font-weight:700;font-size:var(--f-s);line-height:1.25}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-1{top:32%}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-2{top:49%}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-3{top:66%}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl .cx-h3ic{width:var(--ic);height:var(--ic);border-radius:var(--icr)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl .cx-h3ic svg{width:var(--ics);height:var(--ics)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl em{display:block;font-style:normal;font-family:var(--ui);font-weight:600;font-size:var(--f-eye);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);margin:0 0 3px}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl b{font-family:var(--display);font-weight:700;font-size:var(--f-t);line-height:1.2}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3num{flex:none;width:var(--ic);text-align:center;font-family:var(--display);font-weight:900;font-size:calc(var(--f-t) * 1.5)!important;line-height:1;letter-spacing:-.04em;
 background:linear-gradient(90deg,#1D49E3 0%,#00A3FF 70%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* phones and tablets: the same system at fixed sizes inside each 4:3 step card */
@media (max-width:991px){
 /* tutor: a portrait frame on the left, chip on the photo, the matched card overlapping the frame's right edge */
 /* plan: the full frame, today's topic in one glass row */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-plan .cx-h3photo img{object-position:74% 40%!important}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-plan .cx-h3now,.lp2-root .cx-how3 .cx-h3m .cx-h3s-plan .cx-h3gl-h{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-plan .cx-h3glass{left:calc(var(--fx) + 10px);right:calc(var(--fx) + 10px);bottom:calc(var(--fb) + 10px);padding:10px 14px;border-radius:999px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3gl-s{display:block}
 .lp2-root .cx-how3 .cx-h3m .cx-h3gl-s li{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3gl-s li.cx-h3pl-now{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0;border:0;border-image:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3gl-s li.cx-h3pl-now i{position:static;flex:none;width:16px;height:16px;min-width:0;min-height:0}
 .lp2-root .cx-how3 .cx-h3m .cx-h3gl-s li.cx-h3pl-now b{font-size:13px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3gl-s li.cx-h3pl-now em{display:inline;margin-left:auto;white-space:nowrap;font-size:11px}
 /* lesson: logo and photo as on desktop; a compact card (terms only) with the chip on top */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3photo img{object-position:62% 22%!important}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo{left:calc(var(--fx) + 9px);top:calc(var(--fy) + 9px);padding:6px 9px;border-radius:9px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo img{height:13px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip{padding:5px 12px 5px 5px;gap:7px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip .cx-h3ic{width:22px;height:22px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip .cx-h3ic svg{width:12px;height:12px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip b{font-size:12px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip small{font-size:8.5px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{gap:8px;padding:10px 12px 9px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3yrh{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3yrt{gap:8px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3yrt li>i{height:4px;margin-bottom:4px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3yrt b{font-size:11px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3yrt small{display:none}
 /* report: notification across the top, two highlights on the left, the phone on the right */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3push{width:auto;right:var(--fx);padding:8px 10px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3pr b{font-size:13px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3pt small{font-size:11px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3dev{right:var(--fx);top:33%;width:30%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl{width:auto;max-width:58%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-1{top:38%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-2{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-3{top:66%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3num{font-size:21px!important}
}
/* tablets: wider cards, one step up in type */
@media (min-width:600px) and (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3scene{--ic:34px;--icr:10px;--ics:17px;--f-eye:10.5px;--f-t:15px;--f-s:12.5px;--sp:10px 14px 10px 10px;--sr:16px;--pr:18px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo img{height:16px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{max-width:420px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3push{right:auto;width:60%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl{max-width:46%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3dev{width:24%;right:12%;top:26%}
}

/* the step list (desktop): title, line and progress bar on one rhythm */
@media (min-width:992px){
 .lp2-root .cx-h3b{padding:20px 0}
 .lp2-root .cx-h3st.on .cx-h3b{padding-bottom:10px}
 .lp2-root .cx-h3d>p{font-size:16.5px;line-height:1.55}
 .lp2-root .cx-h3st.on .cx-h3d>p{padding-bottom:20px}
 .lp2-root .cx-how3.cx-h3scroll .cx-h3st.on .cx-h3d>p{min-height:calc(3 * 1.55em)}
}
@media (prefers-reduced-motion:reduce){
 .lp2-root .cx-how3 .cx-h3scene *{transition:none!important}
 .lp2-root .cx-how3 .cx-h3pulse::after{animation:none}
}
/* r33 fixes after the first review */
.lp2-root .cx-how3 .cx-h3scene .cx-h3yrht small{display:none}
.lp2-root .cx-how3 .cx-h3scene .cx-h3yrt small{display:block;margin:0;font-family:var(--ui);font-weight:500;font-size:var(--f-eye);line-height:1.3;letter-spacing:0;text-transform:none;color:var(--quiet)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3yrt li.n small{color:#0088D6;font-weight:600}
.lp2-root .cx-how3 .cx-h3scene .cx-h3logo{padding:calc(var(--u) * 1.9) calc(var(--u) * 2.6);border-radius:calc(var(--u) * 2.4)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3logo img{height:calc(var(--u) * 3.9)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3num{width:auto;min-width:var(--ic)}
@media (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{gap:0}
 .lp2-root .cx-how3 .cx-h3m .cx-h3scene .cx-h3yrt small{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo{padding:6px 9px;border-radius:9px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo img{height:14px}
}
@media (min-width:600px) and (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo img{height:17px}
}
@media (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3photo img{object-position:62% 8%!important}
 /* the chip goes to one slim line on cards, so it never reaches the face */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip small{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip b::before{content:"This week: ";font-family:var(--ui);font-weight:500;color:var(--mut)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip .cx-h3ic{width:18px;height:18px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip .cx-h3ic svg{width:10px;height:10px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip{padding:5px 11px 5px 5px;gap:6px}
}
@media (min-width:600px) and (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{max-width:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-1{top:36%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-3{top:60%}
}
@media (max-width:599px){
 /* phones: the "this week" line becomes the first row of the school-year card (one card, lower on the photo, clear of the face) */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip{z-index:3;align-self:stretch;margin:0 0 -34px;padding:9px 12px 0;background:none;box-shadow:none;border-radius:0}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{padding-top:36px}
}
/* ===== r33b: one anchor system for the photo scenes (tutor, plan, lesson) =====
   --u is measured on the figure box, never on a padded scene, so every scene shares the same unit.
   Chip: top left of the photo (--cl, --ct). Main card(s): left-aligned at the same inset (--cl), resting on the
   photo's bottom edge (--cb). The lesson scene stacks its chip and school-year card from that same baseline. */
.lp2-root .cx-how3 .cx-h3fig,.lp2-root .cx-how3 .cx-h3m{container-type:inline-size}
.lp2-root .cx-how3 .cx-h3scene{container-type:normal;--u:1cqw;
 --cl:calc(var(--fx) + var(--u) * 3.4);--ct:calc(var(--fy) + var(--u) * 3.4);--cb:var(--fy)}
.lp2-root .cx-how3 .cx-h3m .cx-h3scene{--cl:calc(var(--fx) + 10px);--ct:calc(var(--fy) + 10px);--cb:calc(var(--fb) - 6px)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3pin,.lp2-root .cx-how3 .cx-h3scene .cx-h3logo,.lp2-root .cx-how3 .cx-h3s-plan .cx-h3now{left:var(--cl);top:var(--ct);right:auto;bottom:auto}
.lp2-root .cx-how3 .cx-h3s-tutor .cx-h3c-tr{left:var(--cl);right:auto;top:auto;bottom:var(--cb);margin:0;width:max-content;max-width:calc(100% - 2 * var(--cl));translate:none}
.lp2-root .cx-how3 .cx-h3s-tutor .cx-h3c-tr b{white-space:nowrap}
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3glass{left:var(--cl);right:var(--cl);bottom:var(--cb)}
.lp2-root .cx-how3 .cx-h3s-lesson{padding:0 var(--cl) var(--cb);gap:calc(var(--u) * 1.6)}
.lp2-root .cx-how3 .cx-h3scene .cx-h3logo img{height:calc(var(--u) * 3.9)}
@media (max-width:991px){
 /* tutor on cards: the same frame as plan and lesson; the face sits in the upper half, chip and card stay clear of it */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3photo{left:var(--fx);right:var(--fx);width:auto}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3photo img{object-position:50% 16%!important}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3pin{padding:6px 11px 6px 8px;gap:5px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3ct small{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-plan .cx-h3glass{padding:10px 14px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson{gap:6px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo{padding:6px 9px;border-radius:9px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo img{height:14px}
}
@media (min-width:600px) and (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3scene{--cl:calc(var(--fx) + 14px);--ct:calc(var(--fy) + 14px)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3photo img{object-position:50% 22%!important}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3ct small{display:block}
 .lp2-root .cx-how3 .cx-h3m .cx-h3logo img{height:17px}
}
@media (max-width:599px){
 /* phones: the "this week" line is the first row of the school-year card */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip{z-index:3;align-self:stretch;margin:0 0 -34px;padding:9px 12px 0;background:none;box-shadow:none;border-radius:0}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{padding-top:36px}
}

/* lesson scene, desktop: "this week in class" takes the chip spot top left, like the location and "today" chips */
@media (min-width:992px){
 .lp2-root .cx-how3 .cx-h3fig .cx-h3s-lesson .cx-h3yrchip{position:absolute;left:var(--cl);top:var(--ct);order:0;margin:0}
}
/* r35 chemistry: the report scene without the phone (no chemistry render of the app exists). The notification and the
   highlights take the full width, stacked on the same left edge as every other scene */
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3push{width:auto;right:var(--fx)}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl{width:auto;right:var(--fx);max-width:none}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl{padding:calc(var(--u) * 3.2) calc(var(--u) * 3.6)}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-1{top:27%}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-2{top:44%}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-3{top:61%}
@media (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl{right:var(--fx);max-width:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl-1{top:38%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl-3{top:66%}
}
/* chemistry lesson photo (portrait, senior student writing): keep her face in the frame */
.lp2-root .cx-how3 .cx-h3s-lesson .cx-h3photo img[src*="sp-cdb27d8b7f"]{object-position:50% 30%!important}
.lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3photo img[src*="sp-cdb27d8b7f"]{object-position:50% 44%!important}
.lp2-root .cx-how3 .cx-h3s-plan .cx-h3photo img[src*="sp-3c6f9792cf"]{object-position:55% 32%!important}

/* ===== r40 (Joey): the Tutero logo on a small white pill, top left in all four scenes; the scene's own chip sits just below it =====
   Same pill as the other chips (white, fully rounded, same padding and shadow), so it reads as part of the set, not a sticker. */
.lp2-root .cx-how3 .cx-h3scene{--lh:calc(var(--f-s) * 1.15);--lp:calc(var(--u) * 1.5);--lgap:calc(var(--u) * 1.4)}
.lp2-root .cx-how3 .cx-h3m .cx-h3scene{--lp:6px;--lgap:6px}
.lp2-root .cx-how3 .cx-h3scene .cx-h3logo{position:absolute;z-index:3;left:var(--cl);top:var(--ct);display:inline-flex;align-items:center;
 padding:var(--lp) calc(var(--lp) * 1.7);border-radius:999px;background:#fff;box-shadow:0 calc(var(--u) * 1.6) calc(var(--u) * 4) calc(var(--u) * -1.6) rgba(14,38,53,.38);opacity:1}
.lp2-root .cx-how3 .cx-h3scene .cx-h3logo img{display:block;height:var(--lh);width:auto;max-width:none;margin:0}
/* the chip under it: logo height + gap */
.lp2-root .cx-how3 .cx-h3scene{--ct2:calc(var(--ct) + var(--lh) + var(--lp) * 2 + var(--lgap))}
.lp2-root .cx-how3 .cx-h3scene .cx-h3pin,.lp2-root .cx-how3 .cx-h3s-plan .cx-h3now{top:var(--ct2)}
@media (min-width:992px){.lp2-root .cx-how3 .cx-h3fig .cx-h3s-lesson .cx-h3yrchip{top:var(--ct2)}}
/* report: the logo takes the top left, the notification sits under it */
.lp2-root .cx-how3 .cx-h3s-report .cx-h3logo{left:var(--fx);top:var(--fy)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3push{top:calc(var(--fy) + var(--lh) + var(--lp) * 2 + var(--lgap))}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-1{top:35%}.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-2{top:51%}.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-3{top:67%}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-1{top:33%}.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-2{top:49%}.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-3{top:65%}
@media (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-1{top:44%}.lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-3{top:70%}
}

/* ===== r41 (QA r40): one How-scene system =====
   Every scene is a frame (photo, or the soft panel on the report scene) at the same insets. One white pill, the Tutero logo
   (20px tall on desktop) and the city, sits in the same top-left corner of every frame. Cards rest on the frame's bottom edge
   or, on the report scene, down its left side. Nothing sits over a face. */
.lp2-root .cx-how3 .cx-h3scene{--lh:20px;--bp:7px}
.lp2-root .cx-how3 .cx-h3m .cx-h3scene{--lh:17px;--bp:6px}
.lp2-root .cx-how3 .cx-h3scene .cx-h3brand{position:absolute;z-index:4;left:var(--cl);top:var(--ct);right:auto;bottom:auto;display:inline-flex;align-items:center;gap:10px;
 padding:var(--bp) 14px var(--bp) 12px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -10px rgba(14,38,53,.45),0 0 0 1px rgba(23,57,77,.05);opacity:1;white-space:nowrap}
.lp2-root .cx-how3 .cx-h3scene .cx-h3brand img{display:block;height:var(--lh);width:auto;max-width:none;margin:0}
.lp2-root .cx-how3 .cx-h3scene .cx-h3brand .cx-h3sep{display:block;width:1px;height:calc(var(--lh) * .8);background:#D3E2EC;flex:none}
.lp2-root .cx-how3 .cx-h3scene .cx-h3brand .cx-h3pin{position:static;display:inline-flex;align-items:center;gap:5px;padding:0;margin:0;background:none;box-shadow:none;border-radius:0;opacity:1;
 font-family:var(--ui);font-weight:600;font-size:max(13px,calc(var(--lh) * .7));line-height:1;color:var(--ink);white-space:nowrap}
.lp2-root .cx-how3 .cx-h3scene .cx-h3brand .cx-h3pin svg{width:1.1em;height:1.1em;color:#00A3FF;flex:none}
.lp2-root .cx-how3 .cx-h3m .cx-h3scene .cx-h3brand{gap:8px;padding:var(--bp) 11px var(--bp) 10px}
.lp2-root .cx-how3 .cx-h3m .cx-h3scene .cx-h3brand .cx-h3pin{font-size:12px;gap:4px}
/* lesson, desktop: "this week in class" rests on top of the school-year card again (the corner belongs to the pill) */
@media (min-width:992px){
 .lp2-root .cx-how3 .cx-h3fig .cx-h3s-lesson .cx-h3yrchip{position:relative;left:auto;top:auto;order:-1;align-self:flex-start;margin:0}
}
/* report: a frame like the others, a pale panel; the notification under the pill, highlights down the left, the phone on the right */
.lp2-root .cx-how3 .cx-h3s-report .cx-h3panel{background:radial-gradient(60% 50% at 78% 38%,rgba(0,163,255,.20),transparent 70%),radial-gradient(50% 40% at 18% 86%,rgba(102,166,147,.18),transparent 70%),linear-gradient(165deg,#FFFFFF 0%,#EAF6FF 50%,#D2EBFD 100%);
 box-shadow:0 calc(var(--u) * 5) calc(var(--u) * 11) calc(var(--u) * -5) rgba(14,38,53,.36),0 0 0 1px rgba(0,130,204,.14),inset 0 0 0 1px rgba(255,255,255,.8)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3panel::before{content:"";position:absolute;right:6%;top:5%;width:22%;aspect-ratio:1;background-image:radial-gradient(rgba(0,130,204,.22) 1.6px,transparent 1.6px);background-size:14px 14px}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3logo.cx-h3brand{left:var(--cl);top:var(--ct)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3push{left:var(--cl);right:auto;width:62%;top:calc(var(--ct) + var(--lh) + var(--bp) * 2 + var(--u) * 2.6)}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3dev{right:calc(var(--fx) + var(--u) * 3);top:27%;width:34%}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl{left:var(--cl);width:50%}
.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-1{top:36%}.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-2{top:52.5%}.lp2-root .cx-how3 .cx-h3s-report .cx-h3hl-3{top:69%}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3push,.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl{width:auto;right:var(--cl)}
.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-1{top:36%}.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-2{top:51%}.lp2-root .cx-how3 .cx-h3s-nophone .cx-h3hl-3{top:66%}
@media (max-width:991px){
 /* cards: the report frame at the same insets as the photo frames; the notification under the pill, one highlight, the phone */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3push{left:var(--cl);right:auto;width:auto;max-width:calc(62% - var(--cl));top:calc(var(--ct) + var(--lh) + var(--bp) * 2 + 8px);padding:7px 10px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3pt small{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3dev{right:calc(var(--fx) + 12px);top:14%;width:27%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl{left:var(--cl);width:auto;max-width:calc(62% - var(--cl));padding:7px 10px 7px 8px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-1{top:auto;bottom:calc(var(--fb) + 10px)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-2,.lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-3{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3push,.lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl{max-width:none;right:var(--cl)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl-3{display:flex;top:auto;bottom:calc(var(--fb) + 10px)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl-1{display:none}
}
/* phones: a square media area, so the pill, the face and the card each get their own band with 24px clear around the face */
@media (max-width:599px){
 .lp2-root .cx-how3 .cx-h3m{aspect-ratio:1/1}
 .lp2-root .cx-how3 .cx-h3m .cx-h3scene{--fy:6%;--fb:6%}
}
@media (max-width:599px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3scene{--cl:calc(var(--fx) + 8px);--ct:calc(var(--fy) + 8px);--bp:5px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3photo img{object-position:50% 0%!important}
 /* lesson on phones: the school-year card is the terms row alone (the week's topic is in the step text), so the face keeps its band */
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{padding:10px 12px 9px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3photo img{transform-origin:62% 0;transform:scale(1.38)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-plan .cx-h3photo img[src*="sp-aae19b3a54"]{object-position:50% 0!important;transform-origin:52% 0;transform:scale(1.2)}
}
@media (max-width:599px){.lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3photo img[src*="sp-cdb27d8b7f"]{transform:none}}
/* tablets: the same bands as phones, in a 5:4 media area */
@media (min-width:600px) and (max-width:991px){
 .lp2-root .cx-how3 .cx-h3m{aspect-ratio:5/4}
 .lp2-root .cx-how3 .cx-h3m .cx-h3scene{--fy:6%;--fb:6%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-tutor .cx-h3photo img{object-position:50% 0%!important}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrchip{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3yrc{padding:12px 14px 11px}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3photo img{transform-origin:62% 0;transform:scale(1.1)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-lesson .cx-h3photo img[src*="sp-cdb27d8b7f"]{transform:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-plan .cx-h3photo img[src*="sp-aae19b3a54"]{object-position:50% 0!important;transform-origin:52% 0;transform:scale(1.12)}
}
/* phones: the report fills its square — phone larger on the right, the score and next week down the left (chemistry: all three) */
@media (max-width:599px){
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3dev{top:26%;width:29%;right:calc(var(--fx) + 12px)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-1{top:42%;bottom:auto}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3hl-3{display:flex;top:auto;bottom:calc(var(--fb) + 12px)}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl-1{display:flex;top:42%}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-nophone .cx-h3hl-2{display:none}
 .lp2-root .cx-how3 .cx-h3m .cx-h3s-report .cx-h3pr b{white-space:nowrap}
}

/* 4 Nov v2: even, roomy spacing around the local section (section 2). Space ABOVE grows to match the space below.
   Desktop pin: the centring offset is capped (--cx-lgap) so the gap stays even and never balloons on tall screens. */
.lp2-root{--cx-lgap:clamp(40px, calc((100vh - var(--cx-hdr,72px) - 660px) / 2), 96px)}
.lp2-root .cx-local-mid:has(+.cx-how3.cx-h3scroll){padding-top:calc(112px + var(--cx-lgap))}
.lp2-root .cx-local-mid:has(+.cx-how3:not(.cx-h3scroll)){padding-top:calc(80px + 64px)}
@media (min-width:768px){.lp2-root .cx-local-mid:has(+.cx-how3:not(.cx-h3scroll)){padding-top:calc(112px + 64px)}}

/* ---------- parent's handbook v4: heading + line + CTA left, one quiet accordion right (one open at a time) ---------- */
.lp2-root .cx-hb2{--hb-ink:#17394D;--hb-body:#3B4F5E;--hb-mute:rgba(23,57,77,.72);--hb-line:#E2EEF5;--hb-blue:#00A3FF;--hb-blue-d:#0077BB;--hb-sky:#F0FAFF;background:#fff;color:var(--hb-ink)}
.lp2-root .cx-hb2.lp2-sec{padding-block:96px}
.lp2-root .cx-hb2 *,.lp2-root .cx-hb2 *::before,.lp2-root .cx-hb2 *::after{box-sizing:border-box}
.lp2-root .cx-hb2 .lp2-wrap{display:block}
/* header: eyebrow, heading, one line on the left, CTA on the right */
.lp2-root .cx-hb2{background:var(--hb-sky)}
.lp2-root .cx-hb2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin:0 0 48px}
.lp2-root .cx-hb2-head>div{min-width:0;max-width:680px}
.lp2-root .cx-hb2-head .lp2-btn{flex:none}
.lp2-root .cx-hb2-eye{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hb-blue-d);margin:0 0 16px}
.lp2-root .cx-hb2-eye::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--hb-blue)}
#city-body .lp2-root .cx-hb2 h2,.lp2-root .cx-hb2 h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.028em;margin:0 0 16px;text-wrap:balance;color:var(--hb-ink);text-align:left}
#city-body .lp2-root .cx-hb2-intro,.lp2-root .cx-hb2-intro{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--hb-body);margin:0;max-width:36em;text-wrap:pretty}

/* chapters: open cards, two per row */
/* two columns that flow like a book, so a short chapter never leaves an empty box beside a long one */
.lp2-root .cx-hb2-chs{display:flex;flex-direction:column;gap:24px}
.lp2-root .cx-hb2-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.lp2-root .cx-hb2-col{display:flex;flex-direction:column;gap:24px;min-width:0}
/* both columns end level: the cards of the shorter column share out the difference */
.lp2-root .cx-hb2-col>.cx-hb2-ch{flex:1 0 auto}
/* odd chapter counts: the first chapter runs full width, its text and list side by side */
@media (min-width:992px){
 .lp2-root .cx-hb2-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:56px;align-items:start}
 .lp2-root .cx-hb2-lead>.cx-hb2-chn,.lp2-root .cx-hb2-lead>h3{grid-column:1/-1}
 .lp2-root .cx-hb2-lead>.cx-hb2-chb{grid-column:1}
 #city-body .lp2-root .cx-hb2-lead>dl,#city-body .lp2-root .cx-hb2-lead>ol,#city-body .lp2-root .cx-hb2-lead>ul,.lp2-root .cx-hb2-lead>dl,.lp2-root .cx-hb2-lead>ol,.lp2-root .cx-hb2-lead>ul{grid-column:2;margin-top:4px}
 .lp2-root .cx-hb2-lead.cx-hb2-nb>.cx-hb2-chb{grid-column:1/-1;columns:2;column-gap:56px}
 #city-body .lp2-root .cx-hb2-lead.cx-hb2-nb p,.lp2-root .cx-hb2-lead.cx-hb2-nb p{break-inside:avoid}
}
#city-body .lp2-root .cx-hb2-chb p:last-child,.lp2-root .cx-hb2-chb p:last-child{margin-bottom:0}
.lp2-root .cx-hb2-ch{min-width:0;background:#fff;border:1px solid #DCEBF5;border-radius:20px;padding:36px 36px 32px;box-shadow:0 1px 2px rgba(23,57,77,.04)}
.lp2-root .cx-hb2-chn{display:block;font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--hb-blue-d);margin:0 0 10px}
#city-body .lp2-root .cx-hb2-ch h3,.lp2-root .cx-hb2-ch h3{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-.015em;color:var(--hb-ink);margin:0 0 12px;text-wrap:balance}
#city-body .lp2-root .cx-hb2-ch p,.lp2-root .cx-hb2-ch p{font-family:var(--body);font-size:16.5px;line-height:1.65;color:var(--hb-body);margin:0 0 12px;text-wrap:pretty}
#city-body .lp2-root .cx-hb2-ch p:last-child,.lp2-root .cx-hb2-ch p:last-child{margin-bottom:0}

/* common questions: one accordion under the chapters */
.lp2-root .cx-hb2-faq{max-width:860px;margin:40px auto 0}
#city-body .lp2-root .cx-hb2 h3.cx-hb2-fh,.lp2-root .cx-hb2 h3.cx-hb2-fh{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.015em;color:var(--hb-ink);margin:0 0 12px;text-align:center}

/* right: one list */
.lp2-root .cx-hb2-list{min-width:0;border-top:1px solid var(--hb-line)}
.lp2-root .cx-hb2-it{border-bottom:1px solid var(--hb-line);scroll-margin-top:calc(var(--cx-hdr,72px) + 24px)}
#city-body .lp2-root .cx-hb2 h3.cx-hb2-h,.lp2-root .cx-hb2 h3.cx-hb2-h{margin:0;font-size:inherit;line-height:inherit;letter-spacing:0}
.lp2-root .cx-hb2-tg{-webkit-appearance:none;appearance:none;width:100%;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;-webkit-tap-highlight-color:transparent}
.lp2-root .cx-hb2-tg:focus-visible{outline:2px solid var(--hb-blue);outline-offset:2px;border-radius:8px}
.lp2-root .cx-hb2-tt{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.4;letter-spacing:-.005em;color:var(--hb-ink);text-wrap:balance;transition:color .2s}
@media (hover:hover) and (pointer:fine){.lp2-root .cx-hb2-tg:hover .cx-hb2-tt{color:var(--hb-blue-d)}}

/* plus / minus disc */
.lp2-root .cx-hb2-pm{position:relative;flex:none;display:block;width:28px;height:28px;border-radius:50%;border:1px solid #D3E5F0;transition:border-color .25s,background-color .25s}
.lp2-root .cx-hb2-pm::before,.lp2-root .cx-hb2-pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;border-radius:1px;background:var(--hb-ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .25s}
.lp2-root .cx-hb2-pm::after{transform:rotate(90deg)}
.lp2-root .cx-hb2-it.is-open .cx-hb2-pm{border-color:var(--hb-blue);background:var(--hb-blue)}
.lp2-root .cx-hb2-it.is-open .cx-hb2-pm::before,.lp2-root .cx-hb2-it.is-open .cx-hb2-pm::after{background:#fff}
.lp2-root .cx-hb2-it.is-open .cx-hb2-pm::after{transform:rotate(0)}

/* body: open without JS; handbook.js marks the section ready and folds every closed item */
.lp2-root .cx-hb2-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1),visibility 0s}
.lp2-root .cx-hb2[data-hb-ready] .cx-hb2-it:not(.is-open) .cx-hb2-b{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
.lp2-root .cx-hb2-bi{min-height:0;overflow:hidden}
.lp2-root .cx-hb2-txt{padding:0 52px 24px 0;max-width:720px}
#city-body .lp2-root .cx-hb2-txt p,.lp2-root .cx-hb2-txt p{font-family:var(--body);font-size:16.5px;line-height:1.7;color:var(--hb-body);margin:0 0 16px;text-wrap:pretty}
#city-body .lp2-root .cx-hb2-txt p:last-child,.lp2-root .cx-hb2-txt p:last-child{margin-bottom:0}

/* sequence in time: dots on one continuous hairline */
#city-body .lp2-root .cx-hb2 ol.cx-hb2-tl,.lp2-root .cx-hb2 .cx-hb2-tl{list-style:none;margin:20px 0 0;padding:0}
.lp2-root .cx-hb2-tl li{position:relative;display:flex;flex-direction:column;gap:2px;margin:0;padding:0 0 16px 28px}
.lp2-root .cx-hb2-tl li:last-child{padding-bottom:0}
.lp2-root .cx-hb2-tl li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--hb-blue);z-index:1}
.lp2-root .cx-hb2-tl li::after{content:"";position:absolute;left:5px;top:11.5px;bottom:-11.5px;width:1px;background:#BFDDF0}
.lp2-root .cx-hb2-tl li:last-child::after{display:none}
.lp2-root .cx-hb2-tl-k{font-family:var(--ui);font-weight:600;font-size:15px;line-height:23px;color:var(--hb-ink)}
.lp2-root .cx-hb2-tl-v{font-family:var(--body);font-size:16px;line-height:1.55;color:var(--hb-body)}

/* named options: name over a short description */
#city-body .lp2-root .cx-hb2 dl.cx-hb2-dl,.lp2-root .cx-hb2-dl{margin:16px 0 0;padding:0}
.lp2-root .cx-hb2-dl-r{padding:12px 0;border-top:1px solid var(--hb-line)}
.lp2-root .cx-hb2-dl-r:last-child{padding-bottom:0}
.lp2-root .cx-hb2-dl dt{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.4;color:var(--hb-ink);margin:0 0 2px}
.lp2-root .cx-hb2-dl dd{font-family:var(--body);font-size:15.5px;line-height:1.55;color:var(--hb-body);margin:0}
#city-body .lp2-root .cx-hb2 ul.cx-hb2-tags,.lp2-root .cx-hb2 .cx-hb2-tags{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lp2-root .cx-hb2-tags li{margin:0;font-family:var(--ui);font-weight:500;font-size:14px;line-height:1.3;color:var(--hb-ink);background:var(--hb-sky);border:1px solid #D9EEFB;border-radius:999px;padding:6px 12px}
#city-body .lp2-root .cx-hb2 ul.cx-hb2-ul,.lp2-root .cx-hb2 .cx-hb2-ul{margin:16px 0 0;padding:0 0 0 20px}
.lp2-root .cx-hb2-ul li{font-size:16px;line-height:1.6;color:var(--hb-body);margin:0 0 8px}

@media (max-width:991px){
 .lp2-root .cx-hb2-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:32px}
 .lp2-root .cx-hb2-chs,.lp2-root .cx-hb2-col{gap:16px}
 .lp2-root .cx-hb2-cols{display:flex;flex-direction:column;gap:16px}
 .lp2-root .cx-hb2-col{display:contents}
 .lp2-root .cx-hb2-col>.cx-hb2-ch{flex:none}
}
@media (max-width:720px){
 .lp2-root .cx-hb2.lp2-sec{padding-block:80px}
 #city-body .lp2-root .cx-hb2-intro,.lp2-root .cx-hb2-intro{font-size:16px}
 .lp2-root .cx-hb2-ch{padding:28px 22px 24px;border-radius:16px}
 #city-body .lp2-root .cx-hb2-ch h3,.lp2-root .cx-hb2-ch h3{font-size:20px}
 #city-body .lp2-root .cx-hb2-ch p,.lp2-root .cx-hb2-ch p{font-size:16px}
 .lp2-root .cx-hb2-faq{margin-top:48px}
 .lp2-root .cx-hb2-head .lp2-btn{display:flex;width:100%;justify-content:center}
 .lp2-root .cx-hb2-tg{gap:16px;padding:16px 0}
 .lp2-root .cx-hb2-tt{font-size:17px}
 .lp2-root .cx-hb2-txt{padding-right:0;padding-bottom:20px}
 #city-body .lp2-root .cx-hb2-txt p,.lp2-root .cx-hb2-txt p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
 .lp2-root .cx-hb2 *,.lp2-root .cx-hb2 *::before,.lp2-root .cx-hb2 *::after{transition:none!important}
}

/* the Trustpilot "latest review" date under the rating summary is not shown on these pages */
.lp2-root .lp2-rlatest{display:none!important}
/* r27: chapter titles are buttons once JS runs; on phones chapters 02+ fold to label + title + chevron */
.lp2-root .cx-hb2-fb{all:unset;display:block;cursor:default;font:inherit;color:inherit;width:100%}
.lp2-root .cx-hb2-chev{display:none}
@media (max-width:767px){
 .lp2-root .cx-hb2-fold .cx-hb2-fb{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .lp2-root .cx-hb2-fold .cx-hb2-fb:focus-visible{outline:2px solid #00A3FF;outline-offset:4px;border-radius:6px}
 .lp2-root .cx-hb2-fold .cx-hb2-chev{display:block;flex:none;width:28px;height:28px;margin-top:-2px;border-radius:50%;background:#F0FAFF;border:1px solid #DCEBF5;position:relative;transition:transform .25s ease}
 .lp2-root .cx-hb2-fold .cx-hb2-chev::after{content:"";position:absolute;left:50%;top:45%;width:7px;height:7px;border:solid #0082CC;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
 .lp2-root .cx-hb2-fold .cx-hb2-ch:not(.is-shut) .cx-hb2-chev{transform:rotate(180deg)}
 .lp2-root .cx-hb2-fold .cx-hb2-ch.is-shut{padding-top:20px;padding-bottom:20px}
 .lp2-root .cx-hb2-fold .cx-hb2-ch.is-shut .cx-hb2-chn{margin-bottom:6px}
 #city-body .lp2-root .cx-hb2-fold .cx-hb2-ch.is-shut h3,.lp2-root .cx-hb2-fold .cx-hb2-ch.is-shut h3{margin:0}
 .lp2-root .cx-hb2-fold .cx-hb2-ch.is-shut>:not(.cx-hb2-chn):not(h3){display:none}
 .lp2-root .cx-hb2-fold .cx-hb2-col>.cx-hb2-ch{flex:none}
}