/* Inter, hosted here and preloaded (QA S11): from Google Fonts it swapped in late and re-wrapped the hero (one
   variable file per range, weights 400 to 700) */
@font-face{font-family:Inter;src:url("/_site/fonts/Inter-latin.woff2") format("woff2");font-weight:400 700;font-display:block;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Inter;src:url("/_site/fonts/Inter-latin-ext.woff2") format("woff2");font-weight:400 700;font-display:block;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Caveat;src:url("/_site/fonts/Caveat-SemiBold-latin.woff2") format("woff2");font-weight:600;font-display:block}
/* The page's own rules, on top of base.css (the canvas stylesheets). Laid out from the boards: V2Hero, L3.b, L4.d,
   SecFeatures, V2Accelerators, V2YearPage, V2PassSheet. */
html{scroll-behavior:smooth}
body{background:var(--bg)}
img{max-width:100%}
.center{text-align:center;margin-left:auto;margin-right:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* the Pass card, at a width the page sets */
.pc{width:min(var(--pc-w),100%);position:relative}
.pc .pass{width:100%}
.pc--app > *{width:100%}

/* header */
.site-h__in{max-width:1240px}

/* hero, H1.a */
.hero-sec{padding-top:clamp(40px,7vw,110px)}
.hero{align-items:center}
.hero__finder{margin-top:32px;max-width:600px;position:relative;z-index:6}

@media (max-width:900px){
  .hero{gap:40px}
  .hero__h{line-height:1;margin-top:14px}
  .hero__copy .sec-lede{font-size:16px}
  .hero__finder{margin-top:24px}
  .hero__media{display:none} /* H1p: the phone hero is the promise and the finder, no film */

  .us-row{gap:18px 32px}
}

/* the finder (F1) inside a page */
.dd-btn[disabled]{cursor:default}
.dd--row .dd-note,.dd--stack .dd-note{margin-top:6px}
@media (max-width:560px){
  .dd--row .dd-fields{grid-template-columns:1fr}
  .dd--row .dd-field + .dd-field{border-left:0;border-top:1px solid var(--hair)}
  .dd--row .dd-menu{width:100%;max-width:none}
}

/* rating, uni strip (RatingRow, UniStrip) */
.rr{display:inline-flex;align-items:center;gap:14px}
.rr-faces{display:flex;flex:none}
.rr-faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2.5px solid var(--bg);margin-left:-10px;background:var(--band)}
.rr-faces img:first-child{margin-left:0}
.rr-stars{display:flex;gap:2px;color:var(--star)}
.rr-txt{font-size:14px;line-height:1.3;color:var(--muted)}
.rr-txt b{color:var(--fg);font-weight:700}
a.rr--link{color:inherit;text-decoration:none;border-radius:12px}
a.rr--link:hover .rr-txt{color:var(--fg)}
a.rr--link:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.us{display:flex;flex-direction:column;align-items:center;gap:22px;padding:8px 20px}
.us p{margin:0}
.us-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 56px}
.us-row img{display:block;width:auto;opacity:.55;filter:grayscale(1)}

/* trust under a button (TrustUnder) */
.tu{display:flex;flex-direction:column;gap:12px;align-items:var(--tu-align,center);text-align:var(--tu-text,center);padding:4px 0}
.paym{display:inline-flex;align-items:center;gap:12px;color:var(--faint)}
.paym svg{display:block;height:15px;width:auto}
.paym .paym__ideal{height:18px}
.tu-terms{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:var(--tu-align,center);margin:0;padding:0;list-style:none;font-size:13px;color:var(--faint)}
.tu-terms li{display:inline-flex;align-items:center;gap:6px}
.tu-terms svg{flex:none;color:var(--primary)}
.tu-terms a{color:var(--faint);text-decoration:underline;text-decoration-color:var(--hair-3);text-underline-offset:3px}

/* the Passes, L3.b on a laptop */
.members{background:var(--bg)}
.l3{padding:clamp(80px,9vw,120px) clamp(20px,5vw,80px)}

.l3-cmp{width:100%;max-width:900px;margin:0 auto;border-collapse:collapse;font-size:16px}
.l3-cmp th,.l3-cmp td{padding:18px 12px;border-bottom:1px solid var(--hair);text-align:center}
.l3-cmp tbody th{text-align:left;font-weight:500}
.l3-cmp tbody th small{display:block;margin-top:4px;font-weight:400;font-size:14px;color:var(--faint)}
.l3-cmp thead th{padding-bottom:22px;font:600 15px/1 var(--display)}
.l3-cmp td.t{background:rgb(5 97 75 / .045)}

/* the Passes, L4.d on a phone */
.l4{padding:40px 24px 56px;flex-direction:column}
@media (max-width:760px){.l4{display:flex}}

.l4-line{margin:18px 0 0;min-height:42px}
.l4-list{list-style:none;margin:20px 0 0;padding:0}
.l4-list li{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--hair);font-size:15px;transition:opacity var(--d-ui) var(--out)}
.l4-list li .lab{flex:1}
.l4-list li.off{opacity:.3}

.l4-price{margin:0;font:600 26px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.l4-note{margin:8px 0 0;min-height:18px}
.l4 .btn{margin-top:14px}

/* the features, left and right (SecFeatures) */
.fr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:center;margin-top:clamp(72px,9vw,128px)}
.fr--flip .fr-text{order:2}
.fr-text h3{margin:0;font:600 clamp(28px,3.4vw,40px)/1.08 var(--display);letter-spacing:-.025em}
.fr-text p{margin:16px 0 0;font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--muted);max-width:42ch}
@media (max-width:760px){.fr{grid-template-columns:1fr;gap:28px;margin-top:72px}.fr--flip .fr-text{order:0}.fr-demo .fx{aspect-ratio:auto;min-height:360px;padding:32px 0;border-radius:var(--r-card)}}

/* the pain (V2Pain), placeholders until Dima's document */
@media (max-width:760px){.pr{grid-template-columns:1fr;gap:28px;margin-top:64px}}

/* method, mission, reviews, final */
.shield{margin-top:64px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline}

.founders{margin-top:88px;padding-top:56px;border-top:1px solid var(--on-dark-line)}

