/* ==========================================================================
   Loan & EMI Calculator — core stylesheet

   Structure
     1.  Design tokens (light) and the dark overrides
     2.  Reset and base elements
     3.  Layout: header, navigation, main, footer
     4.  Components: cards, stats, forms, buttons, tables, charts
     5.  Feature-specific blocks
     6.  Overlays: modal, toast, tooltip
     7.  Utilities and motion preferences

   Theme model
     Light values live on :root. Dark values are declared twice — once behind
     prefers-color-scheme for the "system" preference, once behind
     [data-theme-resolved="dark"] so the in-app toggle wins in both directions.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces — Kaithi Finance brand kit: surface / surface-alt */
  --surface-page:    #f3f5f8;
  --surface-1:       #ffffff;
  --surface-2:       #fafbfc;
  --surface-3:       #e9ecf1;
  --surface-inset:   #eef1f5;

  /* Ink — brand kit: ink / ink-muted */
  --text-primary:    #1b2233;
  --text-secondary:  #5b6472;
  /* Was #848da0, which measured 2.94–3.33:1 against the four light surfaces
     — below the WCAG AA minimum of 4.5:1 for body text on every one of them.
     That single token is used for field hints, the privacy notes under the
     lead forms, card sub-labels, the rate-table footnotes and the footer
     copyright, so the failure was site-wide rather than cosmetic: on a
     finance site the hint text under an input is exactly the copy a user
     needs to read. #646e80 keeps the muted tone while clearing AA on all
     four surfaces (white 5.14, page 4.71, surface-2 4.96, inset 4.54).
     The dark-theme value further down already passed (4.83–5.36) and is
     deliberately left alone. */
  --text-muted:      #646e80;
  --text-inverse:    #ffffff;

  /* Lines — brand kit: border */
  --border:          #dde2e8;
  --border-strong:   #c5cdd9;
  --border-focus:    #091c46;

  /* Brand — Kaithi Finance navy, with a validated brand-leaning blue for
     chart series 1 (data-viz colors aren't defined in the brand kit, so
     series marks stay on the accessibility-validated categorical palette;
     only slot 1 is nudged toward the brand's navy hue and re-validated —
     see scripts/validate_palette.js in the dataviz skill). */
  --accent:          #091c46;
  --accent-hover:    #24406b;
  --accent-soft:     #e7ebf3;
  --series-1:        #2f5aa8;
  --series-2:        #eb6834;
  --series-3:        #1baf7a;
  --series-4:        #eda100;

  /* Gold — brand accent only: highlights, badges, featured states. Never a
     fill, never inside the logo mark; keep it under ~10% of any screen. */
  --gold:            #c9a227;
  --gold-soft:       #faf3dc;

  /* Status — fixed, never themed. Brand kit's "success" token doubles as
     the site's --good, since both mean the same thing (a positive/best
     outcome). */
  --good:            #1f9d6e;
  --good-soft:       #e5f5ef;
  --warning:         #fab219;
  --warning-soft:    #fdf3dd;
  --serious:         #ec835a;
  --critical:        #d03b3b;
  --critical-soft:   #fbeaea;
  --info-soft:       #e7ebf3;

  /* Typography — brand kit: Poppins (headline) / Inter (body) */
  --font-headline: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:  ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Space scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

  /* Radii & shadow */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 15, 10, 0.05);
  --shadow:    0 1px 3px rgba(16, 15, 10, 0.06), 0 8px 24px -12px rgba(16, 15, 10, 0.12);
  --shadow-lg: 0 4px 12px rgba(16, 15, 10, 0.08), 0 24px 48px -20px rgba(16, 15, 10, 0.20);

  --header-height: 64px;
  /* The content column grows with the display rather than stranding a fixed
     1280px band in the middle of a large monitor or a TV. responsive.css steps
     this up at wider breakpoints. */
  --content-max: 1280px;
  --gutter: var(--sp-5);
}

/* Dark — the system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page:   #12161f;
    --surface-1:      #1b202c;
    --surface-2:      #202632;
    --surface-3:      #2a313f;
    --surface-inset:  #171b25;
    --text-primary:   #f1f3f7;
    --text-secondary: #b7bfcb;
    --text-muted:     #838ca0;
    --text-inverse:   #12161f;
    --border:         #333b4c;
    --border-strong:  #454f63;
    --border-focus:   #6e90d1;
    --accent:         #4a72c4;
    --accent-hover:   #6b8fd6;
    --accent-soft:    #1b2740;
    --series-1:       #4a72c4;
    --series-2:       #d95926;
    --series-3:       #199e70;
    --series-4:       #c98500;
    --gold:           #d9b84a;
    --gold-soft:      #2a230f;
    --good:           #2fb583;
    --good-soft:      #122b21;
    --warning-soft:   #33280c;
    --critical-soft:  #2f1616;
    --info-soft:      #1b2740;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
  }
}

/* Dark — the explicit in-app choice, resolved by app.js */
:root[data-theme-resolved="dark"] {
  color-scheme: dark;
  --surface-page:   #12161f;
  --surface-1:      #1b202c;
  --surface-2:      #202632;
  --surface-3:      #2a313f;
  --surface-inset:  #171b25;
  --text-primary:   #f1f3f7;
  --text-secondary: #b7bfcb;
  --text-muted:     #838ca0;
  --text-inverse:   #12161f;
  --border:         #333b4c;
  --border-strong:  #454f63;
  --border-focus:   #6e90d1;
  --accent:         #4a72c4;
  --accent-hover:   #6b8fd6;
  --accent-soft:    #1b2740;
  --series-1:       #4a72c4;
  --series-2:       #d95926;
  --series-3:       #199e70;
  --series-4:       #c98500;
  --gold:           #d9b84a;
  --gold-soft:      #2a230f;
  --good:           #2fb583;
  --good-soft:      #122b21;
  --warning-soft:   #33280c;
  --critical-soft:  #2f1616;
  --info-soft:      #17253a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is how every panel, modal and error in this app is
   toggled. Component rules set `display`, which would otherwise beat it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* The hero photo below intentionally breaks out to full viewport width
     (see .hero-banner__media). That trick can make the page very slightly
     wider than the viewport when a vertical scrollbar is present, which
     would otherwise show as a horizontal scrollbar; hidden here keeps the
     breakout purely visual instead of adding real horizontal scroll. */
  overflow-x: hidden;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Fade in once app.js has wired everything, so no half-built UI flashes. */
  opacity: 0;
  transition: opacity 200ms ease;
}
body.is-ready { opacity: 1; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-family: var(--font-headline); font-weight: 650; letter-spacing: -0.011em; }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
ul, ol, dl { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

/* One consistent, always-visible focus treatment. */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* For elements with no content for anyone, sighted or not (e.g. a form's
   hidden iframe submission target) -- unlike .sr-only, this removes the
   element from the accessibility tree entirely rather than just hiding it
   visually. */
.hidden-iframe { display: none; }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  /* A thin gold hairline — the brand's one accent color, used exactly once
     per page and nowhere near text, per the brand kit's "under ~10% of any
     screen, never a fill" rule. */
  border-top: 3px solid var(--gold);
}

