/* ==========================================================================
   autoloanable.com — stylesheet
   --------------------------------------------------------------------------
   Markup contract (worker/src/layout.js + worker/src/pages.js):

     body.site
       a.skip
       header.site-header > .wrap.header-inner > a.brand + nav.nav
       main#main
         .wrap > nav.breadcrumbs                     (optional)
         section.hero > .hero-inner.wrap
           .hero-kicker / h1.page-title / .lede / .meta-line
           .cta-block (.btn.btn-primary, .btn.btn-ghost, .cta-note, .disclosure)
           .stat-strip > .stat > .stat-value + .stat-label
         .wrap.page-grid > .page-main + aside.page-rail > .rail-card*
       footer.site-footer > .wrap > .footer-cols + .footer-legal

   No imports, no external fonts, no JavaScript. System font stack only.

   --------------------------------------------------------------------------
   COMPUTED CONTRAST RATIOS (WCAG 2.1, relative-luminance method)
   --------------------------------------------------------------------------
   Body text — --ink #0b1b33
     on --paper #f5f7fa .......... 16.05:1  (AAA)
     on #ffffff .................. 17.23:1  (AAA)

   Secondary text — --ink-soft #3c4c63
     on --paper ..................  8.13:1  (AAA)
     on #ffffff ..................  8.73:1  (AAA)

   Muted text — --muted #5a6b80
     on --paper ..................  5.08:1  (AA)
     on #ffffff ..................  5.46:1  (AA)

   Links — --teal-800 #0a6b58
     on --paper ..................  6.01:1  (AA)
     on #ffffff ..................  6.45:1  (AAA)
     on --teal-050 #e6faf5 .......  5.94:1  (AA — links inside .callout-teal)
     on --navy-050 #edf2f9 .......  5.73:1  (AA — links inside .callout-warn)

   Focus ring — --teal-900 #074f41
     on --paper ..................  8.88:1  (AAA, > 3:1 non-text)
     on #ffffff ..................  9.53:1  (AAA)
     On the navy band and footer the ring switches to --teal-300 #7fe0c8
     on --navy-900 #04254f .......  9.69:1  (AAA)

   Large / display values — --money / --teal-700 #0e9c80
     on --paper ..................  3.22:1  (AA Large >= 24px or >= 18.66px bold)
     on #ffffff ..................  3.45:1  (AA Large)
     on --teal-050 ...............  3.18:1  (AA Large — .tool-primary)
     Reserved for large result values and the wordmark accent. Body-size
     links always use --teal-800.

   Primary button (card / rail) — #ffffff on --navy #05316b ... 12.67:1 (AAA)
     hover #ffffff on --navy-900 #04254f .................... 15.19:1 (AAA)

   Hero band (on --navy-900 #04254f, the dark end of the gradient)
     #ffffff .............................. 15.19:1  (AAA)
     .lede / .stat-label #c9d6e8 .......... 10.32:1  (AAA)
     .meta-line / .disclosure #a8bcd6 .....  7.83:1  (AAA)
     .hero-kicker --teal #12c29f ..........  6.68:1  (AA)
     .disclosure links --teal-300 .........  9.69:1  (AAA)
     Hero primary button — --navy-900 on --teal #12c29f ... 6.68:1  (AA)
       hover --navy-900 on --teal-600 #0da98d ............ 5.12:1  (AA)
     The teal glow is confined to the right edge of the band; small text
     sits over the navy-900 / navy-800 field. At the worst on-canvas blend
     (~20% teal) the small-text pairs still pass: --hero-lede 7.13:1,
     --hero-soft 5.41:1.

   Footer on --navy-900 #04254f
     --paper #f5f7fa ...................... 14.15:1  (AAA)
     #cfdaea (.footer-note) ............... 10.75:1  (AAA)
     #a8bcd6 (.footer-legal) ..............  7.83:1  (AAA)
     --teal-300 #7fe0c8 (.footer-head) ....  9.69:1  (AAA)

   Wordmark accent — --teal-700 on --paper ... 3.22:1 (AA Large / logo mark)
     The accent is always set in the 800-weight wordmark (>= 18.66px bold).
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand — sampled from the autoloanable logo */
  --navy: #05316b;          /* primary: headings, primary button, hero band */
  --navy-900: #04254f;      /* deep navy: footer, button hover */
  --navy-800: #03203f;      /* deepest navy: hero gradient tail */
  --teal: #12c29f;          /* accent: arrow, active nav underline, steps */
  --teal-700: #0e9c80;      /* deep teal: large values, wordmark accent */
  --teal-800: #0a6b58;      /* body-size links (AA on light surfaces) */
  --teal-900: #074f41;      /* focus ring on light surfaces */
  --teal-050: #e6faf5;      /* teal tint: callouts, tool result */
  --paper: #f5f7fa;         /* page background */
  --ink: #0b1b33;           /* body text */
  --card: #ffffff;
  --line: #e2e7ee;          /* hairlines */
  --line-strong: #cbd4e0;   /* input + ghost-button borders */
  --ink-soft: #3c4c63;      /* secondary text */
  --muted: #5a6b80;         /* meta / disclosure text */
  --money: #0e9c80;         /* result values */

  /* Derived — contrast-checked in the block above */
  --teal-600: #0da98d;      /* hero primary hover: navy-900 text 5.12:1 */
  --teal-300: #7fe0c8;      /* light teal on navy: footer heads, hero links */
  --teal-100: #cdeee6;      /* teal border tint: tool-result, faq marker */
  --navy-050: #edf2f9;      /* navy tint: table heads, callout-warn */
  --hero-lede: #c9d6e8;     /* hero lede + stat labels on navy */
  --hero-soft: #a8bcd6;     /* hero meta + disclosure on navy */
  --line-hover: #a9b8c9;    /* input border hover */

  /* Type & space */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    monospace;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --wrap: 1180px;
  --shadow: 0 1px 2px rgba(5, 49, 107, 0.05),
    0 14px 30px -20px rgba(5, 49, 107, 0.22);
  --shadow-lift: 0 2px 4px rgba(5, 49, 107, 0.06),
    0 18px 34px -18px rgba(5, 49, 107, 0.26);
}

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

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

