/* ============================================================
   BYLD Wealth — Tokens (CSS custom properties build)
   Generated from tokens/core.json + tokens/semantic.json + tokens/component.json + tokens/themes/dark.json
   Authored 2026-04-08 for the freemium + MIA-first + 16-leaf taxonomy pivot.
   References: ADR-033 to ADR-038, PHASE1-PRD §7/§9/§15, PHASE1-TECH-PLAN §6.4

   This is the canonical CSS variable set. Every HTML file in design-system/
   that uses tokens references THIS file. Do not hardcode hex/px values.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- CORE: Color — Gold scale ---------- */
  --color-gold-100: #F5E6C8;
  --color-gold-200: #EBD3A0;
  --color-gold-300: #E0C17A;
  --color-gold-400: #D2AC58;
  --color-gold-500: #C49A3C;
  --color-gold-600: #AE8835;
  --color-gold-700: #9B7A2F;
  --color-gold-800: #7E6428;
  --color-gold-900: #6B5420;

  /* ---------- CORE: Color — Neutral (dark-tuned) ---------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-100: #E5E5EA;
  --color-neutral-200: #C7C7CC;
  --color-neutral-300: #8E8E93;
  --color-neutral-400: #636366;
  --color-neutral-500: #48484A;
  --color-neutral-600: #3A3A3C;
  --color-neutral-700: #2C2C2E;
  --color-neutral-800: #1C1C1E;
  --color-neutral-900: #111113;
  --color-neutral-950: #0A0A0B;
  --color-neutral-1000: #000000;

  /* ---------- CORE: Color — Alpha ---------- */
  --color-white-02: rgba(255,255,255,0.02);
  --color-white-04: rgba(255,255,255,0.04);
  --color-white-06: rgba(255,255,255,0.06);
  --color-white-08: rgba(255,255,255,0.08);
  --color-white-12: rgba(255,255,255,0.12);
  --color-white-16: rgba(255,255,255,0.16);
  --color-black-40: rgba(0,0,0,0.40);
  --color-black-60: rgba(0,0,0,0.60);
  --color-black-80: rgba(0,0,0,0.80);
  --color-gold-12:  rgba(196,154,60,0.12);
  --color-gold-24:  rgba(196,154,60,0.24);
  --color-gold-40:  rgba(196,154,60,0.40);

  /* ---------- CORE: Color — Feedback ---------- */
  --color-success-100: #0E2F1C;
  --color-success-300: #10B981;
  --color-success-500: #22C55E;
  --color-success-700: #16A34A;
  --color-warning-100: #3A2A0A;
  --color-warning-300: #FBBF24;
  --color-warning-500: #F59E0B;
  --color-warning-700: #D97706;
  --color-error-100:   #3A0F12;
  --color-error-300:   #F87171;
  --color-error-500:   #EF4444;
  --color-error-700:   #DC2626;
  --color-info-100:    #0E1F3A;
  --color-info-300:    #60A5FA;
  --color-info-500:    #3B82F6;
  --color-info-700:    #2563EB;

  /* ---------- CORE: Color — Lifecycle states (freemium pivot) ---------- */
  --color-state-trial:        #C49A3C;
  --color-state-wealth-paid:  #E0C17A;
  --color-state-free-markets: #7F8C7A;
  --color-state-churned:      #636366;
  --color-state-erased:       #48484A;

  /* ---------- CORE: Color — Asset / liability leaves (16) ---------- */
  --color-leaf-mutual-fund:    #C49A3C;
  --color-leaf-equity:         #22C55E;
  --color-leaf-pms-aif:        #A78BFA;
  --color-leaf-bonds:          #3B82F6;
  --color-leaf-real-estate:    #F59E0B;
  --color-leaf-commodities:    #FBBF24;
  --color-leaf-esop-rsu:       #06B6D4;
  --color-leaf-unlisted-other: #8B5CF6;
  --color-leaf-pf-epf:         #10B981;
  --color-leaf-nps:            #14B8A6;
  --color-leaf-fd-rd-savings:  #0EA5E9;
  --color-leaf-insurance:      #EC4899;
  --color-leaf-lap-las:        #F97316;
  --color-leaf-auto-loan:      #FB923C;
  --color-leaf-credit-card:    #EF4444;
  --color-leaf-el-pl-hl:       #DC2626;

  /* ---------- CORE: Typography ---------- */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-display: 'Playfair Display', serif;
  --font-mono:    'JetBrains Mono', monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-size-xs:  11px;
  --font-size-sm:  12px;
  --font-size-md:  14px;
  --font-size-lg:  16px;
  --font-size-xl:  18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;
  --font-size-6xl: 40px;
  --font-size-7xl: 56px;

  --line-height-tight:   1.1;
  --line-height-snug:    1.25;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose:   1.7;

  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight:   -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
  --letter-spacing-wider:   0.08em;

  /* ---------- CORE: Spacing (8px grid) ---------- */
  --space-0:  0px;
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---------- CORE: Sizes ---------- */
  --size-icon-xs: 12px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-icon-xl: 32px;
  --size-avatar-sm: 32px;
  --size-avatar-md: 44px;
  --size-avatar-lg: 64px;
  --size-avatar-xl: 96px;
  --size-control-sm: 32px;
  --size-control-md: 44px;
  --size-control-lg: 52px;
  --size-control-xl: 64px;
  --size-container-mobile:  414px;
  --size-container-tablet:  768px;
  --size-container-desktop: 1280px;
  --size-container-max:     1440px;

  /* ---------- CORE: Radii ---------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ---------- CORE: Borders ---------- */
  --border-width-hair:  1px;
  --border-width-thick: 2px;
  --border-width-focus: 3px;

  /* ---------- CORE: Shadows ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.30);
  --shadow-sm: 0 2px 6px 0 rgba(0,0,0,0.40);
  --shadow-md: 0 4px 16px 0 rgba(0,0,0,0.50);
  --shadow-lg: 0 8px 32px 0 rgba(0,0,0,0.60);
  --shadow-xl: 0 16px 64px 0 rgba(0,0,0,0.70);
  --shadow-gold-glow:    0 4px 24px rgba(196,154,60,0.30);
  --shadow-gold-glow-lg: 0 8px 40px rgba(196,154,60,0.40);
  --shadow-inset-hairline: inset 0 1px 0 0 rgba(255,255,255,0.06);

  /* ---------- CORE: Backdrop blur ---------- */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(20px);
  --blur-xl: blur(40px);

  /* ---------- CORE: Motion ---------- */
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-ambient: 2500ms;
  --easing-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --easing-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- CORE: z-index ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-drawer:  500;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-tooltip: 5000;
  --z-noise:   9999;

  /* ============================================================
     SEMANTIC LAYER — these map intent to core values.
     Use these in components, NEVER the raw core values.
     ============================================================ */

  /* Brand */
  --brand-primary:         var(--color-gold-500);
  --brand-primary-hover:   var(--color-gold-400);
  --brand-primary-pressed: var(--color-gold-600);
  --brand-secondary:       var(--color-gold-300);
  --brand-tint:            var(--color-gold-12);
  --brand-glow:            var(--color-gold-24);

  /* Surface */
  --surface-page:         var(--color-neutral-950);
  --surface-page-gradient: linear-gradient(180deg, #0A0A0B 0%, #111113 100%);
  --surface-card:         var(--color-neutral-900);
  --surface-card-raised:  var(--color-neutral-800);
  --surface-card-overlay: var(--color-neutral-700);
  --surface-glass:        var(--color-white-04);
  --surface-glass-raised: var(--color-white-08);
  --surface-scrim:        var(--color-black-60);

  /* Text */
  --text-default:   var(--color-neutral-0);
  --text-secondary: var(--color-neutral-200);
  --text-muted:     var(--color-neutral-300);
  --text-subtle:    var(--color-neutral-400);
  --text-inverse:   var(--color-neutral-950);
  --text-brand:     var(--color-gold-500);
  --text-link:      var(--color-gold-300);

  /* Border */
  --border-default: var(--color-white-06);
  --border-raised:  var(--color-white-12);
  --border-focus:   var(--color-gold-500);
  --border-subtle:  var(--color-neutral-700);

  /* Feedback */
  --feedback-success:    var(--color-success-500);
  --feedback-success-bg: var(--color-success-100);
  --feedback-warning:    var(--color-warning-500);
  --feedback-warning-bg: var(--color-warning-100);
  --feedback-error:      var(--color-error-500);
  --feedback-error-bg:   var(--color-error-100);
  --feedback-info:       var(--color-info-500);
  --feedback-info-bg:    var(--color-info-100);

  /* Finance */
  --finance-gain:    var(--color-success-500);
  --finance-gain-bg: var(--color-success-100);
  --finance-loss:    var(--color-error-500);
  --finance-loss-bg: var(--color-error-100);
  --finance-neutral: var(--color-neutral-300);

  /* Spacing semantic */
  --padding-xs: var(--space-4);
  --padding-sm: var(--space-8);
  --padding-md: var(--space-16);
  --padding-lg: var(--space-24);
  --padding-xl: var(--space-32);
  --gap-xs: var(--space-4);
  --gap-sm: var(--space-8);
  --gap-md: var(--space-12);
  --gap-lg: var(--space-16);
  --gap-xl: var(--space-24);
  --section-gap:    var(--space-32);
  --page-gutter:    var(--space-16);
  --page-gutter-lg: var(--space-24);

  /* Radius semantic */
  --radius-control: var(--radius-lg);
  --radius-card:    var(--radius-xl);
  --radius-card-lg: var(--radius-2xl);
  --radius-sheet:   var(--radius-3xl);
  --radius-chip:    var(--radius-full);
  --radius-avatar:  var(--radius-full);

  /* Elevation semantic */
  --elevation-card:       var(--shadow-sm);
  --elevation-card-hover: var(--shadow-md);
  --elevation-drawer:     var(--shadow-lg);
  --elevation-modal:      var(--shadow-xl);
  --elevation-cta:        var(--shadow-gold-glow);
  --elevation-cta-hero:   var(--shadow-gold-glow-lg);

  /* Motion semantic */
  --motion-hover:  var(--duration-fast);
  --motion-ui:     var(--duration-base);
  --motion-drawer: var(--duration-slow);
  --motion-page:   var(--duration-slower);
}

