@import url("tokens.css");

/* ==========================================================================
   H2 Investment - main stylesheet
   Every colour, size, radius and space below resolves to a design token.
   No hex literals in this file. See assets/css/tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */
*, *::before, *::after { box-sizing: border-box; }

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

/* R-4: neutralise every transition, animation and smooth-scroll for visitors
   who ask for reduced motion. Duration tokens are ALSO collapsed in tokens.css,
   but this universal block catches any hardcoded duration and is the belt to
   that braces. Our audience skews older and vestibular sensitivity is common -
   see design/audience-research-genz-seniors.md.
   AUDIT (do not remove): animations still run once at ~0ms, so anything that
   animates from opacity:0/transform to visible still ENDS visible. The only
   opacity:0 reveal, .lead-popup__panel, is gated behind
   @media (prefers-reduced-motion: no-preference), so under reduce it is never
   animated and shows in its natural (visible) state. No element depends on a
   transition to become visible - nothing vanishes when motion is off. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-md); }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--space-4); }

ul, ol { padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-action-hover); text-decoration-thickness: 2px; }

strong, b { font-weight: var(--font-weight-bold); }
small { font-size: var(--text-sm); }
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-7) 0;
}

/* ------------------------------------------------------- 2. Focus & a11y */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--color-action);
  color: var(--color-on-action);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: top var(--duration-normal) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); color: var(--color-on-action); }

/* --------------------------------------------------------- 3. Layout bits */
.container {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.container--narrow { max-width: var(--container-md); }

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--color-surface-subtle); }
.section--inverse {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.section--inverse h2,
.section--inverse h3 { color: var(--color-text-inverse); }
.section--inverse p { color: var(--color-text-inverse-muted); }
.section--inverse a { color: var(--color-text-inverse); }

@media (min-width: 768px) {
  .section { padding-block: var(--space-10); }
  .section--tight { padding-block: var(--space-8); }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
  .split--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}

.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-head p { color: var(--color-text-muted); font-size: var(--text-md); margin-bottom: 0; }

.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-action);
  margin-bottom: var(--space-2);
}
.section--inverse .eyebrow { color: var(--color-text-inverse-muted); }

.lede {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 66ch;
}
@media (min-width: 768px) { .lede { font-size: var(--text-lg); } }

.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--space-6); }

/* -------------------------------------------------------------- 4. Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  padding-block: var(--space-2);
}
.brand:hover { color: var(--color-action); }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { white-space: nowrap; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  min-height: 48px;
}
.nav-toggle:hover { background: var(--color-surface-sunken); }
.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open { display: block; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-top: 1px solid var(--color-border);
}
.site-nav__list li { margin: 0; }

.site-nav__link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}
.site-nav__link:hover { background: var(--color-surface-brand-subtle); color: var(--color-action-hover); }
.site-nav__link[aria-current="page"] {
  color: var(--color-action);
  background: var(--color-surface-brand-subtle);
}
.site-nav__cta { margin-top: var(--space-2); }
.site-nav__cta .btn { width: 100%; }

@media (max-width: 1023px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border-top: 0;
  }
  .site-nav__link { padding: var(--space-2) var(--space-3); }
  .site-nav__link[aria-current="page"] {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 2px;
  }
  .site-nav__cta { margin-top: 0; margin-left: var(--space-3); }
  .site-nav__cta .btn { width: auto; }
}

/* ------------------------------------------------------------- 5. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control-md);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.btn--primary {
  background: var(--color-action);
  color: var(--color-on-action);
  border-color: var(--color-action);
}
.btn--primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-action);
}
.btn--primary:active { background: var(--color-action-active); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-action);
  border-color: var(--color-border-brand);
}
.btn--secondary:hover { background: var(--color-surface-brand-subtle); color: var(--color-action-hover); }

.btn--accent {
  background: var(--color-action);
  color: var(--color-text-inverse);
  border-color: var(--color-action);
}
.btn--accent:hover { background: var(--color-action-hover); color: var(--color-text-inverse); }

.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform var(--duration-fast) var(--ease-standard); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------- 6. Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.card h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.card > :last-child { margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: var(--space-4); }

.card--link {
  transition: box-shadow var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard);
}
.card--link:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-brand); }

.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-surface-brand-subtle);
  color: var(--color-action);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-touch-target); height: var(--size-touch-target);
  border-radius: var(--radius-md);
  background: var(--color-surface-brand-subtle);
  color: var(--color-action);
  margin-bottom: var(--space-4);
}
.icon-badge svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* ---------------------------------------------------------------- 7. Hero */
.hero {
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-8);
}
@media (min-width: 768px) { .hero { padding-block: var(--space-10); } }

