@font-face{font-family:Inter;src:url(./inter-var.woff2)format("woff2-variations"),url(./inter-var.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Manrope;src:url(./manrope-var.woff2)format("woff2-variations"),url(./manrope-var.woff2)format("woff2");font-weight:200 800;font-style:normal;font-display:swap}@font-face{font-family:Manrope Fallback Roboto;src:local(Roboto Bold),local(Roboto-Bold);font-weight:100 900;size-adjust:107.57%;ascent-override:99.1%;descent-override:27.89%;line-gap-override:0%}@font-face{font-family:Manrope Fallback Arial;src:local(Arial Bold),local(Arial-BoldMT),local(Liberation Sans Bold),local(LiberationSans-Bold);font-weight:100 900;size-adjust:101.35%;ascent-override:105.18%;descent-override:29.6%;line-gap-override:0%}@font-face{font-family:Inter Fallback Roboto;src:local(Roboto),local(Roboto Regular),local(Roboto-Regular);font-weight:100 549;size-adjust:107.33%;ascent-override:90.26%;descent-override:22.47%;line-gap-override:0%}@font-face{font-family:Inter Fallback Roboto;src:local(Roboto Bold),local(Roboto-Bold);font-weight:550 900;size-adjust:107.7%;ascent-override:89.94%;descent-override:22.4%;line-gap-override:0%}@font-face{font-family:Inter Fallback Arial;src:local(Arial),local(ArialMT),local(Liberation Sans),local(LiberationSans-Regular);font-weight:100 549;size-adjust:107.1%;ascent-override:90.46%;descent-override:22.52%;line-gap-override:0%}@font-face{font-family:Inter Fallback Arial;src:local(Arial Bold),local(Arial-BoldMT),local(Liberation Sans Bold),local(LiberationSans-Bold);font-weight:550 900;size-adjust:101.32%;ascent-override:95.61%;descent-override:23.81%;line-gap-override:0%}:root{--bg:#0f172a;--bg-elevated:#1e293b;--bg-elevated-2:#334155;--border:#334155;--border-strong:#f8fafc5e;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-tertiary:#64748b;--text-tertiary-readable:#94a3b8;--accent:#2563eb;--accent-strong:#93c5fd;--accent-dim:#2563eb1f;--accent-border:#60a5fa;--accent-glow:#2563eb38;--warn:#e5484d;--warn-border:#e5484d4d;--positive:#34d399;--positive-border:#34d39947;--accent-text:#60a5fa;--warn-text:var(--warn);--positive-text:var(--positive);--section-alt-mid:#141d30;--card-shadow:0 1px 2px #ffffff08, 0 6px 20px #ffffff0e;--header-shadow:none;--card-bg:#1e293b;--logo-mark:#f8fafc;--font-display:"Manrope", "Manrope Fallback Roboto", "Manrope Fallback Arial", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-body:"Inter", "Inter Fallback Roboto", "Inter Fallback Arial", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--radius-xs:4px;--radius-sm:8px;--radius-md:9.5px;--radius-lg:15.5px;--radius-full:999px;--container:1200px;--header-h:64px;--cta-w:204px;--cta-h:48px;--fs-lead:clamp(16px, .238vw + 15.14px, 18px);--fs-card-h:clamp(16.5px, .179vw + 15.86px, 18px);--fs-card-h-lg:clamp(18px, .238vw + 17.14px, 20px);--fs-heading-sm:clamp(18.5px, .298vw + 17.43px, 21px);--fs-body:clamp(15px, .119vw + 14.57px, 16px);--fs-body-lg:clamp(15.5px, .119vw + 15.07px, 16.5px);--fs-numeral:clamp(34px, 1.429vw + 28.86px, 46px);--fs-price:clamp(28px, .714vw + 25.43px, 34px);--ease:cubic-bezier(0.33, 1, 0.68, 1);--ease-reveal:cubic-bezier(0.22, 1, 0.36, 1);--ease-panel:cubic-bezier(0.4, 0, 0.2, 1);--dur-reveal:450ms;--reveal-shift:10px;--stagger:50ms;--stagger-max:150ms;--dur-card:300ms;--dur-ctl:180ms;--dur-faq:350ms;--dur-menu:250ms;--dur-theme:0ms;--lift-card:-3px;--lift-ctl:-2px;--nudge:4px;--icon-scale:1.08}:root[data-theme=light]{--bg:#f8fafc;--bg-elevated:#fafbfd;--bg-elevated-2:#e2e8f0;--border:#e2e8f0;--border-strong:#0f172a7a;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--text-tertiary-readable:#64748b;--accent-text:#2563eb;--warn-text:#bc3b3f;--positive-text:#1d7454;--accent-border:#2563eb;--warn-border:#bc3b3fb3;--accent-dim:#2563eb14;--section-alt-mid:#eef3f8;--card-shadow:0 1px 2px #0a0b0d0b, 0 6px 16px #0a0b0d11;--header-shadow:0 3px 8px #0a0b0d14;--card-bg:#fff;--logo-mark:#333}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}body{background:var(--bg);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{list-style:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;font-weight:800;line-height:1.12}h1,h2,h3,h4,.faq-question{text-wrap:balance}.hero-line-1,.hero-line-2{text-wrap:wrap}p,.section-sub,.faq-answer-inner{text-wrap:pretty}:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--radius-xs)}.skip-link,.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link:focus{clip:auto;white-space:normal;z-index:1000;background:var(--accent);color:#fff;width:auto;height:auto;font-family:var(--font-body);border-radius:var(--radius-sm);margin:0;padding:12px 20px;font-size:14px;font-weight:600;position:fixed;top:16px;left:16px;overflow:visible}main:focus-visible{outline:none}:where(a,button,input,select,textarea,summary,label,[role=button],[tabindex],[class*=card],[class*=btn],[class*=faq],[class*=toggle],[class*=link],[class*=tab],[class*=chip],[class*=pill],[class*=badge],[class*=tip],[class*=social],[class*=step],[class*=rule],.site-header),:where(a,button,input,select,textarea,summary,label,[role=button],[tabindex],[class*=card],[class*=btn],[class*=faq],[class*=toggle],[class*=link],[class*=tab],[class*=chip],[class*=pill],[class*=badge],[class*=tip],[class*=social],[class*=step],[class*=rule],.site-header):before,:where(a,button,input,select,textarea,summary,label,[role=button],[tabindex],[class*=card],[class*=btn],[class*=faq],[class*=toggle],[class*=link],[class*=tab],[class*=chip],[class*=pill],[class*=badge],[class*=tip],[class*=social],[class*=step],[class*=rule],.site-header):after,:where(a,button,input,select,textarea,summary,label,[role=button],[tabindex],[class*=card],[class*=btn],[class*=faq],[class*=toggle],[class*=link],[class*=tab],[class*=chip],[class*=pill],[class*=badge],[class*=tip],[class*=social],[class*=step],[class*=rule],.site-header) *,:where(a,button,input,select,textarea,summary,label,[role=button],[tabindex],[class*=card],[class*=btn],[class*=faq],[class*=toggle],[class*=link],[class*=tab],[class*=chip],[class*=pill],[class*=badge],[class*=tip],[class*=social],[class*=step],[class*=rule],.site-header) *:before,:where(a,button,input,select,textarea,summary,label,[role=button],[tabindex],[class*=card],[class*=btn],[class*=faq],[class*=toggle],[class*=link],[class*=tab],[class*=chip],[class*=pill],[class*=badge],[class*=tip],[class*=social],[class*=step],[class*=rule],.site-header) *:after{transition:background-color var(--dur-ctl) var(--ease), color var(--dur-ctl) var(--ease), border-color var(--dur-ctl) var(--ease), box-shadow var(--dur-ctl) var(--ease)}.problem-card,.transform-col,.curriculum-card,.price-card,.testimonial-card,.about-service-card,.contact-method-card,.founder-mini-card,.final-cta-box,.legal-summary-card,.forwho-col,.btn-secondary,.theme-toggle,.menu-toggle{box-shadow:var(--card-shadow)}.container{max-width:var(--container);margin:0 auto;padding:0 24px}.section{padding:var(--space-9) 0;position:relative}.section-alt{background:var(--section-alt-mid)}.section-head{max-width:680px;margin:0 0 var(--space-7)}.section-head.center{text-align:center;margin-left:auto;margin-right:auto}.section-title{margin-bottom:var(--space-4);font-size:clamp(28px,4vw,42px)}.heading-break-m{display:none}@media (width>=361px) and (width<=699px){.heading-break-m{display:inline}}.section-title .accent{color:var(--accent-text)}.section-sub{color:var(--text-secondary);font-size:var(--fs-lead);line-height:1.7}.section-sub strong{color:inherit;font-weight:600}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);transition:transform var(--dur-ctl) var(--ease), box-shadow var(--dur-ctl) var(--ease), background var(--dur-ctl) var(--ease), border-color var(--dur-ctl) var(--ease), color var(--dur-ctl) var(--ease);white-space:nowrap;padding:12px 28px;font-size:15px;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--card-shadow), 0 0 0 0 var(--accent-glow)}@media (hover:hover){.btn-primary:hover{box-shadow:var(--card-shadow), 0 12px 30px -8px var(--accent-glow);background:#1d4ed8;transform:translateY(var(--lift-ctl))}}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-strong);background:0 0}@media (hover:hover){.btn-secondary:hover{border-color:var(--accent-border);background:var(--accent-dim);transform:translateY(var(--lift-ctl))}}.btn-block{width:100%}.btn-sm{padding:9px 18px;font-size:14px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.site-header{height:var(--header-h);z-index:999;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--header-shadow);align-items:center;display:flex;position:sticky;top:0}.site-header.is-menu-open{background:var(--bg);z-index:1000;position:fixed;top:0;left:0;right:0}.site-header a,.site-header button{scroll-margin-top:calc(-1 * var(--header-h) - 8px)}.header-inner{justify-content:space-between;align-items:center;width:100%;display:flex}.brand{font-family:var(--font-display);letter-spacing:.01em;align-items:center;gap:10px;font-size:17px;font-weight:800;display:flex}.brand-logo{width:auto;height:clamp(31px,7.7vw,40px);display:block}.nav{align-items:center;gap:var(--space-6);display:flex}.nav-links{gap:var(--space-6);display:flex}.nav-links a{color:var(--text-secondary);padding:6px 0;font-size:14.5px;font-weight:500;transition:color var(--dur-ctl) var(--ease);position:relative}@media (hover:hover){.nav-links a:hover{color:var(--text-primary)}}.nav-links a:after{content:"";background:var(--accent);width:0;height:2px;transition:width var(--dur-ctl) var(--ease);position:absolute;bottom:0;left:0}@media (hover:hover){.nav-links a:hover:after{width:100%}}.nav-cta{align-items:center;gap:var(--space-4);display:flex}.menu-toggle{border:1px solid var(--border-strong);border-radius:var(--radius-sm);justify-content:center;align-items:center;width:40px;height:40px;display:none}.menu-toggle svg{width:18px;height:18px}.theme-toggle{border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;transition:color var(--dur-ctl) var(--ease), border-color var(--dur-ctl) var(--ease), background var(--dur-ctl) var(--ease), box-shadow var(--dur-ctl) var(--ease);display:flex}@media (hover:hover){.theme-toggle:hover{color:var(--accent-text);border-color:var(--accent-border)}}.theme-toggle svg{width:18px;height:18px}.mobile-nav{top:var(--header-h);height:calc(100dvh - var(--header-h));background:var(--bg);z-index:999;padding:var(--space-6) 24px;position:fixed;left:0;right:0;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease), visibility 0s linear var(--dur-menu)}.mobile-nav.is-open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease), visibility 0s}.mobile-nav a{padding:var(--space-4) 0;border-bottom:1px solid var(--border);font-size:20px;font-weight:600;display:block}.mobile-nav .btn{margin-top:var(--space-6);justify-content:center;align-items:center;display:flex}.hero{padding-top:var(--space-9);padding-bottom:var(--space-9);position:relative}.hero-inner{z-index:1;text-align:center;max-width:760px;margin:0 auto;position:relative}.section-glow-light>.container{z-index:1;position:relative}.session-status{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);margin-bottom:var(--space-5);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:13px;display:inline-flex}@keyframes status-blink{0%,to{opacity:1}50%{opacity:.2}}@keyframes status-ring{0%{transform:scale(1);opacity:.6}70%,to{transform:scale(var(--ring-scale,2.5));opacity:0}}.session-dot{background:var(--text-tertiary);border-radius:50%;flex-shrink:0;width:8px;height:8px}.session-dot.is-closed{background:var(--warn-text)}.session-dot.is-open{background:var(--positive);animation:1.4s ease-in-out infinite status-blink}.session-text{color:var(--text-primary);font-weight:600}.session-next{color:var(--text-tertiary-readable)}.session-next:before{content:"·";margin-right:8px}.session-row{display:contents}.hero-br-m{display:none}.hero-copy h1{margin-bottom:var(--space-5);line-height:1.15}.hero-line-1{white-space:nowrap;font-size:clamp(37px,6.6vw,68px);display:block}.hero-line-2{white-space:nowrap;margin-top:.2em;font-size:clamp(32px,5.55vw,58px);display:block}.hero-copy h1 .accent{color:var(--accent-text)}.hero-rotate-wrap{white-space:nowrap;grid-template-columns:minmax(0,1fr);justify-items:center;transition:width .45s cubic-bezier(.22,1,.36,1);display:inline-grid}.hero-rw{grid-area:1/1}.hero-rotate-wrap.is-rotating .hero-rw{opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1);transform:translateY(.35em)}.hero-rotate-wrap.is-rotating .hero-rw.is-on{opacity:1;transform:none}.hero-rotate-wrap.is-rotating .hero-rw.is-out{opacity:0;transform:translateY(-.35em)}.hero-copy p{font-size:var(--fs-lead);color:var(--text-secondary);max-width:620px;margin:0 auto var(--space-6);line-height:1.7}.hero-actions{gap:var(--space-4);flex-wrap:wrap;justify-content:center;display:flex}.hero-actions .btn{width:var(--cta-w);height:var(--cta-h);padding-left:var(--space-4);padding-right:var(--space-4)}.stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:var(--space-7) 0}.stats-grid{gap:var(--space-5);text-align:center;grid-template-columns:repeat(4,1fr);display:grid}.stat-num{font-family:var(--font-display);color:var(--accent-text);margin-bottom:var(--space-2);font-size:clamp(32px,4vw,44px);font-weight:800}.stat-label{color:var(--text-secondary);font-size:14px}.card-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr);display:grid}.problem-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);transition:border-color var(--dur-card) var(--ease), transform var(--dur-card) var(--ease)}.problem-icon{border-radius:var(--radius-sm);background:var(--accent-dim);border:1px solid var(--accent-border);width:40px;height:40px;margin-bottom:var(--space-4);justify-content:center;align-items:center;display:flex}.problem-icon svg{width:20px;height:20px;stroke:var(--accent-text)}.problem-card h3{font-size:var(--fs-card-h);margin-bottom:var(--space-2);font-weight:700}.problem-card p{color:var(--text-secondary);font-size:var(--fs-body);line-height:1.7}.transform-grid{gap:var(--space-6);grid-template-columns:1fr auto 1fr;align-items:stretch;display:grid}.transform-col{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}.transform-col.after{border-color:var(--accent-border);background:var(--accent-dim)}:root[data-theme=light] .transform-col.after{background:#2563eb0f}.transform-label{font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary-readable);margin-bottom:var(--space-4);font-size:12px;display:block}.transform-col.after .transform-label{color:var(--accent-text)}.transform-col ul li{border-bottom:1px solid var(--border);font-size:var(--fs-body-lg);color:var(--text-secondary);align-items:flex-start;gap:10px;padding:10px 0;display:flex}.transform-col ul li:last-child{border-bottom:none}.transform-col.after ul li{color:var(--text-primary)}:root[data-theme=light] .transform-col.after ul li{border-bottom-color:#cbd5e1}:root[data-theme=light] .transform-col.after .transform-label{color:#1d4ed8}.transform-col svg{flex-shrink:0;width:16px;height:16px;margin-top:3px}.transform-col.before svg{stroke:var(--text-tertiary)}.transform-col.after svg{stroke:var(--accent-text)}.transform-arrow{color:var(--accent-text);justify-content:center;align-items:center;display:flex}.transform-arrow svg{width:28px;height:28px}.curriculum-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr);display:grid}.curriculum-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);transition:border-color var(--dur-card) var(--ease), transform var(--dur-card) var(--ease);position:relative;overflow:hidden}.curriculum-num{font-family:var(--font-display);font-size:var(--fs-numeral);color:#0000;-webkit-text-stroke:1px var(--accent-text);user-select:none;font-weight:700;line-height:1;position:absolute;top:8px;right:18px}.curriculum-card h3{font-size:var(--fs-card-h);margin-bottom:var(--space-2);margin-top:var(--space-4);font-weight:700;position:relative}.curriculum-card p{color:var(--text-secondary);font-size:var(--fs-body);line-height:1.7;position:relative}.process-grid{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid;position:relative}.process-grid:before{content:"";top:27px;left:calc((100% - 2 * var(--space-6)) / 6);right:calc((100% - 2 * var(--space-6)) / 6);background:repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);z-index:0;height:1px;position:absolute}.process-step{z-index:1;text-align:center;flex-direction:column;align-items:center;display:flex;position:relative}.process-num{background:var(--bg);border:1px solid var(--accent-border);width:54px;height:54px;color:var(--accent-text);font-family:var(--font-display);margin-bottom:var(--space-4);z-index:1;border-radius:50%;justify-content:center;align-items:center;font-size:17.3px;font-weight:700;display:flex;position:relative}.process-step h3{font-size:var(--fs-card-h-lg);margin-bottom:var(--space-2)}.process-step p{color:var(--text-secondary);font-size:var(--fs-body);line-height:1.7}.price-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);height:100%;transition:transform var(--dur-card) var(--ease), border-color var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease);flex-direction:column;display:flex;position:relative}.price-name{font-family:var(--font-display);letter-spacing:normal;text-wrap:wrap;margin-bottom:var(--space-2);min-width:0;font-size:19px;font-weight:700;line-height:1.6}.price-value{font-family:var(--font-display);font-size:var(--fs-price);margin-bottom:var(--space-5);font-weight:800}.price-sub{font-family:var(--font-body);color:var(--text-tertiary-readable);vertical-align:baseline;margin-left:6px;font-size:15px;font-weight:500;display:inline-block}.error-section{padding-top:var(--space-9);padding-bottom:var(--space-10)}.error-section .section-head{margin-bottom:var(--space-7)}.price-cta{height:48px;padding-left:var(--space-4);padding-right:var(--space-4)}.services-grid{gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;max-width:900px;margin:0 auto;display:grid}@media (width<=780px){.services-grid{grid-template-columns:minmax(0,1fr)}}.price-card ul{margin-bottom:var(--space-6);flex-grow:1}.price-card ul li{font-size:var(--fs-body);color:var(--text-secondary);align-items:flex-start;gap:10px;padding:9px 0;display:flex}.price-card ul li svg{width:16px;height:16px;stroke:var(--accent-text);flex-shrink:0;margin-top:3px}.testimonial-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr);display:grid}.testimonial-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);flex-direction:column;display:flex}.stars{margin-bottom:var(--space-4);color:var(--accent-text);gap:3px;display:flex}.stars svg{width:15px;height:15px;fill:var(--accent-text)}.testimonial-card blockquote{font-size:var(--fs-body-lg);color:var(--text-secondary);margin-bottom:var(--space-5);line-height:1.7}.testimonial-person{align-items:center;gap:12px;margin-top:auto;display:flex}.avatar-initial{background:var(--accent-dim);border:1px solid var(--accent-border);width:40px;height:40px;color:var(--accent-text);font-family:var(--font-display);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.testimonial-name{font-size:14px;font-weight:600}.testimonial-role{color:var(--text-tertiary-readable);font-size:12.5px}.forwho-grid{gap:var(--space-5);grid-template-columns:1fr 1fr;display:grid}.forwho-col{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--space-6);border:1px solid var(--border)}.forwho-col.yes{border-color:var(--positive-border)}.forwho-col.no{border-color:var(--warn-border)}.forwho-col h3{margin-bottom:var(--space-4);font-size:17px}.forwho-col.yes h3{color:var(--positive-text)}.forwho-col.no h3{color:#f37e81}:root[data-theme=light] .forwho-col.no h3{color:#a83236}.forwho-col ul li{font-size:var(--fs-body);color:var(--text-secondary);align-items:flex-start;gap:10px;padding:9px 0;display:flex}.forwho-col ul li svg{flex-shrink:0;width:16px;height:16px;margin-top:3px}.forwho-col.yes svg{stroke:var(--positive-text)}.forwho-col.no svg{stroke:var(--warn-text)}.faq-list{border-top:1px solid var(--border);max-width:780px;margin:0 auto}.faq-item{border-bottom:1px solid var(--border)}.faq-question{justify-content:space-between;align-items:center;gap:var(--space-4);width:100%;padding:var(--space-5) 4px;text-align:left;font-size:var(--fs-card-h);font-weight:600;display:flex}.faq-question .icon{border:1px solid var(--border-strong);width:22px;height:22px;transition:transform var(--dur-faq) var(--ease), border-color var(--dur-faq) var(--ease);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.faq-question .icon:before,.faq-question .icon:after{content:"";background:var(--text-secondary);transition:transform var(--dur-faq) var(--ease), background var(--dur-faq) var(--ease);position:absolute}.faq-question .icon:before{width:9px;height:2px}.faq-question .icon:after{width:2px;height:9px}.faq-item.is-open .faq-question .icon{border-color:var(--accent-border);background:var(--accent-dim)}.faq-item.is-open .faq-question .icon:after{transform:scaleY(0)}.faq-item.is-open .faq-question .icon:before{background:var(--accent)}:where(.js) .faq-answer{visibility:hidden;height:0;transition:height var(--dur-faq) var(--ease-panel), visibility 0s linear var(--dur-faq);overflow:hidden}.faq-item.is-open .faq-answer{visibility:visible;transition:height var(--dur-faq) var(--ease-panel), visibility 0s}.faq-answer-inner{padding:0 4px var(--space-5);color:var(--text-secondary);font-size:var(--fs-lead);max-width:680px;line-height:1.75}.faq-answer-inner a{color:var(--accent-text);text-underline-offset:2px;text-decoration:underline}.final-cta{text-align:center;padding:var(--space-9) 0;position:relative}.final-cta-box{background:var(--card-bg);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-9) var(--space-6);position:relative;overflow:hidden}.final-cta h2{max-width:720px;margin:0 auto var(--space-4);font-size:clamp(26px,4vw,38px);position:relative}.final-cta p{color:var(--text-secondary);max-width:560px;margin:0 auto var(--space-6);font-size:var(--fs-body);line-height:1.7;position:relative}.final-cta .hero-actions{justify-content:center;position:relative}.approach-grid{grid-template-columns:1fr;max-width:720px;margin:0 auto;display:grid}.approach-copy p{color:var(--text-secondary);font-size:var(--fs-body);margin-bottom:var(--space-4);line-height:1.8}.about-service-grid{gap:var(--space-5);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=780px){.about-service-grid{grid-template-columns:1fr}}.about-service-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);transition:border-color var(--dur-card) var(--ease), transform var(--dur-card) var(--ease)}@media (hover:hover){a.about-service-card:hover{border-color:var(--border-strong);transform:translateY(var(--lift-card))}}.about-service-card .problem-icon{margin-bottom:var(--space-4)}.about-service-head{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-2);flex-wrap:wrap;display:flex}.about-service-head h3{font-size:var(--fs-card-h);font-weight:700}.about-service-card p{color:var(--text-secondary);margin-bottom:var(--space-4);font-size:14.5px;line-height:1.7}.about-service-link{color:var(--accent-text);font-size:14px;font-weight:600;transition:color var(--dur-ctl) var(--ease)}@media (hover:hover){.about-service-link:hover{color:var(--accent-strong)}}@media (hover:hover){:root[data-theme=light] .about-service-link:hover{color:var(--text-primary)}}.founder-card-wrap{max-width:520px;margin:0 auto}.founder-mini-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-7);text-align:center}.founder-photo{aspect-ratio:1;border-radius:var(--radius-lg);border:1px solid var(--accent-border);object-fit:cover;width:min(240px,100%);height:auto;margin:0 auto var(--space-5);display:block}@media (width<=640px){.founder-photo{width:min(200px,100%)}}.founder-mini-name{color:var(--text-primary);font-size:19px;font-weight:700}.founder-mini-role{color:var(--accent-text);margin-top:2px;margin-bottom:var(--space-4);font-size:13.5px;font-weight:600}.founder-mini-text{color:var(--text-secondary);margin-bottom:var(--space-3);font-size:14.5px;line-height:1.7}.founder-mini-text:last-child{margin-bottom:0}.principles-grid{gap:var(--space-5);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=640px){.principles-grid{grid-template-columns:1fr}}.legal-page-content{max-width:760px;margin:0 auto}.legal-heading-block{margin-bottom:var(--space-6)}.legal-meta{color:var(--text-secondary);margin-top:-8px;font-size:14px}.legal-summary-card{border-left:3px solid var(--accent);background:var(--card-bg);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);margin:var(--space-6) 0 var(--space-8)}.legal-summary-card .legal-summary-label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.04em;color:var(--accent-text);margin-bottom:var(--space-2);font-size:12px;font-weight:600;display:block}.legal-summary-card p{color:var(--text-secondary);margin:0;font-size:15px;line-height:1.7}.legal-section{margin-bottom:var(--space-7)}.legal-section h2{font-family:var(--font-display);font-size:var(--fs-heading-sm);margin-bottom:var(--space-3);font-weight:800}.legal-section h3{color:var(--text-primary);margin-bottom:var(--space-2);margin-top:var(--space-4);font-size:15px;font-weight:700}.legal-section p{color:var(--text-secondary);margin-bottom:var(--space-3);font-size:15px;line-height:1.75}.legal-section ul{margin-bottom:var(--space-3);padding-left:20px}.legal-section ul li{color:var(--text-secondary);margin-bottom:var(--space-2);font-size:15px;line-height:1.75}.legal-section a{color:var(--accent-text);text-underline-offset:2px;text-decoration:underline}@media (hover:hover){.legal-section a:hover{color:var(--accent-strong)}}@media (hover:hover){:root[data-theme=light] .legal-section a:hover{color:var(--text-primary)}}.legal-see-also{border-top:1px solid var(--border);padding-top:var(--space-6);color:var(--text-tertiary-readable);font-size:14px}.legal-see-also a{color:var(--accent-text);text-underline-offset:2px;text-decoration:underline}.site-footer{border-top:1px solid var(--border);padding:var(--space-8) 0 var(--space-6)}.footer-grid{gap:var(--space-6);margin-bottom:var(--space-7);grid-template-columns:minmax(280px,2fr) minmax(185px,1.3fr) minmax(150px,.95fr) minmax(110px,.75fr) minmax(140px,1fr);display:grid}.footer-brand-logo{width:auto;height:42px;display:block}.footer-brand p{color:var(--text-tertiary-readable);margin-top:var(--space-4);max-width:360px;font-size:14px;line-height:1.7}.footer-col h3{align-items:center;gap:var(--space-2);font-family:var(--font-display);color:var(--text-primary);margin-bottom:var(--space-4);font-size:14px;font-weight:700;display:flex}.footer-col ul li{margin-bottom:var(--space-3)}.footer-col a{color:var(--text-secondary);font-size:14px;transition:color var(--dur-ctl) var(--ease)}@media (hover:hover){.footer-col a:hover{color:var(--accent-text)}}.footer-icon-link{align-items:center;gap:8px;display:inline-flex}.footer-link-icon{flex-shrink:0}.footer-social{gap:var(--space-2);margin-top:var(--space-5);flex-wrap:wrap;display:flex}.footer-social a{width:42px;height:42px;color:var(--text-secondary);transition:color var(--dur-ctl) var(--ease), transform var(--dur-ctl) var(--ease);justify-content:center;align-items:center;display:flex}@media (hover:hover){.footer-social a:hover{color:var(--accent-text);transform:translateY(var(--lift-ctl))}}.footer-social svg{width:23.5px;height:23.5px;display:block}.footer-legal-note{border-top:1px solid var(--border);padding-top:var(--space-6);margin-bottom:var(--space-6);color:var(--text-tertiary-readable);font-size:13.5px;line-height:1.7}.footer-legal-note a{color:var(--text-tertiary-readable);text-underline-offset:2px;text-decoration:underline;transition:color var(--dur-ctl) var(--ease)}@media (hover:hover){.footer-legal-note a:hover{color:var(--accent-text)}}.footer-bottom{border-top:1px solid var(--border);padding-top:var(--space-5);color:var(--text-tertiary-readable);justify-content:flex-start;align-items:center;font-size:13px;display:flex}@media (width<=1199px){.footer-grid{grid-template-columns:minmax(185px,1.4fr) minmax(150px,1fr) minmax(110px,.8fr) minmax(130px,1fr)}.footer-brand{grid-column:1/-1}}@media (width<=879px){.footer-grid{grid-template-columns:1fr 1fr}}@media (width<=1024px){.nav-links{display:none}.menu-toggle{display:flex}.stats-grid,.card-grid,.curriculum-grid{grid-template-columns:repeat(2,1fr)}.process-grid,.testimonial-grid{gap:var(--space-5);grid-template-columns:1fr}.process-grid:before{display:none}.process-num:before,.process-num:after{content:"";background:repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);width:32px;height:1px;position:absolute;top:50%;transform:translateY(-50%)}.process-num:before{right:calc(100% + 10px)}.process-num:after{left:calc(100% + 10px)}}@media (width<=720px){.section{padding:var(--space-7) 0}.transform-grid{grid-template-columns:1fr}.transform-arrow{padding:var(--space-2) 0}.transform-arrow svg{transform:rotate(90deg)}}@media (width<=640px){.nav-cta-btn{display:none}.stats-grid{gap:var(--space-6) var(--space-4);grid-template-columns:repeat(2,1fr)}.card-grid,.curriculum-grid,.process-grid,.testimonial-grid,.forwho-grid{grid-template-columns:1fr}.hero-actions,.final-cta .hero-actions{flex-direction:column;align-items:center}.hero-actions .btn{width:100%;max-width:360px}.footer-grid{gap:var(--space-6);grid-template-columns:1fr}.problem-card,.curriculum-card,.price-card,.testimonial-card,.forwho-col,.about-service-card,.transform-col{padding:var(--space-5)}.footer-social{gap:4px}.final-cta-box{padding:var(--space-7) var(--space-5)}:root{--header-h:60px}.brand-logo{height:clamp(34px,8.5vw,44px)}.menu-toggle,.theme-toggle{width:44px;height:44px}.session-status{flex-direction:column;row-gap:3px;max-width:100%;padding:7px 14px;font-size:clamp(11.5px,3.4vw,13px)}.session-row{justify-content:center;align-items:center;gap:6px;max-width:100%;display:flex}.session-next{font-variant-numeric:tabular-nums}.session-next:before{content:none}.hero-br-m{display:inline}.hero-copy h1{text-wrap:wrap}.hero-line-1,.hero-line-2{white-space:normal;margin-top:0;display:inline}.hero-line-1{font-size:clamp(34px,10.2vw,44px)}.hero-line-2,.hero-line-1 .hero-start{font-size:clamp(30px,9.1vw,39px)}}@media (width<=365px){.footer-social{gap:2px}.footer-social a{width:36px;height:36px}}
/* Homepage headings, mobile only: balanced two-line wraps (same pattern as .heading-break-m) */.heading-break-core-m,.heading-break-faq-m{display:none}@media (width>=370px) and (width<=699px){.heading-break-core-m{display:inline}}@media (width<=699px){.heading-break-faq-m{display:inline}}
/* Services cards, desktop only: two-column grid, row spacing */@media (width>=781px){.services-grid{column-gap:var(--space-6);row-gap:var(--space-6)}}
/* About: "Education First. Process Over Promises." paragraphs centred */.approach-copy{text-align:center}
/* Homepage section headings, desktop only: let two long headings use the full container width so they sit on one line when it fits; paragraph stays at its normal 680px measure */@media (width>=781px){.section-head.section-head-wide{max-width:none}.section-head-wide .section-sub{max-width:680px;margin-left:auto;margin-right:auto}}
/* Fading decorative dividers: visible in the centre, transparent at both ends. Same width and 1px height as the solid line it replaces. The header's bottom line uses the same fade as the footer's top line (its existing border and shadow are otherwise unchanged). */:root{--fade-divider:linear-gradient(90deg,transparent 0%,var(--border) 50%,transparent 100%)}.site-header,.site-footer,section.stats,.legal-see-also{border-image:var(--fade-divider) 1}
/* One shared top glow on every page: soft accent tint that fades out, so all pages share the same background look. */main{position:relative}main::before{content:"";position:absolute;top:calc(-1 * var(--header-h));left:0;right:0;height:520px;background:linear-gradient(to bottom,var(--accent-dim),transparent);pointer-events:none;z-index:-1}

/* ==========================================================================
   Service cards (Pricing section on the home page, formerly the Services page).
   Every rule is scoped to .services-grid, so no other card type is affected.
   Layout: 1 column (up to 799px) -> 2 columns, third card centred
           (800 to 1199px) -> 3 columns in one row (1200px and up).
   Width: the grid is centred and capped at 480px in one column and 800px in two
   columns, so the cards stay balanced and do not stretch far past their content.
   The three-column desktop layout is not capped (its cards already fit snugly).
   ========================================================================== */
.services-grid {
  max-width: 480px;
  margin: 0 auto;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 800px) {
  .services-grid {
    max-width: 800px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .services-grid .price-card:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    justify-self: center;
  }
}
@media (min-width: 1200px) {
  .services-grid {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .services-grid .price-card:nth-child(3) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
}

/* Card shell */
.services-grid .price-card {
  height: auto;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 28px -14px rgba(0, 0, 0, .5);
}
:root[data-theme=light] .services-grid .price-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -14px rgba(15, 23, 42, .18);
}
@media (max-width: 640px) {
  .services-grid .price-card { padding: 22px; }
}

/* Title row: same size and weight on every card; the row has one fixed
   height so the price starts at the same level on all three cards. */
.services-grid .price-card > .price-name {
  display: flex;
  min-height: 32px;
  margin: 0;
  align-items: center;
}
.services-grid .price-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* Price: amount first, unit smaller and muted. The fading divider hangs off
   the price block so it sits at the same height on every card. */
.services-grid .price-value {
  margin: 10px 0 0;
  font-size: clamp(34px, 1.6vw + 16px, 42px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.services-grid .price-sub {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 500;
}
.services-grid .price-value::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 22px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text-primary) 28%, transparent) 50%, transparent 100%);
}
:root[data-theme=light] .services-grid .price-value::after {
  background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text-primary) 18%, transparent) 50%, transparent 100%);
}

