/* ═══════════════════════════════════════════════════════════════════════════
   THE HERO READOUT — a number on the first screen
   ═══════════════════════════════════════════════════════════════════════════

   Nakul, 7 Nov 2026: "phone par aur kisi bhi browser pe itni achhi tarah
   dikh nahi raha jitni aajkal ke log website present kar rahe hain ... ye ek
   fintech hai."

   Measured before this file existed: the first screen carried ZERO numbers,
   zero rupees and zero percents, on a phone AND on a desktop. A borrower is
   on this page to decide about money, and the page opened with two promises
   and two buttons.

   ── THIS IS NOT THE LOAN LAB COMING BACK ──────────────────────────────────
   On 24 Oct 2026 Nakul said "Loan Lab ko hero se bahar kar do", and the
   reasons recorded in index.html were real: that card was 1,181px of an
   1,830px hero on a phone, and 510px wide on a desktop — a repayment curve
   squeezed into half a column. It stays where it is.

   This is a quarter of it. Measured in the prototype: 311px against the Loan
   Lab's 1,181px, and the whole hero block comes out SHORTER than today's
   (609px against 677px). No number inputs, no curve, no milestones — an
   amount, three tenures, and what it costs. The Loan Lab is still the place
   you go to actually work.

   ── EVERY COLOUR IS A TOKEN ───────────────────────────────────────────────
   There is not one raw hex in this file. That is deliberate: the audit that
   produced it found 23 distinct font sizes in use against the 8
   foundation.css defines, 25+ untokened hex values in loans.html, and a link
   at 1.37:1 coloured from a stylesheet written for a hero that is no longer
   dark. The system was never the problem; not using it was.

   Loaded LAST on purpose, so it does not have to out-specify six older
   stylesheets to style its own component.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The second column that was always in the grid ────────────────────────
   .hero__inner was already declared `grid-template-columns:1.1fr 1fr` in
   homepage-refresh.css and again in landing-value.css. It has been
   resolving to a single 960px track because there was only ever one child
   in it — which is the whole reason 568px (39%) of the desktop hero was
   empty. Nothing is being invented here; the slot is being filled. */
#marketing-view .ml-hero .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 52px;
  align-items: center;
}

/* ── The card ─────────────────────────────────────────────────────────── */
#marketing-view .hero-tool {
  background: var(--mo-white);
  border: 1px solid var(--mo-ink-200);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 16px 48px rgba(5, 46, 28, .10);
  min-width: 0;
}
[data-theme=dark] #marketing-view .hero-tool {
  background: var(--mo-ink-900);
  border-color: var(--mo-ink-500);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .34);
}

#marketing-view .hero-tool .ht-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: var(--mo-t-sm); color: var(--mo-ink-500); margin-bottom: 7px;
}
#marketing-view .hero-tool .ht-row b {
  font-size: var(--mo-t-lg); font-weight: var(--mo-w-black);
  color: var(--mo-ink-900); font-variant-numeric: tabular-nums;
}
[data-theme=dark] #marketing-view .hero-tool .ht-row { color: var(--mo-ink-300); }
[data-theme=dark] #marketing-view .hero-tool .ht-row b { color: var(--mo-ink-100); }

/* touch-action:pan-y is not decoration. A range input takes a drag in BOTH
   directions by default, so a thumb that lands on this slider and swipes up
   moves nothing — the same class of bug that stopped loans.html scrolling
   on a phone, found the same day. Vertical belongs to the page; horizontal
   belongs to the slider. */
#marketing-view .hero-tool input[type=range] {
  width: 100%; margin: 0 0 14px; height: 24px;
  accent-color: var(--mo-green-600);
  touch-action: pan-y;
  cursor: pointer;
}

#marketing-view .hero-tool .ht-chips { display: flex; gap: 7px; margin-bottom: 16px; }
/* 44px, because the audit counted 43 tap targets under 44x44 on this page
   and this file is not going to add a forty-fourth. */