.site-header__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--sp-3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; min-width: 0; }
/* The mark is drawn as a CSS mask (not an <img>) so its fill is a plain
   `background-color` — the exact same color value that colors the
   "KAITHI FINANCE" text beside it, guaranteed to match rather than two
   separately-maintained colors that can drift apart. It also makes the
   dark-mode swap (navy mark -> the brand kit's reversed white mark) a
   one-line color change instead of an image swap or filter hack.

   The mark is inlined as literal <svg fill="currentColor"> markup in the
   HTML (not an <img src> or a CSS mask-image on the external file) because
   this site is routinely opened straight from disk via file://, and a CSS
   mask referencing a separate .svg file is blocked there by CORS (every
   local file gets its own "null" origin) — the icon would silently fail to
   render. An inline <svg> has no such restriction since it's part of the
   document itself, and `currentColor` means one `color` declaration drives
   both the icon and the text. */
.brand__mark {
  /* height: auto (not a second fixed px value) lets the browser derive the
     mark's real height from its own viewBox aspect ratio (~1.48:1, wider
     than tall). A forced 68x68 square box let the mark render its true
     shape only within the middle ~46px, leaving visible empty padding
     above and below it and inflating the header bar's height for nothing;
     width-only sizing removes that dead space and lets the mark fill its
     box edge to edge. */
  flex: none; width: 68px; height: auto;
  color: var(--accent-hover);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__mark,
  :root:not([data-theme="light"]) .site-footer__mark { color: #fff; }
}
:root[data-theme-resolved="dark"] .brand__mark,
:root[data-theme-resolved="dark"] .site-footer__mark { color: #fff; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-family: var(--font-headline); font-weight: 700; font-size: 22px;
  letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
  /* Same color as .brand__mark, so the wordmark and the icon read as one
     unit — both navy-700, not the inherited near-black body ink. */
  color: var(--accent-hover);
}
.brand__tagline { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }

.theme-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-3); border-radius: var(--radius); border: 1px solid var(--border);
}
.theme-switch__btn {
  border: 0; background: transparent; color: var(--text-secondary);
  padding: 5px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; font-family: inherit;
  transition: background 120ms ease, color 120ms ease;
}
.theme-switch__btn:hover { color: var(--text-primary); }
.theme-switch__btn.is-active { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.theme-switch--large { margin-top: var(--sp-2); }
.theme-switch--large .theme-switch__btn { padding: 8px 18px; font-size: 14px; }

.nav-toggle {
  display: none; border: 1px solid var(--border); background: var(--surface-1);
  border-radius: var(--radius); width: 40px; height: 38px; cursor: pointer; padding: 0;
}
.nav-toggle__bars { display: grid; gap: 4px; justify-items: center; }
.nav-toggle__bars span { display: block; width: 17px; height: 1.5px; background: var(--text-primary); border-radius: 2px; }

.primary-nav { border-top: 1px solid var(--border); background: var(--surface-1); }
.primary-nav__list {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; gap: var(--sp-1); list-style: none; overflow-x: auto; scrollbar-width: thin;
}
.primary-nav__list a {
  display: block; padding: 11px var(--sp-3); font-size: 13.5px; font-weight: 550;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease;
}
.primary-nav__list a:hover { color: var(--text-primary); }
.primary-nav__list a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.site-main { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); }

.page { animation: page-in 240ms ease; }
.content-page { animation: page-in 240ms ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Headers and intros run the full content width — a narrow measure here just
   leaves a dead column on the right of every page. */
.page__header { margin-bottom: var(--sp-5); }
.page__title { font-size: 30px; letter-spacing: -0.022em; margin-bottom: var(--sp-3); }
.page__title:focus { outline: none; }
.page__lede { color: var(--text-secondary); font-size: 15.5px; }

.section { margin-top: var(--sp-6); }
.section__title { font-size: 19px; margin-bottom: var(--sp-2); }
.section__subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: var(--sp-4); }

.site-footer { border-top: 1px solid var(--border); background: var(--surface-1); margin-top: var(--sp-7); }
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--gutter); }

/* Brand on the left, links filling the space on the right, so the footer uses
   its full width instead of stacking everything into one narrow column. */
.site-footer__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-5) var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.site-footer__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-headline); font-weight: 700; font-size: 17px;
  letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 2px;
  color: var(--accent-hover);
}
.site-footer__mark {
  flex: none; width: 30px; height: auto; /* see .brand__mark: avoids the same square-box letterboxing */
  color: var(--accent-hover);
}
.site-footer__tagline { color: var(--text-muted); font-size: 13px; }
.site-footer__links {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5); margin: 0; justify-content: flex-end;
}
.site-footer__links a { font-size: 13.5px; color: var(--text-secondary); text-decoration: none; }
.site-footer__links a:hover { color: var(--accent); text-decoration: underline; }

/* Legal and copyright share the bottom row across the full width. */
.site-footer__bottom {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6); flex-wrap: wrap;
  padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.site-footer__legal { font-size: 12px; color: var(--text-muted); flex: 1 1 480px; margin: 0; }
.site-footer__copy { font-size: 12px; color: var(--text-muted); margin: 0; white-space: nowrap; }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Cards --- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-4);
}
.card--flush { box-shadow: none; }
.card__title { font-size: 16px; margin-bottom: var(--sp-2); }
.card__subtitle { color: var(--text-secondary); font-size: 13.5px; margin-bottom: var(--sp-4); }
.card__lede { color: var(--text-secondary); font-size: 13.5px; margin-bottom: var(--sp-4); }
fieldset.card { border: 1px solid var(--border); }

/* A <legend> punches a hole in its fieldset's border, so whatever horizontal
   padding it carries IS the gap between the text and the cut ends of that
   border. `.card__title` is shared with plain card headings and only has the
   2px the browser applies, which left the border line almost touching the
   first and last character when the class was reused on a legend — the text
   read as sitting on the rule rather than in a gap in it. The other two
   legend classes already pad themselves; this brings the shared one into
   line and states the intent in one place. */
legend.card__title,
legend.subpanel__legend,
legend.compare-card__legend {
  padding-inline: var(--sp-3);
  margin-inline-start: calc(var(--sp-3) * -1); /* keep text optically flush with the card's own padding */
}

/* --- Contact page: enquiry form + reach-us icons --- */
.contact-form .field-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
  .contact-form .field-row { grid-template-columns: 1fr; }
}
.contact-form .micro-note { margin-top: var(--sp-3); }
/* Reach us — one labelled row per channel, ordered phone, email, address.
   A <ul> rather than loose <p>s so it is announced as a 3-item list, and a
   grid per row so the label and value align in a column regardless of how
   long the value wraps. */
.contact-info { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.contact-info__row { display: flex; align-items: center; gap: var(--sp-3); }
.contact-info__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  font-size: 17px; line-height: 1;
}
.contact-info__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-info__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.contact-info__value {
  font-size: 15px; font-weight: 560; color: var(--accent-hover);
  text-decoration: none; overflow-wrap: anywhere;
}
a.contact-info__value:hover { text-decoration: underline; }
/* The address is not a link, so it takes the normal body colour rather than
   the accent that signals "this is clickable". */
.contact-info__value--plain { color: var(--text-primary); font-weight: 500; }

