/* ============================================================
   Company Map UK — marketing site design system ("Paper Survey")
   Shared by index.html, faq.html and future marketing pages.
   Palette matches the platform map theme: navy data, orange accent,
   warm paper surfaces. Fonts: Archivo + IBM Plex Mono.
   ============================================================ */

:root {
  /* Brand */
  --navy: #24507c;
  --ink: #1e3a5c;
  --orange: #ee6a41;
  --orange-dark: #e8562e;

  /* Surfaces */
  --paper: #f8f7f4;
  --paper-warm: #f4f2ec;
  --card: #fefdfb;
  --tint: #f1efe8;

  /* Lines */
  --line: #e0ded7;
  --line-soft: #ebe8e0;
  --steel: #cfd6dd;

  /* Text */
  --slate: #5b7390;
  --slate-light: #97a3b0;

  /* Footer text on navy */
  --navy-text: #d8e2ec;
  --navy-text-dim: #b3c6da;
  --navy-text-faint: #8fa9c2;

  --font-sans: 'Archivo', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 8px;
  --radius-sm: 4px;
  --shadow-card: 0 12px 40px rgba(36, 80, 124, 0.14);
  --shadow-soft: 0 6px 20px rgba(36, 80, 124, 0.08);
  --content-max: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Mono micro-label (eyebrows, column heads, small annotations) */
.mono-label {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--slate-light);
}

.mono-label--accent { color: var(--orange); }
.mono-label--navy { color: var(--navy); }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border: none;
  border-radius: var(--radius-sm);
  font: 600 14.5px var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s;
}

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--ink); }

.btn--accent { background: var(--orange); color: #fff; }
.btn--accent:hover { background: var(--orange-dark); }

.btn--ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--steel);
}
.btn--ghost:hover { border-color: var(--navy); }

/* ============ Navigation ============ */
.site-nav {
  background: var(--navy);
  color: var(--paper);
}

.site-nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.brand__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand__mark::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy-text);
}

.site-nav__links a:hover { color: #fff; }

.site-nav__links .btn { padding: 9px 18px; font-size: 13.5px; }

.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* ============ Hero ============ */
.hero {
  position: relative;
  height: 620px;
  background: var(--tint);
  overflow: hidden;
}

.hero__map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 45%;
  position: absolute;
  inset: 0;
}

.hero__card {
  position: absolute;
  top: 44px;
  left: max(24px, calc((100vw - var(--content-max)) / 2 + 24px));
  width: 460px;
  max-width: calc(100vw - 48px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 34px 30px;
  box-shadow: var(--shadow-card);
}

.hero__card .eyebrow { margin-bottom: 14px; }

.hero__card h1 {
  margin: 0 0 14px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.hero__card p {
  margin: 0 0 22px;
  font-size: 15.5px;
  color: var(--slate);
  text-wrap: pretty;
}

.hero__ctas { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }

.hero__stats {
  display: flex;
  gap: 20px;
  font: 400 12px var(--font-mono);
  color: var(--slate);
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

.hero__stats strong { color: var(--ink); }

.hero__badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font: 400 11px var(--font-mono);
  color: var(--slate);
  background: rgba(254, 253, 251, 0.92);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.eyebrow {
  display: block;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--orange);
}

/* ============ Sections ============ */
.section { padding: 56px 0; }
.section--flush-top { padding-top: 0; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.section__head h2,
.section h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ============ How it works (3 steps) ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.step { padding: 28px; }
.step + .step { border-left: 1px solid var(--line-soft); }

.step__num {
  font: 700 22px var(--font-mono);
  color: var(--orange);
  margin-bottom: 10px;
}

.step h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; }
.step p { margin: 0; font-size: 14px; color: var(--slate); }

.step__mini {
  height: 140px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
  background: #fff;
}

/* step 1 — real platform screenshot (filters open, categories ticked) */
.step__mini--shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.step__mini .map-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font: 500 10px var(--font-mono);
  color: var(--slate);
  background: rgba(254, 253, 251, 0.92);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 3px;
}

/* step 2 — filter checklist art */
.step__mini--filter {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--slate-light);
  min-width: 0;
}

.filter-row--on { color: var(--ink); }

