/* Design tokens taken from the Figma "Loan Web App" file (no Figma variables are defined there). */
:root {
  --color-bg: #faf8ff;
  --color-surface: #ffffff;
  --color-primary: #0933bd;
  --color-primary-active: #314fd5;
  --color-text: #151b2d;
  --color-text-muted: #444654;
  --color-pill-bg: #e3e7ff;
  --color-divider: #e3e7ff;
  --color-icon-tile: #eaedff;
  --color-icon-tile-strong: #dee1ff;
  --color-soft: #f2f3ff;
  --color-scrim: rgba(21, 27, 45, 0.4);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;

  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.05);
  --shadow-header: 0 1px 8px rgba(0, 0, 0, 0.04);
  --shadow-drawer: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --header-height: 64px;
  --app-max-width: 640px;
  --gutter: 16px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body { margin: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.app {
  max-width: var(--app-max-width);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-bg);
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250, 248, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-header);
}

.header__inner {
  height: var(--header-height);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__menu {
  width: 30px;
  height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.header__logo img,
.drawer__header > img {
  width: 181px;
  height: 22px;
  object-fit: contain;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Main ---------- */
.main {
  padding: 0 var(--gutter) 113px; /* 32px container + 81px main bottom padding */
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-pill-bg);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.intro__title {
  padding-top: 4px;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.22px;
}

.intro__subtitle {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-muted);
}

/* ---------- Category grid ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0;
}

.category-card {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease;
}

.category-card:active { transform: scale(0.98); }

.category-card__icon,
.tool-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.category-card__icon {
  width: 36px;
  height: 36px;
  background: var(--color-icon-tile);
}

.category-card__label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Popular calculators ---------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
}

.section-header__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.section-header__meta {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-primary);
}

.tool-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease;
}

.tool-card:active { transform: scale(0.99); }

.tool-card__icon {
  width: 40px;
  height: 40px;
  background: var(--color-icon-tile-strong);
}

.tool-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tool-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.tool-card__desc {
  font-size: 12px;
  line-height: 17.5px;
  color: var(--color-text-muted);
}

.tool-card__title,
.tool-card__desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-card__go {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-soft);
}

/* ---------- Navigation drawer ---------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--color-scrim);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  width: 310px;
  max-width: 85vw; /* Figma: 331.5px cap on a 390px frame */
  overflow-y: auto;
  background: var(--color-surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding-bottom: 32px;
}

body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-scrim { opacity: 1; }

.drawer__header {
  height: var(--header-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.drawer__close:hover { background: var(--color-soft); }

.drawer__divider {
  height: 1px;
  background: var(--color-divider);
}

.drawer__menu {
  padding: 16px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-link {
  position: relative;
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text);
  overflow: hidden;
}

.nav-link:hover { background: var(--color-soft); }

.nav-link__main {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.nav-link.is-active {
  padding: 0 14px;
  background: var(--color-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--color-primary-active);
  font-weight: 600;
}

.nav-link.is-active .nav-link__main { padding-left: 4px; }

.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--color-primary-active);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-scrim, .category-card, .tool-card { transition: none; }
}

/* =====================================================================
   Loan section (Figma LOAN-01 … LOAN-07)
   ===================================================================== */
:root {
  --color-primary-2: #1e57c7;
  --color-primary-3: #0b34be;
  --color-text-faint: #757686;
  --color-dot-light: #618eff;
  --color-dot-mid: #3250d6;
  --color-delta: #00458a;
  --color-chip-strong: #dee1ff;
  --color-error: #ba1a1a;
}

.main--calc { padding-bottom: 32px; }

/* ---------- LOAN-01 listing ---------- */
.pill--compact {
  gap: 4px;
  padding: 4px 12px;
  background: var(--color-icon-tile);
  line-height: normal;
  letter-spacing: 0;
}
.pill--compact .pill__dot { width: 4px; height: 4px; }
.intro__title--tight { padding-top: 0; letter-spacing: -0.55px; }

.filter-strip {
  display: flex;
  align-items: center;
  gap: 16.5px;
  height: 34px;
  margin: 4px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-strip::-webkit-scrollbar { display: none; }

.filter-pill {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-icon-tile);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.filter-pill[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
  filter: drop-shadow(var(--shadow-card));
}

.calc-list { display: flex; flex-direction: column; gap: 12px; }
.calc-list > li[hidden] { display: none; }

.calc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease;
}
.calc-card:active { transform: scale(0.99); }
.calc-card__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.calc-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-icon-tile);
}
.calc-card__text { display: flex; flex-direction: column; min-width: 0; }
.calc-card__title { font-size: 15px; font-weight: 600; line-height: 20px; }
.calc-card__desc { font-size: 12px; line-height: normal; color: var(--color-text-muted); }
.calc-card__title, .calc-card__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-card__go { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.trust-badge {
  margin: 24px 16.641px 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-soft);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.35px;
  text-align: center;
}

/* ---------- Calculator page shell ---------- */
.subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-pill-bg);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Vertical rhythm between cards: 12px, as in every LOAN frame. */
.calc-stack { display: flex; flex-direction: column; gap: 12px; }
.calc-stack--offset { padding-top: 12px; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  filter: drop-shadow(var(--shadow-card));
}

.title-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.title-card--center { align-items: center; padding: 12px; }
.title-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-icon-tile);
}
.title-card__icon--soft { background: var(--color-soft); }
.title-card__icon--tint { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(49, 79, 213, 0.1); }
.title-card__icon--pill { border-radius: var(--radius-sm); background: var(--color-pill-bg); }
.title-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.title-card--center .title-card__text { gap: 0; }
.title-card__title { font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.18px; }
.title-card__title--lg { font-size: 22px; line-height: 28px; letter-spacing: -0.55px; }
.title-card__title--tight { letter-spacing: -0.45px; }
.title-card__desc { font-size: 12px; line-height: 20px; color: var(--color-text-muted); }

/* ---------- Form ---------- */
.form-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field--tight { gap: 4px; }
.field__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field__label { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.field__hint { font-size: 14px; line-height: 20px; color: var(--color-text-muted); white-space: nowrap; }
.field__hint--strong { font-weight: 600; line-height: 18px; }
.field__hint--primary { font-weight: 600; line-height: 18px; color: var(--color-primary); }
.field__hint--muted { font-weight: 600; line-height: 18px; color: var(--color-text-faint); }
.field__hint--chip { padding: 2px 8px; border-radius: 4px; background: var(--color-icon-tile); font-weight: 600; line-height: 18px; color: var(--color-primary); }
.field__hint--pill { padding: 2px 8px; border-radius: var(--radius-full); background: rgba(222, 225, 255, 0.4); font-weight: 600; line-height: 18px; color: var(--color-primary); }
.field__error { font-size: 12px; line-height: 16px; color: var(--color-error); }
.field__error:empty { display: none; }

.input-box {
  position: relative;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-soft);
}
.input-box input,
.input-box select {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input-box:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.input-box.is-invalid { box-shadow: 0 0 0 1.5px var(--color-error); }
.input-box--prefix input { padding-left: 32px; }
.input-box--suffix input { padding-right: 32px; }
.input-box--suffix-wide input { padding-right: 56px; }
.input-box--strong input,
.input-box select { font-weight: 600; }
.input-box--white { background: var(--color-surface); }
.input-box__prefix,
.input-box__suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.input-box__prefix { left: 14px; }
.input-box__suffix { right: 14px; }
.input-box__suffix--sm { font-size: 14px; line-height: 20px; right: 12px; }
.input-box--semibold-affix .input-box__prefix,
.input-box--semibold-affix .input-box__suffix:not(.input-box__suffix--sm) { font-weight: 600; line-height: 22px; }
/* Mortgage frame uses 15px values with 12px affix insets. */
.input-box--15 input,
.input-box--15 select { font-size: 15px; }
.input-box--15 input { padding-left: 16px; }
.input-box--15.input-box--prefix input { padding-left: 32px; }
.input-box--15.input-box--suffix input { padding-right: 36px; }
.input-box--15 .input-box__prefix { left: 12px; font-size: 15px; line-height: 20px; }
.input-box--15 .input-box__suffix { right: 12px; font-size: 15px; line-height: 20px; }
/* Car frame insets the $ value to 36px. */
.input-box--inset-36.input-box--prefix input { padding-left: 36px; }
.input-box--inset-36.input-box--suffix input { padding-right: 36px; }
.input-box__chip {
  position: absolute;
  right: 8px;
  top: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-pill-bg);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
button.input-box__chip { cursor: pointer; }
.input-box--chip input { padding-right: 64px; }

.select-box select { padding-right: 40px; cursor: pointer; }
.select-box--15 select { padding-left: 16px; }
.select-box__chevron { position: absolute; right: 12px; top: 13px; pointer-events: none; }
.select-box--15 .select-box__chevron { top: 14px; }

/* Compare frame: affixes flow inline with muted colour instead of being overlaid. */
.input-inline {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--color-soft);
}
.input-inline:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.input-inline.is-invalid { box-shadow: 0 0 0 1.5px var(--color-error); }
.input-inline input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  outline: none;
}
.input-inline__prefix { padding-right: 8px; font-size: 16px; line-height: 24px; color: var(--color-text-faint); }
.input-inline__suffix { padding-left: 4px; font-size: 14px; line-height: 20px; color: var(--color-text-faint); }

