/* ============================================================================
   Bankebi — Georgian commercial bank comparison
   Swiss editorial grid on paper stock: hairline rules, one accent, no shadows.
   The accent is the red of the national flag, so the palette and the national
   marks are the same two colours rather than two competing systems.
   ========================================================================= */

:root {
  --paper: #f4f1e9;
  --card: #fffdf7;
  --ink: #16150f;
  --muted: #6b6a60;
  --faint: #94928a;
  --line: #cbc7bb;
  --hair: #e0dcd1;

  --red: #da291c;        /* flag red — fills, marks, graphics */
  --red-ink: #b81d13;    /* darkened for text, keeps 4.5:1 on paper */
  --red-wash: #f9e9e6;

  --pad: clamp(20px, 4vw, 60px);
  --gutter: clamp(16px, 2vw, 28px);

  --sans: "Helvetica Neue", Helvetica, "Noto Sans Georgian", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  overflow-x: hidden;
}

button, input, select { color: inherit; font: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }

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

h1, h2, h3 { font-weight: 500; margin: 0; }

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

/* --- shared type ------------------------------------------------------- */

.eyebrow {
  align-items: center;
  color: var(--red-ink);
  display: flex;
  font-size: 10px;
  font-weight: 800;
  gap: 7px;
  letter-spacing: .12em;
  margin: 0;
  text-transform: uppercase;
}

.field-label, legend {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: 10px;
  padding: 0;
  text-transform: uppercase;
}

/* The Bolnisi cross doubles as the site's bullet. */
.tick { fill: var(--red); flex: 0 0 auto; height: 9px; width: 9px; }

.num { font-variant-numeric: tabular-num; }

/* --- masthead --------------------------------------------------------- */

.masthead {
  align-items: center;
  border-bottom: 1px solid var(--ink);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px var(--pad);
}

.brand { align-items: center; display: flex; gap: 12px; }

.brand-flag {
  border: 1px solid var(--ink);
  flex: 0 0 auto;
  height: 26px;
  width: 39px;
}

