@charset "UTF-8";
/* ==========================================================================
   MS Alpha Capital, Design System
   "Institutional Modern": ink ground, bone paper, gold as accent only.
   Single stylesheet for every page. No build step required.

   CONTENTS
   01. Tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Surfaces (light / ink inversion)
   06. Header & navigation
   07. Buttons & links
   08. Cards
   09. Hero
   10. Content blocks
   11. Prose (article pages)
   12. Forms
   13. Tables & data
   14. Footer
   15. Utilities
   16. Motion & reveal
   17. Accessibility & print
   ========================================================================== */


/* 01. TOKENS ============================================================== */

:root {
  /* --- Ink ramp (primary neutral, cool navy-black) --- */
  --ink-900: #070C15;
  --ink-800: #0B1220;
  --ink-700: #131C2E;
  --ink-600: #1E2A40;
  --ink-500: #33415B;
  --ink-400: #5A6883;
  --ink-300: #8B97AE;
  --ink-200: #C2CAD8;
  --ink-100: #E4E8EF;
  --ink-050: #F1F3F7;

  /* --- Bone ramp (warm paper) --- */
  --bone-100: #FFFFFF;
  --bone-200: #FBFAF7;
  --bone-300: #F7F5F1;
  --bone-400: #EFEBE4;
  --bone-500: #E3DDD2;

  /* --- Gold (accent ONLY, never a large fill) --- */
  --gold-700: #806521;   /* darkened from #8A6D24: needs 4.5:1 on bone-400 for small text */
  --gold-600: #A8853A;
  --gold-500: #C8A241;
  --gold-400: #D9B863;
  --gold-300: #E8D19A;
  --gold-wash: rgba(200, 162, 65, 0.10);
  --gold-line: rgba(200, 162, 65, 0.32);

  /* --- Support --- */
  --pos: #1F7A4D;
  --neg: #A5342E;

  /* --- Semantic (light surface is the default) --- */
  --bg:           var(--bone-300);
  --bg-raised:    var(--bone-100);
  --bg-sunken:    var(--bone-400);
  --text:         var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --line:         rgba(11, 18, 32, 0.12);
  --line-strong:  rgba(11, 18, 32, 0.24);
  --accent:       var(--gold-600);
  --accent-text:  var(--gold-700);
  --on-accent:    var(--ink-900);
  --shadow-color: 216 30% 12%;

  /* --- Fluid type scale (1.250 major third, viewport-responsive) --- */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.729rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.16vw, 0.912rem);
  --step-0:  clamp(1.000rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.200rem, 1.13rem + 0.35vw, 1.406rem);
  --step-2:  clamp(1.440rem, 1.32rem + 0.58vw, 1.758rem);
  --step-3:  clamp(1.728rem, 1.54rem + 0.94vw, 2.197rem);
  --step-4:  clamp(2.074rem, 1.78rem + 1.47vw, 2.746rem);
  --step-5:  clamp(2.488rem, 2.04rem + 2.24vw, 3.433rem);
  --step-6:  clamp(2.986rem, 2.32rem + 3.33vw, 4.291rem);
  --step-7:  clamp(3.583rem, 2.61rem + 4.87vw, 5.364rem);

  /* --- Families --- */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Refined Scotch-roman cut: no wonk, low softness, display optical size. */
  --display-vars: "opsz" 144, "SOFT" 0, "WONK" 0;

  /* --- Spacing (4px base) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* Section rhythm scales with viewport */
  --section-y: clamp(3.5rem, 2.2rem + 6.5vw, 8rem);
  --section-y-tight: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

  /* --- Measure --- */
  --container: 75rem;   /* 1200px */
  --container-narrow: 46rem;
  --container-wide: 86rem;
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);

  /* --- Radii: institutional = nearly square --- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-pill: 999px;

  /* --- Elevation: restrained, cool --- */
  --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.05);
  --shadow-2: 0 2px 4px hsl(var(--shadow-color) / 0.05), 0 6px 16px -6px hsl(var(--shadow-color) / 0.10);
  --shadow-3: 0 4px 8px hsl(var(--shadow-color) / 0.06), 0 16px 40px -12px hsl(var(--shadow-color) / 0.16);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;

  /* --- Layers --- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  --header-h: 4.5rem;

  color-scheme: light;
}


/* 02. RESET & BASE ======================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--gold-500);
  color: var(--ink-900);
}


/* 03. TYPOGRAPHY ========================================================== */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--step-6); }
h2, .h2 { font-size: var(--step-4); letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--step-2); line-height: 1.18; letter-spacing: -0.015em; }
h4, .h4 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.012em; }