.field-row { display: flex; gap: 12px; }
.field-row > * { flex: 1 1 0; min-width: 0; }
.field-row--8 { gap: 8px; }

.segmented {
  display: flex;
  gap: 4px;
  height: 48px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-soft);
}
.segmented button {
  flex: 1 1 0;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.segmented button[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-primary);
  filter: drop-shadow(var(--shadow-card));
}

/* ---------- Buttons ---------- */
.actions { display: flex; gap: 8px; padding-top: 4px; }
.actions--12 { gap: 12px; }
.actions--pt8 { padding-top: 8px; }
.btn {
  height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.98); }
.btn--ghost { background: var(--color-soft); color: var(--color-text-muted); }
.btn--ghost-dark { background: var(--color-soft); color: var(--color-text); }
.btn--ghost-alt { background: var(--color-icon-tile); color: var(--color-text); }
.btn--ghost-pill { background: var(--color-pill-bg); color: var(--color-text); }
.btn--primary { flex: 1 1 0; gap: 8px; background: var(--color-primary); color: #fff; filter: drop-shadow(var(--shadow-card)); }
.btn--primary-alt { flex: 1 1 0; gap: 8px; background: var(--color-primary-active); color: #fff; filter: drop-shadow(var(--shadow-card)); }
.btn--primary:hover, .btn--primary-alt:hover { filter: brightness(1.08) drop-shadow(var(--shadow-card)); }
.btn--half { flex: 1 1 0; }
.btn--medium { font-weight: 500; }
.btn--r12 { border-radius: var(--radius-md); padding: 0 20px; }
.btn--raised { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); filter: none; }
.btn--raised:hover { filter: brightness(1.08); }

/* ---------- Results ---------- */
.result-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-soft);
  filter: drop-shadow(var(--shadow-card));
}
.result-panel--tile { background: var(--color-icon-tile); }

.result-head { display: flex; flex-direction: column; gap: 2px; }
.result-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-primary-2);
}
.result-label--muted {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.7px;
  color: var(--color-text-muted);
}
.result-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.result-value--4 { gap: 4px; }
.result-value__amount { font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.48px; color: var(--color-primary); }
.result-value__amount--tight { letter-spacing: -0.6px; }
.result-value__unit { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.result-sub { padding-top: 4px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.result-divider { height: 1px; background: rgba(197, 197, 215, 0.3); }

.rows { display: flex; flex-direction: column; gap: 8px; }
.rows--10 { gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row--py4 { padding: 4px 0; }
.row__label { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.row__label--gap4 { gap: 4px; }
.row__value { font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.row--total { padding-top: 4px; }
.row--total .row__label { font-weight: 600; line-height: 18px; color: var(--color-text); }
.row--total .row__value { font-size: 16px; line-height: 22px; color: var(--color-primary); }
.row--band { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-pill-bg); }
.row--band .row__label { font-weight: 600; line-height: 18px; color: var(--color-text); }
.row--band .row__value { font-size: 16px; line-height: 22px; color: var(--color-primary); }
.row--grand .row__label { font-size: 15px; font-weight: 600; color: var(--color-text); }
.row--grand .row__value { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.18px; color: var(--color-primary); }
.row-divider { height: 1px; background: var(--color-pill-bg); }

.dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary); }
.dot--light { background: var(--color-dot-light); }
.dot--mid { background: var(--color-dot-mid); }
.dot--blue2 { background: var(--color-primary-2); }
.dot--dark { background: var(--color-text); }

.note { display: flex; align-items: flex-start; gap: 6px; padding-top: 4px; font-size: 12px; line-height: 16px; color: rgba(68, 70, 84, 0.8); }
.note--14 { font-size: 14px; line-height: 20px; color: var(--color-text-faint); }
.note--dark { color: var(--color-text-muted); }
.note--gap4 { gap: 4px; }
.note--gap8 { gap: 8px; }
.note--gap10 { gap: 10px; }
.note--box { padding: 12px; gap: 10px; border-radius: var(--radius-sm); background: var(--color-icon-tile); font-size: 14px; line-height: 20px; color: var(--color-text); }
.note img { margin-top: 1px; }

.highlight {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  filter: drop-shadow(var(--shadow-card));
}
.highlight__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
.highlight--center { align-items: center; padding: 8px 12px; text-align: center; }
.highlight--center .highlight__head { gap: 4px; justify-content: center; }
.highlight--center .result-value { justify-content: center; }
.highlight--lg { padding: 16px; gap: 8px; border-radius: var(--radius-md); }
.highlight--lg .highlight__head { padding-bottom: 0; }

.chip {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-icon-tile);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.info-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.info-box__line { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--color-text); }
.info-box__title { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-text-muted); }
.info-box__status { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-primary); }
.rows--pt4 { padding-top: 4px; }
.rows--py8 { padding: 8px 0; }
/* LOAN-06 results stack sections with their own padding instead of a gap. */
.result-panel--flat { gap: 0; }
.result-head--pb12 { gap: 0; padding-bottom: 12px; }
.result-value--pt4 { padding-top: 4px; }
.note--wrap { padding-top: 8px; }
.input-box--suffix-48 input { padding-right: 48px; }
.input-box__suffix--inset12 { right: 12px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- LOAN-05 car extras ---------- */
.profile-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.profile-card__head { display: flex; align-items: center; justify-content: space-between; }
.profile-card__current { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-primary); }
.vehicle-options { display: flex; gap: 8px; }
.vehicle-option {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.vehicle-option[aria-pressed="true"] { background: var(--color-soft); color: var(--color-primary); }
/* The exported SVG is used as a mask so its exact shape takes the button's text colour. */
.vehicle-option__slot { height: 20px; display: flex; align-items: center; justify-content: center; }
.vehicle-option__icon { display: block; background: currentColor; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

.insight-card { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.insight-card__main { display: flex; align-items: center; gap: 12px; }
.insight-card__title { font-size: 15px; font-weight: 600; line-height: 20px; }
.insight-card__sub { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.ratio-ring { width: 48px; height: 48px; flex-shrink: 0; }
.ratio-ring__value { transition: stroke-dasharray 0.4s ease; }

.breakdown { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }

/* ---------- LOAN-07 compare extras ---------- */
.option-tabs { display: flex; padding: 4px; border-radius: var(--radius-md); background: var(--color-pill-bg); }
.option-tabs button {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}
.option-tabs button .dot { background: #c5c5d7; }
.option-tabs button[aria-selected="true"] { background: var(--color-bg); color: var(--color-primary); filter: drop-shadow(var(--shadow-card)); }
.option-tabs button[aria-selected="true"] .dot { background: var(--color-primary); }

.option-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.option-card[hidden] { display: none; }
.option-card__head { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.option-card__chip { padding: 2px 8px; border-radius: 4px; background: var(--color-chip-strong); color: var(--color-primary-3); font-size: 14px; font-weight: 600; line-height: 18px; }
.option-card__name { font-size: 15px; font-weight: 600; line-height: 20px; }

.cta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 4px; }
.cta-grid .btn { border-radius: var(--radius-md); padding: 0 8px; }
.cta-grid .btn--primary-alt { grid-column: 2 / span 2; }

.advantage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-chip-strong);
  filter: drop-shadow(var(--shadow-card));
}
.advantage__main { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; line-height: 18px; max-width: 200px; }
.advantage__icon { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-surface); }
.advantage__tag { flex-shrink: 0; padding: 4px 6px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary-3); font-size: 10px; font-weight: 600; line-height: normal; }
.advantage__tag[hidden] { display: none; }

.matrix { padding: 0 12px 12px; overflow: hidden; }
.matrix__head,
.matrix__row { display: grid; grid-template-columns: 5fr 3fr 4fr; align-items: start; }
.matrix__head {
  margin: 0 -12px;
  padding: 12px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-pill-bg);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.matrix__head span:not(:first-child),
.matrix__cell { text-align: right; }
.matrix__row { padding: 8px 0; min-height: 60px; }
.matrix__divider { height: 1px; background: var(--color-icon-tile); }
.matrix__metric { padding-right: 4px; font-size: 14px; font-weight: 500; line-height: 20px; }
.matrix__metric small { display: block; font-size: 11px; font-weight: 400; line-height: 13.75px; color: var(--color-text-muted); }
.matrix__cell { display: flex; flex-direction: column; align-items: flex-end; gap: 5.5px; }
.matrix__value { font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.matrix__value.is-best { font-weight: 700; color: var(--color-primary); }
.matrix__delta { font-size: 11px; line-height: 16.5px; color: var(--color-text-muted); white-space: nowrap; }
.matrix__delta--good { font-weight: 500; color: var(--color-delta); }
.matrix__delta--best { font-weight: 600; color: var(--color-primary); }

.timeline { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-soft); filter: drop-shadow(var(--shadow-card)); }
.timeline__title { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-text-muted); }
.timeline__bars { display: flex; flex-direction: column; gap: 20px; }
.timeline__bar { display: flex; flex-direction: column; gap: 4px; }
.timeline__meta { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: 14px; line-height: 20px; }
.timeline__meta span:first-child { font-size: 12px; }
.bar-track { display: flex; height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-pill-bg); }
.bar-track span { height: 100%; transition: width 0.4s ease; }