.filter-row .name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-row--on .name { font-weight: 600; }

.filter-row .count {
  margin-left: auto;
  font: 400 11px var(--font-mono);
  color: var(--slate);
  flex: 0 0 auto;
}

.filter-row .box {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1.5px solid var(--steel);
  background: #fff;
  flex: 0 0 auto;
}

.filter-row--on .box {
  border: none;
  background: var(--navy);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  line-height: 1;
}

/* step 3 — CSV table art */
.step__mini--csv { display: flex; flex-direction: column; }

.csv-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.8fr;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--tint);
}

.csv-row--head {
  font: 600 10px var(--font-mono);
  color: var(--slate-light);
  border-bottom: 1px solid var(--line-soft);
}

.csv-row .co { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-row .mono { font: 400 11px var(--font-mono); color: var(--slate); }

.csv-foot {
  margin-top: auto;
  padding: 8px 12px;
  font: 500 10px var(--font-mono);
  color: var(--orange);
  border-top: 1px solid var(--line-soft);
  background: var(--card);
}

/* Roadmap strip */
.roadmap {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13.5px;
  color: var(--slate);
  padding: 14px 4px;
  flex-wrap: wrap;
}

.roadmap__items { display: flex; gap: 20px; flex-wrap: wrap; }

.roadmap__cta { margin-left: auto; font-weight: 600; color: var(--orange); }
.roadmap__cta:hover { color: var(--orange-dark); }

/* ============ Pricing ============ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--card);
  display: flex;
  flex-direction: column;
}

.price-card--featured {
  border: 1.5px solid var(--navy);
  box-shadow: var(--shadow-soft);
}

.price-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.price-card__title h3 { margin: 0; font-size: 18px; font-weight: 700; }

.badge {
  font: 600 10px var(--font-mono);
  padding: 3px 8px;
  border-radius: 3px;
}

.badge--live { color: #fff; background: var(--orange); }
.badge--soon { color: var(--slate); background: var(--tint); }

.price-card__sub { font-size: 14px; color: var(--slate); margin-bottom: 18px; }
.price-card__sub strong { color: var(--ink); }

.price-card__tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  font-size: 14px;
  margin-bottom: 22px;
}

.price-card__list { display: grid; gap: 8px; font-size: 14px; margin-bottom: 22px; }

.price-card .btn { margin-top: auto; display: block; }

/* ============ Directory ============ */
.directory-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 40px 40px 36px;
}

.directory-card__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.directory-card h2 { margin: 12px 0; }

.directory-card .lede {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--slate);
  text-wrap: pretty;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.pill {
  font: 500 13px var(--font-sans);
  color: var(--ink);
  background: var(--tint);
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.pill:hover { background: var(--line); }

.pill--active,
.pill--active:hover { background: var(--navy); color: #fff; }

.pill--more { background: none; color: var(--slate); padding: 6px 4px; }
.pill--more:hover { background: none; color: var(--ink); }

.city-grid__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.city-grid__head .title { font-size: 14px; font-weight: 700; }

.city-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.city-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 11px 14px;
  background: #fff;
  transition: border-color 0.15s;
}

.city-link:hover { border-color: var(--navy); }

.city-link .name { font-size: 13.5px; font-weight: 600; }
.city-link .count { font: 400 12px var(--font-mono); color: var(--slate); }

.data-note { margin-top: 10px; font-size: 12.5px; color: var(--slate-light); }

/* ============ Monthly growth / data freshness ============ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.growth-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 40px 40px 32px;
}

.growth-card__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.growth-card h2 { margin: 12px 0; }

.growth-card .lede {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--slate);
  text-wrap: pretty;
}

.growth-card__figure { white-space: nowrap; }

/* The one number the card leads with. Proportional figures on purpose —
   tabular-nums makes a standalone value look loose at this size. */
.growth-card__figure strong {
  display: block;
  margin: 6px 0 2px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.growth-card__sub { font-size: 13px; color: var(--slate); }

.growth-chart { margin: 0; }

.growth-chart__caption {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--slate-light);
  margin-bottom: 14px;
}

/* Height covers the value cap, the plot and the month band, so the axis labels
   are never squeezed out of the card. */
.growth-chart__plot {
  display: flex;
  align-items: flex-end;
  gap: 2px;                      /* the surface gap that separates adjacent bars */
  border-bottom: 1px solid var(--line);
  /* Capped: across the full 1200px content the 24px bars strand in ~90px bands and
     the series stops reading as a series. This keeps the bands ~60px. */
  max-width: 760px;
}

.growth-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 6px;
  border-radius: var(--radius-sm);
}

.growth-col:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.growth-col__val {
  height: 16px;
  font: 600 11px var(--font-mono);
  color: var(--slate);
}

.growth-col__track {
  width: 100%;
  height: 128px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Capped so the bar never fills its band — the leftover is air, not ink.
   Square at the baseline, 4px rounded at the data end. */
.growth-col__fill {
  width: 100%;
  max-width: 24px;
  background: var(--navy);
  opacity: 0.38;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: opacity 0.15s;
}

.growth-col:hover .growth-col__fill,
.growth-col:focus-visible .growth-col__fill { opacity: 0.62; }

/* The newest month — what the card is about. Colour plus a direct value label,
   so the emphasis never rests on hue alone. */
.growth-col--latest .growth-col__fill { background: var(--orange); opacity: 1; }
.growth-col--latest:hover .growth-col__fill,
.growth-col--latest:focus-visible .growth-col__fill { opacity: 1; }
.growth-col--latest .growth-col__label { color: var(--ink); font-weight: 600; }

.growth-col__label {
  margin-top: 8px;
  font: 400 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--slate-light);
}

.growth-col__tip {
  position: absolute;
  bottom: calc(100% - 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font: 400 12px var(--font-mono);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 2;
}

/* The end columns' tooltips are wider than their half-band, so centring them pushes
   the text outside the card. Anchor those two to the plot edge instead. */
.growth-col:first-child .growth-col__tip { left: 0; transform: none; }
.growth-col:last-child .growth-col__tip { left: auto; right: 0; transform: none; }

.growth-col:hover .growth-col__tip,
.growth-col:focus-visible .growth-col__tip { opacity: 1; }

.growth-table { margin-top: 20px; font-size: 13px; }
.growth-table summary { cursor: pointer; color: var(--slate); font-size: 13px; }
.growth-table summary:hover { color: var(--navy); }
.growth-table table { border-collapse: collapse; margin-top: 12px; }
.growth-table th, .growth-table td {
  text-align: left;
  padding: 5px 28px 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.growth-table thead th { color: var(--slate-light); font: 600 11px var(--font-mono); letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .growth-col__fill, .growth-col__tip { transition: none; }
}

/* ============ Email capture / updates ============ */
.updates-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.updates-card h2 { margin: 12px 0; }
.updates-card .lede { margin: 0; font-size: 15px; color: var(--slate); }

.email-form { display: flex; gap: 10px; }

.email-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--steel);
  border-radius: var(--radius-sm);
  font: 400 14.5px var(--font-sans);
  color: var(--ink);
  background: #fff;
}

.email-form input[type="email"]:focus {
  outline: 2px solid var(--navy);
  outline-offset: -1px;
  border-color: var(--navy);
}

.form-note { margin: 10px 0 0; font-size: 12.5px; color: var(--slate-light); }

.form-msg { margin: 10px 0 0; font-size: 13.5px; display: none; }
.form-msg--ok { color: #2e7d4f; display: block; }
.form-msg--err { color: #c0392b; display: block; }

/* ============ FAQ page ============ */
.page-head { padding-top: 48px; padding-bottom: 8px; }  /* keep .content's side padding */
.page-head h1 { margin: 12px 0 10px; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.page-head p { margin: 0; font-size: 15.5px; color: var(--slate); max-width: 560px; }

.faq-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

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

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  background: none;
  border: none;
  font: 700 16.5px var(--font-sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq-item__q .faq-icon {
  font: 400 20px var(--font-mono);
  color: var(--orange);
  flex: 0 0 auto;
  transition: transform 0.2s;
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-item__a {
  display: none;
  padding: 0 28px 22px;
  font-size: 14.5px;
  color: var(--slate);
}

.faq-item.open .faq-item__a { display: block; }

.faq-item__a p { margin: 0 0 10px; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a ul { margin: 0 0 10px; padding-left: 20px; }
.faq-item__a strong { color: var(--ink); }

/* ============ Legal pages ============ */
.legal-content {
  max-width: 760px;
  font-size: 15px;
  color: var(--slate);
}

.legal-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 36px 0 10px;
  letter-spacing: -0.01em;
}

.legal-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 8px;
}

.legal-content p { margin: 0 0 12px; }
.legal-content ul { margin: 0 0 12px; padding-left: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content strong { color: var(--ink); }

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

.legal-content a:hover { color: var(--orange-dark); }

.highlight-box {
  background: var(--tint);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 0 0 20px;
}

.highlight-box p { margin: 0; }

/* ============ Footer ============ */
.site-footer {
  background: var(--navy);
  color: var(--navy-text-dim);
  margin-top: 56px;
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 48px 24px 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
}

.site-footer .brand { font-size: 15px; margin-bottom: 14px; }
.site-footer .brand__mark { width: 20px; height: 20px; }
.site-footer .brand__mark::after { width: 5px; height: 5px; }

.site-footer__blurb {
  margin: 0;
  font-size: 13.5px;
  max-width: 260px;
}

.site-footer__col-head {
  font: 600 11px var(--font-mono);
  color: var(--navy-text-faint);
  margin-bottom: 14px;
}

.site-footer__links { display: grid; gap: 10px; font-size: 13.5px; }
.site-footer__links a { color: var(--navy-text); }
.site-footer__links a:hover { color: #fff; }

.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12.5px;
  color: var(--navy-text-faint);
  flex-wrap: wrap;
}

.site-footer__bar a { color: var(--navy-text-dim); }
.site-footer__bar a:hover { color: #fff; }

/* ============ Contact modal ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 58, 92, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-overlay.active { display: flex; }

.modal {
  width: 440px;
  max-width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.modal__head h3 { margin: 0; font-size: 18px; font-weight: 700; }

.modal__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
  padding: 4px;
}

.modal__close:hover { color: var(--ink); }

.form-group { margin-bottom: 14px; }

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--steel);
  border-radius: var(--radius-sm);
  font: 400 14px var(--font-sans);
  color: var(--ink);
  background: #fff;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: -1px;
  border-color: var(--navy);
}

.form-group textarea { min-height: 100px; resize: vertical; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: none; border-top: 1px solid var(--line-soft); }
  .pricing-grid { grid-template-columns: 1fr; }
  .directory-card__grid { grid-template-columns: 1fr; gap: 28px; }
  .updates-card { grid-template-columns: 1fr; gap: 20px; }
  .growth-card__grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .roadmap__cta { margin-left: 0; }
}

@media (max-width: 720px) {
  .site-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    padding: 8px 24px 16px;
    z-index: 50;
    box-shadow: 0 12px 24px rgba(30, 58, 92, 0.25);
  }

  .site-nav { position: relative; }
  .site-nav__links.open { display: flex; }
  .site-nav__links a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .site-nav__links .btn { margin-top: 12px; border-bottom: none; }
  .site-nav__toggle { display: block; }

  .hero { height: auto; min-height: 560px; }
  .hero__card { position: relative; top: 0; left: 0; margin: 24px; width: auto; }
  .hero__badge { display: none; }
  .hero__card h1 { font-size: 32px; }

  .directory-card { padding: 24px; }
  .updates-card { padding: 24px; }
  .growth-card { padding: 24px; }
  .growth-card__figure strong { font-size: 32px; }
  .growth-col__track { height: 96px; }
  /* 12 month labels won't fit across a phone — show every other one. The skipped
     months stay reachable via the tooltip and the table view. The latest month is
     always the 12th (even), so its override has to match the hide rule's
     specificity to win on source order — otherwise the one label that matters
     is the one that disappears. */
  .growth-col:nth-child(even) .growth-col__label { visibility: hidden; }
  .growth-col--latest:nth-child(even) .growth-col__label { visibility: visible; }
  .city-grid { grid-template-columns: 1fr; }
  .email-form { flex-direction: column; }
  .section { padding: 40px 0; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-item__q { padding: 16px 18px; }
  .faq-item__a { padding: 0 18px 18px; }
}