.hero h1 { font-size: var(--text-3xl); }
@media (min-width: 768px) { .hero h1 { font-size: var(--text-4xl); } }

.hero__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); } }

.page-hero {
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}
@media (min-width: 768px) { .page-hero { padding-block: var(--space-8); } }
.page-hero h1 { margin-bottom: var(--space-3); }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin: 0;
}

/* -------------------------------------------------------- 8. Breadcrumbs */
.breadcrumbs { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
.breadcrumbs li { margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.breadcrumbs li + li::before { content: "/"; color: var(--color-border-strong); }

/* ------------------------------------------------------ 9. Disclaimer box */
/* A footnote, not a warning panel (client, 2026-08-24). The coloured box was
   removed because the mandatory market-risk sentence it repeated is already in
   the footer of every page: three copies of the same warning trained readers to
   skip all of them. What remains is the page-specific caveat, marked with a
   leading asterisk and set small.

   NOTE ON THE R-5 FLOOR: .risk-note is deliberately NOT in the 16px disclaimer
   floor any more. It may be small ONLY because it no longer carries the
   regulatory sentence - risk_note() must never have RISK concatenated into it
   again. The mandatory copy stays floored in .footer-legal__risk and
   .lead-popup__risk, which is where it now lives. */
.risk-note {
  display: block;
  position: relative;
  padding-left: var(--space-4);
  margin-block: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.risk-note__star {
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}
.risk-note strong { font-weight: var(--font-weight-semibold); color: var(--color-text); }

.callout {
  border: 1px solid var(--color-border-brand);
  background: var(--color-surface-brand-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: var(--text-sm);
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { font-size: var(--text-base); }

/* --------------------------------- R-5: regulatory small-print floor */
/* The AMFI market-risk disclaimer must never render below 16px. It shipped
   at 14px once (.risk-note), and was still set at 13px (.footer-legal) and
   12px (.lead-popup__risk). A risk warning set smaller than the copy around
   it reads to SEBI/AMFI as de-emphasising the risk, and our audience skews
   older, where legibility is not optional - see
   design/audience-research-genz-seniors.md. This is the single source of
   truth for disclaimer / legal type size: do NOT set font-size on these
   selectors anywhere else, and never below --text-base (16px). max() makes
   16px a hard floor - a larger token still wins, a smaller one cannot. */
.footer-legal,
.footer-legal__risk,
.lead-popup__risk {
  font-size: max(var(--text-base), 1rem);
}

/* ------------------------------------------------------------- 10. Tables */
.table-wrap { overflow-x: auto; margin-bottom: var(--space-5); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-bottom: var(--space-3);
}
th, td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
thead th {
  background: var(--color-surface-sunken);
  font-weight: var(--font-weight-bold);
  border-bottom: 2px solid var(--color-border-strong);
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- 11. Forms */
.field { margin-bottom: var(--space-5); }
.field > label,
.fieldset__legend {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.field__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.req { color: var(--color-text-danger-strong); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--size-control-md);
  padding: var(--space-3);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
textarea { min-height: 128px; resize: vertical; line-height: var(--leading-normal); }

input:hover, select:hover, textarea:hover { border-color: var(--color-border-brand); }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-action);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: 1px;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--color-text-danger-strong);
  background: var(--color-surface-danger);
}
::placeholder { color: var(--color-text-subtle); opacity: 1; }

.field__error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-danger-strong);
}
.field__error.is-visible { display: block; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.checkbox input[type="checkbox"] {
  width: var(--size-icon-md); height: var(--size-icon-md);
  min-height: 0;
  margin: 3px 0 0;
  flex: none;
  accent-color: var(--color-action);
}
.checkbox label { margin: 0; }

.form-status {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--color-surface-success); border: 1px solid var(--color-border-success); color: var(--color-text); }
.form-status--error { background: var(--color-surface-danger); border: 1px solid var(--color-text-danger-strong); color: var(--color-text); }

/* --------------------------------------------------------- 12. Calculator */
.calc { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}

.calc__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .calc__panel { padding: var(--space-6); } }

.calc__mode { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.calc__mode .seg {
  flex: 1;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.calc__mode .seg[aria-pressed="true"] {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-action);
  font-weight: var(--font-weight-bold);
}

.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.calc__row label { margin: 0; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.calc__value {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-md);
  color: var(--color-action);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__field { margin-bottom: var(--space-6); }
.calc__inputs { display: flex; gap: var(--space-3); align-items: center; }
.calc__inputs input[type="number"] { max-width: 170px; }

input[type="range"] {
  width: 100%;
  height: 30px;
  margin: var(--space-2) 0 0;
  background: transparent;
  accent-color: var(--color-action);
  cursor: pointer;
}
.calc__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.result {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
@media (min-width: 768px) { .result { padding: var(--space-6); } }
.result h3 { color: var(--color-text-inverse); font-size: var(--text-md); }
.result__headline {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  margin: var(--space-2) 0 var(--space-1);
  overflow-wrap: anywhere;
}
.result__sub { color: var(--color-text-inverse-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.result__grid {
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--color-text-inverse-muted);
  padding-top: var(--space-5);
}
@media (min-width: 480px) { .result__grid { grid-template-columns: 1fr 1fr; } }
.result__label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
  margin-bottom: var(--space-1);
}
.result__figure {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.bar {
  display: flex;
  height: var(--space-3);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-sunken);
  margin-bottom: var(--space-3);
}
.bar__seg { height: 100%; }
.bar__seg--invested { background: var(--color-chart-1); }
.bar__seg--growth { background: var(--color-chart-2); }
.legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--text-xs); color: var(--color-text-muted);
  list-style: none; padding: 0;
}
.legend li { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.swatch { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-sm); flex: none; }
.swatch--invested { background: var(--color-chart-1); }
.swatch--growth { background: var(--color-chart-2); }

/* ---------------------------------------------------------- 13. Article */
.article { font-size: var(--text-md); }
.article h2 { margin-top: var(--space-7); font-size: var(--text-xl); }
.article h3 { margin-top: var(--space-6); font-size: var(--text-md); }
.article > :first-child { margin-top: 0; }
.article li { line-height: var(--leading-normal); }
.article blockquote {
  border-left: 3px solid var(--color-border-brand);
  padding-left: var(--space-4);
  margin-left: 0;
  color: var(--color-text-muted);
  font-style: italic;
}

.article-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.toc {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.toc h2 { font-size: var(--text-base); margin-bottom: var(--space-3); margin-top: 0; }
.toc ul { margin-bottom: 0; }

.sidebar { position: static; }
@media (min-width: 900px) { .sidebar { position: sticky; top: 92px; } }

/* -------------------------------------------------------------- 14. FAQ */
.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
}
.faq summary {
  cursor: pointer;
  padding: var(--space-4);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--text-lg); color: var(--color-action); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--color-border); }
