/* Homepage presentation only. Existing app shell and product handlers stay intact. */
#marketing-view {
  --refresh-bg:#faf9f5; --refresh-ink:#12382c; --refresh-muted:#58665f;
  --refresh-line:#dce4dd; --refresh-surface:#fff; --refresh-green:#087f50;
  background:var(--refresh-bg); color:var(--refresh-ink); font-family:var(--font-sans);
}
[data-theme="dark"] #marketing-view {
  --refresh-bg:#101c17; --refresh-ink:#f2f6f0; --refresh-muted:#b9c8bf;
  --refresh-line:#354a3d; --refresh-surface:#192a21; --refresh-green:#7be0aa;
}
#marketing-view .container {max-width:1200px;width:100%;padding-inline:32px;margin-inline:auto;}
#marketing-view .mn-refresh-header {max-width:1200px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
#marketing-view .mn-refresh-brand {display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--refresh-ink);}
#marketing-view .mn-refresh-header nav {display:flex;gap:28px;font-size:14px;font-weight:600;}
#marketing-view .mn-refresh-header-actions {display:flex;align-items:center;gap:18px;font-size:14px;font-weight:700;}
#marketing-view .mn-refresh-header-actions>a {display:flex;align-items:center;gap:10px;min-height:44px;}
#marketing-view .theme-toggle {position:static;min-width:44px;min-height:44px;color:var(--refresh-ink);border:1px solid var(--refresh-line);background:var(--refresh-surface);box-shadow:none;}
#marketing-view a:focus-visible,#marketing-view button:focus-visible {outline:3px solid var(--refresh-green);outline-offset:5px;}
#marketing-view .hero {padding:64px 0 72px;min-height:0;background:var(--refresh-bg);}
#marketing-view .hero__inner {display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center;text-align:left;}
#marketing-view .hero__content {max-width:none;min-width:0;}
#marketing-view .mn-refresh-eyebrow {font:700 11px/1.6 var(--font-sans);letter-spacing:2px;color:var(--refresh-green);margin:0 0 20px;}
#marketing-view .hero__heading {font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.8vw,68px);font-weight:400;letter-spacing:-2.5px;line-height:1.06;margin:0 0 24px;color:var(--refresh-ink);}
#marketing-view .hero__heading .text-green {color:var(--refresh-green);background:none;-webkit-text-fill-color:currentColor;animation:none;}
#marketing-view .hero__desc {font-size:17px!important;line-height:1.7;color:var(--refresh-muted);max-width:490px;margin-bottom:28px;}
#marketing-view .hero__cta {gap:12px;justify-content:flex-start;margin-bottom:18px;}
#marketing-view .hero__cta .btn {padding:15px 20px;font-size:14px;border-radius:10px;min-height:50px;box-shadow:none;transition:transform .2s,background-color .2s;}
#marketing-view .hero__cta .btn--primary {background:#087f50;color:#fff;border:1px solid #087f50;}
#marketing-view .hero__cta .btn--outline {background:transparent;color:var(--refresh-ink);border:1px solid var(--refresh-line);}
#marketing-view .hero__cta .btn:hover {transform:translateY(-2px);}
#marketing-view .hero__microcopy {font-size:12px;line-height:1.7;color:var(--refresh-muted);}
#marketing-view .hero__trust {margin-top:14px;}
#marketing-view .hero__trust-text {font-size:12px;color:var(--refresh-muted);}
#marketing-view .hero__trust-text strong {color:var(--refresh-green);}
#marketing-view .mn-loan-panel {min-width:0;background:var(--refresh-surface);border:1px solid var(--refresh-line);border-radius:20px;padding:32px;box-shadow:0 18px 45px rgba(15,50,32,.06);animation:mn-panel-enter .7s ease both;}
#marketing-view .mn-panel-heading {display:flex;justify-content:space-between;align-items:center;color:var(--refresh-green);}
#marketing-view .mn-panel-heading .mn-refresh-eyebrow {margin:0;}
#marketing-view .mn-panel-heading>i {font-size:24px;}
#marketing-view .mn-loan-panel h2 {font:400 44px/1.1 Georgia,serif;letter-spacing:-1.5px;margin:24px 0 12px;color:var(--refresh-ink);}
#marketing-view .mn-loan-panel>p {font-size:14px;color:var(--refresh-muted);line-height:1.6;}
#marketing-view .mn-loan-factors {margin:25px 0;}
#marketing-view .mn-loan-factors>div {padding:17px 0;border-top:1px solid var(--refresh-line);}
#marketing-view .mn-loan-factors dt {display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;}
#marketing-view .mn-loan-factors dt i {width:20px;color:var(--refresh-green);}
#marketing-view .mn-loan-factors dd {margin:6px 0 0 32px;font-size:12px;color:var(--refresh-muted);}
#marketing-view .mn-loan-panel>a {display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-size:14px;font-weight:700;color:var(--refresh-green);}
#marketing-view .mn-loan-panel>small {display:block;font-size:11px;line-height:1.6;color:var(--refresh-muted);margin-top:10px;}
#marketing-view .mn-start-section {padding-top:48px;padding-bottom:64px;border-top:1px solid var(--refresh-line);}
#marketing-view .mn-start-section h2 {font:400 clamp(28px,3.2vw,42px)/1.2 Georgia,serif;letter-spacing:-1px;margin:0 0 32px;color:var(--refresh-ink);}
#marketing-view .mn-start-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
#marketing-view .mn-start-grid>a {display:flex;flex-direction:column;align-items:flex-start;padding:8px 24px 8px 0;border-right:1px solid var(--refresh-line);}
#marketing-view .mn-start-grid>a:last-child {border:0;}
#marketing-view .mn-start-grid>a>i {font-size:26px;color:var(--refresh-green);margin-bottom:20px;}
#marketing-view .mn-start-grid h3 {font-size:18px;line-height:1.5;margin:0 0 10px;color:var(--refresh-ink);}
#marketing-view .mn-start-grid p {font-size:14px;line-height:1.7;color:var(--refresh-muted);margin:0 0 20px;}
#marketing-view .mn-start-grid a>span {margin-top:auto;font-size:13px;font-weight:700;display:flex;align-items:center;gap:16px;color:var(--refresh-green);min-height:36px;}
#marketing-view .mn-start-grid a:hover h3 {text-decoration:underline;text-underline-offset:5px;}
#marketing-view .mn-founder-section {background:#0c3527;color:#fff;scroll-margin-top:24px;}
#marketing-view .mn-founder-inner {display:grid;grid-template-columns:1.4fr 1fr;gap:80px;padding-block:64px;align-items:center;}
#marketing-view .mn-founder-section .mn-refresh-eyebrow {color:#a2e9bc;}
#marketing-view .mn-founder-section h2 {font:400 clamp(32px,4vw,52px)/1.12 Georgia,serif;letter-spacing:-1px;color:#fff;margin:0 0 24px;}
#marketing-view .mn-founder-section h2 span {color:#a2e9bc;}
#marketing-view .mn-founder-section p:not(.mn-refresh-eyebrow) {font-size:16px;line-height:1.7;color:#dae7df;max-width:470px;}
#marketing-view .mn-founder-section a {margin-top:25px;display:inline-flex;align-items:center;gap:16px;font-size:16px;font-weight:700;color:#fff;min-height:44px;}
#marketing-view .mn-founder-section a span {font-size:12px;font-weight:400;color:#b8d2c3;}
#marketing-view .mn-decision-steps {list-style:none;margin:0;padding:0;display:grid;gap:0;}
#marketing-view .mn-decision-steps li {display:flex;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid #446253;}
#marketing-view .mn-decision-steps li:last-child {border:0;}
#marketing-view .mn-decision-steps i {font-size:24px;width:28px;color:#a2e9bc;}
#marketing-view .mn-decision-steps span {font-size:18px;font-weight:600;}
#marketing-view .mn-decision-steps small {display:block;font-size:13px;font-weight:400;color:#b8d2c3;margin-top:6px;}
@keyframes mn-panel-enter {from {opacity:0;transform:translateY(14px);} to {opacity:1;transform:translateY(0);}}
@media(max-width:900px) {
 #marketing-view .hero__inner {gap:30px;}
 #marketing-view .mn-refresh-header nav {gap:16px;}
 #marketing-view .mn-refresh-header-actions>a {font-size:0;gap:0;}
 #marketing-view .mn-refresh-header-actions>a i {font-size:18px;}
 #marketing-view .mn-loan-panel {padding:24px;}
 #marketing-view .mn-founder-inner {gap:40px;}
}
@media(max-width:640px) {
 #marketing-view .container {padding-inline:22px;}
 #marketing-view .mn-refresh-header {padding:18px 22px;flex-wrap:wrap;gap:16px;}
 #marketing-view .mn-refresh-brand {font-size:24px;}
 #marketing-view .mn-refresh-header nav {order:3;width:100%;justify-content:space-between;border-top:1px solid var(--refresh-line);padding-top:10px;gap:8px;font-size:12px;}
 #marketing-view .mn-refresh-header nav a {padding-block:8px;}
 #marketing-view .mn-refresh-header-actions {gap:16px;}
 #marketing-view .hero {padding:32px 0 40px;}
 #marketing-view .hero__inner {grid-template-columns:1fr;gap:32px;text-align:left;}
 #marketing-view .hero__heading {font-size:46px;letter-spacing:-1.6px;}
 #marketing-view .hero__desc {font-size:16px!important;}
 #marketing-view .hero__cta {display:grid;grid-template-columns:1fr;width:100%;}
 #marketing-view .hero__cta .btn {justify-content:center;}
 #marketing-view .hero__trust {justify-content:flex-start;}
 #marketing-view .hero__trust-text {text-align:left;}
 #marketing-view .mn-loan-panel h2 {font-size:36px;}
 #marketing-view .mn-start-section {padding-block:36px;}
 #marketing-view .mn-start-grid {grid-template-columns:1fr;gap:0;}
 #marketing-view .mn-start-grid>a {border:0;border-bottom:1px solid var(--refresh-line);padding:22px 0;}
 #marketing-view .mn-start-grid>a>i {margin-bottom:12px;}
 #marketing-view .mn-start-grid p {margin-bottom:8px;}
 #marketing-view .mn-founder-inner {grid-template-columns:1fr;padding-block:40px;gap:20px;}
 #marketing-view .mn-founder-section a {flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce) {
 #marketing-view *,#marketing-view *::before,#marketing-view *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}
/* Override the legacy global .text-green utility for accessible hero contrast. */
#marketing-view .hero__heading .text-green {color:var(--refresh-green)!important;}

/* ─────────────────────────────────────────────────────────────────────────
   CONSOLIDATION LEDGER
   Three scenarios on one debt. The point of the layout is that the third
   card is the most attractive on the EMI line and the worst on the total,
   so the two figures are given equal weight and the interest share is drawn
   as a bar — the shape is what makes the trade-off read at a glance.
   ───────────────────────────────────────────────────────────────────────── */
.mn-cons{margin:0 auto 60px;max-width:1100px;}
.mn-cons-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  padding:0 4px 14px;border-bottom:1px solid var(--border-glass);margin-bottom:22px;}
.mn-cons-head span:first-child{font-size:13px;font-weight:800;color:var(--text-color);}
.mn-cons-head span:last-child{font-size:12px;color:var(--text-muted);}
.mn-cons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;}
.mn-cons-card{border:1px solid var(--border-glass);border-radius:18px;padding:22px;
  background:var(--card-bg);display:flex;flex-direction:column;gap:14px;}