/* --- Hero result --- */
.card--hero {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-color: transparent; color: #fff;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-5);
}
.hero__label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.85; font-weight: 600; }
.hero__value {
  font-family: var(--font-headline);
  font-size: clamp(34px, 6vw, 48px); font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.hero__value--sm { font-size: clamp(26px, 4.5vw, 34px); }
.hero__meta { font-size: 13px; opacity: 0.9; }
.card--hero-sub {
  background: var(--surface-3); color: var(--text-primary);
  border: 1px solid var(--border); padding: var(--sp-4) var(--sp-5);
}
.card--hero-sub .hero__label { opacity: 1; color: var(--text-muted); }

/* --- Stat grid --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stat {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: 3px;
}
.stat--emphasis { border-color: var(--accent); background: var(--accent-soft); }
.stat__label { font-size: 12px; color: var(--text-muted); font-weight: 550; }
.stat__value { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.stat__note { font-size: 11.5px; color: var(--text-muted); }

.mini-stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mini-stat {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; min-width: 130px;
}
.mini-stat__label { font-size: 11.5px; color: var(--text-muted); }
.mini-stat__value { font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; }

/* --- Forms --- */
.field { margin-bottom: var(--sp-4); }
.field--compact { margin-bottom: var(--sp-3); }
.field--narrow { max-width: 130px; }
.field--inline { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 0; }
.field--inline .field__label { margin-bottom: 0; white-space: nowrap; }
.field--grow { flex: 1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.field__label {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: 13px; font-weight: 580; color: var(--text-secondary); margin-bottom: var(--sp-2);
}
.field__hint { font-size: 12px; color: var(--text-muted); margin: var(--sp-2) 0 0; }
.field__error { font-size: 12.5px; color: var(--critical); font-weight: 550; margin: var(--sp-2) 0 0; }
.field__error::before { content: "⚠ "; }
.field__optional { font-weight: 500; color: var(--text-muted); font-size: 12px; }

.input {
  width: 100%; padding: 9px 12px; font-family: inherit; font-size: 14.5px;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:hover { border-color: var(--text-muted); }
.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input.is-invalid { border-color: var(--critical); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--critical) 18%, transparent); }
.input--sm { padding: 6px 9px; font-size: 13.5px; width: auto; min-width: 130px; }
select.input { cursor: pointer; }
input[type="number"].input { font-variant-numeric: tabular-nums; }
textarea.input { resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.5; }

/* The element itself is the hit area and stays transparent; the visible bar is
   the track pseudo-element. That way the strip you can grab is 22px tall (44px
   on touch) while the bar still looks like a thin 4px line. */
.slider {
  /* margin-inline: 0 matters. Browsers apply a default 2px margin to
     input[type=range]; combined with width:100% that made every slider
     4px wider than the .field it sits in, so each of the ~10 slider fields
     overflowed its own box by 4px. Only `margin-top` was being set, so the
     UA's horizontal margin survived. */
  width: 100%; margin-top: var(--sp-2); margin-inline: 0; height: 22px;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer; border: 0; padding: 0;
}
.slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: var(--surface-3);
}
.slider::-moz-range-track {
  height: 4px; border-radius: 999px; background: var(--surface-3);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface-1); box-shadow: var(--shadow-sm);
  cursor: grab; margin-top: -7px; /* centres an 18px thumb on a 4px track */
}
.slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface-1);
  background: var(--accent); cursor: grab;
}
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

.value-out {
  font-size: 12.5px; font-weight: 620; color: var(--text-primary);
  background: var(--surface-3); padding: 1px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
}

.subpanel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-inset); padding: var(--sp-4); margin: 0 0 var(--sp-4);
}
.subpanel__legend { font-size: 13px; font-weight: 620; padding: 0 var(--sp-2); }
.subpanel__note { font-size: 12px; color: var(--text-muted); margin-bottom: var(--sp-3); }

.effective-rate {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3);
}
.effective-rate__label { font-size: 12.5px; font-weight: 580; color: var(--text-secondary); }
.effective-rate__label small { font-size: 11px; color: var(--text-muted); font-weight: 450; }
.effective-rate__value { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.form-actions, .action-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.action-bar { margin-bottom: var(--sp-4); }
.action-bar .table-meta { margin-right: auto; }

/* --- Buttons ---
   Several of these ship as <a href> (WhatsApp CTAs, "Check Your EMI",
   ghost links), which inherits two things from the browser's default
   anchor styling and from the sitewide `a` / `a:hover` rules unless a
   button class explicitly cancels them: the default underline, and — on
   hover specifically — `a:hover { color: var(--accent-hover) }`, whose
   specificity (an element + a pseudo-class) beats a single button class,
   even though it loses to a button class *combined* with :hover. So every
   `.btn` variant restates its own `color` inside its own :hover rule,
   not just its background — otherwise hover repaints the text navy
   instead of leaving it white, which on --btn-primary (whose hover
   background is that same navy) reads as the text vanishing. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 9px 16px; font-family: inherit; font-size: 14px; font-weight: 580;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }
.btn--ghost { background: var(--surface-1); color: var(--text-primary); border-color: var(--border-strong); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-3); border-color: var(--text-muted); color: var(--text-primary); }
.btn--danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.btn--danger:hover:not(:disabled) { background: var(--critical-soft); border-color: var(--critical); color: var(--critical); }
.btn--sm { padding: 6px 12px; font-size: 13px; }

.chip-btn {
  padding: 7px 14px; font-family: inherit; font-size: 13.5px; font-weight: 570;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: all 120ms ease;
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-btn--alt { border-style: dashed; }

/* Pill-shaped single-select radio group -- visually identical to .chip-btn,
   but backed by real <input type="radio"> elements so it submits as a
   normal form field and gets native keyboard/screen-reader support for
   free, instead of needing a JS click handler to fake the toggle state. */
.chip-radio-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.chip-radio__label {
  display: inline-block; padding: 7px 14px; font-family: inherit; font-size: 13.5px; font-weight: 570;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 999px;
  transition: all 120ms ease;
}
.chip-radio:hover .chip-radio__label { border-color: var(--accent); color: var(--accent); }
.chip-radio:has(input:checked) .chip-radio__label { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-radio:has(input:focus-visible) .chip-radio__label { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* --- Tables --- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.data-table caption.table-caption {
  caption-side: top; text-align: left; font-size: 12.5px; color: var(--text-muted);
  padding-bottom: var(--sp-3); font-style: italic;
}
.data-table th, .data-table td {
  padding: 10px var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top;
}
.data-table thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
  font-weight: 620; background: var(--surface-2); position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--border-strong);
}
.data-table tbody th { font-weight: 580; color: var(--text-secondary); }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
/* Numeric columns are right-aligned in BOTH the header and the body, so the
   column label sits directly over its figures instead of drifting left. */
.data-table .num,
.data-table thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .num--principal { color: var(--series-1); }
.data-table .num--interest { color: var(--series-2); }
.data-table .num--up { color: var(--critical); font-weight: 600; }
.data-table .num--down { color: var(--good); font-weight: 600; }
.data-table .row--emphasis { background: var(--accent-soft); }
.data-table .row--emphasis:hover { background: var(--accent-soft); }
.data-table .row--emphasis th, .data-table .row--emphasis td { font-weight: 600; }
/* Prose comparison tables in the Guide: everything reads left-to-right. */
.data-table--prose th, .data-table--prose td { text-align: left; vertical-align: top; }
.data-table--prose th:first-child, .data-table--prose td:first-child { min-width: 160px; }

.data-table--compare th:first-child, .data-table--compare td:first-child { min-width: 170px; }
/* Each loan's column header sits over right-aligned figures, so it is right
   aligned too. The row-label column stays left. Prose comparison tables in the
   Guide keep their cells left-aligned because those cells carry no `.num`. */
.data-table--compare thead th { text-align: right; }
.data-table--compare thead th:first-child { text-align: left; }
.data-table--compare .compare-card__dot { margin-right: var(--sp-2); }
.data-table--amort { min-width: 700px; }

.cell--best { background: var(--good-soft); }
.best-badge {
  display: inline-block; margin-left: var(--sp-2); padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--good); color: #fff;
}
.cell-note { display: block; font-size: 11px; color: var(--text-muted); font-weight: 450; margin-top: 3px; text-align: right; }

