/* Clarity — shared website, editorial, and product finishing layer. */
html { scroll-padding-top: 110px; }
body { background: var(--cl-bg); color: var(--cl-ink); font-family: var(--font-ui); }
body *, body *::before, body *::after { font-style: normal !important; }
body em { font-family: var(--font-ui) !important; font-weight: 700; }
body :is(h1,h2,h3) { text-wrap: balance; }
body h1 { letter-spacing: -.06em; }
body :is(h1,h2) em { color: var(--cl-green); }
body :is(.demo-note,.income-note strong span,.ai-example > p,.ab-quote,.bl-feature-img .quote) { font-family: var(--font-ui); }
body .demo-note { font-size: 18px; font-weight: 500; line-height: 1.5; }
body .ai-example > p { font-size: 19px; letter-spacing: -.025em; line-height: 1.45; }
:focus-visible { outline: 3px solid var(--cl-green); outline-offset: 4px; }
.site-public { --ink: var(--cl-ink); --ink-soft: var(--cl-muted); --ink-quiet: var(--cl-muted); --ground: var(--cl-bg); --ground-paper: var(--cl-card); --ground-deep: var(--cl-paper); --hairline: var(--cl-line); --brand-primary: var(--cl-green); --okra: var(--cl-yellow); --jollof: var(--cl-green); --text-on-yellow: var(--c-ink); }
html[data-theme="dark"] .site-public { --ink: var(--cl-ink); --ground: var(--cl-bg); --ground-paper: var(--cl-card); }
.site-public .lg-nav { position: sticky; top: 0; left: auto; transform: none; width: min(1240px,calc(100% - 96px)); max-width: 1240px; margin: 0 auto; padding: 20px 0; border: 0; border-bottom: 1px solid var(--cl-line); border-radius: 0; background: var(--cl-bg); color: var(--cl-ink); box-shadow: none; backdrop-filter: none; display: flex; justify-content: space-between; gap: 30px; z-index: 60; animation: none; }
.site-public .lg-logo-img { width: 119px; height: 32px; }
.site-public .lg-nav-links { display: flex; flex: 1; justify-content: flex-start; gap: 22px; }
.site-public .lg-nav-links a { display: block; font-size: 12px; color: var(--cl-muted); }
.site-public .lg-nav-links a[aria-current] { color: var(--cl-green); text-underline-offset: 8px; text-decoration: underline; text-decoration-color: var(--cl-yellow); text-decoration-thickness: 2px; }
.site-public .lg-nav-right { gap: 13px; }
.site-public .lg-nav-signin { display: inline-block; font-size: 12px; color: var(--cl-ink); }
.site-public .lg-theme-toggle { color: var(--cl-ink); width: 36px; height: 36px; }
.site-public .lg-hamburger { display: none; }
.site-public .lg-cta { background: var(--cl-ink); color: var(--cl-bg); font-size: 12px; padding: 12px 19px; }
.site-public .lg-mobile-menu { top: 80px; z-index: 61; background: var(--cl-card); color: var(--cl-ink); }
.site-public .lg-mobile-menu a { color: var(--cl-ink); }
.site-public .lg-footer { background: var(--cl-bg); color: var(--cl-ink); padding: 62px 0 25px; border-top: 1px solid var(--cl-line); }
.site-public .lg-footer-inner { width: min(1240px,calc(100% - 96px)); max-width: 1240px; }
.site-public .lg-footer-h { font: 500 29px/1.2 var(--font-ui); letter-spacing: -.04em; color: var(--cl-ink); }
.site-public .lg-footer-h em { color: var(--cl-green); }
.site-public .lg-footer-sub { font-size: 12px; color: var(--cl-muted); }
.site-public .lg-footer-grid { margin-top: 30px; padding-top: 28px; border-color: var(--cl-line); }
.site-public .lg-footer-col-label { color: var(--cl-muted); font-size: 9px; }
.site-public .lg-footer-col a { color: var(--cl-ink); font-size: 12px; }
.site-public .lg-footer-disclaimer, .site-public .lg-footer-copy { color: var(--cl-muted); border-color: var(--cl-line); font-size: 10px; }
.site-public .lg-reveal { opacity: 1; transform: none; }
.site-public .lg-marker::after { background: var(--cl-yellow); height: .1em; bottom: -.07em; }
.site-public .lg-clip { overflow: visible; }
.site-public .lg-clip > span { animation: none; }
.site-public :is(.lg-btn-primary,.ac-cta-primary,.ofs-cta-btn) { background: var(--cl-ink); color: var(--cl-bg); border-radius: 100px; font-size: 13px; padding: 16px 24px; box-shadow: none; }
.site-public :is(.lg-btn-ghost,.ac-cta-ghost) { border-color: var(--cl-line); color: var(--cl-ink); font-size: 13px; }
.site-public :is(.lg-hero-eyebrow,.ab-eyebrow,.fq-eyebrow,.rm-eyebrow,.ac-hero-eyebrow) { background: none; padding: 0; color: var(--cl-green); font: 500 10px/1.6 var(--font-ui); text-transform: uppercase; letter-spacing: .15em; }
.site-public :is(.lg-lede,.ab-lede,.bl-lede,.ac-sub,.fq-lede,.rm-sub,.ofs-lede) { font-size: 16px; line-height: 1.75; color: var(--cl-muted); max-width: 620px; }
.site-public :is(.lg-section,.ab-principles,.ab-portrait,.bl-feature,.bl-grid,.ac-section,.rm-board) { width: min(1240px,calc(100% - 96px)); max-width: 1240px; padding-inline: 0; }
.site-public :is(.lg-hero-grid,.ab-hero,.bl-hero,.fq-hero,.rm-hero) { width: min(1240px,calc(100% - 96px)); max-width: 1240px; margin-inline: auto; padding: 84px 0 80px; text-align: left; }
.site-public :is(.display-1,.ab-h1,.bl-h1,.fq-h1,.rm-h1,.ofs-h1) { font-size: clamp(44px,5.6vw,78px); font-weight: 500; line-height: 1.06; letter-spacing: -.06em; max-width: 940px; }
.site-public :is(.ab-h2,.ac-section-h2,.lg-section-h2,.ofs-h2) { font-family: var(--font-ui); font-weight: 500; font-size: clamp(30px,3.5vw,45px); line-height: 1.13; letter-spacing: -.045em; }
.site-public :is(.ft-feature-h3,.hw-step-h3) { font-weight: 500; font-size: clamp(29px,3.1vw,41px); letter-spacing: -.04em; }
.site-public :is(.ft-feature-desc,.hw-step-desc,.ab-p,.ac-section-sub) { font-size: 15px; color: var(--cl-muted); line-height: 1.8; }
.site-public :is(.ft-vis,.hw-vis,.ab-portrait-frame,.bl-card,.lesson,.ofs-feat,.rm-card) { border: 1px solid var(--cl-line); background: var(--cl-card); border-radius: 20px; box-shadow: none; }
.site-public :is(.ft-vis,.hw-vis) { padding: 30px; }
.site-public :is(.ft-feature,.hw-step) { gap: 76px; padding-block: 76px; }
.site-public :is(.ft-feature-eyebrow,.hw-eyebrow) { color: var(--cl-green); font-size: 9px; }
.site-public .hw-num { color: var(--cl-green); font-weight: 500; }
.site-public :is(.ft-cta-strip,.hw-cta,.ab-cta,.fq-cta,.cta-card,.ofs-cta) { background: var(--cl-paper); color: var(--cl-ink); box-shadow: none; border: 1px solid var(--cl-line); border-radius: 22px; width: min(1240px,calc(100% - 96px)); max-width: 1240px; margin: 45px auto 90px; }
.site-public :is(.ft-cta-strip,.hw-cta,.ab-cta,.fq-cta,.cta-card,.ofs-cta) :is(h2,p) { color: var(--cl-ink); }
.site-public :is(.ft-cta-strip,.hw-cta,.ab-cta,.fq-cta,.cta-card,.ofs-cta) em { color: var(--cl-green); }
.site-public :is(.ft-cta-strip,.hw-cta,.ab-cta,.fq-cta,.cta-card,.ofs-cta) :is(.lg-btn-primary,.cta-card-btn) { background: var(--cl-ink)!important; color: var(--cl-bg)!important; }
.site-public .ab-section { max-width: 850px; padding: 65px 0; width: calc(100% - 96px); }
.site-public .ab-quote { font-size: 29px; font-weight: 500; line-height: 1.4; color: var(--cl-green); border-color: var(--cl-yellow); }
.site-public .ab-principles { gap: 20px; padding-block: 0 70px; }
.site-public .ab-principle { background: var(--cl-card); border: 1px solid var(--cl-line); border-radius: 18px; padding: 28px; }
.site-public .ab-principle-h { font-size: 23px; font-weight: 500; }
.site-public .ab-principle-d { font-size: 13px; }
.site-public .ab-portrait-frame { padding: 34px; }
.site-public .ab-portrait-avatar { border-radius: 18px; background: var(--cl-paper); color: var(--cl-green); }
.site-public .ac-hero { background: var(--cl-bg); color: var(--cl-ink); padding: 84px 0 70px; border-radius: 0; }
.site-public .ac-hero-inner { max-width: 1240px; width: calc(100% - 96px); margin: auto; }
.site-public .ac-h1 { color: var(--cl-ink); font: 500 clamp(44px,5.6vw,78px)/1.06 var(--font-ui); letter-spacing: -.06em; }
.site-public .ac-h1 em { color: var(--cl-green); }
.site-public .ac-hero-stats { max-width: none; padding-top: 30px; margin-top: 35px; border-color: var(--cl-line); }
.site-public .ac-stat-v { color: var(--cl-green); font-family: var(--font-mono); font-size: 34px; }
.site-public .ac-stat-l { color: var(--cl-muted); }
.site-public .ac-section { padding-block: 65px; }
.site-public .ai-tutor { background: var(--cl-paper); border-color: var(--cl-line); }
.site-public .lesson-title { font-weight: 500; }.site-public .lesson-num { color: var(--cl-green); }
.site-public .lesson.locked { opacity: 1; background: var(--cl-paper); }
.site-public .bl-feature-card { border: 1px solid var(--cl-line); border-radius: 22px; background: var(--cl-card); }
.site-public .bl-feature-img { padding: 0; overflow: hidden; background: var(--cl-paper); min-height: 390px; }
.site-public .bl-feature-img > img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.site-public .bl-feature-title { font-size: 32px; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.site-public .bl-grid { gap: 22px; }.site-public .bl-card { padding: 25px; }
.site-public .bl-card-title { font-size: 23px; font-weight: 500; letter-spacing: -.025em; }
.site-public .bl-card-photo { width: calc(100% + 50px); max-width: none; height: 200px; object-fit: cover; margin: -25px -25px 25px; border-radius: 19px 19px 0 0; }
.site-public .bl-newsletter { background: var(--cl-paper); border-top: 1px solid var(--cl-line); border-bottom: 1px solid var(--cl-line); }
.site-public .bl-newsletter :is(h2,p) { color: var(--cl-ink); }
.site-public .article-hero { background: var(--cl-paper); text-align: left; border-radius: 0; padding: 85px max(48px,calc((100vw - 1060px)/2)) 75px; }
.site-public .article-title { max-width: 960px; margin-inline: 0; font-weight: 500; font-size: clamp(36px,4.8vw,65px); line-height: 1.13; }
.site-public .article-glow { display: none; }
.site-public .article-tag { background: var(--cl-card); color: var(--cl-green); border: 1px solid var(--cl-line); }
.site-public .article-meta, .site-public .article-meta a { color: var(--cl-muted); font-weight: 400; }
.site-public .article-feature-img { max-width: 1108px; margin-top: 30px; }
.site-public .article-feature-img img { box-shadow: none; border-radius: 22px; max-height: 500px; }
.site-public .article-wrap { max-width: 840px; padding-top: 45px; }
.site-public .article-body :is(p,li) { color: var(--cl-muted); font-size: 16px; }
.site-public .article-body :is(h2,h3) { font-weight: 500; letter-spacing: -.03em; }
.site-public .article-toc { background: var(--cl-card); border-color: var(--cl-line); }
.site-public .article-toc :is(a,li,.article-toc-title) { color: var(--cl-muted); }
.site-public .article-table-wrap { overflow-x: auto; max-width: 100%; }
.site-public .article-callout { background: var(--cl-paper); border-color: var(--cl-yellow); }
.site-public .article-cta-box { background: var(--cl-paper); border-color: var(--cl-line); }
.site-public .rm-grid { gap: 18px; }.site-public .rm-col { background: var(--cl-paper); border: 1px solid var(--cl-line); border-radius: 20px; padding: 20px; }
.site-public .rm-card { border-radius: 12px; padding: 18px; }.site-public .rm-card-title { font-weight: 500; }
.site-public .rm-stats { justify-content: flex-start; gap: 48px; }.site-public .rm-stat-val { color: var(--cl-green); }
.site-public .ofs-wrap { max-width: 1060px; width: calc(100% - 96px); padding: 85px 0; }
.site-public .ofs-code-wrap { border-radius: 18px; overflow: hidden; box-shadow: none; }
.site-public .ofs-grid { gap: 18px; }.site-public .ofs-cta { width: 100%; margin-bottom: 0; }
.site-public .fq-contact-strip { background: var(--cl-paper); border: 1px solid var(--cl-line); border-radius: 14px; }
.site-public .fq-body { max-width: 1060px; width: calc(100% - 96px); padding: 20px 0 70px; }
.site-public .fq-group-h { color: var(--cl-green); font-size: 12px; border-color: var(--cl-line); }
.site-public .fq-q { font-size: 16px; font-weight: 500; }.site-public .fq-a { font-size: 14px; color: var(--cl-muted); }
.site-public .lg-legal { width: calc(100% - 96px); max-width: 900px; padding: 80px 0; }
.site-public .lg-legal-title { font-size: clamp(43px,5vw,70px); font-weight: 500; line-height: 1.08; }
.site-public .lg-legal-updated { margin-top: 20px; padding-bottom: 30px; border-bottom: 1px solid var(--cl-line); color: var(--cl-muted); }
.site-public .lg-legal-body { margin-top: 32px; }.site-public .lg-legal-body h2 { font-weight: 500; }
.site-public .nf-card { background: var(--cl-paper); border: 1px solid var(--cl-line); box-shadow: none; border-radius: 24px; }
.site-public .nf-h1 { font-weight: 500; }

/* Hero variations share a measured rail, but each page tells its own story. */
.site-hero { width: min(1240px,calc(100% - 96px)); margin: auto; padding: 80px 0 85px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; position: relative; }
.site-kicker { display: flex; gap: 10px; align-items: center; text-transform: uppercase; font-size: 10px; letter-spacing: .15em; color: var(--cl-green); }
.site-kicker:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-hero h1 { font-size: clamp(43px,5.4vw,76px); font-weight: 500; line-height: 1.045; letter-spacing: -.06em; margin-top: 26px; }
.site-hero h1 span { color: var(--cl-green); font-weight: 700; }
.site-hero p:not(.site-kicker) { font-size: 16px; line-height: 1.75; color: var(--cl-muted); margin-top: 24px; max-width: 460px; }
.site-hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 27px; }
.site-hero-actions > a { font-size: 13px; }
.site-art { position: relative; min-width: 0; }
.site-art > img { display: block; width: 100%; border-radius: 24px; }
.site-art figcaption { position: absolute; bottom: -16px; right: 20px; padding: 13px 19px; border: 1px solid var(--cl-line); background: var(--cl-card); font-size: 11px; border-radius: 12px; box-shadow: 0 12px 30px rgb(32 40 32 / .07); }
.site-art-photo > img { height: 470px; object-fit: cover; object-position: 58%; }
.journey-art { padding: 50px 22px; background: var(--cl-paper); border: 1px solid var(--cl-line); border-radius: 24px; overflow: hidden; }
.journey-card { position: relative; border: 1px solid var(--cl-line); background: var(--cl-card); border-radius: 13px; display: flex; gap: 17px; align-items: center; padding: 21px; width: 87%; margin: 0 0 20px; }
.journey-card:nth-child(2) { margin-left: 6%; }.journey-card:nth-child(3) { margin-left: 12%; margin-bottom: 0; }
.journey-card > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: var(--cl-paper); color: var(--cl-green); font: 500 12px var(--font-mono); flex-shrink: 0; }
.journey-card strong { display: block; font-size: 14px; font-weight: 500; }.journey-card small { font-size: 10px; color: var(--cl-muted); display: block; margin-top: 5px; }
.journey-card:last-child { background: var(--cl-ink); color: var(--cl-bg); }.journey-card:last-child small { color: var(--cl-bg); opacity: .75; }
.academy-art { min-height: 400px; background: var(--cl-paper); border: 1px solid var(--cl-line); border-radius: 24px; display: grid; place-items: center; overflow: hidden; }
.learning-book { position: relative; width: 245px; height: 300px; padding: 25px; border-radius: 4px 18px 18px 4px; border-left: 8px solid rgb(32 40 32 / .2); background: var(--cl-yellow); color: var(--c-ink); box-shadow: 20px 20px 0 -4px var(--cl-green); transform: rotate(-8deg); }
.learning-book small { font-size: 9px; letter-spacing: .13em; }.learning-book strong { font: 500 40px/1.06 var(--font-ui); letter-spacing: -.05em; display: block; margin-top: 55px; }.learning-book span { display: block; font-size: 10px; margin-top: 35px; }
.learning-badge { position: absolute; right: 10px; bottom: 25px; font: 500 11px var(--font-ui); padding: 15px 18px; border: 1px solid var(--cl-line); border-radius: 12px; background: var(--cl-card); color: var(--cl-ink); }
.site-stat-rail { width: min(1240px,calc(100% - 96px)); margin: 0 auto 10px; padding: 25px 0; border-top: 1px solid var(--cl-line); border-bottom: 1px solid var(--cl-line); display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.site-stat-rail strong { display: block; font-size: 24px; font-weight: 500; color: var(--cl-green); }.site-stat-rail span { font-size: 11px; color: var(--cl-muted); }

/* Quiet dotted fields and contour rings; no decoration covers text. */
.pattern-field { position: relative; isolation: isolate; }
.pattern-field::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: radial-gradient(circle,var(--cl-green) .7px,transparent .9px); background-size: 22px 22px; opacity: .075; mask-image: linear-gradient(120deg,transparent 20%,black 70%,transparent); }
.clarity-hero { isolation: isolate; position: relative; }
.clarity-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle,var(--cl-green) .7px,transparent .9px); background-size: 22px 22px; opacity: .09; mask-image: linear-gradient(110deg,transparent 28%,black 85%); }
.closing-section { position: relative; isolation: isolate; }
.closing-section::before { content: ''; position: absolute; inset: -40% -15% -70% 40%; z-index: -1; pointer-events: none; border-radius: 50%; background: repeating-radial-gradient(ellipse at center,transparent 0,transparent 54px,rgb(83 104 68 / .10) 55px,rgb(83 104 68 / .10) 56px,transparent 57px); }
.play-section { position: relative; isolation: isolate; }
.play-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(rgb(250 249 246 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(250 249 246 / .035) 1px,transparent 1px); background-size: 70px 70px; }
[data-parallax] { translate: 0 var(--parallax-y,0px); }
.site-motion-control { position: fixed; bottom: 16px; right: 16px; z-index: 55; background: var(--cl-card); color: var(--cl-muted); padding: 10px 14px; border: 1px solid var(--cl-line); border-radius: 100px; font: 500 10px var(--font-ui); box-shadow: 0 4px 16px rgb(32 40 32 / .07); }
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation-play-state: paused!important; }
html[data-motion="paused"] [data-parallax] { translate: none; }
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { transition: none!important; }