.mn-cons-card--win{border-color:rgba(24,201,121,.45);box-shadow:0 10px 30px rgba(24,201,121,.10);}
.mn-cons-card--warn{border-color:rgba(214,138,10,.40);}
.mn-cons-tag{font-size:9.5px;font-weight:800;letter-spacing:1.1px;color:var(--text-muted);margin:0;}
.mn-cons-tag--win{color:#0E7C4A;}
.mn-cons-tag--warn{color:#B4530A;}
.mn-cons-rate{font-size:34px;font-weight:900;letter-spacing:-1px;color:var(--text-color);margin:0;line-height:1;}
.mn-cons-rate small{display:block;font-size:11px;font-weight:500;letter-spacing:0;
  color:var(--text-muted);margin-top:7px;}
.mn-cons-figs{display:flex;flex-direction:column;gap:12px;}
.mn-cons-figs>div{display:flex;flex-direction:column;gap:3px;}
.mn-cons-figs span{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);}
.mn-cons-figs strong{font-size:22px;font-weight:800;color:var(--text-color);
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-variant-numeric:tabular-nums;}
.mn-cons-figs em{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;}
.mn-cons-good{color:#0E7C4A;background:rgba(24,201,121,.13);}
.mn-cons-bad{color:var(--cost-red-auto, #B3261E);background:rgba(179,38,30,.11);}
.mn-cons-barlabel{font-size:11px;color:var(--text-muted);margin:2px 0 0;}
.mn-cons-barlabel b{color:var(--text-color);}
.mn-cons-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--border-glass);}
.mn-cons-bar i{width:var(--p);background:#18C979;}
.mn-cons-bar u{width:var(--p);background:#B4530A;text-decoration:none;}
.mn-cons-card--warn .mn-cons-bar u{background:var(--cost-red-bar-auto, #B3261E);}
.mn-cons-total{font-size:12px;font-weight:700;color:var(--text-color);margin:0;
  font-variant-numeric:tabular-nums;}
.mn-cons-verdict{font-size:12px;line-height:1.55;margin:0;padding:11px 13px;border-radius:11px;}
.mn-cons-verdict--good{color:#0E7C4A;background:rgba(24,201,121,.10);}
.mn-cons-verdict--bad{color:var(--cost-red-auto, #B3261E);background:rgba(179,38,30,.08);}
.mn-cons-foot{margin-top:26px;padding:22px;border-radius:18px;
  background:linear-gradient(135deg,#0a3d26,#0e5c38);color:#fff;}
.mn-cons-foot-main{font-size:clamp(15px,2.2vw,19px);font-weight:700;line-height:1.45;margin:0 0 10px;}
.mn-cons-foot-main b{color:#9ee6bf;}
.mn-cons-foot-note{font-size:11px;line-height:1.65;color:rgba(255,255,255,.66);margin:0 0 18px;}
.mn-cons-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.mn-cons-btn{display:inline-flex;align-items:center;gap:8px;background:#18C979;color:#06281b;
  font-weight:800;font-size:14px;padding:12px 24px;border-radius:12px;text-decoration:none;}
.mn-cons-link{font-size:12px;color:#9ee6bf;text-decoration:underline;text-underline-offset:4px;}
@media(max-width:900px){
  .mn-cons-grid{grid-template-columns:1fr;}
  .mn-cons-rate{font-size:30px;}
  .mn-cons-figs strong{font-size:20px;}
}
.mn-cons-neutral{color:var(--text-muted);background:var(--border-glass);}
.mn-cons-verdict--base{color:var(--text-muted);background:var(--border-glass);}
.mn-cons-card{height:100%;}
.mn-cons-verdict{margin-top:auto;}

/* ─────────────────────────────────────────────────────────────────────────
   CONSOLIDATION LEDGER — corrections from the accessibility pass
   The semantic colours were hardcoded light-mode hexes sitting on a surface
   that flips to #1E1E1E in dark mode, which measured 2.41–3.32:1 — the
   win/trap judgement was the first thing to become unreadable. They are
   tokens now, with a dark override, and the muted text is scoped rather than
   inherited from a global --text-muted that measures 3.62–3.94:1.
   ───────────────────────────────────────────────────────────────────────── */
.mn-cons{
  --cons-good:#0B6B40; --cons-bad:var(--cost-red, #B3261E); --cons-warn:#8A4208;
  --cons-muted:#4A5056; --cons-surface:var(--refresh-surface,var(--card-bg));
}
[data-theme="dark"] .mn-cons{
  --cons-good:#5FD9A0; --cons-bad:#FF8A80; --cons-warn:#F0A64B;
  --cons-muted:#A9B6AF;
}
.mn-cons-card{background:var(--cons-surface);}
.mn-cons-tag{color:var(--cons-muted);font-size:11px;}
.mn-cons-tag--win{color:var(--cons-good);}
.mn-cons-tag--warn{color:var(--cons-warn);}
.mn-cons-good{color:var(--cons-good);}
.mn-cons-bad{color:var(--cons-bad);}
.mn-cons-neutral{color:var(--cons-muted);}
.mn-cons-verdict--good{color:var(--cons-good);}
.mn-cons-verdict--bad{color:var(--cons-bad);}
.mn-cons-verdict--base{color:var(--cons-muted);}
.mn-cons-head span:last-child,.mn-cons-rate small,.mn-cons-barlabel{color:var(--cons-muted);}
.mn-cons-figs span{color:var(--cons-muted);font-size:11px;}

/* Rate and tenure now read as one unit, since neither means anything alone. */
.mn-cons-rate{font-size:30px;font-weight:900;letter-spacing:-1px;
  color:var(--text-color);margin:0;line-height:1.05;}
.mn-cons-rate span{opacity:.45;font-weight:600;margin:0 2px;}
.mn-cons-tag{margin:0 0 2px;font-weight:800;letter-spacing:.3px;}

/* The bar is the element meant to carry the trade-off "at a glance", but at
   10px with a 2.31:1 fill-against-fill it barely read. Taller, with a divider
   so the two segments separate without relying on hue alone. */
.mn-cons-bar{height:15px;border-radius:6px;}
.mn-cons-bar u{box-shadow:inset 2px 0 0 rgba(255,255,255,.85);}

/* The trap card's caution was carried only by a 1.40:1 border. */
.mn-cons-card--warn{border-left:4px solid var(--cons-warn);}
.mn-cons-card--win{border-left:4px solid var(--cons-good);}

/* The generic #marketing-view focus ring is #087443 — 1.38:1 on this dark
   gradient, i.e. no visible ring at all on the section's two CTAs. */
.mn-cons-foot a:focus-visible{outline:3px solid #9ee6bf;outline-offset:4px;
  box-shadow:0 0 0 2px #0a3d26;}
.mn-cons-foot-note{color:rgba(255,255,255,.78);}

.mn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── How-it-works step icons ─────────────────────────────────────────────
   Drawn rather than emoji: emoji render as a different picture on every OS,
   carry none of the brand, and none of them said anything specific to the
   step they sat on. These inherit currentColor, so they follow the theme
   exactly as the text does. */
.hiw-icon{font-size:0;line-height:0;margin-bottom:12px;color:#087443;}
.hiw-icon svg{width:30px;height:30px;display:block;}
[data-theme="dark"] .hiw-icon{color:#5FD9A0;}
.hiw-step:hover .hiw-icon{color:#18C979;}

/* ── THE NEXT STEP, AT THE FOOT OF A SECTION ──────────────────────────────
   Nakul, 24 Oct 2026: "har section apna agla kadam bataye, wahi karo."

   Measured on the live homepage the same day: of 17 sections, four ended
   with nothing at all — the reader finished reading and the page offered
   them no move. This is the line that fixes that, and it is deliberately
   quiet: it is a door, not a shout. The page already has six real CTAs and
   a seventh competing button would make all of them weaker.

   NOT .story-next. That class exists (scroll-stories.css) and is global, so
   it could have been reused — but it is 11px and tuned for the inside of a
   scroll film, and Nakul's standing instruction is to add on rather than
   lean on what is already working elsewhere. This is its own class and
   changes nothing that existed. */
.mn-next{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:26px; padding-bottom:3px;
  font-size:13.5px; font-weight:700; line-height:1.5;
  color:var(--refresh-green, #087443); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--refresh-green, #087443) 38%, transparent);
  transition:gap .2s ease, border-bottom-color .2s ease;
}
.mn-next:hover{ gap:11px; border-bottom-color:var(--refresh-green, #087443); }
.mn-next:focus-visible{ outline:2px solid var(--refresh-green, #087443); outline-offset:3px; }
.mn-next i{ font-style:normal; font-size:15px; line-height:1; }
/* A section whose own content is centred wants the line centred too. */
.mn-next--centre{ display:flex; justify-content:center; margin-inline:auto; width:fit-content; }
@media(prefers-reduced-motion:reduce){ .mn-next{ transition:none; } }

/* ── THE SAME LINE, ON A DARK SECTION ─────────────────────────────────────
   .mn-founder-section is dark green (#0C3527) and carries its own rule,
   `#marketing-view .mn-founder-section a`, which is more specific than a
   bare class — so the link came out white at 16px, looking like body text
   rather than a door, and the brand green would have been unreadable there
   anyway.

   `#marketing-view a.mn-next--on-dark` matches that rule's specificity
   exactly and sits later in the file, so it wins without anyone having to
   raise the stakes again. The mint is the colour this site already uses
   for links on a dark ground (see the hero's btn--primary). */
#marketing-view a.mn-next--on-dark{
  color:#9EE6BF; font-size:13.5px;
  border-bottom-color:color-mix(in srgb, #9EE6BF 42%, transparent);
}
#marketing-view a.mn-next--on-dark:hover{ border-bottom-color:#9EE6BF; }
#marketing-view a.mn-next--on-dark:focus-visible{ outline-color:#9EE6BF; }

/* ── WHAT WE CAN AND CANNOT DO WITH YOUR DATA ─────────────────────────────
   Nakul, 24 Oct 2026: "accordion bana do."

   Six questions a borrower is entitled to ask, placed directly after the
   section that asks them to open an account — which is the moment the
   question actually occurs to somebody.

   Built on <details>/<summary>, which is the browser's own disclosure
   widget: it opens with no JavaScript, it is keyboard-operable and it is
   announced correctly by a screen reader without a single aria attribute.
   The nav menus on this site already use the same element.

   EVERY ANSWER IS CHECKED AGAINST THE CODE, not against what we would like
   to be true. The sources are named in the HTML comment beside each one. */
#marketing-view .mn-safety{ padding-block:clamp(44px,6vw,72px); background:var(--refresh-bg); }
#marketing-view .mn-safety .mn-safety-in{ max-width:780px; margin-inline:auto; }
#marketing-view .mn-safety h2{
  margin:0 0 10px; font:750 clamp(26px,3.6vw,38px)/1.12 var(--font-sans),sans-serif;
  letter-spacing:-1.3px; color:var(--refresh-ink); text-wrap:balance;
}
#marketing-view .mn-safety .mn-safety-lede{
  margin:0 0 26px; font-size:15px; line-height:1.65; color:var(--refresh-muted); max-width:58ch;
}
#marketing-view .mn-q{
  border:1px solid var(--refresh-line); border-radius:12px;
  background:var(--refresh-surface); margin-bottom:9px; overflow:hidden;
}
#marketing-view .mn-q > summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 17px; cursor:pointer; list-style:none;
  font-size:15px; font-weight:700; line-height:1.45; color:var(--refresh-ink);
}
#marketing-view .mn-q > summary::-webkit-details-marker{ display:none; }
#marketing-view .mn-q > summary::after{
  content:""; flex:0 0 11px; width:11px; height:11px; margin-right:2px;
  border-right:2px solid var(--refresh-green); border-bottom:2px solid var(--refresh-green);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s ease;
}
#marketing-view .mn-q[open] > summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
#marketing-view .mn-q > summary:hover{ background:color-mix(in srgb, var(--refresh-green) 6%, transparent); }
#marketing-view .mn-q > summary:focus-visible{ outline:2px solid var(--refresh-green); outline-offset:-2px; }
#marketing-view .mn-q .mn-a{
  padding:0 17px 16px; margin:0; font-size:14px; line-height:1.68; color:var(--refresh-muted);
}
#marketing-view .mn-q .mn-a b{ color:var(--refresh-ink); font-weight:700; }
#marketing-view .mn-q .mn-a + .mn-a{ padding-top:10px; }
/* The short verdict, so the answer is readable before it is read. */
#marketing-view .mn-q .mn-verdict{
  flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-left:auto;
}
#marketing-view .mn-q .mn-verdict.no{ background:rgba(179,38,30,.1); color:#B3261E; }
#marketing-view .mn-q .mn-verdict.yes{ background:rgba(8,116,67,.12); color:var(--refresh-green); }
[data-theme="dark"] #marketing-view .mn-q .mn-verdict.no{ background:rgba(255,138,128,.14); color:#FF8A80; }
@media(max-width:560px){
  #marketing-view .mn-q > summary{ flex-wrap:wrap; gap:8px; font-size:14.5px; }
  #marketing-view .mn-q .mn-verdict{ margin-left:0; order:3; }
}
@media(prefers-reduced-motion:reduce){
  #marketing-view .mn-q > summary::after{ transition:none; }
}

/* The question is its own flex item so the chevron cannot be pushed onto a
   line of its own when the text wraps to two lines — which is most of them
   at 375px. A bare text node becomes an anonymous flex item that the
   browser will happily drop below its siblings. */
#marketing-view .mn-q > summary{ flex-wrap:nowrap; align-items:flex-start; }
#marketing-view .mn-q .mn-qt{ flex:1 1 auto; min-width:0; }
#marketing-view .mn-q > summary::after{ margin-top:5px; }
#marketing-view .mn-q .mn-verdict{ margin-top:1px; }
@media(max-width:560px){
  #marketing-view .mn-q > summary{ flex-wrap:nowrap; }
  #marketing-view .mn-q .mn-verdict{ margin-left:0; order:0; }
}

/* ── WHO IS BEHIND THIS ───────────────────────────────────────────────────
   Replaces .mn-proof, which was this same content in a thin strip with no
   heading. Nakul, 24 Oct 2026: "bahut hi chhota, bahut hi weird lag raha
   hai... matlab hi samajh nahi aa raha."

   The two inner blocks keep the classes they already had — .ml-founder and
   .hero__cred, both styled against #marketing-view in loan-explainer.css —
   so none of their appearance is re-litigated here. What is new is a head
   above them and room around them, which is what was missing.

   The face is the small half on a wide screen: it is a signature on the
   claim, not a second headline. Below 820px it stacks, face first. */
#marketing-view .mn-who{
  padding-block:clamp(48px,6.5vw,86px);
  background:var(--mo-surface-2, #f2f9f5);
  border-bottom:1px solid var(--mo-line, #c8dece);
}
#marketing-view .mn-who__inner{ max-width:900px; margin-inline:auto; }
#marketing-view .mn-who__head{ max-width:640px; margin:0 0 clamp(24px,3vw,34px); }
#marketing-view .mn-who h2{
  margin:0 0 12px; font:750 clamp(26px,3.6vw,40px)/1.12 var(--font-sans),sans-serif;
  letter-spacing:-1.4px; color:var(--refresh-ink); text-wrap:balance;
}
#marketing-view .mn-who__lede{
  margin:0; font-size:15.5px; line-height:1.68; color:var(--refresh-muted); max-width:56ch;
}
#marketing-view .mn-who__body{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(20px,3vw,38px); align-items:start;
}
/* The rule above the face was there to separate it from the hero's CTAs.
   There are no CTAs above it any more. */
#marketing-view .mn-who .ml-founder{
  margin-top:0; padding-top:0; border-top:0; flex-direction:column;
  align-items:flex-start; gap:10px; min-width:0;
}
#marketing-view .mn-who .ml-founder-photo,
#marketing-view .mn-who .ml-monogram{ width:76px; height:76px; font-size:21px; }
#marketing-view .mn-who .hero__cred{ margin-top:0; max-width:none; }
@media(max-width:820px){
  #marketing-view .mn-who__body{ grid-template-columns:minmax(0,1fr); gap:18px; }
  #marketing-view .mn-who .ml-founder{ flex-direction:row; align-items:center; gap:13px; }
  #marketing-view .mn-who .ml-founder-photo,
  #marketing-view .mn-who .ml-monogram{ width:54px; height:54px; font-size:16px; }
}

/* ── THE GUIDES ───────────────────────────────────────────────────────────
   Nakul, 24 Oct 2026: redesign the whole guide section — company logo and
   palette, light AND dark, restructured, our own drawn elements rather than
   emoji, full of motion, and say plainly that it costs nothing.

   WHAT WAS THERE. Twelve cards built entirely from inline style attributes
   — 112 lines of them — with a stray #1d6fa4 blue on one pill that belongs
   to no palette this company has, and a .blog-card-cc rule in style.css
   setting white h3 and p text that only ever rendered legibly because each
   card's inline colour overrode it. One class was styling for a dark card
   while the markup drew a light one.

   Everything below is tokens. --mo-* carries its own dark values in
   foundation.css, so the dark theme is not a second set of rules, it is the
   same rules reading different numbers. */
#marketing-view .mn-learn{
  padding-block:clamp(48px,6vw,84px);
  background:var(--mo-surface-2, #f2f9f5);
  border-top:1px solid var(--mo-line, #c8dece);
}
#marketing-view .mn-learn__in{ max-width:1040px; margin-inline:auto; }
#marketing-view .mn-learn__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:clamp(18px,2.4vw,26px);
}
#marketing-view .mn-learn h2{
  margin:0; font:750 clamp(25px,3.4vw,38px)/1.12 var(--font-sans),sans-serif;
  letter-spacing:-1.3px; color:var(--refresh-ink); text-wrap:balance;
}
#marketing-view .mn-learn__lede{
  margin:10px 0 0; font-size:15px; line-height:1.65;
  color:var(--refresh-muted); max-width:54ch;
}
#marketing-view .mn-learn__all{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px 16px; border-radius:999px; text-decoration:none;
  border:1px solid color-mix(in srgb, var(--refresh-green) 34%, transparent);
  color:var(--refresh-green); font-size:13px; font-weight:700;
  transition:border-color .2s ease, background .2s ease;
}
#marketing-view .mn-learn__all:hover{
  border-color:var(--refresh-green);
  background:color-mix(in srgb, var(--refresh-green) 8%, transparent);
}

/* The one line he asked for, and it earns its own band. */
#marketing-view .mn-free{
  display:flex; align-items:center; gap:13px;
  padding:14px 17px; margin:0 0 clamp(22px,3vw,32px);
  border-radius:13px;
  border:1px solid color-mix(in srgb, var(--refresh-green) 26%, transparent);
  background:color-mix(in srgb, var(--refresh-green) 7%, transparent);
}
#marketing-view .mn-free__ico{ flex:0 0 auto; color:var(--refresh-green); display:flex; }
#marketing-view .mn-free p{ margin:0; font-size:14px; line-height:1.55; color:var(--refresh-ink); }
#marketing-view .mn-free b{ font-weight:800; }
#marketing-view .mn-free small{
  display:block; margin-top:3px; font-size:12.5px; color:var(--refresh-muted);
}

#marketing-view .mn-learn__group{
  display:flex; align-items:center; gap:11px;
  margin:clamp(26px,3.4vw,40px) 0 14px;
  font:800 11px/1 var(--font-sans),sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--refresh-muted);
}
#marketing-view .mn-learn__group::after{
  content:""; flex:1 1 auto; height:1px; background:var(--mo-line, #c8dece);
}
#marketing-view .mn-learn__group b{ color:var(--refresh-green); font-weight:800; }

#marketing-view .mn-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:14px;
}
#marketing-view .mn-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  min-width:0; padding:18px; text-decoration:none;
  border:1px solid var(--mo-line, #c8dece); border-radius:15px;
  background:var(--mo-surface, #fff);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#marketing-view .mn-card:hover{
  border-color:color-mix(in srgb, var(--refresh-green) 55%, transparent);
  transform:translateY(-3px);
  box-shadow:0 10px 26px color-mix(in srgb, var(--refresh-ink) 9%, transparent);
}
#marketing-view .mn-card:focus-visible{ outline:2px solid var(--refresh-green); outline-offset:3px; }
#marketing-view .mn-card__ico{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:13px; border-radius:11px;
  color:var(--refresh-green);
  background:color-mix(in srgb, var(--refresh-green) 10%, transparent);
}
#marketing-view .mn-card__pill{
  font:800 9.5px/1 var(--font-sans),sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:var(--refresh-green);
  padding:5px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--refresh-green) 11%, transparent);
}
#marketing-view .mn-card__t{
  margin:11px 0 6px; font:700 15px/1.38 var(--font-sans),sans-serif;
  letter-spacing:-.2px; color:var(--refresh-ink); text-wrap:balance;
}
#marketing-view .mn-card__d{
  margin:0 0 13px; font-size:13px; line-height:1.55; color:var(--refresh-muted);
}
#marketing-view .mn-card__go{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--refresh-green);
}
/* ── THE CARD SAYS IT HAS LANDED ──────────────────────────────────────
   Nakul asked for the arrival to read "brightly" — so you can tell the
   thing animated rather than merely appeared. A longer slide would have
   been the obvious answer and the wrong one; on his standing rule this
   site must never do anything dramatically.

   So the travel stays modest and the brand green does the telling: a
   ring blooms on the card's edge as it settles and is gone again inside
   a second. It rides the SAME --rv-i the stagger uses, so the light
   travels along the row in step with the cards themselves.

   box-shadow only. The slide and fade are --rv-item's, on opacity and
   transform, and nothing here touches either — one element, one
   arrival, which this file has got wrong before by stacking a second
   animation onto an element that already had one. */