.q-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.q-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--band)}
.q-who a{font-weight:600;font-size:15px;color:var(--fg);display:inline-flex;align-items:center;gap:6px}
.q-who small{display:block;font-size:13px;color:var(--faint);margin-top:2px}
.q-li{color:#0a66c2}
.quote{margin:0}
.final{text-align:center}
.final .narrow{max-width:720px}

.foot{max-width:none}

/* the sheet a Pass button opens (P2) */
.scrim{position:fixed;inset:0;z-index:var(--z-sheet);overflow-y:auto}
.sheet{margin:auto;position:relative}
.sheet-h{margin:0;font:600 22px/1.15 var(--display)}
.sheet-pass{width:88px;flex:none}
body.is-locked{overflow:hidden}
@media (max-width:560px){.scrim{padding:12px;align-items:end}.sheet{padding:20px;border-radius:var(--r-card)}}

/* your year (Y1) */
.yp{position:relative}

.opt-r{display:grid;justify-items:end;gap:10px}
.yp .opt .pc{width:var(--opt-img,110px)}

.sum-then{margin:0;min-height:18px}
.yp .bar{display:none}
@media (max-width:900px){
  .yp .sum{display:none}
  .yp .opt{grid-template-columns:72px 1fr auto;gap:12px;padding:12px;--opt-img:72px}

  .yp .bar{display:flex;position:fixed;z-index:var(--z-dock)}
  .yp .bar p span{display:block}
}

/* thanks */
.ty-in{box-sizing:content-box;max-width:680px;margin:0 auto;padding:var(--sec) var(--edge);text-align:center;display:grid;justify-items:center}
.ty-pass{margin-bottom:40px}
.ty h1{font-size:var(--display-1);font-weight:700}
.ty-what{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px;font-size:16px;color:var(--fg)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dima's notes, 19 Oct 11:40 (DIMA-563): the highlight starts below the line above so its descenders show; the finder
   row never truncates, its button is a normal button in the row; below 1170px (where the row would reach the film) the finder is the stack. */
.mark{background:linear-gradient(transparent .3em,var(--highlight) .3em,var(--highlight) .92em,transparent .92em)}
.hero__finder{max-width:none;width:min(660px,calc(100% + 96px))}

.dd--row{flex-direction:row;align-items:stretch;padding:6px;border-radius:var(--r-card);gap:6px}
.dd--row .dd-fields{grid-template-columns:auto minmax(max-content,1fr) auto}
.dd--row .dd-value{overflow:visible;text-overflow:clip}
.dd--row .dd-note{position:absolute;left:6px;right:6px;top:calc(100% + 10px);margin:0}
@media (max-width:1180px){
  .hero__finder{width:100%;max-width:520px}
  .dd--row{flex-direction:column}
  .dd--row .dd-fields{grid-template-columns:1fr}
  .dd--row .dd-field + .dd-field{border-left:0;border-top:1px solid var(--hair)}
  .dd--row .dd-menu{width:100%;max-width:none}
  .dd--row .dd-note{position:static}
}

[data-pass-list]{display:grid;gap:14px}
[data-pass-list].is-off{opacity:.38}
.ty-next{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center;margin-top:32px}

/* ===== a program's page, in sections (19 Oct). Dima, 19 Oct 12:02: the only visual language is the app's Passes, the
   home's Fx line demos and the green C3.3 seal; one left edge everywhere; phone first. ===== */
.sec{scroll-margin-top:72px}
.kick{margin:0;font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}

.cs{background:var(--card);border-radius:var(--r-in);padding:16px 18px;display:flex;gap:12px;align-items:baseline;box-shadow:var(--ring)}

.cs b{font:600 17px/1.25 var(--display);letter-spacing:-.01em}

@media (max-width:560px){.cs{padding:14px 16px}}

/* live with a Coach: the approved psych Lifesaver page's sales card (its sales.css S8, ported to our tokens) */
.sp-buy{margin-top:40px;display:flex;flex-wrap:wrap;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--elev-float);overflow:hidden;color:var(--fg)}
.sp-buy-pass{flex:1 1 360px;min-width:0;display:grid;place-items:start center;padding:clamp(40px,5vw,64px) 32px 44px;background:var(--paper-2)}
.sp-buy-stick{position:sticky;top:96px;display:grid;justify-items:center;gap:28px;width:100%}
.sp-buy-stick .lf-passwrap{width:min(380px,100%);transform:rotate(-3deg)}
.sp-buy-body{flex:1 1 420px;min-width:0;padding:clamp(26px,3.6vw,44px);display:flex;flex-direction:column;gap:18px}
.sp-h2{margin:0;font:600 clamp(28px,3vw,34px)/1.08 var(--display);letter-spacing:-.02em;color:var(--fg)}
.sp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sp-price b{font:600 clamp(44px,5vw,60px)/1 var(--display);letter-spacing:-.03em}
.sp-per{font:500 15px/1.3 var(--body);color:var(--muted)}
.sp-incl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.sp-incl li{display:flex;gap:10px;align-items:flex-start;font:500 15px/1.4 var(--body)}
.sp-incl .tick{flex:none;margin-top:1px}
.sp-buybtns{display:grid;gap:12px;width:100%;margin:6px 0 4px}
.sp-pick{font:700 22px/1 Caveat,cursive;color:#25365C}
.sp-opts{display:grid;gap:10px}
.sp-opt{position:relative;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-in);background:var(--paper);box-shadow:var(--ring);cursor:pointer;transition:box-shadow .15s,background .15s}
.sp-opt:hover{box-shadow:inset 0 0 0 1px var(--primary)}
.sp-opt input{position:absolute;opacity:0;pointer-events:none}
.sp-dot{width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--hair-3);transition:box-shadow .15s}
.sp-opt:has(input:checked){background:var(--tint);box-shadow:var(--ring-on)}
.sp-opt:has(input:checked) .sp-dot{box-shadow:inset 0 0 0 6px var(--primary)}
.sp-opt:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.sp-opt-t{display:grid;gap:3px;min-width:0}
.sp-opt-t b{font:600 16px/1.35 var(--body);color:var(--fg);overflow-wrap:break-word;hyphens:auto}
.sp-opt-t em{display:inline-block;white-space:nowrap;font:600 11px/1 var(--body);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);background:var(--card);border-radius:999px;padding:4px 7px;margin-left:8px;vertical-align:2px;box-shadow:var(--ring)}
.sp-opt-t small{font:500 13px/1.2 var(--body);color:var(--muted)}
.sp-opt-p{font:600 20px/1 var(--display);color:var(--fg)}
.sp-go{margin-top:4px}
.sp-pays{display:flex;flex-wrap:wrap;gap:8px}
.sp-pay{display:grid;place-items:center;width:64px;height:40px;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--ring)}
.sp-pay svg{display:block;height:20px;width:auto}
.sp-pay--ideal svg{height:24px}.sp-pay--visa svg{height:15px}.sp-pay--mc svg{height:28px}.sp-pay--ap svg{height:24px}
.sp-fine{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
@media (max-width:560px){.sp-opt{gap:10px;padding:14px}.sp-opt-t b{font-size:15px}.sp-opt-p{font-size:18px}}
@media (max-width:760px){.sp-buy-pass{padding:36px 20px 28px}.sp-buy-stick{position:static}.sp-buy-body{padding:24px 20px 28px}}
/* the Zero-Stress Guarantee: the green C3.3 seal, the headline, the condition, three numbered steps (the psych page's) */
.zs{margin-top:28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;background:var(--card);border-radius:var(--r-card);padding:clamp(24px,4vw,48px)}
.zs-c{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--muted);max-width:52ch}
.zs-t .sp-h2{margin-top:8px}
.sp-steps{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:520px}
.sp-steps li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-sm);background:var(--paper);box-shadow:var(--ring)}
.sp-steps .n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--primary);color:var(--primary);font:700 14px/1 var(--display);rotate:-6deg}
.sp-steps b{display:block;font:600 16px/1.2 var(--display);color:var(--fg)}
.sp-steps small{display:block;margin-top:2px;font:400 14px/1.35 var(--body);color:var(--muted)}
@media (max-width:760px){.zs{grid-template-columns:1fr;justify-items:start}.zs .sl{--sl:128px !important}}
/* the free study session: plain lines and one button */
.fs{margin-top:28px;background:var(--card);border-radius:var(--r-card);padding:clamp(22px,3vw,32px);display:grid;gap:10px;justify-items:start}