/* Feature list: left aligned, one even gap between points. The list takes the
   spare height of the row (flex-grow) so the buttons line up, while the rows
   inside it keep their natural spacing. */
.services-grid .price-card ul {
  margin: 22px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex-grow: 1;
}
.services-grid .price-card ul li {
  padding: 0;
  gap: 12px;
  font-size: var(--fs-body);
  line-height: 1.5;
  text-align: left;
}
.services-grid .price-card ul li svg {
  width: 16px;
  height: 16px;
  margin-top: calc((1.5em - 16px) / 2);
}

/* ==========================================================================
   v63: cards, bottom CTA boxes, legal summary, form fields, buttons.
   Appended last so it overrides the rules above; the Services pricing-card
   block earlier in this file is not touched.
   ========================================================================== */

/* Field surface and the fading divider line: one value per theme. The input
   surface sits a little darker than the card in Dark and a little lighter-grey
   than the white card in Light, so a field is visible without being black. */
:root {
  --input-bg: #162033;
  --input-bg-hover: #18253b;
  --fade-line: #f8fafc54;
}
:root[data-theme=light] {
  --input-bg: #f5f7fb;
  --input-bg-hover: #fff;
  --fade-line: #0f172a3d;
}

/* ---- Bottom CTA boxes (Home, Services, About) ---- */
/* The outer border is gone: the box is separated by its background and a soft neutral
   shadow. Dark keeps a very faint edge so the corners do not melt into the page. */