@keyframes mn-card-land{
  0%   { box-shadow:0 0 0 0 rgba(31,164,99,0); }
  40%  { box-shadow:0 0 0 2px rgba(31,164,99,.42), 0 12px 34px rgba(31,164,99,.18); }
  100% { box-shadow:0 0 0 0 rgba(31,164,99,0); }
}
#marketing-view .mn-cards.rv-in > .mn-card{
  animation:mn-card-land .95s cubic-bezier(.16,.84,.3,1) both;
  animation-delay:calc(var(--rv-i, 0) * .088s);
}
/* A reader on reduced motion gets the cards, not the light show. */
@media (prefers-reduced-motion: reduce){
  #marketing-view .mn-cards.rv-in > .mn-card{ animation:none; }
}

#marketing-view .mn-card__go i{ font-style:normal; transition:transform .2s ease; }
#marketing-view .mn-card:hover .mn-card__go i{ transform:translateX(3px); }
/* The master guide is the one object this block is built around. */
#marketing-view .mn-card--lead{
  grid-column:1 / -1;
  background:color-mix(in srgb, var(--refresh-green) 7%, transparent);
  border-color:color-mix(in srgb, var(--refresh-green) 30%, transparent);
}
@media(max-width:520px){
  #marketing-view .mn-learn__head{ align-items:flex-start; }
  #marketing-view .mn-cards{ grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce){
  #marketing-view .mn-card,#marketing-view .mn-card__go i,#marketing-view .mn-learn__all{ transition:none; }
  #marketing-view .mn-card:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THREE THINGS — the spine section, 9 Nov 2026
   ═══════════════════════════════════════════════════════════════════════
   Colour comes from the --refresh-* and --card-bg families that the rest of
   this file already uses, so dark mode follows without a second rule. No
   rgba() background on a card: rgba REPLACES rather than layers, which is
   what broke dark mode here before. */
.mn-three{padding:64px 0 10px;}
.mn-three__head{max-width:62ch;margin:0 0 30px;}
.mn-three__head h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;color:var(--refresh-ink);margin:0 0 10px;}
.mn-three__lede{font-size:16px;line-height:1.65;color:var(--refresh-muted);margin:0;}

