/* ==========================================================================
   MONEYCLARITYTECH — SHARED DESIGN SYSTEM  (mc-system.css)
   --------------------------------------------------------------------------
   ONE source of truth for colour, type, spacing, motion and focus.
   Load this FIRST on every page, before any page-specific CSS.

   Why this file exists
   -------------------
   Before this, the site carried seven different palettes (green home,
   maroon finance-desk, cream reads, teal rent-vs-buy, olive apna-paisa …)
   and 222 KB of duplicated inline CSS. Pages looked like different products.
   Everything below is the single agreed system; page CSS should only ever
   consume these variables, never hard-code a hex value.

   Contrast: every foreground/background pair defined here is >= 4.5:1
   (WCAG 2.2 AA for body text). Ratios are noted inline. Do not change a
   value without re-checking its ratio.
   ========================================================================== */

:root {
  /* Tells browsers (esp. Android Chrome's "force dark theme for web
     content") this site is light-only, so they stop heuristically
     re-inverting/re-coloring pages that never asked for it. This — not
     the token-collision bug fixed earlier — is what was still causing
     broken contrast after the toggle was removed. */
  color-scheme: light;
  /* ---- Core surfaces --------------------------------------------------- */
  --void:        #062A1F;   /* deep vault green — dark canvas            */
  --void-2:      #042118;
  --pine:        #0B3A2B;   /* raised surface on dark                    */
  --pine-2:      #0E4534;
  --cloud:       #F3F6F2;   /* light section background                  */
  --paper:       #FAF6EE;   /* editorial cream — long-form reading       */
  --paper-2:     #F1EADB;   /* callout / inset on cream                  */
  --card:        #FFFFFF;
  --line:        #E0E8E1;
  --line-warm:   #E4DCC9;

  /* ---- Ink ------------------------------------------------------------- */
  --ink:         #0A1F17;   /* 17.2:1 on white                           */
  --ink-soft:    #43554C;   /*  7.3:1 on --cloud                         */
  --ink-warm:    #16130E;   /* body ink on --paper                       */
  --on-dark:     #F3F6F2;   /* 14.9:1 on --void                          */
  --on-dark-dim: #9FB8AC;   /*  7.3:1 on --void                          */

  /* ---- Accents ---------------------------------------------------------
     mint  : ONLY on dark surfaces (9.7:1 on --void, but 1.6:1 on white)
     mint-t: the text-safe mint for LIGHT surfaces (4.6:1 on white)
     gold  : ONLY on dark (8.4:1 on --void)
     gold-t: the text-safe gold for cream (4.6:1 on --paper)             */
  --mint:        #35E89A;
  --mint-dim:    #23B87C;   /* borders / fills on light — not for text   */
  --mint-t:      #0F7A50;   /* text-safe mint on light                   */
  --mint-ink:    #052018;   /* text on a mint fill                       */
  --saffron:     #FFAF2E;
  --gold-t:      #7A5610;   /* text-safe gold on --paper (was #A97B1F,
                               which failed AA at 3.5:1)                 */
  --alert:       #A63D2B;   /* warnings, "myth", negative deltas         */
  --alert-soft:  #F6E7E2;

  /* ---- Type ------------------------------------------------------------ */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --t-xs:  clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:  clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --t-base:clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --t-lg:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-xl:  clamp(1.40rem, 1.25rem + 0.75vw, 1.90rem);
  --t-2xl: clamp(1.75rem, 1.45rem + 1.50vw, 2.70rem);
  --t-3xl: clamp(2.30rem, 1.70rem + 3.00vw, 4.20rem);

  /* ---- Space & shape --------------------------------------------------- */
  --pad:       clamp(1.15rem, 5vw, 4rem);
  --section-y: clamp(3.5rem, 9vw, 6.5rem);
  --measure:   68ch;        /* long-form line length cap                 */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6,42,31,.06);
  --shadow:    0 1px 2px rgba(6,42,31,.06), 0 14px 40px rgba(6,42,31,.10);
  --shadow-lg: 0 2px 4px rgba(6,42,31,.08), 0 24px 60px rgba(6,42,31,.16);

  /* ---- Motion ----------------------------------------------------------
     One easing curve and three durations for the whole site, so nothing
     ever feels like it came from a different page.                      */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  620ms;

  /* Safe-area insets for iPhone notch / Android gesture bar */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---- Dark mode: disabled --------------------------------------------------
   Was here, disabled: it redefined --paper/--ink at :root with higher
   specificity than each page's own local :root tokens of the same name
   (a legacy naming collision), while leaving --paper-dim untouched. Result:
   boxes like "In short" kept a cream background but got dark-mode text,
   producing near-invisible copy — and prefers-color-scheme meant this was
   live for any visitor with OS dark mode on, not just toggle clicks. Needs
   a proper token rename + per-page visual QA before it comes back.        */

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* so anchors clear the sticky nav */
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