/* ------------------------------------------------------------ body / base */
body.site {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main#main {
  flex: 1 0 auto;
  scroll-margin-top: 5rem;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 1.6em 0 0.5em;
  color: var(--navy-900);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

h3 {
  font-size: 1.0625rem;
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0 0 1rem;
}

a {
  color: var(--teal-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--teal-900);
}

strong {
  font-weight: 700;
}

small {
  font-size: 0.8125rem;
  color: var(--muted);
}

::selection {
  background: var(--teal-100);
  color: var(--ink);
}

/* Light surfaces use the deep teal ring; navy surfaces switch to light teal. */
:focus-visible {
  outline: 3px solid var(--teal-900);
  outline-offset: 2px;
}

.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--teal-300);
}

/* --------------------------------------------------------------- skip link */
.skip {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  transform: translateY(-250%);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip:focus {
  transform: none;
  color: var(--paper);
}

/* ------------------------------------------------------------------- wrap */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ----------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: rgba(245, 247, 250, 0.92);
    backdrop-filter: blur(8px) saturate(1.2);
  }
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.25rem;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.15rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 44px;
  width: auto;
  transition: transform 0.18s ease;
}

.brand:hover .brand-logo {
  transform: translateY(-1px);
}

/* Live-text wordmark: navy stem, teal accent, crisp at any size. */
.brand-name {
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--navy);
  white-space: nowrap;
}

.brand-name-accent {
  color: var(--teal-700);
}

/* Mobile: nav drops to its own full-width row and wraps — never overflows. */
.nav {
  flex: 1 1 100%;
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  padding-block: 0.1rem;
}

.nav-link {
  position: relative;
  flex: 0 0 auto;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover {
  color: var(--ink);
  background: rgba(18, 194, 159, 0.14);
}

.nav-link.is-active {
  color: var(--navy-900);
  font-weight: 700;
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
}

/* ------------------------------------------------------------ breadcrumbs */
.breadcrumbs {
  margin: 1rem 0 0.85rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--line-strong);
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--teal-800);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22ch;
}

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--navy-900);
  background-image:
    radial-gradient(
      52rem 26rem at 104% -14%,
      rgba(18, 194, 159, 0.32) 0%,
      rgba(18, 194, 159, 0.05) 42%,
      rgba(18, 194, 159, 0) 66%
    ),
    linear-gradient(112deg, var(--navy-900) 0%, var(--navy-800) 52%, var(--navy) 100%);
  color: #fff;
}