/* ============================================================
   GLOBAL RESET + BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  background: var(--surface-page-gradient);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Premium noise overlay (matches existing brand book) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: var(--z-noise);
  mix-blend-mode: overlay;
}

/* Focus ring */
:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ============================================================
   COMPONENT LIBRARY (BEM names — Dharam rule 3)
   Every reusable piece below is documented in §11 of brand-book-v2.html
   ============================================================ */

/* ---------- Card ---------- */
.byld-card {
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--padding-md);
  box-shadow: var(--elevation-card), var(--shadow-inset-hairline);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.byld-card--hero {
  background: var(--surface-glass-raised);
  border-color: var(--border-raised);
  border-radius: var(--radius-card-lg);
  padding: var(--padding-lg);
  box-shadow: var(--elevation-card-hover), var(--shadow-inset-hairline);
}
.byld-card--leaf {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  cursor: pointer;
  transition: transform var(--motion-hover) var(--easing-out),
              border-color var(--motion-hover) var(--easing-out);
}
.byld-card--leaf:hover {
  transform: translateY(-2px);
  border-color: var(--border-raised);
}

.byld-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
}
.byld-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  letter-spacing: var(--letter-spacing-tight);
}
.byld-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* ---------- Button ---------- */
.byld-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  height: var(--size-control-lg);
  padding: 0 var(--padding-lg);
  border-radius: var(--radius-control);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  transition: transform var(--motion-hover) var(--easing-out),
              box-shadow var(--motion-hover) var(--easing-out),
              background var(--motion-hover) var(--easing-out);
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.byld-button--primary {
  background: linear-gradient(135deg, var(--color-gold-300), var(--color-gold-500), var(--color-gold-700));
  color: var(--text-inverse);
  box-shadow: var(--elevation-cta);
}
.byld-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--elevation-cta-hero);
}
.byld-button--secondary {
  background: var(--surface-glass);
  color: var(--text-default);
  border: var(--border-width-hair) solid var(--border-raised);
}
.byld-button--secondary:hover {
  background: var(--surface-glass-raised);
}
.byld-button--ghost {
  background: transparent;
  color: var(--text-brand);
  height: var(--size-control-md);
  padding: 0 var(--padding-md);
}
.byld-button--ghost:hover {
  background: var(--color-white-04);
}
.byld-button--block {
  width: 100%;
}