/* Product adapts the same materials, while keeping its working layout. */
.site-product { --bg: var(--cl-bg); --surface: var(--cl-card); --surface-2: var(--cl-paper); --white: var(--cl-ink); --fg: var(--cl-ink); --app-rail: var(--cl-paper); --app-sunken: var(--cl-paper); --app-line: var(--cl-line); }
html:has(body.site-product) { overflow-x: clip; }
.site-product .card { box-shadow: none; border-color: var(--cl-line); border-radius: 18px; }
.site-product .rail { background: var(--cl-paper); border-right-color: var(--cl-line); }
.site-product .rail-mark { background: var(--cl-yellow); color: var(--c-ink); border-radius: 12px; }
.site-product .nav-item[aria-current="page"] { color: var(--cl-green); }
.site-product .rail-pill { background: var(--cl-card); border-color: var(--cl-line); }
.site-product .topbar { background: var(--cl-bg); border-bottom-color: var(--cl-line); }
.site-product .auth-screen { background-color: var(--cl-bg); background-image: radial-gradient(circle,rgb(83 104 68 / .15) .8px,transparent 1px); background-size: 24px 24px; }
.site-product .auth-card { border-radius: 24px; background: var(--cl-card); border: 1px solid var(--cl-line); box-shadow: 0 25px 70px rgb(32 40 32 / .08); }
.site-product .auth-headline { font-weight: 500; letter-spacing: -.04em; }
.site-product .auth-submit { background: var(--cl-ink); color: var(--cl-bg); border-radius: 100px; }
.site-product .auth-google { background: var(--cl-card); border-color: var(--cl-line); color: var(--cl-ink); border-radius: 100px; }