.mn-three__grid{display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:880px){.mn-three__grid{grid-template-columns:repeat(3,1fr);}}

.mn-three__card{border:1px solid var(--border-glass);border-radius:18px;
  padding:24px;background:var(--card-bg);display:flex;flex-direction:column;}
.mn-three__num{font-size:10.5px;font-weight:800;letter-spacing:1.3px;
  color:var(--refresh-green);margin:0 0 10px;}
.mn-three__card h3{font-size:21px;font-weight:800;letter-spacing:-.01em;
  line-height:1.2;color:var(--text-color);margin:0 0 8px;}
.mn-three__purpose{font-size:14.5px;line-height:1.6;color:var(--text-muted);
  margin:0 0 18px;}

.mn-three__list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:0;}
.mn-three__list li{border-top:1px solid var(--border-glass);padding:13px 0 0;
  margin-top:13px;}
.mn-three__list li:first-child{border-top:0;margin-top:0;padding-top:0;}
.mn-three__list a{display:block;font-size:14.5px;font-weight:700;
  color:var(--text-color);text-decoration:none;}
.mn-three__list a:hover,.mn-three__list a:focus-visible{color:var(--refresh-green);
  text-decoration:underline;text-underline-offset:3px;}
.mn-three__list span{display:block;font-size:13.5px;line-height:1.55;
  color:var(--text-muted);margin-top:3px;}