:root {
  --cta-shadow: 0 1px 2px #00000040, 0 18px 40px -20px #000000a6;
  --cta-edge: #f8fafc12;
}
:root[data-theme=light] {
  --cta-shadow: 0 2px 4px #0f172a0a, 0 18px 44px -16px #0f172a33;
  --cta-edge: transparent;
}
.final-cta-box {
  padding: 64px var(--space-6);
  border-color: var(--cta-edge);
  box-shadow: var(--cta-shadow);
}
:root[data-theme=light] .final-cta-box { background: #fff; }
.final-cta h2 { margin-bottom: 14px; }
.final-cta p { margin: 0 auto; }
.final-cta p::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 28px;
  background: linear-gradient(90deg, transparent 0%, var(--fade-line) 50%, transparent 100%);
}
.final-cta .hero-actions { margin-top: 28px; }
@media (width<=640px) {
  .final-cta-box { padding: 44px var(--space-5); }
  .final-cta p::after { margin-top: 24px; }
  .final-cta .hero-actions { margin-top: 24px; }
}

/* ---- Legal summary card: full border so it separates from the page in Light ---- */
.legal-summary-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}


/* ---- Buttons and icon buttons: blue border on hover, one focus outline ---- */
.btn:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.menu-toggle { color: var(--text-secondary); transition: color var(--dur-ctl) var(--ease), border-color var(--dur-ctl) var(--ease), background var(--dur-ctl) var(--ease), box-shadow var(--dur-ctl) var(--ease); }
@media (hover:hover){.menu-toggle:hover { color: var(--accent-text); border-color: var(--accent-border); }}
.theme-toggle:focus-visible,
.menu-toggle:focus-visible { outline-offset: 2px; border-radius: var(--radius-sm); }