/* the green C3.3 seal */
/* own layer (will-change) so the GPU draws the shadow round the spinning rose instead of a repaint every frame */
.sl{position:relative;flex:none;display:inline-block;width:var(--sl);height:var(--sl);filter:drop-shadow(0 14px 16px rgb(14 42 34 / .3));will-change:transform}
.sl-rose{position:absolute;inset:0;width:100%;height:100%;animation:slspin 40s linear infinite}
@keyframes slspin{to{transform:rotate(360deg)}}
.sl-core{position:absolute;inset:22.6%;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--sl-core);box-shadow:inset 0 2px 0 rgb(255 255 255 / .25),inset 0 -6px 14px rgb(0 0 0 / .35);isolation:isolate}
.sl-core b{display:block;font:800 calc(var(--sl) * .17)/1 var(--display);position:relative;overflow:hidden;color:#EEEBE2}
/* the foil: a sliding copy of the gradient, darken-blended so it only tints the light text; transform keeps it off the main thread */
.sl-core b::after{content:"";position:absolute;top:0;bottom:0;left:-200%;width:400%;background:var(--sl-foil);background-size:50% 100%;mix-blend-mode:darken;pointer-events:none;animation:slfoil 4s var(--io) infinite}
.sl-core small{display:block;margin-top:3px;font:700 calc(var(--sl) * .045)/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--sl-ink);padding:0 8%}
@keyframes slfoil{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.sl-rose,.sl-core b::after{animation:none}}

/* our promises: words only */
.pm-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.pm{background:var(--card);border-radius:var(--r-card);padding:26px}
.pm h3{margin:0;font:600 21px/1.15 var(--display)}
.pm p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){.pm-row{grid-template-columns:1fr;gap:10px}.pm{padding:20px}.pm h3{font-size:19px}}

@media (max-width:900px){.yp .sum{display:grid;margin-top:32px;position:static}}
/* questions */
.qa-list{margin-top:36px;border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{cursor:pointer;list-style:none;padding:18px 0;font:600 17px/1.3 var(--display);display:flex;justify-content:space-between;gap:16px}
.qa summary::after{content:"+";font:400 22px/1 var(--body);color:var(--faint)}
.qa[open] summary::after{content:"\2212"}
.qa summary::-webkit-details-marker{display:none}
.qa p{margin:0 0 18px;font-size:16px;line-height:1.55;color:var(--muted)}

/* the dock: a slim bar in reach (Maven's enroll box) */
.dock{position:fixed;z-index:var(--z-dock);left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:8px 8px 8px 18px;border-radius:999px;background:rgb(255 255 255 / .94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--elev-float);font-size:14px;color:var(--muted);max-width:calc(100% - 24px)}

.dock .btn--sm{flex:none}
/* the checkout: one calm line when the app refuses, with a retry and a second door */
.ck-err{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.ck-err a{color:var(--primary);font-weight:600}
[aria-busy="true"]{opacity:.7;pointer-events:none}
/* the guarantee is the Lifesaver's own: the last row of the Lifesaver card (Dima's second review, 19 Oct) */
.sp-buy .zs{flex:1 1 100%;margin:0;border-radius:0;background:var(--paper-2);box-shadow:inset 0 1px 0 var(--hair)}
/* the free study session: the signup pages' own look (DIMA-580): fractal glass ground, the Coach cut out with a
   glass name card, the dark badge */
.fsb{position:relative;overflow:hidden;border-radius:var(--r-card);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:end;background:var(--bg);box-shadow:var(--elev-card)}
.fsb::before{content:"";position:absolute;inset:0;background:url("/_site/free/glass-light.jpg") 60% 30%/cover no-repeat}
.fsb::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgb(244 248 246 / .97) 0%,rgb(244 248 246 / .9) 45%,rgb(244 248 246 / .1) 70%,rgb(244 248 246 / 0) 100%)}
.fsb > *{position:relative;z-index:1}
.fsb-media{position:relative;align-self:end;display:grid;justify-items:center;padding:28px 20px 0}
.fsb-cut{display:block;width:min(340px,100%);height:auto;aspect-ratio:var(--ar,548/714)}
.fsb-name{position:absolute;left:20px;right:auto;bottom:24px;display:grid;gap:3px;padding:12px 16px;border-radius:var(--r-in);background:rgb(255 255 255 / .72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8),0 18px 30px -18px rgb(14 42 34 / .5)}
.fsb-name b{font:600 17px/1.2 var(--display);color:var(--fg)}
.fsb-name small{font-size:13px;color:var(--muted)}
.fsb-t{display:grid;justify-items:start;gap:16px;padding:clamp(28px,4vw,56px)}
.fsb-badge{padding:9px 13px;border-radius:var(--r-sm);background:var(--fg);color:#fff;font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.fsb-h{margin:0;font:600 clamp(30px,3.6vw,44px)/1.05 var(--display);letter-spacing:-.03em;color:var(--fg);max-width:16ch}
.fsb-sub{margin:0;font-size:17px;line-height:1.5;color:var(--muted);max-width:44ch}
.fsb-when{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-sm);background:var(--card);box-shadow:0 1px 2px rgb(14 42 34 / .06);font:600 15px/1.2 var(--body);color:var(--fg)}
.fsb-when svg{color:var(--muted)}
.fsb-go{min-width:220px}
.fsb-fine{margin:0;font-size:14px;color:var(--muted)}
.fsb-soon{margin:0;font:600 15px/1.3 var(--body);color:var(--muted)}
@media (max-width:760px){
  .fsb{grid-template-columns:1fr}
  .fsb::after{background:linear-gradient(180deg,rgb(244 248 246 / .15) 0%,rgb(244 248 246 / .88) 300px,rgb(244 248 246 / .97) 420px)}
  .fsb-media{justify-items:center;padding:24px 16px 0}
  .fsb-cut{width:min(280px,80%)}
  .fsb-name{left:16px;bottom:16px}
  .fsb-t{padding:24px 20px 28px}
}
/* no layout jumps (Dima, 19 Oct: "it keeps shifting up and down"): the Practice demo's "why" box kept growing and
   shrinking the demo, moving everything below it; now its space is held and it only fades. The dock shows and hides
   without leaving the layout. */