.faq__body { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.faq__body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- 15. CTA */
.cta-band {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr auto; padding: var(--space-8); } }
.cta-band h2 { color: var(--color-text-inverse); margin-bottom: var(--space-2); }
.cta-band p { color: var(--color-text-inverse-muted); margin-bottom: 0; max-width: 60ch; }

/* ------------------------------------------------------------ 16. Footer */
.site-footer {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse-muted);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
  margin-top: var(--space-10);
}
.site-footer a { color: var(--color-text-inverse); text-decoration: none; }
.site-footer a:hover { color: var(--color-text-inverse); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer h2, .site-footer h3 {
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-7); } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--space-3); }

.footer-brand .brand { color: var(--color-text-inverse); }
.footer-brand .brand:hover { color: var(--color-text-inverse); }
.footer-brand p { color: var(--color-text-inverse-muted); max-width: 42ch; }

.arn-badge {
  display: inline-block;
  border: 1px solid var(--color-text-inverse-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-4);
}

.footer-legal {
  border-top: 1px solid var(--color-text-inverse-muted);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  /* font-size: set by the R-5 disclaimer floor rule (never below --text-base). */
  line-height: var(--leading-relaxed);
}
.footer-legal p { margin-bottom: var(--space-3); }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-legal__risk { color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-5);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.footer-bottom li { margin: 0; }