/* Card hover: every card that lifts on hover takes the blue hover border.
   v113: only real links (a.about-service-card, the tool previews) and the price cards keep it;
   the problem, curriculum and plain about-service cards are not clickable and no longer react. */
@media (hover:hover){a.about-service-card:hover { border-color: var(--accent-border); }}

/* v67 mobile heading line breaks (phones 340 to 699px). The break elements are hidden by default
   and on desktop, so desktop headings wrap exactly as before. */
.heading-break-about-m { display: none; }
@media (min-width: 340px) and (max-width: 699px) {
  .heading-break-m,
  .heading-break-core-m,
  .heading-break-faq-m,
  .heading-break-about-m { display: inline; }
}
/* 360px phones only: "to a Repeatable Process" and "Process Over Promises." are 5px and 0.2px
   wider than the 312px text column. A hair less letter spacing keeps each on one line without
   changing the font size. */
@media (min-width: 340px) and (max-width: 374px) {
  .heading-fit-m { letter-spacing: -0.8px; }
}

/* v72 status dots: active = green, continuously blinking with ring. Closed = red and static (set above).
   Light theme: the bright green is only 1.85:1 on the light page, so the active dot uses the theme's darker green (5.46:1). The ring glow keeps its original colour. */
:root[data-theme=light] .session-dot.is-open { background: var(--positive-text); }