/* Article and roadmap pages use the older shell; keep them visually inside the same system. */
.site-public #mainNav { position: sticky; top: 0; left: auto; transform: none; z-index: 60; width: min(1240px,calc(100% - 96px)); max-width: 1240px; margin: 0 auto; padding: 20px 0; background: var(--cl-bg); border: 0; border-bottom: 1px solid var(--cl-line); border-radius: 0; box-shadow: none; backdrop-filter: none; color: var(--cl-ink); display: flex; align-items: center; gap: 22px; }
.site-public #mainNav .nav-logo img { width: 119px; height: auto; display: block; }.site-public #mainNav .nav-spacer { flex: 1; }
.site-public #mainNav .nav-link { color: var(--cl-muted); font-size: 12px; text-decoration: none; }.site-public #mainNav .nav-link:hover { color: var(--cl-green); }
.site-public #mainNav .theme-toggle { width: 36px; height: 36px; border: 0; background: none; color: var(--cl-ink); cursor: pointer; }
.site-public #mainNav .nav-signin { color: var(--cl-ink); font-size: 12px; text-decoration: none; }.site-public #mainNav .nav-cta-guest { background: var(--cl-ink); color: var(--cl-bg); border-radius: 100px; padding: 12px 19px; }
.site-public .nav-hamburger { display: none; }.site-public .nav-links-mobile { display: none; }
.site-public .void-footer { margin-top: 70px; padding: 62px max(48px,calc((100vw - 1240px)/2)) 25px; background: var(--cl-bg); color: var(--cl-ink); border-top: 1px solid var(--cl-line); position: relative; }
.site-public .void-footer .vf-headline { font: 500 29px/1.2 var(--font-ui); letter-spacing: -.04em; }.site-public .void-footer .vf-headline em { color: var(--cl-green); }
.site-public .void-footer .vf-sub, .site-public .void-footer .vf-disclaimer, .site-public .void-footer .vf-copy { color: var(--cl-muted); }.site-public .void-footer .vf-grid { border-color: var(--cl-line); }.site-public .void-footer a { color: var(--cl-ink); }
.site-public .article-hero, .site-public .rm-hero, .site-public .fq-hero, .site-public .lg-legal, .site-public .ofs-wrap { isolation: isolate; position: relative; }
.site-public :is(.article-hero,.rm-hero,.fq-hero,.lg-legal,.ofs-wrap)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle,var(--cl-green) .7px,transparent .9px); background-size: 22px 22px; opacity: .06; mask-image: linear-gradient(110deg,transparent 20%,black 88%); }