/* The limit is content, not a footnote, so it is readable rather than faint. */
.mn-three__limit{margin:18px 0 0;padding:14px 16px;border-radius:12px;
  background:var(--refresh-surface);border:1px solid var(--refresh-line);
  font-size:13px;line-height:1.6;color:var(--text-color);}
.mn-three__limit b{font-weight:800;}

/* The card you are reading, on a stacked layout only (three-rail.js never
   runs above 880px, where all three are on screen at once). Border and
   colour only — opacity and transform belong to reveal.js's arrival, and
   two systems on one property is how a card rendered at 0 here before. */
.mn-three__card{transition:border-color .28s ease,box-shadow .28s ease;}
.mn-three__card.is-active{border-color:var(--refresh-green);
  box-shadow:0 8px 28px -14px rgba(24,201,121,.55);}
.mn-three__num{transition:color .28s ease;}
.mn-three__card.is-active .mn-three__num{color:var(--text-color);}
@media (prefers-reduced-motion: reduce){
  .mn-three__card,.mn-three__num{transition:none;}
}


/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER 02 — WHAT YOUR SCORE OPENS. See chapter-score.js.
   Same register as the rate board: tabular figures, the accent only on a
   sourced value, and no colour at all on the rows that are shut — a closed
   door is information, not a failure, and colouring it red would say
   otherwise. */