h5, h6 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.display-xl {
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-weight: 400;
  font-size: var(--step-7);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Eyebrow / kicker, the small tracked label above a heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 60ch;
  text-wrap: pretty;
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--accent-text); }

/* Tabular figures for anything numeric, money must align. */
.num, td.num, .stat__value, .calc output, .data-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

small, .small { font-size: var(--step--1); }
.fine-print { font-size: var(--step--2); line-height: 1.6; color: var(--text-faint); }

strong, b { font-weight: 600; }

abbr[title] { text-decoration-style: dotted; cursor: help; }


/* 04. LAYOUT PRIMITIVES =================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section header: eyebrow + title + lead, consistently spaced */
.section-head { margin-bottom: var(--space-9); max-width: 52rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head > h2 + .lead,
.section-head > h1 + .lead { margin-top: var(--space-4); }

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

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

/* Split layout: content + aside, collapses cleanly */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

/* A hairline gold rule used as a section divider */
.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--line) 40%, transparent 100%);
  border: 0;
  margin: 0;
}


/* 05. SURFACES ============================================================ */
/* Any element can flip the whole token set. Children adapt automatically. */

[data-surface="ink"] {
  --bg:          var(--ink-800);
  --bg-raised:   var(--ink-700);
  --bg-sunken:   var(--ink-900);
  --text:        var(--bone-300);
  --text-muted:  var(--ink-200);
  --text-faint:  var(--ink-300);
  --line:        rgba(247, 245, 241, 0.14);
  --line-strong: rgba(247, 245, 241, 0.28);
  --accent:      var(--gold-500);
  --accent-text: var(--gold-400);
  --on-accent:   var(--ink-900);
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
}

[data-surface="paper"] {
  --bg: var(--bone-100);
  background: var(--bg);
  color: var(--text);
}

[data-surface="sunken"] {
  --bg: var(--bone-400);
  --bg-raised: var(--bone-200);
  background: var(--bg);
  color: var(--text);
}

/* Fine engraved texture for large ink fields, keeps flat colour from feeling cheap */
.ink-field {
  position: relative;
  isolation: isolate;
}
.ink-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(247,245,241,0.035) 1px, transparent 1px);
  background-size: 5.5rem 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}


/* 06. HEADER & NAVIGATION ================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bone-300) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bone-300); }
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

/* --- Brand lockup: SVG mark + live-text wordmark --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
  flex: none;
}

/* Client logo artwork: a square gold frame containing the alpha mark. Because
   the frame occupies the outer third, it needs more height than a bare mark
   would to stay legible in the header. */
.brand__logo {
  height: 3.25rem;
  width: auto;
  flex: none;
}

/* The footer serves logo-light.svg, the identical artwork filled in bone, so
   the mark sits straight on the ink with no tile behind it. */
.site-footer .brand__logo { height: 3.75rem; }

@media (max-width: 30rem) {
  .brand__logo { height: 2.75rem; }
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.brand__sub {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.28rem;
}

/* --- Primary nav --- */
.nav { display: none; }

@media (min-width: 64rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.85rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); }

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

/* --- Mobile drawer toggle --- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border-radius: var(--r-sm);
  flex: none;
}

@media (min-width: 64rem) { .nav-toggle { display: none; } }

.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--text);
  transition: transform var(--dur-2) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Mobile drawer --- */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-drawer);
  background: var(--ink-800);
  color: var(--bone-300);
  padding: var(--space-7) var(--gutter) var(--space-9);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-0.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
}

.drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              visibility 0s;
}

@media (min-width: 64rem) { .drawer { display: none; } }

.drawer__link {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(247, 245, 241, 0.12);
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-size: var(--step-2);
  color: var(--bone-300);
  text-decoration: none;
}

.drawer__link[aria-current="page"] { color: var(--gold-400); }

body.is-locked { overflow: hidden; }


/* 06b. SEARCH ============================================================= */

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  background: transparent;
  transition: border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--gold-wash); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }

.icon-btn__kbd {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-faint);
}

