/* Programme, Coaching and Free materials pages (built on the homepage system) */
:root{
  --cream:#fdfbf7; --cream-2:#f4efe6; --ink:#0b1f44; --ink-2:#4b5566; --ink-3:#7a8394;
  --navy:#0e2a5c; --blue:#1f65cc; --blue-soft:#e8f0fc;
  --line:rgba(11,31,68,.08); --shell:rgba(11,31,68,.045);
  --serif:"Fraunces","Georgia","Times New Roman",serif;
  --sans:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --r:2rem; --rp:6px; --ri:calc(2rem - 6px);
  --gutter:16px; --max:1200px;
  --shadow:0 30px 80px -40px rgba(11,31,68,.35),0 10px 30px -20px rgba(11,31,68,.2);
  --display:"Montserrat",var(--sans); --dw:800; --dtrack:-.035em; --dlh:1.02; --quote:var(--sans); --qw:500;
}
#s1:checked ~ .wrap label[for=s1],#s2:checked ~ .wrap label[for=s2],#s3:checked ~ .wrap label[for=s3]{border-color:var(--ink);box-shadow:0 18px 36px -24px rgba(11,31,68,.5)}
#s1:checked ~ .wrap label[for=s1] i,#s2:checked ~ .wrap label[for=s2] i,#s3:checked ~ .wrap label[for=s3] i{background:var(--ink);border-color:var(--ink)}
#s1:checked ~ .wrap label[for=s1] i::after,#s2:checked ~ .wrap label[for=s2] i::after,#s3:checked ~ .wrap label[for=s3] i::after{transform:scale(1)}
#s1:focus-visible ~ .wrap label[for=s1],#s2:focus-visible ~ .wrap label[for=s2],#s3:focus-visible ~ .wrap label[for=s3]{outline:3px solid var(--blue);outline-offset:2px}
#s1:checked ~ .wrap .p1,#s2:checked ~ .wrap .p2,#s3:checked ~ .wrap .p3{position:relative;opacity:1;transform:none;visibility:visible;transition-delay:.08s}
#s1:checked ~ .wrap .p1 .card li,#s2:checked ~ .wrap .p2 .card li,#s3:checked ~ .wrap .p3 .card li{animation:build .6s var(--ease) both;animation-delay:calc(.15s + var(--i,0) * 80ms)}
/* ===== Inner pages (programme, coaching, free materials): built on the homepage system ===== */
/* Current page in the menus */
.links a[aria-current="page"],.sheet-menu a[aria-current="page"]{color:#fff}
.links a[aria-current="page"]{text-decoration:underline;text-underline-offset:.4em;text-decoration-color:#9cc2ff}
/* Shorter hero for inner pages: the same dark gradient, no video, the product beside the words */
.hero.inner{min-height:0}
.hero.inner .wrap{padding-top:96px;padding-bottom:36px;gap:28px}
.hero.inner h1{max-width:14ch}
.hero .crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px;display:flex;gap:10px;align-items:center}
.hero .crumb::before{content:"";width:18px;height:1px;background:#9cc2ff}
.hero .price-line{font-size:.95rem;color:rgba(255,255,255,.75);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:4px 14px}
.hero .price-line b{color:#fff;font-weight:600}
.hero .quiet{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.8);font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.hero .quiet:hover{color:#fff}
.hero-actions.stack{grid-template-columns:1fr;max-width:420px}
.hero .lead-in{display:grid;gap:12px;grid-template-columns:48px 1fr;align-items:center;font-size:.92rem;color:rgba(255,255,255,.75);line-height:1.35;max-width:46ch;margin:0 0 22px}
.hero .lead-in img{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.hero .lead-in b{display:block;color:#fff;font-weight:600}
@media (min-width:1000px){.hero.inner .wrap{padding-top:160px;padding-bottom:110px;grid-template-columns:7fr 5fr;align-items:center;column-gap:64px}.hero.inner h1{max-width:12ch}.hero-actions.stack{grid-template-columns:auto auto;max-width:none}}
@media (min-width:1000px){.hero.inner.free .wrap{grid-template-columns:6fr 6fr}}
/* The model in the hero: a cash flow being built across years, the formula typed */
.hero .model{margin:0}
.hero .model .core{background:rgba(6,16,38,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero .model.shell{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.sheet td.y{color:rgba(255,255,255,.55);font-size:.68rem;text-align:center}
@media (max-width:479px){.hero .sheet th:nth-child(5),.hero .sheet td:nth-child(5){display:none}}
.hero .model .chrome .formula{animation:type .9s steps(20) forwards 1.6s,caret 1s steps(1) 5}
.hero .model .chrome .formula.w{max-width:0}
@keyframes typew{to{max-width:22ch}}
.hero .model .chrome .formula.w{animation-name:typew,caret}
.hero .model .en{animation-delay:.5s}
/* The journey: four stages on a rail that draws itself as you scroll (CSS only); the cards arrive in turn */
.rail{position:relative;display:grid;gap:10px;padding-left:34px;margin:0}
.rail::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.rail::after{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--blue);border-radius:2px;transform-origin:top;transform:scaleY(0)}
@supports (animation-timeline:view()){
  html.js .rail::after{animation:draw linear both;animation-timeline:view();animation-range:entry 20% exit 60%}
}
@supports not (animation-timeline:view()){
  html.js .rail.in::after{transition:transform 2.4s var(--ease);transform:scaleY(1)}
  html:not(.js) .rail::after{transform:scaleY(1)}
}
@keyframes draw{to{transform:scaleY(1)}}
.stage{position:relative;list-style:none}
.stage::before{content:"";position:absolute;left:-30px;top:18px;width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--blue);box-sizing:border-box;z-index:1;transition:background-color .7s var(--ease),transform .7s var(--ease)}
.stage.in::before{background:var(--blue);transform:scale(1.15)}
.stage .core{padding:14px 16px;display:grid;gap:6px}
.stage .k{font-family:var(--mono);font-size:.72rem;color:var(--blue);letter-spacing:.06em;text-transform:uppercase}
.stage h3{font-size:1.1rem}
.stage p{color:var(--ink-2);font-size:.92rem;line-height:1.45;margin:0}
.stage ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px;color:var(--ink-2);font-size:.9rem}
.stage li{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start}
.stage li svg{width:16px;height:16px;color:var(--blue);margin-top:3px;stroke-width:1.5}
.stage.last .core{background:var(--ink);color:#fff}
.stage.last.shell{background:rgba(11,31,68,.08)}
.stage.last p,.stage.last ul{color:rgba(255,255,255,.75)}
.stage.last .k,.stage.last li svg{color:#9cc2ff}
@media (min-width:768px){.rail{gap:16px;padding-left:44px}.rail::before,.rail::after{left:14px}.stage::before{left:-37px;top:24px;width:16px;height:16px}.stage .core{padding:24px 26px;gap:8px}.stage h3{font-size:1.3rem}.stage p{font-size:.98rem}.stage li{font-size:.95rem}}
@media (min-width:1000px){.journey .wrap{display:grid;grid-template-columns:5fr 7fr;column-gap:72px;align-items:start}.journey .sticky{position:sticky;top:110px}.journey .sticky .intro{margin-bottom:24px}}
/* The ten tests: ten briefs that light one after another; one of them is free */
.tests{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;list-style:none;margin:0;padding:0}
.tests-each{display:flex;gap:6px;align-items:center;font-size:.84rem;color:var(--ink-2);margin:10px 0 0}
.tests-each svg{width:16px;height:16px;color:var(--blue);stroke-width:1.5;flex:none}
@media (min-width:640px){.tests-each{display:none}}
.test .core{padding:10px 6px 8px;display:grid;gap:8px;align-content:space-between;min-height:70px;position:relative;overflow:hidden;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.test:hover .core{transform:translateY(-3px);box-shadow:var(--shadow)}
.test .n{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:1.35rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.test .n small{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px}
.test .what{display:none;gap:3px;font-size:.78rem;color:var(--ink-2);line-height:1.3}
.test .what span{display:flex;gap:6px;align-items:center}
.test .what svg{width:14px;height:14px;color:var(--blue);stroke-width:1.5;flex:none}
.test .lines{display:none;position:absolute;right:10px;top:10px;width:34px;display:grid;gap:3px;opacity:.5}
.test .lines i{height:2px;background:var(--line);border-radius:2px;display:block}
.test .lines i:nth-child(2){width:70%}.test .lines i:nth-child(3){width:85%}
html.js .test.rv{transition-delay:calc(var(--i,0) * 70ms)}
.tests-foot{margin-top:16px;display:grid;gap:10px}
.tests-foot .free{display:grid;gap:10px}
.tests-foot .free .core{padding:16px;display:grid;gap:10px;background:var(--ink);color:#fff}
.tests-foot .free.shell{background:rgba(11,31,68,.08)}
.tests-foot .free p{margin:0;color:rgba(255,255,255,.78);font-size:.95rem}
.tests-foot .free b{color:#fff;display:block;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:1.25rem;margin-bottom:4px}
.tests-foot .free .acts{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.tests-foot .free .tlink:hover{color:#9cc2ff}
.note{color:var(--ink-2);font-size:.92rem;max-width:56ch}
@media (min-width:640px){.tests{gap:12px}.test .core{padding:16px 16px 14px;min-height:150px}.test .n{font-size:2.2rem}.test .what{display:grid;font-size:.84rem}.test .lines{display:grid}.tests-foot{grid-template-columns:7fr 5fr;gap:16px;align-items:start;margin-top:24px}.tests-foot .free .core{padding:24px}}
/* Who will benefit: his six, two columns from tablet */
.who{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.who li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:10px 14px 10px 10px;background:#fff;border:1px solid var(--line);border-radius:18px;font-size:.92rem;line-height:1.4;color:var(--ink-2)}
.who li i{width:34px;height:34px;border-radius:50%;background:var(--shell);display:grid;place-items:center;font-family:var(--mono);font-size:.7rem;color:var(--blue);flex:none}
.who li b{color:var(--ink);font-weight:600}
.plain{margin-top:16px;padding:12px 16px;border-left:3px solid var(--blue);color:var(--ink-2);font-size:.92rem;max-width:56ch}
.plain b{color:var(--ink);font-weight:600}
@media (min-width:720px){.who{grid-template-columns:1fr 1fr;gap:12px}.who li{padding:16px 18px 16px 14px;font-size:.95rem;border-radius:22px}}
/* Programme highlights: his eight, as a numbered list that reads, not eight boxes */
.hl{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.hl li{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.hl .n{font-family:var(--mono);font-size:.72rem;color:var(--blue);padding-top:5px}
.hl h3{font-size:1.02rem;margin-bottom:3px}
.hl p{color:var(--ink-2);font-size:.9rem;line-height:1.45;margin:0}
@media (min-width:720px){.hl{grid-template-columns:1fr 1fr;column-gap:40px}.hl li{padding:20px 0}.hl h3{font-size:1.12rem}.hl p{font-size:.95rem}}
/* Short stories on inner pages: two, side by side from tablet */
.stories.two{grid-template-columns:1fr}
@media (min-width:720px){.stories.two{grid-template-columns:1fr 1fr;gap:16px}}
/* Questions: plain details blocks, the same plus-circle as the syllabus */
.faq{display:grid;gap:8px;max-width:760px}
.faq .core{overflow:hidden}
.faq details{border-radius:var(--ri)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;min-height:54px;font-size:.98rem;font-weight:600;transition:background-color .5s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--cream)}
.faq summary i{width:30px;height:30px;border-radius:50%;background:var(--ink);position:relative;flex:none;transition:transform .7s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}
.faq summary i::before{width:12px;height:1.5px}
.faq summary i::after{width:1.5px;height:12px}
.faq details[open] summary i{transform:rotate(45deg)}
.faq .a{padding:0 16px 16px;color:var(--ink-2);font-size:.95rem;line-height:1.5;animation:build .5s var(--ease)}
.faq .a a{font-weight:600}
.faq-more{margin-top:14px}
@media (min-width:720px){.faq summary{padding:16px 22px;font-size:1.05rem}.faq .a{padding:0 22px 20px}}
/* Coaching: what the sessions are, as a plan you can read in order */
.plan{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:p}
.plan li{counter-increment:p}
.plan .core{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 16px 14px 12px;align-items:start;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.plan li:hover .core{transform:translateY(-3px);box-shadow:var(--shadow)}
.plan .core::before{content:counter(p,decimal-leading-zero);width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.78rem}
.plan h3{font-size:1.1rem;margin-bottom:4px}
.plan p{color:var(--ink-2);font-size:.92rem;line-height:1.45;margin:0}
.plan .t{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);display:block;margin-top:6px}
@media (min-width:720px){.plan{grid-template-columns:1fr 1fr;gap:12px}.plan .core{padding:22px 22px 20px 18px;gap:16px}.plan h3{font-size:1.2rem}.plan p{font-size:.95rem}}
@media (min-width:1000px){.plan{grid-template-columns:repeat(2,1fr);gap:16px}}
/* Coaching picker: the three situations, and what we would work on first for each */
.pick .opts label{font-size:.9rem}
.first{display:grid;gap:8px}
.first .core{padding:14px 16px;display:grid;gap:4px}
.first .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.first b{font-size:1.02rem;font-weight:600}
.first p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.45}
/* Compare: the two options side by side */
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--ri);overflow:hidden}
.compare th,.compare td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:1rem;line-height:1.15;background:var(--cream-2)}
.compare thead th small{display:block;font-family:var(--sans);font-weight:600;letter-spacing:0;font-size:.86rem;color:var(--ink-2);margin-top:4px}
.compare thead th.c{text-align:center;width:22%}
.compare td.c{text-align:center}
.compare td.c svg{width:20px;height:20px;stroke-width:1.5;color:var(--blue);vertical-align:middle}
.compare td.c .no{display:inline-block;width:14px;height:1.5px;background:rgba(11,31,68,.25);vertical-align:middle;border-radius:2px}
.compare td.c b{font-size:.84rem;font-weight:600;color:var(--ink)}
.compare thead th.on{background:var(--ink);color:#fff}
.compare thead th.on small{color:rgba(255,255,255,.72)}
.compare td.on{background:var(--blue-soft)}
.compare td .d{display:block;color:var(--ink-2);font-size:.82rem;margin-top:2px}
html.js .compare tbody tr{opacity:0;transform:translateX(-10px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js .compare.in tbody tr{opacity:1;transform:none}
@media (min-width:720px){.compare{font-size:.95rem}.compare th,.compare td{padding:16px 18px}.compare thead th{font-size:1.15rem}.compare thead th.c{width:20%}}
/* Closing action block */
.cta{margin-top:16px}
.cta .core{padding:22px 18px;display:grid;gap:12px;background:var(--ink);color:#fff}
.cta.shell{background:rgba(11,31,68,.08)}
.cta h2{font-size:clamp(1.5rem,2vw + .8rem,2.4rem)}
.cta p{color:rgba(255,255,255,.75);max-width:48ch;margin:0}
.cta .acts{display:grid;gap:10px;max-width:420px}
.cta .acts .btn{width:100%}
.cta .quiet{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:rgba(255,255,255,.8);font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.cta .quiet:hover{color:#fff}
.cta .fine{font-size:.86rem;color:rgba(255,255,255,.6)}
.cta .fine a{color:rgba(255,255,255,.85);font-weight:600}
@media (min-width:720px){.cta .core{padding:40px 40px;grid-template-columns:1fr auto;align-items:center;column-gap:40px}.cta .acts{grid-column:2;grid-row:1/span 3;align-self:center}.cta .fine{grid-column:1}}
/* Free materials: the test first, with its 30-minute limit drawn as a ring */
.testcard .core{display:grid;gap:14px;padding:18px 16px;background:var(--ink);color:#fff}
.testcard.shell{background:rgba(11,31,68,.08)}
.testcard h2{font-size:clamp(1.5rem,2vw + .8rem,2.4rem)}
.testcard p{color:rgba(255,255,255,.75);margin:0;max-width:46ch}
.testcard ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:rgba(255,255,255,.78);font-size:.92rem}
.testcard li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.testcard li svg{width:18px;height:18px;color:#9cc2ff;margin-top:2px;stroke-width:1.5}
.testcard .acts{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.testcard .tlink:hover{color:#9cc2ff}
.ring{width:132px;height:132px;position:relative;justify-self:start;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:rgba(255,255,255,.12)}
.ring .fg{stroke:#9cc2ff;stroke-linecap:round;stroke-dasharray:364;stroke-dashoffset:364;transition:stroke-dashoffset 2.6s var(--ease) .3s}
.testcard.in .ring .fg,html:not(.js) .ring .fg{stroke-dashoffset:0}
.testcard.in .timer .bar i,html:not(.js) .timer .bar i{transform:scaleX(1)}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:1.7rem;line-height:1}
.ring .num small{display:block;font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}
@media (min-width:720px){.testcard .core{grid-template-columns:1fr 160px;column-gap:32px;padding:32px 32px;align-items:center}.testcard .core > *{grid-column:1}.testcard .ring{grid-column:2;grid-row:1/span 5;width:160px;height:160px;justify-self:end}.ring .num{font-size:2.1rem}}
/* The other six items */
.items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.item .core{padding:14px 16px;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.item:hover .core{transform:translateY(-3px);box-shadow:var(--shadow)}
.item .ic{width:40px;height:40px;border-radius:12px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue)}
.item .ic svg{width:20px;height:20px;stroke-width:1.5}
.item h3{font-size:1.02rem;margin-bottom:3px}
.item p{margin:0;color:var(--ink-2);font-size:.88rem;line-height:1.4}
.item .fm{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:6px}
@media (min-width:720px){.items{grid-template-columns:1fr 1fr;gap:12px}.item .core{padding:20px 20px}.item h3{font-size:1.1rem}.item p{font-size:.92rem}}
@media (min-width:1000px){.items{grid-template-columns:repeat(3,1fr);gap:16px}}
/* Open this first: by situation, three rows */
.firstof{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.firstof li{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:18px;font-size:.92rem}
.firstof li span{color:var(--ink-2)}
.firstof li b{font-weight:600;color:var(--ink)}
.firstof li b::before{content:"→ ";color:var(--blue)}
@media (min-width:720px){.firstof li{grid-template-columns:1fr 1fr;gap:16px;padding:16px 20px;font-size:.95rem;align-items:center}}
/* signed in: each lesson name is a link; a row with one lesson is tappable all over */
.firstof a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(31,101,204,.45);text-underline-offset:.2em}
.firstof li:not(.go) b:has(a){line-height:2}
.firstof a:hover{text-decoration-color:var(--blue)}
.firstof li.go{position:relative;transition:transform .35s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.firstof li.go a::after{content:"";position:absolute;inset:0;border-radius:18px}
.firstof li.go:hover{border-color:rgba(11,31,68,.2);box-shadow:var(--shadow)}
.firstof li.go:active{transform:scale(.985)}
.firstof li.go:has(a:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.firstof li.go a:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.firstof li.go{transition:none}.firstof li.go:active{transform:none}}
/* The signup, in the page (not an overlay) */
.joinpage .wrap{display:grid;gap:20px}
.joinpage .form-shell{max-width:600px}
.joinpage h2{margin-bottom:6px}
.joinpage .lead{max-width:40ch;color:var(--ink-2);margin-bottom:0}
.joinpage .aside{display:grid;gap:10px;color:var(--ink-2);font-size:.95rem;max-width:44ch}
.joinpage .aside b{color:var(--ink);font-weight:600}
.joinpage .aside a{font-weight:600}
@media (min-width:900px){.joinpage .wrap{grid-template-columns:5fr 7fr;column-gap:72px;align-items:start}.joinpage .side{position:sticky;top:110px}}
@media (prefers-reduced-motion:reduce){
  .rail::after{transform:scaleY(1);animation:none}
  .ring .fg{stroke-dashoffset:0;transition:none}
  html.js .compare tbody tr{opacity:1;transform:none}
  .hero .model .chrome .formula.w{max-width:none}
}
/* Phone fixes after the first look */
@media (max-width:639px){.test.shell{border-radius:16px}.test .core{border-radius:11px}}
@media (max-width:719px){.compare th,.compare td{padding:10px 6px}.compare thead th{font-size:.9rem}.compare thead th small{font-size:.78rem}.compare thead th.c{width:21%}.compare td .d{display:none}.compare{font-size:.88rem}.compare td.c svg{width:18px;height:18px}}
@media (max-width:719px){.testcard .ring{order:-1;width:104px;height:104px}.ring .num{font-size:1.5rem}}
/* ===== Fix round 1 ===== */
/* Picker: fourth option, and nothing preselected (a neutral panel shows until one is picked) */
#s4:checked ~ .wrap label[for=s4]{border-color:var(--ink);box-shadow:0 18px 36px -24px rgba(11,31,68,.5)}
#s4:checked ~ .wrap label[for=s4] i{background:var(--ink);border-color:var(--ink)}
#s4:checked ~ .wrap label[for=s4] i::after{transform:scale(1)}
#s4:focus-visible ~ .wrap label[for=s4]{outline:3px solid var(--blue);outline-offset:2px}
#s4:checked ~ .wrap .p4{position:relative;opacity:1;transform:none;visibility:visible;transition-delay:.08s}
.p0 .hint{display:grid;gap:10px;padding:16px;border:1px dashed rgba(11,31,68,.25);border-radius:var(--ri);color:var(--ink-2);font-size:.95rem;max-width:48ch}
.p0 .hint b{color:var(--ink);font-weight:600}
/* Proof near the top of the sales pages: the alumni trays and one figure */
.proof .wrap{padding-top:28px;padding-bottom:28px}
.proof .intro{margin-bottom:14px}
.proof .figure{margin-top:12px}
.proof .figure .core{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:14px 16px}
.proof .figure p{max-width:none;margin:0}
.proof .figure p em{margin-top:3px}
@media (min-width:768px){.proof .wrap{padding-top:72px;padding-bottom:72px}.proof .figure{margin-top:16px;max-width:560px}.proof .figure .core{padding:20px 24px}}
/* Coaching hero: the person on the right at 1280, above the words on a phone */
.hero .person{margin:0}
.hero .person.shell{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.hero .person .core{background:rgba(6,16,38,.72);display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px 14px 12px 12px;color:#fff}
.hero .person img{width:96px;height:130px;object-fit:cover;border-radius:calc(var(--ri) - 10px);display:block}
.hero .person b{display:block;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:1.15rem;margin-bottom:4px}
.hero .person p{margin:0;font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.75)}
@media (min-width:1000px){.hero .person .core{grid-template-columns:1fr;padding:18px;gap:14px;max-width:360px;margin-left:auto}.hero .person img{width:100%;height:auto;aspect-ratio:188/255;max-height:380px}.hero .person b{font-size:1.4rem}.hero .person p{font-size:.95rem}}
/* Compare table: screen-reader text for each cell */
.compare td.c .vh{position:absolute}
/* Forms: written errors under the field */
.tests-note{margin-top:0}
.stories.one{grid-template-columns:1fr;max-width:760px}
@media (max-width:719px){.who li{padding:9px 12px 9px 8px;gap:8px}.stage .core{padding:12px 14px}.hl li{padding:12px 0}}
/* Phone: the four alumni trays as one strip you swipe, like the homepage reasons; who-will-benefit as one list */
@media (max-width:639px){
  .proof .trays{grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .proof .trays::-webkit-scrollbar{display:none}
  .proof .tray{scroll-snap-align:start}
  .proof .figure{margin-top:8px}
  .who{gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 0}
  .who li{border:0;border-radius:0;padding:8px 12px 8px 8px;background:none;border-bottom:1px solid var(--line)}
  .who li:last-child{border-bottom:0}
  .who li i{width:28px;height:28px;font-size:.64rem}
}
@media (max-width:639px){
  .sec .wrap{padding-top:24px;padding-bottom:24px}
  .stage.shell,.stage.last.shell{background:none;border:0;padding:0}
  .stage .core{box-shadow:none;background:none;padding:2px 0 6px}
  .stage.last .core{background:none;color:var(--ink)}
  .stage.last p{color:var(--ink-2)}
  .stage.last .k{color:var(--blue)}
  .rail{gap:14px}
  .stage::before{top:6px}
}
/* The 30-minute limit as a timer badge in the sheet's own style */
.timer{width:100%;max-width:300px;font-family:var(--mono);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:12px 14px 12px;display:grid;gap:10px;justify-self:start}
.timer .chrome{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.timer .chrome b{font-weight:500;color:#fff}
.timer .clock{font-family:var(--display);font-weight:var(--dw);letter-spacing:-.02em;font-size:clamp(2.1rem,8vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.timer .bar{height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.timer .bar i{display:block;height:100%;width:100%;border-radius:999px;background:#9cc2ff;transform:scaleX(0);transform-origin:left;transition:transform 2.6s var(--ease) .3s}
@media (max-width:719px){.testcard .timer{order:-1}}
@media (min-width:720px){.testcard .core{grid-template-columns:1fr 300px}.testcard .timer{grid-column:2;grid-row:1/span 5;justify-self:end;align-self:center}.timer .clock{font-size:3rem}}
@media (prefers-reduced-motion:reduce){.timer .bar i{transform:scaleX(1);transition:none}}
/* Six links in the pill: a little tighter from 900 to 1100 */