.takeaway { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-pill-bg); font-size: 14px; line-height: 20px; color: var(--color-text); }
.takeaway strong { font-size: 15px; font-weight: 600; }

/* =====================================================================
   Insurance section (Figma INS-01 … INS-05)
   ===================================================================== */

/* ---------- INS-01 listing ---------- */
.tab-bar { display: flex; align-items: center; gap: 4px; margin: 12px 0 16px; padding: 4px 0; overflow-x: auto; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-icon-tile);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}
.tab-pill img { display: none; }
.tab-pill[aria-pressed="true"] { background: var(--color-primary); color: #fff; filter: drop-shadow(var(--shadow-card)); }
.tab-pill[aria-pressed="true"] img { display: block; }

.page-title { padding-bottom: 16px; }
.page-title h1 { font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.55px; }
.page-title p { padding-top: 4px; font-size: 12px; line-height: 20px; color: var(--color-text-muted); }

.guidance {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.guidance__text { padding-right: 12px; }
.guidance__kicker { display: flex; align-items: center; gap: 4px; padding-bottom: 2px; color: var(--color-primary); font-size: 14px; font-weight: 600; line-height: 18px; }
.guidance__title { font-size: 15px; font-weight: 600; line-height: 20px; }
.guidance__body { max-width: 255px; padding-top: 2px; font-size: 12px; line-height: 20px; color: var(--color-text-muted); }
.guidance__icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--color-chip-strong); }

.ins-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease;
}
.ins-card:active { transform: scale(0.99); }
.ins-card__main { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 8px; }
.ins-card__icon { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--color-pill-bg); }
.ins-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-card__title { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.ins-card__title .dot { width: 6px; height: 6px; }
.ins-card__desc { font-size: 12px; line-height: 20px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-card__desc--14 { font-size: 14px; }

.stat-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding: 8px 0; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }

/* ---------- Insurance form variants ---------- */
.field--gap4 { gap: 4px; }
.field__label--strong { font-weight: 600; }
.field__label--dark { font-weight: 600; color: var(--color-text); }

.input-inline--ins .input-inline__prefix { padding-right: 4px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.input-inline--ins .input-inline__suffix { padding-left: 4px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.input-inline--gap8 { gap: 8px; }
.input-inline--gap8 .input-inline__prefix { padding-right: 0; }
.input-inline--white { background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }
.input-inline--affix-strong .input-inline__prefix { font-size: 16px; font-weight: 600; line-height: 22px; }
.input-inline--affix-strong .input-inline__suffix--strong { font-weight: 600; line-height: 18px; }
.input-inline select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.input-inline select:disabled { cursor: default; color: var(--color-text-muted); }
.input-inline--select { padding: 0 28px 0 16px; }
.input-inline--select-prefixed select { padding: 0 16px 0 4px; }

.segmented--40 { height: 40px; }
.segmented--flush { gap: 0; }
.segmented--tile { padding: 2px; background: var(--color-icon-tile); }
.segmented--40 button { height: 32px; align-self: center; }
.segmented--tile button { height: 36px; }

.mini-toggle { display: flex; padding: 2px; border-radius: var(--radius-sm); background: var(--color-soft); }
.mini-toggle button { padding: 4px 12px; border-radius: 4px; color: var(--color-text-muted); font-size: 14px; font-weight: 600; line-height: 18px; }
.mini-toggle button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary); filter: drop-shadow(var(--shadow-card)); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 8px; border-radius: var(--radius-sm); background: var(--color-soft); }
.toggle-row__main { display: flex; align-items: center; gap: 8px; }
.toggle-row__icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }
.toggle-row__title { font-size: 14px; font-weight: 600; line-height: 18px; }
.toggle-row__sub { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.switch {
  position: relative;
  width: 48px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: #c5c5d7;
  transition: background 0.2s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}
.switch[aria-checked="true"] { background: var(--color-primary-active); }
.switch[aria-checked="true"]::after { transform: translateX(24px); }

.form-card--p12 { padding: 12px; }
.field__head--pb4 { padding-bottom: 4px; }
.actions--flush { padding-top: 0; }
.title-card--p16 { padding: 16px; }
.title-card--p12 { padding: 12px; }
.term-callout { padding-bottom: 8px; }
.rows--pt8 { padding-top: 8px; }
.result-value--pt2 { padding-top: 2px; }

.btn--h48 { height: 48px; }
.btn--gap4 { gap: 4px; }
.btn--white { flex: 1 1 0; background: var(--color-surface); color: var(--color-text-muted); filter: drop-shadow(var(--shadow-card)); }

.title-card__icon--r8 { border-radius: var(--radius-sm); }
.title-card__icon--40 { width: 40px; height: 40px; }
.title-card__icon--chip { background: var(--color-pill-bg); }

/* ---------- Insurance results ---------- */
.result-panel--p12 { padding: 12px; }
.result-panel--pill { background: var(--color-pill-bg); }
.callout { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-surface); }
.callout__label { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.callout__sub { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.result-value__unit--medium { font-weight: 500; line-height: 18px; }
.result-value__unit--strong { font-size: 15px; font-weight: 600; }
.result-value__extra { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--color-text-muted); }

.divided-rows { display: flex; flex-direction: column; }
.divided-rows .row + .row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-icon-tile); }

.cover-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 9px; border-bottom: 1px solid rgba(197, 197, 215, 0.3); }
.cover-head__label { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-primary-2); }
.cover-head__value { display: flex; gap: 4px; font-size: 24px; font-weight: 700; line-height: 30px; color: var(--color-primary); }
.cover-head__value span:first-child { letter-spacing: -0.48px; }
.cover-head__value span:last-child { letter-spacing: -0.6px; }
.row__value--neg { color: var(--color-error); }
.row__value--primary { color: var(--color-primary); }
.row__value--icon { display: flex; align-items: center; gap: 4px; }
.row--nowrap { gap: 4px; }
.row--nowrap .row__label { white-space: nowrap; }
/* Browser Inter metrics run ~1.5px wider than Figma's here; tighten slightly and wrap on narrow phones. */
.row--nowrap .row__value { min-width: 0; white-space: normal; text-align: right; letter-spacing: -0.2px; }

.disclaimer { padding-top: 4px; font-size: 12px; line-height: 16px; color: var(--color-text-muted); opacity: 0.8; }
.disclaimer--14 { font-size: 14px; line-height: 22.75px; color: var(--color-text-faint); opacity: 1; }
.note--muted { color: var(--color-text-muted); opacity: 0.8; }
.note--15 { line-height: 15px; color: var(--color-text-muted); padding-top: 0; gap: 4px; }

.summary-box { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 12px; border-radius: var(--radius-sm); background: var(--color-surface); }
.result-label--blue { font-size: 14px; line-height: 18px; letter-spacing: 0.7px; color: var(--color-primary-2); }
.billed { display: flex; align-items: center; gap: 4px; padding-top: 2px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.billed strong { font-size: 15px; font-weight: 600; color: var(--color-text); }

/* =====================================================================
   Tax section (Figma TAX-01 … TAX-05)
   ===================================================================== */
:root {
  --color-success: #006e2c;
  --color-ledger-border: rgba(220, 225, 251, 0.8);
}

/* ---------- TAX-01 listing ---------- */
.tx-intro { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; }
.tx-intro h1 { font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.55px; }
.tx-intro p { font-size: 12px; line-height: 22.75px; color: var(--color-text-muted); }
.tx-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  filter: drop-shadow(var(--shadow-card));
  transition: transform 0.15s ease;
}
.tx-card:active { transform: scale(0.99); }
.tx-card__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tx-card__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-soft); }
.tx-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-card__title { font-size: 15px; font-weight: 600; line-height: 20px; }
.tx-card__desc { font-size: 12px; line-height: normal; color: var(--color-text-muted); }
.tx-trust { display: flex; justify-content: center; margin-top: 24px; }
.tx-trust span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--color-soft); font-size: 12px; line-height: 20px; color: var(--color-text-muted); text-align: center; }

/* ---------- Shared tax form ---------- */
.subnav--pt4 { padding-bottom: 12px; }
.title-card--p14 { padding: 14px; }
.title-card__title--16 { font-size: 16px; line-height: 22px; letter-spacing: -0.4px; }
.title-card__title--16-plain { font-size: 16px; line-height: 22px; letter-spacing: 0; }
.title-card__icon--44 { width: 44px; height: 44px; }
.title-card__desc--clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-card--gap14 { gap: 14px; }
.field--gap8 { gap: 8px; }
.field--pt4 { padding-top: 4px; }
.field--pt2 { padding-top: 2px; }
.input-box__prefix--sm { font-size: 14px; font-weight: 500; line-height: 18px; }
.input-box--suffix-64 input { padding-right: 64px; }
.input-box__suffix--sm-medium { font-size: 14px; font-weight: 500; line-height: 18px; }

.field__label--13 { font-size: 13px; font-weight: 400; line-height: 20px; }
.field__hint--11 { font-size: 11px; line-height: 20px; color: var(--color-text-faint); }
.field__label--dark-strong { font-weight: 600; color: var(--color-text); }
.field__sub { margin-top: -2px; font-size: 12px; line-height: 20px; color: var(--color-text-muted); }

