:root{/* colour tokens (Tobias-confirmed). Hex/rgb literals appear only in :root; every rule uses var(...). --acc/--green on dark surfaces, --acc-on-light/--green-on-light for text on light ones, --acc-hover for the CTA hover, plus the house neutrals */--acc:#5FC4D6;--acc-on-light:#1B6F80;--acc-hover:#7FD3E1;--green:#66BB6A;--green-on-light:#1B5E20;--navy:#0A1628;--navy-deep:#03070F;--navy-mid:#13243D;--ink-muted:#A9B8C9;--ink-grey:#4A5B70;--surface-light:#F4F7FA;--border-light:#E3E9F0;--white:#FFFFFF;--black:#000000; --rail-black:var(--navy-deep);--rail-charcoal:var(--navy-deep);--rail-charcoal-mid:var(--navy);--rail-slate:var(--navy);--rail-slate-light:var(--navy-mid);--rail-slate-lighter:var(--acc-on-light); --rail-grey-dark:var(--navy);--rail-grey-mid:var(--ink-grey);--rail-grey-light:var(--surface-light);--rail-grey:var(--border-light);--bg-warm:var(--surface-light);--bg-cream:var(--surface-light);--bg-blush:var(--surface-light); --maple-red:var(--acc);--maple:var(--acc);--maple-red-dark:var(--acc-on-light);--maple-red-soft:var(--acc-hover);--accent-gold:var(--acc);--accent-gold-light:var(--acc);--accent-warm:var(--acc); --accent-teal:var(--acc-on-light);--terry-blue:var(--acc-on-light);--terry-blue-light:var(--acc);--shadow:none;--shadow-lg:none} body{font-family:'Inter',system-ui,sans-serif!important;background:var(--navy-deep)!important} h1,h2,h3,h4,.nav-brand{font-family:'Space Grotesk',system-ui,sans-serif!important} h1{font-weight:600!important;letter-spacing:-.01em!important} h2{font-weight:600!important} .slide{padding:72px 120px 96px!important} .slide-cover,.slide-dark,.slide-accent,.slide-blue{background:radial-gradient(circle,color-mix(in srgb,var(--ink-muted) 9%,transparent) 1px,transparent 1.2px) 0 0/22px 22px,linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 100%)!important;color:var(--white)!important} .slide-cover h1::after{content:"";display:block;width:44px;height:3px;border-radius:1.5px;background:var(--acc);margin:18px auto 0} .slide-white,.slide-warm{background:var(--surface-light)!important;color:var(--navy)!important} .content-box{max-width:1100px!important} .two-col{gap:56px!important;max-width:1100px!important}.three-col,.four-col{gap:32px!important;max-width:1100px!important} .card{background:var(--white)!important;border:1px solid var(--border-light)!important;border-left:1px solid var(--border-light)!important;border-top:1px solid var(--border-light)!important;border-radius:12px!important;box-shadow:none!important;padding:36px 32px!important} .card h3{color:var(--navy)!important}.card p{color:var(--ink-grey)!important} .card-dark{background:linear-gradient(180deg,var(--navy),var(--navy-deep))!important;border:1px solid color-mix(in srgb,var(--ink-muted) 15%,transparent)!important;border-top:2px solid var(--acc)!important;border-radius:12px!important;padding:36px 32px!important} .card-dark h3{color:var(--acc)!important}.card-dark p{color:var(--ink-muted)!important;opacity:1!important} .nav-bar{background:color-mix(in srgb,var(--navy-deep) 95%,transparent)!important;border-top:1px solid var(--navy-mid)!important;height:56px!important} .nav-dot.active{background:var(--acc)!important} .nav-btn{border-radius:8px!important;border-color:color-mix(in srgb,var(--ink-muted) 30%,transparent)!important}.nav-btn:hover{border-color:var(--acc)!important;color:var(--acc)!important} .lang-toggle{border-radius:8px!important;border-color:color-mix(in srgb,var(--ink-muted) 30%,transparent)!important;flex-shrink:0} .lang-btn.active{background:var(--acc)!important;color:var(--navy)!important} @media (max-width:1024px){.slide{padding:56px 48px 88px!important}} @media (max-width:768px){.slide{padding:40px 22px 84px!important}.card,.card-dark{padding:24px 20px!important} /* fix-spec #1,#2,#4 */ .stat{min-width:0!important;flex:1 1 120px}.two-col>*,.three-col>*,.four-col>*{min-width:0} .two-col,.three-col,.four-col{grid-template-columns:minmax(0,1fr)!important} .card-dark>div[style*="flex"]{flex-wrap:wrap} .hw-grid>*,.metric-grid>*,.risk-grid>*,.partner-grid>*{min-width:0} .hw-grid,.metric-grid,.risk-grid,.partner-grid{grid-template-columns:minmax(0,1fr)!important} .anim-4>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}.anim-4 p{overflow-wrap:anywhere} .stack-layer .sl-name{min-width:0!important}} /* fix-spec #5 */ .rev-table,.fund-table{display:block;max-width:100%;overflow-x:auto} @media (max-width:480px){.rev-table td,.fund-table td{overflow-wrap:anywhere} /* fix-spec #3 */ .nav-bar{padding:0 10px!important;gap:6px}.nav-bar>*{min-width:0}.nav-controls{gap:4px;flex-shrink:0}.nav-btn{width:30px!important;height:30px!important}.nav-bar .brand-sub{display:none}} .slide h1,.slide h2{font-family:"Space Grotesk",system-ui,sans-serif!important} /* pilot-pitch: .slide-terry is a light slide, .slide-deep a dark one (brief ยง3) */ .slide-terry{background:var(--surface-light)!important;color:var(--navy)!important} .slide-deep{background:radial-gradient(circle,color-mix(in srgb,var(--ink-muted) 9%,transparent) 1px,transparent 1.2px) 0 0/22px 22px,linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 100%)!important;color:var(--white)!important} /* Light slides: cyan var(--acc) is 1.89:1 on var(--surface-light). Text accents use the house teal var(--acc-on-light) (5.38:1); cyan stays for rules/badges on dark */ .slide-white .stat-number,.slide-warm .stat-number,.slide-terry .stat-number,.slide-white .pill,.slide-warm .pill,.slide-terry .pill{color:var(--acc-on-light)!important} .pill-red,.pill-gold,.pill-blue{background:color-mix(in srgb,var(--acc) 15%,transparent)!important} /* 320px: wide comparison tables scroll inside the slide */ .compare-table,.rev-table,.fund-table{display:block!important;max-width:100%;overflow-x:auto} /* .slide-terry content was authored white-on-blue: map it to navy/teal on the light slide */ .slide-terry{--accent-gold-light:var(--acc-on-light);--rail-white:var(--navy)} .slide-terry>.content-box>[style*="var(--white)"],.slide-terry>.content-box>[style*="var(--white)"] strong,.slide-terry .two-col [style*="var(--white)"],.slide-terry .two-col [style*="var(--white)"] *{color:var(--navy)!important} .slide-terry .small-label{color:var(--acc-on-light)!important} body.lang-fr .compare-table[data-lang="fr"],body.lang-fr .rev-table[data-lang="fr"],body.lang-fr .fund-table[data-lang="fr"]{display:block!important} @media (max-width:360px){.slide h1[style*="font-size"]{font-size:2.3rem!important}.slide h1,.slide h2,.slide h3{overflow-wrap:break-word}} .slide-terry .terry-bubble p{color:var(--navy)!important} /* Teal 15% bubble tint left teal text at 4.37:1; 8% gives 4.83:1 */ .slide-terry .terry-bubble{background:color-mix(in srgb,var(--acc-on-light) 8%,transparent)!important} /* Accent tokens on light slides resolve to teal (text contrast); dark panels inside them keep cyan */ .slide-white,.slide-warm,.slide-terry{--maple-red:var(--acc-on-light);--maple:var(--acc-on-light);--accent-gold:var(--acc-on-light);--accent-gold-light:var(--acc-on-light);--accent-warm:var(--acc-on-light);--terry-blue-light:var(--acc-on-light);--accent-green:var(--green-on-light)} .slide-white .card-dark,.slide-warm .card-dark,.slide-terry .card-dark,.slide-white .dark-bg,.slide-warm .dark-bg,.slide-white [style*="background: var(--rail-slate)"],.slide-warm [style*="background: var(--rail-slate)"],.slide-white [style*="background:var(--rail-slate)"],.slide-warm [style*="background:var(--rail-slate)"]{--maple-red:var(--acc);--maple:var(--acc);--accent-gold:var(--acc);--accent-gold-light:var(--acc);--accent-warm:var(--acc);--terry-blue-light:var(--acc)} /* Teal/green accent text on dark slides: teal var(--acc-on-light) is ~2-3:1 on navy, so dark slides use cyan; positive-state green lightens to var(--green) */ .slide-cover,.slide-dark,.slide-accent,.slide-blue,.slide-deep{--accent-teal:var(--acc);--terry-blue:var(--acc);--rail-slate-lighter:var(--acc);--maple-red-dark:var(--acc);--accent-green:var(--green)} .slide-white .flow-desc,.slide-warm .flow-desc{opacity:.75!important} /* Tobias 2026-10-26: on light slides the on-light accent is text/links/thin rules only, and cards carry no cyan top line */ .slide-blush .gap-icon,.slide-blush .journey-num,.slide-white .gap-icon,.slide-warm .gap-icon,.slide-terry .gap-icon,.slide-white .journey-num,.slide-warm .journey-num,.slide-terry .journey-num{background:var(--acc)!important;color:var(--navy)!important} .slide-white .card-persona,.slide-warm .card-persona,.slide-terry .card-persona,.slide-white .hw-card,.slide-warm .hw-card,.slide-white .stack-layer,.slide-warm .stack-layer,.slide-white .flow-step,.slide-warm .flow-step{border-top-color:var(--border-light)!important} /* WCAG AA on the blended colour: captions and arrows that were faded with opacity use solid tokens instead */ .confidential{opacity:1!important;color:var(--ink-muted)!important} .flow-arrow,.timeline-arrow{opacity:1!important;color:var(--ink-muted)!important} .slide-white .flow-arrow,.slide-warm .flow-arrow,.slide-terry .flow-arrow,.slide-cream .flow-arrow,.slide-blush .flow-arrow,.slide-white .timeline-arrow,.slide-warm .timeline-arrow,.slide-terry .timeline-arrow,.slide-cream .timeline-arrow,.slide-blush .timeline-arrow{color:var(--ink-grey)!important} .metric-card .metric-phase{opacity:1!important} /* 13px text floor (Weatherman SHIP note on #36). Every value below was < 13px (8.8-12.8px); max() keeps any larger value. !important beats the page