.brand-name {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.brand-name em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.masthead-nav {
  display: flex;
  gap: clamp(18px, 2.6vw, 40px);
  margin-inline: auto;
}

.masthead-nav button, .masthead-nav a {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 4px 0;
  text-transform: uppercase;
  transition: color 100ms linear;
  white-space: nowrap;
}

.masthead-nav button:hover, .masthead-nav a:hover { color: var(--ink); }

.masthead-nav .is-current {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.masthead-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: .07em;
  margin: 0;
  text-transform: uppercase;
}

.view[hidden] { display: none; }

.stamp {
  border: 1px solid var(--line);
  color: var(--red-ink);
  padding: 3px 7px;
}

/* --- hero ------------------------------------------------------------- */

.hero {
  align-items: end;
  border-bottom: 1px solid var(--ink);
  display: grid;
  gap: var(--gutter) 6vw;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  padding: clamp(48px, 7vw, 96px) var(--pad) clamp(36px, 5vw, 60px);
}

.hero h1 {
  font-size: clamp(56px, 8.4vw, 132px);
  letter-spacing: -.055em;
  line-height: .86;
  margin: 22px 0 0;
}

.hero h1 em {
  color: var(--red-ink);
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.045em;
  margin-left: .3em;
}

.hero-sub {
  color: var(--muted);
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.5;
  margin: 30px 0 0;
  max-width: 46ch;
}

.hero-figures {
  border-top: 1px solid var(--ink);
  display: grid;
  gap: 0;
  margin: 0;
}

.hero-figures div {
  border-bottom: 1px solid var(--hair);
  display: grid;
  gap: 4px 16px;
  grid-template-columns: 1fr auto;
  padding: 13px 0;
}

.hero-figures dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hero-figures dd {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.04em;
  margin: 0;
  text-align: right;
}

.hero-figures dd small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

/* --- lens tabs -------------------------------------------------------- */

.lenses {
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.lens {
  border-left: 1px solid var(--hair);
  display: grid;
  gap: 0;
  min-height: 132px;
  padding: 16px 20px 18px;
  position: relative;
  text-align: left;
  transition: background 120ms linear, color 120ms linear;
}

.lens:first-child { border-left: 0; }
.lens:hover { background: var(--card); }

.lens.is-active { background: var(--ink); color: var(--paper); }
.lens.is-active .lens-index,
.lens.is-active .lens-sub,
.lens.is-active .lens-count { color: #a9a79d; }

/* Flag-red rule marks the live tab. */
.lens.is-active::after {
  background: var(--red);
  content: "";
  inset: auto 0 0 0;
  height: 4px;
  position: absolute;
}

.lens-index {
  color: var(--faint);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}

.lens strong {
  align-self: end;
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 400;
  letter-spacing: -.02em;
  margin-top: 26px;
}

.lens-sub, .lens-count {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  margin-top: 6px;
  text-transform: uppercase;
}

.lens-count { font-weight: 500; letter-spacing: 0; margin-top: 2px; text-transform: none; }

/* --- panels ----------------------------------------------------------- */

.panel {
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(270px, .3fr) minmax(0, .7fr);
}

.panel[hidden] { display: none; }
.panel--wide { display: block; }

.panel-intro {
  border-bottom: 1px solid var(--hair);
  display: grid;
  gap: 5vw;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  padding: clamp(40px, 5vw, 64px) var(--pad);
}

.panel-intro h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 16px 0 0;
}

.panel-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 18px 0 0;
  max-width: 48ch;
}

/* --- deposit controls ------------------------------------------------- */

.controls { padding: clamp(36px, 4vw, 52px) clamp(22px, 2.4vw, 34px); }

/* The results list runs far longer than the form. Pinning the form keeps the
   inputs in reach and closes the column of dead paper beside them; the
   max-height keeps the bottom of a long form reachable on short screens. */
@media (min-width: 901px) {
  .controls {
    align-self: start;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: sticky;
    top: 0;
  }
}

.control-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.control-head p {
  color: var(--red-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  margin: 0;
  text-transform: uppercase;
}

.reset {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reset:hover { color: var(--red-ink); }

.controls h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -.03em;
  margin: 14px 0 36px;
}

.amount-field { display: block; margin-bottom: 30px; }

.amount-row {
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  display: flex;
  gap: 8px;
}

.amount-row input {
  background: none;
  border: 0;
  font-size: clamp(34px, 3.5vw, 50px);
  font-weight: 500;
  letter-spacing: -.055em;
  min-width: 0;
  outline: none;
  padding: 2px 0 8px;
  width: 100%;
}

.amount-row input::-webkit-outer-spin-button,
.amount-row input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.amount-row input { appearance: textfield; }

.amount-row b {
  color: var(--red-ink);
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 600;
}

fieldset { border: 0; margin: 0 0 28px; padding: 0; }
fieldset[hidden] { display: none; }

.segmented {
  border: 1px solid var(--ink);
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.segmented button {
  border-left: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  min-height: 42px;
  padding: 0 6px;
  transition: background 100ms linear, color 100ms linear;
}

.segmented button:first-child { border-left: 0; }
.segmented button:hover { background: var(--card); }
.segmented button.is-on { background: var(--ink); color: var(--paper); }

.stacked { display: grid; gap: 6px; }

.stacked button {
  border: 1px solid var(--line);
  display: grid;
  gap: 3px;
  min-height: 50px;
  padding: 9px 12px;
  text-align: left;
  transition: border-color 100ms linear, background 100ms linear;
}

.stacked button:hover { background: var(--card); }

.stacked button.is-on {
  background: var(--card);
  border-color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}

.stacked strong { font-size: 13px; font-weight: 600; }
.stacked span { color: var(--muted); font-size: 10px; }

.control-note {
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  margin: 34px 0 0;
  padding-top: 18px;
}

/* --- results list ----------------------------------------------------- */

/* The rule between form and results lives on the results column so it runs the
   full height of the panel even while the form is pinned. */
.results {
  border-left: 1px solid var(--hair);
  min-width: 0;
  padding: clamp(36px, 4vw, 52px) clamp(24px, 3vw, 44px) clamp(48px, 5vw, 66px);
}

.results-head {
  align-items: end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.results-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.9vw, 42px);
  letter-spacing: -.03em;
  margin: 10px 0 0;
}

.results-head--tight { align-items: center; }

.search {
  border-bottom: 1px solid var(--ink);
  display: block;
  max-width: 220px;
  width: 34%;
}

.search input {
  background: none;
  border: 0;
  font-size: 12px;
  outline: none;
  padding: 0 0 8px;
  width: 100%;
}

.table-head {
  border-bottom: 1px solid var(--ink);
  color: var(--muted);
  display: grid;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-top: 38px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.table-head--deposits { grid-template-columns: minmax(160px, 1fr) 112px 150px 46px; }

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  align-items: center;
  border-bottom: 1px solid var(--hair);
  display: grid;
  gap: 0 12px;
  grid-template-columns: minmax(160px, 1fr) 112px 150px 46px;
  min-height: 88px;
  padding: 12px 0;
}

.row.is-best { border-bottom-color: var(--red); }
.row:hover { background: var(--card); }

.bank { align-items: center; display: flex; gap: 13px; min-width: 0; }

.mono-mark {
  align-items: center;
  border: 1px solid var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  letter-spacing: .04em;
  width: 34px;
}

.row.is-best .mono-mark { background: var(--red); border-color: var(--red); color: #fff; }

.bank-name { display: grid; gap: 2px; min-width: 0; }
.bank-name h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.bank-name p { color: var(--muted); font-size: 10px; margin: 0; }

.badge {
  color: var(--red-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rate { font-size: 23px; font-weight: 500; letter-spacing: -.045em; }
.row.is-best .rate { color: var(--red-ink); }
.rate.is-negative { color: var(--muted); }

.yield { display: grid; gap: 3px; }
.yield strong { font-size: 13px; font-weight: 600; }
.yield span { color: var(--muted); font-size: 10px; }

.pick {
  align-items: center;
  border: 1px solid var(--ink);
  display: inline-flex;
  height: 32px;
  justify-content: center;
  justify-self: end;
  transition: background 100ms linear;
  width: 32px;
}

.pick svg { height: 11px; width: 11px; }
/* Sits on the text baseline by default, which reads as misaligned in a table row. */
.pick { vertical-align: middle; }
.pick:hover:not(:disabled) { background: var(--card); }
.pick.is-on { background: var(--red); border-color: var(--red); }
.pick.is-on svg { fill: #fff; }
.pick:disabled { cursor: not-allowed; opacity: .28; }

.empty {
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  padding: 40px 0;
  text-align: center;
}

/* --- index chart (cost / package ranking) ----------------------------- */

.index-chart {
  align-content: start;
  display: grid;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-chart li {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 26px minmax(96px, 150px) minmax(0, 1fr) auto;
  min-height: 34px;
  position: relative;
  transition: background 60ms linear;
}

.index-chart li:hover,
.index-chart li:focus-visible { background: var(--card); }
.index-chart li:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }

.index-chart li[data-tooltip]::after {
  background: var(--ink);
  color: var(--paper);
  content: attr(data-tooltip);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  max-width: 270px;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  transition: opacity 60ms linear;
  width: max-content;
  z-index: 5;
}

.index-chart li[data-tooltip]:hover::after,
.index-chart li[data-tooltip]:focus-visible::after { opacity: 1; }

.index-chart .idx { color: var(--faint); font-size: 9px; font-weight: 800; }
.index-chart .who { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.index-chart .who small { color: var(--muted); display: block; font-size: 10px; font-weight: 400; }

.bar { background: var(--hair); height: 12px; position: relative; }
.bar span { background: var(--ink); display: block; height: 100%; }
.index-chart li.is-picked .bar span { background: var(--red); }
.index-chart li.is-picked .who { color: var(--red-ink); }

.index-chart .val { font-size: 12px; font-weight: 600; letter-spacing: -.02em; min-width: 76px; text-align: right; }
.index-chart .val small { color: var(--muted); font-size: 10px; font-weight: 400; }

/* --- matrices --------------------------------------------------------- */

.matrix-wrap { padding: clamp(36px, 4vw, 56px) var(--pad) clamp(48px, 5vw, 70px); }

.matrix-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; }

.select-field { display: block; }

.select-field select {
  appearance: none;
  background: var(--card);
  border: 1px solid var(--ink);
  font-size: 12px;
  font-weight: 600;
  min-height: 38px;
  padding: 0 34px 0 12px;
  /* caret drawn inline so the control needs no image request */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.switch { align-items: center; color: var(--muted); cursor: pointer; display: flex; font-size: 11px; gap: 8px; }
.switch input { accent-color: var(--red); height: 14px; width: 14px; }

.matrix-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  margin: 26px 0 0;
  max-width: 62ch;
}

.scroller { margin-top: 22px; overflow-x: auto; overscroll-behavior-x: contain; }
.scroller--tall { max-height: 420px; overflow-y: auto; }

.matrix, .rates {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
  text-align: left;
  width: max-content;
}

.matrix th, .matrix td, .rates th, .rates td {
  border-bottom: 1px solid var(--hair);
  padding: 11px 14px;
  vertical-align: top;
}

.matrix thead th, .rates thead th {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 2;
}

.matrix tbody th {
  background: var(--paper);
  font-weight: 500;
  left: 0;
  max-width: 300px;
  min-width: 210px;
  position: sticky;
  z-index: 1;
}

.matrix thead th:first-child { left: 0; z-index: 3; }

.matrix thead th small {
  color: var(--faint);
  display: block;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 3px;
  text-transform: none;
}

.matrix td { min-width: 120px; white-space: pre-line; }

.matrix--flat th, .matrix--flat td { vertical-align: middle; }
.matrix--flat tbody th { min-width: 180px; }
.matrix--flat tbody tr:hover { background: var(--card); }
.matrix .group th {
  background: var(--ink);
  color: var(--paper);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 1;
}

.matrix .is-head th { font-weight: 700; }
.matrix .picked { background: var(--red-wash); }
.matrix thead th.picked { color: var(--red-ink); }

.cell-free { color: var(--red-ink); font-weight: 700; }
.cell-none { color: var(--faint); }
.cell-in svg { fill: var(--red); height: 11px; width: 11px; }

.rates td.chg-up { color: var(--red-ink); }
.rates td.chg-dn { color: #1e6b3a; }
.rates tbody tr:hover { background: var(--card); }
.rates .code { font-weight: 700; letter-spacing: .03em; }
.rates .name { color: var(--muted); }
.rates .val { font-variant-numeric: tabular-num; text-align: right; }

/* --- regulated-entity registry --------------------------------------- */

.registry-summary {
  align-self: end;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.registry-summary div {
  border-left: 1px solid var(--hair);
  min-width: 0;
  padding: 14px 16px;
}

.registry-summary div:first-child { border-left: 0; padding-left: 0; }
.registry-summary dt {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.registry-summary dd {
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.1;
  margin: 8px 0 0;
}

.registry-summary dd small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-weight: 500;
  margin-top: 5px;
}

.registry-directory {
  border-bottom: 1px solid var(--ink);
  padding: clamp(34px, 4vw, 52px) var(--pad) clamp(42px, 5vw, 66px);
}

.registry-directory-head {
  align-items: end;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
  margin-bottom: 28px;
}

.registry-directory-head h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -.03em;
  margin: 10px 0 0;
}

.registry-directory-head > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
  max-width: 58ch;
}

.registry-categories {
  border-left: 1px solid var(--hair);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.registry-filter {
  align-items: start;
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 72px;
  padding: 13px 14px;
  text-align: left;
}

.registry-filter:hover { background: var(--card); }
.registry-filter.is-active { background: var(--ink); color: var(--paper); }
.registry-filter span { font-size: 11px; font-weight: 700; line-height: 1.25; }
.registry-filter small {
  color: var(--muted);
  display: block;
  font-size: 9px;
  font-weight: 400;
  margin-top: 4px;
}
.registry-filter b { color: var(--red-ink); font-size: 11px; }
.registry-filter.is-active b { color: #f39a90; }
.registry-filter.is-active small { color: #a9a79d; }

.registry-results { border-bottom: 1px solid var(--ink); }
.registry-table { min-width: 1240px; }
.registry-table tbody th { font-weight: 700; }
.registry-table th, .registry-table td { vertical-align: top; }
.registry-table tbody tr:hover { background: var(--card); }
.registry-table small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-weight: 400;
  margin-top: 3px;
}
.registry-table .registry-name { min-width: 220px; }
.registry-table .registry-code {
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}
.registry-table .registry-kind { min-width: 170px; }
.registry-table .registry-leadership { min-width: 180px; }
.registry-table .registry-kind a,
.registry-table .registry-location a { border-bottom: 1px solid var(--hair); }
.registry-table .registry-kind a:hover,
.registry-table .registry-location a:hover { border-color: var(--red); color: var(--red-ink); }
.registry-table .registry-location { max-width: 320px; min-width: 220px; }

.table-sort {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font: inherit;
  gap: 7px;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.table-sort span {
  color: var(--faint);
  font-size: 12px;
  line-height: 1;
}

.table-sort:hover,
.table-sort.is-active { color: var(--red-ink); }
.table-sort.is-active span { color: var(--red); }

/* --- fx --------------------------------------------------------------- */

.fx-top {
  border-bottom: 1px solid var(--hair);
  display: grid;
  gap: 5vw;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  padding: clamp(40px, 5vw, 64px) var(--pad);
}

.fx-convert h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -.03em;
  margin: 16px 0 0;
}

.converter { margin-top: 32px; }

.converter .amount-row select {
  appearance: none;
  background: none;
  border: 0;
  color: var(--red-ink);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  outline: none;
  padding-right: 4px;
}

.converter-out {
  border-top: 1px solid var(--hair);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -.045em;
  margin: 20px 0 0;
  padding-top: 18px;
}

.converter-out small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 6px;
}

.fx-rates { min-width: 0; }

/* --- shortlist tray --------------------------------------------------- */

.tray {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 6vw, 76px) var(--pad) clamp(52px, 6vw, 80px);
}

.tray-head {
  align-items: end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 36px;
}

.tray-head h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 62px);
  letter-spacing: -.035em;
  margin: 10px 0 0;
}

.tray .eyebrow { color: #d99089; }

.tray-clear {
  border-bottom: 1px solid #57554e;
  color: #a9a79d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding-bottom: 3px;
  text-transform: uppercase;
}
.tray-clear:hover { color: var(--paper); }

.tray-cards {
  border-top: 1px solid #57554e;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.tray-cards > * { border-left: 1px solid #57554e; min-height: 300px; padding: 24px 26px 28px; }
.tray-cards > *:first-child { border-left: 0; }

.tray-card-top { align-items: center; display: flex; justify-content: space-between; }
.tray-card-top .mono-mark { border-color: var(--paper); }

.tray-drop { color: #a9a79d; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tray-drop:hover { color: var(--red); }

.tray-card h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 34px 0 4px;
}

.tray-card .ka { color: #a9a79d; font-size: 11px; margin: 0 0 24px; }

.tray-card dl { margin: 0; }

.tray-card dl div {
  align-items: baseline;
  border-top: 1px solid #3d3c37;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 9px 0;
}

.tray-card dt { color: #a9a79d; font-size: 10px; }
.tray-card dd { font-size: 12px; font-weight: 700; letter-spacing: -.01em; margin: 0; text-align: right; }
.tray-card dd.lead { color: #f39a90; }

.tray-slot {
  align-items: center;
  color: #77756c;
  display: flex;
  flex-direction: column;
  font-size: 10px;
  gap: 12px;
  justify-content: center;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.tray-slot svg { fill: #4a4943; height: 26px; width: 26px; }

/* --- economic pulse --------------------------------------------------- */

.pulse {
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pulse-block {
  border-left: 1px solid var(--hair);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3vw, 42px) clamp(22px, 2.6vw, 38px) clamp(30px, 3vw, 44px);
}

.pulse-block:nth-child(odd) { border-left: 0; }
.pulse-block:nth-child(-n+2) { border-top: 0; }
.pulse-block--wide { border-left: 0; grid-column: 1 / -1; }

.pulse-block header { margin-bottom: 22px; }

.pulse-block h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 12px 0 0;
}

.pulse-chart { min-width: 0; }

.pulse-pair {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
}

.pulse-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 20px 0 0;
  max-width: 62ch;
  /* Push the note to the bottom so blocks in a row align on their captions. */
  margin-top: auto;
  padding-top: 20px;
}

.pulse-stamp {
  border-bottom: 1px solid var(--ink);
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0;
  padding: 16px var(--pad);
  text-transform: uppercase;
}

/* --- mortgage market ------------------------------------------------- */

.mortgage-market {
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mortgage-block {
  border-left: 1px solid var(--hair);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(30px, 3.5vw, 50px) var(--pad);
}

.mortgage-block:nth-child(2) { border-left: 0; }
.mortgage-block--wide {
  border-left: 0;
  grid-column: 1 / -1;
}
.mortgage-block:first-child { border-top: 0; }

.mortgage-block header { margin-bottom: 28px; }

.mortgage-block h2 {
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 12px 0 0;
}

.mortgage-block-head {
  align-items: end;
  display: flex;
  gap: var(--gutter);
  justify-content: space-between;
}

.mortgage-maturity { max-width: 700px; }

.mortgage-rate-layout {
  align-items: start;
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(310px, .36fr);
}

.mortgage-rate-snapshot { border-top: 1px solid var(--ink); }
.mortgage-rate-snapshot .rates { min-width: 310px; }
.mortgage-rate-snapshot th,
.mortgage-rate-snapshot td { padding-inline: 8px; }

/* --- household loan market ------------------------------------------ */

.loan-control-deck {
  display: grid;
  gap: 24px var(--gutter);
  grid-template-columns: 1fr 1fr;
  margin-bottom: 34px;
}

.loan-control-deck .field-label {
  margin: 0 0 8px;
}

.loan-products button { min-width: 86px; }

.loan-balance-products {
  grid-auto-flow: initial;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 28px;
}

.loan-balance-products button {
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
}

.loan-balance-products button:nth-child(-n+2) { border-top: 0; }
.loan-balance-products button:nth-child(odd) { border-left: 0; }

.loan-balance-chart { margin-top: 6px; }

.chart-empty {
  border-bottom: 1px solid var(--hair);
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  padding: 72px 0;
}

.loan-snapshot {
  border-top: 1px solid var(--ink);
  margin-top: 24px;
}

.loan-snapshot .rates { min-width: 560px; }
.loan-snapshot th,
.loan-snapshot td { padding-inline: 9px; }
.loan-snapshot td { text-align: right; }

.loan-definitions .source-link { margin-top: 18px; }

.mortgage-calculator-layout {
  display: grid;
  gap: clamp(40px, 6vw, 90px);
  grid-template-columns: minmax(0, 1fr) minmax(340px, .7fr);
}

.mortgage-inputs {
  align-items: end;
  display: grid;
  gap: 28px var(--gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mortgage-inputs > .segmented { grid-column: 1 / -1; }

.mortgage-input {
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  display: flex;
  gap: 8px;
  padding: 3px 0 8px;
}

.mortgage-input input {
  background: transparent;
  border: 0;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -.04em;
  min-width: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}

.mortgage-input b {
  color: var(--red-ink);
  font-size: 12px;
  white-space: nowrap;
}

.mortgage-calculation {
  border-top: 1px solid var(--ink);
  margin: 0;
}

.mortgage-calculation div {
  align-items: baseline;
  border-bottom: 1px solid var(--hair);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 14px 0;
}

.mortgage-calculation dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mortgage-calculation dd {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 34px);
  letter-spacing: -.03em;
  margin: 0;
}

.source-link {
  border-bottom: 1px solid var(--ink);
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-top: 22px;
  padding-bottom: 3px;
  text-transform: uppercase;
}
.source-link:hover { border-color: var(--red); color: var(--red-ink); }

.mortgage-definitions {
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mortgage-definitions section {
  padding: clamp(32px, 4vw, 54px) var(--pad);
}

.mortgage-definitions section + section { border-left: 1px solid var(--hair); }

.mortgage-definitions h2 {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 14px 0 12px;
  max-width: 24ch;
}

.mortgage-definitions section > p:last-child {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
  max-width: 58ch;
}

/* --- charts ----------------------------------------------------------- */

.chart { display: block; height: auto; overflow: visible; width: 100%; }

.c-grid { stroke: var(--hair); stroke-width: 1; }

.c-tick {
  fill: var(--faint);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

.c-note {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
}

.c-line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.c-line--projected { stroke: var(--red); stroke-dasharray: 5 4; }

.c-dot { fill: var(--ink); }
.c-dot--small { fill: var(--red); }

.c-target { stroke: var(--red); stroke-dasharray: 3 3; stroke-width: 1; }

.c-hover-zone {
  cursor: crosshair;
  fill: transparent;
  pointer-events: all;
}

.c-hover-guide {
  opacity: 0;
  pointer-events: none;
  stroke: var(--ink);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  transition: opacity 60ms linear;
}

.c-hover-dot {
  fill: var(--paper);
  opacity: 0;
  pointer-events: none;
  stroke: var(--ink);
  stroke-width: 2;
  transition: opacity 60ms linear;
}

.c-hover-dot--s1 { stroke: var(--red); }

.c-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 60ms linear;
}

.c-hover:hover .c-hover-guide,
.c-hover:hover .c-hover-dot,
.c-hover:hover .c-tooltip { opacity: 1; }

.c-tooltip-bg {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 1;
}

.c-tooltip-title,
.c-tooltip-row {
  fill: var(--paper);
  font-family: var(--sans);
  pointer-events: none;
}

.c-tooltip-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.c-tooltip-row {
  fill: #b9b7ae;
  font-size: 10px;
  font-weight: 600;
}

.c-tooltip-value {
  fill: var(--paper);
  font-family: var(--mono);
  font-weight: 700;
}

/* Nested credibility bands: widest is faintest. */
.c-fan { stroke: none; fill: var(--red); }
.c-fan--p90 { opacity: .1; }
.c-fan--p75 { opacity: .12; }
.c-fan--p50 { opacity: .15; }
.c-fan--p25 { opacity: .2; }

/* Second and later series in a multi-line chart. */
.c-line--s1 { stroke: var(--red); }
.c-dot--s1 { fill: var(--red); }

.c-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 44px;
}

.c-legend li {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.c-legend li::before {
  background: var(--ink);
  content: "";
  height: 2px;
  width: 14px;
}

.c-legend .c-legend--s1::before { background: var(--red); }

/* --- method ----------------------------------------------------------- */

.method {
  border-bottom: 1px solid var(--ink);
  display: grid;
  gap: 5vw;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  padding: clamp(44px, 5vw, 72px) var(--pad);
}

.method-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.03em;
  margin: 14px 0 0;
}

.method-body { display: grid; gap: 0; }

.method-body section {
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 4px 5%;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  padding: 18px 0;
}
.method-body section:first-child { border-top: 0; padding-top: 0; }

.method-body h3 { font-size: 13px; font-weight: 700; }
.method-body h3 small { color: var(--muted); display: block; font-size: 11px; font-weight: 400; }
.method-body p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }

/* --- colophon --------------------------------------------------------- */

.colophon {
  background: var(--ink);
  color: var(--paper);
  display: grid;
  gap: var(--gutter) 5vw;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .7fr);
  padding: clamp(36px, 4vw, 54px) var(--pad);
}

.colophon .eyebrow { color: #d99089; margin-bottom: 12px; }
.colophon-brand { display: grid; gap: 16px; }
.colophon-brand .brand-flag { border-color: #57554e; }
.colophon-brand p { color: #a9a79d; font-size: 11px; line-height: 1.6; margin: 0; max-width: 42ch; }

.colophon-source ul { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.colophon-source a { border-bottom: 1px solid #57554e; font-size: 11px; padding-bottom: 2px; }
.colophon-source a:hover { border-color: var(--red); color: #f39a90; }

.colophon-stamp p { font-size: 11px; margin: 0; }
.colophon-note { color: #77756c; margin-top: 6px !important; }

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1080px) {
  .pulse-pair { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero-figures { grid-template-columns: repeat(2, 1fr); gap: 0 var(--gutter); }
  .panel-intro, .fx-top { gap: var(--gutter); grid-template-columns: 1fr; }
  .registry-summary { margin-top: 10px; }
  .registry-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mortgage-rate-layout { grid-template-columns: 1fr; }
  .mortgage-rate-snapshot { max-width: 620px; }
  .method { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  .pulse { grid-template-columns: 1fr; }
  .pulse-block { border-left: 0; }
  .pulse-block:nth-child(2) { border-top: 1px solid var(--hair); }
  .pulse-note { margin-top: 20px; }
  .registry-directory-head { align-items: start; grid-template-columns: 1fr; }
  .mortgage-market { grid-template-columns: 1fr; }
  .mortgage-block { border-left: 0; }
  .mortgage-block--wide { grid-column: auto; }
  .mortgage-calculator-layout { grid-template-columns: 1fr; }
  .loan-control-deck { grid-template-columns: 1fr; }
  .loan-products,
  .loan-maturity {
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .loan-products button,
  .loan-maturity button {
    border-left: 1px solid var(--ink);
    border-top: 1px solid var(--ink);
  }
  .loan-products button:nth-child(-n+3),
  .loan-maturity button:nth-child(-n+3) { border-top: 0; }
  .loan-products button:nth-child(3n+1),
  .loan-maturity button:nth-child(3n+1) { border-left: 0; }

  .lenses { grid-template-columns: repeat(2, 1fr); }
  .lens { border-top: 1px solid var(--hair); min-height: 112px; }
  .lens:nth-child(-n+2) { border-top: 0; }
  .lens:nth-child(odd) { border-left: 0; }

  .panel { grid-template-columns: 1fr; }
  .results { border-left: 0; }
  .controls {
    border-bottom: 1px solid var(--hair);
    display: grid;
    gap: 0 var(--gutter);
    grid-template-columns: 1fr 1fr;
  }
  .control-head, .controls h2, .control-note { grid-column: 1 / -1; }
  .amount-field, fieldset { margin-bottom: 24px; }

  .tray-cards { grid-template-columns: 1fr; }
  .tray-cards > * { border-left: 0; border-top: 1px solid #57554e; min-height: 0; }
  .tray-cards > *:first-child { border-top: 0; }
  .tray-slot { min-height: 130px; }

  .colophon { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* The nav drops below the brand rather than crushing the wordmark. */
  .masthead { flex-wrap: wrap; row-gap: 4px; }
  .masthead-nav { margin-inline: 0; order: 3; width: 100%; }
  .masthead-nav .is-current { text-underline-offset: 5px; }
  .registry-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .masthead { gap: 10px; }
  .masthead-meta { font-size: 9px; }
  .c-legend { padding-left: 0; }
  .hero h1 { font-size: clamp(46px, 15vw, 84px); }
  .hero-figures { grid-template-columns: 1fr; }
  .lenses { grid-template-columns: 1fr; }
  .lens { border-left: 0; min-height: 0; padding: 14px var(--pad); }
  .lens:nth-child(2) { border-top: 1px solid var(--hair); }
  .lens strong { margin-top: 8px; }
  .lens.is-active::after { height: 3px; }

  .controls { display: block; padding: 32px var(--pad); }
  .results { padding: 32px var(--pad) 48px; }
  .results-head { align-items: stretch; flex-direction: column; gap: 20px; }
  .search { max-width: none; width: 100%; }

  .table-head { display: none; }
  .rows { border-top: 1px solid var(--ink); margin-top: 28px; }
  .row {
    gap: 14px 12px;
    grid-template-columns: minmax(0, 1fr) 40px;
    min-height: 0;
    padding: 18px 0;
  }
  .bank { grid-column: 1; }
  .pick { grid-column: 2; grid-row: 1; }
  .rate { grid-column: 1; grid-row: 2; }
  .yield { grid-column: 2 / -1; grid-row: 2; justify-self: end; text-align: right; }

  .index-chart li { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .index-chart .bar { display: none; }

  .matrix tbody th { max-width: 190px; min-width: 160px; }
  .matrix th, .matrix td { padding: 9px 11px; }
  .registry-summary { grid-template-columns: 1fr; }
  .registry-summary div { border-left: 0; border-top: 1px solid var(--hair); padding-inline: 0; }
  .registry-summary div:first-child { border-top: 0; }
  .registry-categories { grid-template-columns: 1fr; }
  .mortgage-block-head { align-items: stretch; flex-direction: column; }
  .mortgage-inputs { grid-template-columns: 1fr; }
  .mortgage-definitions { grid-template-columns: 1fr; }
  .mortgage-definitions section + section { border-left: 0; border-top: 1px solid var(--hair); }
  .loan-products,
  .loan-maturity,
  .loan-balance-products { grid-template-columns: 1fr 1fr; }
  .loan-products button:nth-child(n),
  .loan-maturity button:nth-child(n),
  .loan-balance-products button:nth-child(n) {
    border-left: 1px solid var(--ink);
    border-top: 1px solid var(--ink);
  }
  .loan-products button:nth-child(-n+2),
  .loan-maturity button:nth-child(-n+2),
  .loan-balance-products button:nth-child(-n+2) { border-top: 0; }
  .loan-products button:nth-child(odd),
  .loan-maturity button:nth-child(odd),
  .loan-balance-products button:nth-child(odd) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; }
}