.input-inline__icon { flex-shrink: 0; margin-left: 8px; }
.input-inline--inr .input-inline__prefix { padding-right: 6px; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--color-text); }
.input-inline--lg { padding: 0 14px; }
.input-inline--lg input,
.input-inline--lg .input-inline__prefix,
.input-inline--lg .input-inline__suffix { font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.18px; }
.input-inline--lg .input-inline__prefix { padding-right: 4px; color: var(--color-text-muted); }
.input-inline--lg .input-inline__suffix { padding-left: 8px; color: var(--color-text-muted); }

.select-box--tax select { padding-left: 12px; font-size: 15px; line-height: 20px; }
.select-box--tax .select-box__chevron { top: 21px; }

.segmented--blue button { font-weight: 400; font-size: 13px; line-height: 20px; }
.segmented--blue button[aria-pressed="true"] { background: var(--color-primary-active); color: #fff; font-weight: 400; }
.segmented--blue.segmented--12 button { font-size: 12px; line-height: 16px; }
.segmented--blue.segmented--12 button[aria-pressed="true"] { font-weight: 600; }
.segmented--44 { height: 44px; }

.rate-pills { display: flex; gap: 6px; }
.rate-pills button {
  flex: 1 1 0;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-soft);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}
.rate-pills--muted button { color: var(--color-text-muted); }
.rate-pills button[aria-pressed="true"] { background: var(--color-primary-active); color: #fff; font-weight: 600; filter: drop-shadow(var(--shadow-card)); }
.rate-pills--muted button[aria-pressed="true"] { font-weight: 500; }

.custom-rate { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-top: 2px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--color-soft); }
.custom-rate:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.custom-rate.is-invalid { box-shadow: 0 0 0 1.5px var(--color-error); }
.custom-rate label { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.custom-rate__value { display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 80px; }
.custom-rate__value input { width: 48px; border: 0; background: transparent; text-align: right; color: var(--color-text); font: inherit; font-size: 16px; font-weight: 600; line-height: 22px; outline: none; }
.custom-rate__value span { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }

.btn--15 { font-size: 15px; line-height: 20px; }
.btn--white-dark { color: var(--color-text); }

.coverage-options { display: flex; flex-direction: column; gap: 8px; padding: 6px; border-radius: var(--radius-sm); background: var(--color-soft); }
.coverage-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: left;
}
.coverage-options button img { visibility: hidden; }
.coverage-options button[aria-checked="true"] { background: var(--color-primary-active); color: #fff; filter: drop-shadow(var(--shadow-card)); }
.coverage-options button[aria-checked="true"] img { visibility: visible; }

/* ---------- Tax results ---------- */
.tx-result { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--color-soft); filter: drop-shadow(var(--shadow-card)); }
.tx-result--gap14 { gap: 14px; }
.tx-result--pill { background: var(--color-pill-bg); }
.tx-result--tile { background: var(--color-icon-tile); }
.tx-result__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tx-kicker { font-size: 11px; font-weight: 700; line-height: 20px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--color-primary); }
.tx-kicker--semi { font-weight: 600; }
.tx-kicker--alt { font-weight: 600; color: var(--color-primary-active); }
.tx-chip { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.tx-chip--tile { background: var(--color-icon-tile); font-size: 11px; }
.tx-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tx-headline--between { justify-content: space-between; padding-top: 4px; }
.tx-headline__amount { font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; color: var(--color-primary); }
.tx-headline__amount--alt { letter-spacing: -0.48px; color: var(--color-primary-active); }
.tx-headline__text { font-size: 13px; line-height: 20px; color: var(--color-text-muted); }
.tx-headline__text--12 { font-size: 12px; }
.tx-headline__text--14 { font-size: 14px; font-weight: 500; line-height: 18px; }

.tx-rows { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.tx-rows--pt12 { padding-top: 12px; }
.tx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 20px; color: var(--color-text-muted); }
.tx-row > :last-child { font-weight: 500; color: var(--color-text); white-space: nowrap; }
.tx-row--neg > :last-child { color: var(--color-error); }
.tx-row[hidden] { display: none; }
.tx-row--strong { padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--color-text); }
.tx-row--strong > :last-child { font-weight: 700; }
.tx-row--total { padding-top: 10px; font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.18px; color: var(--color-primary); }
.tx-row--total > :last-child { font-weight: 700; color: var(--color-primary); }
.tx-row--big > :last-child { font-size: 15px; font-weight: 600; }
.tx-row--mid > :last-child { font-size: 14px; line-height: 18px; }
.tx-row--blue { padding-top: 4px; font-weight: 600; color: var(--color-primary); }
.tx-row--blue > :last-child { font-size: 15px; font-weight: 700; color: var(--color-primary); }
.tx-gross { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 10px; border-radius: var(--radius-sm); background: var(--color-icon-tile); color: var(--color-primary); font-size: 15px; font-weight: 600; line-height: 20px; }
.tx-gross strong { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.18px; }

.tx-note { display: flex; align-items: flex-start; gap: 6px; padding-top: 16px; font-size: 11px; line-height: 17.88px; color: var(--color-text-muted); }
.tx-note img { margin-top: 2px; }
.tx-note--box { gap: 8px; padding: 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.8); line-height: 16px; }
.tx-note--box60 { background: rgba(255, 255, 255, 0.6); line-height: 17.88px; }
.tx-note--12 { padding-top: 4px; font-size: 12px; line-height: 19.5px; }

/* VAT */
.tx-pulse { position: relative; width: 8px; height: 8px; }
.tx-pulse::before, .tx-pulse::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-primary); }
.tx-pulse::before { animation: tx-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.75; }
@keyframes tx-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tx-pulse::before { animation: none; } }
.tx-metric { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.8); }
.tx-metric p { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.tx-ledger { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.tx-ledger .row { padding: 4px 0; font-size: 14px; line-height: 20px; }
.tx-ledger .row > :first-child { color: var(--color-text-muted); }
.tx-ledger .row > :last-child { color: var(--color-text); white-space: nowrap; }
.tx-ledger .row--vat > :first-child { font-weight: 500; }
.tx-ledger .row--vat > :last-child { font-weight: 600; color: var(--color-primary); }
.tx-ledger .row--grand { padding: 9px 0 8px; border-top: 1px solid var(--color-ledger-border); }
.tx-ledger .row--grand > :first-child { color: var(--color-text); }
.tx-ledger .row--grand > :last-child { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.18px; color: var(--color-primary); }

/* Gratuity */
.tx-breakdown { display: flex; flex-direction: column; gap: 9.5px; padding: 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.6); }
.tx-breakdown .row { font-size: 14px; line-height: 20px; }
.tx-breakdown .row > :first-child { color: var(--color-text-muted); }
.tx-breakdown .row > :last-child { color: var(--color-text); text-align: right; }
.tx-breakdown .row--formula > :last-child { font-size: 12px; white-space: nowrap; }
.tx-breakdown .row--bold > :last-child { font-weight: 700; color: var(--color-primary-active); white-space: nowrap; }
.tx-exempt { display: flex; align-items: center; gap: 4px; }
.tx-breakdown .row > .tx-exempt { color: var(--color-success); font-weight: 600; }
.tx-exempt span { max-width: 112px; }
.tx-exempt--taxable { color: var(--color-error) !important; }

/* =====================================================================
   Investment section (Figma INV-01 … INV-08)
   ===================================================================== */
:root {
  --color-inv-pill: #dae2ff;
  --color-inv-track: #dce1fb;
  --color-inv-navy: #001159;
  --color-inv-blue: #1e5dab;
}

.main--inv { padding-top: 12px; padding-bottom: 32px; }

.inv-subnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 0; }
.inv-subnav__tags { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-inv-pill);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(var(--shadow-card));
}
.inv-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); white-space: nowrap; }
.inv-meta--gap8 { gap: 8px; }
.inv-meta--small { font-size: 12px; font-weight: 400; line-height: 20px; color: var(--color-text-faint); }
.inv-meta__dot { width: 7px; height: 8px; border-radius: var(--radius-full); background: #10b981; }

/* ---------- INV-01 listing ---------- */
.inv-intro { padding-bottom: 16px; }
.inv-intro h1 { padding-bottom: 4px; font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; }
.inv-intro p { font-size: 14px; line-height: 22.75px; color: var(--color-text-muted); }
.inv-spotlight {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 16px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-pill-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.inv-spotlight::after { content: ""; position: absolute; right: -24px; bottom: -24px; width: 112px; height: 112px; border-radius: var(--radius-full); background: rgba(9, 51, 189, 0.05); }
.inv-spotlight__text { position: relative; z-index: 1; max-width: 210px; }
.inv-spotlight__kicker { padding-bottom: 2px; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-primary); }
.inv-spotlight__title { font-size: 15px; font-weight: 600; line-height: 20px; }
.inv-spotlight__meta { display: flex; align-items: center; gap: 6px; padding-top: 8px; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-text-muted); }
.inv-spotlight img:last-child { position: relative; z-index: 1; flex-shrink: 0; }