/* ---- Focus: one visible ring everywhere, keyboard-only ------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Skip link ---------------------------------------------------------- */
.mc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--mint); color: var(--mint-ink);
  padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.mc-skip:focus { left: 0; }

/* ---- Screen-reader-only ------------------------------------------------- */
.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;
}

/* ---- Minimum tap target (WCAG 2.2 AA, 2.5.8) ---------------------------- */
.mc-tap { position: relative; }
.mc-tap::after {
  content: ""; position: absolute; inset: 50% 0 0 50%;
  width: 100%; height: 100%; min-width: 44px; min-height: 44px;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   MOTION LAYER
   Everything here is opt-in via a class, and every single thing is
   switched off under prefers-reduced-motion.
   ========================================================================== */

/* ---- Scroll reveal ------------------------------------------------------
   Elements start slightly down and transparent; mc-enhance.js adds
   .is-in when they enter the viewport. If JS never runs, the
   .js guard below means content stays visible — never hidden by default. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* Stagger children of a revealed group (cards in a grid) */
.js [data-reveal-group] > * {
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.js [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms;   }
.js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 70ms;  }
.js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 140ms; }
.js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 210ms; }
.js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 280ms; }
.js [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 350ms; }
.js [data-reveal-group].is-in > *:nth-child(n+7) { transition-delay: 420ms; }

/* ---- Reading progress bar ----------------------------------------------- */
.mc-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.mc-progress > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--mint), var(--saffron));
  transition: width 90ms linear;
}

/* ---- Nav scroll affordance ----------------------------------------------
   The tab strip overflows on phones. These fades tell the user there is
   more to the right instead of leaving a word cut in half.               */
.mc-scroller {
  position: relative;
  /* Inside the flex nav this must be allowed to shrink below its content
     width, or the strip pushes the whole layout wider than the viewport. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.mc-scroller::before,
.mc-scroller::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 32px;
  pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease);
  z-index: 2;
}
.mc-scroller::before { left: 0;  background: linear-gradient(90deg, var(--void), transparent); }
.mc-scroller::after  { right: 0; background: linear-gradient(270deg, var(--void), transparent); }
.mc-scroller[data-at="start"]::after,
.mc-scroller[data-at="middle"]::after { opacity: 1; }
.mc-scroller[data-at="end"]::before,
.mc-scroller[data-at="middle"]::before { opacity: 1; }

/* ---- Count-up numbers ---------------------------------------------------- */
.mc-count { font-variant-numeric: tabular-nums; }

/* ---- Card lift ----------------------------------------------------------- */
.mc-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) {
  .mc-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.mc-lift:active { transform: translateY(-1px) scale(.995); }

/* ---- Shimmer for "live" values ------------------------------------------- */
@keyframes mc-pulse { 0%,100% { opacity: .55; transform: scale(1); }
                      50%     { opacity: 1;   transform: scale(1.35); } }
.mc-live-dot { animation: mc-pulse 2.4s var(--ease) infinite; }

/* ---- Number roll on change ------------------------------------------------ */
@keyframes mc-flip { from { opacity: 0; transform: translateY(-.28em); }
                     to   { opacity: 1; transform: none; } }
.mc-flip { animation: mc-flip var(--dur) var(--ease-out); }

/* ==========================================================================
   REDUCED MOTION — the whole layer collapses to "just show it"
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   PRINT — people print calculator results and tax articles
   ========================================================================== */
@media print {
  .mc-progress, .nav, .mc-nav, .mc-share, .mc-toc, .footer nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  article { max-width: none; }
}

/* ==========================================================================
   COMPONENTS ADDED BY mc-enhance.js
   ========================================================================== */

/* ---- Tab strip: bigger tap targets (was 31px, WCAG 2.2 wants 44) -------- */
.tabs .tab-btn { min-height: 44px; }
.mc-scroller__inner {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.mc-scroller__inner::-webkit-scrollbar { display: none; }
.mc-scroller__inner > * { scroll-snap-align: center; }

/* ---- Theme toggle -------------------------------------------------------- */
.mc-theme {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin-left: .5rem;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  color: var(--on-dark-dim);
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mc-theme:hover { color: var(--mint); border-color: var(--mint); }
.mc-nav .mc-theme { color: var(--ink-soft); border-color: var(--line-warm); }
.mc-nav .mc-theme:hover { color: var(--mint-t); border-color: var(--mint-t); }

/* ---- Table of contents --------------------------------------------------- */
.mc-toc {
  margin: 2rem 0 2.5rem;
  border: 1px solid var(--line-warm);
  border-radius: var(--r);
  background: var(--paper-2);
  overflow: hidden;
}
.mc-toc summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.15rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-t);
}
.mc-toc summary::-webkit-details-marker { display: none; }
.mc-toc summary::after {
  content: "▾";
  transition: transform var(--dur) var(--ease);
  font-size: 1rem;
}
.mc-toc[open] summary::after,
.mc-toc details[open] summary::after { transform: rotate(180deg); }
.mc-toc-count { color: var(--ink-soft); letter-spacing: .06em; }
.mc-toc ol {
  margin: 0; padding: 0 1.15rem 1.15rem 2.4rem;
  counter-reset: toc;
  font-size: var(--t-sm);
}
.mc-toc li { margin: .4rem 0; }
.mc-toc a {
  color: var(--ink-warm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mc-toc a:hover { color: var(--mint-t); border-bottom-color: currentColor; }
.mc-toc a.is-current { color: var(--mint-t); font-weight: 600; }

/* ---- Share bar ----------------------------------------------------------- */
.mc-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  margin: 2.5rem 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}
.mc-share-label {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-t);
  margin-right: .3rem;
}
.mc-share-btn {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: .5rem 1rem;
  font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-warm); text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line-warm);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.mc-share-btn:hover { border-color: var(--mint-t); color: var(--mint-t); }