#marketing-view .hero-tool .ht-chips button {
  flex: 1; min-height: 44px; padding: 0 6px;
  border: 1px solid var(--mo-ink-200); background: var(--mo-white);
  border-radius: 9px; cursor: pointer;
  font: inherit; font-size: var(--mo-t-sm); font-weight: var(--mo-w-semi);
  color: var(--mo-ink-700);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#marketing-view .hero-tool .ht-chips button[aria-pressed="true"] {
  background: var(--mo-green-800); border-color: var(--mo-green-800); color: var(--mo-white);
}
[data-theme=dark] #marketing-view .hero-tool .ht-chips button {
  background: var(--mo-ink-700); border-color: var(--mo-ink-500); color: var(--mo-ink-100);
}
[data-theme=dark] #marketing-view .hero-tool .ht-chips button[aria-pressed="true"] {
  background: var(--mo-green-500); border-color: var(--mo-green-500); color: var(--mo-ink-900);
}
@media (prefers-reduced-motion: reduce) {
  #marketing-view .hero-tool .ht-chips button { transition: none; }
}

#marketing-view .hero-tool .ht-out { border-top: 1px solid var(--mo-ink-100); padding-top: 14px; }
[data-theme=dark] #marketing-view .hero-tool .ht-out { border-top-color: var(--mo-ink-500); }
/* Two-sided caption. The left says what the big number is; the right
   carries the interest total, which used to sit in the sentence below and
   was cut by the bottom nav. There is spare width on this line at every
   amount the slider reaches, so the fact costs no height. */
#marketing-view .hero-tool .ht-lbl {
  font-size: var(--mo-t-xs); letter-spacing: var(--mo-track-caps);
  text-transform: uppercase; font-weight: var(--mo-w-black); color: var(--mo-ink-500);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
/* ink-900, the same step .ht-sub b takes. The caption is set in black
   weight throughout, so weight alone cannot separate the number from the
   words around it — and at ink-500 it was exactly the same colour as them
   too, which left the one fact on this line with nothing to mark it. */
#marketing-view .hero-tool .ht-lbl b {
  color: var(--mo-ink-900); font-variant-numeric: tabular-nums;
}
/* ink-400 measured 4.13:1 on the light card, under the 4.5 floor for small
   text. It mattered less when this line only said what the number was; it
   carries the interest total now, so it moves one step down the ramp. An
   existing token, not a new colour. */
[data-theme=dark] #marketing-view .hero-tool .ht-lbl { color: var(--mo-ink-300); }
[data-theme=dark] #marketing-view .hero-tool .ht-lbl b { color: var(--mo-ink-100); }
#marketing-view .hero-tool .ht-emi {
  font-size: 44px; line-height: 1.06; font-weight: var(--mo-w-black);
  color: var(--mo-green-700); letter-spacing: var(--mo-track-tight);
  font-variant-numeric: tabular-nums; margin: 3px 0 2px;
}
[data-theme=dark] #marketing-view .hero-tool .ht-emi { color: var(--mo-green-300); }
#marketing-view .hero-tool .ht-sub { font-size: var(--mo-t-sm); color: var(--mo-ink-500); margin: 0; }
#marketing-view .hero-tool .ht-sub b { color: var(--mo-ink-900); font-variant-numeric: tabular-nums; }
[data-theme=dark] #marketing-view .hero-tool .ht-sub { color: var(--mo-ink-300); }
[data-theme=dark] #marketing-view .hero-tool .ht-sub b { color: var(--mo-ink-100); }

#marketing-view .hero-tool .ht-bar {
  display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin: 13px 0 7px;
  background: var(--mo-ink-100);
}
#marketing-view .hero-tool .ht-bar i { display: block; height: 100%; }
#marketing-view .hero-tool .ht-bar i:first-child { background: var(--mo-green-600); }
#marketing-view .hero-tool .ht-bar i:last-child  { background: var(--mo-warn); }
#marketing-view .hero-tool .ht-leg {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: var(--mo-t-xs); color: var(--mo-ink-500);
}
#marketing-view .hero-tool .ht-leg b { font-variant-numeric: tabular-nums; }
[data-theme=dark] #marketing-view .hero-tool .ht-leg { color: var(--mo-ink-300); }

#marketing-view .hero-tool .ht-cta {
  display: block; text-align: center; margin-top: 16px; min-height: 48px;
  padding: 13px 16px; border-radius: 10px; text-decoration: none;
  background: var(--mo-green-800); color: var(--mo-white);
  font-size: var(--mo-t-md); font-weight: var(--mo-w-bold);
}
#marketing-view .hero-tool .ht-cta:hover { background: var(--mo-green-700); }
[data-theme=dark] #marketing-view .hero-tool .ht-cta { background: var(--mo-green-600); }
#marketing-view .hero-tool .ht-note {
  margin: 10px 0 0; font-size: var(--mo-t-xs); color: var(--mo-ink-400); line-height: 1.5;
}