.inv-filters { display: flex; gap: 12px; height: 34px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.inv-filters::-webkit-scrollbar { display: none; }
.inv-filters button {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  filter: drop-shadow(var(--shadow-card));
}
.inv-filters button[aria-pressed="true"] { background: var(--color-primary-active); color: #fff; }

.inv-list { display: flex; flex-direction: column; gap: 10px; }
.inv-list > li[hidden] { display: none; }
.inv-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; border-radius: var(--radius-md); background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); transition: transform 0.15s ease; }
.inv-card:active { transform: scale(0.99); }
.inv-card__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.inv-card__icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-soft); }
.inv-card__title { font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -0.375px; }
.inv-card__desc { font-size: 12px; line-height: 20px; color: var(--color-text-muted); }

.inv-trust { display: flex; justify-content: center; padding-top: 24px; }
.inv-trust span { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px; border-radius: var(--radius-full); background: var(--color-soft); font-size: 12px; font-weight: 600; line-height: 16px; color: var(--color-text-muted); }

/* ---------- Shared investment form ---------- */
.title-card__title--inv { letter-spacing: -0.45px; }
.title-card--r16 { border-radius: 16px; }
.form-card--r16 { border-radius: 16px; }
.input-inline--inset { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); }
.input-inline--inset:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.input-inline__suffix--strong15 { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--color-text-muted); }
.input-inline__suffix--16 { font-size: 16px; font-weight: 600; line-height: 22px; color: var(--color-text-muted); }
.input-inline__suffix--medium { font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.input-inline--faint .input-inline__prefix, .input-inline--faint .input-inline__suffix { color: var(--color-text-faint); }
.input-inline--r12 { border-radius: var(--radius-md); }
.input-inline--lead-icon { gap: 14px; padding-left: 14px; }
.input-inline--lead-icon input { font-size: 18px; letter-spacing: -0.18px; }
.field__hint--note { font-size: 14px; line-height: 20px; color: rgba(68, 70, 84, 0.8); white-space: normal; }

.unit-toggle { display: flex; flex-shrink: 0; height: 48px; padding: 4px; border-radius: var(--radius-sm); background: var(--color-soft); }
.unit-toggle--tile { background: var(--color-icon-tile); }
.unit-toggle button { padding: 0 12px; border-radius: 4px; color: var(--color-text-muted); font-size: 14px; font-weight: 600; line-height: 18px; }
.unit-toggle--wide button { padding: 0 16px; border-radius: 6px; }
.unit-toggle--15 button { font-size: 15px; line-height: 20px; }
.unit-toggle--medium button { font-weight: 500; }
.unit-toggle button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary); filter: drop-shadow(var(--shadow-card)); }

.chip-pills { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 4px; }
.chip-pills button { padding: 4px 8px; border-radius: 4px; background: var(--color-soft); color: var(--color-text-muted); font-size: 14px; font-weight: 600; line-height: 18px; }
.chip-pills button[aria-pressed="true"] { background: var(--color-primary-active); color: #fff; }
.chip-pills--add { gap: 6px; padding-top: 2px; }
.chip-pills--add button { padding: 4px 10px; background: var(--color-icon-tile); font-size: 12px; font-weight: 400; line-height: 20px; }

.freq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--color-soft); }
.freq-grid button { padding: 8px 0; border-radius: 6px; color: var(--color-text-muted); font-size: 15px; font-weight: 600; line-height: 20px; }
.freq-grid button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

.tenure-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--color-soft); }
.tenure-tabs button { flex: 1 1 auto; height: 40px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--color-text); font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.tenure-tabs button[aria-pressed="true"] { background: var(--color-primary); color: #fff; filter: drop-shadow(var(--shadow-card)); }

.pension-tabs { display: flex; gap: 6px; padding: 4px; border-radius: var(--radius-md); background: var(--color-soft); }
.pension-tabs button { flex: 1 1 0; padding: 10px 0; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 14px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.pension-tabs button[aria-pressed="true"] { background: var(--color-primary); color: #fff; font-weight: 700; filter: drop-shadow(var(--shadow-card)); }

.age-range { display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: 11px; line-height: 20px; color: var(--color-text-faint); white-space: nowrap; }
.age-range input[type="range"] { flex: 1; min-width: 0; height: 6px; margin: 0; border-radius: var(--radius-sm); background: var(--color-pill-bg); accent-color: var(--color-primary); -webkit-appearance: none; appearance: none; }
.age-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; }
.age-range input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: var(--radius-full); background: var(--color-primary); cursor: pointer; }

.inv-actions { display: flex; gap: 12px; padding-top: 4px; }
.inv-actions--8 { gap: 8px; }
.inv-actions--grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.inv-actions .btn { flex: 1 1 0; height: 48px; border-radius: var(--radius-md); font-size: 15px; line-height: 20px; }
.inv-actions .btn--14 { font-size: 14px; line-height: 18px; }
.btn--tile { background: var(--color-icon-tile); color: var(--color-text); }
.btn--pill-bg { background: var(--color-pill-bg); color: var(--color-text); }

/* ---------- Investment results ---------- */
.inv-result { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: var(--color-soft); filter: drop-shadow(var(--shadow-card)); }
.inv-result--pill { background: var(--color-pill-bg); }
.inv-result--p12 { padding: 12px; }
.inv-result--p20 { padding: 20px; gap: 16px; border-radius: 16px; }
.inv-result__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-kicker { font-size: 14px; font-weight: 600; line-height: 18px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--color-primary); }
.inv-kicker--bold { font-weight: 700; }
.inv-kicker--11 { font-size: 11px; line-height: 16.5px; letter-spacing: 0.55px; }
.inv-kicker--dot { display: flex; align-items: center; gap: 4px; }
.inv-kicker--dot::before { content: ""; width: 7.5px; height: 8px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary); }
.inv-amount { font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; color: var(--color-primary); }
.inv-amount--dark { color: var(--color-text); }
.inv-amount--navy { color: var(--color-inv-navy); }
.inv-amount--30 { font-size: 30px; line-height: 34px; letter-spacing: -0.75px; }
.inv-headline { display: flex; flex-direction: column; gap: 4px; }
.inv-headline__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.inv-headline__row--center { align-items: center; }
.inv-headline__unit { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--color-text-muted); }
.inv-sub { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.inv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary); font-size: 11px; line-height: 20px; white-space: nowrap; }
.inv-chip--track { background: var(--color-inv-track); color: var(--color-text-muted); }
.inv-chip--pill { background: var(--color-inv-pill); color: #001848; }
.inv-chip--blue { color: var(--color-inv-blue); }
.inv-chip--blue .dot { width: 6px; height: 6px; }
.inv-chip--gain { background: #d6e3ff; color: var(--color-delta); font-size: 12px; font-weight: 600; }
.inv-chip--square { border-radius: 4px; background: var(--color-icon-tile); font-size: 14px; font-weight: 600; line-height: 18px; }
.inv-chip--eee { padding: 0 6px; border-radius: 4px; background: var(--color-inv-track); font-size: 14px; font-weight: 600; line-height: 18px; }
.inv-sovereign { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--color-primary-2); white-space: nowrap; }

.inv-bar { display: flex; height: 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-inv-track); }
.inv-bar--tile { background: var(--color-icon-tile); }
.inv-bar span { height: 100%; transition: width 0.4s ease; }
.inv-legend { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; font-size: 11px; line-height: 20px; color: var(--color-text-muted); }
.inv-legend--12 { font-size: 12px; }
.inv-legend--top { padding: 0 0 6px; }
.inv-legend span { display: inline-flex; align-items: center; gap: 4px; }
.inv-legend i { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--radius-full); }
.inv-legend--lg i { width: 10px; height: 10px; }
.inv-legend--sq i { width: 10px; height: 10px; border-radius: 4px; }
.inv-legend--gap6 span { gap: 6px; }

.inv-summary { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }
.inv-summary--r8 { border-radius: var(--radius-sm); }
.inv-summary--gap10 { gap: 10px; }
.inv-summary--p14 { padding: 14px; gap: 10px; }
.inv-summary .row { font-size: 14px; line-height: 20px; }
.inv-summary .row > :first-child { color: var(--color-text-muted); }
.inv-summary .row > :last-child { font-size: 15px; font-weight: 600; color: var(--color-text); text-align: right; white-space: nowrap; }
.inv-summary .row--total > :first-child { font-size: 15px; font-weight: 600; color: var(--color-text); }
.inv-summary .row--total > :last-child { font-weight: 700; }
.inv-summary .row--total-blue > :last-child { font-size: 16px; line-height: 22px; color: var(--color-primary); }
.inv-summary .row--total-18 > :last-child { font-size: 18px; line-height: 24px; letter-spacing: -0.18px; color: var(--color-primary); }
.inv-summary .row--blue > :last-child { color: var(--color-primary); }
.inv-summary .row--blue2 > :last-child { color: var(--color-primary-2); }
.inv-summary .row--navy > :last-child { font-weight: 700; color: var(--color-inv-blue); }
.inv-summary .row--delta > :last-child { font-weight: 700; color: var(--color-delta); }
.inv-summary .row--medium > :last-child { font-size: 14px; font-weight: 500; line-height: 18px; }
.inv-summary .row--small > :last-child { font-size: 14px; }
.inv-summary .row--bold > :last-child { font-weight: 700; }
.inv-summary .row--tracking > :last-child { letter-spacing: -0.375px; }
.inv-summary .row--py4 { padding: 4px 0; }
.inv-summary .row-divider { background: var(--divider, var(--color-icon-tile)); }
.inv-summary--div-soft { --divider: var(--color-soft); }
.inv-summary--div-pill { --divider: var(--color-pill-bg); }
.inv-summary--div-track { --divider: var(--color-inv-track); }
.inv-summary .row__label { color: var(--color-text-muted); }
.row__stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5px; }
.row__stack small { font-size: 11px; font-weight: 400; line-height: 20px; color: var(--color-text-muted); }
.inv-summary .row .row__stack { font-size: 15px; }
.dot--10 { width: 10px; height: 10px; }
.dot--delta { background: var(--color-delta); }