.mc-share-btn:active { transform: scale(.97); }
.mc-share-btn.mc-wa:hover { border-color: #1FA855; color: #10763A; }
.mc-share-note { font-size: var(--t-sm); color: var(--mint-t); }

/* ---- Author card: name + credential, at the TOP of an article ----------- */
.mc-byline {
  display: flex; align-items: center; gap: .85rem;
  margin: 1.5rem 0 2rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}
.mc-byline-mark {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--void);
  color: var(--mint);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.mc-byline-text { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-soft); }
.mc-byline-text strong { display: block; color: var(--ink-warm); font-size: var(--t-base); }
.mc-byline-text a { color: var(--mint-t); }

/* ==========================================================================
   NAV — mobile layout fix
   --------------------------------------------------------------------------
   Before: logo (138px) + 5 tabs (403px) + toggle all competed for 390px of
   phone. The strip was squeezed to ~129px and 51% of the nav sat off-screen
   with no affordance — "Reads" was cut mid-word.

   After: on phones the bar becomes two rows — brand + theme on top, the full
   width given to the tab strip below, with edge fades showing there is more.
   From 700px up it returns to a single row.
   ========================================================================== */

@media (max-width: 699px) {
  .nav.nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  theme"
      "tabs   tabs";
    row-gap: .5rem;
    column-gap: .5rem;
    padding-bottom: .45rem;
  }
  .nav.nav .nav-logo   { grid-area: brand; }
  .nav.nav .mc-theme { grid-area: theme; margin-left: 0; }
  .nav.nav .mc-scroller,
  .nav.nav .tabs  { grid-area: tabs; }

  .nav.nav .mc-scroller {
    /* full bleed to the screen edges so the fade reads as "scroll me" */
    width: auto;
    margin-inline: calc(var(--pad) * -1);
  }
  .nav.nav .mc-scroller__inner {
    padding-inline: var(--pad);
    gap: .3rem;
  }
  .nav.nav .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* The logo box: reserve its space so nothing jumps while the image decodes */
.nav-logo .mc-logo-img {
  height: clamp(24px, 5.5vw, 30px);
  width: auto;
  aspect-ratio: 502 / 80;
}