/* Faint diagonal teal sheen across the band. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    rgba(18, 194, 159, 0) 54%,
    rgba(18, 194, 159, 0.1) 70%,
    rgba(18, 194, 159, 0) 86%
  );
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: 1.6rem 1.25rem;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.55rem;
  color: var(--teal);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

.hero .page-title {
  margin: 0 0 0.6rem;
  color: #fff;
  font-size: clamp(1.5rem, 1.15rem + 2.2vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 22ch;
}

.hero .lede {
  margin: 0 0 0.35rem;
  color: var(--hero-lede);
  font-size: clamp(0.9375rem, 0.9rem + 0.35vw, 1.1875rem);
  line-height: 1.5;
  max-width: 62ch;
}

.hero .meta-line {
  margin: 0.35rem 0 0;
  color: var(--hero-soft);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

.hero .meta-line strong {
  color: var(--hero-lede);
  font-weight: 600;
}

.hero .cta-block {
  margin-top: 1.6rem;
}

.hero .cta-note {
  color: var(--hero-lede);
}

.hero .disclosure {
  color: var(--hero-soft);
  border-top-color: rgba(255, 255, 255, 0.2);
}

.hero .disclosure a {
  color: var(--teal-300);
}

/* ---------------------------------------------------------- CTA + buttons */
.cta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease,
    border-color 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}

/* Default primary (inside .card / .page-rail): white on navy 12.67:1 */
.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 1px 2px rgba(5, 49, 107, 0.18);
}

.btn-primary:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(5, 49, 107, 0.6);
}

.btn-primary:active {
  transform: translateY(0);
}

/* On the navy band the primary flips to bright teal with navy text. */
.hero .btn-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--navy-900);
  box-shadow: 0 10px 24px -12px rgba(18, 194, 159, 0.9);
}

.hero .btn-primary:hover {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: var(--navy-900);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--navy-900);
}

.btn-ghost:hover {
  background: #fff;
  border-color: var(--teal-700);
  color: var(--teal-800);
  transform: translateY(-1px);
}

.hero .btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

/* Rate-qualification note shown directly under every CTA. */
.cta-note {
  max-width: 74ch;
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy-900);
}

.disclosure {
  max-width: 74ch;
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line-strong);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}

.disclosure a {
  color: var(--teal-800);
}

/* ------------------------------------------------------------- stat strip */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem 0;
  margin: 1.15rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 140px;
  min-width: 0;
  padding: 0 1.15rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat:last-child {
  padding-right: 0;
}

.stat-value {
  color: #fff;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

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

.stat-value a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stat-label {
  color: var(--hero-lede);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------- page grid + sticky rail */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-block: 2rem 3.5rem;
}

.page-main {
  min-width: 0;
}

/* Pages without a rail render a single .wrap.page-main under main. */
main > .wrap.page-main {
  padding-block: 2rem 3.5rem;
}

.page-rail {
  min-width: 0;
  display: grid;
  gap: 1rem;
  align-content: start;
  align-self: start;
}

.rail-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.rail-cta {
  border-top: 3px solid var(--teal);
}

.rail-title {
  margin: 0 0 0.5rem;
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rail-body {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.rail-links {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.rail-links li {
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--line);
}

.rail-links li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rail-links a {
  color: var(--teal-800);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.rail-links a:hover {
  text-decoration: underline;
}

/* CTA inside the narrow rail stacks full-width. */
.rail-card .cta-block {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

.rail-card .btn {
  width: 100%;
}

.rail-card .cta-note {
  margin-top: 0.75rem;
}

.rail-card .disclosure {
  margin: 0.75rem 0 0;
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 0;
}

.card > :first-child {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.card-accent {
  border-top: 3px solid var(--teal-700);
  background-image: linear-gradient(180deg, var(--teal-050) 0%, var(--card) 46%);
}

/* Full-width cards with a 22px vertical rhythm inside the main column. */
.page-main > * + * {
  margin-top: 22px;
}

/* ------------------------------------------------------------------ grids */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 100%;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease,
    box-shadow 0.16s ease, background-color 0.16s ease;
}

.tile:hover {
  background: #fff;
  border-color: var(--line-strong);
  border-left-color: var(--teal);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.tile-title {
  color: var(--navy-900);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: capitalize;
}

.tile:hover .tile-title {
  color: var(--teal-800);
}

.tile-note {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ----------------------------------------------------------------- tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.data-table thead th {
  background: var(--navy-050);
  color: var(--navy-900);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table a {
  color: var(--teal-800);
}

.data-table small {
  display: inline-block;
  margin-top: 0.15rem;
  line-height: 1.45;
}

/* Comparison table: tinted row headers, zebra rows, uppercase caption. */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
}

.compare-table caption {
  text-align: left;
  padding: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.compare-table thead th {
  background: var(--navy-050);
  color: var(--navy-900);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
}

.compare-table tbody tr:nth-child(even) {
  background: var(--paper);
}

.compare-table tbody th[scope="row"] {
  background: var(--navy-050);
  color: var(--navy-900);
  font-weight: 700;
  border-right: 1px solid var(--line);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Mobile: wrapper-free horizontal scroll for every data table. */
.data-table,
.compare-table,
.prose table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table th,
.data-table td,
.compare-table th,
.compare-table td,
.prose th,
.prose td {
  white-space: nowrap;
}

/* Key/value result tables must wrap, not scroll. */
.tool-result .data-table {
  display: table;
  overflow: visible;
  white-space: normal;
}

.tool-result .data-table th,
.tool-result .data-table td {
  white-space: normal;
}

.tool-result .data-table th {
  width: 55%;
  font-weight: 600;
}

/* ------------------------------------------------------------ step list */
.step-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.step {
  position: relative;
  display: flex;
  gap: 0.9rem;
  padding: 0 0 1.35rem;
}

.step:last-child {
  padding-bottom: 0;
}

/* Thin connector line between the numbered badges. */
.step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--line-strong), var(--line));
}

.step:last-child::before {
  display: none;
}

.step-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy-900);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
}

.step-body {
  min-width: 0;
  padding-top: 0.25rem;
}

.step-body strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--navy-900);
}

.step-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------- callouts */
.callout {
  max-width: 78ch;
  margin: 0;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-sm);
  background: #fff;
}

.callout > :first-child {
  margin-top: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-teal {
  background: var(--teal-050);
  border-left-color: var(--teal-700);
}

.callout-warn {
  background: var(--navy-050);
  border-left-color: var(--navy);
}

.callout-warn strong {
  color: var(--navy-900);
}

/* -------------------------------------------------------------- link list */
.link-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.link-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.link-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0.1rem;
}

.link-list a {
  color: var(--teal-800);
  font-weight: 600;
  text-decoration: none;
}

.link-list a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------- city list */
.city-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  columns: 1;
  column-gap: 2rem;
}