/* --- overlay --- */
.search {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1rem, 6vh, 6rem) var(--gutter) var(--gutter);
  background: rgba(7, 12, 21, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  /* visibility must flip INSTANTLY on open, otherwise it stays hidden for the
     duration of the transition and the input cannot receive focus. On close it
     is delayed so the fade-out is still visible. */
  transition: opacity var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
}

.search[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s;
}

.search__panel {
  width: 100%;
  max-width: 42rem;
  max-height: min(70vh, 40rem);
  display: flex;
  flex-direction: column;
  background: var(--bone-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateY(-0.75rem) scale(0.99);
  transition: transform var(--dur-2) var(--ease-out);
}
.search[data-open="true"] .search__panel { transform: none; }

.search__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.search__bar > svg { width: 1.2rem; height: 1.2rem; color: var(--ink-400); flex: none; }

.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--step-1);
  color: var(--ink-800);
  padding: 0.25rem 0;
}
.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { display: none; }

.search__close {
  flex: none;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  border: 1px solid rgba(11, 18, 32, 0.16);
  border-radius: 3px;
  padding: 0.2rem 0.45rem;
}
.search__close:hover { color: var(--ink-800); border-color: var(--ink-400); }

.search__status {
  padding: var(--space-3) var(--space-5) 0;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-400);
  flex: none;
}
.search__status:empty { display: none; }

.search__results {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3);
  display: grid;
  gap: 2px;
}

.search__hint {
  padding: var(--space-5);
  font-size: var(--step--1);
  color: var(--ink-400);
  text-align: center;
}

.search__hit {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-800);
  border-left: 2px solid transparent;
}
.search__hit:hover, .search__hit.is-active, .search__hit:focus-visible {
  background: var(--bone-300);
  border-left-color: var(--gold-500);
  outline: none;
}

.search__sec {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.search__title { font-size: var(--step-0); font-weight: 600; }
.search__snip { font-size: var(--step--1); color: var(--ink-500); line-height: 1.5; }
.search__snip mark {
  background: var(--gold-wash);
  color: var(--ink-800);
  font-weight: 600;
  padding: 0 0.1em;
  border-radius: 2px;
}

@media (max-width: 30rem) {
  .icon-btn { padding: 0.5rem; }
  .search { padding-top: 0; }
  .search__panel { max-height: 100dvh; border-radius: 0; border: 0; }
}



/* 07. BUTTONS & LINKS ===================================================== */

a { color: inherit; }

.link {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
  padding-bottom: 1px;
}
.link:hover { background-size: 100% 2px; color: var(--accent-text); }

/* Arrow link, the workhorse "read more" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-text);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  transition: width var(--dur-2) var(--ease-out);
}
.link-arrow:hover::after { width: 1.9rem; }

.btn {
  --btn-bg: var(--ink-800);
  --btn-fg: var(--bone-200);
  --btn-bd: var(--ink-800);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Primary = gold. Used sparingly: one per view. */
.btn--gold {
  --btn-bg: var(--gold-500);
  --btn-bd: var(--gold-500);
  --btn-fg: var(--ink-900);
}
.btn--gold:hover { --btn-bg: var(--gold-400); --btn-bd: var(--gold-400); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: var(--line-strong);
  --btn-fg: var(--text);
}
.btn--ghost:hover { --btn-bd: var(--accent); --btn-fg: var(--accent-text); box-shadow: none; }

.btn--solid-invert {
  --btn-bg: var(--bone-200);
  --btn-bd: var(--bone-200);
  --btn-fg: var(--ink-900);
}

.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--step--2); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--step-0); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}


/* 08. CARDS =============================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}

/* Gold hairline that draws in on hover, the signature interaction */
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-md) var(--r-md) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}

.card--link:hover,
.card--link:focus-within {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}

.card--link:hover::before,
.card--link:focus-within::before { transform: scaleX(1); }

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-sm);
  background: var(--gold-wash);
  color: var(--accent-text);
  flex: none;
}
.card__icon svg { width: 1.25rem; height: 1.25rem; }

.card__title { font-size: var(--step-1); }

.card__title a {
  text-decoration: none;
  color: inherit;
}

/* Stretched link: makes the whole card clickable without nesting anchors */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__body { color: var(--text-muted); font-size: var(--step--1); flex: 1; }