.table-controls {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: end;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
}
.table-controls__actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.table-meta { font-size: 12.5px; color: var(--text-muted); margin: 0 0 var(--sp-3); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-4); }
.pagination__info { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* --- Charts --- */
/* Grid and flex children default to min-width:auto, so a canvas that Chart.js
   has sized in pixels can force its track wider than 1fr and push the whole
   page into horizontal overflow. min-width:0 lets these tracks shrink again. */
.chart-pair > *,
.list-grid--wide > *,
.calc-layout > *,
.scenario-grid > *,
.compare-inputs > *,
.stat-grid > *,
.quick-grid > *,
.winner-grid > *,
.tip-grid > *,
.glossary-list > *,
.guide-columns > *,
.radio-group > *,
.chart-holder { min-width: 0; }

.chart-holder { position: relative; height: 300px; margin-top: var(--sp-4); }
.chart-holder--doughnut { height: 260px; }
.chart-holder--short { height: 130px; }
.chart-holder > canvas { max-width: 100%; }
.chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.chart-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 100%; padding: var(--sp-5); text-align: center;
  background: var(--surface-inset); border: 1px dashed var(--border-strong); border-radius: var(--radius);
  color: var(--text-muted); font-size: 13px;
}
.chart-fallback__icon { font-size: 22px; opacity: 0.5; }

/* --- Callouts, alerts, flags --- */
.callout {
  border-left: 3px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-inset); padding: var(--sp-4); margin: var(--sp-4) 0; font-size: 14px;
}
.callout__label {
  display: block; font-size: 11.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-2);
}
.callout--example { border-left-color: var(--series-1); background: var(--accent-soft); }
.callout--warn { border-left-color: var(--warning); background: var(--warning-soft); }
.callout--info { border-left-color: var(--series-1); background: var(--info-soft); }
.callout--regulatory { border-left-color: var(--serious); background: var(--surface-3); }

.alert {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); margin-bottom: var(--sp-4); font-size: 14px;
}
.alert--warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.alert--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.alert strong { display: inline; }

.flag-stack { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; }
.flag {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  font-size: 13.5px; border: 1px solid var(--border); background: var(--surface-inset);
}
.flag__icon {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; margin-top: 1px;
}
.flag--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.flag--info .flag__icon { background: var(--series-1); }
.flag--warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.flag--warn .flag__icon { background: var(--serious); }
.flag--bad { background: var(--critical-soft); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.flag--bad .flag__icon { background: var(--critical); }
.flag--good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.flag--good .flag__icon { background: var(--good); }

/* --- Pills & badges --- */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 620; border: 1px solid transparent;
}
.pill--good { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.pill--ok   { background: var(--info-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.pill--warn { background: var(--warning-soft); color: var(--serious); border-color: color-mix(in srgb, var(--serious) 45%, transparent); }
.pill--bad  { background: var(--critical-soft); color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.pill--muted { background: var(--surface-3); color: var(--text-muted); border-color: var(--border); }

.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 620; text-transform: uppercase; letter-spacing: 0.05em;
}
.badge--soft { background: var(--surface-3); color: var(--text-muted); margin-left: var(--sp-2); }
.badge--best { background: var(--good); color: #fff; }

/* --- Swatches shared with the chart palette --- */
.swatch-0 { background: var(--series-1); }
.swatch-1 { background: var(--series-2); }
.swatch-2 { background: var(--series-3); }
.swatch-3 { background: var(--series-4); }

/* ==========================================================================
   5. Feature blocks
   ========================================================================== */

/* --- Calculator layout --- */
.calc-layout { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: var(--sp-5); align-items: start; }
/* The whole left column sticks, so an optional sidebar ad rides along with the
   input panel instead of scrolling away from it. */
.calc-column { position: sticky; top: calc(var(--header-height) + var(--sp-6)); min-width: 0; }
.card--inputs { margin-bottom: 0; }
.results { min-width: 0; }

/* --- Principal / interest split --- */
.split { margin-bottom: var(--sp-4); }
.split__legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-3); }
.split__item { display: flex; align-items: center; gap: var(--sp-2); font-size: 13.5px; color: var(--text-secondary); }
.split__item strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.split__swatch, .compare-card__dot {
  width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block;
}
.split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 2px; }
.split-bar__part { display: block; height: 100%; }
.split-bar__part--principal { background: var(--series-1); }
.split-bar__part--interest { background: var(--series-2); }

.insight {
  font-size: 14.5px; color: var(--text-primary); background: var(--accent-soft);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.insight:empty { display: none; }

/* --- Dashboard --- */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.quick-card {
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.quick-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.quick-card__icon {
  width: 34px; height: 34px; border-radius: var(--radius); background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; font-size: 17px; font-weight: 700; margin-bottom: var(--sp-2);
}
.quick-card__title { font-size: 15.5px; font-weight: 640; color: var(--text-primary); }
.quick-card__text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.quick-card__cta { font-size: 13px; color: var(--accent); font-weight: 580; margin-top: auto; padding-top: var(--sp-2); }

.list-grid { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
/* Full-width variant used on Home, where this list is no longer in a column pair. */
.list-grid--wide {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3);
}
.list-card {
  text-align: left; font-family: inherit; cursor: pointer; width: 100%;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px;
  transition: border-color 120ms ease, background 120ms ease;
}
.list-card:hover { border-color: var(--accent); background: var(--surface-2); }
/* .list-card is used both as a <button> (JS-driven cards that apply a preset)
   and as an <a> (the crawlable calculator directory and the related-links
   grids). Without this, the anchor variants picked up the default link
   underline and link colour and rendered inconsistently next to the
   identical-looking button variants. */
a.list-card { text-decoration: none; color: inherit; }
a.list-card:hover .list-card__title { color: var(--accent); }
.list-card__title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.list-card__detail { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); }
.tip-card {
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--series-3);
  border-radius: var(--radius); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tip-card:hover { box-shadow: var(--shadow); }
.tip-card__title { font-size: 14px; font-weight: 640; }
.tip-card__text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.tip-card__cta { font-size: 12.5px; color: var(--accent); font-weight: 580; margin-top: auto; }

/* --- Breakdown rows (eligibility) --- */
.breakdown { display: flex; flex-direction: column; }
.breakdown-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.breakdown-row:last-child { border-bottom: 0; }
.breakdown-row--emphasis {
  background: var(--accent-soft); margin: var(--sp-2) calc(var(--sp-4) * -1);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border-bottom: 0;
}
.breakdown-row__label { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text-secondary); }
.breakdown-row__label small { font-size: 11.5px; color: var(--text-muted); }
.breakdown-row__value { font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown-row--emphasis .breakdown-row__value { font-size: 17px; color: var(--accent); }

/* --- Allocation (affordability) --- */

/* --- Comparison --- */
.compare-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.compare-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4); margin: 0;
}
.compare-card__legend { display: flex; align-items: center; gap: var(--sp-2); font-size: 13.5px; font-weight: 650; padding: 0 var(--sp-2); }
.compare-card__remove { margin-top: var(--sp-2); }