.fxw--practice .why{max-height:none;padding:10px 12px;animation:fxp-why-fade 8s var(--out) infinite}
@keyframes fxp-why-fade{0%,20%{opacity:0;transform:translateY(-4px)}28%,72%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.fxw--practice .why{animation:none;opacity:1}}
.dock{transition:opacity var(--d-fast) var(--out),transform var(--d-ui) var(--sheet),visibility var(--d-fast)}
.dock[hidden]{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,12px)}
/* QA report 1, 19 Oct */
/* S1: every anchor lands below the sticky header (64px), not under it */
[id]{scroll-margin-top:80px}
/* S7: one left edge on every width: the header, the hero, the sections and the footer all start where the
   1120px column starts (the .sec padding on narrow screens) */
.site-h__in{max-width:none;padding-left:max(clamp(20px,6vw,80px),calc((100% - 1120px) / 2));padding-right:max(clamp(20px,6vw,80px),calc((100% - 1120px) / 2))}
.hero{max-width:1120px}
.foot{padding-left:max(clamp(20px,6vw,80px),calc((100% - 1120px) / 2));padding-right:max(clamp(20px,6vw,80px),calc((100% - 1120px) / 2))}
.sec > .narrow{max-width:1120px}
.sec > .narrow > *{max-width:720px}
.sec > .narrow > .qa-list{max-width:820px}
.final,.center{text-align:left}
.center{margin-left:0}

/* S9: tap targets at least 44px on a phone */
@media (max-width:760px){
  .site-h__in > a:first-child{display:inline-flex;align-items:center;min-height:44px}
  .site-h .btn--sm{min-height:44px}
  a.link,.foot a,.q-who a,.tu-terms a,.sec-lede > a{display:inline-flex;align-items:center;min-height:44px}
  .foot{row-gap:4px}
}
.l3{padding-left:clamp(20px,6vw,80px);padding-right:clamp(20px,6vw,80px)}

.l4{padding-left:clamp(20px,6vw,80px);padding-right:clamp(20px,6vw,80px)}
/* S11: the wide finder row says "Pick" for the year, in CSS so the server's first draw already matches */
@media (min-width:1181px){.dd--row .dd-more{display:none}}

/* S2: the dock sized to its words, centred between 12px margins (left:50% let a phone squeeze its label) */
.dock{left:12px;right:12px;margin:0 auto;width:max-content;transform:none}
.dock[hidden]{transform:translateY(12px)}

.l3-cmp{margin:0}
@media (max-width:760px){.foot a{min-width:44px;justify-content:center}}

/* ---------- your year (Website 3.1, R4+R5+R9: the canvas "Y2 Your year page") ---------- */
.yy{max-width:1180px;margin:0 auto;padding:64px 40px 120px}
.yy-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(48px,7vw,104px);align-items:start}

.yy .yy-h1{margin:0;line-height:1;font-size:var(--display-1)}
.yy-years{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:28px;padding:4px;border-radius:999px;background:var(--card);box-shadow:var(--ring)}
.yy-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px - (var(--n) - 1) * 4px) / var(--n));border-radius:999px;background:var(--fg);transform:translateX(calc(var(--i) * (100% + 4px)));transition:transform .55s var(--out)}
.yy-years a{display:inline-grid;place-items:center;min-height:44px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--body);color:var(--muted);text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease)}
.yy-years a{position:relative}
.yy-years a.on{color:#fff}
.yy-years:not(:has(.yy-pill)) a.on{background:var(--fg)}
.yy-one{margin:28px 0 0;font:600 15px/1 var(--body);color:var(--muted)}
.yy-promise{margin:36px 0 0;font:600 clamp(24px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.025em;color:var(--fg)}
.yy-proof{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
.yy-proof li{display:grid;gap:6px;align-content:start}
.yy-proof svg.ic{width:40px;height:40px;margin-bottom:6px;overflow:visible}
.yy-proof b{font:600 18px/1.25 var(--display);letter-spacing:-.015em}
.yy-proof span{font-size:15px;line-height:1.45;color:var(--muted)}
.yy-sec{margin-top:clamp(64px,8vw,96px)}
.yy-sec h2{margin:0;font:600 clamp(24px,2.4vw,30px)/1.1 var(--display);letter-spacing:-.025em}
.yy-courses{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.yy-courses li{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:18px 18px 20px;border-radius:var(--r-in);background:var(--card);box-shadow:var(--ring);font:600 16px/1.25 var(--display);letter-spacing:-.01em;color:var(--fg);hyphens:auto;overflow-wrap:anywhere}
.yy-courses li span{font:500 12px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--faint);letter-spacing:.02em}
.yy-more{display:none;margin-top:12px;width:100%;min-height:48px;border:0;border-radius:16px;background:var(--card);box-shadow:var(--ring);font:600 15px/1 var(--body);color:var(--fg);cursor:pointer}
.yy .opt--sm{--opt-img:72px}
.yy-side{position:sticky;top:88px}
.yy-side .sum{position:static}
.yy-pay{display:grid;gap:10px}
.yy-tag{display:inline-block;margin-left:8px;font:600 11px/1 var(--body);padding:4px 7px;border-radius:999px;background:var(--tint);color:var(--primary);vertical-align:2px}
.yy-what-h{margin:14px 0 0;font:600 14px/1.2 var(--body);color:var(--fg)}
.yy-inc{display:grid}
.yy-what{grid-area:1/1;align-self:start;margin:2px 0 0;padding:0;list-style:none;display:grid;gap:10px;transition:opacity .5s var(--out) .14s,transform .5s var(--out) .14s}
.yy-what.is-off{opacity:0;transform:translateY(6px);visibility:hidden;transition:opacity .12s var(--in),transform .12s var(--in),visibility 0s .12s}
.yy-what li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.4;color:var(--fg)}
.yy-what svg{margin-top:1px;color:var(--primary)}
.yy-then{margin:0}
.yy-rate{margin:18px 0 0;display:flex;gap:8px;align-items:baseline;justify-content:center;font-size:14px;color:var(--muted)}
.yy-rate b{color:var(--fg);font-weight:600}
/* Checkout on laptops: pinned beside the courses on a tall enough window; on a shorter one site.js marks it is-tall and
   it scrolls with the page, so no part of it is ever out of reach. The includes box fits the picked pass. */
@media (min-width:901px){
.yy-side{top:80px}
.yy-side.is-tall{position:static}
.yy-side .sum{padding:24px;gap:12px}
.yy-pay{gap:8px}
.yy-side .yy-what-h{margin-top:18px}
.yy-side .yy-inc{display:block;padding:12px 16px}
.yy-side .yy-what.is-off{display:none}
.yy-what{gap:6px 16px}
.yy-what li{line-height:1.3;gap:10px}
.yy-side .sum-total{padding-top:20px}
.yy-side .tu{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 16px;padding:0}
.yy-side .tu-terms{gap:4px 12px}
.yy-rate{margin-top:12px}
}
.yy-rate i{font-style:normal;color:var(--star)}
.yy .yy-bar{display:none}
@media (max-width:900px){
  .yy{padding:28px 20px 48px}
  .yy-grid{grid-template-columns:1fr;gap:0}
  .yy-proof{grid-template-columns:1fr}
  .yy-proof li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px}
  .yy-proof svg.ic{grid-row:span 2;margin-bottom:0}
  .yy-courses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yy-courses li{gap:12px;padding:14px 14px 16px;font-size:14px}
  .yy-sec:not(.is-all) .yy-courses li:nth-child(n+7){display:none}
  .yy-sec:not(.is-all) .yy-more{display:block}
  .yy-side{position:static;margin-top:56px}
  .yy-side .sum{padding:22px 18px}
  /* the phone bar (Bence 27 Oct): solid white, one hairline and a soft lift, the Pass over what a month costs, the
     button beside; clear of the home indicator; slides up in and down out */
  .yy .yy-bar{display:flex;position:fixed;z-index:var(--z-dock);gap:16px;padding:12px var(--edge) max(12px,env(safe-area-inset-bottom));background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--hair);box-shadow:0 -16px 32px -24px rgb(14 42 34 / .4);transition:transform var(--d-ui) var(--sheet),opacity var(--d-fast) var(--out);will-change:transform}
  .yy .yy-bar.is-off{transform:translateY(calc(100% + 16px));opacity:0;pointer-events:none;transition-duration:.28s;transition-timing-function:var(--in)}
  .yy .yy-bar p{display:grid;gap:3px;font-size:13px;line-height:1.2;color:var(--muted)}
  .yy .yy-bar p b{display:block;font:600 20px/1.1 var(--display);letter-spacing:-.01em;color:var(--fg)}
  .yy .yy-bar p b span{display:inline}
  .yy .yy-bar p b small{display:inline;font:500 14px/1 var(--body);letter-spacing:0;color:var(--muted);white-space:nowrap}
  .yy .yy-bar .btn{flex:none;height:48px;padding:0 20px}
}
@media (prefers-reduced-motion:reduce){.yy .yy-bar{transition:opacity .2s var(--ease)}.yy .yy-bar.is-off{transform:none}.yy-pill,.yy-what{transition:none!important}}