.card__foot {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* Numbered card variant for process / step lists */
.card--numbered { padding-top: var(--space-7); }
.card__num {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-size: var(--step-3);
  color: rgba(11, 18, 32, 0.30);   /* decorative watermark, aria-hidden */
  line-height: 1;
}

/* Article card */
.article-card { gap: var(--space-2); }
.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}


/* 09. HERO ================================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(34rem, 82svh, 48rem);
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title { max-width: 18ch; }

.hero__lead {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--step-1);
  font-weight: 300;
  color: var(--text-muted);
}

.hero__actions { margin-top: var(--space-8); }

/* Layered ambient wash, pure CSS, zero image weight.
   Replaces the 3.4MB hero.svg entirely. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% 12%, rgba(200, 162, 65, 0.16), transparent 62%),
    radial-gradient(48rem 36rem at 8% 88%, rgba(51, 65, 91, 0.55), transparent 60%),
    linear-gradient(168deg, var(--ink-900) 0%, var(--ink-800) 46%, var(--ink-700) 100%);
}

/* Faint engraved grid, masked so it never competes with text */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(247, 245, 241, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 245, 241, 0.05) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 78%);
}

/* Page header for interior pages, shallower than the home hero */
.page-hero {
  position: relative;
  padding-block: clamp(4rem, 3rem + 5vw, 7.5rem) clamp(3rem, 2.4rem + 3vw, 5rem);
  overflow: hidden;
}
.page-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
.page-hero__title { margin-top: var(--space-2); }
.page-hero .lead { margin-top: var(--space-5); }


/* 10. CONTENT BLOCKS ====================================================== */

/* --- Breadcrumbs --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}
.breadcrumb a { text-decoration: none; color: inherit; transition: color var(--dur-1) var(--ease-out); }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb [aria-current="page"] { color: var(--text-muted); }

/* --- Stat band --- */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.stat {
  background: var(--bg);
  padding: var(--space-6) var(--space-5);
}

.stat__value {
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat__label {
  margin-top: var(--space-3);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Feature list with gold ticks ---
   NOT display:grid on the <li>. These items mix inline elements with bare text
   ("<strong>Label.</strong> Sentence…"), and grid turns the <strong> into one
   item and the trailing text into a separate anonymous item, which then
   auto-places into the narrow icon column and wraps one word per line.
   An absolutely-positioned marker keeps all the content in a single flow. */
.tick-list { display: grid; gap: var(--space-4); }
.tick-list li {
  position: relative;
  padding-left: 2.15rem;
  color: var(--text-muted);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--accent);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

/* --- Pull quote --- */
.pullquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-6);
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.pullquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Callout / disclosure box --- */
.callout {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.callout__title {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.callout--risk { border-left-color: var(--neg); }

/* --- CTA band --- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 1.8rem + 4vw, 5rem);
  text-align: center;
}
.cta-band__inner { position: relative; z-index: 2; }
.cta-band .lead { margin-inline: auto; margin-top: var(--space-4); }
.cta-band .cluster { margin-top: var(--space-7); }

/* --- Accordion (FAQ) --- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 500;
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  transition: color var(--dur-1) var(--ease-out);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary:hover { color: var(--accent-text); }
.accordion__item summary::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2) var(--ease-out);
}
.accordion__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion__panel { padding-bottom: var(--space-5); color: var(--text-muted); max-width: 68ch; }

/* --- Market data embeds --- */
.market-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  overflow: hidden;
}
.market-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
/* No min-height: the embedded widget declares its own pixel height, and a
   floor here just leaves dead space underneath when the widget is shorter. */
.market-panel__body { position: relative; }
.market-panel__body iframe { width: 100%; border: 0; display: block; }
.market-panel__body > div { width: 100%; }
.market-panel__body .tradingview-widget-copyright { padding: 0 var(--space-5) var(--space-3); }

.ticker-strip {
  border-block: 1px solid var(--line);
  background: var(--bg-raised);
}
.ticker-strip iframe { display: block; width: 100%; border: 0; }


/* 11. PROSE =============================================================== */

.prose {
  max-width: 68ch;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--text-muted);
}

.prose > * + * { margin-top: var(--space-5); }

.prose h2 {
  margin-top: var(--space-9);
  font-size: var(--step-3);
  color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.prose h3 {
  margin-top: var(--space-7);
  font-size: var(--step-1);
  color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.prose h2 + *, .prose h3 + * { margin-top: var(--space-4); }

.prose strong { color: var(--text); font-weight: 600; }

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}
.prose a:hover { text-decoration-color: var(--accent); }

.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: var(--space-3); }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  background: var(--accent);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--accent-text); font-weight: 600; }