.winner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.winner-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: 3px;
}
.winner-card__title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 620; }
.winner-card__name { font-size: 15px; font-weight: 640; }
.winner-card__value { font-size: 13.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* --- Prepayment scenarios --- */
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.scenario-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5);
}
.scenario-card--best { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.scenario-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.scenario-card__title { font-size: 15.5px; }
.scenario-card__assumption {
  font-size: 12.5px; color: var(--text-secondary); background: var(--surface-inset);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
}
.scenario-card__assumption-label { font-weight: 650; color: var(--text-primary); }
.scenario-list { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); font-size: 13.5px; margin: 0; }
.scenario-list dt { color: var(--text-secondary); }
.scenario-list dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.scenario-list dt.is-emphasis, .scenario-list dd.is-emphasis { color: var(--accent); font-weight: 680; font-size: 15px; }
.scenario-list__change { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 450; }

/* --- Simulator --- */
.radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.radio-card {
  display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--sp-4);
  background: var(--surface-1); transition: border-color 120ms ease, background 120ms ease;
}
.radio-card:hover { border-color: var(--accent); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-card input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.radio-card__body { display: flex; flex-direction: column; gap: 3px; }
.radio-card__title { font-size: 13.5px; font-weight: 620; }
.radio-card__text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.assumption-note {
  font-size: 12.5px; color: var(--text-secondary); background: var(--surface-inset);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: var(--sp-3); margin-top: var(--sp-4);
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* --- Guide --- */
.guide-section { margin-bottom: var(--sp-7); }
.guide-category { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: var(--sp-5) 0 var(--sp-3); }
.accordion-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.accordion { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  padding: var(--sp-4); background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.accordion__trigger:hover { background: var(--surface-2); }
.accordion__title { flex: 1; }
.accordion__icon {
  flex: none; width: 18px; height: 18px; position: relative; transition: transform 180ms ease;
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: var(--text-muted); border-radius: 2px;
}
.accordion__icon::before { top: 8px; left: 2px; width: 14px; height: 2px; }
.accordion__icon::after { top: 2px; left: 8px; width: 2px; height: 14px; transition: opacity 180ms ease; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { opacity: 0; }
.accordion__panel { border-top: 1px solid var(--border); }
.accordion__body { padding: var(--sp-5); }

.guide-text { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }
.guide-subhead { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: var(--sp-5) 0 var(--sp-2); }
.guide-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); font-size: 14px; color: var(--text-secondary); }
.guide-list li { padding-left: var(--sp-5); position: relative; line-height: 1.55; }
.guide-list li::before { content: "•"; position: absolute; left: var(--sp-2); color: var(--text-muted); }
.guide-list--check li::before { content: "✓"; color: var(--good); font-size: 12px; }
.guide-list--pro li::before { content: "+"; color: var(--good); font-weight: 700; }
.guide-list--con li::before { content: "−"; color: var(--serious); font-weight: 700; }
.guide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.guide-block { min-width: 0; }
.guide-note { font-size: 13.5px; color: var(--text-secondary); font-style: italic; margin-top: var(--sp-3); }

.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  background: var(--surface-3); color: var(--text-secondary); border: 1px solid var(--border);
}
.chip--secured { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.chip--unsecured { background: var(--warning-soft); color: var(--serious); border-color: color-mix(in srgb, var(--serious) 40%, transparent); }
.chip--muted { color: var(--text-muted); }

.definition-grid { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--sp-3) var(--sp-5); font-size: 14px; }
.definition-grid dt { font-weight: 620; color: var(--text-primary); }
.definition-grid dd { margin: 0; color: var(--text-secondary); line-height: 1.6; }

.doc-groups { display: flex; flex-direction: column; gap: var(--sp-4); }
.doc-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.doc-list li { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-4); border-left: 2px solid var(--border); }
.doc-list__name { font-size: 14px; font-weight: 600; }
.doc-list__why { font-size: 13px; color: var(--text-muted); }

.link-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.link-list li { display: flex; flex-direction: column; gap: 2px; }
.link-list__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: 14px; text-decoration: none; }
.link-list__link:hover { text-decoration: underline; }
.link-list__ext { font-size: 11px; opacity: 0.7; }
.link-list__desc { font-size: 13px; color: var(--text-muted); }

.micro-note { font-size: 11.5px; color: var(--text-muted); font-style: italic; }

/* ==========================================================================
   Ad slots
   --------------------------------------------------------------------------
   An ad container has NO presence at all until js/ads.js marks it active.
   Not a margin, not a border, not a pixel of height — so while AdSense is
   switched off (the default) the layout is byte-for-byte what it would be
   without these containers in the markup.

   Once active, a slot adopts the same card language as the rest of the page:
   same surface, same border, same radius, same rhythm. It reads as a panel
   that belongs here rather than something bolted on.
   ========================================================================== */
.ad-slot { display: none; }

.ad-slot[data-ad-active] {
  display: block;
  margin: var(--sp-5) 0;
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Reserved height prevents the ad from shoving content down as it fills.
     The value is keyed to the shape actually requested (set by ads.js), so the
     space held matches what arrives instead of guessing. */
  min-height: 130px;
  text-align: center;
}
/* A phone gets a banner: ~100px of ad plus the label, not a 250px rectangle
   dropped into the middle of someone's calculation. */
.ad-slot[data-ad-shape="horizontal"] { min-height: 118px; }
.ad-slot[data-ad-shape="auto"] { min-height: 270px; }
.ad-slot[data-ad-shape="vertical"] { min-height: 620px; }

/* Always visible, always honest: this is an ad, not a recommendation. */
.ad-slot__label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
  text-align: left;
}

.ad-slot .adsbygoogle { display: block; width: 100%; }

/* The sidebar unit lives under the sticky input panel on wide screens only.
   Below 1101px there is no column for it, so it collapses again.

   Both selectors are needed: `.ad-slot[data-ad-active]` above has a higher
   specificity than a lone `.ad-slot--side`, so without the attribute here the
   desktop-only unit would render full-width on phones. */
.ad-slot--side,
.ad-slot--side[data-ad-active] { display: none; }
@media (min-width: 1101px) {
  .ad-slot--side[data-ad-active] {
    display: block;
    margin-top: var(--sp-4);
    margin-bottom: 0;
    min-height: 320px;
  }
}

/* The sitewide unit sits below all page content, so it can never push anything
   the reader is using. It only needs separating from the content above it. */
.ad-slot--footer[data-ad-active] {
  max-width: var(--content-max);
  margin: var(--sp-6) auto 0;
  padding-inline: var(--gutter);
  background: transparent;
  border: 0;
  border-radius: 0;
}


/* Ads never sit flush against a row of buttons. On a phone the action bars are
   full-width, and an ad directly beneath one invites a mis-tap. The calculator's
   unit follows the whole results layout, whose last child is the action bar. */
.calc-layout + .ad-slot[data-ad-active],
.action-bar + .ad-slot[data-ad-active] { margin-top: var(--sp-7); }