.inv-tenure { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface); }
.inv-tenure__head { display: flex; justify-content: space-between; font-size: 12px; line-height: 20px; color: var(--color-text-muted); }
.inv-tenure__head strong { font-weight: 600; color: var(--color-primary); }
.inv-tenure__track { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-pill-bg); }
.inv-tenure__track span { display: block; height: 100%; background: var(--color-primary); transition: width 0.4s ease; }
.inv-tenure__foot { display: flex; justify-content: space-between; font-size: 11px; line-height: 20px; color: var(--color-text-faint); }

.inv-note { display: flex; align-items: flex-start; gap: 8px; padding-top: 4px; font-size: 14px; line-height: 22.75px; color: var(--color-text-muted); }
.inv-note img { margin-top: 3px; }
.inv-note--11 { font-size: 11px; line-height: 16px; color: var(--color-text-faint); }
.inv-note--12 { font-size: 12px; line-height: 19.5px; }
.inv-note--gap4 { gap: 4px; line-height: 19.25px; }
.inv-note--box { padding: 18px 8px 8px; border-radius: var(--radius-sm); background: var(--color-icon-tile); }
.inv-note--glass { padding: 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.6); }
.mt-10 { margin-top: 10px; }
.field__hint--15 { font-size: 15px; line-height: 20px; }
.field__head--top { align-items: flex-start; }
.field__head--top .field__hint { line-height: 20px; white-space: normal; text-align: left; }
.input-box__prefix--12 { left: 12px; }
.input-box--pl12 input { padding-left: 12px; }
.inv-result--gap2 { gap: 2px; }
.field__hint--blue2 { color: var(--color-primary-2); }
.field__hint--dark { color: var(--color-text); }
.unit-toggle--14 button { padding: 0 14px; }
.input-inline__prefix--15 { font-size: 15px !important; line-height: 20px !important; }
.field__hint--delta { display: inline-flex; align-items: center; gap: 4px; color: var(--color-delta); }
.calc-stack--16 { gap: 16px; padding-top: 0; }
.title-card--gap14 { gap: 14px; }
.form-card--gap20 { gap: 20px; }
.inv-actions--pt8 { padding-top: 8px; }
.inv-chip--age { background: var(--color-icon-tile); color: var(--color-text-muted); }

/* =====================================================================
   Finance section (Figma FIN-01 … FIN-10)
   ===================================================================== */
.main--fin { padding-bottom: 32px; }
.fin-stack { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }

/* ---------- FIN-01 listing ---------- */
.fin-intro { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.fin-intro h1 { font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.55px; }
.fin-intro p { font-size: 12px; line-height: 20px; color: var(--color-text-muted); }
.fin-switch { display: flex; gap: 6px; padding: 4px; border-radius: var(--radius-sm); background: var(--color-icon-tile); }
.fin-switch button { flex: 1 1 0; padding: 4px 10px; border-radius: 6px; color: var(--color-text-muted); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.fin-switch button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary); filter: drop-shadow(var(--shadow-card)); }
.fin-list { display: flex; flex-direction: column; gap: 8px; }
.fin-list > li[hidden] { display: none; }
.fin-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); transition: transform 0.15s ease; }
.fin-card:active { transform: scale(0.99); }
.fin-card__main { display: flex; align-items: center; gap: 14px; min-width: 0; padding-right: 8px; }
.fin-card__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-icon-tile); }
.fin-card__title { display: block; font-size: 15px; font-weight: 600; line-height: 20px; }
.fin-card__desc { display: block; font-size: 12px; line-height: 20px; color: var(--color-text-muted); }
.fin-trust { display: flex; justify-content: center; padding-top: 4px; }
.fin-trust span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border-radius: var(--radius-full); background: var(--color-soft); font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-text-muted); text-align: center; }

/* ---------- Shared finance form ---------- */
.title-card__desc--14 { font-size: 14px; }
.input-inline__icon--right { margin-left: 8px; flex-shrink: 0; }
.input-inline--px14 { padding: 0 14px; }
.input-inline--prefix-strong .input-inline__prefix { padding-right: 8px; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--color-text-muted); }
.input-inline--prefix-medium .input-inline__prefix { padding-right: 8px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.input-inline--prefix-regular .input-inline__prefix { padding-right: 4px; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--color-text-muted); }
.input-inline__suffix--semibold14 { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--color-text-muted); padding-left: 8px; }
.input-inline__suffix--faint { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-faint); padding-left: 8px; }
.input-inline--white-sh { background: var(--color-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.input-inline--white-sh:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }

.freq-grid--solid { gap: 8px; padding: 0; background: none; }
.freq-grid--solid button { height: 40px; padding: 0; border-radius: var(--radius-sm); background: var(--color-soft); font-size: 14px; font-weight: 500; line-height: 18px; }
.freq-grid--solid button[aria-pressed="true"] { background: var(--color-primary-active); color: #fff; font-weight: 600; box-shadow: none; }
.unit-toggle--r8 button { border-radius: var(--radius-sm); padding: 0 16px; }

.mini-toggle--pill { background: var(--color-pill-bg); }
.mini-toggle--pill button { padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 400; line-height: 19.5px; }
.mini-toggle--pill button[aria-pressed="true"] { font-weight: 600; filter: none; }

.fin-actions { display: flex; gap: 12px; }
.fin-actions--8 { gap: 8px; }
.fin-actions .btn { flex: 1 1 0; height: 48px; font-size: 14px; line-height: 18px; }
.fin-actions--h44 .btn { height: 44px; }
.fin-actions .btn--15 { font-size: 15px; line-height: 20px; }

/* Select with optional leading flag and trailing chevron. */
.select-field { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--color-soft); }
.select-field:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.select-field--white { background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }
.select-field__flag { font-size: 18px; line-height: 18px; }
.select-field select { flex: 1; min-width: 0; height: 100%; padding-right: 24px; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 15px; font-weight: 600; line-height: 19px; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.select-field--regular select { font-size: 16px; font-weight: 400; line-height: 24px; }
.select-field--medium14 select { font-size: 14px; font-weight: 500; line-height: 18px; }
.select-field--regular14 select { font-size: 14px; font-weight: 400; line-height: 20px; }
.select-field__chevron { position: absolute; right: 12px; pointer-events: none; }
.select-field__chevron--top { top: 14px; }

.swap-col { display: flex; flex-direction: column; }
.swap-col__btn { display: flex; justify-content: center; height: 16px; position: relative; z-index: 1; }
.swap-col__btn button { margin-top: -10px; }
.swap-col--24 .swap-col__btn { height: 24px; }
.swap-col--24 .swap-col__btn button { margin-top: -6px; }
.swap-col--28 .swap-col__btn { height: 28px; }
.swap-col--28 .swap-col__btn button { margin-top: -6px; }
.swap-col--40 .swap-col__btn { height: 40px; margin: 8px 0; }
.swap-col--40 .swap-col__btn button { margin-top: 0; }
.swap-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-pill-bg); filter: drop-shadow(var(--shadow-card)); transition: transform 0.2s ease; }
.swap-btn:active { transform: rotate(180deg); }
.swap-btn--40 { width: 40px; height: 40px; }
.swap-btn--tile { background: var(--color-icon-tile); }
.swap-btn--track { background: var(--color-inv-track); }
.swap-row { display: flex; align-items: flex-end; gap: 8px; padding-top: 4px; }
.swap-row > .field { flex: 1 1 0; min-width: 0; }
.swap-row > .swap-btn { margin-bottom: 4px; flex-shrink: 0; }