/* R5 (canvas Y0b): the finder turns into the year's page in one 0.5 s glide; site.js skips every other page change */
@view-transition{navigation:auto}
.yy .yy-h1{width:fit-content;view-transition-name:yy-title}
.yy-years a.on,.yy-one{view-transition-name:yy-year}
.site-h{view-transition-name:site-h}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:var(--out)}
::view-transition-new(yy-title){height:100%;width:auto}
/* the finder says "Psychology (EN)", the title "Psychology (English)": the old words leave fast instead of stretching */
::view-transition-old(yy-title),::view-transition-old(yy-year){animation:vt-out .12s var(--in) both}
::view-transition-new(yy-title),::view-transition-new(yy-year){animation:vt-in-fast .2s var(--out) both}
@keyframes vt-in-fast{from{opacity:0}}
::view-transition-old(root){animation:vt-out .2s var(--out) both}
::view-transition-new(root){animation:vt-in .4s var(--out) .175s both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
html.is-going body::before{content:"";position:fixed;z-index:var(--z-veil);top:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:0 50%;animation:go-bar 8s cubic-bezier(.1,.6,.2,1) .3s forwards}
@keyframes go-bar{to{transform:scaleX(.9)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html.is-going body::before{display:none}}
.yy .yy-bar p b{white-space:nowrap}
.yy-then:empty::before{content:"\a0"}

/* Cohort page (canvas V3Cohort, approved 27 Oct), on the shared tokens of site-system.css. */
.yy-bc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;font-size:var(--t-sm);color:var(--faint)}
.yy-bc a{color:var(--muted);text-decoration:none}
.yy-bc [aria-current]{color:var(--fg);font-weight:600}
.yy-bc > span[aria-hidden]{color:var(--hair-strong,var(--faint))}
@media (hover:hover) and (pointer:fine){.yy-bc a:hover{color:var(--primary)}}
/* Monthly | Yearly (Bence 27 Oct: smaller and lighter on every screen): a small track as wide as its words, one white
   pill that slides to the picked side on --io; on a phone each side stays a 44px tap target with the pill drawn inside */
.yy-iv{position:relative;z-index:0;justify-self:start;display:grid;grid-template-columns:1fr 1fr;width:fit-content;margin:0 0 12px;padding:3px;border-radius:999px}
.yy-iv::after{content:"";position:absolute;z-index:-2;inset:0;border-radius:999px;background:var(--bg)}
.yy-iv::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--card);box-shadow:var(--elev-card);transition:transform var(--d-ui) var(--io)}
.yy-iv:has([data-interval="YEAR"].on)::before{transform:translateX(100%)}
.yy-iv button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 14px;border:0;border-radius:999px;background:none;font:500 14px/1 var(--body);color:var(--muted);cursor:pointer}
.yy-iv button.on{color:var(--fg);font-weight:600}
.yy-save{padding:3px 6px;border-radius:999px;background:var(--tint);color:var(--primary);font:700 11px/1 var(--body)}
@media (max-width:900px){.yy-iv{padding:0 3px}.yy-iv::after{inset:4px 0}.yy-iv::before{top:7px;bottom:7px}.yy-iv button{min-height:44px}}
/* the Recommended tab sits on the card's top edge */
.yy .opt{position:relative}
.yy .opt .yy-tag{position:absolute;top:-9px;left:16px;margin:0;padding:4px 8px;font:700 11px/1 var(--body);letter-spacing:.01em;background:var(--primary);color:#fff;border-radius:999px}
.yy .opt:has(.yy-tag){margin-top:10px}
/* the three passes (Bence 27 Oct: more room): a real pass picture, the name over one quiet line, the price over its radio */
.yy .opt--sm{grid-template-columns:var(--opt-img) minmax(0,1fr) auto;gap:16px;padding:16px 18px 16px 16px;--opt-img:76px}
.yy .opt--sm b{font-size:17px;line-height:1.2}
.yy .opt--sm b + span{margin-top:6px;font-size:var(--t-sm);line-height:1.35;color:var(--muted);text-wrap:balance}
.yy .opt-r{gap:10px;align-self:stretch;align-content:space-between}
.yy .opt--sm em{font-size:17px}
.yy-pay > .opt + .opt{margin-top:2px}
@media (max-width:900px){.yy .opt--sm{gap:12px;padding:14px;--opt-img:60px}.yy .opt--sm b{font-size:16px}.yy .opt--sm b + span{font-size:13px}.opt-sep{display:block;height:0;overflow:hidden}}
/* what the picked pass includes: one tinted box, two columns where there is room */
.yy-inc{padding:16px;border-radius:16px;background:var(--tint)}
.yy-what{grid-template-columns:1fr 1fr;column-gap:16px}
.yy-what li{font-size:var(--t-sm)}
/* Not your program or year? */
.oy{margin-top:var(--sec)}
/* the cohort page on the one system: the header's left edge, the section rhythm and heading size of every page */
.yy{max-width:none;padding:clamp(32px,23.4px + 2.2vw,56px) var(--edge) var(--sec)}
.yy-grid{column-gap:clamp(48px,2.3px + 5.7vw,104px)}
.yy .mb{margin-top:var(--sec)}
.yy .mb-h,.yy .mb-qa h2{font:700 var(--h2)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}
.yy .mb-lede{font-size:var(--t-lede);max-width:var(--w-lede)}
.yy .mb-qa{margin-top:var(--sec);grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-card)}
.yy .mb-qa > :last-child{grid-column:span 2}
.yy .mb-qa .qa summary{font-size:var(--t-lg)}
.yy .mb-qa .qa p{font-size:var(--t-body)}
.yy-proof span,.yy-what li{font-size:var(--t-sm)}
.yy-courses li{border-radius:var(--r-in)}
.oy h2{margin:0;font:700 var(--h2)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance;max-width:var(--w-h)}
.oy-p{margin:var(--gap-h) 0 0;font-size:var(--t-lede);color:var(--muted);max-width:var(--w-lede)}
.oy-p b{color:var(--fg);font-weight:600}
.oy-list{list-style:none;margin:var(--gap-lede) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card)}
.oy-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:20px var(--pad-card);border-radius:var(--r-card);background:var(--card);box-shadow:var(--elev-card);color:var(--fg);text-decoration:none}
.oy-list span{display:grid;gap:4px}
.oy-list b{font:600 var(--t-lg)/1.25 var(--display);letter-spacing:-.01em}
.oy-list small{font-size:var(--t-sm);color:var(--muted)}
.oy-list svg{flex:none;color:var(--primary);transition:transform .25s var(--out)}
@media (max-width:900px){.yy .yy-bar p{flex:1;min-width:0}.yy .yy-bar p b{display:block}.yy-what.is-off{display:none}.oy-list{grid-template-columns:1fr}.yy-what{grid-template-columns:1fr}.yy .mb-qa{grid-template-columns:1fr}.yy .mb-qa > :last-child{grid-column:auto}}