/* Auto-hide nav (phones) — see autoHideNav() in mc-enhance.js */
@media (max-width: 699px) {
  .nav.nav {
    transition: transform var(--dur) var(--ease);
    will-change: transform;
  }
  .nav.nav.is-tucked { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .nav.nav.is-tucked { transform: none; }
}

/* ==========================================================================
   ARTICLE / TOOL NAV — same two-row treatment as the home page nav.
   These pages use .mc-nav / .mc-tabs / .mc-tab instead of .nav / .tabs.

   The base rules below are the source of truth. They used to live only in a
   copy-pasted <style> block on each of the thirty-three pages that carry this
   nav, in four variants that had drifted apart, and nothing owned them — so
   a new page that copied the markup without the block rendered with an
   unstyled nav while still picking up the mobile grid overrides further down.
   That is what happened to /gold-loan-calculator.

   Pages still carrying their own copy override these harmlessly: a local
   <style> is parsed after this file. New pages need only the markup.
   The mobile overrides below are written at .mc-nav.mc-nav specificity so
   they continue to beat both this block and any inline copy.
   ========================================================================== */

.mc-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .72rem clamp(1.15rem, 5vw, 4rem);
  background: rgba(6, 42, 31, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(52, 232, 160, .22);
}
.mc-nav .mc-logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em;
  color: #F3F6F2; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.mc-nav .mc-logo .mc-logo-img { height: clamp(24px, 5.5vw, 28px); width: auto; display: block; }
.mc-nav .mc-logo em { font-style: normal; color: #35E89A; }
.mc-nav .mc-tabs {
  display: flex; gap: .35rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mc-nav .mc-tabs::-webkit-scrollbar { display: none; }
.mc-nav .mc-tab {
  font-family: "Karla", "Segoe UI", system-ui, sans-serif;
  font-weight: 600; font-size: .86rem;
  color: #9FB8AC; text-decoration: none;
  border: 1px solid transparent; border-radius: 999px;
  padding: .4rem .9rem; white-space: nowrap;
  transition: color .18s, background .18s;
}
.mc-nav .mc-tab:hover { color: #F3F6F2; }
.mc-nav .mc-tab.active { color: #052018; background: #35E89A; border-color: #35E89A; }
@media (prefers-reduced-motion: reduce) { .mc-nav .mc-tab { transition: none; } }

.mc-nav .mc-scroller::before { background: linear-gradient(90deg, #062A1F, transparent); }
.mc-nav .mc-scroller::after  { background: linear-gradient(270deg, #062A1F, transparent); }
.mc-tabs .mc-tab { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 699px) {
  .mc-nav.mc-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand theme" "tabs tabs";
    row-gap: .5rem;
    column-gap: .5rem;
    padding-bottom: .45rem;
    transition: transform var(--dur) var(--ease);
  }
  .mc-nav.mc-nav .mc-logo   { grid-area: brand; }
  .mc-nav.mc-nav .mc-theme  { grid-area: theme; margin-left: 0; }
  .mc-nav.mc-nav .mc-scroller,
  .mc-nav.mc-nav .mc-tabs   { grid-area: tabs; }
  .mc-nav.mc-nav .mc-scroller {
    width: auto;
    margin-inline: calc(clamp(1.15rem, 5vw, 4rem) * -1);
  }
  .mc-nav.mc-nav .mc-scroller__inner { padding-inline: clamp(1.15rem, 5vw, 4rem); }
  .mc-nav.mc-nav .mc-tab { flex: 0 0 auto; }
  .mc-nav.mc-nav.is-tucked { transform: translateY(-100%); }
}

/* ==========================================================================
   INLINE CALC  (.mc-calc)  — "the ledger insert"
   --------------------------------------------------------------------------
   A worked example pencilled into the middle of an article. Deliberately NOT
   a slider panel: the sentence IS the interface. Numbers are editable inline,
   sitting on a dotted rule like a fill-in-the-blank form, and one figure —
   the answer — is set large in the mono face and updates as you type.

   Markup contract (see mc-enhance.js):
     <div class="mc-calc" data-mc-calc="odBreakeven" data-mc-link="/tool?...">
       <p class="mc-calc__line">On ₹<input data-k="p" …> outstanding …</p>
       <p class="mc-calc__out"><b data-out="answer"></b><span>caption</span></p>
       <a class="mc-calc__go" href="…">Open the full calculator</a>
     </div>
   Everything degrades: with JS off the inputs still show their defaults and
   the link still works.
   ========================================================================== */

.mc-calc {
  /* --mint-t clears AA on white but lands at 4.47:1 on this cream, which is
     fine for the large figure and short for the small link. --mc-green-deep
     is 5.7:1 on --paper-2 and is used for anything set at body size. */
  --mc-green-deep: #0B6844;
  background: var(--paper-2, #F1EADB);
  border-top: 1px solid var(--line-warm, #E4DCC9);
  border-bottom: 1px solid var(--line-warm, #E4DCC9);
  padding: 1.35rem 1.3rem 1.2rem;
  margin: 2rem 0;
}
.mc-calc__line {
  font-size: 1.02rem;
  line-height: 2.1;
  margin: 0 0 1rem;
}
.mc-calc input {
  font: inherit;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--gold-t, #7A5610);
  background: transparent;
  border: 0;
  border-bottom: 1px dotted currentColor;
  padding: 0 .12em .1em;
  width: 6.5ch;
  text-align: right;
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mc-calc input::-webkit-outer-spin-button,
.mc-calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-calc input:focus-visible {
  outline: 2px solid var(--mint-t, #0F7A50);
  outline-offset: 2px;
  background: #fff;
}
.mc-calc input[data-k="p"] { width: 9.5ch; }

.mc-calc__out {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .7rem;
  margin: 0;
  padding-top: .95rem;
  border-top: 1px solid var(--line-warm, #E4DCC9);
}
.mc-calc__out b {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.55rem, 6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--mint-t, #0F7A50);
  letter-spacing: -.01em;
}
.mc-calc__out span { font-size: .93rem; color: var(--ink-soft, #43554C); }
.mc-calc__go {
  display: inline-block;
  margin-top: .95rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--mc-green-deep, #0B6844);
  text-decoration-color: currentColor;
}

/* ==========================================================================
   TOOL BRIDGE  (.mc-bridge) — the article's cross-reference to a tool.
   --------------------------------------------------------------------------
   Distinct from .more, which points at further *reading* and carries the
   marigold rule. This one points at a *tool* and carries the green rule, so
   the colour itself tells you which kind of thing is on the other end.
   ========================================================================== */

.mc-bridge {
  --mc-green-deep: #0B6844;
  border: 1px solid var(--line-warm, #E4DCC9);
  border-left: 4px solid var(--mint-t, #0F7A50);
  padding: 1.15rem 1.25rem;
  margin: 2.4rem 0 0;
  background: transparent;
}
.mc-bridge__what {
  font-size: .84rem;
  color: var(--ink-soft, #43554C);
  margin: 0 0 .45rem;
}
.mc-bridge__name {
  font-family: var(--display, Fraunces, Georgia, serif);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.25;
  margin: 0 0 .4rem;
}
.mc-bridge__name a { text-decoration-color: var(--mc-green-deep, #0B6844); }
.mc-bridge__name a:hover { color: var(--mc-green-deep, #0B6844); }
.mc-bridge p:last-child { margin: 0; font-size: .95rem; }

/* ==========================================================================
   SANCTION-LETTER TEARDOWN  (.mc-td) — scroll-driven exploded view.
   --------------------------------------------------------------------------
   animation-timeline is NOT Baseline: Chrome/Edge 115+ and Safari 26+ have
   it; Firefox still has it behind a flag. The dangerous failure mode is that
   an unsupporting engine drops `animation-timeline` but KEEPS the `animation`
   shorthand — so the whole teardown would fire at once on page load.

   The guard below is therefore mandatory, not optional:
     · the separated, readable state is the DEFAULT, written outside any query
     · all movement lives inside @supports (animation-timeline: view())
     · and is switched off again under prefers-reduced-motion
   ========================================================================== */

.mc-td {
  margin: 2.2rem 0;
  padding: 1.1rem 0 .4rem;
  border-top: 1px solid var(--line-warm, #E4DCC9);
  border-bottom: 1px solid var(--line-warm, #E4DCC9);
}
.mc-td__doc { display: grid; gap: .5rem; }
.mc-td__layer {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-warm, #E4DCC9);
  padding: .8rem .95rem .85rem;
  transform-origin: 50% 0;
}
.mc-td__layer:first-child { border-top-width: 3px; border-top-color: var(--mint-t, #0F7A50); }
.mc-td__n {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .72rem;
  color: var(--gold-t, #7A5610);
  display: block;
  margin-bottom: .2rem;
}
.mc-td__h { font-weight: 700; font-size: .99rem; display: block; margin-bottom: .25rem; }
.mc-td__p { font-size: .92rem; margin: 0; color: var(--ink-soft, #43554C); }
.mc-td__cap { font-size: .85rem; color: var(--ink-soft, #43554C); margin: .9rem 0 0; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mc-td__doc { gap: 0; }
    .mc-td__layer {
      animation: mc-td-peel linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 46%;
    }
    .mc-td__layer:nth-child(2) { animation-range: entry 18% cover 54%; }
    .mc-td__layer:nth-child(3) { animation-range: entry 24% cover 62%; }
    .mc-td__layer:nth-child(4) { animation-range: entry 30% cover 70%; }
    .mc-td__layer:nth-child(5) { animation-range: entry 36% cover 78%; }
    .mc-td__layer:nth-child(6) { animation-range: entry 42% cover 86%; }
  }
  @keyframes mc-td-peel {
    from { transform: translateY(-14px) scale(.985); opacity: .35; margin-bottom: 0; }
    to   { transform: none;                          opacity: 1;   margin-bottom: .5rem; }
  }
}

/* ============================================================
   .mc-vs — LEDGER COMPARISON
   ------------------------------------------------------------
   Two options, line by line, with a running verdict at the foot.
   Built for the site's many "X vs Y" pieces: old vs new regime,
   FD vs debt fund, flat vs reducing, rent vs buy, settle vs close.

   Markup:
     <div class="mc-vs" role="table" aria-label="…">
       <div class="mc-vs__head" role="row">
         <span class="mc-vs__lbl" role="columnheader">Line</span>
         <span class="mc-vs__col" role="columnheader">Old regime</span>
         <span class="mc-vs__col" role="columnheader">New regime</span>
       </div>
       <div class="mc-vs__row" role="row" data-win="b">
         <span class="mc-vs__lbl" role="cell">Standard deduction</span>
         <span class="mc-vs__a"   role="cell">₹50,000</span>
         <span class="mc-vs__b"   role="cell">₹75,000</span>
       </div>
       <p class="mc-vs__out"><span>New regime cheaper by</span><b>₹42,900</b></p>
     </div>

   data-win="a" | "b" on a row tints the winning side.
   Add class mc-vs--b (or mc-vs--a) to flag the overall winner column.
   ============================================================ */

.mc-vs {
  margin: 1.8rem 0;
  border: 1px solid var(--line-warm, #D8CFBC);
  border-radius: var(--r-sm, 6px);
  background: var(--card, #F1EADB);
  padding: .95rem 1.05rem 1.05rem;
  font-size: .95rem;
}
.mc-vs__k {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-t, #7A5610);
  margin: 0 0 .7rem;
}
.mc-vs__head,
.mc-vs__row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: .35rem .7rem;
  align-items: baseline;
}
.mc-vs__head {
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--gold-t, #7A5610);
  margin-bottom: .2rem;
}
.mc-vs__head .mc-vs__col,
.mc-vs__head .mc-vs__lbl {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft, #43554C);
}
.mc-vs__head .mc-vs__col { text-align: right; font-weight: 600; }

.mc-vs__row {
  padding: .46rem 0;
  border-bottom: 1px dashed var(--line-warm, #D8CFBC);
}
.mc-vs__row:last-of-type { border-bottom: 0; }
.mc-vs__lbl { color: var(--ink-soft, #43554C); line-height: 1.45; }
.mc-vs__a,
.mc-vs__b {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .89rem;
  font-weight: 600;
  text-align: right;
  color: var(--ink, #16130E);
  white-space: nowrap;
  border-radius: 3px;
  padding: .1rem .25rem;
  margin: -.1rem -.25rem;
}
/* the losing side reads quieter, the winner gets a mint wash */
.mc-vs__row[data-win="a"] .mc-vs__b,
.mc-vs__row[data-win="b"] .mc-vs__a { color: var(--ink-soft, #43554C); font-weight: 500; }
.mc-vs__row[data-win="a"] .mc-vs__a,
.mc-vs__row[data-win="b"] .mc-vs__b { background: var(--mint-t, rgba(52, 232, 160, .18)); }

/* dash for "not available on this side" */
.mc-vs__none { color: var(--ink-soft, #43554C); font-weight: 500; }

.mc-vs__out {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  margin: .85rem 0 0;
  padding-top: .7rem;
  border-top: 2px solid var(--gold-t, #7A5610);
  font-size: .95rem;
}
.mc-vs__out span { color: var(--ink-soft, #43554C); }
.mc-vs__out b {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 1.02rem;
  white-space: nowrap;
}
.mc-vs__note {
  margin: .6rem 0 0;
  font-size: .84rem;
  color: var(--ink-soft, #43554C);
}

/* Phones: label takes its own line, the two figures sit under it */
@media (max-width: 560px) {
  .mc-vs__head,
  .mc-vs__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .2rem .7rem;
  }
  .mc-vs__head .mc-vs__lbl { display: none; }
  .mc-vs__row .mc-vs__lbl { grid-column: 1 / -1; font-size: .92rem; }
  .mc-vs__a, .mc-vs__b { text-align: left; font-size: .86rem; }
  .mc-vs__head .mc-vs__col { text-align: left; }
  .mc-vs__a::before, .mc-vs__b::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono, "IBM Plex Mono", monospace);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gold-t, #7A5610);
  }
}

/* ============================================================
   SERIES RAIL  (.mc-rail)
   ------------------------------------------------------------
   The guides are written as masterclasses that read in order,
   but a reader arriving on Part 7 from search sees no sign that
   Parts 1-6 exist. The rail puts the whole series in one line
   above the headline: where you are, what came before, what is
   next. Built into the page by tools/build-articles.py from
   content.js, so it cannot drift from the Reads listing.
   Pure markup — no script, works with JS off.
   ============================================================ */
.mc-rail {
  margin: 0 0 1.6rem;
  padding: .85rem 1rem .9rem;
  border: 1px solid var(--line, #E4DECF);
  border-left: 3px solid var(--gold, #B9822A);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold, #B9822A) 4%, transparent);
}
.mc-rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.mc-rail-series {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-t, #7A5610);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.mc-rail-series:hover { border-bottom-color: currentColor; }
.mc-rail-series { display: inline-block; padding-block: .3rem; margin-block: -.3rem; }
.mc-rail-pos {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .68rem; letter-spacing: .06em; color: var(--muted, #6E6A5F);
  font-variant-numeric: tabular-nums;
}
.mc-rail-dots {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 0; padding: 0;
}
.mc-rail-dot { margin: 0; }
.mc-rail-dot a, .mc-rail-dot > span {
  display: grid; place-items: center;
  min-width: 1.65rem; height: 1.65rem; padding: 0 .35rem;
  border-radius: 7px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .74rem; font-weight: 500; font-variant-numeric: tabular-nums;
  text-decoration: none;
  border: 1px solid var(--line, #E4DECF);
  background: #fff; color: var(--muted, #6E6A5F);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mc-rail-dot a:hover, .mc-rail-dot a:focus-visible {
  border-color: var(--brand, #0E4D45);
  color: var(--brand, #0E4D45);
  background: color-mix(in srgb, var(--brand, #0E4D45) 8%, #fff);
}
.mc-rail-dot.is-here > span {
  background: var(--brand, #0E4D45);
  border-color: var(--brand, #0E4D45);
  color: #fff; font-weight: 600;
}
.mc-rail-dot.is-soon > span { opacity: .42; border-style: dashed; }
.mc-rail-steps {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem;
}
.mc-rail-steps:empty { display: none; }
.mc-rail-step {
  flex: 1 1 14rem; min-width: 0;
  padding: .5rem .7rem;
  border: 1px solid var(--line, #E4DECF); border-radius: 9px;
  background: #fff; text-decoration: none;
  font-size: .84rem; line-height: 1.35; color: var(--ink, #1A1B18);
}
.mc-rail-step .k {
  display: block;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-t, #7A5610); margin-bottom: .15rem;
}
.mc-rail-step.is-next { border-color: color-mix(in srgb, var(--brand, #0E4D45) 30%, var(--line, #E4DECF)); }
.mc-rail-step:hover { border-color: var(--brand, #0E4D45); }
@media (max-width: 460px) {
  .mc-rail { padding: .75rem .8rem .8rem; }
  .mc-rail-step { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-rail-dot a { transition: none; }
}

/* ---- Breadcrumb (.crumbs) ------------------------------------------------
   Articles each carried their own copy of this in an inline <style>.
   reads/index.html has no <style> block, so its breadcrumb rendered as plain
   default links — the same failure mode as the nav above. Owned here now;
   the articles' local copies still override harmlessly. */
.crumbs {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .75; margin: 0 0 .85rem;
}
.crumbs a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor;
  /* 14px tall is not a finger target. The negative margin keeps the
     breadcrumb sitting exactly where it did. */
  display: inline-block; padding-block: .42rem; margin-block: -.42rem;
}

/* ---- Tables never push the page sideways ---------------------------------
   A table cannot lay out narrower than its min-content width. The four-column
   old-regime slab table on /income-tax-calculator needs 407px, so on any phone
   narrower than that it stretched the document and the whole page scrolled
   horizontally — which left the sticky nav ending in mid-air once you scrolled
   across. Letting a wide table scroll inside its own box keeps the document
   itself locked to the viewport. Desktop keeps native table layout. */
@media (max-width: 760px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Scroll shadows, pure CSS: the two local-attachment gradients mask the
       edge shadows away when the table is fully scrolled, so a shadow appears
       only while there is genuinely more table off to that side. Without this
       a clipped column just looks like an empty cell. */
    background:
      linear-gradient(to right, var(--card, #fff) 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to left,  var(--card, #fff) 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%,   rgba(26,27,24,.17), rgba(26,27,24,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(26,27,24,.17), rgba(26,27,24,0)) right center;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* Tighten so the common tables fit outright and never need scrolling at all.
     The four-column old-regime slab table needed 407px; this brings it inside
     a 360px phone. */
  table th, table td { padding: 8px 7px; }
  table.slabtable { font-size: 13px; }
  table.slabtable th { font-size: 10px; letter-spacing: .04em; }
}

/* ---- Form controls: 16px minimum on touch --------------------------------
   iOS Safari zooms the entire page in when a control whose font-size is under
   16px takes focus, and does not zoom back out. Every tool on this site was
   between 13.3px and 15.7px, so tapping any input on an iPhone threw the
   layout sideways — on the pages that are the whole point of the site.

   The page-level rules are written as `.row input`, so these need to outrank
   (0,1,1) to land. The :not() chain does that without !important, which would
   stamp on any control that deliberately wants to be larger.

   Visually 15.2px to 16px is imperceptible. The jump on focus is not. */
@media (pointer: coarse), (max-width: 900px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select:not([size]):not([multiple]),
  textarea:not([hidden]):not([readonly]) {
    font-size: max(16px, 1em);
  }
}

/* ---- Tap targets ---------------------------------------------------------
   WCAG 2.2 asks for 24x24 CSS px. min-height only grows what is already below
   it, and a button centres its own content, so nothing that already passes
   moves by a pixel. */
button, summary, [role="button"], [role="tab"] { min-height: 24px; }

/* ---- Footer and utility links ---------------------------------------------
   These sat at 15px tall in a row separated by middots — small and crowded,
   which is the combination that causes mis-taps. The negative margin keeps the
   footer looking exactly as it did. */
footer a, .footer a, .footer-links a { display: inline-block; padding-block: .42rem; margin-block: -.3rem; }

/* ==========================================================================
   TOOL EXPLAINER  (.mc-explain) — the written half of a tool page.
   --------------------------------------------------------------------------
   Sits below the working tool. Carries its own card surface so it reads the
   same on cream, cloud or dark tool pages. Prose first; <details> for the
   short Q&A at the end. Tokens only — no hard-coded colours.
   ========================================================================== */
.mc-explain {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-warm);
  border-radius: var(--r);
  padding: clamp(1.1rem, 4vw, 1.8rem);
  margin: 2rem 0 0;
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  max-width: 100%;
  overflow-wrap: break-word;
}
.mc-explain h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.2;
  margin: 0 0 .8rem;
  color: var(--ink);
}
.mc-explain h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.3;
  margin: 1.6rem 0 .5rem;
  color: var(--ink);
}
.mc-explain p { margin: 0 0 .9rem; color: var(--ink); }
.mc-explain p:last-child { margin-bottom: 0; }
.mc-explain a { color: var(--mint-t); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mc-explain details {
  border-top: 1px solid var(--line-warm);
  padding: .75rem 0;
}
.mc-explain details:last-of-type { border-bottom: 1px solid var(--line-warm); }
.mc-explain summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style-position: outside;
}
.mc-explain summary:focus-visible { outline: 2px solid var(--mint-t); outline-offset: 2px; }
.mc-explain details p { margin: .5rem 0 0; color: var(--ink-soft); }