/* ---------- Badge ---------- */
.byld-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-chip);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--surface-glass-raised);
  color: var(--text-default);
  border: var(--border-width-hair) solid var(--border-default);
}
.byld-badge--trial {
  background: var(--color-gold-12);
  color: var(--brand-primary);
  border-color: var(--color-gold-24);
}
.byld-badge--wealth-paid {
  background: var(--color-gold-24);
  color: var(--color-gold-300);
  border-color: var(--color-gold-40);
}
.byld-badge--free-markets {
  background: var(--color-neutral-700);
  color: var(--color-state-free-markets);
}
.byld-badge--gain {
  background: var(--finance-gain-bg);
  color: var(--finance-gain);
}
.byld-badge--loss {
  background: var(--finance-loss-bg);
  color: var(--finance-loss);
}

/* ---------- Phone frame ---------- */
.byld-phone {
  width: 390px;
  max-width: 100%;
  min-height: 844px;
  background: var(--surface-page-gradient);
  border-radius: 44px;
  border: 8px solid var(--color-neutral-1000);
  box-shadow: var(--shadow-xl), 0 0 0 2px var(--color-white-08);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.byld-phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: var(--color-neutral-1000);
  border-radius: var(--radius-full);
  z-index: var(--z-sticky);
}
.byld-phone__screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* ---------- Status bar ---------- */
.byld-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-24) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-default);
  font-weight: var(--font-weight-medium);
}