.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  font-style: italic;
  color: var(--text);
}

.prose figure { margin-block: var(--space-7); }
.prose figcaption {
  margin-top: var(--space-3);
  font-size: var(--step--2);
  color: var(--text-faint);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  padding: 0.15em 0.4em;
  border-radius: var(--r-sm);
}

/* Article layout with sticky table of contents */
.article-layout { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
@media (min-width: 68rem) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 16rem; }
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
  font-size: var(--step--1);
  display: none;
}
@media (min-width: 68rem) { .toc { display: block; } }

.toc__title {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
}

.toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 1px solid var(--line);
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--accent-text); border-left-color: var(--accent); }


/* 12. FORMS =============================================================== */

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__hint { font-size: var(--step--2); color: var(--text-faint); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out);
  appearance: none;
}

.input::placeholder, .textarea::placeholder { color: var(--text-faint); opacity: 1; }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--gold-wash);
}

.textarea { min-height: 9rem; resize: vertical; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235A6883' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
  padding-right: 2.5rem;
}

.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select { border-color: var(--neg); }

.field__error {
  font-size: var(--step--2);
  color: var(--neg);
  font-weight: 500;
}

/* Numeric input with a rupee affix */
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix__symbol {
  position: absolute;
  left: 1rem;
  color: var(--text-faint);
  font-weight: 500;
  pointer-events: none;
}
.input-affix .input { padding-left: 2.25rem; }
.input-affix--suffix .input { padding-left: 1rem; padding-right: 2.5rem; }
.input-affix--suffix .input-affix__symbol { left: auto; right: 1rem; }

/* Hide number spinners, steppers are noise on currency fields */
.input[type="number"] { -moz-appearance: textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Range slider */
.range { width: 100%; appearance: none; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track {
  height: 2px; background: var(--line-strong); border-radius: var(--r-pill);
}
.range::-moz-range-track { height: 2px; background: var(--line-strong); border-radius: var(--r-pill); }
.range::-webkit-slider-thumb {
  appearance: none;
  width: 1.05rem; height: 1.05rem; margin-top: -0.5rem;
  background: var(--gold-500);
  border: 2px solid var(--bg-raised);
  border-radius: 50%;
  box-shadow: var(--shadow-1);
}
.range::-moz-range-thumb {
  width: 1.05rem; height: 1.05rem;
  background: var(--gold-500);
  border: 2px solid var(--bg-raised);
  border-radius: 50%;
}
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gold-wash); }

/* Honeypot: must be invisible to humans but reachable by bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Form status messages */
.form-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  border: 1px solid var(--line);
}
.form-status--ok { border-left: 2px solid var(--pos); background: var(--bg-raised); }
.form-status--err { border-left: 2px solid var(--neg); background: var(--bg-raised); }


/* 13. TABLES & DATA ======================================================= */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 32rem;
}

.data-table th {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-sunken);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}

.data-table tbody tr:hover td { background: var(--bg-sunken); }
.data-table td:first-child { color: var(--text); font-weight: 500; }
.data-table .num { text-align: right; }

.chart-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 15rem;
}
.chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }


/* 13b. CALCULATORS ======================================================== */

