:root {
  --ink: #0a2a2e;
  --ink-soft: #1a3d42;
  --paper: #faf7f2;
  --paper-warm: #f5efe5;
  --teal: #0d4f5c;
  --teal-deep: #08363f;
  --amber: #d4751c;
  --amber-bright: #e88a2e;
  --green-money: #2d6a4f;
  --red-flag: #b04545;
  --rule: #d9d0c1;
  --sage: #6f8f7a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Inter Tight', 'Inter Tight Fallback', sans-serif; line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Fraunces', 'Fraunces Fallback', serif; color: var(--teal-deep); }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 28px; }
a { color: var(--teal); }
.hero { background: linear-gradient(135deg, var(--teal-deep), var(--teal)); color: #fff; padding: 48px 28px 40px; text-align: center; }
.hero .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 14px; }
.hero h1 { color: #fff; font-size: clamp(28px, 4.5vw, 42px); line-height: 1.15; margin: 0 0 14px; }
.hero p { font-size: 16px; color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto; }
.cross-region-notice { background: var(--paper-warm); border-left: 4px solid var(--amber); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 24px 0; font-size: 14px; color: var(--ink-soft); }
.section { padding: 40px 28px; }
.compare-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin: 20px 0; }
.compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 14px; }
.compare-table th { background: var(--paper-warm); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; color: var(--ink-soft); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td.score-cell { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; }
.band-great { color: var(--green-money); }
.band-mid { color: var(--amber); }
.band-low { color: var(--red-flag); }
.overall-row td { font-weight: 700; background: var(--paper-warm); }
.city-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0; }
.city-links a.btn { display: inline-block; background: var(--amber); color: #fff; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; }
.city-links a.btn:hover { background: var(--amber-bright); }
.back-link { display: inline-block; margin: 24px 0; font-weight: 600; }
.faq { margin: 32px 0; }
.faq-item { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; margin-bottom: 12px; }
.faq-item h3 { font-size: 16px; margin: 0 0 8px; }
.faq-item p { margin: 0; font-size: 14px; color: var(--ink-soft); }