.city-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  break-inside: avoid;
}

.city-list a {
  color: var(--teal-800);
  text-decoration: none;
}

.city-list a:hover {
  text-decoration: underline;
}

.city-pop {
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ prose */
.prose > h2,
.prose > h3 {
  margin-top: 1.75em;
}

.prose > h2:first-child,
.prose > h3:first-child {
  margin-top: 0;
}

.prose p,
.prose li,
.prose h2,
.prose h3,
.prose blockquote {
  max-width: 68ch;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose a {
  color: var(--teal-800);
  text-decoration: underline;
  text-decoration-color: rgba(10, 107, 88, 0.4);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 1.25rem 0;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
}

.prose thead th {
  background: var(--navy-050);
  color: var(--navy-900);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------- FAQ */
.faq h2 {
  margin-bottom: 0.35rem;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:last-of-type {
  border-bottom: 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  color: var(--navy-900);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--teal-900);
}

/* Custom plus / minus marker — no native disclosure triangle. */
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-800);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.15s ease;
}

.faq-item[open] summary {
  color: var(--teal-900);
}

.faq-item[open] summary::after {
  content: "\2212";
  background: var(--teal-100);
}

.faq-answer {
  max-width: 72ch;
  padding: 0 0 1.1rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.faq-answer > :first-child {
  margin-top: 0;
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- tool */
.tool-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  color: var(--navy-900);
  font-size: 0.9375rem;
  font-weight: 600;
}

.field input,
.field select {
  width: 100%;
  padding: 0.68rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.field input:hover,
.field select:hover {
  border-color: var(--line-hover);
}

.field input:focus,
.field select:focus {
  border-color: var(--teal-700);
}

.field input::placeholder {
  color: var(--muted);
}

.tool-form .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.tool-result {
  margin-top: 1.35rem;
  padding: 1.15rem 1.25rem;
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius);
}

.tool-primary {
  margin: 0 0 0.35rem;
  color: var(--money);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
}

.tool-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.tool-result .tool-note + .tool-primary {
  margin-top: 0.5rem;
}

.tool-result .data-table {
  margin-top: 0.6rem;
}

/* ------------------------------------------------------------------ pager */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.pager a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--navy-900);
  font-weight: 600;
  text-decoration: none;
}

.pager a:hover {
  border-color: var(--teal-700);
  color: var(--teal-800);
  background: #fff;
  box-shadow: var(--shadow);
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  margin-top: 3.5rem;
  background: var(--navy-900);
  color: var(--paper);
}

.site-footer .wrap {
  padding-block: 2.5rem 1.5rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.footer-brand {
  margin: 0 0 0.5rem;
  color: var(--paper);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.footer-note {
  max-width: 38ch;
  margin: 0;
  color: #cfdaea;
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer-head {
  margin: 0 0 0.65rem;
  color: var(--teal-300);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--paper);
  font-size: 0.9375rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--teal-300);
  text-decoration: underline;
}

.footer-legal {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 247, 250, 0.18);
  color: #a8bcd6;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.footer-legal p {
  max-width: 92ch;
  margin: 0 0 0.6rem;
}

.footer-legal p:last-child {
  margin-bottom: 0;
}

.footer-legal a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal a:hover {
  color: var(--teal-300);
}

/* ============================================================ breakpoints */

/* 760px — type scale steps up, nav joins the brand row, grids go 2-up. */
@media (min-width: 760px) {
  .wrap {
    padding-inline: 1.5rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  .lede {
    font-size: 1.1875rem;
  }

  .card {
    padding: 28px;
  }

  .brand-logo {
    height: 50px;
  }

  .brand-name {
    font-size: 1.25rem;
  }

  .nav {
    flex: 0 1 auto;
    order: 1;
    justify-content: flex-end;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-inner {
    padding-block: 3rem 2rem;
  }

  .hero .page-title {
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
  }

  /* Tables return to real table layout once there is room. */
  .data-table,
  .compare-table,
  .prose table {
    display: table;
    overflow: visible;
  }

  .data-table th,
  .data-table td,
  .compare-table th,
  .compare-table td,
  .prose th,
  .prose td {
    white-space: normal;
  }

  .tool-result .data-table th {
    width: auto;
  }

  .city-list {
    columns: 2;
  }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1000px — two-column page grid with the sticky CTA rail. */
@media (min-width: 1000px) {
  .page-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
  }

  .page-rail {
    position: sticky;
    top: 88px;
  }

  .hero {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .hero-inner {
    padding-block: 3.5rem 2.25rem;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .city-list {
    columns: 3;
  }

  .footer-cols {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .tool-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tile:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .brand:hover .brand-logo {
    transform: none;
  }
}

/* ==========================================================================
   POLISH LAYER
   --------------------------------------------------------------------------
   Additions on top of the structural rules above: anchor offsets, long-word
   safety, stat-tile alignment, rail ergonomics, table overflow, focus
   consistency and print output. Nothing here changes the class contract.
   ========================================================================== */

/* --- in-page anchors clear the sticky header ----------------------------- */
:target,
h2[id],
h3[id] {
  scroll-margin-top: 5.5rem;
}

/* --- long place names and URLs must never break the grid ----------------- */
.page-title,
.tile-title,
.city-list a,
.rail-links a,
.breadcrumbs li,
.card h2,
.prose h2,
.prose h3 {
  overflow-wrap: anywhere;
}

/* --- stat tiles stay visually even when a value wraps ------------------- */
.stat-value {
  text-wrap: balance;
}
.stat {
  min-height: 3.4rem;
}
@media (max-width: 759px) {
  .stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .stat:nth-child(even) {
    padding-right: 0;
  }
}

/* --- rail ergonomics: full-width stacked buttons, tighter fine print ----- */
.rail-card .cta-block {
  flex-direction: column;
  align-items: stretch;
}
.rail-card .btn {
  width: 100%;
  text-align: center;
}
.rail-card .cta-note,
.rail-card .disclosure {
  font-size: 0.72rem;
  line-height: 1.45;
}
.rail-links a {
  display: inline-block;
  padding-block: 0.15rem;
}

/* --- prose measure and vertical rhythm ---------------------------------- */
.prose p,
.prose li,
.prose blockquote {
  max-width: 68ch;
}
.prose > h2,
.prose > h3 {
  text-wrap: balance;
}
.prose h2 {
  margin-top: 1.9rem;
}

/* --- wide tables scroll instead of squashing on phones ------------------ */
@media (max-width: 759px) {
  .data-table,
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- city index readability -------------------------------------------- */
.city-list {
  column-gap: 2rem;
}
.city-list li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
}

/* --- FAQ affordance ----------------------------------------------------- */
.faq-item summary {
  cursor: pointer;
}
.faq-item[open] summary {
  color: var(--navy);
}

/* --- consistent keyboard focus ----------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--teal-900);
  outline-offset: 2px;
  border-radius: 4px;
}
.hero a:focus-visible,
.hero button:focus-visible,
.hero summary:focus-visible {
  outline-color: var(--teal);
}

/* --- print: drop the funnel chrome, keep the substance ------------------ */
@media print {
  .site-header,
  .page-rail,
  .cta-block,
  .cta-note,
  .disclosure,
  .skip,
  .site-footer {
    display: none !important;
  }
  .hero {
    background: none !important;
    border-radius: 0;
  }
  .hero .page-title,
  .hero .lede,
  .hero .meta-line,
  .hero .meta-line strong,
  .stat-value,
  .stat-label {
    color: #000 !important;
  }
  .page-grid {
    display: block;
  }
  .card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }
}