/* ------------------------------------------------------------- 17. Print */
@media print {
  .site-header, .site-footer, .skip-link, .cta-band, .nav-toggle { display: none; }
  a::after { content: " (" attr(href) ")"; font-size: var(--text-xs); }
}

/* ==========================================================================
   NAV lookup  (nav.html)
   Factual price lookup, regular plans only. No ranking, scoring or charting -
   see tools/_gen/pages_nav.py for why that is deliberate.
   ========================================================================== */
.navlk { margin-bottom: var(--space-8); }

.navlk__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-5);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.navlk__field { flex: 1 1 15rem; min-width: 0; }
.navlk__field--amc { flex: 0 1 16rem; }
.navlk__field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}
.navlk__field input,
.navlk__field select { width: 100%; }
.navlk__form .btn { flex: 0 0 auto; }

.navlk__meta,
.navlk__status {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.navlk__status:empty { margin: 0; }

/* Stale-data notice. Uses the shared warning tokens (contrast-checked:
   7.43:1 light, 7.53:1 dark) - no font-size override, so it reads at body
   size rather than the muted meta size: a stale published price is a
   compliance signal, not a footnote. */
.navlk__notice {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-warning);
  color: var(--color-text-warning-strong);
}
.navlk__notice[hidden] { display: none; }
.navlk__notice a { color: inherit; }

.navlk__results { margin-top: var(--space-4); }
.navlk__empty,
.navlk__more {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.navlk__list { list-style: none; margin: 0; padding: 0; }
.navlk__item + .navlk__item { border-top: 1px solid var(--color-border); }

/* The whole row is the control, so the hit target matches what looks clickable. */
.navlk__pick {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-3);
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.navlk__pick:hover { background: var(--color-surface-subtle); }
.navlk__pick:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1);
}
.navlk__name {
  grid-column: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}
.navlk__sub {
  grid-column: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.navlk__nav {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-heading);
}
.navlk__date {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--color-text-muted);
  justify-self: end;
}
.navlk__rupee { margin-right: 0.1em; font-weight: var(--font-weight-semibold); }

