/* ============================================================================
   InterestLoanCalculator.com — design system
   ----------------------------------------------------------------------------
   The organising idea: the logo's green fails badly on white (2.05:1) but hits
   7.08:1 on deep navy. So the page has two surfaces with different rules — a
   light reading surface where blue leads, and a dark data surface where the
   brand green comes alive. Every result lands on the dark surface. That makes
   the answer unmistakable and gives the brand somewhere to actually live.

   Measured, not chosen by eye:
     LIGHT (#FFFFFF / #F5F8FB)      DARK (#0B2B47)
       #0B1F33 ink        16.7        #FFFFFF white        14.5
       #40566B secondary   7.6        #CFE0EE pale blue    10.7
       #5A7186 labels      5.1        #A8CBE8 chart blue    8.5
       #155790 brand       7.5        #8CC63F green         7.1
       #9B3A2B interest    6.9        #F2A07C interest      7.0
   ========================================================================== */

:root {
  --ink:        #0B1F33;
  --ink-2:      #40566B;
  --ink-3:      #5A7186;
  --brand:      #155790;
  --brand-deep: #0F4272;
  --brand-wash: #EDF3F9;
  --interest:   #9B3A2B;
  --surface:    #FFFFFF;
  --surface-2:  #F5F8FB;
  --line:       #E2E9F0;
  --line-2:     #CBD8E3;

  --deep:       #0B2B47;
  --on-deep:    #FFFFFF;
  --on-deep-2:  #CFE0EE;
  --accent:     #8CC63F;   /* decoration only on light surfaces: 2.05:1 */
  --accent-ink: #4C721B;   /* the same green, darkened to 5.63:1 so it can carry text */
  --chart-blue: #A8CBE8;
  --chart-warm: #F2A07C;

  --sans: "Archivo", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;  --s9: 6rem;

  --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
  --shadow: 0 1px 2px rgba(11,31,51,.05), 0 12px 32px -12px rgba(11,31,51,.18);
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.021em; margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s4);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.deep :focus-visible, .site-foot :focus-visible, .stickybar :focus-visible { outline-color: var(--accent); }

.shell { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--s5); }
@media (max-width: 40rem) { .shell { padding: 0 var(--s4); } }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .shell { display: flex; align-items: center; gap: var(--s5); min-height: 66px; }

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; flex: none; }

.brand .name { font-weight: 700; font-size: .98rem; letter-spacing: -0.028em; color: var(--brand-deep); line-height: 1.05; }
.brand .tag { display: block; font-weight: 500; font-size: .66rem; letter-spacing: .04em; color: var(--ink-3); margin-top: 1px; }

.site-nav { margin-left: auto; min-width: 0; }
.site-nav ul { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; font-size: .9rem; overflow-x: auto; scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a { display: block; padding: 6px 0; white-space: nowrap; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
@media (max-width: 56rem) {
  .site-head .shell { flex-wrap: wrap; gap: var(--s3); min-height: 0; padding-top: var(--s3); }
  .site-nav { margin-left: 0; width: 100%; }
  .site-nav ul { gap: var(--s4); padding-bottom: var(--s2); }
  .brand .tag { display: none; }
}

/* ---------- page head ---------- */

main { padding-bottom: var(--s9); }

.crumbs { font-size: .82rem; color: var(--ink-3); padding: var(--s5) 0 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* A 36ch measure forced four-line headlines while half a wide screen sat empty.
   Wider measure, slightly smaller ceiling, and a two-column hero above 62rem. */
.page-head { padding: var(--s4) 0 var(--s6); max-width: 46ch; }
.page-head.wide { max-width: 52ch; }
h1 { font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.5rem); line-height: 1.12; text-wrap: balance; }

.hero { display: grid; gap: var(--s5); align-items: center; margin-bottom: var(--s6); }
.hero .page-head { padding-bottom: 0; margin-bottom: 0; }
.hero__fig { min-width: 0; }
.hero__fig .fig { margin: 0; }
@media (min-width: 58rem) {
  .hero { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: var(--s6); }
}
@media (min-width: 72rem) {
  .hero { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--s8); }
}
.lede {
  font-family: var(--serif);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
  line-height: 1.6; color: var(--ink-2); margin: var(--s4) 0 0; max-width: 54ch;
}

/* ---------- the tool ---------- */

.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.tool__inputs { padding: var(--s5); }
@media (min-width: 48rem) { .tool__inputs { padding: var(--s6); } }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--s5); }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--s4); }