.calc-layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) {
  .calc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* Grid children default to min-width:auto, which lets the wide tax comparison
   table push the page sideways instead of scrolling inside its own container.
   Scoped ONLY to the calculator layout: applying it to .split would remove the
   min-content floor from every two-column section, letting one column starve
   the other down to a single word per line on wide screens. */
.calc-layout > * { min-width: 0; }

.table-wrap { max-width: 100%; }

.calc-panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.calc-results { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 61.999rem) { .calc-results { position: static; } }

/* The single headline number */
.result-hero {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.result-hero__label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.result-hero__value {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  /* Scales lower than --step-5 at the small end: a figure like ₹4,97,21,789
     contains no natural break opportunity, so it must fit rather than wrap. */
  font-size: clamp(1.85rem, 1.05rem + 3.4vw, 3.433rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.result-rows { margin-top: var(--space-5); display: grid; gap: var(--space-1); }

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.result-row:last-child { border-bottom: 0; }
.result-row dt { color: var(--text-muted); }
.result-row dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.result-row--total dd { color: var(--accent-text); font-size: var(--step-0); }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--step--2);
  color: var(--text-faint);
}
/* Deliberately not flex/grid: these spans mix an <i> swatch with bare text, and
   a flex container would turn that text into a separate anonymous item. Inline
   flow keeps the swatch and its label together. */
/* The swatch carries the colour; the LABEL must stay readable. Colouring the
   whole span gold put 11px text at 2.4:1 on white. */
.chart-legend span { display: inline; white-space: nowrap; color: var(--text-muted); }
.chart-legend .swatch-value i { background: var(--gold-500); }
.chart-legend .swatch-invested i { background: var(--text-faint); }
.chart-legend i {
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  margin-right: 0.5rem;
  vertical-align: middle;
}


.calc-chart {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 14rem;
  color: var(--text);
}
.calc-chart svg { overflow: visible; }


/* 13c. ALLOCATOR ========================================================== */

.profile-picker { display: grid; gap: var(--space-2); }
@media (min-width: 30rem) { .profile-picker { grid-template-columns: repeat(3, 1fr); } }

.profile-opt { position: relative; }
.profile-opt input { position: absolute; opacity: 0; pointer-events: none; }

.profile-opt span {
  display: block;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out);
}
.profile-opt input:checked + span {
  border-color: var(--accent);
  background: var(--gold-wash);
  color: var(--accent-text);
}
.profile-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the split ---------------------------------------------------------- */
.alloc-list { display: grid; gap: var(--space-4); }

.alloc-row { display: grid; gap: 0.4rem; }

.alloc-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--step--1);
}
.alloc-row__name { font-weight: 600; }
.alloc-row__pct { font-variant-numeric: tabular-nums; color: var(--accent-text); font-weight: 700; }

/* Flex, so a group that splits internally (mutual funds into its conservative
   and growth sleeves) can show both segments in one bar. */
.alloc-row__bar {
  display: flex;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  overflow: hidden;
}
.alloc-row__fill {
  height: 100%;
  background: var(--accent);
  transition: width var(--dur-3) var(--ease-out);
}
.alloc-row__fill[data-tier="reserve"] { background: var(--ink-400); }

.alloc-row__children {
  display: grid;
  gap: 0.15rem;
  margin: 0.35rem 0 0 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--line);
}
.alloc-row__children li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--step--2);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.alloc-row__children li span:first-child::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: middle;
}
.alloc-row__children li[data-tier="reserve"] span:first-child::before { background: var(--ink-400); }

/* --- asset class toggles ------------------------------------------------ */
.asset-toggles { display: grid; gap: var(--space-2); }
@media (min-width: 26rem) { .asset-toggles { grid-template-columns: 1fr 1fr; } }

.asset-opt { position: relative; }
.asset-opt input { position: absolute; opacity: 0; pointer-events: none; }

.asset-opt span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out);
}
.asset-opt span::before {
  content: "";
  width: 1rem; height: 1rem;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent no-repeat center / 0.75rem;
}
.asset-opt input:checked + span {
  border-color: var(--accent);
  background: var(--gold-wash);
  color: var(--accent-text);
}
.asset-opt input:checked + span::before {
  border-color: var(--accent);
  background-color: var(--gold-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.asset-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.alloc-warning {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 2px solid var(--neg);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.alloc-warning p + p { margin-top: var(--space-2); }

.alloc-row__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--step--2);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* --- verdict ------------------------------------------------------------ */
.verdict {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  border-left-width: 3px;
}
.verdict__label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.verdict__rate {
  font-family: var(--font-display);
  font-variation-settings: var(--display-vars);
  font-size: var(--step-3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.verdict__note { font-size: var(--step--1); color: var(--text-muted); }

.verdict[data-band="healthy"] { border-left-color: var(--pos); }
.verdict[data-band="healthy"] .verdict__label { color: var(--pos); }
.verdict[data-band="caution"] { border-left-color: var(--gold-600); }
.verdict[data-band="caution"] .verdict__label { color: var(--accent-text); }
.verdict[data-band="risky"] { border-left-color: var(--neg); }
.verdict[data-band="risky"] .verdict__label { color: var(--neg); }

/* --- readiness checklist ------------------------------------------------ */
.checklist { display: grid; gap: var(--space-3); }

.checklist label {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: var(--space-3);
  align-items: start;
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--text-muted);
}
.checklist input {
  margin-top: 0.3em;
  accent-color: var(--gold-500);
  width: 1.15rem;
  height: 1.15rem;
}
.checklist strong { color: var(--text); display: block; }

.checklist-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  background: var(--bg-sunken);
  color: var(--text-muted);
}



/* 14. FOOTER ============================================================== */

.site-footer { padding-block: var(--space-10) var(--space-6); }

.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

@media (min-width: 62rem) {
  .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-9); }
}