#marketing-view .mn-score{padding:60px 0;}
#marketing-view .mn-score__head{max-width:60ch;margin:0 0 26px;}
#marketing-view .mn-score__head h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;color:var(--refresh-ink);margin:0 0 10px;}
#marketing-view .mn-score__head p{font-size:16px;line-height:1.65;
  color:var(--refresh-muted);margin:0;}

#marketing-view .mn-score__panel{border:1px solid var(--border-glass);
  border-radius:18px;background:var(--card-bg);padding:24px;}
#marketing-view .cs-dial{display:flex;align-items:baseline;gap:12px;
  margin:0 0 4px;}
#marketing-view .cs-dial b{font-size:clamp(34px,6vw,54px);font-weight:800;
  line-height:1;color:var(--refresh-green);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
#marketing-view .cs-dial span{font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:800;color:var(--refresh-muted);}
#marketing-view input.cs-range{width:100%;margin:14px 0 6px;
  accent-color:var(--refresh-green);}
#marketing-view .cs-ends{display:flex;justify-content:space-between;
  font:600 10.5px/1 ui-monospace,Menlo,monospace;color:var(--refresh-muted);
  letter-spacing:.06em;}

#marketing-view .cs-tally{margin:20px 0 0;font-size:15px;
  color:var(--refresh-muted);}