.f label { display: block; font-size: .82rem; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; }
.f__control { position: relative; display: flex; align-items: center; }
.f__control .unit { position: absolute; font-size: .95rem; color: var(--ink-3); pointer-events: none; }
.f__control .unit.pre { left: 12px; }
.f__control .unit.post { right: 12px; }
.f__control:focus-within .unit { color: var(--brand); }

.f input[type="number"], .f input[type="date"], .f select {
  width: 100%; font: inherit; font-size: 1.05rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.f input.has-pre { padding-left: 26px; }
.f input.has-post { padding-right: 34px; }
.f input:hover, .f select:hover { border-color: #A9BDCE; }
.f input:focus, .f select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); outline: none; }
.f input::-webkit-outer-spin-button, .f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f input[type="number"] { -moz-appearance: textfield; }

.f select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A7186' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.f__hint { font-size: .76rem; color: var(--ink-3); margin: 5px 0 0; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 6px 0 0; background: transparent; cursor: grab; }
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(var(--brand), var(--brand)) 0/var(--pct,50%) 100% no-repeat, var(--line);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brand); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(11,31,51,.25);
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 1px 3px rgba(11,31,51,.25); }

/* ---------- the answer, on navy ---------- */

.deep {
  background: var(--deep); color: var(--on-deep); padding: var(--s5);
  background-image: radial-gradient(120% 90% at 88% 0%, #14456E 0%, transparent 62%);
}
@media (min-width: 48rem) { .deep { padding: var(--s6); } }

.answer { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 52rem) { .answer { grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: var(--s7); } }

.answer__figure { font-size: clamp(2.6rem, 1.7rem + 3.6vw, 3.9rem); line-height: .95; letter-spacing: -0.04em; font-weight: 600; display: block; }
.answer__line { font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--on-deep-2); margin: var(--s3) 0 0; max-width: 32ch; }
.answer__line b { color: var(--on-deep); font-weight: 600; }
.answer__line .up { color: var(--chart-warm); font-weight: 600; }
.answer__line .down { color: var(--accent); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s4) var(--s5); margin: var(--s5) 0 0; padding: 0; }
.stats > div { border-top: 1px solid rgba(207,224,238,.22); padding-top: var(--s3); }
.stats dt { font-size: .76rem; color: var(--on-deep-2); margin: 0 0 3px; }
.stats dd { margin: 0; font-size: 1.22rem; font-weight: 600; letter-spacing: -0.02em; }
.stats .v-interest dd { color: var(--chart-warm); }
.stats .v-good dd { color: var(--accent); }

.chart { margin: 0; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart figcaption { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: .78rem; color: var(--on-deep-2); margin-top: var(--s3); }
.chart figcaption span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.chart .k-principal::before { background: var(--chart-blue); }
.chart .k-interest::before { background: var(--chart-warm); }
.chart .k-balance::before { background: var(--accent); border-radius: 50%; }

/* ---------- note ---------- */

.note { display: flex; gap: var(--s3); border-top: 1px solid var(--line); background: #F7FBF1; padding: var(--s4) var(--s5); font-size: .95rem; color: var(--ink); }
@media (min-width: 48rem) { .note { padding: var(--s4) var(--s6); } }
.note svg { flex: none; margin-top: 3px; color: var(--accent-ink); }
.note p { margin: 0; }
.note strong { font-weight: 600; }
.note--warn { background: #FDF4F1; }
.note--warn svg { color: var(--interest); }
.note:empty { display: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .92rem; font-weight: 500;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: #A9BDCE; }
.btn svg { flex: none; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.seg button { font: inherit; font-size: .86rem; font-weight: 500; padding: 7px 13px; border: 0; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }

/* ---------- schedule ---------- */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-top: var(--s6); overflow: hidden; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.panel__head h2 { font-size: 1.02rem; margin: 0; margin-right: auto; }
.panel__head .tools { display: flex; flex-wrap: wrap; gap: var(--s2); }

.tablewrap { max-height: 32rem; overflow: auto; overscroll-behavior: contain; }
table.ledger { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.ledger th, table.ledger td { padding: 9px var(--s4); text-align: right; white-space: nowrap; }
table.ledger th:first-child, table.ledger td:first-child { text-align: left; font-weight: 500; }
table.ledger thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--ink-3);
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  border-bottom: 1px solid var(--line-2); padding-top: 11px; padding-bottom: 11px;
}
table.ledger tbody td { border-bottom: 1px solid var(--line); }
table.ledger tbody tr:nth-child(even) { background: #FAFCFE; }
table.ledger tbody tr:hover { background: var(--brand-wash); }
table.ledger td.c-interest { color: var(--interest); }
table.ledger td.c-principal { color: var(--brand); }
table.ledger tfoot td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 600; border-top: 2px solid var(--ink); padding-top: 11px; padding-bottom: 11px; }
.tablefoot { padding: var(--s3) var(--s5); font-size: .8rem; color: var(--ink-3); border-top: 1px solid var(--line); }

/* ---------- reading column ---------- */

.split { display: grid; gap: var(--s7); margin-top: var(--s7); }
@media (min-width: 58rem) { .split { grid-template-columns: minmax(0,1fr) 16rem; gap: var(--s6); } }
@media (min-width: 72rem) { .split { grid-template-columns: minmax(0,1fr) 17rem; gap: var(--s8); } }

.prose { font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; max-width: var(--measure); color: #1B3247; }
.prose h2 { font-family: var(--sans); font-size: 1.32rem; letter-spacing: -0.022em; margin: var(--s7) 0 var(--s3); color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--sans); font-size: 1.05rem; margin: var(--s5) 0 var(--s2); color: var(--ink); }
.prose p { margin: 0 0 var(--s4); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--ink-3); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a, .lede a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.rail { font-size: .9rem; }
.rail h2 { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin: 0 0 var(--s3); }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li + li { border-top: 1px solid var(--line); }
.rail a { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; text-decoration: none; color: var(--ink); }
.rail a:hover { color: var(--brand); }
.rail a svg { flex: none; color: var(--brand); opacity: .8; }
@media (min-width: 58rem) { .rail { position: sticky; top: 88px; align-self: start; } }

/* ---------- faq ---------- */

.faq { margin-top: var(--s7); max-width: var(--measure); }
.faq h2 { font-size: 1.32rem; margin-bottom: var(--s4); }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s2); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s4); font-weight: 500; font-size: .99rem; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px,-2px); transition: transform .18s; }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px,-3px); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq p { font-family: var(--serif); margin: 0; padding: var(--s4); color: #1B3247; line-height: 1.65; }

/* ---------- tool directory ---------- */

.tools-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.tools-grid a { display: block; height: 100%; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); transition: border-color .14s, transform .14s; }
.tools-grid a:hover { border-color: var(--brand); transform: translateY(-2px); }
.tools-grid .ico { color: var(--brand); display: block; margin-bottom: var(--s3); }
.tools-grid .t { display: block; font-weight: 600; letter-spacing: -0.018em; margin-bottom: 4px; }
.tools-grid .d { display: block; font-size: .89rem; color: var(--ink-2); line-height: 1.5; }

.section-head { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin: var(--s8) 0 var(--s4); }
.section-head h2 { font-size: 1.45rem; }
.section-head p { margin: 0; color: var(--ink-3); font-size: .9rem; }

/* ---------- sticky answer bar ---------- */

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--deep); color: #fff;
  padding: 10px var(--s4) calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s4);
  transform: translateY(115%); transition: transform .2s ease;
  box-shadow: 0 -6px 24px rgba(11,31,51,.22);
}
.stickybar[data-show="true"] { transform: translateY(0); }
.stickybar .lbl { font-size: .74rem; color: var(--on-deep-2); display: block; }
.stickybar .val { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.stickybar .btn { margin-left: auto; background: transparent; border-color: rgba(207,224,238,.35); color: #fff; }
.stickybar .btn:hover { background: rgba(255,255,255,.1); }
@media (min-width: 62rem) { .stickybar { display: none; } }

/* ---------- ads ---------- */

.adslot { margin: var(--s7) 0; min-height: 280px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--ink-3); font-size: .78rem; background: var(--surface); }
.adslot[data-filled="true"] { border: 0; min-height: 0; background: none; }

/* ---------- footer ---------- */

.site-foot { background: var(--deep); color: var(--on-deep-2); margin-top: var(--s9); padding: var(--s8) 0 var(--s6); font-size: .9rem; }
.site-foot .cols { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.site-foot h2 { font-size: .78rem; font-weight: 600; color: #fff; margin: 0 0 var(--s3); letter-spacing: .02em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 7px; }
.site-foot a { color: var(--on-deep-2); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .fineprint { border-top: 1px solid rgba(207,224,238,.16); margin-top: var(--s6); padding-top: var(--s4); font-size: .82rem; line-height: 1.6; color: #A9C4DA; max-width: 64ch; }

/* ---------- print ---------- */

@media print {
  .site-head, .site-foot, .tool__inputs, .adslot, .crumbs, .faq,
  .stickybar, .rail, .panel__head .tools, .section-head, .tools-grid { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .deep { background: #fff !important; background-image: none !important; color: #000; padding: 0; }
  .deep .answer__line, .deep .stats dt { color: #333; }
  .stats dd, .answer__figure { color: #000; }
  .tool, .panel { border: 0; box-shadow: none; border-radius: 0; }
  .tablewrap { max-height: none; overflow: visible; }
  table.ledger thead th, table.ledger tfoot td { position: static; background: #eee; }
  .split { display: block; }
}

/* screen-reader-only, used for table captions and section labels */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Visualisations
   Charts live on the navy surface, so every colour here is the dark-surface set.
   ========================================================================== */

.chart { margin: 0; width: 100%; }
.viz { position: relative; }
.viz svg { display: block; overflow: hidden; touch-action: pan-y; }
.viz-t { font-size: 11px; fill: rgba(207,224,238,.8); font-variant-numeric: tabular-nums; }

.viz-legend {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  font-size: .78rem; color: var(--on-deep-2); margin-top: var(--s3);
}
.viz-legend .k::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 6px; vertical-align: -1px;
}
.viz-legend .k-principal::before { background: var(--chart-blue); }
.viz-legend .k-interest::before  { background: var(--chart-warm); }
.viz-legend .k-fees::before      { background: #fff; }
.viz-legend .k-balance::before   { background: var(--accent); border-radius: 50%; }
.viz-legend .k-ghost::before     { background: rgba(255,255,255,.45); height: 3px; border-radius: 0; }
.viz-legend .k-a::before         { background: var(--chart-warm); }
.viz-legend .k-b::before         { background: var(--accent); }

/* tooltip */
.viz-tip {
  position: absolute; top: 6px; pointer-events: none; z-index: 2;
  background: #06192B; border: 1px solid rgba(207,224,238,.28);
  border-radius: 10px; padding: 8px 10px; min-width: 8.5rem;
  font-size: .8rem; line-height: 1.45; color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.viz-tip b { display: block; font-size: .74rem; color: var(--on-deep-2); font-weight: 500; margin-bottom: 4px; }
.viz-tip i { display: flex; justify-content: space-between; gap: var(--s4); font-style: normal; }
.viz-tip em { font-style: normal; font-weight: 600; }
.viz-tip .c-warm { color: var(--chart-warm); }
.viz-tip .c-blue { color: var(--chart-blue); }
.viz-tip .c-acc  { color: var(--accent); }

/* composition bar */
.viz-split__bar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: rgba(207,224,238,.16);
}
.viz-split__bar span { display: block; height: 100%; }
.viz-split__bar span + span { box-shadow: inset 1px 0 0 rgba(11,43,71,.55); }
.viz-split__key { list-style: none; margin: var(--s4) 0 0; padding: 0; font-size: .86rem; }
.viz-split__key li {
  display: grid; grid-template-columns: 12px 1fr auto 2.6rem;
  gap: var(--s3); align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(207,224,238,.14);
}
.viz-split__key li:last-child { border-bottom: 0; }
.viz-split__key .sw { width: 10px; height: 10px; border-radius: 2px; }
.viz-split__key .nm { color: var(--on-deep-2); }
.viz-split__key .vl { font-weight: 600; }
.viz-split__key .pc { color: var(--on-deep-2); text-align: right; font-size: .8rem; }
.viz-split__cap { margin: var(--s3) 0 0; font-size: .8rem; color: var(--on-deep-2); }

/* ranked bars */
.viz-rank { list-style: none; margin: 0; padding: 0; }
.viz-rank li {
  display: grid; grid-template-columns: minmax(5.5rem, auto) minmax(0,1fr) auto;
  gap: var(--s3); align-items: center; padding: 9px 0;
}
.viz-rank li + li { border-top: 1px solid rgba(207,224,238,.14); }
.viz-rank .lb { font-size: .86rem; color: var(--on-deep-2); }
.viz-rank .lb em { font-style: normal; color: var(--accent); font-weight: 600; }
.viz-rank .br { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: rgba(207,224,238,.12); }
.viz-rank .br span { display: block; height: 100%; }
.viz-rank .tt { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.viz-rank .best .tt { color: var(--accent); }

@media print {
  .viz-tip { display: none !important; }
  .viz-t { fill: #444; }
  .viz-legend, .viz-split__key .nm, .viz-split__key .pc { color: #444; }
}

/* ============================================================================
   Brand lockup, articles, guides, affiliate picks, back-to-top
   ========================================================================== */

.brand img { display: block; height: 34px; width: auto; flex: none; }
.brand .name { font-weight: 700; font-size: .97rem; letter-spacing: -.032em; color: var(--brand-deep); line-height: 1.1; }
.brand .dot { color: var(--accent-ink); }
.brand .tag { display: block; font-weight: 500; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 48rem) {
  .brand .tag { display: none; }
}
@media (max-width: 30rem) {
  .brand .name { font-size: .86rem; }
  .brand img { height: 28px; }
}

.eyebrow { margin: 0 0 var(--s2); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow a { color: var(--brand); text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.byline { margin: var(--s4) 0 0; font-size: .85rem; color: var(--ink-3); }

/* figures */
.fig { margin: var(--s6) 0; max-width: 46rem; }
.fig img {
  display: block; width: 100%; height: auto;
  max-height: 400px; object-fit: contain; object-position: left;
  border-radius: var(--r-md); background: var(--deep);
}
.fig figcaption { font-size: .84rem; color: var(--ink-3); margin-top: var(--s3); line-height: 1.5; max-width: 60ch; }
.fig--wide { margin: 0 0 var(--s6); }
.prose .fig { margin-inline: 0; }

/* table of contents */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin: 0 0 var(--s6); font-family: var(--sans); }
.toc h2 { font-size: .76rem !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3) !important; border: 0; }
.toc ol { margin: 0; padding-left: 1.15rem; font-size: .93rem; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--brand); text-decoration: underline; }

.prose--article h2 { scroll-margin-top: 90px; padding-top: var(--s2); }
.prose--article h3 { scroll-margin-top: 90px; }

/* guide grid */
.guide-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.guide-grid a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .14s, transform .14s; }
.guide-grid a:hover { border-color: var(--brand); transform: translateY(-2px); }
.guide-grid img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; background: var(--deep); }
.guide-grid .t { display: block; font-weight: 600; font-size: 1.06rem; letter-spacing: -.02em; padding: var(--s4) var(--s4) 0; line-height: 1.3; }
.guide-grid .d { display: block; font-size: .88rem; color: var(--ink-2); line-height: 1.5; padding: var(--s2) var(--s4) 0; }
.guide-grid .m { display: block; font-size: .78rem; color: var(--ink-3); padding: var(--s3) var(--s4) var(--s4); }
.tools-grid--guides .t { font-size: 1rem; }

/* affiliate picks */
.picks { margin-top: var(--s7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.picks__head { padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--line); }
.picks__head h2 { font-size: 1.15rem; margin: 0 0 6px; }
.picks__head p { margin: 0; font-size: .82rem; color: var(--ink-3); }
.picks ul { list-style: none; margin: 0; padding: 0; }
.picks li + li { border-top: 1px solid var(--line); }
.picks a { display: block; padding: var(--s5); text-decoration: none; color: var(--ink); }
.picks a:hover { background: var(--surface-2); }
.picks .kind { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-wash); border-radius: 999px; padding: 3px 9px; margin-bottom: var(--s3); }
.picks .nm { display: block; font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: 6px; }
.picks .bl { display: block; font-family: var(--serif); font-size: .96rem; line-height: 1.6; color: #1B3247; max-width: 62ch; }
.picks .go { display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s3); font-size: .88rem; font-weight: 600; color: var(--brand); }
.picks a:hover .go { text-decoration: underline; }

/* footer brand block */
.site-foot .foot-brand { max-width: 22rem; }
.site-foot .foot-brand p { margin: var(--s3) 0 0; line-height: 1.6; }
.site-foot .fineprint + .fineprint { margin-top: var(--s3); padding-top: 0; border: 0; }

/* back to top */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 44;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--brand); cursor: pointer;
  box-shadow: 0 4px 16px rgba(11,31,51,.18);
  opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
}
.totop[hidden] { display: none; }
.totop[data-show="true"] { opacity: 1; transform: none; }
.totop:hover { border-color: var(--brand); background: var(--brand-wash); }
@media (max-width: 62rem) { .totop { bottom: 74px; } }

/* ============================================================================
   Responsive pass — small screens get first-class treatment, not leftovers
   ========================================================================== */

@media (max-width: 48rem) {
  body { font-size: 15.5px; }
  .grid, .grid--tight { grid-template-columns: 1fr; gap: var(--s4); }
  .answer__figure { font-size: clamp(2.2rem, 1.4rem + 5vw, 3rem); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
  .panel__head { flex-direction: column; align-items: stretch; }
  .panel__head .tools { justify-content: flex-start; }
  .panel__head .tools .btn { flex: 1 1 auto; justify-content: center; }
  .tablewrap { max-height: 24rem; }
  table.ledger { font-size: .82rem; }
  table.ledger th, table.ledger td { padding: 8px 10px; }
  .split { gap: var(--s6); }
  .prose { font-size: 1.02rem; }
  .picks a { padding: var(--s4); }
  .guide-grid { grid-template-columns: 1fr; }
  .site-foot .cols { gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
  main { padding-bottom: var(--s7); }
}

@media (max-width: 30rem) {
  .shell { padding: 0 14px; }
  .tool__inputs, .deep { padding: var(--s4); }
  .panel__head { padding: var(--s4); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats dd { font-size: 1.1rem; }
  .seg button { padding: 7px 10px; font-size: .82rem; }
  .btn { padding: 9px 11px; font-size: .86rem; }
  h1 { font-size: clamp(1.55rem, 1.1rem + 3.4vw, 2rem); }
  .fig figcaption { font-size: .8rem; }
  .toc { padding: var(--s4); }
}

/* Tables are the one thing that genuinely needs horizontal room on a phone. */
@media (max-width: 40rem) {
  .tablewrap { -webkit-overflow-scrolling: touch; }
  .tablewrap::after {
    content: "Scroll for more columns";
    display: block; padding: 8px var(--s4); font-size: .74rem;
    color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--line);
    position: sticky; left: 0;
  }
}

@media print {
  .totop, .picks, .toc, .fig { display: none !important; }
}

.foot-lockup { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
                max-width: 100%; margin-bottom: var(--s4); }
.site-foot .foot-lockup img { height: 44px; width: auto; flex: none; }
.foot-lockup span { min-width: 0; overflow-wrap: anywhere; }
.foot-lockup span { font-weight: 700; font-size: 1.02rem; letter-spacing: -.03em; color: #fff; }
.foot-lockup b { color: var(--accent); font-weight: 700; }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* ============================================================================
   Mobile pass
   Four measured failures, not guesses: tap targets under 44px, anchor links
   landing under a header whose height varies, illustration type rendering at
   4-6px on a phone, and hover states sticking after a tap.
   ========================================================================== */

/* 1. Header height is measured at runtime and published as --head-h, so every
      scroll offset follows it instead of assuming a desktop-sized header. */
:root { --head-h: 66px; }
.prose--article h2, .prose--article h3, .prose h2, .prose h3,
.faq h2, .panel, [id] { scroll-margin-top: calc(var(--head-h) + 16px); }
@media (min-width: 58rem) { .rail { top: calc(var(--head-h) + 22px); } }

/* 2. Hover effects only where a real pointer exists. On touch they latch on
      after a tap and the card stays lifted until you scroll away. */
@media (hover: none) {
  .tools-grid a:hover, .guide-grid a:hover { transform: none; border-color: var(--line); }
  .picks a:hover, table.ledger tbody tr:hover { background: transparent; }
  .btn:hover { background: var(--surface); border-color: var(--line-2); }
}
@media (hover: hover) {
  .tools-grid a:active, .guide-grid a:active { transform: translateY(0); }
}

/* 3. Touch targets. WCAG 2.5.8 asks for 24px; 44px is the practical minimum. */
@media (pointer: coarse) {
  .btn { min-height: 44px; padding-block: 11px; }
  .seg button { min-height: 44px; padding: 11px 16px; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; padding: 0; }
  .faq summary { min-height: 52px; }
  .picks a, .tools-grid a, .rail a, .guide-grid a { min-height: 48px; }
  .totop { width: 48px; height: 48px; }
  input[type="range"] { height: 32px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
}

/* 4. Wide graphics scroll rather than shrinking their labels into noise.
      Same convention as the schedule table, and used by every newspaper for
      charts that will not survive a 360px column. */
@media (max-width: 46rem) {
  .fig { max-width: none; overflow-x: auto; overscroll-behavior-x: contain;
         -webkit-overflow-scrolling: touch; }
  .fig img { min-width: 620px; max-height: none; }
  .fig figcaption { position: sticky; left: 0; max-width: 100%; }
  .fig figcaption::after {
    content: " (scroll to see the whole chart)"; color: var(--ink-3); font-style: italic;
  }
  .hero__fig .fig { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
}

/* The schedule's scroll hint belonged outside the scrolling box, or it scrolled
   away with the content it was describing. */
.tablewrap::after { content: none; }
@media (max-width: 40rem) {
  .tablefoot::before {
    content: "Swipe the table sideways for the remaining columns. ";
    color: var(--ink-2); font-weight: 500;
  }
}

/* Vertical rhythm: desktop spacing wastes a phone screen. */
@media (max-width: 48rem) {
  :root { --s7: 2.25rem; --s8: 2.75rem; --s9: 3.5rem; }
  .site-foot { padding: var(--s7) 0 var(--s5); }
  .hero { gap: var(--s4); margin-bottom: var(--s5); }
  .fig { margin: var(--s5) 0; }
}

/* Compact the sticky header so it costs less of a small screen. */
@media (max-width: 56rem) {
  .site-head .shell { padding-top: 10px; padding-bottom: 2px; gap: 8px; }
  .site-nav { position: relative; }
  .site-nav ul { gap: var(--s5); padding-bottom: 6px; }
  /* fade at the right edge, so it reads as scrollable rather than clipped */
  .site-nav::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 34px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
    pointer-events: none;
  }
}

/* Nothing may push the page sideways. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, table, pre { max-width: 100%; }
.viz svg, .fig img { height: auto; }

/* Notch and home-indicator safe areas. */
@supports (padding: max(0px)) {
  .shell { padding-left: max(var(--s5), env(safe-area-inset-left));
           padding-right: max(var(--s5), env(safe-area-inset-right)); }
  .totop { right: max(18px, env(safe-area-inset-right));
           bottom: max(74px, calc(env(safe-area-inset-bottom) + 74px)); }
}

/* Short landscape screens: the sticky bar and the back-to-top both compete for
   the bottom edge, and neither is worth a third of the viewport. */
@media (max-height: 26rem) and (orientation: landscape) {
  .site-head { position: static; }
  .stickybar { display: none; }
  .tablewrap { max-height: 15rem; }
  .adslot { min-height: 120px; }
}

@media print { .fig { overflow: visible; } .fig img { min-width: 0; } }

/* The sticky answer bar sits over the end of the page; give the content room to
   clear it, or the last row of the schedule is permanently hidden. */
@media (max-width: 62rem) {
  main { padding-bottom: calc(var(--s7) + 64px); }
}
/* overflow-x: clip is used above rather than hidden on purpose — hidden on an
   ancestor silently disables position: sticky, which the header and the table
   head both rely on. Browsers without clip support simply ignore the rule. */

/* content-visibility: auto was tried here and removed. Off-screen sections
   collapsed to their reserved contain-intrinsic-size, leaving a blank band in
   the middle of the page, and it interferes with in-page find. The paint saving
   did not justify either. */


/* ============================================================================
   Ad layout
   Positions chosen for viewability, which is what actually sets RPM: a unit
   nobody scrolls past earns nothing regardless of its CPM.
   ========================================================================== */

/* Sidebar. Sticky, so it stays in view for the whole scroll of a long page —
   consistently the highest-earning position on desktop. Hidden on mobile,
   where the rail stacks under the content and the unit would be buried. */
.adslot--rail { min-height: 600px; margin: var(--s5) 0 0; }
@media (max-width: 58rem) { .adslot--rail { display: none; } }
@media (min-width: 58rem) {
  .rail { max-height: calc(100vh - var(--head-h) - 3rem); overflow: visible; }
}

/* Directly under the result panel: the moment the visitor has their answer and
   pauses. High viewability without pushing the calculator itself down. */
.adslot--after-result { margin: var(--s6) 0 0; min-height: 280px; }

.adslot--in-article { margin: var(--s7) 0; }

/* Labelled, because unlabelled ads next to financial figures read as endorsement
   and AdSense policy expects a clear distinction from content. */


/* Auto Ads places an anchor unit fixed to the bottom of the viewport on mobile.
   Our answer bar and back-to-top button live there too, so all three stacked.
   The answer bar moves to the top of the viewport, under the header, which frees
   the bottom edge for the highest-earning mobile unit. */
@media (max-width: 62rem) {
  .stickybar {
    top: var(--head-h); bottom: auto;
    transform: translateY(-115%);
    box-shadow: 0 6px 22px rgba(11,31,51,.28);
    padding: 8px var(--s4);
  }
  .stickybar[data-show="true"] { transform: translateY(0); }
  .totop { bottom: max(104px, calc(env(safe-area-inset-bottom) + 104px)); }
  main { padding-bottom: calc(var(--s7) + 110px); }
}

@media print { .adslot { display: none !important; } }