/* generated by tools/css.py from design/ns.css, the home's section boards and design/home-system.css */
/* The new sections (26 Oct): one container per section, so a frame at 390, 768 or 1440 lays it out the same way the
   site will (container queries, not the window). Copy lives in ns.json. Tokens are pty.css's. */
.ns{container-type:inline-size;width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
.ns *,.ns *::before,.ns *::after{box-sizing:border-box}
.ns-in{max-width:1180px;margin:0 auto;padding:clamp(64px,9cqi,128px) clamp(20px,5.5cqi,80px)}
.ns-h{margin:0;font:700 clamp(34px,4.4cqi,60px)/1.02 var(--display);letter-spacing:-.035em;color:var(--fg);text-wrap:balance}
.ns-lede{margin:20px 0 0;max-width:58ch;font-size:clamp(16.5px,1.5cqi,19px);line-height:1.6;color:var(--muted)}
.ns-b{color:var(--fg);font-weight:600}
.ns-note{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 14px/1.35 var(--body);color:var(--muted)}
.ns-note svg{flex:none;color:var(--primary)}
.ns-flag{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:6px;background:var(--promo-tint);color:var(--promo);font:600 11px/1.2 var(--body);letter-spacing:.02em;vertical-align:middle}

/* from design/HomePain.dc.html */
.psa-head .ns-h{max-width:23ch}
.psa-head .ns-lede{max-width:54ch}
.psa-stage{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1.04fr);align-items:center;margin-top:clamp(64px,7.5cqi,104px)}
.psa-k{margin:0 0 26px;font:600 13px/1.2 var(--body);letter-spacing:.02em;color:var(--faint)}