/* v81 status ring: the ring was a box-shadow animation, which forced a style recalculation and a repaint on the
   main thread on every frame for as long as a dot was active (measured about 61 recalcs and 41 ms of main-thread
   time per second on the home page, even with the dot off screen). The same ring is now a hollow ::after circle that only
   changes transform and opacity, which the browser animates on the compositor. Size, colour, timing and the
   70% hold are unchanged; --ring-scale is (dot size + 2 x 6px) / dot size. */
.session-dot.is-open { position: relative; }
.session-dot.is-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #34d399; /* hollow, so it never paints over the dot itself */
  opacity: 0;
  pointer-events: none;
  animation: 1.4s ease-out infinite status-ring;
}


/* ==========================================================================
   v76 motion system
   One place to tune the motion of the whole site: the tokens are at the top of
   this file's first :root block (--dur-*, --ease*, --lift-*, --stagger*).

   Entrance (two entry points, one animation)
     .enter   first view of a page (heading, intro, buttons). Pure CSS: it needs
              no JavaScript and does not wait for a script, so text and the LCP
              element appear at once. Delay = step * --stagger, capped.
     .reveal  everything below the fold. /script.js adds .is-visible when the
              element scrolls into view and sets --i, the position inside the
              group that appeared together, so only nearby items are staggered.
   Both play ab-reveal-up: opacity and the separate "translate" property.
   Hover never uses "translate" (cards lift with "transform"), and the entrance
   is an animation, not a transition, so the two cannot override or fight each
   other: a card can be hovered while it is still arriving, with no snap, and the
   stagger delay never applies to hover.
   Content is never hidden without JavaScript (the .js class), under reduced
   motion, or after Back/Forward (html.ab-bf).
   ========================================================================== */
@keyframes ab-reveal-up {
  from { opacity: var(--enter-from, 0); translate: 0 var(--reveal-shift); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ab-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The first view starts at --enter-from, not at 0: the page's largest text (the LCP
     element) must be painted, and readable, from the very first frame. Chrome ignores
     opacity:0 elements for LCP and reports an animated one only when the fade ends, which
     added about 750ms to LCP in testing. Below the fold nothing is measured, so .reveal
     keeps the full 0 to 1 fade. */
  .enter {
    --enter-from: 0.4;
    animation: ab-reveal-up var(--dur-reveal) var(--ease-reveal) min(calc(var(--i, 0) * var(--stagger)), var(--stagger-max)) backwards;
  }
  .enter-1 { --i: 1; }
  .enter-2 { --i: 2; }
  .enter-3 { --i: 3; }
  html.ab-bf .enter { animation: none; }
  /* focus inside it (script.js adds .is-instant): no delay, no remaining animation, final style */
  .enter.is-instant { animation: none; }

  :where(.js) .reveal:not(.is-visible) { opacity: 0; }
  :where(.js) .reveal.is-visible {
    animation: ab-reveal-up var(--dur-reveal) var(--ease-reveal) min(calc(var(--i, 0) * var(--stagger)), var(--stagger-max)) backwards;
  }
  /* already scrolled past, focused, Back/Forward, or no IntersectionObserver: no animation */
  :where(.js) .reveal.is-instant { animation: none; }

  /* menu / close icon swap */
  .icon-swap { animation: ab-fade-in var(--dur-ctl) var(--ease) backwards; }

  /* Theme switch: every element changes colour together over --dur-theme. The class is
     on <html> for 400ms only, so hover and open/close transitions are untouched the
     rest of the time. The FAQ panel is left out because its height is driven by script.

     A transition that is already running is cancelled (it snaps to its end value) if its
     property disappears from the element's transition list. So while the class is on, any
     element that has its own transform / opacity / width / visibility transition keeps that
     entry exactly as written (same property, duration, easing and delay) and only the
     colour entries are swapped for the theme colour timing. */
  html.theme-switching {
    --ab-theme-colours: background-color var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease), box-shadow var(--dur-theme) var(--ease), fill var(--dur-theme) var(--ease), stroke var(--dur-theme) var(--ease), text-decoration-color var(--dur-theme) var(--ease);
  }
  html.theme-switching *:not(.faq-answer),
  html.theme-switching :before,
  html.theme-switching :after {
    transition: background-color var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease), box-shadow var(--dur-theme) var(--ease), fill var(--dur-theme) var(--ease), stroke var(--dur-theme) var(--ease), text-decoration-color var(--dur-theme) var(--ease) !important;
  }

  /* Components with their own motion: original non-colour entries first, unchanged */
  html.theme-switching .btn,
  html.theme-switching .footer-social a,
  html.theme-switching .tools-main .tool-card .card-link svg {
    transition: transform var(--dur-ctl) var(--ease), var(--ab-theme-colours) !important;
  }
  html.theme-switching .problem-card,
  html.theme-switching .curriculum-card,
  html.theme-switching .price-card,
  html.theme-switching .contact-method-card,
  html.theme-switching .about-service-card,
  html.theme-switching .tools-main a.tool-card,
  html.theme-switching .tools-main .tool-card .tool-icon {
    transition: transform var(--dur-card) var(--ease), var(--ab-theme-colours) !important;
  }
  html.theme-switching .nav-links a::after {
    transition: width var(--dur-ctl) var(--ease), var(--ab-theme-colours) !important;
  }
  html.theme-switching .faq-question .icon,
  html.theme-switching .faq-question .icon::before,
  html.theme-switching .faq-question .icon::after {
    transition: transform var(--dur-faq) var(--ease), var(--ab-theme-colours) !important;
  }
  html.theme-switching .faq-answer-inner {
    transition: opacity var(--dur-faq) var(--ease-panel), var(--ab-theme-colours) !important;
  }
  html.theme-switching .mobile-nav {
    transition: opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease), visibility 0s linear var(--dur-menu), var(--ab-theme-colours) !important;
  }
  html.theme-switching .mobile-nav.is-open {
    transition: opacity var(--dur-menu) var(--ease), transform var(--dur-menu) var(--ease), visibility 0s, var(--ab-theme-colours) !important;
  }
  html.theme-switching .hero-rotate-wrap {
    transition: width .45s cubic-bezier(.22,1,.36,1), var(--ab-theme-colours) !important;
  }
  html.theme-switching .hero-rotate-wrap.is-rotating .hero-rw {
    transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1), var(--ab-theme-colours) !important;
  }
}

/* Reduced motion: no entrance, no lift, no stagger. Colour feedback stays (the global
   rule near the top already makes every transition and animation instantaneous). */
@media (prefers-reduced-motion: reduce) {
  :root { --lift-card: 0px; --lift-ctl: 0px; --nudge: 0px; --icon-scale: 1; }
  .enter, .reveal { animation: none; }
}