/* ---------- App bar ---------- */
.byld-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--padding-sm) var(--page-gutter);
}
.byld-app-bar__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}
.byld-app-bar__greeting {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.byld-app-bar__greeting-eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.byld-app-bar__greeting-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}

/* ---------- Tab bar (5-tab nav) ---------- */
.byld-tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap-xs);
  padding: var(--space-8) var(--space-8) var(--space-12);
  background: rgba(17,17,19,0.85);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-top: var(--border-width-hair) solid var(--border-default);
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
}
.byld-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--motion-hover) var(--easing-out);
}
.byld-tabbar__item--active {
  color: var(--brand-primary);
}
.byld-tabbar__icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}
.byld-tabbar__item--mia {
  position: relative;
}
.byld-tabbar__item--mia .byld-tabbar__icon {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
  margin-top: -16px;
  filter: drop-shadow(0 4px 16px var(--color-gold-40));
}

/* ---------- MIA avatar ---------- */
.mia-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 30%, var(--color-gold-300), var(--color-gold-700) 70%, var(--color-neutral-1000));
  box-shadow: var(--shadow-gold-glow);
  flex-shrink: 0;
}
.mia-avatar--sm { width: var(--size-avatar-sm); height: var(--size-avatar-sm); }
.mia-avatar--md { width: var(--size-avatar-md); height: var(--size-avatar-md); }
.mia-avatar--lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); }
.mia-avatar--xl { width: var(--size-avatar-xl); height: var(--size-avatar-xl); }
.mia-avatar::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.7), transparent 60%);
  mix-blend-mode: screen;
  animation: mia-breathe 2.5s ease-in-out infinite;
}
@keyframes mia-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* ---------- Trial banner ---------- */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--padding-md);
  margin: 0 var(--page-gutter) var(--padding-md);
  background: var(--color-gold-12);
  border: var(--border-width-hair) solid var(--color-gold-24);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-card);
}
.trial-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.trial-banner__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-primary);
}
.trial-banner__subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}
.trial-banner__cta {
  flex-shrink: 0;
}