/* on your own: four real-feeling scraps, grey and a little crooked */
.psa-pile{position:relative;display:flex;flex-direction:column;padding:6px 0 4px}
.psa-slip{position:relative;width:min(84%,420px);box-sizing:border-box;padding:18px 22px;border-radius:12px;background:#f3f5f4;color:#56685f;font:500 16px/1.42 var(--body);box-shadow:0 0 0 1px rgb(16 32 27 / .07),0 16px 28px -22px rgb(16 32 27 / .55);transform:var(--to)}
.psa-slip + .psa-slip{margin-top:-2px}
/* a folder, its tab on the top edge */
.psa-s1{--to:rotate(-2.6deg);--from:rotate(-9deg) translate(-26px,18px);margin-left:0;border-radius:3px 12px 12px 12px;background:#eef1ef;margin-top:14px}
.psa-s1::before{content:"";position:absolute;left:0;bottom:100%;width:34%;height:13px;border-radius:8px 8px 0 0;background:#e3e8e5;box-shadow:0 0 0 1px rgb(16 32 27 / .06)}
/* a lecture slide, its header bar */
.psa-s2{--to:rotate(2deg);--from:rotate(8deg) translate(30px,-12px);margin-left:13%;padding-top:34px;background:linear-gradient(#dfe5e2 0 12px,#f6f8f7 12px)}
.psa-s2::after{content:"";position:absolute;right:16px;top:3px;width:24px;height:6px;border-radius:3px;background:#c9d2ce}
/* one practice question, never answered */
.psa-s3{--to:rotate(-1.2deg);--from:rotate(-7deg) translate(-20px,10px);margin-left:4%;padding-left:52px;background:#fbfcfb}
.psa-s3::before{content:"";position:absolute;left:21px;top:21px;width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.6px #b9c5c0}
/* a dense page that will not open up */
.psa-s4{--to:rotate(2.8deg);--from:rotate(10deg) translate(24px,16px);margin-left:9%;padding-bottom:42px;background:#eef1ef}
.psa-s4::after{content:"";position:absolute;left:22px;right:30%;bottom:18px;height:14px;background:repeating-linear-gradient(#d5ddd9 0 3px,transparent 3px 6px);border-radius:2px}

.psa-arrow{justify-self:center;color:rgb(5 97 75 / .4)}

/* with pass the year: one card, our own */
.psa-card{background:var(--card);border-radius:28px;padding:clamp(28px,3.4cqi,44px);box-shadow:var(--elev-float)}
.psa-card-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.psa-with{font:600 17px/1 var(--display);letter-spacing:-.01em;color:var(--fg)}
.psa-logo{height:20px;width:auto;display:block;transform:translateY(1px)}
.psa-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.psa-list li{display:flex;gap:14px;align-items:flex-start;font:600 18px/1.45 var(--body);color:var(--fg)}
.psa-tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;margin-top:1px}

.psa-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:clamp(56px,6.5cqi,80px)}

/* Pain (design/MOTION.md, "cards that settle"): once reached, the scraps fall into their pile one after another, the
   arrow draws itself, the card rises and its four lines tick in one by one. It plays once, whatever the scroll speed. */
@media (prefers-reduced-motion:no-preference){
  .js:not(.rv-off) :is(.psa-pile:not(.is-in) .psa-slip,.psa-arrow:not(.is-in),.psa-card:not(.is-in),.psa-card:not(.is-in) .psa-list li > *){opacity:0}
  .psa-s2{--k:1}.psa-s3{--k:2}.psa-s4{--k:3}
  .psa-pile.is-in .psa-slip{animation:psa-settle var(--d-hero) var(--out) calc(var(--k,0) * 110ms) backwards}
  .psa-arrow.is-in{animation:rv-draw var(--d-item) var(--out) .45s backwards}
  .psa-card.is-in{animation:psa-rise var(--d-hero) var(--out) .3s backwards}
  .psa-list li:nth-child(2){--k:1}.psa-list li:nth-child(3){--k:2}.psa-list li:nth-child(4){--k:3}
  .psa-card.is-in .psa-tick{animation:psa-pop .5s var(--spring) calc(.65s + var(--k,0) * 140ms) backwards}
  .psa-card.is-in .psa-list li > :last-child{animation:psa-write var(--d-item) var(--out) calc(.73s + var(--k,0) * 140ms) backwards}
}
@keyframes psa-settle{from{transform:translateY(28px) scale(.96) var(--from);opacity:0}}
@keyframes psa-rise{from{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes psa-pop{from{opacity:0;transform:scale(.5)}}
@keyframes psa-write{from{opacity:0;transform:translateX(-8px);clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -4px 0 0)}}

@container (max-width:900px){
  .psa-stage{grid-template-columns:minmax(0,1fr)}
  .psa-s1{--from:rotate(-7deg) translateY(16px)}
  .psa-s2{--from:rotate(6deg) translateY(-10px)}
  .psa-s3{--from:rotate(-6deg) translateY(10px)}
  .psa-s4{--from:rotate(7deg) translateY(14px)}
  .psa-arrow{transform:rotate(90deg);justify-self:start;margin:18px 0 14px 36px}
  .psa-slip{width:min(76%,430px)}
}
@container (max-width:560px){
  .psa-k{margin-bottom:22px}
  .psa-slip{width:92%;padding:15px 17px;font-size:15px}
  .psa-s1{margin-top:12px}
  .psa-s2{margin-left:8%;width:88%;padding-top:30px}
  .psa-s3{padding-left:44px}
  .psa-s3::before{left:17px;top:18px}
  .psa-s4{margin-left:6%;padding-bottom:36px}
  .psa-s4::after{left:17px;bottom:15px}
  .psa-arrow{margin-left:22px}
  .psa-card{padding:24px 20px 26px;border-radius:24px}
  .psa-card-k{gap:12px;margin-bottom:24px}
  .psa-with{font-size:16px}
  .psa-logo{height:18px}
  .psa-list{gap:18px}
  .psa-list li{font-size:16px;gap:12px}
  .psa-tick{width:24px;height:24px}
  .psa-foot{flex-direction:column;align-items:flex-start}
  .psa-foot .btn{width:100%}
}
/* from design/HomeWhat.dc.html */
/* FT.a, after the bouncy bento (Dima's pick, 27 Oct: "the cards look good but the components inside and the copy
   needs to be refined"): a benefit on top of every card, one concrete line under it, and the passOS screen for that
   benefit rising from the card's bottom edge in an app window; on hover the card settles in and the window lifts.
   Screens come from screens.json through NsScreen: a real still is zoomed to the moment that proves the benefit
   (the crop table in the script), a screen not yet captured shows its Fx illustration whole. */
.fta{container-name:fta}
.fta-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 56px;flex-wrap:wrap}
.fta-head > div{flex:1 1 520px;max-width:700px}
.fta-h{max-width:15ch}
.fta-head .btn{flex:none}
.fta-grid{margin-top:56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.fta-card{position:relative;overflow:hidden;height:440px;border-radius:28px;background:var(--card);box-shadow:var(--elev-card);transition:transform .5s var(--ease)}
.fta-card--n{grid-column:span 4}
.fta-card--w{grid-column:span 8}
.fta-t{position:relative;z-index:1;padding:34px 34px 0}
.fta-card--w .fta-t{max-width:40%}
.fta-t h3{margin:0;font:600 30px/1.08 var(--display);letter-spacing:-.028em;color:var(--fg);text-wrap:balance}
.fta-t p{margin:12px 0 0;max-width:30ch;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
/* the window: rises out of the bottom edge, its own ground, a hairline and a soft shadow */
.fta-demo{position:absolute;left:26px;right:26px;bottom:-34px;transform-origin:50% 100%;transition:transform .5s var(--ease)}
.fta-card--w .fta-demo{left:auto;right:30px;width:57%;bottom:-40px;transform:rotate(-1.2deg)}
.fta-win{position:relative;overflow:hidden;border-radius:16px 16px 0 0;background:var(--card);box-shadow:0 0 0 1px rgb(16 32 27 / .08),0 30px 60px -30px rgb(14 42 34 / .5)}
.fta-win--real{aspect-ratio:var(--ar)}
.fta-zoom{position:absolute;left:0;top:0;width:calc(100% / var(--rw));transform:translate(calc(var(--rx) * -100%),calc(var(--ry) * -100%))}
.fta-card:hover{transform:scale(.985)}
.fta-card:hover .fta-demo{transform:translateY(-14px) rotate(1deg)}
.fta-card--w:hover .fta-demo{transform:translateY(-16px) rotate(.3deg)}
@media (prefers-reduced-motion:reduce){.fta-card,.fta-demo{transition:none}.fta-card:hover{transform:none}.fta-card:hover .fta-demo{transform:none}.fta-card--w:hover .fta-demo{transform:rotate(-1.2deg)}}
@container fta (max-width:900px){
  .fta-grid{margin-top:44px;gap:16px}
  .fta-card--n,.fta-card--w{grid-column:span 6}
  .fta-card{height:420px}
  .fta-t{padding:28px 26px 0}
  .fta-card--w .fta-t{max-width:none}
  .fta-t h3{font-size:25px}
  .fta-t p{font-size:14px}
  .fta-demo,.fta-card--w .fta-demo{left:22px;right:22px;width:auto;bottom:-30px;transform:none}
  .fta-win--real{aspect-ratio:var(--art)}
  .fta-card--w:hover .fta-demo,.fta-card:hover .fta-demo{transform:translateY(-12px) rotate(1deg)}
}
@container fta (max-width:560px){
  .fta-head .btn{order:2}
  .fta-grid{margin-top:36px;gap:14px}
  .fta-card--n,.fta-card--w{grid-column:span 12}
  .fta-card{height:auto}
  .fta-t{padding:26px 22px 0}
  .fta-t h3{font-size:26px}
  .fta-demo,.fta-card--w .fta-demo{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:22px 18px -28px;transform:none}
  .fta-win--real{aspect-ratio:var(--arp)}
  .fta-zoom{width:calc(100% / var(--rwp));transform:translate(calc(var(--rxp) * -100%),calc(var(--ryp) * -100%))}
  .fta-card:hover,.fta-card--w:hover{transform:none}
  .fta-card:hover .fta-demo,.fta-card--w:hover .fta-demo{transform:none}
}
/* from design/HomeHow.dc.html */
.hwa .ns-in{max-width:1240px}
.hwa-head{max-width:760px}
.hwa-track{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;position:relative}
.hwa-track::before{content:"";position:absolute;left:0;right:0;top:56px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--primary) 0%,rgb(5 97 75 / .5) 45%,rgb(5 97 75 / .14) 100%)}
.hwa-step{position:relative;min-width:0}
.hwa-num{position:relative;display:inline-block;padding-right:18px;background:var(--bg);font:700 112px/1 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.6px var(--primary)}
.hwa-shot{position:relative;margin-top:28px;aspect-ratio:5/4;border-radius:24px;overflow:hidden;box-shadow:var(--elev-card)}
.hwa-shot--summary{background:radial-gradient(120% 90% at 20% 0%,#e9f3ee,#dcebe3)}
.hwa-shot--mock{background:radial-gradient(120% 90% at 30% 0%,#f6f1e6,#ece4d3)}
.hwa-zoom{width:560px;zoom:var(--z,.6)}
.hwa-zoom > *{display:block}
.hwa-zoom .fx{border-radius:0;background:transparent}
.hwa-step h3{margin:28px 0 0;font:600 26px/1.1 var(--display);letter-spacing:-.025em;color:var(--fg)}
.hwa-step p{margin:10px 0 0;max-width:34ch;font-size:16px;line-height:1.6;color:var(--muted)}
.hwa-go{margin-top:64px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* step 1: the finder, picking IBA Year 1, and what is ready: drawn at the demos' 560x448 and scaled with them */
.hwa-fd{width:560px;height:448px;display:grid;align-content:center;gap:16px;padding:0 64px;background:radial-gradient(130% 100% at 0% 0%,#f4faf6,#dcebe3)}
.hwa-fd-card{position:relative;background:var(--card);border-radius:20px;padding:18px 22px 14px;box-shadow:0 24px 44px -24px rgb(14 42 34 / .5),0 0 0 1px var(--hair)}
.hwa-fd-uni{margin:0 0 12px;font:500 15px/1.2 var(--body);color:var(--faint)}
.hwa-fd-row{display:grid;grid-template-columns:1.4fr 1fr;border-top:1px solid var(--hair)}
.hwa-fd-f{display:grid;gap:6px;padding:14px 0 4px}
.hwa-fd-f + .hwa-fd-f{padding-left:18px;border-left:1px solid var(--hair)}
.hwa-fd-f > span{font:700 12px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--primary)}
.hwa-fd-f > b{font:600 21px/1.2 var(--body);color:var(--fg)}
.hwa-fd-cur{position:absolute;right:58px;bottom:-6px;filter:drop-shadow(0 4px 6px rgb(0 0 0 / .25))}
.hwa-fd-k{margin:6px 0 0;font:600 15px/1.2 var(--body);color:var(--muted)}
.hwa-fd-c{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;background:rgb(255 255 255 / .8);font:500 16px/1.2 var(--body);color:var(--fg)}
.hwa-fd-c > em{font:600 13px/1 var(--body);font-style:normal;padding:6px 11px;border-radius:999px;background:var(--highlight);color:var(--primary)}

/* tablet: the track turns to run down the page, picture beside the words */
@container (max-width: 900px){
  .hwa-track{grid-template-columns:1fr;gap:56px;margin-top:56px;padding-left:96px}
  .hwa-track::before{left:35px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,var(--primary) 0%,rgb(5 97 75 / .5) 45%,rgb(5 97 75 / .14) 100%)}
  .hwa-step{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:32px;align-items:center}
  .hwa-num{position:absolute;left:-96px;top:-6px;padding:0 0 10px;font-size:72px;width:72px;text-align:center}
  .hwa-shot{margin-top:0;grid-row:span 2}
  .hwa-step h3{margin:0;align-self:end}
  .hwa-step p{align-self:start}
}
/* phone: one column, a slim rail, the picture above the words */
@container (max-width: 560px){
  .hwa-head .ns-h{font-size:34px}
  .hwa-track{gap:44px;padding-left:52px;margin-top:44px}
  .hwa-track::before{left:17px}
  .hwa-step{display:block}
  .hwa-num{left:-52px;top:-4px;width:36px;padding:0 0 8px;font-size:40px;-webkit-text-stroke:1.2px var(--primary)}
  .hwa-step h3{margin-top:20px;font-size:23px}
  .hwa-step p{font-size:16px}
  .hwa-go{margin-top:48px}
  .hwa-go .btn{width:100%}
}
/* from design/HomeProof.dc.html */
.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 a:hover{color:var(--primary)}
.q-who small{display:block;font-size:13px;color:var(--faint);margin-top:2px}
.q-li{color:#0a66c2}

.rw-box{container-type:inline-size}
/* three offset columns drift up at slightly different speeds; one motion, long and linear */
.rw{position:relative;margin-top:56px;height:620px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.rw-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.rw-col:nth-child(2){margin-top:72px}
.rw-col:nth-child(3){margin-top:28px}
.rw-track{display:flex;flex-direction:column;gap:22px;animation:rw-up var(--d,70s) linear infinite}
/* the middle column runs the other way, and every column has its own pace */
.rw-col:nth-child(1) .rw-track{--d:58s}
.rw-col:nth-child(2) .rw-track{--d:92s;animation-direction:reverse}
.rw-col:nth-child(3) .rw-track{--d:74s}
.rw-q{background:var(--card)}
.rw:hover .rw-track,.rw:focus-within .rw-track{animation-play-state:paused}
@keyframes rw-up{to{transform:translateY(calc(-50% - 11px))}}
.rw-row{display:none}
.rw-more{display:inline-block;margin-top:36px}
@media (prefers-reduced-motion: reduce){.rw-track{animation:none}}
/* phone: one slow row sliding sideways */
@container (max-width:760px){
  .rw{height:auto;margin-top:36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .rw-cols{display:none}
  .rw-row{display:flex;gap:16px;width:max-content;align-items:stretch;animation:rw-side 90s linear infinite}
  .rw-row .rw-q{width:280px;padding:22px}
  .rw-row .rw-q p{font-size:17px}
  @media (prefers-reduced-motion: reduce){.rw-row{animation:none}.rw{overflow-x:auto}}
}
@keyframes rw-side{to{transform:translateX(calc(-50% - 8px))}}
/* from design/MbD.dc.html */
/* MB.d Money back, plainly (MONO-2381, Dima 28 Oct: "simplified ... clear and stupid-friendly ... clear as fuck").
   GradeGuru's two parts in our language: left the promise and one button, right a card with three steps and the policy.
   Every word and both numbers come from mbd.json (days = the window, payDays = how fast we pay, clause 13.2). */
.ns.mbd{background:var(--band)}
.mbd .ns-in{max-width:1280px;padding-top:clamp(64px,8cqi,112px);padding-bottom:clamp(64px,8cqi,112px)}
.mbd-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,5.5cqi,80px);align-items:center}
.mbd-ic{display:block;width:92px;height:92px;overflow:visible;fill:none;margin:0 0 26px -4px}
.mbd-ic .pw{fill:#fff}.mbd-ic .tn{fill:#E2EFE9}.mbd-ic .mt{fill:#BDFFEC}.mbd-ic .fr{fill:#05614B}.mbd-ic .dp{fill:#053429}
.mbd-ic .chk,.mbd-ic .ik{stroke-linecap:round;stroke-linejoin:round;fill:none}
.mbd-ic .chk{stroke:#05614B;stroke-width:2.8}
.mbd-ic .ik{stroke:#0C231B;stroke-width:1.6}
.mbd-tag{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 14px 8px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgb(5 97 75 / .2);font:700 12.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.mbd-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary)}
.mbd-h{margin:22px 0 0;font:700 clamp(38px,4cqi,56px)/1.03 var(--display);letter-spacing:-.04em;color:var(--fg)}
.mbd-h span{display:block}
.mbd-h .l2{color:var(--primary)}
.mbd-line{margin:20px 0 0;font-size:clamp(18px,1.55cqi,21px);line-height:1.45;color:var(--muted)}
.mbd-line b{color:var(--fg);font-weight:600}
.mbd-cta{margin-top:32px}
.mbd-card{background:#fff;border-radius:26px;box-shadow:inset 0 0 0 1px rgb(5 97 75 / .16),var(--elev-float);padding:clamp(28px,3cqi,44px)}
.mbd-k{margin:0;font:700 12.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mbd-steps{list-style:none;margin:18px 0 0;padding:0}
.mbd-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:center;padding:20px 0;border-top:1px solid var(--hair)}
.mbd-step:first-child{border-top:0;padding-top:8px}
.mbd-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--primary);font:700 18px/1 var(--display)}
.mbd-t{margin:0;font-size:18px;line-height:1.45;color:var(--muted)}
.mbd-t b{color:var(--fg);font-weight:600}
.mbd-mail{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:rgb(5 97 75 / .4);text-underline-offset:3px;overflow-wrap:anywhere}
.mbd-policy{width:100%;margin-top:12px;height:52px;font-size:16px}
.mbd-policy svg{color:var(--primary)}
/* MB.d2: our seal in the icon's place */
.mbd-seal{--s:150px;position:relative;width:var(--s);height:var(--s);margin:0 0 24px;filter:drop-shadow(0 12px 14px rgb(14 42 34 / .2))}
.mbd-seal svg{position:absolute;inset:0;width:100%;height:100%;clip-path:circle(50%);animation:mbdspin 60s linear infinite}
.mbd-core{position:absolute;inset:22.6%;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#2a7a60,#0f3f31 70%);box-shadow:inset 0 2px 0 rgb(255 255 255 / .25),inset 0 -8px 18px rgb(0 0 0 / .35)}
.mbd-num{display:block;font:800 calc(var(--s) * .25)/1 var(--display);letter-spacing:-.03em;color:#EEEBE2}
.mbd-unit{display:block;margin-top:calc(var(--s) * .03);font:700 max(8px,calc(var(--s) * .075))/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#cdeee0}
@keyframes mbdspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mbd-seal svg{animation:none}}
@container (max-width:900px){
  .mbd-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .mbd-lead{max-width:560px}
}
@container (max-width:560px){
  .mbd-ic{width:72px;height:72px;margin-bottom:20px}
  .mbd-seal{--s:130px;margin-bottom:20px}
  .mbd-tag{font-size:11.5px;letter-spacing:.1em}
  .mbd-h{font-size:38px}
  .mbd-line{font-size:18px}
  .mbd-cta{width:100%}
  .mbd-card{border-radius:22px;padding:26px 22px}
  .mbd-step{grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start;padding:18px 0}
  .mbd-n{width:38px;height:38px;font-size:16px}
  .mbd-t{font-size:16.5px;padding-top:6px}
}
/* from design/HomeQuestions.dc.html */
.qa{margin-top:clamp(72px,9cqi,120px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.qa-h{margin:0;font:600 34px/1.1 var(--display);letter-spacing:-.025em;color:var(--fg)}
.qa-list{}
.qa-row{border-bottom:1px solid rgb(12 35 27 / .1)}
.qa-row:first-child{border-top:1px solid rgb(12 35 27 / .1)}
.qa-row summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;font:500 18px/1.35 var(--body);color:var(--fg)}
.qa-row summary::-webkit-details-marker{display:none}
.qa-row summary i{flex:none;position:relative;width:28px;height:28px;border-radius:50%;background:var(--tint);transition:transform var(--d-ui) var(--out)}
.qa-row summary i::before,.qa-row 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%)}
.qa-row summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa-row[open] summary i{transform:rotate(45deg)}
.qa-row p{margin:-6px 0 0;padding:0 52px 24px 0;font-size:16px;line-height:1.55;color:var(--muted)}
.qa-row p a{color:var(--primary)}
@container (max-width:560px){.qa{grid-template-columns:1fr;gap:16px}.qa-h{font-size:26px}.qa-row summary{font-size:16px;padding:18px 0}.qa-row p{padding-right:0;font-size:15px}}
.qa{margin-top:0}
.qa-more{margin:28px 0 0}
/* from design/TcA.dc.html */
/* TC.a (MONO-2381, raw draft): the closing call at the bottom of the home. One object, the cream Trial Pass,
   beside the decision: the finder, opened from the Trial Pass. Words from tc.json (Chad's proposals), the Pass from
   passes.json (its art and name only; the length is tc.json's 3 days, not passes.json's stale 24 hours). */
.tca .ns-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6cqi,96px);align-items:center}
.tca-h{max-width:12ch}
.tca-l2{display:block;color:var(--primary)}
.tca-price{white-space:nowrap}
.tca .ns-lede{max-width:40ch}
.tca-flag{margin:14px 0 0 0}
.tca-find{margin-top:34px;max-width:600px}
.tca-inc{list-style:none;margin:28px 0 0;padding:0;display:flex;gap:12px 36px}
.tca-inc li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font:600 15px/1.3 var(--body);color:var(--fg)}
.tca-inc svg.ic{width:34px;height:34px}
.tca-after{margin:26px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.tc-ph{display:inline;padding:2px 6px;border-radius:6px;background:#fff3c4;color:#6b5413;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tca-obj{display:grid;justify-items:center;gap:22px}
.tca-pass{width:100%;max-width:470px;color:#234F3D;transform:rotate(-5deg)}
.tca-cap{margin:0;font:600 14px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tca svg.ic{flex:none;overflow:visible;fill:none}
.tca svg.ic .pw{fill:#fff}.tca svg.ic .tn{fill:#E2EFE9}.tca svg.ic .mt{fill:#BDFFEC}.tca svg.ic .fr{fill:#05614B}.tca svg.ic .dp{fill:#053429}.tca svg.ic .ink{fill:#0C231B}.tca svg.ic .cr{fill:#F6F1E7}
.tca svg.ic .sf,.tca svg.ic .ik,.tca svg.ic .cw{stroke-linecap:round;stroke-linejoin:round}
.tca svg.ic .sf{stroke:#05614B;stroke-width:1.4}.tca svg.ic .ik{stroke:#0C231B;stroke-width:1.2}.tca svg.ic .cw{stroke:#fff;stroke-width:2.2}
@container (max-width:900px){
  .tca .ns-in{grid-template-columns:minmax(0,1fr)}
  .tca-obj{order:-1}
  .tca-pass{max-width:380px}
}
@container (max-width:560px){
  .tca-pass{max-width:250px;transform:rotate(-4deg)}
  .tca-h{max-width:none}
  .tca-inc{flex-direction:column;gap:10px}
  .tca-inc li{flex-direction:row;align-items:center;gap:12px}
  .tca .dd--row .dd-fields{grid-template-columns:minmax(0,1fr)}
  .tca .dd--row .dd-field + .dd-field{border-left:0;border-top:1px solid var(--hair)}
}
/* Hand-written, not a canvas board: the home's rhythm on the shared tokens (design/site-system.css). tools/css.py
   appends it to home.css after the section boards, so it wins over their own paddings and sizes. */

/* The old FAQ's "+" (page.css) would double the board's own icon. */
.qa-row summary::after{content:none}
/* No linear motion (Bence 27 Oct): the scroll-linked reveals ease out, the seal's foil eases in-out. */
.mba-num::after{animation-timing-function:cubic-bezier(.65,0,.35,1)}

/* Rhythm: one --sec above each section's heading. Sections on the same ground share one gap instead of two stacked
   paddings; the one before a colour change (the money band, the footer) closes with its own --sec. */
#main > :is(.sec,.ns){padding-top:var(--sec);padding-bottom:0}
#main > .hero-sec{padding-top:clamp(32px,23.4px + 2.2vw,56px)}
#main > :has(+ .mba),#main > .mba{padding-bottom:var(--sec)}
#main > .final{padding-bottom:calc(var(--sec) + 32px)}
#main .ns > .ns-in{max-width:none;padding:0 var(--edge)}
/* an anchor (#how, #proof ...) lands its heading 24px under the 64px header */
#main > [id]{scroll-margin-top:calc(88px - var(--sec))}

/* Headings: one size and weight for every section heading; the lede 16 / 12 under it, the content 48 / 32 under that. */
#main :is(.ns-h,.mba-h,.qa-h,.sec:not(.hero-sec) .sec-h){font:700 var(--h2)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}
#main :is(.ns-lede,.sec:not(.hero-sec) .sec-lede){margin-top:var(--gap-h)}
#main :is(.psa-stage,.fta-grid,.hwa-track,.rw,.psa-foot,.hwa-go){margin-top:var(--gap-lede)}
#main .qa{margin-top:0}

/* Text under the headings, on one scale: every lede, card title, body line and small line is one of five sizes. */
#main :is(.ns-lede,.sec:not(.hero-sec) .sec-lede,.hero-sec .sec-lede){font-size:var(--t-lede);line-height:1.5}
#main :is(.fta-t h3,.hwa-step h3){font:600 var(--t-h3)/1.15 var(--display);letter-spacing:-.02em}
#main :is(.fta-t p,.hwa-step p,.qa-row p,.mba-t){font-size:var(--t-body);line-height:1.55}
#main :is(.psa-list li,.rw-q p,.rw-row .rw-q p,.qa-row summary){font-size:var(--t-lg)}
#main :is(.ns-note,.psa-k,.q-who a,.mba-role,.mba-policy){font-size:var(--t-sm)}
#main .q-who small{font-size:13px}
/* Cards, one system: one 3-column grid with one gap (so every column is the same width in every section), one inner
   padding, one corner and one resting shadow. Headings and ledes each keep one reading measure. */
#main :is(.ns-h,.mba-h,.qa-h,.sec:not(.hero-sec) .sec-h){max-width:var(--w-h)}
#main :is(.ns-lede,.sec:not(.hero-sec) .sec-lede){max-width:var(--w-lede)}
#main :is(.fta-grid,.hwa-track,.rw-cols){gap:var(--gap-card)}
#main .rw-track{gap:var(--gap-card)}
#main .qa{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-card)}
#main .qa > :last-child{grid-column:span 2}
@container (max-width:560px){#main .qa{grid-template-columns:1fr}#main .qa > :last-child{grid-column:auto}}
#main :is(.fta-card,.psa-card,.rw-q,.hwa-shot){border-radius:var(--r-card)}
#main :is(.fta-card,.psa-card,.rw-q){box-shadow:var(--elev-card)}
#main .fta-t{padding:var(--pad-card) var(--pad-card) 0}
#main :is(.psa-card,.rw-q,.rw-row .rw-q){padding:var(--pad-card)}
#main .rw-q{gap:12px}

/* Hero: the finder and the rating at the same steps as everywhere else. */
.hero__finder{margin-top:var(--gap-h);max-width:600px}
.hero-sec .sec-lede + .hero__finder{margin-top:clamp(28px,24px + 1vw,36px)}
.hero__rating{margin-top:24px}

/* Final call: the one centred section; heading and finder share one axis. */
#main > .final{text-align:center}
.final .sec-h{max-width:22ch;margin-left:auto;margin-right:auto}
.final-f{max-width:600px;margin:var(--gap-lede) auto 0;text-align:left}

/* Cards lift 4px under a real pointer; nothing shrinks or tilts. */
.fta-card,.rw-q{transition:transform .25s var(--out),box-shadow .25s var(--out)}
.fta-card:hover,.fta-card:hover .fta-demo{transform:none}
.fta-card--w:hover .fta-demo{transform:rotate(-1.2deg)}
.qa-row summary{transition:color var(--d-fast) var(--out),transform var(--d-fast) var(--out)}
@media (hover:hover) and (pointer:fine){
  .fta-card:hover,.rw-q:hover{transform:translateY(-4px);box-shadow:var(--elev-float)}
  .qa-row summary:hover{color:var(--primary)}
}

/* How it works. The demos centre themselves in their frame with their own display:grid; the board's display:block on
   every .hwa-zoom child dropped it, so the mock exam sat at the top of an empty frame. */
.hwa-zoom > .fx{display:grid}
/* Each step comes in on its own as it is reached: number, picture, title, words, a beat apart (data-rv="st"). */
/* Phone: no side rail eating the width. The number leads its own row with the track's line after it, then the
   picture full width, the title, the words. */

/* Reviews on a phone (Bence 27 Oct: the drifting row could not be scrolled): a row you swipe, snapping card by card,
   the next card peeking in; no drift and no doubled copies. */
@container (max-width:760px){
  #main .rw{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge));padding:4px var(--edge) 24px;scroll-padding-inline:var(--edge)}
  .rw::-webkit-scrollbar{display:none}
  .rw-row{animation:none}
  .rw-row .rw-q[aria-hidden]{display:none}
  .rw-row .rw-q{flex:none;width:min(300px,78vw);scroll-snap-align:start}
  .rw-row::after{content:"";flex:none;width:calc(var(--edge) - 16px)}
}

/* Money back: the seal turns in on a spring, the guilloche draws across. */
@media (prefers-reduced-motion:no-preference){
  .js:not(.rv-off) :is(.mba-badge,.mba-guil):not(.is-in){opacity:0}
  .mba-badge.is-in{animation:mba-pop var(--d-hero) var(--spring) .15s backwards}
  .mba-guil.is-in{animation:rv-draw 1.2s var(--io) backwards}
}
@keyframes mba-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-40deg)}}

/* The Passes on the home (L3.b on a laptop, L4.d on a phone; src/sections/passes.js, no prices: R1).
   Dima, 28 Oct: the home "should" have them. These are the section's own rules as they stood before the Passes left
   the home (page.css at 62ff9d6^, removed as dead CSS in #10), plus the canvas's wide/narrow switch
   (design/vx/pty.css). Joined into home.css by tools/css.py. */
.only-narrow{display:none}
@media (max-width:760px){.only-wide{display:none}.only-narrow{display:block}}
.l3-head{text-align:center;margin-bottom:88px}
.l3-h{margin:0;font:600 52px/1.05 var(--display);letter-spacing:-.03em}
.l3-head .seg{margin-top:24px}
.l3-wall{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:0 56px;align-items:end;max-width:1120px;margin:0 auto}
.l3-col{display:grid;justify-items:center;text-align:center}
.l3-price{margin:38px 0 0;font:600 30px/1 var(--display);letter-spacing:-.025em}
.l3-note{margin:10px 0 0;font-size:14px;color:var(--faint);min-height:20px}
.l3-col .btn{margin-top:22px;min-width:220px}
.l3-trust{margin-top:48px}
.l3-cmpwrap{margin-top:120px;overflow-x:auto}
.l3-cmp tbody th small{display:block;margin-top:4px;font-weight:400;font-size:13.5px;color:var(--faint)}
@media (max-width:1100px){.l3-wall{gap:0 28px}}
.l4-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:26px}
.l4-sw button{border:0;background:none;padding:8px 6px 10px;border-radius:16px;cursor:pointer;display:grid;gap:8px;justify-items:center;font:600 12.5px/1 var(--body);color:var(--faint);min-height:44px;transition:background .3s,box-shadow .3s,color .3s}
.l4-sw .pc{opacity:.5;transition:opacity .3s,transform .3s}
.l4-sw button.on{background:#fff;color:var(--fg);box-shadow:0 8px 18px -12px rgb(14 42 34 / .45),inset 0 0 0 1px var(--hair)}
.l4-sw button.on .pc{opacity:1;transform:translateY(-2px)}
.l4-foot{padding-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.l4-trust{margin-top:14px}
.l3-head{text-align:left}
.l3-head .seg,.l3-head .sec-lede{margin-left:0}
.l3-head{display:grid;justify-items:start}
.l3-head{max-width:1120px;margin-left:auto;margin-right:auto}
.l3-cmpwrap{max-width:1120px;margin-left:auto;margin-right:auto}
/* The trial call (TC.a): its door is a button and the trial's own line, where the board has the finder. */
.tca-find{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.tca-find .btn{min-width:240px}
.tca-note{margin:0}
/* review of #38: between the phone switch (760px) and about 860px the three buttons' min-width pushed the wall past
   the page's edge; there they take their column's width */
@media (max-width:860px){.l3-col .btn{min-width:0;width:100%}}

/* One even rhythm (MONO-2381; Dima, 28 Oct: "make sure that there's 1. enough and 2. even spacing between each section").
   The gap between two sections is measured from the last thing you see in one to the first thing you see in the next.
   Every pair on the home is one --sec apart (larger on the home than the shared token), less --h-in: the space a
   heading's glyphs sit inside their line. Where a section starts or ends on a hard edge (a band, a card, a rotated Pass)
   the padding takes that --h-in off, so every gap reads the same. Home only: this file is joined into home.css alone. */
#main{--sec:clamp(80px,65.14px + 3.81vw,120px);--h-in:calc(var(--h2) * .155)}
/* hero: the university strip's own 8px under its logos */
#main > .hero-sec .us{padding-bottom:0}
/* the Passes: one --sec above, none below, as every section; its heading the home's heading */
#main > .members{padding-top:var(--sec);padding-bottom:0}
#main > .members > :is(.l3,.l4){padding-top:0;padding-bottom:0}
#main .members :is(.l3-h,.l4 > .h2){font:700 var(--h2)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}
/* money back (MB.d) is a band: the section before it closes on its edge, and the band holds one --sec inside each edge */
#main > :has(+ .mbd){padding-bottom:calc(var(--sec) - var(--h-in))}
#main > .mbd{padding-bottom:var(--sec)}
#main .mbd-ic + .mbd-h{margin-top:0}
/* "Read every review" keeps its 44px tap target on a phone (page.css); its words sit 12px above that box's edge */
@media (max-width:760px){#main .rw-more{margin-bottom:-12px}}
/* the Passes on a phone end on the trust line, whose words sit 4px above its box */
@media (max-width:760px){#main > .members .l4-trust{margin-bottom:-4px}}
/* founders (FO.c) side by side: the chat card, a hard edge, is what starts the section */
@media (min-width:901px){#main > .foc{padding-top:calc(var(--sec) - var(--h-in))}}
/* the trial call stacked: its Pass comes first, turned, so a corner rises above its box (TcA board: 380px at -5deg,
   250px at -4deg on a phone) */
@media (max-width:900px){#main > .tca{padding-top:calc(var(--sec) + 8px)}}
@media (max-width:560px){#main > .tca{padding-top:calc(var(--sec) + 2px)}}

/* The trial call in the footer's green (MONO-2381; Dima, 28 Oct: "integrate the try it for 3 days one in the green at the
   bottom of the footer somehow, still separating it from the footer"). TC.a stays the last section of <main>, and on the
   home it is the top of the footer's band: the footer's own ground (site.css .pf), light words on it, one --sec inside
   each edge as the money band, then a hairline on the page's edges, the footer's own line colour, before the footer's
   columns. The footer itself is untouched. */
#main > :has(+ .tca){padding-bottom:calc(var(--sec) - var(--h-in))}
#main > .tca{position:relative;background:var(--primary-dark);color:var(--on-dark);padding-bottom:var(--sec)}
#main > .tca::after{content:"";position:absolute;left:var(--edge);right:var(--edge);bottom:0;height:0;border-top:1px solid var(--on-dark-line)}
#main > .tca .tca-h{color:var(--on-dark)}
#main > .tca .ns-lede{color:var(--on-dark-muted)}
#main > .tca .tca-inc li{color:var(--on-dark)}
#main > .tca .tca-pass{filter:drop-shadow(0 28px 40px rgb(0 0 0 / .32))}
#main > .tca :focus-visible{outline-color:var(--accent-mint)}

/* MONO-2381 (28 Oct): the founders block (FO.a to FO.c) and the Program Lead section (PL.a to PL.c), raw drafts.
   Tokens are pty.css's, the section frame is ns.css's (one container per section, so 1440, 768 and 390 lay out as the
   site will). Words in fopl.json. Photos: Dima's and Bence's approved portraits only; every other person is a
   labelled empty frame with its shot code. Icons are the cut-paper paper of R7.a, inline beside the words. */
.fpl{container-name:fp}
.fp-eye{margin:0 0 18px;font:600 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.fp-ic{flex:none;display:block;width:44px;height:44px;overflow:visible}
.fp-link{display:inline-flex;align-items:center;gap:12px;font:600 16.5px/1.3 var(--body);color:var(--fg)}
.fp-link:hover{color:var(--primary)}
.fp-link .fp-ic{width:40px;height:40px}
.fp-lbl{display:inline}
.fp-arrow{flex:none;color:var(--primary)}
.fp-ph{display:block;margin-top:10px;font:600 13.5px/1.4 var(--body);color:var(--promo)}
.fp-mail{font:400 15.5px/1.5 var(--body);color:var(--muted)}
.fp-mail a{font-weight:600;color:var(--primary)}
.fp-photo{position:relative;overflow:hidden;background:var(--band)}
.fp-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* a person we have no approved photo of: an empty frame that says which shot fills it */
.fp-shot{position:relative;display:grid;place-items:center;align-content:center;gap:6px;overflow:hidden;border:2px dashed rgb(16 32 27 / .24);background:var(--band);color:var(--faint);text-align:center;padding:16px}
.fp-shot b{font:700 26px/1 var(--display);letter-spacing:-.02em;color:var(--muted)}
.fp-shot .fp-sl{font:600 13.5px/1.35 var(--body)}
.fp-shot em{font:500 12px/1.3 var(--body);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.fp-face{flex:none;border-radius:999px;overflow:hidden;background:var(--band)}
.fp-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.fp-face.fp-shot{padding:4px;gap:0;border-width:1.5px}
.fp-face.fp-shot b{font-size:15px}
/* canvas only: which page a Program Lead fill sits on (not part of the section) */
.fp-on{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 24px;background:#0c231b;color:#dff0e7;font:600 12px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase}
.fp-on i{font-style:normal;color:#9dbcae;letter-spacing:.02em;text-transform:none;font-weight:500}

/* FO.a Letter: the words lead; the two faces are the signature; the ways to reach them close it */
.foa-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7cqi,112px);align-items:start}
.foa .ns-h{max-width:11ch}
.foa-body p{margin:0 0 22px;max-width:44ch;font-size:clamp(17px,1.55cqi,19.5px);line-height:1.65;color:var(--muted);text-wrap:pretty}
.foa-body p:first-child{font:500 clamp(21px,2.1cqi,27px)/1.42 var(--display);letter-spacing:-.012em;color:var(--fg);max-width:30ch}
.foa-sign{display:flex;align-items:center;gap:18px;margin-top:34px}
.foa-faces{display:flex}
.foa-faces .fp-face{width:64px;height:64px;box-shadow:0 0 0 3px var(--bg)}
.foa-faces .fp-face + .fp-face{margin-left:-14px}
.foa-sign b{display:block;font:600 20px/1.2 var(--display);letter-spacing:-.015em;color:var(--fg)}
.foa-sign .fp-sub{display:block;margin-top:3px;font-size:14.5px;color:var(--faint)}
.foa-reach{list-style:none;margin:40px 0 0;padding:30px 0 0;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:20px 44px}
@container fp (max-width:900px){
  .foa-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .foa .ns-h{max-width:14ch}
}
@container fp (max-width:560px){
  .foa-reach{flex-direction:column;gap:18px}
  .foa-faces .fp-face{width:56px;height:56px}
}

/* FO.b Two portraits: the faces lead, each with its own note and its own direct line */
.fob-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 56px;flex-wrap:wrap}
.fob-head .ns-h{flex:1 1 420px;max-width:13ch}
.fob-head .ns-lede{flex:0 1 42ch;margin:0}
.fob-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3.4cqi,48px);margin-top:clamp(40px,5.5cqi,72px)}
.fob-photo{aspect-ratio:1/1;border-radius:28px}
.fob-who{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:26px}
.fob-who h3{margin:0;font:600 clamp(26px,2.4cqi,32px)/1.08 var(--display);letter-spacing:-.025em;color:var(--fg)}
.fob-who .fp-sub{font-size:14.5px;color:var(--faint);white-space:nowrap}
.fob-note{margin:12px 0 0;max-width:50ch;font-size:16px;line-height:1.62;color:var(--muted);text-wrap:pretty}
.fob-wa{margin-top:22px}
.fob-mail{margin:clamp(36px,4.5cqi,56px) 0 0;text-align:center}
@container fp (max-width:900px){
  .fob-photo{border-radius:22px}
  .fob-note{font-size:15px}
}
@container fp (max-width:560px){
  .fob-pair{grid-template-columns:minmax(0,1fr);gap:48px}
  .fob-photo{aspect-ratio:4/3.4}
  .fob-mail{text-align:left}
}

/* FO.c Conversation: show what reaching them looks like, the student's own first line, already typed */
.foc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6.5cqi,104px);align-items:center}
.foc .ns-h{max-width:12ch}
.foc-belief{margin:34px 0 0;padding:0;max-width:40ch}
.foc-belief p{margin:0;font:500 17px/1.55 var(--body);color:var(--fg);text-wrap:pretty}
.foc-belief p::before{content:"\201C";display:block;height:30px;margin-bottom:4px;font:700 56px/1 var(--display);color:var(--primary)}
.foc-belief footer{margin-top:12px;font-size:14px;color:var(--faint)}
.foc-stage{position:relative;border-radius:32px;background:var(--band);padding:clamp(28px,4cqi,56px) clamp(22px,3.6cqi,52px);display:flex;flex-direction:column;gap:22px}
.foc-you{align-self:flex-end;max-width:min(420px,88%)}
.foc-you small,.foc-them small{display:block;margin:0 6px 7px;font:600 12.5px/1.3 var(--body);color:var(--faint)}
.foc-you small{text-align:right}
.foc-you p{margin:0;padding:16px 20px;border-radius:22px 22px 6px 22px;background:#fff;box-shadow:var(--elev-card);font:400 17px/1.45 var(--body);color:var(--fg)}
.foc-them{display:flex;align-items:flex-end;gap:12px}
.foc-them .fp-face{width:46px;height:46px}
.foc-dots{display:inline-flex;gap:7px;padding:17px 20px;border-radius:22px 22px 22px 6px;background:var(--primary)}
.foc-dots i{width:9px;height:9px;border-radius:999px;background:var(--highlight);opacity:.9}
.foc-dots i:nth-child(2){opacity:.65}.foc-dots i:nth-child(3){opacity:.4}
.foc-pick{list-style:none;margin:28px 0 0;padding:0}
.foc-pick li{border-top:1px solid var(--hair)}
.foc-pick li:last-child{border-bottom:1px solid var(--hair)}
.foc-pick a{display:flex;align-items:center;gap:16px;padding:16px 4px;color:var(--fg)}
.foc-pick .fp-face{width:52px;height:52px}
.foc-pick b{flex:1;font:600 20px/1.2 var(--display);letter-spacing:-.015em}
.foc-pick .fp-ic{width:40px;height:40px}
.foc-mail{margin:20px 4px 0}
@container fp (max-width:900px){
  .foc-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .foc .ns-h{max-width:16ch}
}
@container fp (max-width:560px){
  .foc-you p{font-size:16px}
  .foc-pick b{font-size:18px}
}

/* PL.a Portrait: the person leads; what to come to them for sits under the bio, each line with its own paper */
.pla-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6cqi,96px);align-items:start}
.pla-photo{aspect-ratio:4/5;border-radius:28px}
.pla-name{margin:0;font:700 clamp(40px,4.8cqi,66px)/1 var(--display);letter-spacing:-.035em;color:var(--fg)}
.pla-line{margin:14px 0 0;font:600 17px/1.4 var(--body);color:var(--primary)}
.pla-bio{margin:20px 0 0;max-width:54ch;font-size:clamp(16px,1.4cqi,17.5px);line-height:1.65;color:var(--muted);text-wrap:pretty}
.pla-asks{margin:36px 0 0}
.pla-asks h3{margin:0 0 6px;font:600 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pla-asks ul{list-style:none;margin:0;padding:0}
.pla-asks li{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--hair)}
.pla-asks .fp-ic{width:54px;height:54px}
.pla-asks b{display:block;font:600 18px/1.3 var(--body);color:var(--fg)}
.pla-asks .fp-sub{display:block;margin-top:3px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.pla-reach{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
@container fp (max-width:900px){
  .pla-grid{grid-template-columns:240px minmax(0,1fr);gap:36px}
  .pla-photo{border-radius:22px}
}
@container fp (max-width:560px){
  .pla-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .pla-photo{aspect-ratio:1/1;max-width:100%}
  .pla-asks .fp-ic{width:46px;height:46px}
  .pla-asks li{gap:16px}
  .pla-reach .btn{width:100%}
}

/* PL.b Note: a short first-person hello, the three reasons inside one sentence, one button */
.plb-in{max-width:780px;margin:0 auto}
.plb-top{display:flex;align-items:center;gap:20px}
.plb-top .fp-face{width:92px;height:92px}
.plb-top .fp-eye{margin:0 0 6px}
.plb-top b{display:block;font:600 22px/1.15 var(--display);letter-spacing:-.02em;color:var(--fg)}
.plb-top .fp-sub{display:block;margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--faint)}
.plb-hello{margin:38px 0 0;font:600 clamp(27px,3.1cqi,40px)/1.2 var(--display);letter-spacing:-.025em;color:var(--fg);text-wrap:balance}
.plb-ask{margin:26px 0 0;font-size:clamp(18px,1.65cqi,21px);line-height:2;color:var(--muted)}
.plb-ask .fp-ic{display:inline-block;width:36px;height:36px;margin:0 6px 0 3px;vertical-align:-11px}
.plb-ask b{font-weight:600;color:var(--fg)}
.plb-reach{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
.plb-about{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--hair);font-size:15px;line-height:1.6;color:var(--faint);max-width:68ch}
.plb-about b{color:var(--fg);font-weight:600}
@container fp (max-width:560px){
  .plb-top .fp-face{width:72px;height:72px}
  .plb-ask{line-height:1.85}
  .plb-ask .fp-ic{width:30px;height:30px;vertical-align:-9px}
  .plb-reach .btn{width:100%}
}

/* PL.c Questions: the student's own questions lead, each opens the chat with it typed; the person who answers sits
   beside the headline */
.plc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 56px;flex-wrap:wrap}
.plc-head .ns-h{max-width:13ch}
.plc-who{display:flex;align-items:center;gap:16px;flex:none}
.plc-who .fp-face{width:76px;height:76px}
.plc-who small{display:block;font:600 12px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.plc-who b{display:block;margin-top:4px;font:600 21px/1.15 var(--display);letter-spacing:-.02em;color:var(--fg)}
.plc-who .fp-sub{display:block;margin-top:3px;max-width:30ch;font-size:14px;line-height:1.4;color:var(--muted)}
.plc-qs{list-style:none;margin:clamp(48px,6cqi,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.6cqi,52px)}
.plc-qs li{padding-top:30px;border-top:1px solid var(--hair)}
.plc-qs .fp-ic{width:76px;height:76px}
.plc-qs h3{margin:22px 0 0;font:600 clamp(21px,1.9cqi,25px)/1.22 var(--display);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.plc-qs .fp-link{margin-top:16px;font-size:15.5px;color:var(--primary)}
.plc-about{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 56px;align-items:end;margin-top:clamp(44px,5.5cqi,72px);padding-top:26px;border-top:1px solid var(--hair)}
.plc-about p{margin:0;max-width:70ch;font-size:15.5px;line-height:1.62;color:var(--muted)}
.plc-about p b{color:var(--fg);font-weight:600}
@container fp (max-width:900px){
  .plc-qs{grid-template-columns:minmax(0,1fr);gap:0}
  .plc-qs li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:22px;align-items:start;padding:24px 0}
  .plc-qs .fp-ic{grid-row:span 2;width:64px;height:64px}
  .plc-qs h3{margin:2px 0 0}
  .plc-qs .fp-link{margin-top:10px}
  .plc-about{grid-template-columns:minmax(0,1fr)}
}
@container fp (max-width:560px){
  .plc-qs li{grid-template-columns:50px minmax(0,1fr);column-gap:16px}
  .plc-qs .fp-ic{width:50px;height:50px}
  .plc-qs h3{font-size:19px}
}