@media (max-width: 1150px) {
  .site-public .lg-nav-links { gap: 16px; }.site-public .lg-nav { gap: 20px; }
  .site-public .lg-nav-links a { font-size: 11px; }
  .site-public .lg-nav-signin { display: none; }.site-hero { gap: 40px; }
  .site-public :is(.ft-feature,.hw-step) { gap: 40px; }
}
@media (max-width: 960px) {
  .site-public .lg-nav-links { display: none; }.site-public .lg-hamburger { display: inline-flex; }.site-public .lg-nav-right { margin-left: auto; }
  .site-public .lg-nav { width: calc(100% - 48px); }.site-hero { width: calc(100% - 48px); gap: 30px; }
  .site-hero h1 { font-size: 49px; }.site-art-photo > img { height: 410px; }
  .site-public .bl-feature-title { font-size: 26px; }.journey-card { padding: 16px; gap: 10px; }
  .site-public #mainNav { width: calc(100% - 48px); }.site-public #mainNav .nav-link { display: none; }.site-public #mainNav .nav-spacer { display: block; }
  .site-public #mainNav .nav-hamburger { display: inline-flex; margin-left: 0; }.site-public .nav-links-mobile.open { display: grid; gap: 12px; position: fixed; top: 72px; left: 24px; right: 24px; padding: 22px; background: var(--cl-card); border: 1px solid var(--cl-line); border-radius: 18px; z-index: 61; box-shadow: 0 18px 50px rgb(32 40 32 / .10); }.site-public .nav-links-mobile a { color: var(--cl-ink); }
  .learning-book { width: 200px; height: 270px; }.learning-book strong { font-size: 34px; }.academy-art { min-height: 370px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 90px; }
  .site-public .lg-nav { width: calc(100% - 40px); padding: 15px 0; gap: 10px; }.site-public .lg-logo-img { width: 103px; }
  .site-public #mainNav { width: calc(100% - 40px); padding: 15px 0; }.site-public #mainNav .nav-logo img { width: 103px; }.site-public #mainNav .nav-signin { display: none; }.site-public #mainNav .nav-hamburger { margin-left: auto; }
  .site-public .void-footer { padding-inline: 20px; }
  .site-public .lg-nav-right { gap: 8px; }.site-public .lg-cta { padding: 11px 14px; font-size: 10px; }.site-public .lg-theme-toggle { width: 30px; height: 30px; }.site-public .lg-hamburger { width: 26px; }
  .site-public .lg-mobile-menu { top: 72px; }.site-public .lg-footer-inner { width: calc(100% - 40px); }.site-public .lg-footer-h { font-size: 25px; }
  .site-public :is(.lg-hero-grid,.ab-hero,.bl-hero,.fq-hero,.rm-hero) { width: calc(100% - 40px); padding-block: 50px; }
  .site-public :is(.lg-section,.ab-principles,.ab-portrait,.bl-feature,.bl-grid,.ac-section,.rm-board,.fq-body,.ofs-wrap,.lg-legal,.ab-section) { width: calc(100% - 40px); }
  .site-public :is(.display-1,.ab-h1,.bl-h1,.fq-h1,.rm-h1,.ofs-h1) { font-size: 44px; line-height: 1.08; }
  .site-public :is(.lg-lede,.ab-lede,.bl-lede,.ac-sub,.fq-lede,.rm-sub,.ofs-lede) { font-size: 14px; }
  .site-public :is(.ft-feature,.hw-step) { padding-block: 45px; gap: 26px; }.site-public :is(.ft-vis,.hw-vis) { padding: 22px; }
  .site-public :is(.ft-cta-strip,.hw-cta,.ab-cta,.fq-cta,.cta-card,.ofs-cta) { width: calc(100% - 40px); padding: 35px 25px; margin-bottom: 55px; }
  .site-public .ab-section { padding-block: 45px; }.site-public .ab-quote { font-size: 24px; }.site-public .ab-portrait-frame { padding: 25px; }
  .site-public .ac-hero { padding-block: 50px; }.site-public .ac-hero-inner { width: calc(100% - 40px); }.site-public .ac-h1 { font-size: 45px; }.site-public .ac-section { padding-block: 45px; }
  .site-public .bl-feature-img, .site-public .bl-feature-img > img { min-height: 260px; }.site-public .bl-feature-body { padding: 25px; }.site-public .bl-grid { padding-block: 30px 50px; }
  .site-public .article-hero { padding: 48px 20px; }.site-public .article-title { font-size: 37px; }.site-public .article-feature-img { padding-inline: 20px; margin-top: 20px; }.site-public .article-body :is(p,li) { font-size: 15px; }
  .site-public .rm-stats { gap: 25px; }.site-public .rm-col { min-width: 0; }.site-public .ofs-wrap, .site-public .lg-legal { padding-block: 50px; }.site-public .lg-legal-title { font-size: 44px; }.site-public .ofs-cta { width: 100%; }
  .site-hero { width: calc(100% - 40px); grid-template-columns: 1fr; padding: 47px 0 55px; gap: 40px; }
  .site-hero h1 { font-size: clamp(43px,11.5vw,65px); margin-top: 22px; }.site-hero p:not(.site-kicker) { font-size: 14px; margin-top: 20px; }
  .site-kicker { font-size: 9px; }.site-art-photo > img { height: 375px; }.site-art figcaption { font-size: 10px; }
  .journey-art { padding: 35px 16px; }.journey-card { width: 87%; padding: 18px 14px; }.journey-card strong { font-size: 12px; }
  .site-stat-rail { width: calc(100% - 40px); grid-template-columns: repeat(2,1fr); }.academy-art { min-height: 360px; }
  .site-motion-control { bottom: 10px; right: 10px; font-size: 9px; padding: 9px 12px; }
  .site-product .auth-card { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body *, body *::before, body *::after { animation: none!important; transition: none!important; }
  [data-parallax] { translate: none!important; }.site-motion-control { display: none; }
}

/* Platform identity: yellow actions, navy foundations, one main typeface. */
body :is(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,label,span,strong,small,div,li,td,th,output) { font-family: var(--font-ui)!important; }
body { font-variant-numeric: tabular-nums; }
.site-public :is(.lg-cta,.lg-btn-primary,.ac-cta-primary,.ofs-cta-btn,.cl-button-dark,.cl-button-yellow,.cta-card-btn),
.site-product :is(.auth-submit,.btn-primary,.btn-yellow) { background: var(--brand-yellow)!important; color: var(--brand-navy)!important; }
.site-public :is(.ft-cta-strip,.hw-cta,.ab-cta,.fq-cta,.cta-card,.ofs-cta) :is(.lg-btn-primary,.cta-card-btn) { background: var(--brand-yellow)!important; color: var(--brand-navy)!important; }
.site-public .lg-cta:hover,.site-public .cl-button:hover { box-shadow: var(--shadow-1); filter: brightness(1.04); }
.site-public .lg-nav,.site-public #mainNav { top: 12px; width: min(1280px,calc(100% - 48px)); max-width: 1280px; padding: 15px 24px; border: 1px solid var(--cl-line); border-radius: 24px; background: var(--cl-bg); box-shadow: var(--shadow-1); isolation: isolate; }
.site-public .lg-nav::before,.site-public #mainNav::before { content: none; }
.site-public .lg-nav-links a,.site-public #mainNav .nav-link { padding: 8px 3px; border-radius: 6px; transition: color .18s; }
.site-public .lg-nav-links a:hover,.site-public #mainNav .nav-link:hover { color: var(--cl-ink); }
.site-public .lg-mobile-menu,.site-public .nav-links-mobile.open { top: 90px; border: 1px solid var(--cl-line); border-radius: 20px; box-shadow: var(--shadow-2); }
.site-public .lg-footer-copy,.site-public .vf-copy { font-size: 12px; padding-top: 22px; }
.site-product .nav-item[aria-current="page"] { background: var(--brand-yellow); color: var(--brand-navy); border-radius: 10px; }
@media (max-width: 760px) {
  .site-public .lg-nav,.site-public #mainNav { width: calc(100% - 24px); padding: 12px 14px; top: 8px; border-radius: 20px; }
  .site-public .lg-nav::before,.site-public #mainNav::before { top: -9px; height: 9px; }
  .site-public .lg-mobile-menu,.site-public .nav-links-mobile.open { top: 80px; left: 12px; right: 12px; }
}

/* Shared institutional rhythm: one type scale, control shape and motion grammar. */
.site-public :is(.ft-feature,.hw-step) > * { min-width:0; }
.site-public .ft-term { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
.site-public .article-body :not(pre) > code { overflow-wrap:anywhere; white-space:normal; }
.site-public .ac-section-eyebrow { color:var(--cl-muted); letter-spacing:0; text-transform:none; font-size:12px; }
.site-public .site-hero h1 span { color:inherit; font-weight:inherit; }
.site-public .ft-feature-eyebrow { letter-spacing:0; text-transform:none; font-size:12px; }
.feature-ledger > p { margin:0 0 24px; font-size:12px; color:var(--cl-muted); }
.feature-ledger > strong { display:block; font-size:38px; font-weight:500; letter-spacing:-.04em; margin-bottom:28px; }
.feature-ledger dl { margin:0; }.feature-ledger dl > div { display:flex; justify-content:space-between; padding:16px 0; border-top:1px solid var(--cl-line); font-size:13px; }.feature-ledger dd { margin:0; font-weight:500; }.feature-ledger dt { color:var(--cl-muted); }
.site-product .auth-field { display:flex; flex-direction:column; gap:8px; text-align:left; font-size:12px; font-weight:500; color:var(--cl-ink); }
.site-product .auth-input { border-radius:var(--radius-control); font-size:16px; }
.site-public :is(.lg-nav,#mainNav) { width:100%; max-width:none; top:0; border-radius:0; margin:0; padding:18px max(32px,calc((100% - 1240px)/2)); border:0; border-bottom:1px solid var(--cl-line); background:var(--cl-card); box-shadow:none; }
.site-public .lg-nav-links { justify-content:center; }
.site-public :is(.lg-logo-img,#mainNav .nav-logo img) { width:100px; height:auto; }
.site-public :is(.lg-cta,.cl-button,.lg-btn-primary,.ac-cta-primary,.ofs-cta-btn,.cta-card-btn,.lg-btn-ghost,.ac-cta-ghost),.site-product :is(.btn-primary,.btn-yellow,.auth-submit,.auth-google) { border-radius:var(--radius-control); font-weight:500; }
.site-public :is(.lg-cta,.cl-button):hover { box-shadow:none; transform:none; filter:none; }
.site-public :is(.display-1,.ab-h1,.bl-h1,.fq-h1,.rm-h1,.ofs-h1,.ac-h1,.site-hero h1) { font-size:clamp(40px,4.8vw,66px); font-weight:500; letter-spacing:-.045em; line-height:1.1; }
.site-public :is(.cl-eyebrow,.lg-section-eyebrow,.site-kicker,.lg-hero-eyebrow,.ab-eyebrow,.ac-hero-eyebrow,.fq-eyebrow,.rm-eyebrow) { text-transform:none; letter-spacing:.015em; font-size:12px; font-weight:500; }
.site-public :is(h1,h2,h3) em { color:inherit; font-weight:inherit; }
.site-public :is(.feature-panels,.start-section,.ownership) { margin-block:72px; }
.site-public :is(.goal-panel,.ai-panel,.play-card,.flow-board,.bl-card,.lesson,.ft-vis,.hw-vis,.ab-principle) { border-radius:var(--radius-panel); box-shadow:none; }
.site-public :is(.ai-star,.goal-orbit,.final-naira,.final-orbits) { display:none; }
.site-public .lg-footer { background:var(--cl-card); padding-top:64px; }
.site-public :is(.lg-footer-h,.vf-tagline) { font-size:24px; font-weight:500; }
.site-product .auth-screen { background:var(--cl-paper); background-image:none; }
.site-product .auth-card { box-shadow:none; border-radius:var(--radius-panel); }
.site-product .app :is(.btn-quiet,.btn-icon,.inp,.searchbtn,.scrubber) { border-radius:var(--radius-control); box-shadow:none; }
.site-product .app .screen { --mo-1:var(--motion-feedback); --mo-2:var(--motion-state); --mo-3:var(--motion-enter); --mo-4:var(--motion-data); }
body :is(button,a,input,select,textarea) { transition-property:color,background-color,border-color,opacity,box-shadow; transition-duration:var(--motion-feedback); transition-timing-function:var(--motion-ease); }
body :is(.card,.bl-card,.lesson,.goal-panel,.ai-panel) { transition-property:border-color,box-shadow; transition-duration:var(--motion-state); transition-timing-function:var(--motion-ease); }
.cl-reveal.is-arriving { animation-duration:var(--motion-enter); animation-timing-function:var(--motion-ease); }
.site-product .screen.on { animation-duration:var(--motion-state); animation-name:platform-enter; }
.site-product .stagger > * { animation:none; }
.site-product :is(.bar-grow,.line-draw,.dot-pop) { animation-duration:var(--motion-data); animation-delay:0ms!important; animation-timing-function:var(--motion-ease); }
.coin-universe :is(.coin-drift,.naira-coin,.orbit-sculpture) { animation-duration:var(--motion-ambient); animation-timing-function:ease-in-out; }
.coin-universe .coin-landscape { transition-duration:var(--motion-data); transition-timing-function:var(--motion-ease); }
.runway-card { transition-duration:var(--motion-enter); transition-timing-function:var(--motion-ease); }
.runway-progress span,.budget-bar > span { transition-duration:var(--motion-state); transition-timing-function:var(--motion-ease); }
.mini-bar i,.flow-stream,.income-note { animation:none!important; }
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after { transition:none!important; }
@keyframes platform-enter { from { opacity:0; } to { opacity:1; } }
@media(hover:hover) { body :is(.cl-button,.lg-cta,.btn-primary,.auth-submit):hover { filter:brightness(.97); } }
@media(max-width:900px) { .site-public :is(.lg-nav,#mainNav) { padding:14px 20px; gap:12px; }.site-public .lg-nav-links { display:none; } }
@media(max-width:760px) { .site-public :is(.lg-nav,#mainNav) { width:100%; top:0; border-radius:0; }.site-public :is(.lg-mobile-menu,.nav-links-mobile.open) { top:74px; }.site-public :is(.lg-theme-toggle,.lg-hamburger) { width:40px; height:40px; }.site-public :is(.lg-nav-signin) { display:none; }.site-public :is(.goal-panel,.ai-panel,.play-card) { padding:24px; } }
@media(prefers-reduced-motion:reduce) { body *,body *::before,body *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }