/* ==========================================================================
   emergencyloaning.com — complete stylesheet
   --------------------------------------------------------------------------
   Class contract: CONTRACTS.md §4 (renderer <-> stylesheet).
   Brand palette sampled from emergencyloaning-logo.png (1024x1024 RGBA):
     mark navy             #0d355d   (disc / clock ticks)
     deep navy             #092542
     bolt amber            #f3a73d
     deep amber            #c47f1f
     wordmark ink          #06131d
     paper                 #f7f9fc
   Layout identity: navy bands (hero, mid-page CTA, footer) with amber rules and
   badges on a cool paper background. No imports, no external fonts, no
   JavaScript. System font stack only.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand — verified against sampled logo pixels */
  --green: #0d355d;        /* brand navy: mark disc #0d355d */
  --green-700: #092542;    /* deep navy: disc shadow */
  --brown: #f3a73d;        /* accent amber: bolt #f3a73d */
  --brown-900: #c47f1f;    /* deep amber */
  --cream: #f7f9fc;        /* page bg: cool paper */
  --ink: #06131d;          /* wordmark near-black (cool) */
  --money: #0f7a4d;        /* money/positive green */

  /* Derived — contrast-checked on --cream and #fff (AA >= 4.5:1) */
  --green-800: #08213a;    /* text links */
  --green-900: #051526;    /* focus ring */
  --green-050: #e8eef7;    /* navy tint (callout-green, tool-result) */
  --brown-050: #fdf1e0;    /* amber tint (callout-warn) */
  --ink-soft: #38424f;     /* secondary text */
  --muted: #5a6675;        /* meta/disclosure */
  --card: #ffffff;
  --line: #dde4ee;         /* hairlines */
  --line-strong: #c6d0de;  /* input borders */
  --on-navy: #d5e1ee;      /* secondary text on navy bands */
  --on-navy-soft: #b9c9dc; /* disclosure text on navy bands */

  /* 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: 1080px;
  --gutter: 1.25rem;
  --shadow: 0 1px 2px rgba(6, 19, 29, 0.05),
    0 14px 30px -20px rgba(6, 19, 29, 0.22);
  --shadow-lift: 0 2px 4px rgba(6, 19, 29, 0.06),
    0 18px 34px -18px rgba(6, 19, 29, 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(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

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(--green-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

strong {
  font-weight: 700;
}

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

::selection {
  background: #cde0f5;
  color: var(--ink);
}

/* Focus: near-black navy ring passes 3:1 against cream and amber */
:focus-visible {
  outline: 3px solid var(--green-900);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- 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(--cream);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

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

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

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

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: rgba(247, 249, 252, 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 0.75rem;
  padding-block: 0.6rem;
}

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

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

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

/* Header lockup = square brand mark + live text, so the long domain wordmark
   never has to shrink on small screens. */
.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.nav {
  order: 2;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 0.1rem;
}

.nav::-webkit-scrollbar {
  display: none;
}

.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(13, 53, 93, 0.08);
}

.nav-link.is-active {
  color: var(--green);
  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(--brown);
}

/* The persistent header CTA keeps a call-to-action on screen at every scroll
   position, on every page. */
.header-cta {
  order: 3;
  flex: 0 0 auto;
  white-space: nowrap;
}

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

.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(--green-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 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  margin: 0 calc(-1 * var(--gutter)) 1.75rem;
  padding: 1.5rem var(--gutter) 1.75rem;
  background: var(--green);
  border-top: 4px solid var(--brown);
  color: #eef4fb;
}

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

.hero-kicker {
  margin: 0 0 0.4rem;
  color: var(--brown);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero .page-title {
  margin: 0 0 0.55rem;
  color: #ffffff;
  text-wrap: balance;
}

.hero .lede {
  max-width: 58ch;
  margin: 0 0 0.25rem;
  color: var(--on-navy);
}

.hero .cta-block {
  margin: 1.1rem 0 0.25rem;
}

.hero .disclosure {
  max-width: 62ch;
  margin: 0.5rem 0 0;
  border-top-color: rgba(247, 249, 252, 0.22);
  color: var(--on-navy-soft);
}

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

/* Snapshot card in the hero's right column. */
.hero-aside {
  align-self: start;
  min-width: 0;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}

.aside-head {
  margin: 0 0 0.35rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brown);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fact-list {
  margin: 0;
}

.fact-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.fact-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.fact-list dt {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.fact-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
}

/* ------------------------------------------------------------------ chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 0.28rem 0.7rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hero .chip {
  background: rgba(247, 249, 252, 0.08);
  border-color: rgba(247, 249, 252, 0.32);
  color: #dbe6f2;
}

/* ------------------------------------------------------------- stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.9rem 1.05rem;
  background: var(--card);
}

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

.stat-label {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ steps */
.steps {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 0.95rem 1.1rem 0.95rem 3.3rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0.95rem;
  top: 0.95rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--brown);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin: 0 0 0.25rem;
  color: var(--green);
  font-size: 1rem;
}

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

/* -------------------------------------------------------- titles and lede */
.page-title {
  margin: 0.15rem 0 0.6rem;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 1.25rem;
}

.meta-line {
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin: 0.25rem 0 1.5rem;
}

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

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

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

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

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

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 100%;
  padding: 1rem 1.1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  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(--green);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

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

.tile:hover .tile-title {
  color: var(--brown-900);
}

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

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

.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: #eef2f9;
  color: var(--green);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

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

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

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

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

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

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

.callout-title {
  margin: 0 0 0.35rem;
  color: var(--green);
  font-weight: 700;
}

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

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

.callout-warn .callout-title {
  color: var(--ink);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 12px;
  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;
}

.btn-sm {
  min-height: 36px;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

/* Amber on ink: 9.4:1 — the brand bolt colour carries every primary action */
.btn-primary {
  background: var(--brown);
  color: var(--ink);
  border-color: var(--brown-900);
  box-shadow: 0 1px 2px rgba(6, 19, 29, 0.12);
}

.btn-primary:hover {
  background: var(--brown-900);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(196, 127, 31, 0.55);
}

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

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

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

/* Ghost buttons on navy bands flip to light. */
.hero .btn-ghost,
.cta-band .btn-ghost {
  color: var(--cream);
  border-color: rgba(247, 249, 252, 0.45);
}

.hero .btn-ghost:hover,
.cta-band .btn-ghost:hover {
  background: rgba(247, 249, 252, 0.1);
  border-color: var(--brown);
  color: #fff;
}

.disclosure {
  max-width: 74ch;
  margin: 0.9rem 0 1.5rem;
  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(--green-800);
}

/* --------------------------------------------------------------- cta band */
.cta-band {
  margin: 2rem calc(-1 * var(--gutter));
  padding: 1.5rem var(--gutter) 1.75rem;
  background: var(--green-700);
  border-top: 4px solid var(--brown);
  color: #e6eef8;
}

.cta-band h2 {
  margin: 0 0 0.4rem;
  color: #ffffff;
}

.cta-band-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--on-navy);
}

.cta-band .cta-block {
  margin-top: 1.1rem;
}

.cta-band .disclosure {
  margin-bottom: 0;
  border-top-color: rgba(247, 249, 252, 0.22);
  color: var(--on-navy-soft);
}

.cta-band .disclosure a {
  color: var(--brown);
}

/* -------------------------------------------------------------------- FAQ */
.faq {
  padding-bottom: 0.6rem;
}

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

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

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

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

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--brown-900);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

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

.faq-item[open] summary::after {
  content: "\2013";
}

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

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

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

/* ------------------------------------------------------------------ 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(--green-800);
  text-decoration: underline;
  text-decoration-color: rgba(13, 53, 93, 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: #eef2f9;
  color: var(--green);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- tool */
.tool {
  padding: 1.35rem;
}

.tool-form {
  display: grid;
  gap: 1rem;
  margin: 0;
}

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

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

.field input,
.field select {
  width: 100%;
  padding: 0.65rem 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: #c3cfe0;
}

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

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

.tool-form .btn {
  justify-self: start;
}

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

.tool-primary {
  margin: 0 0 0.35rem;
  color: var(--green-900);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

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

.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;
}

/* -------------------------------------------------------------- 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(--green-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(--green-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;
}

/* ------------------------------------------------------------------ pager */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 2rem 0 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);
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.pager a:hover {
  border-color: var(--green);
  color: var(--green-800);
  background: #fff;
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  margin-top: 3.5rem;
  background: var(--green-700);
  color: var(--cream);
}

.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(--cream);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

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

.footer-head {
  margin: 0 0 0.65rem;
  color: var(--brown);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

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

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

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

.footer-legal {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 249, 252, 0.18);
  color: #cbd5e3;
  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(--cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------- small screens */
@media (max-width: 639px) {
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

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

  /* Key/value results 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;
  }

  /* Wide comparison tables inside guide prose scroll inside their own box
     instead of pushing the document sideways. */
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .prose,
  .faq-answer {
    overflow-wrap: break-word;
  }

  /* Compact hero type keeps the primary CTA above the fold on a 375px
     screen even when a guide intro runs long. */
  .hero {
    padding-top: 1.15rem;
  }

  .hero .page-title {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem);
  }

  .hero .lede {
    font-size: 1rem;
    line-height: 1.55;
  }

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

  .breadcrumbs {
    margin-bottom: 0.7rem;
  }
}

/* Below the desktop breakpoint the brand takes its own row and the scrollable
   nav shares the second row with the CTA, so the header never wraps to three
   rows at 375px and the button stays on screen. */
@media (max-width: 719px) {
  /* Brand and the persistent CTA share row 1; the five nav links wrap onto the
     rows below, so the whole header stays short and the hero stays high. */
  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .brand-name {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Order: brand + CTA on row 1, then the five primary links wrap onto the rows
     below. All links stay visible (no horizontal scroll) and the header stays
     short so the hero — and its CTA — stay above the fold. */
  .header-cta {
    order: 2;
  }

  .nav {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.1rem 0.05rem;
  }

  .nav-link {
    padding: 0.45rem 0.6rem;
    font-size: 0.875rem;
  }

  .header-cta {
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
  }
}

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }

  main#main {
    padding-block: 1.75rem 4rem;
  }

  .card {
    padding: 1.75rem;
  }

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

  .city-list {
    columns: 2;
  }

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

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

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

@media (min-width: 720px) {
  .brand-logo {
    height: 40px;
  }

  .nav {
    order: 2;
    flex: 0 1 auto;
    overflow: visible;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0.4rem;
  }
}

@media (min-width: 860px) {
  /* Asymmetric hero: copy column + snapshot card. */
  .hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.95fr);
    gap: 2.25rem;
    padding-top: 2rem;
    padding-bottom: 2.25rem;
  }

  .cta-band {
    padding-top: 1.75rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 900px) {
  .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;
  }
}