/* ── The trust row, under the buttons in the left column ──────────────── */
#marketing-view .hero-trust { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
#marketing-view .hero-trust span {
  font-size: var(--mo-t-xs); font-weight: var(--mo-w-bold);
  padding: 4px 11px; border-radius: 99px;
  background: var(--mo-green-100); color: var(--mo-green-700);
}
[data-theme=dark] #marketing-view .hero-trust span {
  background: var(--mo-ink-700); color: var(--mo-green-300);
}

#marketing-view .ml-hero .hero__heading { letter-spacing: -2.4px; }

/* ── THE 1.37:1 LINK ──────────────────────────────────────────────────────
   #marketing-view #hero-dashboard-btn a was `color:#9ee6bf` in
   landing-value.css, written when .ml-hero had `background:#082c24`. The
   hero is light now (landing-value.css:88 flips it in every theme but
   dark) and that rule never moved, so a signed-in member's only route to
   their own dashboard was mint on near-white: measured 1.37:1 against the
   4.5:1 a 13px link needs. Effectively invisible, and it is the one link
   that matters to somebody who has already joined.

   --mo-green-700 is the token foundation.css designates for links: 5.85:1
   on white. Two IDs plus a class, so it beats the two-ID rule it replaces
   without touching that file. */
#marketing-view #hero-dashboard-btn a.hero-dash-link {
  color: var(--mo-green-700);
  font-weight: var(--mo-w-semi);
  text-decoration: none;
}
#marketing-view #hero-dashboard-btn a.hero-dash-link:hover { text-decoration: underline; }
[data-theme=dark] #marketing-view #hero-dashboard-btn a.hero-dash-link { color: var(--mo-green-300); }

/* ── Narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #marketing-view .ml-hero .hero__inner { gap: 32px; }
  #marketing-view .hero-tool .ht-emi { font-size: 38px; }
}
@media (max-width: 760px) {
  /* One column, and the tool comes AFTER the headline — the reader should
     know what this is before they are handed a slider.

     THE FOLD ON THIS PAGE IS NOT innerHeight. A fixed bottom-nav takes the
     last 71px of a phone screen, so the real fold is 741px, not 812. The
     EMI figure cleared 812 and still sat behind the nav; these numbers are
     what move it to 741. Measured, not guessed — if the nav ever changes
     height, measure again rather than trusting this comment. */
  /* 22px -> 18px. Four pixels between the headline block and the card, and
     they are the difference between the meaning line clearing the nav by 3
     and by 7. Three was positive but too thin to survive a device whose
     font metrics round differently. */
  #marketing-view .ml-hero .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #marketing-view .ml-hero .hero__heading { font-size: 38px; letter-spacing: -1.6px; }
  #marketing-view .hero-tool { padding: 16px; }
  #marketing-view .hero-tool .ht-emi { font-size: 36px; }
  #marketing-view .hero-trust { margin-top: 12px; }
  /* A MEMBER GETS THE ROOM BACK. Signed in, #hero-dashboard-btn adds 56px
     and the EMI figure lands at 746-785 against a real fold of 741 — five
     pixels under the bottom nav, which is the one number this whole change
     exists to put on screen.

     The pills are what comes off, and not only because they are 58px.
     "Not a broker · Not an affiliate · Every rate linked to its source" is
     an argument aimed at somebody deciding whether to trust us. This
     reader already did; what they want is the way to their own dashboard,
     which is the block that replaced them. Signed-out visitors are
     untouched and keep both. */
  #marketing-view.is-member .hero-trust { display: none; }
  /* THE 32 PIXELS, ITEMISED. The meaning line ended at 773 against a fold
     of 741. One line instead of two gives back 20.8; the rest is this:
     chips 12->8, slider 10->7, readout padding 11->9, the amount row 7->5
     and the card's own padding 18->16. Nothing here is a round number
     chosen for looking tidy — each one was measured on a 375x812 phone,
     and the total is what moves the sentence above the nav. */
  #marketing-view .hero-tool .ht-chips { margin-bottom: 8px; }
  #marketing-view .hero-tool input[type=range] { margin-bottom: 7px; }
  #marketing-view .hero-tool .ht-row { margin-bottom: 5px; }
  #marketing-view .hero-tool .ht-out { padding-top: 9px; }
}