#marketing-view .cs-tally b{font-size:21px;font-weight:800;
  color:var(--refresh-ink);font-variant-numeric:tabular-nums;}

#marketing-view ul.cs-list{list-style:none;margin:14px 0 0;padding:0;}
#marketing-view .cs-row{display:grid;gap:10px;align-items:baseline;
  grid-template-columns:1fr auto;padding:11px 0;
  border-top:1px solid var(--border-glass);}
@media(min-width:620px){#marketing-view .cs-row{
  grid-template-columns:1fr 58px 1fr;}}
#marketing-view .cs-l{font-size:14.5px;font-weight:700;color:var(--text-color);
  opacity:.55;}
#marketing-view .cs-row.is-open .cs-l{opacity:1;}
#marketing-view .cs-f{font-size:14.5px;font-weight:800;text-align:right;
  color:var(--text-muted);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";}
#marketing-view .cs-row.is-open .cs-f{color:var(--refresh-green);}
#marketing-view .cs-w{font-size:12.5px;color:var(--text-muted);
  grid-column:1 / -1;}
@media(min-width:620px){#marketing-view .cs-w{grid-column:auto;text-align:right;}}
#marketing-view .cs-note{margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--border-glass);font-size:13.5px;line-height:1.6;
  color:var(--refresh-muted);}
#marketing-view .cs-cta{display:inline-flex;gap:7px;align-items:center;
  margin-top:18px;font-size:14.5px;font-weight:700;color:var(--refresh-green);
  text-decoration:none;}
#marketing-view .cs-cta:hover{text-decoration:underline;text-underline-offset:3px;}

/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER 03 — THE MONTH LEAKS BEFORE IT ENDS. See chapter-month.js.
   Same register again: tabular figures, green only on a sourced value,
   rust only on what leaves. Nothing else wears a colour. */
#marketing-view .mn-month{padding:60px 0;
  background:color-mix(in srgb,var(--refresh-green) 4%,transparent);}
#marketing-view .mn-month__head{max-width:60ch;margin:0 0 26px;}
#marketing-view .mn-month__head h2{font-size:clamp(26px,3.6vw,40px);
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
  color:var(--refresh-ink);margin:0 0 10px;}
#marketing-view .mn-month__head p{font-size:16px;line-height:1.65;
  color:var(--refresh-muted);margin:0;}

#marketing-view .mn-month__grid{display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:880px){#marketing-view .mn-month__grid{
  grid-template-columns:minmax(0,340px) 1fr;gap:26px;align-items:start;}}