/* FAQ: the answer text fades with the height change (only when JavaScript drives the panel) */
:where(.js) .faq-answer-inner {
  opacity: 0;
  transition: opacity var(--dur-faq) var(--ease-panel);
}
.faq-item.is-open .faq-answer-inner { opacity: 1; }

/* Mobile menu: the panel only exists below the desktop breakpoint (script closes it above) */
@media (min-width: 1025px) {
  .mobile-nav { display: none; }
}

/* v88 header layout: logo on the left, the page links centred in the space between, then the theme switch and
   Start Learning on the right. Below 1024px the links are hidden, so only the right-hand group remains. */
.nav { flex: 1; min-width: 0; margin-left: var(--space-6); }
.nav-links { flex: 1; justify-content: center; }
.nav-cta { margin-left: auto; }

/* v89 Safari: the page heading rises like the rest of the page but does not fade (its opacity stays 1).
   Safari showed it dark for a moment while an opacity animation was starting on it. Other text still fades. */
@keyframes ab-rise {
  from { translate: 0 var(--reveal-shift); }
  to { translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  h1.enter { animation-name: ab-rise; }
}

/* v120 contact page: four static cards, two columns on desktop (General Email + Support Email left, WhatsApp + Phone right),
   icon left and text right. The cards are plain containers: only the email address, WhatsApp number and phone number inside them are links,
   so text can be selected and copied. Tokens, radius and shadow are the site's own. */
.contact-title .accent { color: inherit; }
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: var(--space-5);
  max-width: 840px;
  margin: 0 auto;
}
.contact-method-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.contact-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  /* Neutral tile: no accent tint. Dark theme faint white fill and border, light theme faint dark fill and border. */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
}
:root[data-theme=light] .contact-method-icon {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.22);
}
.contact-method-body { flex: 1 1 auto; min-width: 0; }
.contact-method-label {
  font-family: var(--font-display);
  font-size: var(--fs-card-h-lg);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--text-primary);
}
.contact-method-sub { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.contact-method-value { margin-top: var(--space-3); font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.contact-method-value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  user-select: text;
  -webkit-user-select: text;
  transition: color var(--dur-ctl) var(--ease), text-decoration-color var(--dur-ctl) var(--ease);
}
@media (hover:hover) {
  .contact-method-value a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
}
.contact-hours { margin-top: var(--space-6); text-align: center; font-size: 14px; color: var(--text-tertiary-readable); }
@media (max-width: 640px) {
  .contact-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: var(--space-4); }
  .contact-method-card { padding: 20px; gap: 14px; }
  .contact-hours { margin-top: var(--space-5); }
}

/* Mobile menu CTA ("Start Learning"): same size as the other main CTAs.
   Scoped to .btn inside .mobile-nav so ordinary mobile links are untouched.
   15px text + 12px vertical padding + 24px line = 48px, no clipping. */
.mobile-nav a.btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border-bottom: 0;
}

/* v102 About founder card, phones only: the sibling cards drop to 24px padding at 640px and below; this one kept 48px,
   which squeezed its text to about 70% of the card width. 32px keeps it the roomier card without the squeeze.
   Desktop and tablet (48px) are unchanged. */
@media (width<=640px) {
  .founder-mini-card { padding: var(--space-6); }
}


/* ==========================================================================
   v109 (Phase 2): service detail pages, Services comparison, grouped FAQ,
   homepage preview sections. New classes only; nothing above is changed.
   ========================================================================== */