/* R10 (canvas board R10): 14 days money back, one line, then Good to know */
.mb{margin-top:clamp(96px,11vw,160px)}
.mb-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);align-items:center}
.mb-h{margin:0;font:700 clamp(36px,4.3vw,62px)/1.02 var(--display);letter-spacing:-.04em;color:var(--fg)}
.mb-h span{display:block}
.mb-lede{margin:24px 0 0;max-width:36ch;font-size:19px;line-height:1.5;color:var(--muted)}
.mb-lede b{color:var(--fg);font-weight:600}
.mb-policy{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:20px;font:600 16px/1 var(--body);color:var(--primary);text-decoration:none}
.mb .sl{filter:drop-shadow(0 28px 30px rgb(14 42 34 / .26))}
.mb .sl-core b{font-size:calc(var(--sl) * .2)}
.mb-qa{margin-top:clamp(72px,9vw,120px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.mb-qa h2{margin:0;font:600 34px/1.1 var(--display);letter-spacing:-.025em;color:var(--fg)}
.mb-qa .qa-list{margin-top:0}
.mb-qa .qa summary{align-items:center;padding:22px 0;font:500 18px/1.35 var(--body)}
.mb-qa .qa summary::after{content:none}
.mb-qa .qa summary i{flex:none;position:relative;width:28px;height:28px;border-radius:50%;background:var(--tint);transition:transform .4s var(--out)}
.mb-qa .qa summary i::before,.mb-qa .qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.75px;border-radius:2px;background:var(--primary);transform:translate(-50%,-50%)}
.mb-qa .qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.mb-qa .qa[open] summary i{transform:rotate(45deg)}
.mb-qa .qa p{margin:-6px 0 0;padding:0 52px 24px 0;font-size:16px}
@media (max-width:760px){
  .mb-top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:32px}
  .mb .sl{--sl:208px !important;order:-1}
  .mb-h{font-size:clamp(28px,8.6vw,38px)}
  .mb-lede{margin-left:auto;margin-right:auto;max-width:30ch;font-size:17px}
  .mb-qa{grid-template-columns:1fr;gap:16px}
  .mb-qa h2{font-size:26px}
  .mb-qa .qa summary{font-size:16px;padding:18px 0}
  .mb-qa .qa p{padding-right:0;font-size:15px}
}
/* Breadcrumb links are 17px of text: pad the hit area to 45px without moving the line (the negative margin gives the space back). */
.yy-bc a{padding:14px 0;margin:-14px 0}

/* Motion (design/MOTION.md). Where a list is swapped with display:none (the phone's "What you get") or more courses are
   shown, the incoming items rise in instead of appearing in one frame. */
@media (prefers-reduced-motion:no-preference){
  .yy-side .yy-what:not(.is-off) li{animation:rise var(--d-ui) var(--out) calc(var(--k,0) * 40ms) backwards}
  .yy-what li:nth-child(2){--k:1}.yy-what li:nth-child(3){--k:2}.yy-what li:nth-child(4){--k:3}.yy-what li:nth-child(n+5){--k:4}
  .yy-sec.is-all .yy-courses li:nth-child(n+7){animation:rise var(--d-item) var(--out) calc(min(var(--i,6) - 6,6) * var(--st)) backwards}
}
/* the card in groups (Bence 27 Oct, more air between them, never less inside): the passes, what you get, the price,
   then the button with its trust line */
.yy-what-h{margin-top:18px}
.yy-side .sum-total{margin-top:10px}
.yy-side [data-checkout]{margin-top:8px}