/* --- FAQ (native <details>, so it works without JavaScript) --- */
.faq { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq__item {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.faq__q {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { font-size: inherit; font-weight: inherit; flex: 1; margin: 0; }
.faq__q::after {
  content: "+"; flex: none; font-size: 20px; font-weight: 400;
  color: var(--text-muted); line-height: 1; transition: transform 160ms ease;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:hover { background: var(--surface-2); }
.faq__item[open] .faq__q { border-bottom: 1px solid var(--border); }
.faq__a { padding: var(--sp-4); font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }
.faq__a strong { color: var(--text-primary); }

/* --- Coverage summary --- */
.coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); }
.coverage > * { min-width: 0; }
.coverage .guide-subhead { margin-top: 0; }

/* --- Search bars (Guide, Glossary) --- */
.search-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.search-bar .field { flex: 1 1 280px; }
.search-bar .table-meta { margin: 0; white-space: nowrap; }

/* --- Glossary --- */
.glossary-controls { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.glossary-item { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
.glossary-item__term { font-size: 15px; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.glossary-item__full { font-size: 12px; font-weight: 450; color: var(--text-muted); }
.glossary-item__def { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* --- Saved --- */
.saved-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.saved-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.saved-card__main { min-width: 0; flex: 1; }
.saved-card__title { font-size: 15px; margin-bottom: 2px; }
.saved-card__detail { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin: 0; }
.saved-card__meta { font-size: 11.5px; color: var(--text-muted); margin: 3px 0 0; }
.saved-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.empty-state {
  padding: var(--sp-6); text-align: center; color: var(--text-muted); font-size: 14px;
  background: var(--surface-inset); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}

.disclaimer-inline {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}

/* ==========================================================================
   6. Overlays
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16, 15, 10, 0.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--sp-4);
  animation: fade-in 160ms ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: min(480px, 100%); max-height: 90vh; overflow: auto;
  animation: modal-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.modal__title { font-size: 17px; }
.modal__close {
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm);
}
.modal__close:hover { background: var(--surface-3); color: var(--text-primary); }
.modal__body { padding: 0 var(--sp-5) var(--sp-4); }
.modal__text { font-size: 14px; color: var(--text-secondary); }
.modal__footer { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); }
body.is-modal-open { overflow: hidden; }

.toast {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translate(-50%, 12px); z-index: 120;
  background: var(--text-primary); color: var(--surface-1);
  padding: var(--sp-3) var(--sp-5); border-radius: 999px; font-size: 13.5px; font-weight: 550;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 220ms ease, transform 220ms ease;
  max-width: calc(100vw - var(--sp-6));
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--bad { background: var(--critical); color: #fff; }
.toast--warn { background: var(--serious); color: #fff; }

/* --------------------------------------------------------------------------
   Pinned result bar — small screens only.

   Carries the same gradient as the hero card so it reads as the same object,
   just docked. Hidden entirely above 900px, where the results already sit
   beside the form and never scroll out of reach.
   -------------------------------------------------------------------------- */
.result-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none;
  width: 100%;
  align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  /* Sit above the home indicator on notched phones. */
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  border: 0; border-top: 1px solid color-mix(in srgb, #fff 22%, transparent);
  font-family: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 -4px 16px -6px rgba(16, 15, 10, 0.35);
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 900px) {
  .result-bar { display: flex; }
}
.result-bar.is-visible { transform: none; }

.result-bar__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.result-bar__label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-bar__value {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.result-bar__cta {
  display: flex; align-items: center; gap: var(--sp-2); flex: none;
  font-size: 12.5px; font-weight: 600;
  padding: 7px var(--sp-3);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.result-bar:active .result-bar__cta { background: rgba(255, 255, 255, 0.26); }
.result-bar__arrow { font-size: 14px; line-height: 1; }

/* Keep everything clear of the docked bar.

   The bar is fixed to the viewport, so it overlays whatever happens to be at
   the bottom of the document — which is the FOOTER, not the main content.
   Padding the footer's own inner box extends its background down behind the
   bar, so the last line of text always clears it and the bar never sits on top
   of the footer links or an ad placed above them. */
body.has-result-bar .site-main { padding-bottom: var(--sp-5); }
body.has-result-bar .site-footer__inner { padding-bottom: 104px; }
body.has-result-bar .toast { bottom: 88px; }

/* Only the very narrowest phones lose the CTA wording; 360–375px keeps it. */
@media (max-width: 340px) {
  .result-bar__value { font-size: 20px; }
  .result-bar__cta-text { display: none; }
  .result-bar__cta { padding: 8px 10px; }
}

.tooltip { position: relative; display: inline-flex; }
.tooltip__trigger {
  width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-3); color: var(--text-muted); cursor: help;
  font-size: 11px; font-weight: 700; line-height: 1; padding: 0; font-family: inherit;
}
.tooltip__trigger:hover { border-color: var(--accent); color: var(--accent); }
.tooltip__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max(240px, 22vw); max-width: 320px; z-index: 70;
  background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: var(--sp-3); font-size: 12.5px; font-weight: 400; line-height: 1.55;
  box-shadow: var(--shadow-lg); text-align: left;
}
.tooltip__bubble strong { color: var(--text-primary); }

/* ==========================================================================
   7. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Forced-colors: keep meaning visible when the palette is replaced. */
@media (forced-colors: active) {
  .card, .stat, .accordion, .input, .btn { border: 1px solid CanvasText; }
  .cell--best, .row--emphasis { forced-color-adjust: none; }
}

/* ==========================================================================
   8. Kaithi Finance — branding, conversion & lead generation

   Everything below is additive: it styles the hero, trust section, dropdown
   navigation, WhatsApp CTAs and the lead-capture / "Your Loan Summary"
   sections added under each calculator's results. Nothing above this line
   was restructured to make room for it.
   ========================================================================== */

:root {
  /* WhatsApp brand green — fixed, not themed, same as --good/--critical. */
  --whatsapp: #25d366;
  --whatsapp-hover: #1fb958;
  /* --gold / --gold-soft are the Kaithi Finance brand kit's gold accent —
     defined once, with light/dark values, in the design-tokens block up top. */
}

/* --- Header WhatsApp CTA -------------------------------------------- */
.header-whatsapp { flex: none; }
.btn--whatsapp {
  background: var(--whatsapp); color: #fff; border-color: transparent;
}
.btn--whatsapp:hover:not(:disabled) { background: var(--whatsapp-hover); color: #fff; }
.btn--lg { padding: 13px 24px; font-size: 15.5px; }

/* --- Hero ------------------------------------------------------------ */
/* A full-bleed photo banner (spans the whole browser width, ignoring the
   page's own max-width/side gutters). Mobile-first: below the tablet
   breakpoint the headline sits in normal flow underneath a short, cropped
   strip of the photo, in the page's own background/text colors — there
   isn't enough width there to overlay this much text on the image and
   keep it both legible and uncramped. From 760px up, responsive.css
   overlays the same content directly on the photo instead (see the
   min-width query there), using its own fixed colors independent of the
   site's light/dark toggle, since the photo's fade is always light. */
.hero-banner { margin-bottom: var(--sp-5); }
.hero-banner__media {
  /* Full-bleed breakout: shift the media div so its left/right edges sit
     at the viewport edges regardless of how deeply nested or padded its
     parent (.site-main) is. `left: 50%` moves it right by half of ITS OWN
     containing block's width; the matching `margin-left: -50vw` then pulls
     it back left by half of the actual VIEWPORT width — the difference
     between those two is exactly the page's own side padding, so the net
     effect cancels it out and the photo reaches both edges. */
  position: relative; left: 50%; right: 50%;
  width: 100vw; margin-left: -50vw; margin-right: -50vw;
  overflow: hidden;
  background: linear-gradient(160deg, #eef2fb, #ffffff);
}
.hero-banner__media picture { display: block; }
.hero-banner__media img {
  display: block; width: 100%;
  /* Mobile crop (below 760px this strip sits above the headline rather than
     behind it). The photo is a 2:1 landscape, so a short strip at phone
     width showed the whole scene at postage-stamp scale — the family, which
     is the reason the photo is here at all, ended up a small detail among
     sky and road. A taller box plus a crop weighted toward the right of the
     frame brings the people forward and keeps the painted "Brighter
     Tomorrow" line in shot; cropping any tighter than this starts clipping
     that line off the right edge. */
  height: clamp(250px, 62vw, 380px);
  object-fit: cover; object-position: 58% 60%;
}
/* The strip previously ended on a hard horizontal edge, which is what made
   it read as a banner pasted above the page rather than part of the hero.
   A short fade into the page background on its bottom edge joins the two.
   Only below 760px — from there up the photo is the hero's background and
   the text sits on it, so there is no seam to hide. */
@media (max-width: 759.98px) {
  .hero-banner__media { position: relative; }
  .hero-banner__media::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 56px; pointer-events: none;
    /* Fades to the page background itself, so the seam disappears in dark
       mode (#12161f) exactly as it does in light (#f3f5f8). */
    background: linear-gradient(to bottom, transparent, var(--surface-page));
  }
}
.hero-banner__content { padding: var(--sp-4) 0 0; }
.hero-banner__brand {
  font-size: clamp(28px, 5vw, 40px); font-weight: 750; letter-spacing: -0.026em;
  color: var(--accent-hover); margin-bottom: 2px;
}
/* The keyword line inside the hero H1. It replaces the old tagline <p> that
   sat directly below the wordmark, and deliberately inherits that element's
   exact type scale/colour so the hero reads identically — the only change is
   that these words are now inside the H1 where they count for ranking. The
   `display:block` + weight/size reset stop it inheriting the 40px wordmark
   styling from its H1 parent. */
.hero-banner__h1-sub {
  display: block;
  font-size: clamp(15px, 2.2vw, 19px); font-weight: 620; letter-spacing: normal;
  color: var(--text-secondary); margin-bottom: var(--sp-3);
}
.hero-banner__tagline {
  font-size: clamp(15px, 2.2vw, 19px); font-weight: 620;
  color: var(--text-secondary); margin-bottom: var(--sp-3);
}
.hero-banner__message { max-width: 60ch; margin-bottom: var(--sp-4); color: var(--text-secondary); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-header__keywords {
  font-size: 12.5px; color: var(--text-muted); max-width: 68ch; margin-top: var(--sp-4);
}

/* --- Trust section ----------------------------------------------------- */
.trust-section { margin-bottom: var(--sp-6); }
.about-note { margin-bottom: var(--sp-6); }
.trust-grid {
  /* Fixed at 3 columns (not auto-fit) so the 6 cards form two even rows
     instead of an unbalanced 5-then-1 wrap. responsive.css steps this down
     to 2 columns and then 1 as the viewport narrows. */
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.trust-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.trust-card__icon { font-size: 24px; display: block; margin-bottom: var(--sp-2); }
.trust-card__title { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
.trust-card__text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* --- Dropdown navigation (Calculators / Guides) ------------------------ */
.nav-dropdown { position: relative; }
.nav-dropdown__toggle {
  display: flex; align-items: center; gap: 4px;
  padding: 11px var(--sp-3); font-size: 13.5px; font-weight: 550; font-family: inherit;
  color: var(--text-secondary); background: transparent; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color 120ms ease;
}
.nav-dropdown__toggle:hover { color: var(--text-primary); }
.nav-dropdown__caret { font-size: 10px; transition: transform 140ms ease; }
.nav-dropdown.is-open .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown.is-open .nav-dropdown__toggle { color: var(--accent); }

.nav-dropdown__menu {
  list-style: none; margin: 0; padding: var(--sp-2);
  position: absolute; top: 100%; left: 0; min-width: 240px; z-index: 65;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
}
.nav-dropdown.is-open .nav-dropdown__menu { display: block; }
.nav-dropdown__menu a {
  display: block; padding: 9px 11px; font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-dropdown__menu a:hover { background: var(--accent-soft); color: var(--accent); }

/* Note: no CSS-only :hover reveal here. The menu is positioned with
   `position: fixed` by leads.js at the moment it opens (see initSiteNav) to
   escape .primary-nav__list's horizontal scroll clipping, so opening it must
   go through the click/keyboard toggle rather than a pure-CSS :hover rule. */

/* --- Lead capture: "Your Loan Summary" + Name / Mobile / City form ----- */
.lead-capture {
  display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-6);
}
.lead-summary {
  background: linear-gradient(160deg, var(--gold-soft) 0%, var(--surface-1) 70%);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
}
.lead-summary__stats { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.lead-summary__stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px dashed var(--border);
}
.lead-summary__stat.is-emphasis .lead-summary__stat-value { color: var(--accent); font-size: 20px; }
.lead-summary__stat-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 560; }
.lead-summary__stat-value { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.lead-summary__warning { margin: var(--sp-3) 0; }
.lead-summary__insight {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: var(--sp-3) 0;
}
.lead-summary__cta { width: 100%; }

.lead-form-card { display: flex; flex-direction: column; }
.lead-form-card__intro { color: var(--text-secondary); font-size: 13.5px; margin-bottom: var(--sp-4); }
.lead-form { display: flex; flex-direction: column; }
.btn--lead { min-width: 160px; }
.lead-form__success {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius);
  background: var(--good-soft); color: var(--text-primary); font-size: 13.5px; line-height: 1.5;
}
.lead-form__error {
  margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius);
  background: var(--critical-soft); color: var(--text-primary); font-size: 13.5px; line-height: 1.5;
}
.lead-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.lead-privacy-note,
.enquiry-form__note { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.5; }

.lead-nudge {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-4); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.lead-nudge__text p { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }
.lead-nudge__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Footer branding -----------------------------------------------------
   The footer grew from "brand + one link list" to "brand + three link
   columns" (Calculators, Guides, More), so .site-footer__top moves from a
   two-item flex row to a grid; each nav's own .site-footer__links becomes a
   vertical list instead of the old right-aligned single row. */
.site-footer__top {
  /* The calculators list carries the most links (13), so its column gets
     extra width to comfortably hold the 2-column split below instead of
     being squeezed to the same width as the shorter Guides/More lists. */
  display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1.3fr) minmax(140px, 1fr) minmax(140px, 1fr);
  gap: var(--sp-5) var(--sp-6); align-items: start;
}
.site-footer__top .site-footer__links {
  flex-direction: column; justify-content: flex-start; gap: var(--sp-2);
}
/* The Calculators column has more than twice as many links as any other
   footer column, which made it — and so the whole footer — much taller
   than it needed to be. Wrapping it into 2 sub-columns keeps every link
   (all still matter for SEO and for reaching every calculator) while
   roughly halving that column's height instead of dropping links. */
.site-footer__links--split {
  display: block; column-count: 2; column-gap: var(--sp-4);
}
.site-footer__links--split li { margin-bottom: var(--sp-2); break-inside: avoid; }
.site-footer__about { max-width: 320px; }
.site-footer__message { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: var(--sp-2) 0 var(--sp-3); }
.footer-whatsapp { display: inline-flex; }
.site-footer__col-title { font-size: 12.5px; font-weight: 650; color: var(--text-primary); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; }

/* --- SEO landing / guide article content (calculator + guide pages) ----- */
.article-content { max-width: 78ch; }
.article-content h2 { font-size: 21px; margin: var(--sp-6) 0 var(--sp-2); }
.article-content h3 { font-size: 16px; margin: var(--sp-4) 0 var(--sp-2); }
.article-content p { color: var(--text-secondary); line-height: 1.65; margin-bottom: var(--sp-3); }
.article-content ul, .article-content ol { color: var(--text-secondary); line-height: 1.65; margin: 0 0 var(--sp-3) var(--sp-5); }
.article-content li { margin-bottom: var(--sp-1); }
.article-content table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0 var(--sp-4); }
.article-content th, .article-content td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: 13.5px; }
.article-content th { color: var(--text-muted); font-weight: 600; }
/* Rate / EMI-per-lakh reference tables inside articles. These are wide by
   nature (5-6 numeric columns), so they scroll horizontally on a phone
   rather than squashing the figures into unreadable columns. */
.article-content .table-scroll { margin: var(--sp-3) 0 var(--sp-2); }
.article-content .table-scroll table { margin: 0; min-width: 520px; }
.article-content tbody th { color: var(--text-primary); font-weight: 620; white-space: nowrap; }
.article-content .table-note { font-size: 12px; color: var(--text-muted); margin: 0 0 var(--sp-4); }

/* --- Breadcrumbs (generated sub-pages) -----------------------------------
   Visible breadcrumbs paired with BreadcrumbList schema. Google renders the
   trail in place of the raw URL in Indian SERPs, which measurably helps CTR
   on long paths like /guides/home-loan-guide/. */
.breadcrumbs { margin: 0 0 var(--sp-3); font-size: 12.5px; color: var(--text-muted); }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "›"; color: var(--text-muted); opacity: 0.7; }
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-muted); }
.lang-toggle {
  display: inline-flex; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.lang-toggle button {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-secondary); font-size: 12.5px; font-weight: 580; cursor: pointer;
}
.lang-toggle button.is-active { background: var(--accent); color: #fff; border-color: transparent; }

/* --- Calculator loan-type horizontal tabs --------------------------------
   Replaces the old header "Calculators" dropdown: on each of the 9
   loan-type calculator pages, this row of real links (each a separate,
   individually-indexable page) lets a visitor switch loan type without a
   dropdown. Horizontally scrollable so it never wraps awkwardly, even with
   all 9 tabs, on narrow phones. */
.calc-type-tabs {
  margin: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.calc-type-tabs__list {
  display: flex; gap: var(--sp-1);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 1px;
  margin: 0; list-style: none;
}
.calc-type-tabs__list::-webkit-scrollbar { height: 4px; }
.calc-type-tabs__list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.calc-type-tabs__tab {
  flex: 0 0 auto;
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  font-size: 13.5px; font-weight: 580; white-space: nowrap;
  color: var(--text-secondary);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.calc-type-tabs__tab:hover { color: var(--text-primary); text-decoration: none; }
.calc-type-tabs__tab.is-active,
.calc-type-tabs__tab[aria-current="page"] {
  color: var(--accent); border-color: var(--accent); font-weight: 650;
}

/* --- Fixed loan type (dropdown removed) -----------------------------------
   On the 9 per-type calculator pages, the loan type is already chosen by
   which page (and tab) the visitor is on, so the old "Loan type" dropdown
   inside the form is redundant and is hidden (see build.py). What remains
   in its place is just the short descriptive hint line, styled here as a
   compact intro rather than a form field, so removing the field doesn't
   leave awkward empty label space above it. */
.field--loan-type-fixed {
  margin-bottom: var(--sp-4);
}
.field__hint--loan-type {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   Scroll motion — hero parallax + section reveal
   Driven by js/motion.js. Read that file's header first: the key contract
   is that every rule here is scoped under `.motion-ready`, a class only
   that script sets, and only after it has confirmed the visitor has not
   asked for reduced motion. Nothing below can hide content on its own, so
   if the script never runs the page renders exactly as it did before.
   ========================================================================== */

/* Parallax. The transform itself is written inline by the script on each
   frame; all this does is promote the image to its own compositor layer so
   those writes never touch layout or paint. `will-change` is applied only
   while the effect is actually running (the script adds .has-parallax and
   removes it below 760px) rather than sitting on the element permanently,
   which would hold a layer for no reason on phones. */
.hero-banner__media img.has-parallax {
  will-change: transform;
  /* 100% + the SLACK_RATIO constant in js/motion.js (0.14). The image is
     drawn taller than its frame purely to give the parallax somewhere to
     travel; the script keeps it translated within that slack so an edge is
     never exposed. Keep these two numbers in step — a smaller height here
     than the script expects would show a gap at the top of the hero on
     scroll. The frame itself already has overflow:hidden. */
  height: 108%;
}

/* Reveal. The starting state is deliberately gentle — 14px and a slight
   fade. Anything larger reads as a page that is assembling itself, which
   is the opposite of the calm a finance tool wants. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  /* Released once the element has arrived: keeping a compositor layer per
     revealed section would cost memory for an animation that is over. */
  will-change: auto;
}

/* A short stagger between siblings, so a row of cards arrives as a sequence
   rather than one block. Capped at six: past that the last card waits long
   enough to read as lag rather than choreography. */
.motion-ready [data-reveal-stagger] > * { transition-delay: 0ms; }
.motion-ready [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.motion-ready [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 60ms; }
.motion-ready [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 120ms; }
.motion-ready [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 180ms; }
.motion-ready [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 240ms; }
.motion-ready [data-reveal-stagger].is-revealed > *:nth-child(n+6) { transition-delay: 300ms; }

/* Belt and braces: if the OS preference changes after load, or a browser
   applies this query without the script having seen it, every element is
   forced back to its resting state immediately. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-banner__media img.has-parallax {
    will-change: auto;
    transform: none !important;
  }
}

/* ==========================================================================
   Touch target sizing
   Audited at 390px with a touch pointer. WCAG 2.2 AA (2.5.8 Target Size
   Minimum) asks for 24x24 CSS px; the iOS HIG and WCAG AAA (2.5.5) ask for
   44x44. The rules below bring every control to at least the AA floor and
   the primary CTAs — the ones a lead actually flows through — up to 44.

   Scoped to `pointer: coarse` rather than a width breakpoint: it is the
   input device, not the viewport, that decides whether a target is hard to
   hit, so a touch laptop or a large tablet gets the bigger targets too
   while a small desktop window keeps the tighter desktop spacing.

   Measured before: theme buttons 44x40, header WhatsApp CTA 38x44,
   footer nav links 15px tall.
   ========================================================================== */
@media (pointer: coarse) {
  /* The header WhatsApp CTA measured 38px wide because responsive.css hides
     its text label on small screens, leaving only the emoji. It already has
     a 44px min-height from that file; this adds the matching width so the
     site's single most-used CTA is a full 44x44 target.
     Note: .theme-switch__btn is deliberately left at the 40px min-height set
     in responsive.css — that is an existing considered choice for a tertiary
     control, it clears the AA floor, and two files disagreeing about one
     control is worse than the 4px. */
  .header-whatsapp {
    min-width: 44px;
  }

  /* Footer and in-list navigation links. Reaching a full 44px here would
     roughly double the height of the footer on a phone for little gain, so
     these clear the AA floor with room to spare instead: the link box grows
     to ~29px and the list gap supplies the rest of the separation, so two
     adjacent links are never within a thumb-width of each other. */
  .site-footer__links a,
  .breadcrumbs a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  /* The added padding already separates the rows, so the list's own vertical
     gap is reduced to keep the footer the same overall height it was. */
  .site-footer__links { row-gap: 2px; }
}