/* ═══════════════════════════════════════════════════════════════════════════
POLISH — breathing room, the cost colour, and a reveal you can actually see
Loaded last on purpose: several of the homepage sections carry inline
`style="padding:56px 20px 0"`, and an inline style beats any selector.
Where !important appears below it is answering that, not laziness.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Room to breathe ───────────────────────────────────────────────────
Sections were set at 56px top / 0 bottom, so consecutive blocks ran into
one another and the page read as one long wall. This roughly doubles the
gap and, more importantly, adds the BOTTOM padding that was missing — the
reason it felt cramped is that nothing had space beneath it.
#hero and the two pinned films are excluded: their height is load-bearing
(a film's scroll runway is measured from it), so padding there changes the
animation timing rather than the look. */
#marketing-view > section:not(#hero):not(.mo-film):not(#four-pillars) {
padding-block: clamp(72px, 9vw, 128px) clamp(24px, 4vw, 56px) !important;
}
/* Headline blocks sat tight against the content under them. */
#marketing-view > section > div:first-child > h2,
#marketing-view .mn-start-section h2,
#consolidation h2 { margin-bottom: 16px; }
#marketing-view .mn-cons,
#marketing-view .ml-explain-steps,
#marketing-view .ml-plan { margin-top: clamp(28px, 4vw, 44px); }
/* The explainer cards were touching. A list of five steps needs to read as
five things, not one block with rules through it. */
#marketing-view .ml-explain-steps { display: grid; gap: clamp(14px, 2.2vw, 22px); }
@media (max-width: 640px) {
#marketing-view > section:not(#hero):not(.mo-film):not(#four-pillars) {
padding-block: 56px 28px !important;
}
}
/* ── 2. ONE red, everywhere it means cost ────────────────────────────────
There were three different reds doing the same job:
#B3261E x18 the struck-through ₹249, dashboard, CRM
#C62828 x17 .is-cost — interest on every calculator
#DC3545 x18 older bootstrap red
plus #E2544A, #B4541B, #A8320F in ones and twos
A reader cannot learn "red means this is costing you" when red is four
colours. Everything below is now the one the owner pointed at, #B3261E,
with a lightened counterpart for dark surfaces because #B3261E on a near
black background measures about 1.8:1 and cannot be read.
Amber (#F3A712, #E8B04B) is left alone — that is "caution", a different
message. So is #F43F5E, which is the credit-card product's own accent,
not a cost. */
:root {
/* Text on a light surface. */
--cost-red: #B3261E;
/* Text on a dark surface. #B3261E there measures 1.8:1 and cannot be read. */
--cost-red-on-dark: #F0776B;
/* BARS on a dark surface. A bar is a graphic, and WCAG asks 3:1 of a
graphic rather than the 4.5:1 it asks of a word. That difference is
worth a real colour: this is a deep, saturated red much nearer the
struck-through 249 than the lightened text red, and it still clears
3.4:1 against the film's slab. Using the text red on bars was the
reason the interest bars read as coral/pink instead of red. */
--cost-red-bar-on-dark: #E54B3E;
}
.is-cost, .is-cost i,
#marketing-view #ml-interest-label,
#marketing-view .xs-interest,
#marketing-view .ml-multiple--heavy,
#marketing-view .ml-price-was s,
#marketing-view .mn-cons-card .is-cost { color: var(--cost-red) !important; }
/* The lightened red is for text sitting ON a dark surface. Which
elements those are is NOT the same as "the dark theme is on": the
hero's Loan Lab card keeps a near-white background in both themes.
Measured there, #F0776B on rgb(245,250,247) is 2.63:1 — under the 4.5
minimum and genuinely hard to read. The same red on the explainer and
membership cards, which DO go dark, measures 5.42:1.
So the hero is excluded and keeps the deep red in both themes. */
[data-theme="dark"] .is-cost,
[data-theme="dark"] .is-cost i,
[data-theme="dark"] #marketing-view .xs-interest,
[data-theme="dark"] #marketing-view .ml-multiple--heavy,
[data-theme="dark"] #marketing-view .ml-price-was s { color: var(--cost-red-on-dark) !important; }
/* THE PREMISE ABOVE EXPIRED. That exclusion was right when it was
written — the Loan Lab card really did keep a near-white background in
both themes, and the lightened red would have been unreadable on it.
The card was made theme-aware at some point after, and nobody came
back to this rule. Measured 25 Oct 2026:
light .ml-demo rgb(255,255,255)
dark .ml-demo rgb(18,59,48)
So in dark the deep red was sitting on a dark green ground at 1.90:1 —
the worst reading on the page — purely because of a comment that had
stopped being true. The card now takes the on-dark red like every
other dark surface, and the exclusion is gone.
It lands at 4.46:1, which is four hundredths under the 4.5 that 10px
text owes. That last sliver needs a slightly lighter --cost-red-on-dark,
and a new red is a palette decision, so it is left for Nakul rather
than taken here. 1.90 to 4.46 is the part that was mine to fix. */
[data-theme="dark"] #marketing-view #ml-interest-label,
[data-theme="dark"] #marketing-view .ml-demo .is-cost { color: var(--cost-red-on-dark) !important; }
#marketing-view #ml-interest-label,
#marketing-view .xs-interest { font-weight: 700; }
/* ── the repayment bar ────────────────────────────────────────────────────
This looked black, and the reason is worth recording. The markup is
and the script only ever sets the FIRST span's width. The second is
left at 0, so the interest portion of the bar is not a span at all —
it is the track showing through. Colouring span:last-child therefore
did nothing, and the dark track I had set (#3A201D) read as black.
The track IS the interest colour. Both are set so it holds whichever
way the markup is driven later. */
/* ── CORRECTED 24 Oct 2026 ────────────────────────────────────────────────
Nakul: "green line ke upar red line bhi upar se chhoti si show ho rahi
hai." He was seeing the track.
The note above says the track IS the interest colour, and that was the
mistake. It makes the green segment an overlay floating on a red ground,
and then ANY seam shows red: the 4px border-radius leaves red in the
corner notches, and a fractional layout width leaves a red hairline
along an edge. Measured on the live site, the interest span was
0px wide — nothing gave it a width — so every red pixel on screen was
the track showing through, which is exactly what he spotted.
Now the track carries no colour at all and the two SPANS carry the two
colours, the interest one flexing into whatever the principal leaves.
There is no ground left to peek through, in either theme. */
#marketing-view .ml-demo .ml-cost-bar,
#marketing-view .ml-cost-bar,
[data-theme="dark"] #marketing-view .ml-demo .ml-cost-bar,
[data-theme="dark"] #marketing-view .ml-cost-bar { background: transparent; }
#marketing-view .ml-demo .ml-cost-bar span:first-child,
#marketing-view .ml-cost-bar span:first-child { background: #087443; flex: 0 0 auto; }
/* flex:1 is the half that was missing. Without it this span was 0px and
the bar only looked right because the track behind it was red. */
#marketing-view .ml-demo .ml-cost-bar span:last-child,
#marketing-view .ml-cost-bar span:last-child,
[data-theme="dark"] #marketing-view .ml-demo .ml-cost-bar span:last-child,
[data-theme="dark"] #marketing-view .ml-cost-bar span:last-child {
background: var(--cost-red); flex: 1 1 auto; min-width: 0;
}
/* A hairline of the card's own colour where they meet, so the join reads
as two measured amounts rather than one bar that changed its mind. */
#marketing-view .ml-cost-bar span:last-child { box-shadow: inset 2px 0 0 var(--mo-surface, #fff); }
[data-theme="dark"] #marketing-view .ml-cost-bar span:last-child { box-shadow: inset 2px 0 0 #17281f; }
/* ── 3. A reveal you can see ──────────────────────────────────────────────
The old one went from opacity .6 and 28px of travel. Starting at .6 means
the section is already two-thirds visible before anything moves, which is
why it read as "nothing is happening".
Starting at 0 is only safe because `.motion-section` is added by
scroll-stories.js and never written in the HTML — so with scripting off,
or if the observer never runs, the class is absent and every section
stays at its normal full opacity. Nothing can be hidden by a script that
did not run. */
#marketing-view .motion-section { opacity: 0; translate: 0 44px; }
#marketing-view .motion-section.motion-arrived {
animation: moneyed-arrive .9s cubic-bezier(.16, .84, .28, 1) both;
}
@keyframes moneyed-arrive {
from { opacity: 0; translate: 0 44px; }
to { opacity: 1; translate: 0 0; }
}
/* Children arrive just behind their section, so a card grid lands as a
sequence rather than a slab. Six steps is enough to read as a cascade
without the last one feeling late. */
#marketing-view .motion-section.motion-arrived > * > *:nth-child(-n+6) {
animation: moneyed-arrive .8s cubic-bezier(.16, .84, .28, 1) both;
}
#marketing-view .motion-section.motion-arrived > * > *:nth-child(1) { animation-delay: .06s; }
#marketing-view .motion-section.motion-arrived > * > *:nth-child(2) { animation-delay: .12s; }
#marketing-view .motion-section.motion-arrived > * > *:nth-child(3) { animation-delay: .18s; }
#marketing-view .motion-section.motion-arrived > * > *:nth-child(4) { animation-delay: .24s; }
#marketing-view .motion-section.motion-arrived > * > *:nth-child(5) { animation-delay: .30s; }
#marketing-view .motion-section.motion-arrived > * > *:nth-child(6) { animation-delay: .36s; }
/* ── 4. Reduced motion: reduce, do not remove ─────────────────────────────
Nothing here may leave content invisible. Every section is forced back to
full opacity and no transform; motion-lite.js then adds a plain fade as
each block arrives, which carries no movement and so is safe for anyone
who asked for less of it. */
@media (prefers-reduced-motion: reduce) {
/* Force every section back to full opacity and no movement — EXCEPT the
ones motion-lite.js has taken over.
That exception is the whole fix. Without :not(.ml-fade) this rule's
!important outranked `html.motion-lite .ml-fade:not(.ml-faded)
{ opacity:.25 }`, so the gentle cross-fade written specifically for
readers with Reduce Motion switched on never ran on the eleven
sections it was written for. Those readers got a page with no reveal
of any kind: load it, and everything is simply already there.
Excluding .ml-fade is safe for the same reason the class exists — it
is added by motion-lite.js and never written in the HTML, so with
scripting off the exception matches nothing and the force-visible
rule still covers everything. */
#marketing-view .motion-section:not(.ml-fade),
#marketing-view .motion-section.motion-arrived:not(.ml-fade),
#marketing-view .motion-section.motion-arrived > * > * {
opacity: 1 !important;
translate: none !important;
animation: none !important;
}
#marketing-view .motion-section.ml-fade {
translate: none !important;
animation: none !important;
}
/* A cross-fade carries no movement, so it is the one thing that stays
when a reader has asked for less of it. Reduce is not remove. */
html.motion-lite .ml-fade { transition: opacity .55s ease; }
html.motion-lite .ml-fade:not(.ml-faded) { opacity: .28 !important; }
html.motion-lite .ml-fade.ml-faded { opacity: 1 !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
THE COST RED, APPLIED TO THE BARS AND THE FILM
The text was unified earlier; the graphics were not. These were still
painting cost in orange from three separate tokens:
--xs-warn #B4541B / #E8A06A the explainer's fee bite and the
"real rate" comparison bar
#B4530A the consolidation interest bar
--cons-warn #8A4208 / #F0A64B consolidation accents
Orange is the colour this site uses for CAUTION. Using it for money the
borrower hands over says the wrong thing, and it meant the same quantity
— interest — was red in the legend and orange in the bar directly below
it. Amber survives only where it genuinely means "be careful".
Two values, one identity: the deep red on light surfaces, the lightened
one on dark. A bar is a graphical object, so it needs 3:1 against its
background to be distinguishable at all — #B3261E on the film's dark
green is about 1.8:1 and would read as a black gap.
═══════════════════════════════════════════════════════════════════════════ */
/* The Four Pillars film — a dark stage throughout. */
/* The film now derives --mf-cost / --mf-cost-bar from the tokens above, so
nothing here has to reach into it. These stay only as a backstop, and
they must name the SAME tokens the film does — an older version of this
block forced the text red onto the bars and also missed .mf-ledger--debt
entirely, which is why the three bars in the film were two different
reds. */
#four-pillars .mf-cost,
.mo-film .mf-cost { color: var(--cost-red-on-dark) !important; }
#four-pillars .mf-bar-i,
#four-pillars .mf-rate--4,
#four-pillars .mf-ledger--debt,
.mo-film .mf-bar-i,
.mo-film .mf-rate--4,
.mo-film .mf-ledger--debt { fill: var(--cost-red-bar-on-dark) !important; }
/* The five-step explainer: the fee bitten out of the principal, and the
second bar in "the clarity" — both are cost, not caution. */
.xs-bite, .xs-cmp--b { fill: var(--cost-red) !important; }
[data-theme="dark"] .xs-bite,
[data-theme="dark"] .xs-cmp--b { fill: var(--cost-red-on-dark) !important; }
/* The consolidation ledger's interest bar. */
.mn-cons-bar u { background: var(--cost-red) !important; }
[data-theme="dark"] .mn-cons-bar u { background: var(--cost-red-on-dark) !important; }
.mn-cons-card .is-cost,
.mn-cons-rate small { color: inherit; }
/* ═══════════════════════════════════════════════════════════════════
GREEN THAT HAS TO BE READ — 25 Oct 2026
═══════════════════════════════════════════════════════════════════
#18C979 is the IDENTITY green: a fill, a border, an icon, a bar. As
a WORD on a light ground it measures 2.17:1 against the 4.5 that
body text owes — the lowest readings anywhere on the homepage, and
#087443 on the hero's own tint is only 3.57.
ONLY THE SELECTORS THE SWEEP PROVED ARE FAILING ARE NAMED HERE.
121 rules across these stylesheets paint this green as text; the
great majority sit on dark surfaces, where it is exactly right and
where swapping it would break them. tests/contrast-sweep.html was
asked which ones actually fail, and this is that list, nothing more.
--brand-accent is the token built for a green word and it is
theme-aware — #1A7A4A on light, #2FA86B on dark — so each of these
reads on whichever ground it ends up on. Identity untouched. */
#marketing-view .hero__cred .hc-marks li,
#marketing-view .ml-membership .ml-free,
#marketing-view .lstrip__link,
.lstrip__link,
.tm-num, .tm-plus,
.lrt-apply-btn,
.lrt-verified { color: var(--brand-accent, #1A7A4A); }
/* ═══════════════════════════════════════════════════════════════════
THE WELCOME — role-route.js
═══════════════════════════════════════════════════════════════════
The moment between "signed in" and the dashboard. It exists because
the jump used to be a jump: the page simply became a different page.
Deliberately quiet. Nakul's standing rule on this site is that an
arrival must feel seamless and nothing may happen dramatically, so
this is a scrim and one card that rises a few pixels — no spin, no
bounce, no full-screen wipe. It is on screen for 1.15s and its only
job is to say the login worked and name where you are going, so the
redirect does not read as the site losing your place.
Its own colours are fixed rather than tokened on purpose: it is drawn
over whatever page you were on, in either theme, a frame before that
page is replaced. A token read at that instant belongs to the page
being left, not the one arriving. */
.mrr{
position:fixed; inset:0; z-index:9999;
display:grid; place-items:center;
background:rgba(8,28,20,.72);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
opacity:0; transition:opacity .28s ease;
}
.mrr.is-on{ opacity:1; }
.mrr__card{
display:flex; flex-direction:column; align-items:center; gap:10px;
padding:30px 38px; border-radius:18px;
background:#0d1f16; border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 80px rgba(0,0,0,.45);
transform:translateY(10px); transition:transform .38s cubic-bezier(.16,.84,.3,1);
}
.mrr.is-on .mrr__card{ transform:none; }
.mrr__mark{
width:40px; height:40px; border-radius:50%;
display:grid; place-items:center;
background:rgba(31,164,99,.18); color:#5fd49a;
}
.mrr__mark svg{ width:20px; height:20px; fill:none; stroke:currentColor;
stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mrr__t{ margin:0; font:800 17px/1.2 Inter,system-ui,sans-serif; color:#fff;
letter-spacing:-.2px; }
.mrr__s{ margin:0; font:500 12.5px/1.4 Inter,system-ui,sans-serif;
color:rgba(255,255,255,.72); display:flex; align-items:center; gap:3px; }
/* Three dots that breathe, so a slow network reads as working rather
than stuck. They carry no meaning and are hidden from the reader. */
.mrr__s i{ width:3px; height:3px; border-radius:50%; background:currentColor;
display:inline-block; margin-left:1px; animation:mrr-dot 1s infinite ease-in-out; }
.mrr__s i:nth-child(2){ animation-delay:.15s; }
.mrr__s i:nth-child(3){ animation-delay:.3s; }
@keyframes mrr-dot{ 0%,60%,100%{opacity:.25;} 30%{opacity:1;} }
@media (prefers-reduced-motion: reduce){
.mrr,.mrr__card{ transition:none; }
.mrr__s i{ animation:none; opacity:.6; }
}
/* ── FD CALCULATOR ───────────────────────────────────────────────────
Only what the suite does not already give it. Everything structural —
.glass-card, .grid-2, .form-group, .form-input, .btn — is the suite's
own, so this tool looks like the six beside it rather than a guest. */
#fd-calc-pane .fd-big{
margin:0 0 14px; font:900 clamp(28px,5vw,40px)/1 Inter,system-ui,sans-serif;
letter-spacing:-1px; color:var(--brand-accent, #1A7A4A);
}
#fd-calc-pane .fd-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px;
padding:14px 0; border-top:1px solid var(--border-glass,rgba(8,92,58,.12));
border-bottom:1px solid var(--border-glass,rgba(8,92,58,.12));
}
#fd-calc-pane .fd-grid span{
display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
color:var(--text-muted); margin-bottom:3px;
}
#fd-calc-pane .fd-grid b{ font-size:17px; font-weight:800; color:var(--text-color); }
#fd-calc-pane .fd-tds{
margin:14px 0 0; font-size:12.5px; line-height:1.65; color:var(--text-muted);
}
#fd-calc-pane .fd-tds b{ color:var(--text-color); }
#fd-calc-pane .fd-check{
display:block; margin-top:4px; font-size:13px; color:var(--text-color); cursor:pointer;
}
#fd-calc-pane .fd-check small{
display:block; margin-top:2px; font-size:11.5px; color:var(--text-muted);
}
#fd-calc-pane .fd-table{ width:100%; border-collapse:collapse; font-size:13px; }
#fd-calc-pane .fd-table th{
text-align:left; padding:8px 10px; font-size:11px; letter-spacing:.05em;
text-transform:uppercase; color:var(--text-muted);
border-bottom:1px solid var(--border-glass,rgba(8,92,58,.12));
}
#fd-calc-pane .fd-table td{
padding:9px 10px; color:var(--text-color);
border-bottom:1px solid var(--border-glass,rgba(8,92,58,.08));
font-variant-numeric:tabular-nums;
}
/* A refusal and a caution are different things and must not look alike:
one stops the sum, the other is worth reading before trusting it. */
#fd-calc-pane .fd-prob{
margin:10px 0 0; padding:9px 12px; border-radius:9px; font-size:12.5px; line-height:1.6;
background:rgba(179,38,30,.08); color:var(--cost-red, #B3261E);
border:1px solid rgba(179,38,30,.2);
}
#fd-calc-pane .fd-prob.is-note{
background:rgba(243,167,18,.1); color:#8A5A00; border-color:rgba(243,167,18,.28);
}
[data-theme="dark"] #fd-calc-pane .fd-prob{ color:var(--cost-red-on-dark,#F0776B); }
[data-theme="dark"] #fd-calc-pane .fd-prob.is-note{ color:#F3C778; }
/* ── TRACK · INVEST · BORROW ─────────────────────────────────────────
Three verbs across the top of the dashboard. The pills are ours, not
the blue ones they came from: --brand-accent for the word, the deep
green for the one that is on. Tokens throughout, so the dark theme is
these same rules reading different numbers. */
.mn-tib{ margin:28px 0 8px; }
.mn-tib__head h2{
margin:4px 0 0; font:800 clamp(1.25rem,3vw,1.7rem)/1.2 Inter,system-ui,sans-serif;
letter-spacing:-.4px; color:var(--text-color);
}
.mn-tib__pills{
display:inline-flex; gap:4px; margin:16px 0 18px; padding:4px;
border-radius:999px; background:var(--bg-glass,rgba(8,92,58,.06));
border:1px solid var(--border-glass,rgba(8,92,58,.12));
}
.mn-tib__pill{
font:700 13px/1 Inter,system-ui,sans-serif; cursor:pointer;
padding:9px 18px; border-radius:999px; border:0; background:transparent;
color:var(--text-muted); transition:background .22s ease, color .22s ease;
}
.mn-tib__pill:hover{ color:var(--text-color); }
.mn-tib__pill.is-on{ background:var(--deep-green,#085C3A); color:#fff; }
.mn-tib__pane{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; }
.mn-tib__pane[hidden]{ display:none; } /* display:grid outranks [hidden] */
.mn-tib__pane.is-on{ animation:mn-tib-in .4s cubic-bezier(.16,.84,.3,1) both; }
@keyframes mn-tib-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.mn-tib__say h3{
margin:0 0 8px; font:800 20px/1.25 Inter,system-ui,sans-serif; color:var(--text-color);
}
.mn-tib__say p{ margin:0 0 14px; font-size:14px; line-height:1.7; color:var(--text-muted); max-width:56ch; }
.mn-tib__list{
list-style:none; margin:0 0 16px; padding:0;
display:grid; grid-template-columns:1fr 1fr; gap:7px 16px;
}
.mn-tib__list li{
position:relative; padding-left:20px; font-size:13px; line-height:1.5; color:var(--text-color);
}
.mn-tib__list li::before{
content:''; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:50%;
background:color-mix(in srgb, var(--brand-green,#18C979) 24%, transparent);
border:1.5px solid var(--brand-accent,#1A7A4A);
}
.mn-tib__card{
padding:20px 22px; border-radius:16px;
background:var(--card-bg,#fff); border:1px solid var(--border-glass,rgba(8,92,58,.12));
box-shadow:0 14px 40px rgba(8,92,58,.07);
}
/* The label is not decoration. Every figure in these cards is invented
for the illustration, and saying so once at the top is the difference
between a preview and a fake balance. */
.mn-tib__k{
margin:0 0 10px; font:800 10px/1 Inter,system-ui,sans-serif; letter-spacing:.12em;
text-transform:uppercase; color:var(--text-muted);
}
.mn-tib__big{
margin:0 0 14px; font:900 clamp(26px,4.4vw,34px)/1 Inter,system-ui,sans-serif;
letter-spacing:-1px; color:var(--brand-accent,#1A7A4A);
}
.mn-tib__big span{
display:block; margin-top:7px; font:500 12px/1.5 Inter,system-ui,sans-serif;
letter-spacing:0; color:var(--text-muted);
}
.mn-tib__rows{ border-top:1px solid var(--border-glass,rgba(8,92,58,.12)); }
.mn-tib__rows > div{
display:flex; justify-content:space-between; align-items:baseline; gap:12px;
padding:9px 0; border-bottom:1px solid var(--border-glass,rgba(8,92,58,.08));
font-size:13px;
}
.mn-tib__rows span{ color:var(--text-muted); }
.mn-tib__rows b{ color:var(--text-color); font-weight:800; font-variant-numeric:tabular-nums; }
.mn-tib__rows b.is-bad{ color:var(--cost-red,#B3261E); }
[data-theme="dark"] .mn-tib__rows b.is-bad{ color:var(--cost-red-on-dark,#F0776B); }
.mn-tib__foot{ margin:12px 0 0; font-size:11.5px; line-height:1.6; color:var(--text-muted); }
/* The honest paragraph carries as much weight as the three panes, so it
is set as a statement rather than tucked away as small print. */
.mn-tib__honest{
margin:20px 0 0; padding:14px 16px; border-radius:12px; font-size:12.5px; line-height:1.7;
color:var(--text-muted);
background:var(--bg-glass,rgba(8,92,58,.05));
border-left:3px solid var(--brand-accent,#1A7A4A);
}
.mn-tib__honest b{ color:var(--text-color); }
@media(max-width:860px){
.mn-tib__pane{ grid-template-columns:1fr; }
.mn-tib__list{ grid-template-columns:1fr; }
.mn-tib__pills{ display:flex; width:100%; }
.mn-tib__pill{ flex:1; padding:9px 10px; }
}
@media (prefers-reduced-motion: reduce){
.mn-tib__pane.is-on{ animation:none; }
.mn-tib__pill{ transition:none; }
}
/* ── THE UPCOMING BLOCK ──────────────────────────────────────────────
Nakul, 25 Oct 2026: build the blocked features anyway, and put
"upcoming, licence will be updated" on top — so the work shows and
the reader learns what is coming.
The whole design problem here is ONE thing: this must never be
mistaken for a feature that works. A badge alone does not do that —
people read figures before they read labels. So it is also:
· dashed, not solid. Nothing else on the dashboard is dashed, and
an unfinished edge reads as unfinished before any word is read.
· set on the page's own wash, not on a card. It is not a card.
· its figures are deliberately NOT in the big display size the live
cards use, so the eye never ranks them as the answer.
· no green "synced" dot, no "Connect my bank" button, nothing to
press. A control that cannot work is worse than none.
The licence is NAMED in each one — Account Aggregator, AMFI ARN,
SEBI RIA, a lender partner. Naming it is the point: it says we know
which rule applies, which is itself the thing a reader is judging. */
.mn-tib__soon{
margin-top:16px; padding:16px 18px; border-radius:14px;
border:1.5px dashed var(--border-glass,rgba(8,92,58,.3));
background:transparent;
}
.mn-tib__soonbadge{
display:inline-block; margin:0 0 8px; padding:4px 10px; border-radius:999px;
font:800 9.5px/1.4 Inter,system-ui,sans-serif; letter-spacing:.12em;
color:#8A5A00; background:rgba(243,167,18,.12); border:1px solid rgba(243,167,18,.3);
}
[data-theme="dark"] .mn-tib__soonbadge{ color:#F3C778; background:rgba(243,167,18,.14); }
.mn-tib__soon h4{
margin:0 0 6px; font:800 14.5px/1.35 Inter,system-ui,sans-serif; color:var(--text-color);
}
.mn-tib__soonwhy{
margin:0 0 12px; font-size:12.5px; line-height:1.65; color:var(--text-muted);
}
.mn-tib__soonwhy b{ color:var(--text-color); font-weight:700; }
.mn-tib__soon ul{
list-style:none; margin:0 0 12px; padding:0;
display:grid; grid-template-columns:1fr 1fr; gap:5px 14px;
}
.mn-tib__soon li{
position:relative; padding-left:16px; font-size:12px; line-height:1.5; color:var(--text-muted);
}
.mn-tib__soon li::before{
content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%;
border:1.5px dashed var(--text-muted); opacity:.7;
}
/* Half the size of a live figure, on purpose. */
.mn-tib__soonrows{ border-top:1px dashed var(--border-glass,rgba(8,92,58,.25)); }
.mn-tib__soonrows > div{
display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:12.5px;
border-bottom:1px dashed var(--border-glass,rgba(8,92,58,.16));
}
.mn-tib__soonrows span{ color:var(--text-muted); }
.mn-tib__soonrows b{ color:var(--text-muted); font-weight:700; font-variant-numeric:tabular-nums; }
.mn-tib__soonfoot{
margin:10px 0 0; font-size:11px; line-height:1.6; color:var(--text-muted); opacity:.85;
}
@media(max-width:860px){ .mn-tib__soon ul{ grid-template-columns:1fr; } }
/* ── TRACK · READ MY OWN STATEMENT ─────────────────────────────────────
The control that turns the Track card's example into the member's own
figures. It sits between the rows and the foot, inside .mn-tib__card.
NO WHITE-ON-GREEN HERE. The brand green is an identity colour and
reads 2.17:1 as a WORD on white, so the button is a tinted surface
with --brand-accent ink (#1A7A4A light, #2FA86B dark) rather than
another white label on a green fill. Same reason .is-good below takes
the accent and never --brand-green. */
.mn-stmt{
margin:14px 0 0; padding:14px 0 0;
border-top:1px solid var(--border-glass,rgba(8,92,58,.12));
}
.mn-stmt__act{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mn-stmt__pick{
display:inline-flex; align-items:center; gap:8px;
padding:10px 15px; border-radius:11px; cursor:pointer;
font:inherit; font-size:13.5px; font-weight:700;
color:var(--brand-accent,#1A7A4A);
background:rgba(8,92,58,.07);
/* .62, not the .22 this was first drawn with. Measured against the white
card: .22 is 1.44:1, which is a tint and not an edge — a control has to
carry 3:1 on its own boundary or it is only a word on a page. .62 is
3.22. The tint stays faint on purpose; the label reads 4.79 on it. */
border:1px solid rgba(8,92,58,.62);
transition:background .18s ease, border-color .18s ease;
}
.mn-stmt__pick:hover:not(:disabled){ background:rgba(8,92,58,.12); border-color:rgba(8,92,58,.78); }
.mn-stmt__pick:disabled{ opacity:.55; cursor:progress; }
.mn-stmt__pick svg{
width:17px; height:17px; flex:0 0 auto;
fill:none; stroke:currentColor; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round;
}
.mn-stmt__clear{
padding:10px 13px; border-radius:11px; cursor:pointer;
font:inherit; font-size:12.5px; font-weight:600;
color:var(--text-muted); background:none;
border:1px solid var(--border-glass,rgba(8,92,58,.12));
}
.mn-stmt__clear:hover{ color:var(--text-color); }
.mn-stmt__note{
margin:9px 0 0; font-size:11.5px; line-height:1.6; color:var(--text-muted);
}
.mn-stmt__note.is-ok{ color:var(--brand-accent,#1A7A4A); font-weight:600; }
.mn-stmt__note.is-work{ color:var(--text-muted); font-weight:600; }
.mn-stmt__note.is-warn{ color:var(--cost-red,#B3261E); font-weight:600; }
[data-theme="dark"] .mn-stmt__note.is-warn{ color:var(--cost-red-on-dark,#F0776B); }
/* The locked-statement box. Almost every Indian e-statement is locked, so
this is the common path and not an edge case. */
.mn-stmt__pwd{
display:flex; gap:12px; margin:12px 0 0; padding:13px 14px; border-radius:12px;
background:rgba(8,92,58,.05); border:1px solid var(--border-glass,rgba(8,92,58,.12));
}
.mn-stmt__pwd[hidden]{ display:none; } /* [hidden] loses to display:flex */
.mn-stmt__pwd > svg{
width:20px; height:20px; flex:0 0 auto; margin-top:2px;
fill:none; stroke:var(--brand-accent,#1A7A4A); stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round;
}
.mn-stmt__pwd h4{ margin:0 0 4px; font-size:13px; font-weight:800; color:var(--text-color); }
.mn-stmt__pwd p{ margin:0; font-size:11.5px; line-height:1.6; color:var(--text-muted); }
.mn-stmt__pwd form{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.mn-stmt__pwd input{
flex:1 1 170px; min-width:0;
padding:9px 12px; border-radius:10px; font:inherit; font-size:13px;
color:var(--text-color); background:var(--card-bg,#fff);
border:1px solid var(--border-glass,rgba(8,92,58,.18));
}
.mn-stmt__pwdact{ display:flex; gap:8px; flex:0 0 auto; }
.mn-stmt__pwdact .btn{ padding:9px 15px; font-size:13px; }
.mn-stmt__pwderr{ margin:8px 0 0 !important; color:var(--cost-red,#B3261E) !important; font-weight:600; }
.mn-stmt__pwderr[hidden]{ display:none; }
[data-theme="dark"] .mn-stmt__pwderr{ color:var(--cost-red-on-dark,#F0776B) !important; }
/* "clean" — a finding, and the only good-news word on this card. */
.mn-tib__rows b.is-good{ color:var(--brand-accent,#1A7A4A); }
@media(max-width:560px){
.mn-stmt__pick,.mn-stmt__clear{ width:100%; justify-content:center; }
.mn-stmt__pwdact{ width:100%; }
.mn-stmt__pwdact .btn{ flex:1 1 auto; }
}
/* THE DARK CARD ATE THE BUTTON. Measured, not guessed: the tint above is
the brand green at 7% and its border the same green at 22%, which on the
light card is a soft outlined button and on the DARK card (#12221B) comes
out at 1.04:1 and 1.14:1 — a green word floating with no button around
it. A control's own boundary wants 3:1, so the dark theme gets the dark
ink's hue (#2FA86B, the one tokens.css already uses there) at an alpha
that actually reaches it. 0.65 is where it crosses 3; 0.68 is 3.26. The
light rule above was short of 3 for the same reason and was raised too.
A WARNING ABOUT MEASURING THIS. .mn-stmt__pick transitions its border
over .18s, so a reading taken just after flipping data-theme comes back
INTERPOLATED — light first reported 2.09, which was the dark border
part-way to the light one. Kill the transition before you measure, or
the number you write down is of a colour that exists for a tenth of a
second and never at rest.
The hairlines are left alone on purpose. .mn-stmt's rule, the Clear
button and the password panel's edge all take --border-glass, which
already flips to rgba(255,255,255,.08) in dark — the same edge every
card on this site draws. A divider at the house weight is right; an
interactive control at the house weight is not. */
[data-theme="dark"] .mn-stmt__pick{
background:rgba(47,168,107,.13);
border-color:rgba(47,168,107,.68);
}
[data-theme="dark"] .mn-stmt__pick:hover:not(:disabled){
background:rgba(47,168,107,.21);
border-color:rgba(47,168,107,.86);
}
/* A 5%-green wash is nothing on a dark ground (1.03:1). Dark panels are
raised with light, not with more of the ground colour. */
[data-theme="dark"] .mn-stmt__pwd{ background:rgba(255,255,255,.04); }
/* Matching #elig-company and #fd-amount, which carry their own faint fill in
dark — on this site a field reads as a field by its fill, because the
hairline alone does not. */
[data-theme="dark"] .mn-stmt__pwd input{ background:rgba(255,255,255,.05); }