/* ---------- Finance results ---------- */
.inv-result--tile { background: var(--color-icon-tile); }
.inv-result--gap14 { gap: 14px; }
.inv-kicker--muted { color: var(--color-text-muted); }
.inv-kicker--regular { font-weight: 400; }
.inv-kicker--navy { color: #00276b; }
.inv-kicker--12 { font-size: 12px; line-height: 18px; letter-spacing: 0.6px; }
.inv-amount--split { display: flex; align-items: baseline; gap: 4px; }
.inv-amount--split small { font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.18px; }
.inv-headline__row--between { justify-content: space-between; }
.inv-headline__side { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.inv-summary--glass { background: rgba(255, 255, 255, 0.6); filter: none; padding: 8px 12px 12px; }
.inv-summary--flat { filter: none; }
.inv-summary--p14 { padding: 14px; gap: 10px; }
.inv-summary .row--medium14 > :last-child { font-size: 14px; font-weight: 500; line-height: 18px; }
.inv-summary .row--pt8 { padding-top: 8px; }
.inv-summary .row--pt4 { padding-top: 4px; }
.inv-summary--div-half { --divider: rgba(220, 225, 251, 0.5); }
.inv-summary--p8 { padding: 8px; gap: 4px; }
.inv-summary--p8 .row { padding: 6px 4px; border-radius: 4px; }
.inv-summary--zebra .row:nth-child(even) { background: var(--color-soft); }
.inv-summary--px10 .row { padding: 6px 10px; border-radius: 6px; }
.inv-summary .row--label-dot { display: inline-flex; align-items: center; gap: 6px; }

.unit-rows { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.unit-rows .row { padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.unit-rows .row > :last-child { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--color-text); }
.fin-hero { display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.8); }
.fin-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 19.5px; color: var(--color-text-muted); }
.fin-note img { margin-top: 3px; }
.fin-note--14 { font-size: 14px; line-height: 20px; color: var(--color-text-faint); gap: 8px; padding-top: 4px; }
.fin-note--center { align-items: center; padding: 0 4px; font-size: 14px; font-weight: 500; line-height: 18px; gap: 8px; }
.fin-note--center img { margin-top: 0; }
.fin-note--px4 { padding: 0 4px; font-size: 14px; line-height: 19.25px; color: rgba(68, 70, 84, 0.9); }
.fin-note strong { font-weight: 400; color: var(--color-text); }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.6); }

/* ---------- FIN-10 world clock ---------- */
.clock-bar {
  position: relative;
  z-index: 50;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  filter: drop-shadow(var(--shadow-card));
}
.clock-bar__search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-soft); }
.clock-bar__search:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.clock-bar__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 14px; line-height: normal; outline: none; }
.clock-bar__search input::placeholder { color: var(--color-text-faint); }
.clock-bar .btn { height: 40px; padding: 0 14px; flex-shrink: 0; }
.clock-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: 0 12px 32px rgba(21, 27, 45, 0.16);
}
.clock-suggest[hidden] { display: none; }
.clock-suggest button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s ease;
}
.clock-suggest button:hover, .clock-suggest button[aria-selected="true"] { background: var(--color-soft); }
.clock-suggest small { color: var(--color-text-muted); }
.clock-error { font-size: 12px; line-height: 16px; color: var(--color-error); }
.clock-error:empty { display: none; }
.clock-list { display: flex; flex-direction: column; gap: 8px; }
.clock-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }
.clock-card__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.clock-card__icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-icon-tile); }
.clock-card__icon--night { background: var(--color-inv-track); }
.clock-card__text { min-width: 0; }
.clock-card__name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.clock-card__day { padding: 2px 6px; border-radius: 4px; background: var(--color-icon-tile); color: var(--color-text-muted); font-size: 11px; font-weight: 500; line-height: 16.5px; }
.clock-card__day--other { background: rgba(49, 79, 213, 0.1); color: var(--color-primary); font-weight: 600; }
.clock-card__sub { font-size: 14px; line-height: 20px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-card__side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.clock-card__time { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: -0.18px; white-space: nowrap; }
.clock-card__time small { margin-left: 3px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--color-text-muted); letter-spacing: 0; }
.clock-card__remove { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.clock-card__remove:hover { background: var(--color-soft); }
.clock-empty { padding: 24px 12px; border-radius: var(--radius-md); background: var(--color-surface); text-align: center; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.form-card--gap16 { gap: 16px; }
.field__hint--12-primary { font-size: 12px; line-height: 18px; color: var(--color-primary); }
.row__label--strong { font-weight: 600; line-height: 18px; color: var(--color-text); }

/* ---------- FIN-06 … FIN-09 unit converters (values from Figma 17:35889, 17:35361, 17:35482, 17:35235) ---------- */
.title-card--middle { align-items: center; }
.title-card__text--flush { gap: 0; }

.cv-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }
.cv-field { display: flex; flex-direction: column; gap: 6px; }
.cv-field--4 { gap: 4px; }
.cv-label { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.cv-label__unit { font-weight: 600; color: var(--color-primary); }
.cv-error { font-size: 12px; line-height: 16px; color: var(--color-error); }
.cv-error:empty { display: none; }

/* Value input */
.cv-input { position: relative; display: flex; align-items: center; height: 48px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--color-soft); }
.cv-input:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.cv-input.is-invalid { box-shadow: 0 0 0 2px var(--color-error); }
.cv-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 16px; font-weight: 600; line-height: 22px; outline: none; }
.cv-input__suffix { flex-shrink: 0; padding-left: 8px; font-size: 14px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.cv-input__suffix--upper { text-transform: uppercase; }
.cv-input__suffix--semibold { font-weight: 600; }
.cv-input--white { padding: 0 44px 0 16px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.cv-input--white:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.cv-input__icon { position: absolute; right: 14px; top: 14px; }
.cv-input--end { padding-right: 48px; }
.cv-input--end .cv-input__suffix { position: absolute; right: 16px; top: 15px; padding: 0; color: var(--color-text-faint); }

/* Unit selects */
.cv-select { position: relative; display: flex; align-items: center; height: 48px; border-radius: var(--radius-sm); background: var(--color-soft); }
.cv-select:focus-within { box-shadow: 0 0 0 2px var(--color-primary-active); }
.cv-select select { width: 100%; height: 100%; padding: 0 34px 0 12px; border: 0; background: transparent; color: var(--color-text); font: inherit; outline: none; cursor: pointer; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.cv-select img { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.cv-select--top img { top: 14px; transform: none; }
.cv-select--15 select { font-size: 15px; font-weight: 600; line-height: 20px; }
.cv-select--16 select { font-size: 16px; font-weight: 400; line-height: 24px; }
.cv-select--14m select { padding-right: 40px; font-size: 14px; font-weight: 500; line-height: 18px; }
.cv-select--white { background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); }
.cv-select--white select { padding-right: 32px; font-size: 14px; font-weight: 400; line-height: 20px; }
.cv-select--white img { right: 10px; }

/* From / swap / To stacks */
.cv-stack { display: flex; flex-direction: column; }
.cv-stack__swap { position: relative; z-index: 1; display: flex; justify-content: center; }
.cv-stack--mass { gap: 8px; }
.cv-stack--mass .cv-stack__swap { height: 24px; }
.cv-stack--mass .cv-stack__swap .swap-btn { margin-top: -6px; }
.cv-stack--speed .cv-stack__swap { height: 36px; }
.cv-stack--speed .cv-stack__swap .swap-btn { margin-top: -2px; }
.cv-stack--length { gap: 6px; }
.cv-row { display: flex; align-items: flex-end; gap: 8px; padding-top: 4px; }
.cv-row > .cv-field { flex: 1 1 0; min-width: 0; }
.cv-row__swap { flex-shrink: 0; padding-bottom: 4px; }

/* Buttons */
.cv-actions { display: flex; gap: 8px; padding-top: 4px; }
.cv-actions .btn { flex: 1 1 0; height: 48px; gap: 6px; font-size: 14px; line-height: 18px; }
.cv-actions--4 .btn { gap: 4px; }
.cv-actions--medium .btn { font-weight: 500; }
.cv-actions--outside { gap: 12px; padding-top: 0; }
.cv-actions--outside .btn { gap: 8px; font-size: 15px; line-height: 20px; }
.btn--pill { background: var(--color-pill-bg); color: var(--color-text); }

/* Results */
.cv-result { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: var(--color-icon-tile); filter: drop-shadow(var(--shadow-card)); }
.cv-result--flat { filter: none; }
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-kicker { font-size: 11px; font-weight: 600; line-height: 16.5px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--color-primary); }
.cv-kicker--navy { color: #00276b; }
.cv-kicker--14 { font-size: 14px; line-height: 18px; letter-spacing: 0.7px; }
.cv-kicker--muted { color: var(--color-text-muted); }
.cv-kicker--bold { font-weight: 700; }
.cv-amount { font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; color: var(--color-primary); }
.cv-amount small { margin-left: 4px; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.18px; }
.cv-sub { font-size: 14px; line-height: 18px; color: var(--color-text-muted); }
.cv-sub--20 { line-height: 20px; }
.cv-headline { display: flex; flex-direction: column; gap: 4px; }
.cv-headline__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.cv-headline__row .cv-sub { font-weight: 500; text-align: right; }
.cv-copy { display: flex; padding: 4px 4px 10px; border-radius: 4px; }
.cv-copy:hover { background: rgba(255, 255, 255, 0.6); }
.cv-hero { display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.8); }

.cv-list { display: flex; flex-direction: column; border-radius: var(--radius-sm); background: var(--color-surface); }
.cv-list .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cv-list .row > :first-child { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.cv-list .row > :last-child { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--color-text); white-space: nowrap; }
.cv-list--temp { gap: 9.5px; padding: 12px; filter: drop-shadow(var(--shadow-card)); }
.cv-list--temp .row-divider { height: 1px; background: rgba(220, 225, 251, 0.5); }
.cv-list--temp .row > :first-child { display: inline-flex; align-items: center; gap: 6px; }
.cv-list--temp .dot { width: 8px; height: 8px; }
.cv-list--zebra { gap: 4px; padding: 8px; }
.cv-list--zebra .row { padding: 6px 4px; border-radius: 4px; }
.cv-list--zebra .row:nth-child(even) { background: var(--color-soft); }
.cv-list--zebra .row > :last-child { font-size: 14px; font-weight: 500; line-height: 18px; }
.cv-list--px10 { gap: 4px; padding: 8px; }
.cv-list--px10 .row { padding: 6px 10px; border-radius: 6px; }
.cv-list--glass { gap: 8px; padding-top: 4px; background: none; border-radius: 0; }
.cv-list--glass .row { padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.6); }
.cv-list--glass .row > :first-child { font-weight: 500; line-height: 18px; }

.cv-note { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 19.25px; color: rgba(68, 70, 84, 0.9); }
.cv-note--formula { align-items: center; gap: 8px; padding: 0 4px; font-weight: 500; line-height: 18px; color: var(--color-text-muted); }
.cv-note--sm { align-items: center; gap: 6px; padding-top: 4px; font-size: 12px; line-height: 15px; color: var(--color-text-muted); }
.cv-note--foot { gap: 4px; padding-top: 4px; line-height: 17.5px; color: var(--color-text-muted); }
.cv-note--px4 { padding: 0 4px; }
.cv-note--px4 img, .cv-note--foot img { margin-top: 2px; }

/* Figma "hug contents" title blocks: the heading sets the width and the description wraps inside it. */
.title-card__text--hug { width: min-content; }
.title-card__text--hug .title-card__title { white-space: nowrap; }
.field-row > .unit-toggle { flex: 0 0 auto; }
.fin-metric { display: flex; flex-direction: column; gap: 2px; }
.fin-metric .inv-amount { display: block; }
.unit-toggle--14 { gap: 4px; }
.unit-toggle--14 button { border-radius: 6px; }
.inv-result--flat { filter: none; }
.rows .row--pt4 { padding-top: 4px; }
.fin-note--pt4 { padding-top: 4px; }
.input-inline--pr4 .input-inline__prefix { padding-right: 4px; }
.swap-col--py4 { padding: 4px 0; }
.fx-head .inv-amount { display: block; padding-top: 4px; }
.fx-head .inv-sub { line-height: 18px; }
.fin-note--fx { gap: 4px; padding-top: 2px; }
.fin-note--fx img { margin-top: 2px; }
.inv-headline--pt4 .inv-amount { display: block; padding-top: 4px; }
.inv-summary .row--pt0 { padding-top: 0; }
.unit-toggle--r8 { gap: 4px; }
.clock-bar .btn { flex: 0 0 auto; gap: 6px; }
.clock-bar__search input { padding: 1px 0 2px; }
/* Figma wraps this description at 235px. */
.fin-card__desc--235 { max-width: 235px; }
.inv-card__title, .inv-card__desc { display: block; }
.main--flush { padding-top: 0; }
.title-card--p16 { padding: 16px; }
.inv-summary .row--h24 { min-height: 24px; }
.inv-subnav + .calc-stack { margin-top: 8px; }
.inv-actions--flush { padding-top: 0; }
.inv-result__head--4 { gap: 4px; }
.inv-result__head--4 .inv-kicker { white-space: nowrap; }
.inv-subnav + .calc-stack--flush { margin-top: 0; }
.field__label--w166 { max-width: 166px; }
.inv-headline__row--rd { align-items: baseline; padding-top: 6px; min-height: 37px; }
.inv-summary--pt22 { padding-top: 22px; }
.inv-legend--tight { height: 24px; padding-top: 3.5px; }
.field__head--flush { gap: 0; }
.field__head--flush .field__label { white-space: nowrap; }
.inv-legend--55 { padding-top: 5.5px; }
.inv-subnav + .calc-stack--4 { margin-top: 4px; }
.inv-summary .row--pt2 { padding-top: 2px; }
.inv-subnav + .calc-stack--16 { margin-top: 16px; }
.inv-headline--apy { gap: 0; }
.inv-headline--apy .inv-kicker { line-height: 20px; }
.inv-headline--apy .inv-headline__row { height: 30px; padding-top: 4px; align-items: flex-start; }
.inv-headline--apy .inv-amount { line-height: 20px; }
.inv-headline--apy .inv-headline__unit { margin-top: 6px; }
.inv-headline--apy .inv-sub { padding-top: 4px; }
/* Let the right-hand item drop to a second line on phones narrower than the 390px design. */
.inv-subnav { flex-wrap: wrap; row-gap: 4px; }
.inv-result__head--4 { flex-wrap: wrap; }
.subnav + .calc-stack--4 { margin-top: 4px; }
.subnav + .calc-stack--12 { margin-top: 12px; }
.actions--mt2 { margin-top: 2px; }
.tx-result--mt4 { margin-top: 4px; }
.tx-stack4 { display: flex; flex-direction: column; gap: 4px; }
.field__sub + .input-box { margin-top: 4px; }
.btn--px9 { padding-left: 9px; padding-right: 9px; }
/* Figma lets this one-line subtitle run 1px past its 274px box. */
.title-card__text--bleed { margin-right: -2px; }
/* Figma spaces the comparison rows 2.4px apart and wraps the takeaway text at 274px. */
.matrix__row, .matrix__divider { margin-top: 2.4px; }
.takeaway p { max-width: 274px; }

/* =====================================================================
   Money Guides (home rail + blog.html)
   ===================================================================== */
.blog-card--loan { --cat: #0933bd; --cat-2: #4b6bff; --cat-soft: #e3e7ff; }
.blog-card--investment { --cat: #0b7a4b; --cat-2: #2fb37a; --cat-soft: #dcf4e8; }
.blog-card--tax { --cat: #a65f00; --cat-2: #f2a33a; --cat-soft: #fff0d9; }
.blog-card--insurance { --cat: #5a37c9; --cat-2: #9474ff; --cat-soft: #ece6ff; }

.guides__sub { font-size: 12px; line-height: 18px; color: var(--color-text-muted); }
.guides__all { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.guides__all::after { content: "→"; }

/* Horizontal rail that bleeds to the screen edges and snaps card by card. */
.blog-rail { display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.blog-rail::-webkit-scrollbar { display: none; }
.blog-rail > li { flex: 0 0 264px; scroll-snap-align: start; }

.blog-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); filter: drop-shadow(var(--shadow-card)); transition: transform 0.15s ease; }
.blog-card:active { transform: scale(0.99); }
.blog-card:focus-visible { outline: 2px solid var(--color-primary-active); outline-offset: 2px; }

.blog-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--cat), var(--cat-2)); }
.blog-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
/* A light tint along the bottom edge keeps the figure chip readable without darkening the photo. */
.blog-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--cat) 18%, transparent)); pointer-events: none; }
.blog-card:hover .blog-cover img { transform: scale(1.04); }
.blog-cover__stat { position: absolute; z-index: 1; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.92); color: var(--cat); font-size: 12px; font-weight: 700; line-height: 16px; backdrop-filter: blur(4px); }