/* ---- Service detail pages ---- */
.svc-wrap { max-width: 860px; }
.svc-hero { padding-bottom: var(--space-7); }
.svc-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-5); color: var(--accent-text); font-size: 14px; font-weight: 600; }
@media (hover: hover) { .svc-back:hover { color: var(--accent-strong); } :root[data-theme=light] .svc-back:hover { color: var(--text-primary); } }
.svc-hero h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: var(--space-4); }
.svc-lead { color: var(--text-secondary); font-size: var(--fs-lead); line-height: 1.7; max-width: 700px; margin-bottom: var(--space-3); }
.svc-price-row { margin-top: var(--space-6); }
.svc-price { font-family: var(--font-display); font-size: clamp(34px, 1.6vw + 16px, 42px); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }
.svc-hero-actions .btn { height: var(--cta-h); padding-left: var(--space-5); padding-right: var(--space-5); }
.svc-body { padding-top: var(--space-5); }
.svc-block { padding: var(--space-7) 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 16px); }
.svc-block:first-child { border-top: 0; padding-top: 0; }
.svc-block h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--space-4); }
.svc-block > p { color: var(--text-secondary); font-size: var(--fs-body-lg); line-height: 1.75; margin-bottom: var(--space-4); max-width: 720px; }
.svc-block a:not(.btn), .svc-fact a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.svc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--card-shadow); }
.svc-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
.svc-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.5; }
.svc-checks li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: calc((1.5em - 16px) / 2); stroke: var(--accent-text); }
.svc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.svc-fact { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--card-shadow); }
.svc-fact h3 { font-size: var(--fs-card-h); font-weight: 700; margin-bottom: var(--space-2); }
.svc-fact p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
.svc-pricebox .svc-price { margin-bottom: var(--space-5); }
.svc-terms { display: grid; gap: var(--space-4); }
.svc-terms > div { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.svc-terms dt { color: var(--text-tertiary-readable); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.svc-terms dd { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
.svc-terms a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.svc-contact { display: grid; gap: var(--space-3); }
.svc-contact li { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
.svc-contact strong { color: var(--text-primary); font-weight: 600; }
.svc-contact a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.svc-steps { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
.svc-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.svc-step-num { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-border); background: var(--bg); color: var(--accent-text); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.svc-steps h3 { font-size: var(--fs-card-h); font-weight: 700; margin-bottom: 4px; }
.svc-steps p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
.svc-block .forwho-grid { margin-top: var(--space-5); }
.forwho-grid.is-single { grid-template-columns: 1fr; }
.svc-block .legal-summary-card { margin: var(--space-5) 0 0; }
.svc-faq-more { color: var(--text-secondary); font-size: var(--fs-body); margin-top: var(--space-5); text-align: center; }
.svc-faq-more a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.svc-block .faq-list { max-width: none; }
@media (width <= 780px) { .svc-checks, .svc-facts { grid-template-columns: 1fr; } }
@media (width <= 640px) {
  .svc-hero-actions { flex-direction: column; }
  .svc-hero-actions .btn { width: 100%; }
  .svc-card { padding: var(--space-5); }
  .svc-block { padding: var(--space-6) 0; }
  .svc-block:first-child { padding-top: 0; }
}

/* ---- Services cards: card description and button pair ---- */
.services-grid .price-desc { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
.price-actions { display: grid; gap: var(--space-3); }

/* ---- FAQ page groups ---- */
.faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 780px; margin: 0 auto var(--space-8); }
.faq-jump a { padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); color: var(--text-secondary); font-size: 14px; font-weight: 600; }
@media (hover: hover) { .faq-jump a:hover { border-color: var(--accent-border); background: var(--accent-dim); color: var(--text-primary); } }
.faq-group { max-width: 780px; margin: 0 auto var(--space-8); scroll-margin-top: calc(var(--header-h) + 16px); }
.faq-group-title { font-size: var(--fs-heading-sm); margin-bottom: var(--space-4); }
.faq-contact { margin-top: var(--space-7); }

/* ---- Homepage: approach sub-heading, preview sections ---- */
.subsection-head { max-width: 680px; margin: var(--space-9) auto var(--space-7); text-align: center; }
.subsection-title { font-size: clamp(22px, 3vw, 30px); margin-bottom: var(--space-3); }
.section-cta { text-align: center; margin-top: var(--space-7); }
.services-grid .price-card-compact .price-desc { flex-grow: 1; margin-bottom: var(--space-5); }
.price-card-compact .about-service-link { margin-top: auto; }
.tools-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* v154: same breakpoints as the /trading-tools/ directory grid (3 columns, 2 on tablet, 1 on phones), because the
   icon-left card layout needs more width per card than the old stacked one. */
@media (width <= 1024px) { .tools-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width <= 600px) { .tools-preview-grid { grid-template-columns: minmax(0, 1fr); } }
a.tool-preview { display: block; color: inherit; }
.tool-preview p { margin-bottom: 0; }
@media (width <= 720px) { .subsection-head { margin-top: var(--space-8); margin-bottom: var(--space-6); } }
.svc-body { padding-bottom: var(--space-5); }
.svc-block .svc-steps { margin-top: var(--space-5); }
.faq-jump { max-width: 920px; }
a.tool-preview { display: flex; flex-direction: column; }
a.tool-preview p { flex-grow: 1; }

/* v154 Trading Tools cards: icon on the left, heading and description on the right, both left-aligned.
   One layout rule set for both the homepage preview (#free-tools) and the /trading-tools/ directory (#all-tools).
   Layout only: no colour, border or shadow is set here, so every existing colour and theme treatment is untouched. */
:is(#free-tools .tools-preview-grid, #all-tools .tool-grid) > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: var(--space-2);
  align-items: start;
  text-align: left;
}
:is(#free-tools .tools-preview-grid, #all-tools .tool-grid) > a > :is(.tool-icon, .problem-icon) {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
}
:is(#free-tools .tools-preview-grid, #all-tools .tool-grid) > a > .problem-icon { width: 42px; height: 42px; }
:is(#free-tools .tools-preview-grid, #all-tools .tool-grid) > a > .problem-icon svg { width: 22px; height: 22px; }
:is(#free-tools .tools-preview-grid, #all-tools .tool-grid) > a > :is(.about-service-head, .tool-card-name) { grid-column: 2; grid-row: 1; margin: 0; }
:is(#free-tools .tools-preview-grid, #all-tools .tool-grid) > a > .about-service-head h3 { margin: 0; }
:is(#free-tools .tools-preview-grid, #all-tools .tool-grid) > a > p { grid-column: 2; grid-row: 2; margin: 0; }

/* v154: the homepage tool icons get the same hover movement the directory icons already have (scale with the card
   lift). Same tokens (--dur-card, --ease, --icon-scale), so timing matches and reduced motion switches both off.
   The directory page keeps its own icon rule in tools.css. No colour changes on hover. */
#free-tools a.tool-preview .problem-icon { transition: transform var(--dur-card) var(--ease); }
@media (hover:hover) { #free-tools a.tool-preview:hover .problem-icon { transform: scale(var(--icon-scale)); } }
/* v112 footer: small label above the two email rows (Customer Support / General Inquiries) */

/* v113: the Premium Signals button label is longer ("Inquire About Premium Signals"). These buttons have a
   fixed height and (final CTA) a fixed 204px width, so the label is allowed to wrap on narrow screens and
   the button may grow wider on larger ones instead of overflowing. Only buttons with this class are affected. */
.btn.btn-label-long { white-space: normal; text-align: center; line-height: 1.35; height: auto; min-height: var(--cta-h); }
@media (width >= 641px) { .hero-actions .btn.btn-label-long { width: auto; min-width: var(--cta-w); } }

/* v114: pricing cards are not clickable (the buttons inside are), so the card itself no longer lifts or changes border on hover. */

/* v114: Core Topics as structured rows (topic on the left, explanation on the right) so it no longer repeats the
   six-card grid of the problems section above it. The topics are not a sequence, so there are no numerals. */
.curriculum-grid { display: block; max-width: 880px; margin: 0 auto; border-top: 1px solid var(--border); }
.curriculum-grid .curriculum-card { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; column-gap: var(--space-7); align-items: baseline; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: var(--space-5) 0; overflow: visible; }
.curriculum-grid .curriculum-card h3 { margin: 0; }
.curriculum-grid .curriculum-card p { margin: 0; }
@media (width <= 640px) {
  .curriculum-grid .curriculum-card { grid-template-columns: 1fr; row-gap: var(--space-2); padding: var(--space-5) 0; }
}

/* v114: Services cards at narrow widths. .price-actions is a grid whose single auto column was sized by the
   non-wrapping button labels, so the buttons ran 9 to 21px past the card edge at 320px. The column can now shrink
   to the card and a long label wraps (balanced) instead of overflowing. Single-line buttons keep the same 48px box. */
.price-actions { grid-template-columns: minmax(0, 1fr); }
.price-actions .btn { white-space: normal; text-align: center; height: auto; min-height: 48px; text-wrap: balance; }
.btn.btn-label-long { text-wrap: balance; }
.price-actions .btn-secondary { padding-top: 11px; padding-bottom: 11px; } /* 1px border each side keeps the single-line box at 48px */

/* v114 typography */
/* Legal sub-headings were 15px, the same size as the paragraph text under them; only weight set them apart. */
.legal-section h3 { font-size: 16px; }

/* v114 touch targets: standalone links measured 17 to 22px tall on phones. Inline links inside sentences are untouched. */
@media (width <= 780px), (pointer: coarse) {
  .footer-col ul li { margin-bottom: 0; }
  .footer-col ul li > a { display: inline-flex; align-items: center; min-height: 44px; }
  .about-service-link { display: inline-flex; align-items: center; min-height: 44px; }
  .tool-preview .about-service-link { display: inline-block; min-height: 0; }
  .svc-back { padding-block: 11px; margin-top: -11px; margin-bottom: calc(var(--space-5) - 11px); }
  .faq-jump a { padding-block: 10px; }
  /* links that sit in a sentence or a row of text: larger hit area, no change to the text layout */
  .legal-see-also a, .svc-faq-more a { position: relative; }
  .legal-see-also a::after, .svc-faq-more a::after { content: ""; position: absolute; inset: -14px -6px; }
}

/* ==========================================================================
   v116 homepage refinement. Overrides only; the design tokens, fonts, themes and accent are untouched.
   ========================================================================== */

/* Header: slightly more compact (height 64 to 58px desktop, 60 to 56px mobile; logo, Start Learning and theme toggle about 5 to 10% smaller). */
:root { --header-h: 58px; }
.brand-logo { height: clamp(29.5px, 7.3vw, 38px); }
.nav-cta-btn { padding: 8.5px 18px; font-size: 13.3px; }
.theme-toggle { width: 36px; height: 36px; }
.theme-toggle svg { width: 16px; height: 16px; }
@media (width <= 640px) {
  :root { --header-h: 56px; }
  .brand-logo { height: clamp(32.3px, 8.08vw, 41.8px); }
  .theme-toggle { width: 40px; height: 40px; }
}

/* Stats: numerals use the theme's primary text colour, and the two dividers sit on the (narrower, centred) grid instead of the full-width section. */
section.stats { border: 0; border-image: none; padding: 0; }
.stats .stats-grid { max-width: min(880px, calc(100% - 48px)); padding: var(--space-7) 0; border-style: solid; border-width: 1px 0; border-color: transparent; border-image: var(--fade-divider) 1; }
.stat-num { color: var(--text-primary); }

/* Homepage icons: theme-adaptive neutral instead of blue (problem cards, free tools, step markers, reviewer initials). */
#problem .problem-icon, #free-tools .problem-icon { color: var(--text-primary); background: var(--bg-elevated-2); border-color: var(--border); }
#problem .problem-icon svg, #free-tools .problem-icon svg { stroke: var(--text-primary); }
#testimonials .avatar-initial { color: var(--text-primary); background: var(--bg-elevated-2); border-color: var(--border-strong); }

/* Before / After: one shared container, two columns, one central divider (no arrow, no per-item lines). */
.compare-box { display: grid; grid-template-columns: 1fr 1fr; max-width: 840px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; }
.compare-col { padding: var(--space-6) 40px; }
.compare-col + .compare-col { border-left: 1px solid var(--border); }
/* v117: labels are larger, bolder and white with one subtle rule beneath. White is literal in the dark theme; on the white light-theme card it would vanish, so the light theme uses the theme's primary text colour. */
.compare-col .transform-label { font-size: 15px; font-weight: 700; color: #fff; padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
:root[data-theme=light] .compare-col .transform-label { color: var(--text-primary); }
.compare-col ul li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: var(--fs-body-lg); color: var(--text-secondary); }
.compare-col.after ul li { color: var(--text-primary); }
.compare-col svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; }
/* Muted red cross and green check, same size. */
.compare-col.before svg { stroke: #d46a6e; }
.compare-col.after svg { stroke: #4fae8a; }
:root[data-theme=light] .compare-col.before svg { stroke: #bc3b3f; }
:root[data-theme=light] .compare-col.after svg { stroke: #1d7454; }
@media (width <= 720px) {
  .compare-box { grid-template-columns: 1fr; }
  .compare-col { padding: var(--space-5); }
  .compare-col + .compare-col { border-left: 0; border-top: 1px solid var(--border); }
}

/* Three-step process (v117): three open numbered rows, number on the left, heading and description on the right, thin separators, no cards. */
.steps { list-style: none; display: block; max-width: 760px; margin: 0 auto; padding: 0; border-top: 1px solid var(--border); }
.step { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-5); padding: var(--space-6) 0; border-bottom: 1px solid var(--border); }
.step-head { grid-row: 1 / span 2; margin: 0; display: block; }
.step-num { font-family: var(--font-display); font-size: clamp(34px, 4vw, 44px); font-weight: 800; line-height: 1; color: var(--text-primary); }
.step h3 { font-size: var(--fs-card-h-lg); margin-bottom: var(--space-2); padding-top: 4px; }
.step p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
@media (width <= 800px) {
  .steps { max-width: 560px; border-top: 0; }
  .step { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 0; }
  .step + .step { border-top: 1px solid var(--border); }
  .step-num { font-size: 32px; }
  .step h3 { padding-top: 0; }
}

/* Services: three services inside one shared container, separated by subtle dividers. Content comes from the cards of the retired Services page. */
.svc-unified { max-width: 1080px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; }
.svc-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(240px, .95fr); gap: var(--space-6); align-items: center; padding: var(--space-6); }
.svc-row + .svc-row { border-top: 1px solid var(--border); }
.svc-row .price-value { margin-bottom: var(--space-3); }
.svc-row .price-desc { margin: 0; color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
.svc-features li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: var(--fs-body); color: var(--text-secondary); }
.svc-features li svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; stroke: var(--accent-text); }
.svc-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.svc-actions .btn { white-space: normal; text-align: center; height: auto; min-height: 48px; padding: 11px var(--space-4); text-wrap: balance; }
@media (width <= 1023px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width <= 640px) {
  .svc-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
  .svc-actions { grid-template-columns: minmax(0, 1fr); }
}
.svc-contact-note { text-align: center; margin-top: var(--space-5); color: var(--text-secondary); font-size: var(--fs-body); }
.svc-contact-note a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; position: relative; }

/* Plain blue text links that replace the large homepage buttons (tools, FAQ). */
.text-link { color: var(--accent-text); font-size: var(--fs-body); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-ctl) var(--ease); }
@media (hover: hover) {
  .text-link:hover, .svc-contact-note a:hover { color: var(--accent-strong); }
  :root[data-theme=light] .text-link:hover, :root[data-theme=light] .svc-contact-note a:hover { color: var(--text-primary); }
}
@media (width <= 780px), (pointer: coarse) {
  .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .svc-contact-note a::after { content: ""; position: absolute; inset: -14px -6px; }
}

/* Who is it for: one shared container, two columns, one divider. The lists, icons and risk wording are unchanged. */
#forwho .forwho-grid { gap: 0; max-width: 980px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; }
#forwho .forwho-col { background: none; border: 0; border-radius: 0; box-shadow: none; }
#forwho .forwho-col.no { border-left: 1px solid var(--border); }
@media (width <= 640px) {
  #forwho .forwho-col.no { border-left: 0; border-top: 1px solid var(--border); }
}
/* v118: one subtle divider directly under each suitability subheading (same rule, spacing and colour as the Before/After label divider). */
#forwho .forwho-col h3 { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); }

/* v120: all seven social icons stay on one row at every width (sizes below keep them inside the viewport down to 320px). */
.footer-social { flex-wrap: nowrap; }

/* Footer social icons: one row on desktop (seven icons fit the brand column). */
@media (width >= 641px) {
  .footer-social { gap: 4px; }
  .footer-social a { width: 40px; height: 40px; }
}

/* ==========================================================================
   v117 homepage refinement. Overrides only; tokens (apart from the shared card radius), fonts, themes and the blue accent are untouched.
   ========================================================================== */

/* Stats: numerals about 20% lighter (800 to 640). Size, colour, labels and layout unchanged. */
.stat-num { font-weight: 640; }

/* Card radius is reduced through --radius-md / --radius-lg. The founder photo is an image, not a card, so it keeps its previous corners. */
.founder-photo { border-radius: 20px; }

/* Header theme control: a plain Sun/Moon icon button (no slider, border or background) that opens a small System / Light / Dark menu. The icon shows the theme currently in use: Moon in dark, Sun in light. Icons are Lucide's sun, moon and monitor outlines, inlined (no icon package in this project). The colour of a switch is handled by the global theme-switching rule, so no extra transition rules are needed here. */
.theme-switch { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.theme-toggle { width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; color: var(--text-secondary); -webkit-tap-highlight-color: transparent; }
.theme-toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme=light] .theme-toggle .icon-moon { display: none; }
:root[data-theme=light] .theme-toggle .icon-sun { display: block; }
@media (hover: hover) { .theme-toggle:hover { color: var(--text-primary); border-color: transparent; } }
.theme-toggle[aria-expanded=true] { color: var(--text-primary); }
.theme-toggle:focus-visible { outline-offset: 2px; }
.theme-toggle:focus:not(:focus-visible) { outline: none; }
.theme-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1001; min-width: 148px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); box-shadow: var(--card-shadow); }
.theme-dropdown[hidden] { display: none; }
.theme-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--text-secondary); font: inherit; font-size: 14.5px; font-weight: 500; text-align: left; cursor: pointer; }
.theme-option svg { width: 18px; height: 18px; flex-shrink: 0; }
.theme-option[aria-checked=true] { color: var(--accent-text); }
@media (hover: hover) { .theme-option:hover { background: var(--bg-elevated-2); color: var(--text-primary); } .theme-option[aria-checked=true]:hover { color: var(--accent-text); } }
.theme-option:focus-visible { outline-offset: -2px; background: var(--bg-elevated-2); }
/* Where the menu button is shown (1024px and below) the theme button gets the same 44px touch area. */
@media (width <= 1024px) { .theme-toggle { width: 44px; height: 44px; } }

/* Mobile menu button: no permanent border or shadow, larger bars, 44 x 44 touch target. Icons, open/close behaviour and links are unchanged. */
.menu-toggle { width: 44px; height: 44px; border: 0; box-shadow: none; background: none; }
.menu-toggle svg { width: 26px; height: 26px; stroke-width: 2.25; }
/* Menu button visibility and alignment: primary text colour instead of secondary, and pulled 9px to the right (44px box minus 26px icon, halved) so the icon, not the invisible touch box, lines up with the page gutter and the content above and below. On phones the theme and menu buttons sit 4px apart; their 44px boxes keep each touch target separate. */
.menu-toggle { color: var(--text-primary); margin-right: -9px; }
@media (width <= 640px) { .nav-cta { gap: 4px; } }

/* v119 FAQ: one chevron replaces the plus/minus. It points down when closed and rotates to point up when open (the button's aria-expanded is still set by script.js). The old circle outline is dropped. */
.faq-item .faq-question .icon { border: 0; background: none; }
.faq-item .faq-question .icon::after { display: none; }
.faq-item .faq-question .icon::before { width: 8px; height: 8px; background: none; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-panel), border-color 200ms var(--ease-panel); }
.faq-item.is-open .faq-question .icon { border: 0; background: none; }
.faq-item.is-open .faq-question .icon::before { background: none; border-color: var(--accent-text); transform: translateY(2px) rotate(225deg); }
/* Homepage FAQ only (the /faq/ page keeps its grouped lists): list about 15% narrower, centred. */
#faq > .container > .faq-list { max-width: 660px; }


/* ===== About page (v125) ===== Scoped to .about-hero, .about-educator and .about-cta; no other page uses these classes. */
/* Hero: plain heading colour in both themes (no accent span), one line on desktop, natural wrapping below. */
.about-hero-head { max-width: 760px; }
.about-hero-title { color: var(--text-primary); font-size: clamp(28px, 4vw, 42px); }
@media (width >= 1025px) {
  .about-hero-head { max-width: none; }
  .about-hero-title { white-space: nowrap; font-size: clamp(36px, 3.6vw, 44px); margin-left: auto; margin-right: auto; }
  .about-hero-head .section-sub { max-width: 700px; margin-left: auto; margin-right: auto; }
}

/* Educator: photo left, details right on desktop; photo first, then details on mobile. No card, no extra border. */
.about-educator { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: var(--space-8); align-items: center; max-width: 900px; margin: 0 auto; }
.about-educator-photo { width: 100%; max-width: 280px; margin: 0; }
.about-educator-body { text-align: left; }
.about-educator .founder-mini-name { font-size: clamp(21px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.01em; }
.about-educator .founder-mini-role { font-size: 14.5px; margin-bottom: var(--space-4); }
.about-educator .founder-mini-text { font-size: var(--fs-body-lg); line-height: 1.75; }
@media (width <= 768px) {
  .about-educator { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); max-width: 560px; }
  .about-educator-photo { max-width: 240px; margin: 0 auto; }
}

/* Closing CTA: compact, no promotional card. Heading, paragraph and the two existing buttons only. */
.about-cta { padding: var(--space-8) 0 var(--space-9); }
.about-cta .final-cta-box { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
:root[data-theme=light] .about-cta .final-cta-box { background: none; }
.about-cta .final-cta-box h2 { margin-bottom: var(--space-4); }
.about-cta .final-cta-box p { max-width: 560px; margin: 0 auto; }
.about-cta .final-cta-box p::after { display: none; }
.about-cta .final-cta-box .hero-actions { margin-top: var(--space-6); }

/* v128: Online Mentorship page. Plain sections (no divider between blocks) and an open two-column / single-column list of titled points (no boxes). */
.svc-plain .svc-block { border-top: 0; padding: 36px 0; }
.svc-plain .svc-block h2 { margin-bottom: 20px; }
.svc-plain .svc-block:first-child { padding-top: 0; }
.svc-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
.svc-points.is-single { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-width: 720px; }
.svc-point h3 { font-size: var(--fs-card-h); font-weight: 700; margin-bottom: 10px; }
.svc-point p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; }
.svc-point a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
@media (width <= 780px) { .svc-points { grid-template-columns: minmax(0, 1fr); } }

/* v130: Online Mentorship joining steps show plain theme-aware numbers (no circle, outline or accent colour). Scoped so the other service pages keep their step markers. */
.svc-plain .svc-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); }
.svc-plain .svc-step-num { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--text-primary); font-size: var(--fs-card-h); line-height: 1.3; justify-content: flex-start; }

/* v131: centre the "Questions before joining?" line on the Online Mentorship page only. */
.svc-plain .svc-block > p.svc-contact-line { text-align: center; max-width: none; }

/* v132: one content-to-footer gap across the site, the same rhythm as the Contact and FAQ pages: 96px (--space-9) on desktop and tablet, 48px (--space-7) at 720px and below (matches .section). */
.svc-plain.svc-body { padding-bottom: var(--space-9); }
.svc-plain .svc-block:last-child { padding-bottom: 0; }
@media (width <= 720px) {
  .svc-plain.svc-body { padding-bottom: var(--space-7); }
  .final-cta { padding-bottom: var(--space-7); }
}

/* v133: Online Mentorship FAQ follows the homepage FAQ layout: centred heading, 660px centred list, centred View all FAQs link. Scoped to this page's #faq block only. */
.svc-plain #faq h2 { text-align: center; margin-bottom: var(--space-7); }
.svc-plain #faq .faq-list { max-width: 660px; margin-left: auto; margin-right: auto; }
.svc-plain #faq .section-cta { max-width: none; margin: var(--space-7) 0 0; text-align: center; }