/* ---------- Fonts (self-hosted copies of Google Fonts: latin, latin-ext, tamil) ---------- */
    @font-face {
      font-family: 'Anek Latin';
      font-style: normal;
      font-weight: 500;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/anek-latin-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Anek Latin';
      font-style: normal;
      font-weight: 500;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/anek-latin-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Anek Latin';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/anek-latin-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Anek Latin';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/anek-latin-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Anek Latin';
      font-style: normal;
      font-weight: 800;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/anek-latin-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Anek Latin';
      font-style: normal;
      font-weight: 800;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/anek-latin-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Noto Sans Tamil';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/noto-sans-tamil-tamil.woff2) format('woff2');
      unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
    }
    @font-face {
      font-family: 'Noto Sans Tamil';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/noto-sans-tamil-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Noto Sans Tamil';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      font-display: optional;
      src: url(/fonts/noto-sans-tamil-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 400;
      font-display: optional;
      src: url(/fonts/source-sans-3-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 400;
      font-display: optional;
      src: url(/fonts/source-sans-3-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 600;
      font-display: optional;
      src: url(/fonts/source-sans-3-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 600;
      font-display: optional;
      src: url(/fonts/source-sans-3-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 700;
      font-display: optional;
      src: url(/fonts/source-sans-3-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 700;
      font-display: optional;
      src: url(/fonts/source-sans-3-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

        /* Regular-weight Tamil for running text on the Tamil page */
    @font-face {
  font-family: 'Noto Sans Tamil';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: optional;
  src: url(/fonts/noto-sans-tamil-400-tamil.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}

    /* ---------- Design tokens ---------- */
    :root {
      --ink: #0a2350;
      --paper: #fffcf5;
      --panel: #fdf5e2;
      --card: #ffffff;
      --line: #e8dfc9;
      --muted: #4f5a72;
      --brand: #0d3b85;
      --brand-ink: #082a63;
      --brand-tint: #e9eff9;
      --accent: #d01224;
      --gold: #f6b41e;
      --gold-ink: #e3a00c;
      --danger: #b3101f;
      --success: #1f7a3a;

      --display: "Anek Latin", "Arial Narrow", system-ui, sans-serif;
      --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
      --tamil: "Noto Sans Tamil", "Latha", sans-serif;

      --wrap: 1240px;
      --gutter: clamp(16px, 4vw, 40px);
      --band-y: clamp(48px, 7vw, 88px);
      --tap: 48px;
      --radius: 12px;
    }

    /* ---------- Base (same as the home page) ---------- */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; }
    img { max-width: 100%; height: auto; display: block; }
    h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
    p { margin: 0; text-wrap: pretty; }
    a { color: var(--brand); }
    :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
    [lang="ta"] { font-family: var(--tamil), var(--body); }
    .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
    .skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 16px; z-index: 30; }
    .skip-link:focus { left: 8px; }
    .eyebrow { font: 800 .75rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
    [lang="ta"] .eyebrow, .eyebrow[lang="ta"] { font-family: var(--tamil); letter-spacing: .02em; }

    .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: var(--tap); padding: 10px 24px; border: 2px solid var(--gold); border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 1rem/1.15 var(--display); text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
    .btn:hover { transform: translateY(-2px); background: var(--gold-ink); border-color: var(--gold-ink); }
    .btn-ghost { background: transparent; border-color: #fff; color: #fff; }
    .btn-ghost:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }
    .btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

    /* ---------- Header with page navigation ---------- */
    .site-header { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
    .header-bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand cta" "nav nav"; align-items: center; gap: 4px 16px; padding-block: 10px 4px; }
    .brand { grid-area: brand; display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
    .brand img { width: 52px; flex-shrink: 0; }
    .brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .brand-ta { font-family: var(--tamil); font-weight: 700; color: var(--ink); font-size: .95rem; }
    .brand-en { color: var(--muted); font-size: .82rem; }
    .header-cta { grid-area: cta; font-size: .92rem; }
    .site-nav { grid-area: nav; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-inline: -10px; }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { flex: 0 0 auto; padding: 9px 10px; border-radius: 8px; color: var(--ink); font: 600 .92rem/1.2 var(--body); text-decoration: none; white-space: nowrap; }
    .site-nav a[lang="ta"] { font-family: var(--tamil); }
    .site-nav a:hover { background: var(--brand-tint); }
    .site-nav a[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -3px 0 var(--gold); }
    @media (min-width: 1100px) {
      .header-bar { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav cta"; padding-block: 12px; }
      .site-nav { justify-content: center; margin-inline: 0; }
      .brand img { width: 64px; }
      .brand-ta { font-size: 1.05rem; }
    }

    /* ---------- Article pages ---------- */
    .page-hero { background: #fff; border-bottom: 1px solid var(--line); padding-block: clamp(28px, 5vw, 56px); }
    .page-hero .wrap { display: grid; gap: 12px; justify-items: start; }
    .page-hero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; color: var(--brand); max-width: 24ch; }
    .page-hero .lede { font-size: clamp(1.05rem, 2vw, 1.22rem); max-width: 64ch; }
    .meta { font-size: .85rem; color: var(--muted); }
    .content { padding-block: clamp(32px, 5vw, 56px); }
    .content > .wrap { display: grid; gap: clamp(36px, 5vw, 56px); }
    .section { display: grid; gap: 14px; max-width: 780px; }
    .section.wide { max-width: none; }
    .section h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; }
    .section h3 { font-size: 1.12rem; font-weight: 700; }
    .section p, .section li { max-width: 70ch; }
    .section ul, .section ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
    .answer { font-size: 1.1rem; font-weight: 600; color: var(--brand-ink); }
    .callout { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 8px; }
    .steps { list-style: none; padding: 0 !important; counter-reset: step; display: grid; gap: 10px !important; }
    .steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; max-width: none; }
    .steps li::before { content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font: 800 1rem/1 var(--display); }
    .steps li > div { display: grid; gap: 4px; min-width: 0; }
    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 4px; }
    .stat b { font: 800 clamp(1.6rem, 3.5vw, 2.2rem)/1 var(--display); color: var(--brand); font-variant-numeric: tabular-nums; }
    .stat span { font-size: .92rem; color: var(--muted); }
    .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
    table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
    caption { text-align: left; padding: 12px 14px 0; font-weight: 700; }
    th, td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: left; }
    tbody tr:last-child td { border-bottom: 0; }
    th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--panel); }
    .num { text-align: right; white-space: nowrap; }
    .bar-cell { width: 55%; }
    .bar { display: block; height: 10px; border-radius: 5px; background: var(--gold); }
    .faq { display: grid; gap: 10px; max-width: 840px; }
    .faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; }
    .faq summary { cursor: pointer; padding: 15px 0; font: 700 1.05rem/1.35 var(--body); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
    .faq summary[lang="ta"], [lang="ta"] .faq summary { font-family: var(--tamil); }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; font: 800 1.3rem/1 var(--display); color: var(--brand); flex-shrink: 0; }
    .faq details[open] summary::after { content: "\2013"; }
    .faq .a { padding-bottom: 16px; display: grid; gap: 8px; }
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
    .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px; align-content: start; }
    .card h3 { font-size: 1.1rem; }
    .cta-band { background: var(--brand); color: #fff; border-radius: 16px; padding: clamp(22px, 4vw, 36px); display: grid; gap: 14px; justify-items: start; }
    .cta-band h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); }
    .cta-band p { color: rgb(255 255 255 / 92%); max-width: 62ch; }
    .cta-band a:not(.btn) { color: var(--gold); }
    .plain-list { list-style: none; padding: 0 !important; }
    .sources { font-size: .88rem; color: var(--muted); }

    /* ---------- Footer (identical to the home page) ---------- */
    .site-footer {
      background: var(--ink);
      color: #fff;
      border-top: 6px solid var(--gold);
      padding-block: 40px;
      text-align: center;
    }

    .site-footer p {
      font: 800 clamp(1.3rem, 3vw, 1.8rem)/1.2 var(--display);
    }

    .site-footer .gold {
      color: var(--gold);
    }

    .site-footer small {
      display: block;
      opacity: .85;
    }

    .footer-org {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .footer-logo {
      display: inline-flex;
      background: #fff;
      border-radius: 8px;
      padding: 4px 10px;
      transition: transform .15s ease;
    }

    .footer-logo:hover {
      transform: translateY(-2px);
    }

    .footer-logo img {
      width: 112px;
      height: auto;
    }

    .site-footer .footer-links { font: 600 .95rem/1.4 var(--body); }

    .footer-links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .95rem; }

    .footer-links a { color: #fff; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
    .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }