/* ═══════════════════════════════════════════════════════════════════════════ ONE COST RED — the single definition, repeated here because this site has no stylesheet that every page loads. Values are identical everywhere; see polish.css for why there are three of them. --cost-red text on a LIGHT surface 4.5:1 --cost-red-on-dark text on a DARK surface 4.5:1 --cost-red-bar-on-dark a BAR on a dark surface 3:1 is the bar it must clear, and the looser bar buys a deeper, truer red than the text one. The two *-auto tokens pick the right member of that set from the theme, so a badge on a card that goes dark stays readable without every rule having to say so twice. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --cost-red:#B3261E; --cost-red-on-dark:#F0776B; --cost-red-bar-on-dark:#E54B3E; --cost-red-auto:#B3261E; --cost-red-bar-auto:#B3261E; } :root[data-theme="dark"]{ --cost-red-auto:var(--cost-red-on-dark); --cost-red-bar-auto:var(--cost-red-bar-on-dark); } /* Moneyed's product-led landing. Scoped to marketing; app tools keep their styles. */ #marketing-view{--refresh-green:#087443;--refresh-ink:#082c24;--refresh-bg:#f5faf7;} #marketing-view .ml-hero{background:#082c24;color:#f5faf7;position:relative;overflow:hidden;padding:52px 0 0;} #marketing-view .ml-hero .hero__inner{position:relative;z-index:1;grid-template-columns:1.1fr 1fr;gap:64px;} #marketing-view .ml-hero .mn-refresh-eyebrow{color:#9ee6bf;} #marketing-view .ml-hero .hero__heading{font-family:var(--font-sans),sans-serif;font-size:clamp(46px,5.3vw,76px);font-weight:750;line-height:1.03;letter-spacing:-3.5px;color:#fff;} #marketing-view .ml-hero .hero__heading span{color:#9ee6bf;} #marketing-view .ml-hero .hero__desc{color:#c9d9d0;font-size:17px!important;line-height:1.65;} #marketing-view .ml-hero .btn--primary{background:#9ee6bf;border-color:#9ee6bf;color:#082c24;border-radius:8px;} #marketing-view .ml-hero .btn--outline{color:#f5faf7;border-color:#668477;border-radius:8px;} #marketing-view .ml-hero .hero__microcopy{color:#b6cbbf;margin-top:18px;} #marketing-view .ml-hero a:focus-visible,#marketing-view .ml-hero button:focus-visible{outline:3px solid #9ee6bf;outline-offset:4px;} .ml-founder{display:flex;gap:12px;align-items:center;margin-top:32px;}.ml-monogram{width:42px;height:42px;border:1px solid #78917c;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#9ee6bf;}.ml-founder p{margin:0;line-height:1.6;font-size:13px;}.ml-founder p span{display:block;color:#b6cbbf;font-size:11px;} #marketing-view #hero-dashboard-btn a{display:inline-block;color:#9ee6bf;font-size:13px;margin-top:12px;} .ml-waves{position:absolute;inset:0;width:100%;height:100%;color:#82af87;opacity:.11;pointer-events:none;}.ml-waves path{stroke-width:1.3;stroke-dasharray:1800;stroke-dashoffset:1800;animation:ml-draw 3s ease-out forwards;}.ml-waves path:nth-child(2){animation-delay:.15s}.ml-waves path:nth-child(3){animation-delay:.3s}.ml-waves path:nth-child(4){animation-delay:.45s} .ml-demo{min-width:0;background:#f5faf7;color:#082c24;border-radius:22px;padding:25px 28px;box-shadow:0 22px 70px #0003;animation:ml-enter .8s ease-out both;} .ml-demo-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;letter-spacing:1px;font-weight:700;}.ml-demo-top>span:last-child{font-size:10px;letter-spacing:0;color:#53695b;font-weight:500;}.ml-demo-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#087443;margin-right:5px;} #marketing-view .ml-demo h2{font:700 30px/1.1 var(--font-sans),sans-serif;letter-spacing:-1px;color:#082c24;margin:20px 0 10px;}.ml-demo-context{font-size:12px;color:#53695b;} .ml-terms{display:flex;background:#e0efe6;padding:4px;border-radius:9px;margin:18px 0;gap:4px;}.ml-terms button{flex:1;padding:10px 5px;min-height:42px;border:0;border-radius:6px;background:transparent;color:#385645;font:600 12px var(--font-sans),sans-serif;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;}.ml-terms button[aria-pressed=true]{background:#082c24;color:#dcf3e6;box-shadow:0 2px 5px #082c2422;} .ml-demo-result{display:flex;flex-direction:column;gap:3px;margin:12px 0 20px;}.ml-demo-result>span{font-size:12px;color:#53695b;}.ml-demo-result strong{font-size:45px;line-height:1.2;font-weight:700;letter-spacing:-2px;font-variant-numeric:tabular-nums;}.ml-demo-result.ml-changed strong{animation:ml-number .35s ease-out;} .ml-cost-label,.ml-legend{display:flex;justify-content:space-between;gap:10px;font-size:10px;}.ml-cost-label strong{font-size:12px;}.ml-cost-bar{height:14px;display:flex;border-radius:4px;overflow:hidden;margin:10px 0;background:#9ee6bf;}.ml-cost-bar span:first-child{width:74.9%;background:#087443;transition:width .7s cubic-bezier(.2,.7,.2,1);}.ml-legend{color:#53695b;}.ml-legend span:first-child{color:#087443;} .ml-insight{background:#e7f5ed;border-left:3px solid #087443;padding:12px;font-size:12px;line-height:1.6;margin:17px 0 10px;min-height:62px;}.ml-demo-note{font-size:10px;line-height:1.5;color:#53695b;}.ml-demo>a{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:#087443;padding-top:14px;margin-top:14px;border-top:1px solid #d9e0d0;min-height:38px;} #marketing-view .ml-value-strip{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-block:22px;position:relative;border-top:1px solid #496357;font-size:11px;color:#9ee6bf;}.ml-value-strip strong{font-weight:500;color:#c9d9d0;margin-left:10px;} #marketing-view .ml-learn{padding-block:74px;scroll-margin-top:25px;}.ml-section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px;}#marketing-view .ml-section-heading h2{font:700 clamp(28px,3vw,42px)/1.14 var(--font-sans),sans-serif;letter-spacing:-1.5px;color:var(--refresh-ink);margin:0;}.ml-section-heading>p{font-size:14px;color:var(--refresh-muted);line-height:1.6;} .ml-lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}.ml-lesson{background:var(--refresh-surface);border:1px solid var(--refresh-line);border-radius:16px;padding:25px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;}.ml-lesson:hover{transform:translateY(-6px);box-shadow:0 15px 30px #082c2410;}.ml-lesson-label{font-size:9px;letter-spacing:1.3px;color:var(--refresh-green);font-weight:700;}.ml-lesson h3{font-size:25px;line-height:1.15;letter-spacing:-.7px;color:var(--refresh-ink);margin:14px 0;}.ml-lesson>p{font-size:13px;line-height:1.7;color:var(--refresh-muted);margin-bottom:25px;}.ml-read{margin-top:auto;font-size:12px;font-weight:700;color:var(--refresh-green);} .ml-mini{height:105px;margin-bottom:22px;border-radius:10px;background:#e7f5ed;overflow:hidden;position:relative;}.ml-mini-bars{display:flex;align-items:end;justify-content:center;gap:14px;padding:18px;}.ml-mini-bars span{width:35px;background:#087443;border-radius:5px 5px 0 0;transform-origin:bottom;}.ml-mini-bars span:nth-child(1){height:35px;}.ml-mini-bars span:nth-child(2){height:52px;background:#1fa463;}.ml-mini-bars span:nth-child(3){height:70px;background:#73c999;}.ml-visible .ml-mini-bars span{animation:ml-grow .8s ease-out both;}.ml-visible .ml-mini-bars span:nth-child(2){animation-delay:.15s}.ml-visible .ml-mini-bars span:nth-child(3){animation-delay:.3s} .ml-mini-score span{position:absolute;left:50%;bottom:16px;width:120px;height:60px;border:14px solid #73c999;border-bottom:0;border-radius:90px 90px 0 0;transform:translateX(-50%);}.ml-mini-score i{position:absolute;bottom:16px;left:50%;width:48px;height:4px;border-radius:5px;background:#082c24;transform-origin:0 50%;transform:rotate(-45deg);}.ml-visible .ml-mini-score i{animation:ml-needle 1s ease-out both;}.ml-mini-card{display:flex;align-items:center;justify-content:center;gap:13px;padding:15px;}.ml-mini-card span{font-size:8px;font-weight:700;color:#385645;max-width:55px;line-height:1.6;}.ml-mini-card strong{font-size:45px;color:#087443;}.ml-visible .ml-mini-card strong{animation:ml-enter .8s ease-out both;} @keyframes ml-draw{to{stroke-dashoffset:0}}@keyframes ml-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes ml-number{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes ml-grow{from{transform:scaleY(.1)}to{transform:scaleY(1)}}@keyframes ml-needle{from{transform:rotate(-160deg)}to{transform:rotate(-45deg)}} @media(max-width:900px){#marketing-view .ml-hero .hero__inner{gap:28px;grid-template-columns:1fr 1fr;}#marketing-view .ml-hero .hero__heading{font-size:52px;letter-spacing:-2.5px;}.ml-demo{padding:22px;}.ml-lesson{padding:20px;}.ml-lesson h3{font-size:22px;}} @media(max-width:640px){#marketing-view .ml-hero{padding-top:36px;}#marketing-view .ml-hero .hero__inner{grid-template-columns:1fr;gap:30px;}#marketing-view .ml-hero .hero__heading{font-size:48px;letter-spacing:-2.4px;}#marketing-view .ml-hero .hero__desc{font-size:15px!important;}.ml-founder{margin-top:24px;}#marketing-view .ml-value-strip{margin-top:28px;gap:12px;font-size:9px;align-items:start;}.ml-value-strip span{flex:1;}.ml-value-strip strong{display:block;margin:6px 0 0;line-height:1.6;}#marketing-view .ml-learn{padding-block:45px;}.ml-section-heading{display:block;}.ml-section-heading>p{margin-top:18px;}.ml-lessons{grid-template-columns:1fr;}.ml-lesson{padding:24px;}.ml-lesson h3{font-size:27px;}.ml-mini{height:110px;}.ml-demo-result strong{font-size:44px;}} @media(prefers-reduced-motion:reduce){#marketing-view .ml-hero *,#marketing-view .ml-learn *{animation:none!important;transition:none!important;}.ml-waves path{stroke-dashoffset:0;}.ml-lesson:hover{transform:none;}} #marketing-view .ml-hero{display:block;} /* Haikei-generated SVG, animated locally. Palette anchored to logo #1FA463. */ #marketing-view{--moneyed-brand:#1fa463;} #marketing-view .ml-hero .btn--primary{background:#1fa463;border-color:#1fa463;color:#082c24;} #marketing-view .ml-haikei{position:absolute;left:-3%;bottom:0;width:106%;height:100%;pointer-events:none;opacity:.25;} .ml-haikei path{transform-box:fill-box;transform-origin:center;animation:ml-wave-drift 9s ease-in-out infinite alternate;} .ml-haikei path:nth-of-type(2n){animation-direction:alternate-reverse;animation-duration:12s;} #marketing-view .ml-motion-toggle{position:relative;display:block;margin:0 32px 12px auto;font-size:11px;color:#dcf3e6;border:1px solid #608572;border-radius:20px;padding:8px 12px;background:#082c24;cursor:pointer;} .ml-motion-paused .ml-haikei path{animation-play-state:paused;} .ml-terms{position:relative;isolation:isolate;} .ml-terms::before{content:'';position:absolute;inset:4px auto 4px 4px;width:calc((100% - 16px)/3);background:#082c24;border-radius:6px;z-index:-1;transform:translateX(calc(var(--ml-active,0) * (100% + 4px)));transition:transform .45s cubic-bezier(.22,1,.36,1);} .ml-terms button[aria-pressed=true]{background:transparent;box-shadow:none;} @keyframes ml-wave-drift{from{transform:translateX(-10px) scaleX(1.04)}to{transform:translateX(10px) scaleX(1.08)}} @media(prefers-reduced-motion:reduce){.ml-haikei path{animation:none!important;}.ml-terms::before{transition:none;}} #marketing-view .ml-explainer,#marketing-view .ml-membership{padding-block:60px;display:grid;grid-template-columns:1fr 1.3fr;gap:35px;border-bottom:1px solid var(--refresh-line);scroll-margin-top:25px;}#marketing-view .ml-explainer h2,#marketing-view .ml-membership h2{font:700 36px/1.15 var(--font-sans),sans-serif;letter-spacing:-1px;color:var(--refresh-ink);margin:0 0 15px;}.ml-explainer p,.ml-membership p{font-size:13px;line-height:1.7;color:var(--refresh-muted);}.ml-explainer button,.ml-membership a{display:inline-block;border:1px solid var(--refresh-line);background:var(--refresh-surface);color:var(--refresh-ink);border-radius:9px;padding:12px 18px;font-size:12px;margin-top:16px;cursor:pointer;}.ml-explain-steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0;gap:12px;}.ml-explain-steps li{padding:20px 16px;border:1px solid var(--refresh-line);border-radius:14px;background:var(--refresh-surface);transition:transform .3s,border-color .3s;}.ml-explain-steps span,.ml-plan>span{font-size:9px;letter-spacing:1px;color:var(--refresh-green);}.ml-explain-steps strong{display:block;font-size:21px;margin:24px 0 15px;line-height:1.3;color:var(--refresh-ink);}.ml-explain-steps .ml-step-active{border-color:#1fa463;transform:translateY(-6px);box-shadow:0 10px 24px #1fa46318;}.ml-explain-note{grid-column:1/-1;font-size:10px!important;margin:0;}.ml-plan{padding:28px;border:1px solid var(--refresh-line);border-radius:18px;background:var(--refresh-surface);}.ml-plan h3{font-size:42px;color:var(--refresh-ink);margin:16px 0;}.ml-plan h3 small{font-size:13px;font-weight:400;}.ml-plan ul{padding-left:20px;line-height:2;font-size:13px;color:var(--refresh-ink);}.ml-plan>p{font-size:11px;} [data-theme=dark] #marketing-view{--refresh-bg:#101c17;--refresh-ink:#f2f6f0;--refresh-muted:#b9c8bf;--refresh-line:#354a3d;--refresh-surface:#192a21;--refresh-green:#9ee6bf;} @media(max-width:760px){#marketing-view .ml-explainer,#marketing-view .ml-membership{grid-template-columns:1fr;padding-block:40px;}.ml-explain-steps{grid-template-columns:1fr;}.ml-explain-steps strong{margin:10px 0;}.ml-explain-steps li{padding:16px 20px;}} @media(prefers-reduced-motion:reduce){.ml-explain-steps li{transition:none;}.ml-explain-steps .ml-step-active{transform:none;}} /* Paired Moneyed palette: logo green, forest ink and mineral mint. */ body:not(.app-mode){overflow-x:clip;overflow-y:visible;} #marketing-view{--refresh-bg:#f5faf7;--refresh-surface:#fff;--refresh-ink:#082c24;--refresh-muted:#52685e;--refresh-line:#cfdfd5;--refresh-green:#087443;--lab-bg:#fff;--lab-soft:#e7f5ed;--lab-ink:#082c24;--lab-muted:#52685e;--lab-accent:#087443;} [data-theme=dark] #marketing-view{--lab-bg:#123b30;--lab-soft:#1b493b;--lab-ink:#f5faf7;--lab-muted:#bfd7ca;--lab-accent:#9ee6bf;} #marketing-view .ml-demo{background:var(--lab-bg);color:var(--lab-ink);border:1px solid var(--refresh-line);box-shadow:0 24px 70px #082c2417;} #marketing-view .ml-demo h2{color:var(--lab-ink);} .ml-demo-context,.ml-demo-top>span:last-child,.ml-demo-result>span,.ml-legend,.ml-demo-note{color:var(--lab-muted);} .ml-insight,.ml-terms{background:var(--lab-soft);}.ml-insight{border-color:var(--lab-accent);} .ml-demo>a,.ml-legend span:first-child{color:var(--lab-accent);}.ml-demo>a{border-color:var(--refresh-line);} .ml-terms button{color:var(--lab-ink);}.ml-terms button[aria-pressed=true]{color:#dcf3e6;} html:not([data-theme=dark]) #marketing-view .ml-hero{background:radial-gradient(ellipse at 80% 30%,#dcf3e6,transparent 65%),#f5faf7;color:#082c24;} html:not([data-theme=dark]) #marketing-view .ml-hero .hero__heading{color:#082c24;} html:not([data-theme=dark]) #marketing-view .ml-hero .hero__heading span,html:not([data-theme=dark]) #marketing-view .ml-hero .mn-refresh-eyebrow{color:#087443;} html:not([data-theme=dark]) #marketing-view .ml-hero .hero__desc,html:not([data-theme=dark]) #marketing-view .ml-hero .hero__microcopy,html:not([data-theme=dark]) .ml-founder p span,html:not([data-theme=dark]) .ml-value-strip strong{color:#52685e;} html:not([data-theme=dark]) #marketing-view .ml-hero .btn--primary{background:#087443;border-color:#087443;color:#fff;} html:not([data-theme=dark]) #marketing-view .ml-hero .btn--outline{border-color:#9bbbab;color:#082c24;background:#ffffff80;} html:not([data-theme=dark]) .ml-monogram,html:not([data-theme=dark]) #marketing-view .ml-value-strip{color:#087443;border-color:#bed6c8;} html:not([data-theme=dark]) .ml-haikei{opacity:.07;} .ml-curve{margin:20px 0;padding:16px 0;border-block:1px solid var(--refresh-line);}.ml-curve>div{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--lab-muted);}.ml-curve svg{width:100%;height:80px;display:block;margin:12px 0;overflow:visible;}.ml-curve-grid{fill:none;stroke:var(--refresh-line);stroke-width:1;}.ml-curve #ml-balance-curve{fill:none;stroke:var(--lab-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--lab-p,1))*100);}.ml-curve small{display:block;margin-top:10px;font-size:10px;color:var(--lab-muted);} .motion-section.motion-arrived{animation:moneyed-arrive .85s cubic-bezier(.2,.7,.2,1) both;}@keyframes moneyed-arrive{from{opacity:.6;translate:0 28px}to{opacity:1;translate:0 0}} @media(prefers-reduced-motion:reduce){.motion-section.motion-arrived{animation:none;}.ml-curve #ml-balance-curve{stroke-dashoffset:0;}} html:not([data-theme=dark]) #marketing-view .ml-haikei{opacity:.055;} #marketing-view .ml-hero .hero__inner{align-items:start;} #marketing-view .ml-hero .hero__content{padding-top:55px;} @media(max-width:760px){#marketing-view .ml-hero .hero__content{padding-top:0;}} /* Selected reference: forest hero with a light, usable calculator in either theme. */ html #marketing-view .ml-hero{background:#082c24;color:#f5faf7;--lab-bg:#f5faf7;--lab-soft:#e2f1e9;--lab-ink:#082c24;--lab-muted:#52685e;--lab-accent:#087443;--refresh-line:#cfdfd5;} html #marketing-view .ml-hero .hero__heading{color:#fff;}html #marketing-view .ml-hero .hero__heading span,html #marketing-view .ml-hero .mn-refresh-eyebrow,html #marketing-view .ml-hero .ml-monogram{color:#9ee6bf;} html[data-theme="dark"] #marketing-view .ml-hero .hero__desc,html[data-theme="dark"] #marketing-view .ml-hero .hero__microcopy,html[data-theme="dark"] #marketing-view .ml-hero .ml-founder p span,html[data-theme="dark"] #marketing-view .ml-hero .ml-value-strip strong{color:#c9d9d0;} html #marketing-view .ml-hero .btn--primary{background:#1fa463;border-color:#1fa463;color:#082c24;}html #marketing-view .ml-hero .btn--outline{background:transparent;color:#f5faf7;border-color:#668477;} html #marketing-view .ml-haikei{opacity:.25;} .ml-inputs{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;margin-top:20px;}.ml-inputs label{font-size:10px;color:#52685e;}.ml-inputs input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:10px 8px;border:1px solid #aecdbc;border-radius:8px;background:#fff;color:#082c24;font:600 15px var(--font-sans),sans-serif;min-width:0;}.ml-inputs input:focus-visible{outline:2px solid #087443!important;outline-offset:2px!important;}.ml-custom-tenure::before{display:none;}#ml-input-error{color:var(--cost-red, #B3261E);font-size:12px;}#ml-input-error[hidden]{display:none;} @media(max-width:420px){.ml-inputs{grid-template-columns:1fr 1fr;}.ml-inputs label:first-child{grid-column:1/-1;}} .ml-service-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:11px;}.ml-service-links a{color:#087443;text-decoration:underline;text-underline-offset:4px;} /* ul{list-style:none} is set globally in style.css AND marketing.css, so the membership features rendered as one unbroken grey wall: every
  • was exactly 52px with 0px between items, and the line-height inside an item equalled the gap between items. */ .ml-plan ul{list-style:disc;padding-left:22px;line-height:1.6;} .ml-plan li{list-style:disc;margin-bottom:14px;} .ml-plan li::marker{color:var(--refresh-green);} .ml-plan>p{font-size:12px;line-height:1.6;} /* ── Membership: planned price shown beside the live one ────────────────── */ .ml-price-was{font-size:12px;color:var(--refresh-muted);margin:14px 0 0;letter-spacing:.2px;} .ml-price-was s{text-decoration:line-through;text-decoration-thickness:1.5px; font-weight:700;font-size:15px;color:var(--refresh-ink);opacity:.72;margin:0 2px;} .ml-plan h3{margin-top:4px;} /* ── Loan Lab: the cost of a long tenure, stated rather than implied ────── NOTE: .ml-demo is a light card that sits on the dark hero and does NOT flip with the theme — .ml-demo-note and .ml-curve small both stay at rgb(82,104,94) in dark mode. Giving these a [data-theme="dark"] override put light text on a light card (measured 1.65:1). No theme override here. */ .ml-multiple{font-size:12.5px;line-height:1.55;margin:12px 0 0;color:#52685E;} .ml-multiple--heavy{color:var(--cost-red-auto, #B3261E);font-weight:700;} #ml-half-line{stroke:#52685E;stroke-width:1;stroke-dasharray:3 3;opacity:.6;} #ml-half-dot{fill:#F5FAF7;stroke:var(--cost-red-bar-auto, #B3261E);stroke-width:2.5;} .ml-milestones{list-style:none;margin:12px 0 0;padding:0;display:flex; flex-direction:column;gap:7px;} .ml-milestones li{font-size:11.5px;line-height:1.5;color:#52685E; padding-left:15px;position:relative;} .ml-milestones li:empty{display:none;} .ml-milestones li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px; border-radius:50%;border:1.5px solid var(--cost-red-bar-auto, #B3261E);} /* ── Founder credit line ───────────────────────────────────────────────── `.ml-founder p span` had been grouped into a selector written for the dark hero's value strip — `html[data-theme="dark"] #marketing-view .ml-hero .ml-value-strip strong` — so the strip's pale #c9d9d0 won on specificity and landed on this line too. On the light hero that measured 1.39:1. Separated, and stated for each theme rather than inherited from an unrelated component. */ /* ── Motion preference control ─────────────────────────────────────────── Was a 158x33 dark pill pushed into place with `margin-left:auto` — loud for a minor preference, and the first thing the eye met after the hero. Now a quiet circular control that states itself on hover and focus. */ #marketing-view .ml-hero .ml-motion-toggle{position:absolute;right:18px;bottom:18px;z-index:3; display:inline-flex;align-items:center;gap:0;width:34px;height:34px;padding:0; margin:0;overflow:hidden;white-space:nowrap; font-size:11px;font-weight:600;line-height:1;color:#0e5c38; background:rgba(255,255,255,.82);border:1px solid rgba(8,92,58,.22); border-radius:20px;cursor:pointer;backdrop-filter:blur(6px); transition:width .22s ease,background .2s ease,padding .22s ease;} .ml-motion-toggle::before{content:"";flex:0 0 34px;height:34px; background:currentColor; -webkit-mask:var(--mt-icon) center/14px 14px no-repeat; mask:var(--mt-icon) center/14px 14px no-repeat;} .ml-motion-toggle{--mt-icon:url('data:image/svg+xml;utf8,');} .ml-motion-toggle[aria-pressed="true"]{--mt-icon:url('data:image/svg+xml;utf8,');} .ml-motion-toggle:hover,.ml-motion-toggle:focus-visible{width:auto;padding-right:14px; background:#fff;} .ml-motion-toggle:focus-visible{outline:3px solid #087443;outline-offset:3px;} [data-theme="dark"] .ml-motion-toggle{color:#9ee6bf;background:rgba(8,44,36,.78); border-color:rgba(158,230,191,.3);} [data-theme="dark"] .ml-motion-toggle:hover, [data-theme="dark"] .ml-motion-toggle:focus-visible{background:#082c24;} #marketing-view .ml-hero{position:relative;} /* ── Replay control ────────────────────────────────────────────────────── A bordered rectangle gave no hint that it plays something. */ .ml-explainer button{display:inline-flex;align-items:center;gap:8px;font-weight:700;} .ml-explainer button::before{content:"";width:16px;height:16px;border-radius:50%; background:#087443; -webkit-mask:var(--play) center/7px 7px no-repeat;mask:var(--play) center/7px 7px no-repeat; -webkit-mask-composite:destination-out;} .ml-explainer button{--play:url('data:image/svg+xml;utf8,');} .ml-explainer button:hover{border-color:#087443;} /* ── The interest half of the split bar is the point, so colour it so ───── Principal was #087443 and interest was #9ee6bf — two greens. The bar read as one quantity in two shades, which is exactly the thing this card exists to argue against. Interest is now the warning colour, and the legend dot follows it, so the eye lands on the part that is not your money. var(--cost-red-auto, #B3261E) measures 4.90:1 on the card's #F5FAF7 ground. */ #marketing-view .ml-demo .ml-cost-bar{background:#F3D9C9;} #marketing-view .ml-demo .ml-cost-bar span:first-child{background:#087443;} #marketing-view .ml-demo .ml-cost-bar span:last-child{background:var(--cost-red-bar-auto, #B3261E);} #marketing-view .ml-demo #ml-interest-label{color:#9A4616;font-weight:700;} /* The tenure switch is driven by scroll now, so the active pill needs to read as a state changing rather than a button someone pressed. */ #marketing-view .ml-demo .ml-terms button{transition:background .3s cubic-bezier(.4,0,.2,1),color .3s ease,box-shadow .3s ease;} #marketing-view .ml-demo .ml-demo-result strong{transition:color .25s ease;} /* Every figure that moves when the tenure changes gets the same settle, so the card re-forms as one object instead of six independent twitches. */ #marketing-view .ml-demo #ml-emi, #marketing-view .ml-demo #ml-total, #marketing-view .ml-demo #ml-interest, #marketing-view .ml-demo #ml-interest-label, #marketing-view .ml-demo #ml-principal-label, #marketing-view .ml-demo .ml-multiple{transition:opacity .22s ease;} #marketing-view .ml-demo.ml-swapping #ml-emi, #marketing-view .ml-demo.ml-swapping #ml-total, #marketing-view .ml-demo.ml-swapping #ml-interest{opacity:.45;} @media(prefers-reduced-motion:reduce){ #marketing-view .ml-demo *{transition:none !important;} } /* ═══════════════════════════════════════════════════════════════════ THE LAB'S OWN INK, 25 Oct 2026 ═══════════════════════════════════════════════════════════════════ Three rules in this file hard-code the LIGHT lab colours instead of reading the tokens beside them: .ml-inputs label #52685e should be --lab-muted .ml-multiple #52685E should be --lab-muted .ml-service-links a #087443 should be --lab-accent That was harmless for as long as the Loan Lab card lived INSIDE .ml-hero, because the hero pins the light values in both themes — "a light, usable calculator in either theme", as the note up there says. The card was moved out into its own .ml-lab section on Nakul's instruction, and the pin does not reach it any more: a custom property inherits down the tree, and the card is no longer in that tree. So in dark the card now takes --lab-bg #123b30 and goes dark, while these three stayed light. Measured on the dark card: the labels and the repayment line read 2.07:1, the two service links 2.12:1. The tokens already carry correct dark values (--lab-muted #bfd7ca, --lab-accent #9ee6bf). Nothing new is invented here; these rules are simply pointed at them, with the old literals kept as the fallback so anything that still sits inside the hero is unchanged. */ #marketing-view .ml-inputs label, #marketing-view .ml-multiple, /* .ml-milestones was added after the list on line 84 was written, so it never joined it — the only one of the card's muted lines still on a literal. Every other one (context, result, note, legend) was already reading the token and is correct in both themes; this was checked element by element rather than assumed. */ #marketing-view .ml-milestones li { color: var(--lab-muted, #52685e); } #marketing-view .ml-service-links a { color: var(--lab-accent, #087443); }