/* the cookie banner and its Manage dialog (src/html.js CONSENT_BANNER, /_site/js/consent.js), as small and quiet as it
   can be (Dima, 31 Oct): one slim card, the short line on the left (Manage and the Cookie Policy are links in it), Reject
   and Accept on the right, the same size, one tap each. On a phone it spans the width a little above the bottom edge;
   from 640px it is a small card in the bottom-left corner, away from the plan box and the chat on the right. Flat: one
   hairline and the site's card lift, no float shadow. It sits over the page (fixed: no layout shift), above the phone's
   buy bar, the dock and the chat bubble when it would touch them (lifted by their height, --ptc-lift), under every sheet,
   and steps aside (is-aside) while a buy button, a Pass, the Monthly/Yearly switch or the plan box is under it. */
.ptc{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;justify-content:center;padding:0 max(8px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 8px) max(8px,env(safe-area-inset-left,0px));pointer-events:none;transform:translateY(calc(-1 * var(--ptc-lift,0px)));transition:transform var(--d-ui) var(--sheet)}
.ptc-card{pointer-events:auto;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px 10px 10px 14px;background:var(--card);color:var(--fg);border:1px solid var(--hair);border-radius:var(--r-in);box-shadow:var(--elev-card);transition:opacity var(--d-fast) var(--out),transform var(--d-fast) var(--out)}
.ptc.is-aside .ptc-card{opacity:0;transform:translateY(12px);transition:opacity var(--d-fast) var(--in),transform var(--d-fast) var(--in)}
/* it lets taps through only once it has faded (is-gone, set by consent.js after the fade), so a tap on Accept while it
   fades still lands on Accept, never on the button under it (review of #77) */
.ptc.is-gone .ptc-card{pointer-events:none}
.ptc-txt{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.ptc a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
/* Manage and the Cookie Policy read as links on a line of their own, side by side so their tap areas never overlap, each
   44px tall (QA S9) without moving the line: the padding is taken back by the margin (a button is always an inline
   block, so plain inline padding would move it) */
.ptc-more{display:block}
.ptc-ln{display:inline-block;margin:-13px 0;padding:13px 0;border:0;border-radius:0;background:none;font:inherit;line-height:inherit;color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}
.ptc-ln:hover{color:var(--fg)}
.ptc-err{grid-column:1 / -1;margin:0;font-size:13px;line-height:1.4;color:var(--promo)}
.ptc-act{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ptc .btn.ptc-b{height:44px;padding:0 14px;font-size:14px;white-space:nowrap}
.ptc-dlg .btn.ptc-b{height:44px;padding:0 18px;font-size:15px;white-space:nowrap} /* the Manage dialog keeps its own size */
.ptc-b:disabled{opacity:.6;cursor:default}
.ptc-b:focus-visible,.ptc-ln:focus-visible,.ptc-x:focus-visible,.ptc-sw:focus-visible,.ptc a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (min-width:640px){
  .ptc{justify-content:flex-start;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px))}
  .ptc-card{width:auto;max-width:440px;padding:10px 10px 10px 16px}
  .ptc .btn.ptc-b{height:40px}
}
/* 901 to 960px: the plan box starts near x 407, so the corner card stays narrower than that */
@media (min-width:901px) and (max-width:960px){.ptc-card{max-width:380px}}
@media (prefers-reduced-motion:reduce){.ptc,.ptc-card,.ptc.is-aside .ptc-card{transition:none}.ptc.is-aside .ptc-card{transform:none}}
.ptc-dlg{width:min(480px,calc(100% - 32px));max-height:calc(100% - 32px);padding:22px;border:0;border-radius:var(--r-card);background:var(--card);color:var(--fg);box-shadow:var(--elev-float);overflow:auto}
.ptc-dlg::backdrop{background:rgb(12 35 27 / .45)}
.ptc-dlg-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ptc-dlg-h{margin:0;font:600 20px/1.2 var(--display);letter-spacing:-.01em}
.ptc-x{display:grid;place-items:center;width:44px;height:44px;margin:-10px -10px -10px 0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer}
.ptc-x:hover{background:var(--tint);color:var(--fg)}
.ptc-dlg-d{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.ptc-dlg-d a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.ptc-rows{display:grid;gap:16px;margin:18px 0}
.ptc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ptc-row-l{display:block;font-size:14px;font-weight:600}
.ptc-row p{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.ptc-sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:40px;height:24px;margin:0;border-radius:999px;background:var(--hair-2);cursor:pointer;transition:background-color var(--d-fast) var(--out)}
.ptc-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(12 35 27 / .25);transition:transform var(--d-fast) var(--out)}
.ptc-sw:checked{background:var(--primary)}
.ptc-sw:checked::after{transform:translateX(16px)}
.ptc-sw:disabled{opacity:.55;cursor:default}
.ptc-dlg .ptc-err{margin:-6px 0 12px}
.ptc-dlg-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@media (max-width:420px){.ptc-dlg-act .ptc-b{flex:1 1 auto}}
/* the skip link is the body's first element (before the banner), so it is placed against the page, over the header */
body > .hh-skip{z-index:calc(var(--z-header) + 1)}

/* the finder's "Coming soon" is a quiet ghost label, not a red promo chip (Dima, 28 Oct) */
.dd-opt small{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1px var(--hair)}
#main .ns-lede.foc-reply{margin-top:12px}
.foc-reply b{color:var(--fg);font-weight:600}
#main #questions .qa-ask{margin:16px 0 0;font-size:20px;line-height:1.3;color:var(--fg)}
#main #questions .qa-ask b{font-weight:700;color:var(--fg)}
.qa-ways{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px;justify-items:start}
.qa-ways a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--primary);font-weight:500;text-decoration:none}
.qa-ways a svg:last-child{transition:transform var(--d-fast,.15s) var(--out,ease)}
.qa-ways a:hover span{text-decoration:underline;text-underline-offset:3px}
.qa-ways a:hover svg:last-child{transform:translateX(3px)}
.qa-ic{width:32px;height:32px;flex:none}
/* the list starts level with the heading (Dima, 28 Oct: "it's misaligned") */
#main #questions .qa-list{margin-top:0;border-top:0}
#main #questions .qa-list > .qa-row:first-child{border-top:0}
#main #questions .qa-list > .qa-row:first-child summary{padding-top:4px}
/* the phone's Pass list: a one-line description under each feature (Dima, 28 Oct) */
.l4-list li .lab small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}
/* the buy box's list folds after six ("And N more"), on a phone and a laptop alike (Dima, 28 Oct: "on desktop, let's
   have a "Show more" too like on phone") */