#marketing-view .mn-month__panel{border:1px solid var(--border-glass);
  border-radius:18px;background:var(--card-bg);padding:22px;}

#marketing-view .cm-f{margin:0 0 14px;}
#marketing-view .cm-f:last-child{margin-bottom:0;}
#marketing-view .cm-f label{display:block;font-size:12px;font-weight:700;
  letter-spacing:.02em;color:var(--refresh-muted);margin:0 0 5px;}
#marketing-view .cm-f input,#marketing-view .cm-f select{width:100%;
  padding:11px 12px;font:inherit;font-size:15px;border-radius:10px;
  background:transparent;color:var(--text-color);
  border:1.5px solid var(--border-glass);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

#marketing-view .cm-lines{margin:0;}
#marketing-view .cm-line{display:flex;justify-content:space-between;gap:14px;
  align-items:baseline;padding:11px 0;border-top:1px solid var(--border-glass);}
#marketing-view .cm-line:first-child{border-top:0;}
#marketing-view .cm-line dt{font-size:14px;color:var(--text-muted);margin:0;}
#marketing-view .cm-line dd{margin:0;font-size:16px;font-weight:700;
  color:var(--text-color);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";white-space:nowrap;}
#marketing-view .cm-line.is-sourced dd{color:var(--refresh-green);}
#marketing-view .cm-line.is-cost dd{color:#C2410C;}

#marketing-view .cm-ask{font-size:14px;color:var(--text-color);margin:0 0 8px;
  font-weight:700;}
#marketing-view ul.cm-miss{margin:0;padding:0 0 0 18px;font-size:14px;
  color:var(--text-muted);line-height:1.8;}
#marketing-view .cm-wait{font-size:14px;color:var(--text-muted);margin:0;}

#marketing-view .cm-caps{margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--border-glass);}
#marketing-view .cm-caps p{margin:0 0 6px;font-size:14px;
  color:var(--text-muted);line-height:1.6;}
#marketing-view .cm-caps b{color:var(--text-color);font-weight:800;
  font-variant-numeric:tabular-nums;}
#marketing-view .cm-note{margin:16px 0 0;font-size:13px;line-height:1.6;
  color:var(--refresh-muted);}

/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER 04 — WHAT IS LEFT OVER CAN AFFORD TO WAIT. See chapter-grow.js.
   The limit box is CONTENT here, not a footnote: on the one pillar we are
   not licensed for, what we cannot do is the most important thing on the
   screen, so it is set at reading size and not greyed away. */
#marketing-view .mn-grow{padding:60px 0;}
#marketing-view .mn-grow__head{max-width:60ch;margin:0 0 26px;}
#marketing-view .mn-grow__head h2{font-size:clamp(26px,3.6vw,40px);
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
  color:var(--refresh-ink);margin:0 0 10px;}
#marketing-view .mn-grow__head p{font-size:16px;line-height:1.65;
  color:var(--refresh-muted);margin:0;}

#marketing-view .mn-grow__grid{display:grid;gap:18px;grid-template-columns:1fr;}
@media(min-width:880px){#marketing-view .mn-grow__grid{
  grid-template-columns:minmax(0,320px) 1fr;gap:26px;align-items:start;}}
#marketing-view .mn-grow__panel{border:1px solid var(--border-glass);
  border-radius:18px;background:var(--card-bg);padding:22px;}

#marketing-view .cg-f{margin:0 0 14px;}
#marketing-view .cg-f:last-child{margin-bottom:0;}
#marketing-view .cg-f label{display:block;font-size:12px;font-weight:700;
  color:var(--refresh-muted);margin:0 0 5px;}
#marketing-view .cg-f input{width:100%;padding:11px 12px;font:inherit;
  font-size:15px;border-radius:10px;background:transparent;
  color:var(--text-color);border:1.5px solid var(--border-glass);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

#marketing-view .cg-dial{margin:0 0 4px;}
#marketing-view .cg-dial span{display:block;font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--refresh-muted);
  margin:0 0 6px;}
#marketing-view .cg-dial b{display:block;font-size:clamp(34px,6vw,54px);
  font-weight:800;line-height:1;color:var(--refresh-green);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
#marketing-view .cg-says{margin:16px 0 0;font-size:15.5px;line-height:1.6;
  color:var(--text-color);}
#marketing-view .cg-says b{font-weight:800;}
#marketing-view .cg-cost{margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--border-glass);font-size:13.5px;line-height:1.6;
  color:var(--text-muted);}
#marketing-view .cg-cost b{color:#C2410C;font-weight:800;}

#marketing-view .cg-limit{margin:18px 0 0;padding:15px 16px;border-radius:13px;
  background:var(--refresh-surface);border:1px solid var(--refresh-line);
  font-size:14px;line-height:1.6;color:var(--text-color);}
#marketing-view .cg-limit b{font-weight:800;}
#marketing-view .cg-links{margin:16px 0 0;display:flex;gap:16px;flex-wrap:wrap;}
#marketing-view .cg-links a{font-size:14.5px;font-weight:700;
  color:var(--refresh-green);text-decoration:none;}
#marketing-view .cg-links a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ═══════════════════════════════════════════════════════════════════════
   CHAPTER 05 — the connecting line and the proof that bracket the moved
   "Sixteen years" section. Two paragraphs, no panel: this chapter is a
   claim being explained, and a card around it would make it look like
   another tool. */
#marketing-view .mn-why{padding:0 20px;}
#marketing-view .mn-why__line{max-width:58ch;margin:44px 0 0;
  font-size:clamp(17px,2.2vw,21px);line-height:1.55;font-weight:600;
  color:var(--refresh-ink);letter-spacing:-.01em;}
#marketing-view .mn-why__proof{max-width:58ch;margin:0 0 52px;
  padding-top:18px;border-top:1px solid var(--refresh-line);
  font-size:15px;line-height:1.65;color:var(--refresh-muted);}
#marketing-view .mn-why__proof b{color:var(--refresh-green);font-weight:800;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}