/* ------------------------------------------------------------ detail card */
.navlk__detail { margin-top: var(--space-6); }
.navlk__detail:focus { outline: none; }
.navlk__card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.navlk__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.navlk__title { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.navlk__amc { margin: 0 0 var(--space-5); color: var(--color-text-muted); }
.navlk__big {
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--color-text-heading);
}
.navlk__asat {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.navlk__facts {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.navlk__facts dt { color: var(--color-text-muted); }
.navlk__facts dd { margin: 0; color: var(--color-text); }
.navlk__live {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  background: var(--color-surface-success);
  border: 1px solid var(--color-border-success);
  border-radius: var(--radius-md);
}
.navlk__srcnote,
.navlk__risk {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
.navlk__risk {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .navlk__form { padding: var(--space-4); }
  .navlk__field--amc { flex: 1 1 100%; }
  .navlk__form .btn { width: 100%; }
  .navlk__pick { grid-template-columns: 1fr; }
  .navlk__nav { grid-column: 1; grid-row: auto; }
  .navlk__date { grid-column: 1; grid-row: auto; justify-self: start; }
  .navlk__big { font-size: var(--text-3xl); }
  .navlk__facts { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .navlk__facts dd { margin-bottom: var(--space-2); }
}

/* ==========================================================================
   Hub lists  (calculators/, insights/, downloads)
   ========================================================================== */
.hub__list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.hub__item {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.hub__name { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.hub__blurb {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
/* Not-yet-built entries are visibly quieter and carry no link, so the page
   never promises a destination it cannot deliver. */
.hub__item--soon {
  background: var(--color-surface-subtle);
  border-style: dashed;
}
.hub__item--soon .hub__name { color: var(--color-text-muted); }
.hub__item--soon .hub__name::after {
  content: " — being built";
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Founder block + confirmed facts  (about)
   ========================================================================== */
.person {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-7);
}
.person__photo {
  width: 132px; height: 132px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-border);
}
.person__name { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.person__role {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.person__body > p:last-child { margin-bottom: 0; }

.facts {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0 0 var(--space-4);
  padding: 0;
}
.facts li {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.facts b { display: block; font-size: var(--text-lg); color: var(--color-text-heading); }
/* Never below --text-base: this carries the substantiation for the claims
   directly above it, and fine print smaller than the claim it qualifies is the
   pattern regulators read as burying it. */
.fine { font-size: var(--text-base); color: var(--color-text-muted); }

@media (max-width: 560px) {
  .person { grid-template-columns: 1fr; gap: var(--space-4); }
  .person__photo { width: 108px; height: 108px; }
}

/* ==========================================================================
   Calculator suite  (assets/js/calculators.js)
   --------------------------------------------------------------------------
   The engine builds its own markup, so these class names are its contract:
   .calc-stat / .calc-bar / .calc-table / .calc-notes__list / .table-scroll.
   Every table sits inside .table-scroll because a nine-column amortisation
   schedule cannot be made to fit 375px and must scroll in its own box rather
   than push the page sideways.
   Colours come from tokens.css only - no raw hex anywhere in this file.
   ========================================================================== */

.calcx { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .calcx {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.calcx__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
@media (min-width: 768px) { .calcx__panel { padding: var(--space-6); } }
@media (min-width: 900px) { .calcx__panel--form { position: sticky; top: var(--space-4); } }

.calcx__legend {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.calcx__field { margin-bottom: var(--space-5); }
.calcx__field:last-of-type { margin-bottom: var(--space-4); }
.calcx__field label {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
.calcx__inputs { display: flex; gap: var(--space-2); align-items: center; }
.calcx__prefix {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.calcx__inputs input[type="number"] { min-width: 0; flex: 1 1 auto; }
.calcx__inputs input[type="range"] { width: 100%; margin-top: var(--space-2); }
.calcx__hint {
  display: block;
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.calcx__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.calcx__results { display: grid; gap: var(--space-6); }

/* ------------------------------------------------------------ stat tiles */
.calc-stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin: 0;
  padding: 0;
}
.calc-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 0;
}
.calc-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.calc-stat__value {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  letter-spacing: var(--tracking-tight);
  /* Long rupee figures must wrap rather than widen the grid track. */
  overflow-wrap: anywhere;
}
.calc-stat__sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.calc-stat--total {
  background: var(--color-surface-brand-subtle);
  border-color: var(--color-border-brand);
}
.calc-stat--gain {
  background: var(--color-surface-success);
  border-color: var(--color-border-success);
}
.calc-stat--gain .calc-stat__value { color: var(--color-text-success-strong); }
.calc-stat--loss {
  background: var(--color-surface-warning);
  border-color: var(--color-border-warning);
}

/* -------------------------------------------------------------- bar split */
.calc-bar {
  display: flex;
  width: 100%;
  height: var(--space-6);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-sunken);
}
.calc-bar__seg { display: block; height: 100%; }
.calc-bar__seg--a { background: var(--color-chart-2); }
.calc-bar__seg--b { background: var(--color-chart-1); }
.calc-bar__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: var(--text-sm);
}
.calc-bar__key-item { display: flex; align-items: center; gap: var(--space-2); }
.calc-bar__key-item::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.calc-bar__key-item--a::before { background: var(--color-chart-2); }
.calc-bar__key-item--b::before { background: var(--color-chart-1); }

/* ------------------------------------------------------------ result table */
.table-scroll {
  overflow-x: auto;
  /* Keyboard users need to be able to scroll it, so it is focusable. */
  -webkit-overflow-scrolling: touch;
}
.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 30rem;
}
.calc-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.calc-table th,
.calc-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
.calc-table thead th {
  color: var(--color-text-heading);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-border-strong);
}
.calc-table tbody th { font-weight: var(--font-weight-semibold); }
.calc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.calc-table tbody tr:last-child th,
.calc-table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ notes */
.calc-notes__list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.calc-notes__list li + li { margin-top: var(--space-2); }

/* -------------------------------------------------- formula explanation */
.formula {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  overflow-x: auto;
}
.formula code { white-space: pre; }
.formula dl { margin: var(--space-3) 0 0; }
.formula dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}
.formula dd { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

/* Cross-links between the twelve calculators, at the foot of each one. */
.calc-siblings {
  display: grid;
  gap: var(--space-2) var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Components that shipped in markup before they had a rule behind them.
   Found by tools/check_classes.py. Every value below is a token from
   assets/css/tokens.css - no raw colours, no raw sizes.
   ========================================================================== */

/* ------------------------------------------------- header: toggle label */
.nav-toggle__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

/* ---------------------------------------------------- learn page: TOC */
/* Matches the generic .toc h2 rule so the heading keeps its size even if a
   page puts the title in something other than an h2. */
.toc__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-3);
}

/* ----------------------------- D-11: unfinished-content marker (DELETE-ALL) */
/* Wraps a [[placeholder]] token. Deliberately ALARMING: an unfilled placeholder
   that reaches production must look like a mistake, never like copy. 143 still
   ship (social URLs, grievance officer, form endpoints), and most cluster in the
   footer where the previous override made them transparent + muted - i.e. they
   read as ordinary text, which is exactly how one goes live by accident. An
   obvious marker is safer than a legible-looking one; see
   design/audience-research-genz-seniors.md.
   SCOPE: this block (down to the closing brace of .site-footer .placeholder) is
   self-contained. When the last placeholder is filled and the .placeholder spans
   are gone, delete the whole block in one edit - nothing else references it. */
.placeholder {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--border-width-thick) solid var(--color-border-warning);
  border-radius: var(--radius-xs);
  outline: var(--border-width-thin) dashed var(--color-border-warning);
  outline-offset: 2px;
  background: var(--color-surface-warning);
  color: var(--color-text-warning-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  font-style: normal;
  letter-spacing: var(--tracking-wide);
  word-break: break-word;
}
.placeholder::before {
  content: "\26A0 UNFILLED \2192 "; /* warning sign + UNFILLED + arrow */
}
/* Same alarm inside the footer, where these markers cluster. The old override
   hid them (transparent, muted); this keeps them impossible to miss on the dark
   footer. Part of the DELETE-ALL block above. */
.site-footer .placeholder {
  background: var(--color-surface-warning);
  color: var(--color-text-warning-strong);
  padding: 0 var(--space-2);
}

/* ------------------------------------------------------- footer columns */
.footer-contact address {
  font-style: normal;
  line-height: var(--leading-relaxed);
}
.footer-social__heading { margin-top: var(--space-5); }
.footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.footer-social li { margin-bottom: var(--space-2); }
/* Only profiles that actually exist are rendered, so this is a real link, not
   the plain-text "pending" treatment it replaced - a footer showing
   "[[Instagram profile URL - to be supplied]]" to a visitor read as a broken
   page. chrome.py filters SOCIAL; anything still a [[placeholder]] never
   reaches the markup. Sized to the 48px touch target (R-2). */
.footer-social__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}
.footer-social__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ------------------------------------------------------------ lead forms */
.lead-form {
  display: grid;
  gap: var(--space-5);
  max-width: var(--container-sm);
}
.lead-form .field__error:empty { display: none; }

/* The honeypot must be reachable by a bot parsing the DOM and invisible to
   every human, including screen-reader users - so it is moved off-screen
   rather than display:none, which some bots skip. */
.field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Why we collect what we collect - sits under the consent checkbox. */
.form-purpose {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border-left: var(--border-width-accent) solid var(--color-border-brand);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.form-purpose h3 {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
  color: var(--color-text-heading);
}
.form-purpose p { margin: 0 0 var(--space-2); }
.form-purpose p:last-child { margin-bottom: 0; }

/* ========================================================== sticky CTA bar */
/* Present on every page. Mobile: a full-width bar pinned to the bottom edge.
   Desktop: a compact stack in the bottom-right corner, clear of the content
   column. body gets bottom padding on mobile so the bar never covers the
   last of the footer. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  background: var(--color-surface);
  border-top: var(--border-width-thin) solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.sticky-cta__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--size-touch-target);
  padding: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  transition: var(--transition-colors);
}
.sticky-cta__btn + .sticky-cta__btn {
  border-left: var(--border-width-thin) solid var(--color-border-subtle);
}
.sticky-cta__btn:hover { background: var(--color-surface-hover); }
.sticky-cta__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: calc(-1 * var(--focus-ring-width));
}
.sticky-cta__icon { font-size: var(--text-lg); line-height: var(--leading-none); }
.sticky-cta__label { display: block; }
.sticky-cta__btn--sip {
  background: var(--color-action);
  color: var(--color-on-action);
}
.sticky-cta__btn--sip:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.sticky-cta__btn--wa:hover { background: var(--color-surface-success); }
.sticky-cta__btn--call:hover { background: var(--color-surface-brand-subtle); }

body { padding-bottom: calc(var(--size-touch-target) + var(--space-4)); }

@media (min-width: 768px) {
  /* The desktop dock is NOT "clear of the content column" the way the comment
     above assumed. It is pinned bottom-right of the VIEWPORT, so the last strip
     of the document can never be scrolled out from under it - and the last
     thing on every page is the footer legal block, which carries the
     market-risk disclaimer. Mobile already reserved room for exactly this
     reason; desktop reserved none.

     Reserve it inside the footer rather than on <body>: the footer paints its
     own dark background, so the space reads as footer padding instead of a gap
     under the page. Measured from a 1280px render: dock 135px tall, sitting
     37px off the bottom edge. Re-measure if a fourth button is ever added. */
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: 12rem; }
  .sticky-cta {
    left: auto;
    right: var(--space-5);
    bottom: var(--space-5);
    flex-direction: column;
    width: auto;
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .sticky-cta__btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    text-align: left;
  }
  .sticky-cta__btn + .sticky-cta__btn {
    border-left: 0;
    border-top: var(--border-width-thin) solid var(--color-border-subtle);
  }
}

@media print { .sticky-cta { display: none; } }

/* ============================================================= lead popup */
/* Shown at most once every 30 days, dismissal persisted in localStorage by
   assets/js/main.js. hidden is the closed state - the display rule below
   must not win over it, hence the [hidden] guard. */
.lead-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.lead-popup[hidden] { display: none; }
.lead-popup__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-surface-scrim);
}
.lead-popup__panel {
  position: relative;
  width: 100%;
  max-width: var(--container-sm);
  max-height: calc(100vh - var(--space-10));
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.lead-popup__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--size-control-md);
  height: var(--size-control-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  line-height: var(--leading-none);
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-colors);
}
.lead-popup__close:hover { background: var(--color-surface-hover); color: var(--color-text); }
.lead-popup__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.lead-popup__title {
  margin: 0 var(--space-8) var(--space-3) 0;
  font-size: var(--text-xl);
  color: var(--color-text-heading);
}
.lead-popup__desc {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.lead-popup__list {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.lead-popup__list li { margin-bottom: var(--space-2); }
.lead-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.lead-popup__risk {
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  /* font-size: set by the R-5 disclaimer floor rule (never below --text-base). */
  line-height: var(--leading-normal);
  color: var(--color-text-legal);
}

@media (prefers-reduced-motion: no-preference) {
  .lead-popup__panel { animation: lead-popup-in var(--duration-normal) var(--ease-decelerate); }
}
@keyframes lead-popup-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------ 14. Client testimonials */
/* The panel ships with placeholder cards until real client words arrive.
   Those placeholders carry .placeholder, so the D-11 warning treatment makes
   them unmissable - nobody can publish this page believing it holds real
   testimonials. See tools/_gen/testimonials.py. */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: var(--border-width-thick) solid var(--color-border-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.testimonial__quote { margin: 0; }
.testimonial__quote p { margin: 0; }
.testimonial__who {
  margin: 0;
  margin-top: auto;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}
/* An empty card must not look like a designed, finished thing. */
.testimonial--empty {
  border-left-color: var(--color-border-warning);
  background: var(--color-surface-subtle);
}
.testimonials__note {
  /* Small print, so the R-5 floor applies - see section 4.2. This carries the
     market-risk disclaimer and must never render below 16px. */
  color: var(--color-text-muted);
  font-size: max(var(--text-base), 1rem);
}

/* --------------------------------------------- 15. Fund house roster (/nav) */
/* A plain A-Z list of the fund houses in AMFI's published file. Deliberately
   austere: no logos, no cards, no tiles, nothing that could read as a badge of
   partnership or a preference ordering. See tools/_gen/amc_roster.py for why
   the wording around it matters more than the styling. */
.amc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-2) var(--space-6);
  margin: var(--space-6) 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.amc-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  color: var(--color-text);
}
.amc-list__note {
  /* Attribution and the "not a partnership" wording. Held at the R-5 floor:
     this is the sentence that keeps the list compliant, so it must stay
     legible rather than shrinking into small print. See design-system 4.2. */
  color: var(--color-text-muted);
  font-size: max(var(--text-base), 1rem);
}

/* ------------------------------------- 16. Money-path explainer (/how-we-work) */
/* "Where your money actually goes": a hand-authored inline SVG showing the
   one-directional path the money takes, with H2 drawn OFF that path. Every
   fact is repeated in .money-path__caption so the picture is never the sole
   carrier of meaning. Nothing animates, so there is no reduced-motion concern.
   No AMC is named, coloured or depicted - only tokens are used. See
   tools/_gen/pages_core.py (how_we_work) and design/audience-research. */
.money-path {
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .money-path {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
  }
}
.money-path__svg {
  width: 100%;
  max-width: 22rem; /* 352px - keeps it from ballooning on wide screens */
  height: auto;
  display: block;
  margin-inline: auto;
}
/* SVG element styling. Font-size/weight are presentation attributes on the
   elements themselves so they scale with the viewBox; CSS carries colour only,
   always from a token. */
.mp-flow      { stroke: var(--color-chart-1); stroke-width: 2; fill: none; }
.mp-arrowhead { fill: var(--color-chart-1); }
.mp-node      { fill: var(--color-surface-brand); }
.mp-num       { fill: var(--color-text-inverse); }
.mp-label     { fill: var(--color-text); }
.mp-branch    { stroke: var(--color-border-strong); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.mp-box       { fill: var(--color-surface-brand-subtle); stroke: var(--color-border-brand); stroke-width: 1.5; }
.mp-h2        { fill: var(--color-text-brand); }
.mp-sub       { fill: var(--color-text-muted); }
.mp-tag       { fill: var(--color-text-muted); }

.money-path__caption {
  font-size: var(--text-md);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}
.money-path__lead {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}
.money-path__steps {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}
.money-path__steps li { line-height: var(--leading-normal); }
.money-path__aside {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-left: var(--border-width-accent) solid var(--color-border-brand);
  background: var(--color-surface-brand-subtle);
  border-radius: var(--radius-sm);
}
.money-path__aside > :last-child { margin-bottom: 0; }