.blog-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.blog-card__meta { display: flex; align-items: center; gap: 8px; }
.blog-chip { padding: 2px 8px; border-radius: 4px; background: var(--cat-soft); color: var(--cat); font-size: 11px; font-weight: 600; line-height: 16.5px; letter-spacing: 0.55px; text-transform: uppercase; }
.blog-card__read { font-size: 12px; line-height: 16px; color: var(--color-text-faint); }
.blog-card__title { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--color-text); }
.blog-card__excerpt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 18px; color: var(--color-text-muted); }
.blog-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.blog-card__foot time { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.blog-card__go { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--cat-soft); }

/* ----- blog.html ----- */
.main--blog { padding-bottom: 48px; }
.blog-intro { display: flex; flex-direction: column; gap: 4px; padding: 0 2px 4px; }
.blog-intro h1 { font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.55px; }
.blog-intro p { font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.blog-filters { display: flex; gap: 8px; margin: 12px 0 16px; overflow-x: auto; scrollbar-width: none; }
.blog-filters::-webkit-scrollbar { display: none; }
.blog-filters button { flex-shrink: 0; padding: 6px 14px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); font-size: 13px; font-weight: 500; line-height: 18px; filter: drop-shadow(var(--shadow-card)); }
.blog-filters button[aria-pressed="true"] { background: var(--color-primary-active); color: #fff; }
.blog-list { display: flex; flex-direction: column; gap: 12px; }
.blog-list > li[hidden] { display: none; }

.article-cover { overflow: hidden; border-radius: var(--radius-md); }
.article-cover .blog-cover { aspect-ratio: 16 / 9; }
.article-view > .blog-card__meta { margin: 14px 0 6px; }
.article-title { font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -0.55px; }
.article-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; font-size: 15px; line-height: 24px; color: var(--color-text); }
.article-body h2 { margin-top: 8px; font-size: 17px; font-weight: 600; line-height: 24px; letter-spacing: -0.17px; }
.article-body ul { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; list-style: disc; }
.article-body strong { font-weight: 600; }
.article-formula { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-icon-tile); color: var(--color-primary); font-size: 14px; font-weight: 600; line-height: 22px; overflow-x: auto; }
.article-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); font-size: 13px; line-height: 18px; filter: drop-shadow(var(--shadow-card)); }
.article-table th, .article-table td { padding: 10px; text-align: left; vertical-align: top; }
.article-table th { background: var(--color-soft); color: var(--color-text-muted); font-weight: 600; }
.article-table tr + tr td { border-top: 1px solid var(--color-divider); }