.yy-what .yy-what-more{display:none}
.yy-what:not(.is-all) li:nth-child(n+7):not(.yy-what-more){display:none}
.yy-what:not(.is-all) .yy-what-more{display:block;grid-column:1/-1}
.yy-what-more button{margin:2px 0 0 30px;padding:6px 0;min-height:36px;border:0;background:none;font:600 var(--t-sm,14px)/1.3 var(--body);color:var(--primary);cursor:pointer}
/* "Need help?" in the phone menu: a small link above Find my program, or a fourth row */
.hh-dr .hh-help{display:inline-flex;align-items:center;justify-self:center;gap:8px;min-height:44px;font:600 16px/1.2 var(--body);color:var(--primary);text-decoration:none}
.hh-dr.is-in .hh-row:nth-child(4){transition-delay:200ms}
/* the chat bubble rides above the phone's buy bar and steps aside from buy buttons (site.js, Dima 28 Oct) */
#crisp-chatbox [role="button"][data-maximized="false"]{bottom:calc(14px + var(--chat-lift,0px))!important;transition:bottom .25s var(--out,ease),opacity .18s ease!important}
html.chat-tuck #crisp-chatbox [role="button"][data-maximized="false"]{opacity:0!important;pointer-events:none!important}
/* under the buy box: two sentences, each on its own line (Dima, 28 Oct: "use balancing so the sentences stay on their own line") */
.yy-ask{margin:12px 0 0;text-align:center;text-wrap:balance}
.yy-ask span{display:block}

/* The hero lede's inline paper icons, before Summaries, practice and mock-exams (Dima, 1 Nov, MONO-2387), sized and set
   on the line as the Program Lead's asks are (.plb-ask .fp-ic) */
.hero-lede .mark{color:var(--fg)}
.hero-lede .hl-w{white-space:nowrap}
.hero-lede .hl-ic{display:inline-block;width:1.4em;height:1.4em;margin:0 .2em 0 .04em;vertical-align:-.36em;overflow:visible}
/* The home's Pass roster folds after six rows behind "Show N more" (MONO-2387); without script every row shows */
.cmp-more{display:none}
.js [data-cmp]:not(.is-all) .cmp-fold{display:none}
.js [data-cmp]:not(.is-all) .cmp-more{display:block;margin:20px auto 0;min-height:48px;padding:0 26px;border:0;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--ring);font:600 15px/1 var(--body);color:var(--fg);cursor:pointer;transition:transform var(--d-fast) var(--out)}
.js .l4 [data-cmp]:not(.is-all) .cmp-more{width:100%;margin-top:12px}
.cmp-more:active{transform:scale(.97)}
/* centred under the table, which is at most 900px wide and set at the left of its frame */
.l3-cmpwrap .cmp-foot{max-width:900px;text-align:center}
.js [data-cmp].is-all .cmp-foot{display:none}
/* The sublines read thin and pale (Dima, 1 Nov: "too thin/not contrasting ... need a subtle tweak"): the Pass roster's
   feature lines take the body's muted ink instead of the faint one, and they and the hero lede sit a touch heavier */
.members .l3-cmp tbody th small{color:var(--muted);font-weight:450;font-size:14px}
.members .l4-list li .lab small{font-weight:450;font-size:13.5px}
.hero-sec .hero-lede{font-weight:450}
/* One Pass, the home's Pass section (src/sections/passes.js onePass, MONO-2387): Turbo alone, the trial as a quiet link */
.op{padding:var(--sec) clamp(20px,6vw,80px) 0}
.op-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;max-width:1120px;margin:0 auto}
.op-obj{display:grid;justify-items:center}
.op-h{margin:0;font:700 var(--h2)/1.12 var(--display);letter-spacing:-.02em}
.op-line{margin:16px 0 0;max-width:30ch;font-size:var(--t-lede);line-height:1.5;color:var(--muted)}
.op-cta{display:grid;justify-items:start;gap:14px;margin-top:32px}
.op-cta .btn{min-width:240px}
.op-alt{border:0;background:none;padding:6px 0;font:500 15px/1.3 var(--body);color:var(--muted);text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:4px;cursor:pointer;min-height:44px}
.op-alt:hover{color:var(--fg);text-decoration-color:currentColor}
.op-trust{margin-top:22px}
/* a real grid, row by row, so every row has one height and one hairline across the columns (Dima, 1 Nov: "the grid
   should be aligned and even across columns"); it was newspaper columns, each stacking on its own */
.op-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;max-width:1120px;margin:clamp(64px,8vw,104px) auto 0;padding:0}
.op-list li{display:flex;gap:12px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--hair);font-size:15px;font-weight:500}
.op-list .ok{margin-top:1px}
/* each feature with its cut-paper icon, as the hero lede draws its three (src/icons.js featureIcon, MONO-2387) */
.op-list li{gap:14px;align-items:flex-start}
.op-ic{flex:none;display:block;width:44px;height:44px;margin-top:-4px}
.op-ic svg{display:block;width:44px;height:44px;overflow:visible}
.op-line .mark{color:var(--fg)}
.op-line{font-weight:450}
.op-lab small{display:block;margin-top:3px;font-weight:450;font-size:14px;line-height:1.4;color:var(--muted)}
.op .cmp-foot{text-align:center}
.op-feats{max-width:1120px;margin:0 auto}
@media (max-width:1000px){.op-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .op-wrap{grid-template-columns:1fr;gap:28px}
  .op-obj .pc{--pc-w:300px !important}
  .op-cta{justify-items:stretch}
  .op-cta .btn{min-width:0;width:100%}
  .op-alt{justify-self:center}
  .op-list{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .js .op [data-cmp]:not(.is-all) .cmp-more{width:100%;margin-top:12px}
}
/* The program-year box with one Pass (MONO-2387, option B): the trial as a quiet link under the button, and the way back */
.yy-alt{margin:12px 0 0;text-align:center}
.yy-alt button{border:0;background:none;padding:6px 0;min-height:44px;font:500 15px/1.3 var(--body);color:var(--muted);text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:4px;cursor:pointer}
.yy-alt button:hover{color:var(--fg);text-decoration-color:currentColor}
.yy-alt button[hidden]{display:none}
/* the founders section is the home's last since the trial call went (1 Nov, MONO-2387): it gets the section space
   below it that the trial call's band used to give, so it no longer runs into the footer (Dima: "this spacing is fucked") */
#main > .foc:last-child{padding-bottom:var(--sec)}
/* the guarantee, the list's trust marker (Dima, 1 Nov, MONO-2387): in the middle of the bottom row, on a light band.
   Three or two columns: its own row, centred, one column wide (whatever the count above it). One: a full-width row like the others. */
.op-list li.op-mark{border-top:0;margin-top:14px;padding:18px 20px;border-radius:18px;background:var(--band);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--highlight) 70%,transparent)}
.op-list li.op-mark .op-lab{color:var(--fg)}
@media (min-width:1001px){.op-list li.op-mark{grid-column:1 / -1;justify-self:center;width:calc((100% - 80px) / 3)}}
@media (min-width:761px) and (max-width:1000px){.op-list li.op-mark{grid-column:1 / -1;justify-self:center;width:calc(50% - 20px)}}