.footer-col__title {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}

.footer-col ul { display: grid; gap: var(--space-3); }

.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--step--1);
  transition: color var(--dur-1) var(--ease-out);
}
.footer-col a:hover { color: var(--accent-text); }

.social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.social a:hover { border-color: var(--accent); color: var(--accent-text); background: var(--gold-wash); }
.social svg { width: 1.05rem; height: 1.05rem; }

/* Partner logo strip. The marks belong to the partner and are used under their
   brand guidelines, so they are only ever scaled, never recoloured or cropped.
   Heights are matched in CSS rather than in the files, because supplied logos
   arrive at wildly different aspect ratios. */
/* A grid, not a wrapping flex row. Logos arrive at wildly different widths, so
   a flex row packs as many as fit and leaves the last one orphaned on its own
   line, which reads as a mistake. Fixed columns give an even block whatever
   widths turn up. Safe as grid because every child is an <li>: there is no bare
   text here to be swept into an anonymous grid item. */
.partner-strip {
  list-style: none;
  margin: var(--space-8) auto 0;
  padding: 0;
  max-width: 52rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-8);
  align-items: center;
  justify-items: center;
}
.partner-strip__item { display: flex; align-items: center; }
/* Matched box height is not matched optical weight. A logo that carries a
   tagline under its wordmark reads far smaller than a single-line mark at the
   same height, so each logo may set --logo-scale to nudge itself level. The
   file is still only ever scaled, never recoloured or cropped. */
.partner-strip img {
  display: block;
  width: auto;
  height: calc(3.5rem * var(--logo-scale, 1));
  max-width: calc(15rem * var(--logo-scale, 1));
  object-fit: contain;
}
@media (max-width: 40rem) {
  .partner-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-5);
  }
  .partner-strip img {
    height: calc(2.5rem * var(--logo-scale, 1));
    max-width: calc(9rem * var(--logo-scale, 1));
  }
}

.disclosure {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.disclosure p + p { margin-top: var(--space-3); }

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--2);
  color: var(--text-faint);
}

.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }


/* 15. UTILITIES =========================================================== */

.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;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: var(--z-toast);
  padding: 0.75rem 1.25rem;
  background: var(--ink-800);
  color: var(--bone-200);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.no-wrap { white-space: nowrap; }

@media (max-width: 47.999rem) { .hide-sm { display: none !important; } }
@media (min-width: 48rem)     { .show-sm-only { display: none !important; } }


/* 16. MOTION & REVEAL ===================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stagger children without per-element inline styles */
[data-reveal-group] > *:nth-child(1) { --reveal-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { --reveal-delay: 70ms; }
[data-reveal-group] > *:nth-child(3) { --reveal-delay: 140ms; }
[data-reveal-group] > *:nth-child(4) { --reveal-delay: 210ms; }
[data-reveal-group] > *:nth-child(5) { --reveal-delay: 280ms; }
[data-reveal-group] > *:nth-child(6) { --reveal-delay: 350ms; }


/* 17. ACCESSIBILITY & PRINT =============================================== */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Never rely on hover alone on touch devices */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; }
  .card--link:hover { transform: none; }
}

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(11,18,32,0.35); --line-strong: rgba(11,18,32,0.6); --text-muted: var(--ink-700); }
  [data-surface="ink"] { --line: rgba(247,245,241,0.4); --text-muted: var(--bone-300); }
}

@media print {
  .site-header, .site-footer, .drawer, .nav-toggle, .cta-band, .market-panel, .ticker-strip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  [data-surface="ink"] { background: #fff !important; color: #000 !important; }
  .container { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .prose { max-width: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}