/* ---------- MIA chat bubble ---------- */
.mia-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 82%;
  padding: var(--padding-sm) var(--padding-md);
  border-radius: var(--radius-card-lg);
  background: var(--surface-glass-raised);
  border: var(--border-width-hair) solid var(--border-default);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--text-default);
}
.mia-bubble--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--color-gold-400), var(--color-gold-600));
  color: var(--text-inverse);
  border-color: transparent;
}

/* ---------- Stat row ---------- */
.byld-stat-row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
}
.byld-stat-row__label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.byld-stat-row__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-default);
  margin-left: auto;
}

/* ---------- Net worth hero ---------- */
.networth-hero {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.networth-hero__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.networth-hero__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-default);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}
.networth-hero__delta {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  color: var(--finance-gain);
}

/* ---------- Milestone tracker ---------- */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.milestone-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-md);
  padding: var(--padding-md);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
}
.milestone-item__check {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  flex-shrink: 0;
}
.milestone-item--complete .milestone-item__check {
  background: var(--color-gold-12);
  border-color: var(--color-gold-24);
  color: var(--brand-primary);
}
.milestone-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.milestone-item__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.milestone-item__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.milestone-item--complete .milestone-item__title {
  color: var(--brand-primary);
}

/* ---------- Drawer (MIA floating sheet) ---------- */
.mia-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28,28,30,0.92);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-top: var(--border-width-hair) solid var(--border-raised);
  border-top-left-radius: var(--radius-sheet);
  border-top-right-radius: var(--radius-sheet);
  box-shadow: var(--elevation-drawer);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
}
.mia-drawer--peek {
  height: 92px;
}
.mia-drawer--expanded {
  height: 80%;
  max-height: 80%;
}
.mia-drawer__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border-raised);
  margin: var(--space-8) auto var(--space-12);
  flex-shrink: 0;
}
.mia-drawer__header {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 0 var(--padding-md) var(--padding-sm);
  flex-shrink: 0;
}
.mia-drawer__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.mia-drawer__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.mia-drawer__status {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.mia-drawer__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  box-shadow: 0 0 8px var(--color-gold-40);
}
.mia-drawer__messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--padding-md);
  overflow-y: auto;
}
.mia-drawer__composer {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--padding-md);
  border-top: var(--border-width-hair) solid var(--border-default);
}
.mia-drawer__input {
  flex: 1;
  height: var(--size-control-md);
  padding: 0 var(--padding-md);
  border-radius: var(--radius-full);
  border: var(--border-width-hair) solid var(--border-default);
  background: var(--surface-glass);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
}
.mia-drawer__input::placeholder {
  color: var(--text-subtle);
}

/* ---------- Asset leaf swatch ---------- */
.leaf-swatch {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaf-swatch--mutual-fund    { background: color-mix(in srgb, var(--color-leaf-mutual-fund) 20%, transparent); border: 1px solid var(--color-leaf-mutual-fund); }
.leaf-swatch--equity         { background: color-mix(in srgb, var(--color-leaf-equity) 20%, transparent); border: 1px solid var(--color-leaf-equity); }
.leaf-swatch--pms-aif        { background: color-mix(in srgb, var(--color-leaf-pms-aif) 20%, transparent); border: 1px solid var(--color-leaf-pms-aif); }
.leaf-swatch--bonds          { background: color-mix(in srgb, var(--color-leaf-bonds) 20%, transparent); border: 1px solid var(--color-leaf-bonds); }
.leaf-swatch--real-estate    { background: color-mix(in srgb, var(--color-leaf-real-estate) 20%, transparent); border: 1px solid var(--color-leaf-real-estate); }
.leaf-swatch--commodities    { background: color-mix(in srgb, var(--color-leaf-commodities) 20%, transparent); border: 1px solid var(--color-leaf-commodities); }
.leaf-swatch--esop-rsu       { background: color-mix(in srgb, var(--color-leaf-esop-rsu) 20%, transparent); border: 1px solid var(--color-leaf-esop-rsu); }
.leaf-swatch--unlisted-other { background: color-mix(in srgb, var(--color-leaf-unlisted-other) 20%, transparent); border: 1px solid var(--color-leaf-unlisted-other); }
.leaf-swatch--pf-epf         { background: color-mix(in srgb, var(--color-leaf-pf-epf) 20%, transparent); border: 1px solid var(--color-leaf-pf-epf); }
.leaf-swatch--nps            { background: color-mix(in srgb, var(--color-leaf-nps) 20%, transparent); border: 1px solid var(--color-leaf-nps); }
.leaf-swatch--fd-rd-savings  { background: color-mix(in srgb, var(--color-leaf-fd-rd-savings) 20%, transparent); border: 1px solid var(--color-leaf-fd-rd-savings); }
.leaf-swatch--insurance      { background: color-mix(in srgb, var(--color-leaf-insurance) 20%, transparent); border: 1px solid var(--color-leaf-insurance); }
.leaf-swatch--lap-las        { background: color-mix(in srgb, var(--color-leaf-lap-las) 20%, transparent); border: 1px solid var(--color-leaf-lap-las); }
.leaf-swatch--auto-loan      { background: color-mix(in srgb, var(--color-leaf-auto-loan) 20%, transparent); border: 1px solid var(--color-leaf-auto-loan); }
.leaf-swatch--credit-card    { background: color-mix(in srgb, var(--color-leaf-credit-card) 20%, transparent); border: 1px solid var(--color-leaf-credit-card); }
.leaf-swatch--el-pl-hl       { background: color-mix(in srgb, var(--color-leaf-el-pl-hl) 20%, transparent); border: 1px solid var(--color-leaf-el-pl-hl); }

/* ---------- Section header ---------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: 0 var(--page-gutter);
  margin-bottom: var(--space-12);
}
.section-header__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  letter-spacing: var(--letter-spacing-tight);
}
.section-header__action {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-link);
  text-decoration: none;
}

/* ---------- Stack utilities (auto-layout) ---------- */
.stack { display: flex; flex-direction: column; }
.stack--xs { gap: var(--gap-xs); }
.stack--sm { gap: var(--gap-sm); }
.stack--md { gap: var(--gap-md); }
.stack--lg { gap: var(--gap-lg); }
.stack--xl { gap: var(--gap-xl); }
.row { display: flex; flex-direction: row; align-items: center; }
.row--xs { gap: var(--gap-xs); }
.row--sm { gap: var(--gap-sm); }
.row--md { gap: var(--gap-md); }
.row--lg { gap: var(--gap-lg); }
.row--between { justify-content: space-between; }
.row--start    { justify-content: flex-start; }
.row--center   { justify-content: center; }
.row--end      { justify-content: flex-end; }
.row--baseline { align-items: baseline; }
.grow { flex: 1; }

/* ---------- Page content (auto-layout container) ---------- */
.page-content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: var(--padding-md) 0 calc(var(--space-96) + var(--space-32));
}