/* ═══════════════════════════════════════════════════════════════════════════
   WhereToSkiNext.com — global styles
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Alpine / premium palette — midnight navy, ski blue, cool surfaces */
  --navy-deep: #0f1c2e;
  --navy-mid: #1e3448;
  --navy-hover: #2a4460;
  --navy-surface: #d4e8f8;
  /* Headings: deep navy, softened vs near-black for less “terminal” density */
  --text-primary: #2a4158;
  --text-body: #4a6177;
  --text-muted: #7f96a9;
  --text-on-dark: #f0f6fc;
  --text-on-dark-dim: rgba(240, 246, 252, 0.62);
  --accent-blue: #2b6de9;
  --accent-blue-dim: rgba(43, 109, 233, 0.18);
  --accent-blue-ring: rgba(43, 109, 233, 0.4);
  --surface-white: #ffffff;
  --surface-subtle: #f7fafc;
  --border-light: #dde5ee;
  --border-mid: #c4d0de;
  --green-cond: #16a34a;
  --green-bg: #dcfce7;
  --amber-cond: #b45309;
  --amber-bg: #fef3c7;
  --red-cond: #be123c;
  --red-bg: #ffe4e6;
  /* Mapped tokens (legacy names) */
  --bg-page: var(--navy-surface);
  --bg-section-alt: #e8edf2;
  --bg: var(--navy-surface);
  --panel: var(--surface-white);
  --panel-2: var(--surface-subtle);
  --surface: var(--surface-white);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  /* CTA / interactive accent — same blue as “Next” in the wordmark & logo shield (ski-decision-logo.svg #2b6de9) */
  --accent: #2b6de9;
  --accent-hover: #1a56c4;
  --accent-2: #059669;
  --accent-warm: #d97706;
  --border: var(--border-light);
  --danger: #dc2626;
  --shadow: 0 8px 30px rgba(26, 46, 69, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 46, 69, 0.06);
  --shadow-card: 0 4px 24px rgba(26, 46, 69, 0.07);
  --radius: 16px;
  --radius-sm: 10px;
  /* Homepage “Results & discovery” — one system */
  --rs-radius: 14px;
  --rs-gap: 10px;
  --rs-surface: var(--surface-white);
  --rs-surface-subtle: var(--surface-subtle);
  --rs-border: var(--border);
  --rs-accent-soft: rgba(43, 109, 233, 0.1);
  --rs-accent-line: rgba(43, 109, 233, 0.22);
  /* Narrative / “perfect day” */
  --narrative-badge-bg: linear-gradient(180deg, #1a2332 0%, #0c1016 100%);
  --narrative-badge-border: rgba(255, 255, 255, 0.14);
  --narrative-badge-text: #f8fafc;
  --bluebird-halo: rgba(251, 191, 36, 0.45);
  --bluebird-ring: rgba(245, 158, 11, 0.55);
  --bluebird-inner: rgba(253, 230, 138, 0.12);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}
body {
  margin: 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* ── Top Nav ────────────────────────────────────────────────────────────── */
.top-nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(8, 16, 28, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.top-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 6px;
  overflow: visible; padding: 12px 24px;
}
.nav-brand-link {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none !important; border: none !important;
  padding: 0 !important; background: none !important;
}
.nav-logo {
  width: 30px; height: 30px; object-fit: contain; flex-shrink: 0;
}
.nav-brand {
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  padding: 2px 0; white-space: nowrap; color: var(--text);
  margin-right: 4px; display: flex; flex-direction: column; gap: 1px;
}
.nav-brand-name { color: #f0f6fc; font-weight: 600; font-size: 15px; line-height: 1.2; }
/* “Next” — same #2b6de9 as logo shield & all --accent CTAs */
.nav-brand-name .nav-brand-next { color: var(--accent); font-weight: 600; }
.nav-brand-tag  { color: rgba(200, 220, 240, 0.52); font-size: 12px; font-weight: 400; line-height: 1.2; }
.top-nav a {
  text-decoration: none; color: rgba(240, 246, 252, 0.78); font-weight: 500; font-size: 14px;
  padding: 7px 11px; border-radius: 8px; border: 1px solid transparent;
  white-space: nowrap; transition: background .12s, color .12s;
}
.top-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #f0f6fc; border-color: transparent; }
.nav-find-cta {
  margin-left: auto; flex-shrink: 0;
  background: var(--accent); color: var(--text-on-dark) !important;
  border: none !important; border-radius: 999px !important;
  padding: 8px 18px !important; font: 600 14px/1 inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.nav-find-cta:hover { background: var(--accent-hover) !important; }

/* Text nav links (shared with generated ski-near / ski-report / state pages) */
.top-nav a.nav-primary {
  text-decoration: none;
  color: rgba(240, 246, 252, 0.78);
  font-weight: 500;
  font-size: 14px;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.top-nav a.nav-primary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f0f6fc;
}
.top-nav .nav-link-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin: 0 2px;
  align-self: center;
}
@media (max-width: 640px) {
  .top-nav a.nav-primary[href="/ski-pass-comparison/"] { display: none; }
  .top-nav a[href="/about/"] + .nav-link-sep { display: none; }
}

/* ── Browse dropdown (state hub navigation) ────────────────────────────────── */
.nav-browse-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-browse-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: rgba(240, 246, 252, 0.78);
  padding: 7px 11px;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.nav-browse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f0f6fc;
  border-color: transparent;
}
.nav-browse-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #d6e1f0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(15,28,46,.13);
  z-index: 999;
  padding: 16px 8px;
  min-width: 560px;
  flex-direction: row;
  gap: 0;
}
.nav-browse-wrap:hover .nav-browse-dropdown,
.nav-browse-wrap.open .nav-browse-dropdown { display: flex; }
.nav-browse-col {
  flex: 1;
  padding: 0 12px;
  border-right: 1px solid #edf4ff;
}
.nav-browse-col:last-child { border-right: none; }
.nav-browse-region {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7a92a8;
  margin-bottom: 6px;
}
.nav-browse-dropdown a {
  display: block;
  font-size: 13px;
  color: #1a2e45;
  text-decoration: none;
  padding: 3px 4px;
  border-radius: 5px;
  line-height: 1.5;
}
.nav-browse-dropdown a:hover {
  background: #f0f4f8;
  color: #0f1c2e;
}
@media (max-width: 640px) {
  .nav-browse-wrap { display: none; }
}

/* ── Scroll cue ─────────────────────────────────────────────────────────────── */
#searchSection { position: relative; }
.scroll-cue {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  animation: scroll-cue-appear .5s ease 1.5s forwards;
  transition: opacity .4s ease, color .2s ease;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font: inherit;
  padding: 8px 14px;
  border-radius: 20px;
}
.scroll-cue:hover { color: rgba(255,255,255,.95); background: rgba(255,255,255,.12); }
.scroll-cue.hidden {
  opacity: 0 !important;
  pointer-events: none;
}
.scroll-cue-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.scroll-cue-arrow {
  animation: scroll-cue-bounce 1.1s ease-in-out infinite;
}
@keyframes scroll-cue-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}
@media (max-width: 640px) { .scroll-cue { bottom: 16px; } }

/* ── Subscribe dropdown ─────────────────────────────────────────────────────── */
.nav-subscribe-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-subscribe-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #5aaddc;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.nav-subscribe-btn:hover {
  background: rgba(90,173,220,.1);
  color: #3a9bc8;
}
body:has(#searchSection.hero-v2) .nav-subscribe-btn {
  color: #5aaddc;
}
body:has(#searchSection.hero-v2) .nav-subscribe-btn:hover {
  background: rgba(90,173,220,.15);
}
.nav-subscribe-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #d6e1f0;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(15,28,46,.14);
  z-index: 999;
  padding: 20px;
  width: 340px;
}
.nav-subscribe-wrap.open .nav-subscribe-dropdown { display: block; }
.nav-subscribe-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5aaddc;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-subscribe-kicker::before {
  content: '';
  display: block;
  width: 16px;
  height: 1.5px;
  background: #5aaddc;
  flex-shrink: 0;
}
.nav-subscribe-headline {
  font-size: 15px;
  font-weight: 800;
  color: #1a2e45;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  line-height: 1.2;
}
.nav-subscribe-sub {
  font-size: 13px;
  color: #667a96;
  line-height: 1.55;
  margin: 0 0 14px;
}
.nav-subscribe-row {
  display: flex;
  background: #f0f4f8;
  border: 1.5px solid #d6e1f0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.nav-subscribe-row:focus-within {
  border-color: #5aaddc;
  background: #fff;
}
.nav-subscribe-input {
  flex: 1;
  font: inherit;
  font-size: 13px;
  color: #1a2e45;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 14px;
  min-width: 0;
}
.nav-subscribe-input::placeholder { color: #9aafc4; }
.nav-subscribe-submit {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #1a2e45;
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s;
}
.nav-subscribe-submit:hover:not(:disabled) { background: #0f1c2e; }
.nav-subscribe-submit:disabled { opacity: .45; cursor: not-allowed; }
.nav-subscribe-err {
  display: none;
  margin-top: 8px;
  font-size: 11px;
  color: #c0392b;
  font-family: 'DM Mono', monospace;
}
.nav-subscribe-fine {
  margin-top: 10px;
  font-size: 11px;
  color: #9aafc4;
  font-family: 'DM Mono', monospace;
}
.nav-subscribe-ok {
  display: none;
  text-align: center;
  padding: 8px 0 4px;
}
.nav-subscribe-ok-icon {
  width: 36px; height: 36px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(90,173,220,.12);
  border: 1.5px solid rgba(90,173,220,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #5aaddc;
}
.nav-subscribe-ok-head {
  font-size: 14px; font-weight: 800;
  color: #1a2e45; letter-spacing: -.02em;
  margin: 0 0 4px;
}
.nav-subscribe-ok-sub {
  font-size: 12px; color: #667a96; margin: 0;
}
@media (max-width: 640px) { .nav-subscribe-wrap { display: none; } }


.nav-share {
  flex-shrink: 0;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border) !important; border-radius: 999px;
  padding: 7px 13px; font: 500 12px/1 inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.nav-share:hover { background: var(--bg-section-alt); color: var(--text); }
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 13px;
  font: 500 13px/1 inherit; cursor: pointer; white-space: nowrap;
  color: var(--muted); transition: background .12s, color .12s;
}
.btn-ghost:hover { background: var(--bg-section-alt); color: var(--text); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 88px;
  display: grid;
  gap: 18px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 24px; }

/* Sticky-nav anchor offsets */
#plannerSection,
#verdictSection,
#compareSection,
#detailSection {
  scroll-margin-top: 56px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.eyebrow {
  font-family: 'DM Mono', monospace; color: var(--accent-blue);
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 4px;
}
h1 { font-size: clamp(26px, 3.5vw, 42px); line-height: 1.08; margin: 0 0 10px; font-weight: 600; }
h2 { font-size: 18px; line-height: 1.25; margin: 0; font-weight: 600; }
h3 { font-size: 15px; margin: 0; font-weight: 600; }
p { color: var(--text-body); margin: 0; }
.muted, .helper-text { color: var(--muted); margin: 0; }
.small { font-size: 13px; }

/* ── Stats bar (top of page) ─────────────────────────────────────────────── */
.stats-bar { padding: 6px 20px; }
.stats-strip {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
}
.stats-strip .summary-card {
  flex: 1; min-width: 80px;
  border-radius: 0; border: none;
  border-right: 1px solid var(--border);
  box-shadow: none; background: transparent;
  padding: 7px 12px; text-align: center;
}
.stats-strip .summary-card:last-child { border-right: none; }
.stats-strip .summary-label { font-size: 9px; margin-bottom: 2px; }
.stats-strip .summary-value { font-size: 15px; }
.stats-strip .summary-sub   { font-size: 10px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 52px 28px 56px;
  background-image:
    linear-gradient(
      to bottom,
      rgba(15, 23, 42, 0.58) 0%,
      rgba(15, 23, 42, 0.38) 55%,
      rgba(15, 23, 42, 0.52) 100%
    ),
    url('/hero-bg.jpg');
  background-size: cover;
  background-position: center 40%;
}

/* Hero text — white on photo background (split editorial hero uses its own dark type) */
.hero:not(.hn-hero-split) h1 {
  color: var(--text-on-dark);
}
.hero:not(.hn-hero-split) p,
.hero:not(.hn-hero-split) .muted,
.hero:not(.hn-hero-split) .helper-text,
.hero:not(.hn-hero-split) .hero-quick-label {
  color: rgba(255, 255, 255, 0.82);
}
.hero:not(.hn-hero-split) .small {
  color: rgba(255, 255, 255, 0.70);
}
/* location-row used in hero search meta */
.location-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-end;
  max-width: 460px;
}

/* Summary stats */
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.summary-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm);
}
.summary-label { font-size: 10px; font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
.summary-value { font-size: 20px; font-weight: 800; }
.summary-sub   { font-size: 11px; color: var(--muted); }


/* ── Hero quick-filter label ─────────────────────────────────────────────── */
.hero-quick-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}
/* ── Search suggest panel ───────────────────────────────────────────────── */
.search-suggest-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(30,60,100,.12);
  overflow: hidden;
  margin-top: 2px;
}
.sg-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid rgba(26, 46, 69, 0.06);
  cursor: pointer; transition: background .1s;
}
.sg-row:last-child { border-bottom: none; }
.sg-row:hover { background: #f4f8ff; }
.sg-info { flex: 1; min-width: 0; }
.sg-name { font-weight: 700; font-size: 14px; display: block; }
.sg-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sg-pass { font-weight: 600; }
.sg-pass-epic { color: #1a4fa8; }
.sg-pass-ikon { color: #8a4dff; }
.sg-pass-indy { color: #22b38a; }
.sg-pass-independent { color: #90a4be; }
.sg-drive { color: var(--muted); }
.sg-actions { display: flex; gap: 7px; flex-shrink: 0; }
.sg-btn {
  font: 600 11px/1 inherit; border-radius: 999px;
  padding: 5px 11px; cursor: pointer; border: 1px solid var(--border);
  transition: background .1s, border-color .1s, color .1s;
}
.sg-view    { background: #fff; color: var(--text); }
.sg-view:hover { background: #edf4ff; border-color: var(--accent); color: var(--accent); }
.sg-compare { background: #fff; color: var(--accent); border-color: rgba(43, 109, 233,.35); }
.sg-compare:hover { background: rgba(43, 109, 233,.08); }
.sg-compare-active {
  background: rgba(43, 109, 233,.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Form elements ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; }
.field-grow { flex: 1; }
.field-mini { width: 110px; }
label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  margin-bottom: 5px; font-family: 'DM Mono', monospace;
  text-transform: uppercase; letter-spacing: .07em;
}
input, select {
  width: 100%; font: inherit; color: var(--text);
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 12px;
  transition: border-color .12s;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
button { font: inherit; }
.btn {
  cursor: pointer; border-radius: 999px;
  border: 1px solid var(--border-light);
  padding: 10px 16px; background: #fff; color: var(--text); font-weight: 700;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary  { background: var(--accent); color: var(--text-on-dark); border: none; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: #fff; }
.btn-secondary:hover { background: #f0f6ff; border-color: var(--accent); color: var(--accent); }
.btn-outline {
  background: #fff; color: var(--text); border: 1.5px solid var(--border-mid);
  font-weight: 500;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: #f0f6ff; }
/* Resort name links in Also Consider / Also in the Running */
.verdict-resort-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--accent); text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}
.verdict-resort-link:hover { text-decoration-color: currentColor; }
.btn-secondary[aria-pressed="true"] {
  background: rgba(43, 109, 233,.1); border-color: rgba(43, 109, 233,.4); color: var(--accent);
}

/* ── Planner section ────────────────────────────────────────────────────── */
.weight-summary { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.weight-summary strong { color: var(--text); }
.score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.score-control {
  background: rgba(255,255,255,.8); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 14px;
}
.score-control-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--text); font-size: 13px; font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.score-desc { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.5; font-weight: 400; }
.slider-hint { font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.4; }

/* Priority buttons — default stacked layout (overridden in planner-col) */
.priority-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.priority-btn {
  flex: 1;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.3;
  white-space: nowrap;
}
.priority-btn:hover { border-color: var(--accent); color: var(--accent); }
.priority-btn.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--text-on-dark);
}

.filter-pill, .metric-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(43, 109, 233,.08); color: var(--accent);
  font-size: 12px; font-weight: 700;
}
button.metric-chip {
  border: none; cursor: pointer; font: inherit;
  transition: background 0.15s, opacity 0.15s;
}
button.metric-chip:hover { background: rgba(43, 109, 233, 0.08); }

/* ── Verdict / Should I Go ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   VERDICT CARD — full redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Placeholder (before results load) ─────────────────────────────────── */
.vcard-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 28px;
  gap: 10px;
  min-height: 200px;
}
.vcard-placeholder-icon { font-size: 36px; line-height: 1; opacity: .4; }
.vcard-placeholder-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  opacity: .6;
}
.vcard-placeholder-sub {
  font-size: 13px;
  color: var(--muted);
  max-width: 28ch;
  line-height: 1.55;
}

/* ── Card wrapper ───────────────────────────────────────────────────────── */
.vcard {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* ── Hero header — full-bleed, tinted by condition tier ─────────────────── */
.vcard-hero {
  position: relative;
  padding: 20px 22px 18px;
  border-bottom: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tier-tinted wash backgrounds */
.vcard-hero--great   { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-bottom-color: #bbf7d0; }
.vcard-hero--good    { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-bottom-color: #bfdbfe; }
.vcard-hero--marginal{ background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-bottom-color: #fde68a; }
.vcard-hero--bad     { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); border-bottom-color: #fecdd3; }

/* "YOUR RECOMMENDED MOUNTAIN" eyebrow */
.vcard-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

/* Mountain name — the dominant element */
.vcard-name {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: color .12s;
  letter-spacing: -.02em;
}
.vcard-name:hover { color: var(--accent); }

/* Condition badge — pill in bottom-right of hero */
.vcard-condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid transparent;
}
.vcard-condition-badge--great   { background: #dcfce7; border-color: #86efac; color: #15803d; }
.vcard-condition-badge--good    { background: #dbeafe; border-color: #93c5fd; color: var(--accent); }
.vcard-condition-badge--marginal{ background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.vcard-condition-badge--bad     { background: #ffe4e6; border-color: #fca5a5; color: #be123c; }
.vcard-condition-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Verdict badge — used in detail panel hero ──────────────────────────── */
.vcard-vbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid transparent;
  line-height: 1;
}
.vcard-vbadge--great    { background: #dcfce7; border-color: #86efac; color: #15803d; }
.vcard-vbadge--good     { background: #dbeafe; border-color: #93c5fd; color: var(--accent); }
.vcard-vbadge--marginal { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.vcard-vbadge--bad      { background: #ffe4e6; border-color: #fca5a5; color: #be123c; }
.vcard-vbadge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Stats bar — 4-up horizontal row in detail panel hero ───────────────── */
.vcard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 4px;
}
.vcard-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px 6px 0;
  margin-right: 14px;
  border-right: 1px solid rgba(26, 46, 69, 0.1);
}
.vcard-stat:last-child {
  border-right: none;
  margin-right: 0;
}
.vs-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}
.vs-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.vcard-stat--snow .vs-val { color: var(--accent); }

/* ── Body — content column below hero ──────────────────────────────────── */
.vcard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px 18px;
  overflow-y: visible;
}

.vcard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.vcard-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(26, 46, 69, 0.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.vcard-chip--pass {
  font-weight: 700;
  /* inline style sets brand color */
}
.vcard-chip--link {
  text-decoration: none;
  font-weight: 700;
  transition: background .12s;
}
.vcard-chip--link:hover { background: rgba(255,255,255,.95); }

/* ── AI write-up slot ───────────────────────────────────────────────────── */
.vcard-writeup {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.65;
  padding: 12px 14px;
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.vcard-writeup--loading {
  min-height: 3em;
  border-left-color: var(--border);
  background: linear-gradient(90deg, #f3f4f6 25%, #e9ecf0 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Verdict: condition headline + detail ───────────────────────────────── */
.vcard-verdict { display: flex; flex-direction: column; gap: 8px; }

.vcard-headline {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}
.vcard-headline--great   { color: #15803d; }
.vcard-headline--good    { color: var(--accent); }
.vcard-headline--marginal{ color: #b45309; }
.vcard-headline--bad     { color: #dc2626; }

.vcard-detail {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.7;
}

.vcard-points {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 0.83rem;
  color: var(--text-muted);
}
.vcard-points li { margin-bottom: 3px; }

/* ── 3-day forecast strip ───────────────────────────────────────────────── */
.vcard-forecast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.vcard-fc-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  text-align: center;
}
.vcard-fc-day  { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vcard-fc-amt  { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1; }
.vcard-fc-temps{ font-size: 10px; color: var(--muted); }

.vcard-fc-pow  { background: rgba(29,78,216,.07); border-color: rgba(29,78,216,.25); }
.vcard-fc-pow .vcard-fc-amt { color: var(--accent); }
.vcard-fc-snow { background: rgba(59,130,246,.05); border-color: rgba(59,130,246,.2); }
.vcard-fc-snow .vcard-fc-amt { color: var(--accent); }
.vcard-fc-dry  .vcard-fc-amt { color: var(--muted); font-size: 14px; }

/* ── Also in the running ────────────────────────────────────────────────── */
.vcard-alts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* Header row: "Also in the running" label + range selector */
.vcard-alts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.vcard-alts-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.vcard-alts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.vcard-alt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.vcard-alt:hover {
  border-color: var(--accent);
  background: #eef5ff;
}
.vcard-alt-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.vcard-alt-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcard-alt-snow {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.vcard-alt-snow--good { color: var(--accent); }
.vcard-alt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vcard-alt-pass {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.vcard-alt-drive {
  font-size: 12px;
  color: var(--muted);
}

.vcard-compare-link {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s, color .12s;
  align-self: flex-start;
}
.vcard-compare-link:hover { background: #f0f6ff; border-color: var(--accent); color: var(--accent); }

/* Range selector — lives in .vcard-alts-header */
.vcard-range {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.vcard-range-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 2px;
}
.vcard-range-btn {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.vcard-range-btn:hover { border-color: var(--accent); color: var(--accent); }
.vcard-range-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.vcard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.vcard-share-btn {
  font-size: 12px;
  padding: 6px 14px;
  color: var(--muted);
  border-color: var(--border);
  display: inline-flex;
  align-items: center;
}
.vcard-share-btn:hover {
  color: var(--text);
  border-color: var(--border-light);
  background: var(--surface-subtle);
}
.hn-hero-verdict-dock .vcard-share-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  min-height: 42px;
  color: rgba(186, 210, 232, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.hn-hero-verdict-dock .vcard-share-btn:hover {
  color: rgba(224, 242, 254, 0.92);
  border-color: rgba(147, 197, 253, 0.28);
  background: rgba(255, 255, 255, 0.09);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .vcard-hero { padding: 18px 18px 16px; }
  .vcard-name { font-size: 1.7rem; }
  .vcard-alts-list { grid-template-columns: 1fr 1fr; }
  .vcard-forecast  { grid-template-columns: repeat(3, 1fr); }
  .vcard-alts-header { flex-wrap: wrap; gap: 6px; }
  .vcard-body { padding: 16px 18px 16px; }
  .planner-col .score-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .vcard-name { font-size: 1.5rem; }
  .vcard-alts-list { grid-template-columns: 1fr; }
  .planner-col .score-grid { grid-template-columns: 1fr; }
}

/* ── card-grid layout ───────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.planner-card, .calc-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 15px; padding: 14px; box-shadow: var(--shadow-sm);
}
.planner-card.top {
  border-color: rgba(43, 109, 233, 0.22);
  background: linear-gradient(160deg, rgba(43, 109, 233, 0.05), #fff 55%);
}
.planner-title { font-size: 17px; font-weight: 600; margin-bottom: 3px; line-height: 1.2; }
.planner-meta  { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.breakdown {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(26, 46, 69, 0.07);
  display: grid; gap: 4px; font-size: 12px; color: var(--muted);
}
.breakdown strong { color: var(--text); }

/* ── Compare table (base — extended by .compare-section-engine below) ───── */
.table-wrap { overflow: auto; }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th,
.comparison-table td { padding: 16px 8px; border-bottom: 1px solid rgba(26, 46, 69, 0.04); font-size: 13px; text-align: left; }
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) { padding-left: 14px; }
.comparison-table th.compare-th-conditions,
.comparison-table td.compare-weekend { padding-left: 12px; padding-right: 12px; }
.comparison-table thead th {
  position: sticky; top: 0; z-index: 2;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: none; color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}
.comparison-table tbody tr {
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.comparison-table tbody tr:hover  {
  background: #f1f5f9;
  cursor: pointer;
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.comparison-table tbody tr.active-row { background: #eff6ff; box-shadow: inset 3px 0 0 0 var(--accent); }

/* ── Compare table: skier-first rows (less spreadsheet, more “pick a hill”) ── */
.row-sub { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }
.row-name--report { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; }
.row-name--report:hover { text-decoration: underline; text-decoration-color: rgba(43, 109, 233,.35); }
.compare-weekend {
  color: var(--text);
  font-weight: 500;
  min-width: 280px;
  max-width: min(42ch, 100%);
  vertical-align: middle;
  line-height: 1.45;
}
.compare-weekend .vibe-tag--mini {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 6px 0 0;
}

/* ═══ Mountain narrative — vibe badge, story copy, “bluebird / perfect day” ═══ */
.vibe-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--narrative-badge-text);
  background: var(--narrative-badge-bg);
  border: 1px solid var(--narrative-badge-border);
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 0 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.vibe-tag--mini {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  padding: 3px 8px;
  margin: 0 0 6px;
}

/* Hero top-pick card (dark glass): badge reads as premium, not pastel */
#searchSection.hero-v2 .hn-hero-verdict-dock .vibe-tag {
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Friend-style recommendation — slightly larger & warmer than stat rows */
/* Default to inheriting color so dark hero / glass cards are not forced to --text-primary (navy). */
.story-text,
.vcard-story-lede {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: 0.01em;
  color: inherit;
  margin: 0 0 14px;
  max-width: 42rem;
}
#searchSection.hero-v2 .hn-hero-verdict-dock .story-text,
#searchSection.hero-v2 .hn-hero-verdict-dock .vcard-story-lede,
.hn-hero-verdict-dock .vcard-hero-dash .story-text,
.hn-hero-verdict-dock .vcard-hero-dash .vcard-story-lede {
  color: #f1f5f9;
  -webkit-text-fill-color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 14px rgba(0, 0, 0, 0.35);
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  font-weight: 550;
}

/* Top Pick: one smooth read (eyebrow → name → verdict → story → utility → timestamp) */
.hn-hero-verdict-dock .vcard--pick-compact .vcard-eyebrow,
.hn-hero-verdict-dock .vcard-top-pill.vcard-eyebrow {
  font-size: clamp(0.72rem, 1.6vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.82);
  margin-bottom: 8px;
  padding: 6px 11px;
}
.hn-hero-verdict-dock .vcard-name-dash--pick {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 10px;
}
.hn-hero-verdict-dock .vcard-verdict-line {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.08rem, 1.85vw, 1.22rem);
  font-weight: 700;
  line-height: 1.28;
  color: #f8fafc;
  margin: 0 0 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hn-hero-verdict-dock .vcard-story-one {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-size: clamp(0.9rem, 1.35vw, 0.98rem);
  font-weight: 500;
  line-height: 1.48;
  color: rgba(248, 250, 252, 0.88);
  margin: 0 0 18px;
  max-width: 34rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.hn-hero-verdict-dock .vcard-utility-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.8rem, 1.25vw, 0.86rem);
  font-weight: 600;
  color: rgba(200, 214, 228, 0.78);
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hn-hero-verdict-dock .vcard--rail .vcard-utility-row {
  border-top-color: rgba(255, 255, 255, 0.05);
}
.hn-hero-verdict-dock .vcard-utility-vibe {
  font-size: clamp(0.78rem, 1.25vw, 0.84rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(248, 250, 252, 0.9);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.28);
}
.hn-hero-verdict-dock .vcard-utility-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.55);
  vertical-align: middle;
  margin: 0 2px;
}

/* ── Crowd label color modifiers on verdict card utility row ─────────────── */
.hn-hero-verdict-dock .crowd-color--quiet { color: rgba(74, 222, 128, 0.9); }
.hn-hero-verdict-dock .crowd-color--moderate { color: rgba(251, 191, 36, 0.9); }
.hn-hero-verdict-dock .crowd-color--busy { color: rgba(248, 113, 113, 0.9); }
.hn-hero-verdict-dock .crowd-color--avoid { color: rgba(248, 113, 113, 0.9); }
/* Light card variant */
.hn-hero-verdict-dock .vcard--hero-light .crowd-color--quiet    { color: #15803d; }
.hn-hero-verdict-dock .vcard--hero-light .crowd-color--moderate { color: #92400e; }
.hn-hero-verdict-dock .vcard--hero-light .crowd-color--busy     { color: #b91c1c; }
.hn-hero-verdict-dock .vcard--hero-light .crowd-color--avoid    { color: #b91c1c; }
.hn-hero-verdict-dock .vcard-freshness--quiet {
  font-size: clamp(0.72rem, 1.1vw, 0.78rem);
  color: rgba(186, 204, 220, 0.42);
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* ── 7-day history snow chip on verdict card ────────────────────────────── */
.vcard-hist-row {
  margin-top: 9px;
}
.vcard-hist-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(90, 173, 220, 0.14);
  border: 1px solid rgba(90, 173, 220, 0.32);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(147, 210, 245, 0.88);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-hist-chip {
  background: rgba(43, 109, 233, 0.1);
  border-color: rgba(43, 109, 233, 0.25);
  color: #2b6de9;
}

.hn-hero-verdict-dock .vcard-why-pick {
  margin: 14px 0 0;
  padding: 0;
  border: none;
  background: none;
}
.hn-hero-verdict-dock .vcard-why-pick-heading {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(186, 200, 218, 0.45);
  margin: 0 0 7px;
}
.hn-hero-verdict-dock .vcard-why-pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: flex-start;
}
.hn-hero-verdict-dock .vcard-why-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.32;
  color: rgba(210, 224, 238, 0.78);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.mob-card-conditions.story-text {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  margin: 6px 0 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

@media (max-width: 520px) {
  .mob-card-conditions.story-text {
    font-size: 1rem;
    line-height: 1.48;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Also in the running: name + reason + drive/crowds */
.hn-hero-verdict-dock button.vcard-mini-runner {
  color: #e8eef5;
  -webkit-text-fill-color: #e8eef5;
  gap: 8px;
  padding: 16px 15px 17px;
  min-width: 148px;
  max-width: 200px;
  min-height: 120px;
  align-items: flex-start;
  border-radius: 12px;
}
.hn-hero-verdict-dock .vcard--rail button.vcard-mini-runner {
  border-radius: 10px;
}
.hn-hero-verdict-dock .vcard-mini-runner .vmr-name {
  font-size: clamp(1.02rem, 1.7vw, 1.1rem);
  font-weight: 750;
  margin-bottom: 4px;
  white-space: normal;
  line-height: 1.2;
}
.hn-hero-verdict-dock .vcard-mini-runner .vmr-reason {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.82rem, 1.25vw, 0.88rem);
  font-weight: 550;
  line-height: 1.32;
  color: rgba(226, 232, 240, 0.88);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hn-hero-verdict-dock .vcard-mini-runner .vmr-utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.78rem, 1.2vw, 0.84rem);
  font-weight: 600;
  color: rgba(200, 214, 228, 0.82);
  margin-top: auto;
  padding-top: 6px;
}
.hn-hero-verdict-dock .vcard-mini-runner .vmr-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.76rem, 1.15vw, 0.82rem);
  font-weight: 600;
  color: rgba(186, 200, 218, 0.68);
  margin-top: auto;
  padding-top: 10px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.hn-hero-verdict-dock .vcard-mini-runner .vmr-utility-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.55);
}
.hn-hero-verdict-dock .vcard--hero-light .vmr-reason {
  color: #334155;
}

/* “Pure Gold” / perfect day — warm golden halo + refined border */
.vcard--dash.bluebird-glow {
  border-color: rgba(245, 158, 11, 0.42) !important;
  box-shadow:
    0 0 0 1px var(--bluebird-ring),
    0 0 28px var(--bluebird-halo),
    0 0 48px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 var(--bluebird-inner) !important;
}
.vcard-mini-runner.bluebird-glow {
  border-color: rgba(245, 158, 11, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 4px 20px rgba(245, 158, 11, 0.12);
}
tr.bluebird-glow td {
  box-shadow: inset 4px 0 0 0 rgba(217, 119, 6, 0.95) !important;
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.22) 0%, transparent 48%);
}
tr.bluebird-glow:hover td {
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.35) 0%, #f1f5f9 52%);
}
.mob-card.bluebird-glow {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.35),
    0 6px 28px rgba(245, 158, 11, 0.14),
    0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

.vcard-stats3--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.compare-weekend .story-text {
  display: inline;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  margin-top: 0;
  color: var(--text-body);
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Truncated variant — one line, expands when row is active */
.compare-weekend .story-text--table {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38ch;
  vertical-align: middle;
}
tr.active-row .story-text--table,
tr:focus-within .story-text--table {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.compare-drive { font-variant-numeric: tabular-nums; }
.compare-drive--near { color: #15803d; font-weight: 600; }
.compare-drive--mid  { color: #b45309; font-weight: 600; }
.compare-drive--far  { color: #b91c1c; font-weight: 600; }
.table-mountain-cell { min-width: 0; }
.table-mountain-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  row-gap: 6px;
}
.table-featured-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.row-name { font-weight: 700; }
.hist-cell { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
.result-count { font-size: 13px; font-weight: 700; }
.price-disclaimer { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ── Compare tray + panel ───────────────────────────────────────────────── */
.compare-tray { position: sticky; bottom: 12px; z-index: 800; }
.compare-tray-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(27, 42, 58, .96); color: var(--text-on-dark);
  border-radius: 18px; box-shadow: 0 8px 30px rgba(26, 46, 69, 0.22);
}
.tray-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.compare-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.compare-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-on-dark);
}
.compare-pill button { border: none; background: none; cursor: pointer; color: rgba(255,255,255,.7); font-size: 13px; }

/* ── Detail card ────────────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.sub-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px; }
.sub-card-title { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.metric-box { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 12px; }
.metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: 'DM Mono', monospace; margin-bottom: 5px; }
.metric-value { font-size: 20px; font-weight: 800; }
.metric-value.detail-sm { font-size: 14px; line-height: 1.3; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 36px; gap: 8px; align-items: center; margin-top: 9px; font-size: 12px; }
.bar { height: 9px; border-radius: 999px; background: #eef3fb; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #22b38a); }

/* History & forecast rows in detail card */
.history-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.history-label { font-size: 12px; color: var(--muted); width: 80px; flex-shrink: 0; }
.history-total { font-size: 15px; font-weight: 700; color: var(--accent); width: 44px; flex-shrink: 0; }
.forecast-rows { display: flex; flex-direction: column; gap: 4px; }
.forecast-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.forecast-day  { width: 36px; font-weight: 700; }
.forecast-snow { flex: 1; }
.forecast-snow.snow-big { color: var(--accent); font-weight: 700; }
.forecast-snow.snow-med { color: var(--accent); }
.forecast-temps { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

/* ── Snow sparkline ─────────────────────────────────────────────────────── */
.snow-sparkline { display: inline-block; vertical-align: middle; border-radius: 3px; flex-shrink: 0; }

/* Crowd colors — canonical definitions in AUDIT FIXES section */

/* ── Utility ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.toast {
  position: fixed; top: 70px; right: 16px; z-index: 1200;
  background: var(--navy-deep); color: var(--text-on-dark);
  padding: 10px 16px; border-radius: 999px;
  box-shadow: var(--shadow); opacity: 0;
  transform: translateY(-6px); pointer-events: none;
  transition: .18s; font-size: 13px; font-weight: 600;
}
.toast.show { opacity: 1; transform: translateY(0); }
.back-to-top {
  position: fixed; right: 18px; bottom: 18px;
  display: none; z-index: 999; border-radius: 999px;
  padding: 10px 14px; background: rgba(255,255,255,.96);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer;
}
.back-to-top.show { display: block; }
.helper-text { font-size: 12px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .score-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 14px); }
  .planner-col { padding: 20px 18px 18px; }
  .planner-main-title { font-size: 19px; }
  .planner-subtitle { font-size: 13px; }
  .top-nav-inner { padding-inline: 6px; }
  .hero { padding: 18px; }
  .score-grid, .card-grid, .metric-grid { grid-template-columns: 1fr; }
  .stats-strip { flex-wrap: wrap; }
  .stats-strip .summary-card { min-width: calc(25% - 1px); }
  .detail-grid { grid-template-columns: 1fr; }
  .comparison-table th,
  .comparison-table td { font-size: 12px; padding: 9px 7px; }
}

/* ── Mobile-first tweaks (common breakpoints) ───────────────────────────── */
@media (max-width: 768px) {
  /* Prefer iPad mini portrait as “mobile” for table/cards */
  .table-wrap { display: none; }
  .mobile-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 0;
  }
  #compareSection .mobile-card-grid {
    padding: 0 16px 16px;
    background: #fff;
  }
}

/* Touch targets (44px) for common controls on mobile */
@media (max-width: 768px) {
  .hn-booking-btn { min-height: 44px; }
  .mob-location-nudge button { min-height: 44px; }
  .planner-toggle-btn { min-height: 44px; }
}

/* ─── Sortable Table Headers ─────────────────────────────────────────────── */
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.sortable-th:hover {
  color: var(--accent);
  background: rgba(43, 109, 233, 0.06);
}
.sortable-th.sort-active {
  color: var(--accent);
}
.sort-indicator {
  font-size: 0.7em;
  opacity: 0.8;
  display: none;
  min-width: 12px;
}
.sort-active .sort-indicator {
  display: inline-block;
}


/* Score breakdown tooltip in table — show normalized factors */
.score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ─── Table Search + View All toolbar ───────────────────────────────────────── */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0 0.25rem;
  flex-wrap: wrap;
}

.table-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 380px;
}


.table-search-input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.table-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 109, 233,0.12);
}

.table-search-input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

#tableViewAllBtn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Pass Preference Buttons ────────────────────────────────────────────── */
.pass-pref-row {
  flex-wrap: wrap;
}

.pass-pref-btn {
  padding: 0.45rem 1.0rem;
  border-radius: 2rem;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.pass-pref-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* Any — neutral */
.pass-pref-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
  box-shadow: 0 2px 8px rgba(43, 109, 233,0.22);
}

/* Epic — deep blue */
.epic-btn:hover  { border-color: #1a4fa8; color: #1a4fa8; }
.epic-btn.active { background: #1a4fa8; border-color: #1a4fa8; color: var(--text-on-dark); box-shadow: 0 2px 8px rgba(26,79,168,0.3); }

/* Ikon — dark charcoal / gold accent */
.ikon-btn:hover  { border-color: #c8a84b; color: #c8a84b; }
.ikon-btn.active { background: var(--navy-deep); border-color: #c8a84b; color: #c8a84b; box-shadow: 0 2px 8px rgba(200,168,75,0.3); }

/* Indy — forest green */
.indy-btn:hover  { border-color: #2d7a3a; color: #2d7a3a; }
.indy-btn.active { background: #2d7a3a; border-color: #2d7a3a; color: var(--text-on-dark); box-shadow: 0 2px 8px rgba(45,122,58,0.3); }

/* Independent — warm slate */
.indep-btn:hover  { border-color: #6b5e7a; color: #6b5e7a; }
.indep-btn.active { background: #6b5e7a; border-color: #6b5e7a; color: var(--text-on-dark); box-shadow: 0 2px 8px rgba(107,94,122,0.3); }

/* ─── Nav upgrades: CTAs + divider + active state ─────────────────────────── */
.nav-divider {
  width: 1px; height: 22px;
  background: var(--border);
  flex-shrink: 0; margin: 0 4px;
}

/* nav-cta and nav-secondary anchor link styles removed — anchor nav links retired */

/* ─── Collapsible planner ─────────────────────────────────────────────────── */
.planner-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.planner-summary-left .eyebrow { margin-bottom: 2px; }
.planner-summary-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.planner-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: 600 13px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .12s, background .12s, color .12s;
}
.planner-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #edf4ff;
}
.planner-toggle-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-dark);
}

/* Collapsed state: tighten padding */
.planner-collapsed { padding-bottom: 14px !important; }

/* Details wrapper — no animation needed, hidden attr handles show/hide */
.planner-details { margin-top: 4px; }

/* ─── Responsive nav ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .nav-secondary { display: none; }
  .nav-divider:last-of-type { display: none; }
}

/* ─── Compact hero ────────────────────────────────────────────────────────── */
/* ── Centered search hero (light, travel-product) ───────────────────────── */
.hero-search {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#searchSection {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}
/* Homepage hero — full-bleed ski photo layer + light scrim (content stays in .hn-shell) */
#searchSection.hn-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-deep) !important;
  /* Hero form tokens — same blue as logo / “Next” */
  --hn-form-accent: var(--accent);
  --hn-form-accent-dim: rgba(43, 109, 233, 0.22);
  --hn-form-accent-ring: rgba(43, 109, 233, 0.4);
  --hn-form-text: #3d5166;
  --hn-form-text-muted: #7a92a8;
  --hn-form-surface: #ffffff;
  --hn-form-surface-subtle: #f7fafc;
  /* Full-bleed breakout — escapes the max-width container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
  min-height: 480px;
}
.hn-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--navy-deep);
  background-image: url("/hero-bg.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.hn-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Dark scrim — strong at top for headline/subhead legibility */
  background:
    linear-gradient(
      to bottom,
      rgba(15, 28, 46, 0.74) 0%,
      rgba(15, 28, 46, 0.38) 48%,
      rgba(15, 28, 46, 0.58) 100%
    );
}
#searchSection.hn-hero .hn-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}
#searchSection.hn-hero .hn-headline {
  text-shadow: 0 2px 14px rgba(15, 28, 46, 0.45);
  margin-bottom: 12px;
  max-width: min(100%, 40ch);
}
#searchSection.hn-hero .hn-inner--playful .hn-headline {
  max-width: min(100%, 22ch);
}
#searchSection.hn-hero .hn-headline em {
  color: var(--hn-form-accent);
  text-shadow: 0 1px 10px rgba(15, 28, 46, 0.4);
}
#searchSection.hn-hero .hn-subhead {
  text-shadow: 0 1px 10px rgba(15, 28, 46, 0.35);
}
@media (max-width: 640px) {
  .hn-hero-bg {
    background-position: 50% 26%;
  }
}
.hero-search-inner .hero-headline,
#searchSection .hn-headline { color: var(--text-on-dark) !important; }
.hero-search-inner .hero-subhead,
#searchSection .hn-subhead { color: rgba(240, 246, 252, 0.9) !important; }
#searchSection.hn-hero .hn-subhead {
  font-size: clamp(18px, 2.1vw, 20px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  max-width: 26rem;
  text-wrap: balance;
  margin-bottom: 26px !important;
}
#searchSection.hn-hero .hn-inner--playful .hn-subhead {
  margin-bottom: 28px !important;
  max-width: 38rem;
  font-size: clamp(15px, 1.9vw, 17px);
  font-weight: 400;
  line-height: 1.55;
}
.hero-search-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  width: 100%;
}
.hero-search-inner .hero-headline {
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 10px;
}
.hero-search-inner .hero-subhead {
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 420px;
}

/* The big pill search bar */
.hero-search-bar {
  display: flex;
  width: 100%;
  max-width: 560px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: #fff;
  box-shadow: 0 4px 24px rgba(43, 109, 233,.10);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.hero-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 4px 28px rgba(43, 109, 233,.18);
}
.hero-search-input {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 15px 20px !important;
  font-size: 15px !important;
  color: var(--text);
  width: 100% !important;
  box-shadow: none !important;
}
.hero-search-input::placeholder { color: var(--text-muted); }
.hero-search-input:focus { outline: none; border: none !important; }
.hero-search-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: var(--text-on-dark);
  border: none;
  border-radius: 0 999px 999px 0;
  padding: 0 24px;
  font: 700 14px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.hero-search-btn:hover { background: #1a4fa8; }

/* Secondary row: locate + remember */
.hero-search-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-locate-link {
  background: none;
  border: none;
  color: var(--accent);
  font: 600 13px/1 inherit;
  cursor: pointer;
  padding: 0;
  transition: opacity .12s;
}
.hero-locate-link:hover { opacity: .7; }
.hero-meta-divider {
  color: var(--muted);
  font-size: 12px;
  opacity: .5;
}
.hero-location-status {
  margin-top: 8px;
  font-size: 13px;
}

/* AI chat — quiet secondary row below the main bar */
.hero-ai-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  width: 100%;
  max-width: 560px;
  text-align: left;
}
.hero-ai-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
  text-align: center;
}
.hero-ai-input-row {
  display: flex;
  gap: 8px;
}
.hero-ai-input {
  flex: 1;
  font-size: 13px !important;
  padding: 10px 14px !important;
}

@media (max-width: 600px) {
  .hero-search { padding: 32px 16px 28px !important; }
  .hero-search-bar { max-width: 100%; }
  .hero-search-btn { padding: 0 16px; font-size: 13px; }
  .hero-ai-row { max-width: 100%; }
}

.hero-compact-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.eyebrow-inline {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.hero-compact-tagline {
  font-size: 12px;
  color: var(--muted);
}

/* ─── Customize button — prominent, right-anchored ───────────────────────── */
.planner-summary-row {
  align-items: center;
}
/* planner-toggle-btn canonical definition is above */

@media (max-width: 480px) {
  .hero-compact-label { flex-direction: column; gap: 2px; }
}

/* ─── Weight summary + Customize button row ──────────────────────────────── */
.weight-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}
.weight-summary-row .weight-summary {
  flex: 1;
  margin-bottom: 0;
}
.weight-summary-row .planner-toggle-btn {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

/* Remove the old margin-left: auto now that button is in the summary row */
.planner-summary-row .planner-toggle-btn {
  margin-left: 0;
}

/* ─── Zip code hint ───────────────────────────────────────────────────────── */
.location-best-results {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  padding: 6px 10px;
  background: rgba(43, 109, 233,.05);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.location-best-results strong { color: var(--accent); }

/* Location meta row — hint + remember checkbox on the same line */
.location-meta-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.remember-location-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); cursor: pointer;
  white-space: nowrap; user-select: none;
  flex-shrink: 0;
}
.remember-location-label input[type="checkbox"] {
  width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent);
}
/* Privacy info tooltip */
.location-privacy-tip {
  position: relative; display: inline-flex; align-items: center;
  width: 16px; height: 16px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  line-height: 1;
}
.location-privacy-tip:hover .location-privacy-tooltip,
.location-privacy-tip:focus .location-privacy-tooltip {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.location-privacy-tooltip {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  width: 230px;
  background: var(--navy-deep); color: var(--text-on-dark);
  font-size: 11.5px; line-height: 1.5; font-weight: 400;
  padding: 8px 10px; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(15, 28, 46, 0.35);
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 100; white-space: normal;
}
.location-privacy-tooltip::after {
  content: ''; position: absolute; top: 100%; right: 6px;
  border: 5px solid transparent; border-top-color: var(--navy-deep);
}

/* ── Crowd model explanation tooltip ─────────────────────────────────────── */
.crowd-info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}
.crowd-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.28);
  color: rgba(148, 163, 184, 0.85);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
  cursor: help;
}
.hn-hero-verdict-dock .crowd-info-icon {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(186, 210, 232, 0.6);
}
.crowd-info-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  background: #0f1c2e;
  color: rgba(226, 232, 240, 0.92);
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 400;
  padding: 8px 11px;
  border-radius: 9px;
  box-shadow: 0 4px 18px rgba(15, 28, 46, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 200;
  white-space: normal;
  text-align: center;
}
.crowd-info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0f1c2e;
}
.crowd-info-tip:hover .crowd-info-tooltip,
.crowd-info-tip:focus .crowd-info-tooltip,
.crowd-info-tip:focus-within .crowd-info-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Crowd Explainer block (hero card) ─────────────────────────────────── */
.vcard-crowd-explainer {
  margin: 14px 0 0;
  padding: 9px 12px 9px 13px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(148, 163, 184, 0.25);
}
.crowd-expl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
}
.crowd-expl-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(186, 200, 218, 0.45);
}
.crowd-expl-level {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.crowd-expl-factors {
  margin: 0 0 3px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(210, 224, 238, 0.82);
}
.crowd-expl-tip {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: rgba(186, 200, 218, 0.55);
}

/* Level-specific accent colors */
.crowd-expl--quiet {
  border-left-color: rgba(74, 222, 128, 0.6);
}
.crowd-expl--quiet .crowd-expl-level {
  color: rgba(74, 222, 128, 0.9);
}
.crowd-expl--moderate {
  border-left-color: rgba(251, 191, 36, 0.5);
}
.crowd-expl--moderate .crowd-expl-level {
  color: rgba(251, 191, 36, 0.9);
}
.crowd-expl--busy {
  border-left-color: rgba(248, 113, 113, 0.5);
}
.crowd-expl--busy .crowd-expl-level {
  color: rgba(248, 113, 113, 0.9);
}
.crowd-expl--avoid {
  border-left-color: rgba(239, 68, 68, 0.6);
}
.crowd-expl--avoid .crowd-expl-level {
  color: rgba(248, 113, 113, 1);
}

/* Light mode variant (if hero-light ever activates) */
.vcard--hero-light .crowd-expl--quiet .crowd-expl-level  { color: #15803d; }
.vcard--hero-light .crowd-expl--moderate .crowd-expl-level { color: #92400e; }
.vcard--hero-light .crowd-expl--busy .crowd-expl-level   { color: #b91c1c; }
.vcard--hero-light .crowd-expl--avoid .crowd-expl-level  { color: #b91c1c; }
.vcard--hero-light .vcard-crowd-explainer { background: rgba(15, 28, 46, 0.04); }
.vcard--hero-light .crowd-expl-factors { color: #3e5060; }
.vcard--hero-light .crowd-expl-tip { color: #6b8096; }

/* ── Table Drive column no-origin hint ──────────────────────────────────── */
#compareTable[data-no-origin] th[data-sort="drive"]::after {
  content: 'set location';
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0.7;
  margin-top: 2px;
}

/* ─── Customize button — left-aligned ────────────────────────────────────── */
.weight-summary-row {
  justify-content: flex-start;
}
.weight-summary-row .planner-toggle-btn {
  margin-left: 0;
  margin-right: auto;
  order: -1; /* appears before the summary text */
}
.weight-summary-row .weight-summary {
  order: 1;
}

/* ─── AI compare box ──────────────────────────────────────────────────────── */
.compare-ai-box {
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.compare-ai-box::before {
  content: 'AI pick';
  position: absolute;
  top: 12px; right: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.ai-thinking {
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}
.ai-verdict-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-verdict-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  font-weight: 400;
}

/* ─── Site footer ─────────────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 40px 16px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--bg-page);
  margin-top: 16px;
}
.site-footer a {
  color: var(--accent);
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIORITY 2 — AI Natural Language Chat Widget
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-chat-widget {
  margin-top: 6px;
  padding: 14px 16px;
  background: #EEF2F7;
  border-radius: 14px;
  border: 1px solid var(--border);
  position: relative;
}

.ai-chat-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ai-chat-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.ai-chat-hint {
  font-size: 11px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
}
.ai-chat-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ai-chat-input {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  transition: border-color .14s, background .14s;
  min-width: 0;
}
.ai-chat-input::placeholder { color: var(--muted); }
.ai-chat-input:focus {
  outline: none;
  border-color: rgba(43, 109, 233,.7);
  background: rgba(255,255,255,.13);
}
.btn-ai {
  background: var(--accent);
  color: var(--text-on-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font: 600 13px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, transform .1s;
  flex-shrink: 0;
}
.btn-ai:hover   { background: var(--accent-hover); transform: translateY(-1px); }
.btn-ai:active  { transform: translateY(0); }
.btn-ai:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* AI Result States */
.ai-chat-result {
  margin-top: 10px;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  transition: all .2s;
}
.ai-chat-loading {
  background: rgba(26, 46, 69, 0.05);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: italic;
}
.ai-chat-success {
  background: rgba(34,179,138,.12);
  border: 1px solid rgba(34,179,138,.25);
}
.ai-chat-error {
  background: rgba(217,91,91,.1);
  border: 1px solid rgba(217,91,91,.3);
  color: var(--danger);
}
.ai-result-header {
  font-weight: 700;
  color: #e2eaf8;
  margin-bottom: 5px;
}
.ai-result-text {
  color: rgba(226,234,248,.85);
  line-height: 1.6;
}
.ai-result-actions {
  margin-top: 10px;
}
.ai-result-jump-btn {
  background: rgba(43, 109, 233,.2);
  border: 1px solid rgba(43, 109, 233,.45);
  border-radius: 999px;
  color: #93c5fd;
  font: 600 12px/1 inherit;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .12s;
}
.ai-result-jump-btn:hover { background: rgba(43, 109, 233,.35); }

/* Spinner */
.ai-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.7);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Highlighted row from AI pick */
@keyframes aiHighlight {
  0%   { background: rgba(43, 109, 233,.25); }
  100% { background: transparent; }
}
.ai-highlight { animation: aiHighlight 2.5s ease-out forwards; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRIORITY 3 — Mobile card grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop: hide mobile cards; show table */
.mobile-card-grid { display: none; }

/* Mobile (≤ 760px): hide table, show cards */
@media (max-width: 760px) {
  /* Kept for backwards-compat with older breakpoints; 768px block above is canonical. */
  .table-wrap { display: none; }
  .mobile-card-grid { display: grid; }
}

.mob-location-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #f0f9ff 0%, var(--surface-subtle) 100%);
  border: 1px solid rgba(43, 109, 233, 0.18);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-body);
}
.mob-location-nudge button {
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.mob-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.mob-card:hover,
.mob-card:focus { border-color: var(--accent); box-shadow: 0 4px 20px rgba(43, 109, 233,.12); outline: none; }
.mob-card-selected { border-color: var(--accent); background: #f0f6ff; }

.mob-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.mob-card-name  { font-size: 16px; font-weight: 800; line-height: 1.2; }
.mob-card-score {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(43, 109, 233,.1);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mob-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.mob-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f8fbff;
}
.mob-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.mob-card-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mob-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: 'DM Mono', monospace; }
.mob-stat-val   { font-size: 14px; font-weight: 700; }
.mob-card-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.mob-card-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}
.mob-card-actions > .mob-website-btn,
.mob-card-actions > .mob-card-detail-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
}
.mob-compare-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'DM Mono', monospace;
}
.mob-compare-label input { width: 15px; height: 15px; cursor: pointer; }
.mob-card-detail-btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--text-on-dark);
  border: none;
  border-radius: 999px;
  padding: 10px 12px;
  font: 600 13px/1.2 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity .12s;
  -webkit-tap-highlight-color: transparent;
}
.mob-card-detail-btn:hover { opacity: .88; }

/* ── Mobile cards: lead with conditions + drive (less stat grid) ── */
.mob-chip--pass { font-weight: 700; }
.mob-card-conditions {
  margin: 10px 0 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 600;
}
.mob-card-drive {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 500;
}
.mob-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.mob-meta-divider { opacity: .6; }
.mob-card-actions > .mob-stay-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.12s;
  white-space: nowrap;
}
.mob-card-actions > .mob-stay-btn:hover {
  background: #f9fafb;
  border-color: var(--border-mid);
}

/* Featured partner callout (mobile ranking cards) */
.mob-featured-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 55%, var(--surface-subtle) 100%);
  border: 1px solid #93c5fd;
  border-radius: 12px;
}
.mob-featured-banner .table-featured-pill {
  font-size: 9px;
}
.mob-featured-hint {
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.35;
  flex: 1 1 140px;
}
.mob-partner-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-on-dark) !important;
  background: var(--accent);
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(43, 109, 233, 0.25);
  transition: background 0.12s, filter 0.12s;
}
.mob-partner-cta:hover {
  background: var(--accent-hover);
  filter: brightness(1.03);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIORITY 6 — Enhanced share button
   ═══════════════════════════════════════════════════════════════════════════ */

/* The share button already exists; just ensure it has good mobile tap size */

/* ─── Resort website links ───────────────────────────────────────────────────── */
.resort-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  transition: color .12s;
}
.resort-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.detail-website-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 9px 16px;
  text-decoration: none;
  border-radius: 999px;
}
.detail-website-btn:hover { opacity: .88; }

.mob-website-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  font: 600 13px/1.2 'DM Sans', sans-serif;
  color: var(--text);
  text-decoration: none;
  transition: border-color .12s, background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.mob-website-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #f0f6ff;
}

/* ─── Verdict: context headline + reason chips + top-5 strip ─────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════════
   TWO-COLUMN PLANNER + VERDICT LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

.planner-verdict-row {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 18px;
  align-items: start;
}

/* ── Left column — planner ──────────────────────────────────────────────── */
.planner-col {
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
}

.planner-col-header {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* plannerDetails fills remaining height so score grid expands to match verdict card */
.planner-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Header top row: title + edit button */
.planner-header-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* "Your Ski Preferences — Boston, MA" */
.planner-main-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -.01em;
}

/* " — City, ST" suffix */
#plannerFromLabel {
  color: var(--accent);
  font-weight: 800;
}

/* "Select what matters…" subtitle */
.planner-subtitle {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Edit location button */
.planner-edit-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, color .12s;
  flex-shrink: 0;
}
.planner-edit-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Score grid — 2 columns in planner, fills available height */
.planner-col .score-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 0;
  flex: 1;
  align-content: start;
}

/* Each control card — equal height within row */
.planner-col .score-control {
  padding: 14px 15px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}

/* Section label */
.planner-col .score-control-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 9px;
  letter-spacing: -.01em;
}

/* Priority buttons — horizontal wrapping pills */
.planner-col .priority-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.planner-col .priority-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--border-light);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.2;
  text-align: center;
}
.planner-col .priority-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.planner-col .priority-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}

/* Hint text */
.planner-col .slider-hint {
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 8px;
}

/* Hide old desc text */
.planner-col .score-desc { display: none; }

/* ── Verdict cleanup overrides ─────────────────────────────────────────── */
/* Both columns must be flex columns so inner content can fill the full height */
.verdict-col {
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* #verdictCard must grow to fill the section, then vcard fills #verdictCard */
#verdictCard {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: auto;
}


/* ===== 2026 hero + decision-flow overrides ===== */
.top-nav-inner { max-width: 1100px; padding: 10px 24px; }
/* padding-top:0 — full-bleed hero handles its own top spacing via min-height;
   padding-bottom tightened from 64px to 40px */
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 40px; gap: 18px; }
.card { border-radius: 22px; }
.hero-search-centered { padding: 40px 20px 34px !important; }
.hero-search-shell { width: 100%; display:flex; justify-content:center; }
.hero-search-inner { max-width: 1120px; margin: 0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap: 14px; }
.hero-brand-row-centered { display:flex; flex-direction:column; gap:2px; align-items:center; }
.hero-brand-name { font-size: 16px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.hero-brand-tag { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.hero-search-centered .hero-headline { font-size: clamp(34px, 5.1vw, 62px); line-height: 1.02; max-width: 14ch; margin: 4px auto 0; letter-spacing: -.03em; }
.hero-search-centered .hero-subhead { font-size: 17px; line-height: 1.55; max-width: 760px; margin: 0 auto 8px; }
.hero-search-bar-unified { width: min(100%, 1040px); max-width: 1040px; border-radius: 999px; display:grid; grid-template-columns: minmax(280px,1.6fr) minmax(170px,.7fr) minmax(170px,.7fr) auto; align-items:center; overflow:hidden; border:1px solid rgba(27,42,58,.12); box-shadow: 0 18px 50px rgba(43, 109, 233,.12); }
.hero-search-bar-unified > * { min-width: 0; }
.hero-search-bar-unified .hero-search-input { height: 64px; padding: 0 22px !important; font-size: 16px !important; }
.hero-search-select { height: 64px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background:#fff; padding: 0 18px; font: 700 14px/1 inherit; color: var(--text); appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 28px, calc(100% - 14px) 28px; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; }
.hero-search-select:focus { outline:none; }
.hero-search-bar-unified .hero-search-btn { height: 64px; padding: 0 28px; border-radius: 0 999px 999px 0; font-size: 15px; }
.hero-search-meta-premium { margin-top: 2px; }
.hero-proof-card-centered { width: min(100%, 760px); margin: 10px auto 0; padding: 24px 28px; text-align: left; border: 1px solid rgba(43, 109, 233,.14); background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); box-shadow: 0 14px 36px rgba(30,60,100,.08); }
.hero-proof-kicker { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px; }
.hero-proof-list-stacked { display: grid; gap: 12px; }
.hero-proof-item { display:grid; gap: 3px; }
.hero-proof-item strong { font-size: 15px; color: var(--text); }
.hero-proof-item span { font-size: 15px; line-height: 1.55; color: var(--muted); }
.hero-ai-row-premium { width: min(100%, 760px); max-width: 760px; text-align:left; margin-top: 8px; }
.hero-ai-row-premium .hero-ai-label { text-align:left; }
.planner-verdict-row { grid-template-columns: minmax(0,1.16fr) minmax(360px,.84fr); }
@media (max-width: 1040px) { .hero-search-bar-unified { grid-template-columns: 1fr 1fr; border-radius: 24px; } .hero-search-bar-unified .hero-search-input { grid-column: 1 / -1; border-bottom:1px solid var(--border); } .hero-search-select { border-left:0; border-top:0; border-right:1px solid var(--border); } .hero-search-select:last-of-type { border-right:0; } .hero-search-bar-unified .hero-search-btn { grid-column: 1 / -1; border-radius:0 0 24px 24px; } .planner-verdict-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hero-search-centered { padding: 26px 14px 24px !important; } .hero-search-centered .hero-headline { max-width: 11ch; font-size: clamp(30px, 9vw, 42px); } .hero-search-centered .hero-subhead { font-size: 15px; } .hero-search-bar-unified { grid-template-columns: 1fr; } .hero-search-bar-unified .hero-search-input { border-bottom:1px solid var(--border); } .hero-search-select { border-right:0; border-top:1px solid var(--border); } .hero-search-bar-unified .hero-search-btn { border-radius:0 0 24px 24px; } .hero-proof-card-centered { padding: 18px 18px; } }


.planner-col .score-grid { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FIXES — appended block
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Skip to content (accessibility) ───────────────────────────────────── */
.skip-to-content {
  position: absolute; top: -100px; left: 12px; z-index: 9999;
  background: var(--accent); color: var(--text-on-dark);
  padding: 10px 18px; border-radius: 8px;
  font-weight: 700; font-size: 14px; text-decoration: none;
  transition: top .15s;
}
.skip-to-content:focus { top: 12px; }

/* ── Visually hidden (screen reader only) ───────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Score badge with color tiers ───────────────────────────────────────── */
.score-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  background: #f1f5f9;
  color: var(--text-body);
}
.score-badge.score-great {
  background: rgba(34,179,138,.14);
  color: #0f7060;
}
.score-badge.score-good {
  background: rgba(245,158,11,.13);
  color: #92400e;
}
.score-badge.score-low {
  background: rgba(217,91,91,.12);
  color: #991b1b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPARE SECTION — ranking engine (premium travel / comparison product)
   ═══════════════════════════════════════════════════════════════════════════ */

.compare-section-engine {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: var(--surface-white);
  box-shadow: var(--shadow-sm);
}
.compare-engine-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px 18px;
  background: var(--surface-white);
  border-bottom: 1px solid var(--border-light);
}
/* Stay column — quiet utility link (compare table) */
.table-lodging-link {
  color: #9ca3af;
  font-weight: 400;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.table-lodging-link:hover {
  text-decoration: underline;
}
.compare-engine-head-main { min-width: 0; flex: 1; }
.compare-engine-eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.compare-engine-title-line { display: flex; flex-direction: column; gap: 4px; }
.compare-engine-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.2;
}
.compare-engine-sub.result-count,
#compareSection .compare-engine-sub {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.45;
  max-width: 52ch;
}
.compare-filter-btn.filter-toggle-btn {
  border-color: var(--border-mid);
  background: var(--surface-subtle);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
}
.compare-filter-btn.filter-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-blue-dim);
}
.compare-filter-btn.filter-toggle-btn.filter-toggle-btn--open {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}

.compare-filter-panel.filter-panel {
  margin: 0;
  padding: 18px 20px 20px;
  border: none;
  border-bottom: 1px solid var(--border-mid);
  background: var(--surface-subtle);
}
@media (max-width: 640px) {
  .compare-engine-head {
    padding: 16px 16px 14px;
    flex-direction: column;
    align-items: stretch;
  }
  .compare-engine-title { font-size: 1.2rem; }
  .compare-filter-btn.filter-toggle-btn { justify-content: center; }
  .compare-controls-strip { padding: 12px; }
}

/* ── Unified control strip (search + view all) ─────────────────────────── */
.compare-controls-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}
.compare-search-field {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  display: flex;
  align-items: center;
}
.compare-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.compare-search-input.table-search-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  background: var(--surface-subtle);
  min-height: 42px;
}
.compare-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 109, 233, 0.12);
}
.compare-view-all-btn.btn-secondary {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--border-mid);
  background: #fff;
  color: var(--text);
  flex-shrink: 0;
}
.compare-view-all-btn.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-subtle);
}

/* ── Location hint (integrated callout, not a table row) ────────────────── */
.compare-location-hint:not([hidden]) {
  display: block;
}
.compare-location-hint {
  padding: 0 16px;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}
.compare-location-hint-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 12px 0;
  background: linear-gradient(135deg, #f0f9ff 0%, var(--surface-subtle) 100%);
  border: 1px solid rgba(43, 109, 233, 0.18);
  border-radius: 12px;
}
.compare-location-icon {
  flex-shrink: 0;
  color: var(--accent);
  display: flex;
}
.compare-location-copy {
  margin: 0;
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
}
.compare-location-copy strong {
  color: var(--text);
  font-weight: 600;
}
.compare-location-btn {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.compare-location-btn:hover {
  background: var(--accent-hover);
}

/* ── Table shell (white card on gray section bg) ─────────────────────────── */
.compare-table-shell {
  background: #fff;
  padding: 0;
}
.compare-table-scroll.table-wrap {
  overflow: auto;
  max-height: min(70vh, 720px);
  min-height: min(50vh, 420px);
  border-radius: 0;
}
.comparison-table .compare-th-rank {
  width: 2.5rem;
  text-align: right;
  padding-right: 6px;
}
.compare-th-muted {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
}
.comparison-table .compare-th-primary {
  min-width: 11rem;
}
.comparison-table .compare-rank-cell {
  width: 2.5rem;
  text-align: right;
  vertical-align: top;
  padding-top: 14px;
}
.compare-rank {
  display: inline-block;
  min-width: 1.25rem;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  opacity: 0.35;
  letter-spacing: -0.02em;
}
.comparison-table .compare-select-cell {
  width: 2.25rem;
  text-align: center;
  vertical-align: top;
  padding-top: 13px;
}
/* Hover-reveal compare checkbox inside mountain cell */
.table-compare-check {
  display: block;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
  accent-color: var(--accent);
}
.comparison-table tbody tr:hover .table-compare-check,
.table-compare-check:checked {
  opacity: 1;
}
.comparison-table tbody tr:hover .compare-rank {
  color: var(--text-muted);
}
.comparison-table tbody tr.sponsored-row {
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.35) 0%, #fff 48%);
}
.comparison-table tbody tr.sponsored-row:hover {
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.5) 0%, var(--surface-subtle) 48%);
}

.compare-price-note.price-disclaimer {
  margin: 0;
  padding: 12px 18px 16px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-light);
}

/* Legacy title block (unused in new markup — keep for safety) */
.compare-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.compare-section-title-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.compare-section-title-block h2 { margin: 0; }
.result-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* ── Filter & Sort toggle button ───────────────────────────────────────── */
.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font: 600 13px/1 'DM Sans', sans-serif;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.filter-toggle-btn--open {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}
.filter-toggle-icon { flex-shrink: 0; }
.filter-chevron {
  transition: transform .2s ease;
  flex-shrink: 0;
}
.filter-toggle-btn--open .filter-chevron {
  transform: rotate(180deg);
}

/* ── Collapsible filter panel ──────────────────────────────────────────── */
.filter-panel {
  padding: 16px 0 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  animation: fp-open .18s ease;
}
@keyframes fp-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 6-column grid: 5 filter fields + 1 action column */
.filter-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
  gap: 12px 16px;
  align-items: end;
}

/* Each filter field */
.fp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.fp-micro-hint {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}
.fp-select {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: 600 13px/1.3 'DM Sans', sans-serif;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23667a96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  transition: border-color .12s, box-shadow .12s;
}
.fp-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 109, 233,.1);
}

/* Night skiing toggle column */
.fp-field--toggle {
  align-items: flex-start;
}
.fp-toggle-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font: 600 13px/1.3 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  white-space: nowrap;
}
.fp-toggle-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-dark);
}
.fp-toggle-btn:hover:not([aria-pressed="true"]) {
  border-color: var(--accent);
  color: var(--accent);
}

/* Clear all filters — action column */
.fp-field--action {
  justify-content: flex-end;
  padding-bottom: 2px;
}
.fp-clear-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font: 600 12px/1.4 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .12s;
}
.fp-clear-btn:hover { color: var(--danger); }

/* ── Compare toolbar (legacy class — prefer .compare-controls-strip) ───── */
.compare-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.compare-toolbar .table-search-wrap {
  flex: 1;
  min-width: 0;
}

/* Active filter pills — below search bar */
#compareSection .active-filters {
  padding: 8px 16px 0;
  background: transparent;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 0;
}
.active-filters:empty { display: none; margin: 0; padding: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .filter-panel-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .fp-field--action { grid-column: 3; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .filter-panel-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fp-field--toggle { grid-column: 1; }
  .fp-field--action { grid-column: 2; align-items: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FIXES — appended
   ═══════════════════════════════════════════════════════════════════════════ */

/* FILTERING: Empty state in compare table */
.compare-empty-state {
  padding: 48px 24px !important;
  text-align: center;
  border: none !important;
}
.ces-icon  { font-size: 36px; margin-bottom: 10px; opacity: .4; }
.ces-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ces-sub   { font-size: 14px; color: var(--muted); line-height: 1.55; }
.ces-reset-link {
  background: none; border: none; padding: 0;
  font-size: 14px; color: var(--accent); cursor: pointer;
  text-decoration: underline; font: inherit;
}
.ces-reset-link:hover { opacity: .75; }

/* Hidden gems: human-readable reasons strip */
.gem-reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.gem-breakeven {
  margin-top: 8px; padding: 5px 10px;
  background: #f0fdf4; border: 1px solid #86efac;
  border-radius: 8px; font-size: 12px; font-weight: 600; color: #15803d;
}

/* SECURITY: Crowd colors for all variants generated by crowdClass() */
.crowd-quiet         { color: #15803d; font-weight: 700; }
.crowd-moderate      { color: var(--accent); font-weight: 700; }
.crowd-busy          { color: #d97706; font-weight: 700; }
.crowd-avoid         { color: #dc2626; font-weight: 700; }

/* Score badges */
.score-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 800; font-size: 13px; }
.score-great { background: #dcfce7; color: #15803d; }
.score-good  { background: #dbeafe; color: var(--accent); }
.score-low   { background: #fee2e2; color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL CARD — Redesigned (replaces old .metric-grid + .detail-grid layout)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.detail-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Detail hero (photo header — same vocabulary as verdict card, not homepage hero) ── */
.dhr {
  position: relative;
  padding: 28px 26px 24px;
  background: linear-gradient(180deg, rgba(10, 20, 35, 0.52) 0%, rgba(10, 20, 35, 0.78) 100%), url("/hero-bg.jpg");
  background-size: cover;
  background-position: center 35%;
  border-radius: 18px 18px 0 0;
  color: var(--text-on-dark);
  overflow: hidden;
}
.dhr-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 8px;
}
.dhr-name {
  font-size: clamp(1.65rem, 3.5vw, 2.15rem);
  font-weight: 600;
  color: var(--text-on-dark);
  margin: 0 0 6px;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.dhr-stats {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px;
  line-height: 1.45;
}
.dhr-tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  margin: 0 0 14px;
  line-height: 1.45;
}
.dhr-verdict {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
  margin: 0 0 16px;
  max-width: 54ch;
}
.dhr .vcard-dash-pills {
  margin-top: 0;
  margin-bottom: 18px;
}
.dhr-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.dhr-btn-primary {
  background: var(--accent);
  color: var(--text-on-dark) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(43, 109, 233, 0.35);
  transition: background 0.12s;
}
.dhr-btn-primary:hover {
  background: var(--accent-hover);
}
.dhr-book {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-on-dark) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.12s;
}
.dhr-book:hover {
  background: rgba(255, 255, 255, 0.22);
}
.dhr-btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.12s, border-color 0.12s;
}
.dhr-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}
.dhr-fit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dhr-fit-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}
.dhr-fit-pill-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dhr-cond-slot {
  margin-top: 12px;
}

/* ── Detail body (below photo header) ───────────────────────────────────── */
/* ── Detail panel — scoped dark theme to match Rankings section ─────────── */
#detailSection {
  --panel: rgba(6, 14, 28, 0.98);
  --border: rgba(142, 178, 226, 0.13);
  --border-mid: rgba(142, 178, 226, 0.22);
  --text: rgba(240, 246, 252, 0.88);
  --text-body: rgba(240, 246, 252, 0.72);
  --muted: rgba(240, 246, 252, 0.42);
  --accent: #45a2ff;
}

.detail-body-panel {
  background: rgba(6, 14, 28, 0.97);
  border: 1px solid rgba(142, 178, 226, 0.14);
  border-top: none;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}
.detail-body-block {
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}
.detail-body-block--last {
  border-bottom: none;
}
.detail-why-prose,
.detail-decision-prose {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text);
  margin: 0;
}
.detail-crowd-foot {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
  margin: 14px 0 0;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.detail-header-left { flex: 1; min-width: 0; }

.detail-name {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  margin: 6px 0 10px;
  line-height: 1.1;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.detail-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}

.detail-badge--state            { background: var(--panel-2); }
.detail-badge--pass-epic        { background: rgba(43, 109, 233,.1);  color: #1a4fa8; border-color: rgba(43, 109, 233,.25); }
.detail-badge--pass-ikon        { background: rgba(138,77,255,.1);  color: #6b2fe8; border-color: rgba(138,77,255,.25); }
.detail-badge--pass-indy        { background: rgba(34,179,138,.1);  color: #0f7a57; border-color: rgba(34,179,138,.25); }
.detail-badge--pass-independent { background: rgba(144,164,190,.1); color: #667a96; border-color: rgba(144,164,190,.3); }
.detail-badge--owner            { background: transparent; color: var(--muted); }

/* ── Score ring + action buttons ─────────────────────────────────────────── */
.detail-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.detail-score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-dark);
  box-shadow: 0 4px 14px rgba(43, 109, 233,.3);
  flex-shrink: 0;
}

.detail-score-ring--great { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 4px 14px rgba(5,150,105,.28); }
.detail-score-ring--low   { background: linear-gradient(135deg, #dc2626, #f87171); box-shadow: 0 4px 14px rgba(220,38,38,.28); }

.detail-score-num { font-size: 26px; font-weight: 800; line-height: 1; }
.detail-score-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .88; margin-top: 2px; }

.detail-header-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Stats Strip ─────────────────────────────────────────────────────────── */
.detail-stats-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.detail-stat {
  padding: 16px 10px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.detail-stat:last-child { border-right: none; }

.detail-stat-val { font-size: 18px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; color: var(--text); }
.detail-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: 'DM Mono', monospace; }

/* ── Sub-card 2×2 grid ───────────────────────────────────────────────────── */
.detail-grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.sub-card-new {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.sub-card-title-new {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
}

/* ── Extra stat rows ─────────────────────────────────────────────────────── */
.detail-extra-stats {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.detail-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.detail-extra-row strong { color: var(--text); font-weight: 700; }

/* ── Crowd card ──────────────────────────────────────────────────────────── */
.detail-crowd-label { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.detail-crowd-reasons { margin-top: 12px; }
.detail-crowd-reason { font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ── Ski Score factor rows ───────────────────────────────────────────────── */
.detail-score-factors { display: flex; flex-direction: column; gap: 0; }

.detail-factor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(26, 46, 69, 0.05);
}
.detail-factor-row:last-child { border-bottom: none; }

.detail-factor-row--total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
}
.detail-factor-row--total .detail-factor-lbl,
.detail-factor-row--total .detail-factor-val { font-size: 15px; color: var(--text); font-weight: 800; }

.detail-factor-lbl { color: var(--muted); }
.detail-factor-val { color: var(--text); font-weight: 700; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .detail-stats-strip { grid-template-columns: repeat(3, 1fr); }
  .detail-stat:nth-child(3) { border-right: none; }
  .detail-stat:nth-child(4),
  .detail-stat:nth-child(5) { border-top: 1px solid var(--border); }
  .detail-stat:nth-child(4) { border-right: 1px solid var(--border); }

  /* 3-column top cards → 1-column stack on tablet */
  .detail-header-rebuilt { grid-template-columns: 1fr !important; }
  .detail-top-card { min-height: auto !important; }
}

@media (max-width: 760px) {
  .detail-grid-new { grid-template-columns: 1fr; }
  .detail-stats-strip { grid-template-columns: repeat(3, 1fr); }
  .detail-header-right { width: 100%; justify-content: flex-start; }

  /* Ensure sub-cards also stack on mobile */
  .detail-grid-new { grid-template-columns: 1fr !important; }
  .sub-card-new { min-height: auto !important; }
}

@media (max-width: 480px) {
  .detail-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .detail-stat:nth-child(2n)  { border-right: none; }
  .detail-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .detail-stat:nth-child(3)   { border-right: 1px solid var(--border); }
  .detail-stat:nth-child(4)   { border-right: none; }
  .detail-stat:nth-child(5)   { grid-column: 1 / -1; border-right: none; }

  /* Tighten card padding on small phones */
  .detail-top-card { padding: 14px !important; }
  .sub-card-new    { padding: 14px !important; }
  .detail-header-rebuilt { gap: 8px !important; }
  .detail-grid-new       { gap: 8px !important; }
  /* Mountain stats grid: 2 cols on small screens */
  .detail-top-card .detail-stats-2col { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL PANEL — Mobile-First Redesign (dp-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.dp-inner {
  display: flex;
  flex-direction: column;
}

/* ── Hero — reuses vcard-hero tier tints ─────────────────────────────────── */
.dp-hero {
  padding: 18px 18px 16px;
  border-bottom: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dp-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dp-back-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(26, 46, 69, 0.1);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.dp-back-btn:hover { background: rgba(255, 255, 255, .9); color: var(--text); }

.dp-name {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.08;
  color: var(--text);
  letter-spacing: -.025em;
}
.dp-meta {
  font-size: 13px;
  color: var(--muted);
}
.dp-sponsor-tagline {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.5;
}

/* ── CTA row ─────────────────────────────────────────────────────────────── */
.dp-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.dp-cta-primary {
  flex: 1;
  min-width: 160px;
  background: var(--accent);
  color: var(--text-on-dark) !important;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .12s;
  min-height: 46px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-cta-primary:hover { background: var(--accent-hover); }
.dp-cta-book {
  background: #22b38a;
  color: var(--text-on-dark) !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dp-cta-book:hover { background: #1f9e78; }
.dp-cta-site {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .12s;
}
.dp-cta-site:hover { color: var(--accent); }

/* ── Sections ────────────────────────────────────────────────────────────── */
.dp-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.dp-section-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Why / reasons ───────────────────────────────────────────────────────── */
.dp-reasons {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
}
.dp-reasons li { margin-bottom: 4px; }
.dp-why-text {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
}

/* ── Watchout callout ────────────────────────────────────────────────────── */
.dp-watchout {
  margin-top: 10px;
  padding: 10px 13px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  line-height: 1.5;
}

/* ── Live conditions slot ────────────────────────────────────────────────── */
.dp-conditions { margin-top: 10px; }

/* ── Forecast ────────────────────────────────────────────────────────────── */
.dp-hist-line {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}
.dp-hist-line strong { color: var(--text); }
.dp-forecast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

/* ── Score factor bars ───────────────────────────────────────────────────── */
.dp-factors {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dp-factor-row {
  display: grid;
  grid-template-columns: 100px 1fr 68px;
  align-items: center;
  gap: 10px;
}
.dp-factor-lbl {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.dp-factor-track {
  height: 6px;
  background: #e7eef7;
  border-radius: 999px;
  overflow: hidden;
}
.dp-factor-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22b38a);
  border-radius: 999px;
}
.dp-factor-note {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.dp-score-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.dp-score-total strong {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.dp-score-denom {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* ── Terrain bars ────────────────────────────────────────────────────────── */
.dp-terrain {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dp-terrain-row {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: 10px;
}
.dp-terrain-lbl {
  font-size: 13px;
  color: var(--text);
}
.dp-terrain-pct {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

/* ── Mountain stat rows ──────────────────────────────────────────────────── */
.dp-stat-rows {
  display: flex;
  flex-direction: column;
}
.dp-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(26, 46, 69, 0.06);
  font-size: 14px;
}
.dp-stat-row:last-child { border-bottom: none; }
.dp-stat-row span { color: var(--muted); }
.dp-stat-row strong { color: var(--text); font-weight: 700; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.dp-footer {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dp-footer-site {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.dp-footer-site:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .dp-name { font-size: 1.5rem; }
  .dp-factor-row { grid-template-columns: 84px 1fr 58px; }
  .dp-terrain-row { grid-template-columns: 84px 1fr 36px; }
}


.score-control--full {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}
.score-control--full .priority-btns {
  justify-content: center;
}

/* ── Score breakdown tooltip ─────────────────────────────────────────────── */
#scoreTooltip {
  position: absolute;
  z-index: 9999;
  width: 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(30,60,100,.15);
  pointer-events: auto;
}
#scoreTooltip[hidden] { display: none; }
.stip-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.stip-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.stip-label { font-size: 12px; color: var(--text); width: 88px; flex-shrink: 0; }
.stip-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.stip-bar-fill  { height: 100%; border-radius: 99px; }
.stip-val { font-size: 12px; font-weight: 700; color: var(--text); width: 24px; text-align: right; flex-shrink: 0; }
.stip-note { font-size: 11px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.score-badge--tip { cursor: pointer; transition: transform .1s, opacity .1s; }
.score-badge--tip:hover { opacity: .82; transform: scale(1.08); }

/* ── Hero AI toggle + panel ──────────────────────────────────────────────── */
.hero-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: 600 13px/1 inherit;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s;
}
.hero-ai-toggle:hover { color: var(--accent); }
.hero-ai-chevron { transition: transform .2s ease; flex-shrink: 0; }
.hero-ai-toggle[aria-expanded="true"] .hero-ai-chevron { transform: rotate(180deg); }
.hero-ai-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.hero-ai-panel[hidden] { display: none; }
.hero-ai-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-example-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  font: 500 12px/1 inherit;
  color: var(--accent);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.ai-example-chip:hover { background: #eff6ff; border-color: #93c5fd; }

/* ── Edge cases: location, verdict loading, storm strip, mobile empty ───── */
.hero-location-status--error {
  color: var(--danger);
  font-weight: 600;
}

.vcard-placeholder--loading .vcard-placeholder-sub {
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
}
.vcard-loading-pulse {
  animation: vcardPulse 1.2s ease-in-out infinite;
}
@keyframes vcardPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.97); }
}
.vcard-placeholder-btn {
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
  font: 700 13px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.vcard-placeholder-btn:hover {
  background: var(--accent);
  color: var(--text-on-dark);
}

.storm-card--loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-style: italic;
}
.storm-loading-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: vcardPulse 1s ease-in-out infinite;
}
.storm-card--muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.mob-grid-empty {
  text-align: center;
  padding: 28px 18px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--panel-2);
}
.mob-grid-empty-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.mob-grid-empty-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 6px;
}
.mob-grid-empty-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.vcard-writeup--fallback {
  font-style: italic;
  color: rgba(255,255,255,.6);
}
.vcard-score-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: opacity .1s;
}
.vcard-score-mini-pill:hover { opacity: .9; color: rgba(255,255,255,.9); }
.vcard-score-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(74,222,128,.85);
  flex-shrink: 0;
}
.vcard-score-mini-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-right: 1px;
}
.vcard-score-mini-num {
  font-weight: 700;
  color: rgba(255,255,255,.92);
}
.vcard-score-fit-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-left: 3px;
  letter-spacing: 0.03em;
}
.hn-runner-score-fit-label {
  margin-left: 4px;
  color: var(--text-muted);
}

.hidden-gems-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 18px 14px;
}

/* ═══════════════════════════════════════════════════════════════
   HYBRID HOMEPAGE REDESIGN — hn-* namespace
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
/* Inner content is full-width; outer .card + #searchSection supply the shell */
.hn-hero { padding: 0 !important; }
.hn-shell { width: 100%; display: flex; justify-content: center; }
.hn-inner {
  width: 100%;
  max-width: 980px;
  padding: 44px 28px 36px;
  margin: 0 auto;
  text-align: center;
}
.hn-headline {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  color: var(--text) !important;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 auto 16px;
  max-width: 22ch;
}
.hn-headline em { color: var(--accent); font-style: normal; font-weight: 600; }
.hn-subhead {
  font-size: 16px;
  color: var(--muted) !important;
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 36rem;
  font-weight: 400;
}
.hn-inner--playful {
  max-width: 720px;
  padding: 48px 24px 44px;
}
.hn-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 246, 252, 0.78);
  margin: 0 auto 12px;
  text-align: center;
}
.hn-inner--playful .hn-headline {
  max-width: 18ch;
  margin-bottom: 14px;
  font-weight: 600;
}
.hn-inner--playful .hn-subhead {
  margin-bottom: 28px !important;
  max-width: 38rem;
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.55;
}
.hn-hero-card {
  text-align: left;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 18px 40px rgba(15, 28, 46, 0.14);
  max-width: 640px;
  margin: 0 auto;
}
.hn-field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--hn-form-text);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.hn-hero-loc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.hn-hero-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--hn-form-text);
  border: 1.5px solid rgba(51, 65, 85, 0.14);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hn-hero-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.hn-hero-input:focus {
  outline: none;
  border-color: var(--hn-form-accent-ring);
  box-shadow: 0 0 0 3px var(--hn-form-accent-dim);
}
.hn-hero-primary-btn {
  flex: 0 0 auto;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-on-dark);
  background: linear-gradient(165deg, #3b7aed 0%, var(--accent) 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform 0.1s, filter 0.12s;
}
.hn-hero-primary-btn:hover {
  filter: brightness(1.05);
}
.hn-hero-primary-btn:active {
  transform: scale(0.98);
}
.hn-hero-primary-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hn-form-accent-ring);
}
.hn-hero-loc-foot {
  margin-top: 12px;
}
.hn-locate-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hn-form-text-muted);
  background: var(--hn-form-surface-subtle);
  border: 1px solid rgba(51, 65, 85, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hn-locate-pill:hover {
  color: var(--hn-form-text);
  background: #eef4fb;
  border-color: rgba(43, 109, 233, 0.25);
}
.hn-hero-tweaks {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(51, 65, 85, 0.1);
}
.hn-tweaks-lead {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hn-form-text-muted);
  margin: 0 0 14px;
}
.hn-hero-tweak-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) {
  .hn-hero-tweak-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
}
.hn-hero-tweak .hn-tweak-name {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: var(--hn-form-text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.hn-fd-chips--hero {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hn-box {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  text-align: left;
  max-width: 100%;
}
.hn-box-top { display: flex; gap: 12px; margin-bottom: 14px; align-items: stretch; }
.hn-loc {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.hn-loc:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 109, 233, 0.12);
}
.hn-loc-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.hn-loc-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  font-family: inherit;
  padding: 0;
}
.hn-loc-input::placeholder { color: var(--text-muted); font-weight: 400; }
.hn-go-btn {
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
  font-family: inherit;
}
.hn-go-btn:hover { background: var(--accent-hover); }

.hn-chips-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.hn-chips-lbl { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.hn-pchip, .hn-tchip, .hn-dchip {
  font-size: 13px;
  font-weight: 500;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s, color .12s;
}
.hn-pchip:hover, .hn-tchip:hover, .hn-dchip:hover {
  border-color: var(--border-mid);
  color: var(--text);
}
.hn-pchip:focus-visible, .hn-tchip:focus-visible, .hn-dchip:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 109, 233, 0.14);
}
.hn-chip-on {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: var(--accent) !important;
}

.hn-meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.hn-meta-sep { color: var(--border); font-size: 12px; }
.hn-ai-tog { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; font-family: inherit; }
.hn-ai-tog:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.hn-trust-txt { font-size: 12px; color: var(--muted); margin-left: auto; font-weight: 400; }
.hn-location-status {
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
  min-height: 1em;
}
.hn-vis-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Top pick full width ── */
.hn-verdict-full { width: 100%; max-width: 100%; }

/* ── Booking strip (aligned with results system) ── */
.hn-booking-strip:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--rs-surface-subtle);
  border: 1px solid var(--rs-border) !important;
  border-radius: var(--rs-radius) !important;
  box-shadow: var(--shadow-sm);
}
.hn-booking-left { display: flex; align-items: center; gap: 12px; }
.hn-booking-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hn-booking-head { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.hn-booking-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hn-booking-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hn-booking-badge { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; }
.hn-booking-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s;
}
.hn-booking-btn:hover { background: var(--accent-hover); }

/* ── Runner-up section — scenic photo background ── */
.hn-runners-section.hn-results-panel {
  padding: 24px 20px 26px;
  position: relative;
  background-image: url('/runner-bg.jpg');
  background-size: cover;
  background-position: center 38%;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 28px rgba(15, 28, 46, 0.18);
}
.hn-runners-section.hn-results-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg,
    rgba(8, 18, 34, 0.78) 0%,
    rgba(12, 26, 48, 0.68) 55%,
    rgba(18, 34, 60, 0.58) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.hn-runners-section .hn-results-section-head,
.hn-runners-section .hn-runners-grid {
  position: relative;
  z-index: 1;
}
.hn-runners-section .hn-results-heading {
  color: #f0f6fc;
}
.hn-runners-section .hn-results-sub {
  color: rgba(200, 220, 240, 0.72);
}
.hn-results-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.hn-results-section-head--metro { margin-bottom: 10px; }
.hn-results-section-head-text { min-width: 0; }
.hn-results-heading {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
/* Metro heading — quieter, it leads into nav pills not a content section */
.hn-metro-section .hn-results-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.hn-metro-section .hn-results-sub {
  display: none;
}
.hn-results-sub {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 42ch;
}
.hn-refine-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #dde5ee;
  border-radius: 12px;
}
.hn-refine-prompt[hidden] { display: none; }
.hn-refine-prompt-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hn-refine-prompt-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #1a2e45;
}
.hn-refine-prompt-text span {
  font-size: 13px;
  color: #7a92a8;
  line-height: 1.45;
}
.hn-refine-prompt-btn {
  flex-shrink: 0;
  background: #1a2e45;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s;
}
.hn-refine-prompt-btn:hover { background: #273044; }
/* Urgent state — bad or marginal conditions */
.hn-refine-prompt--urgent {
  background: #f0f6ff;
  border-color: #93c5fd;
  border-width: 1.5px;
}
.hn-refine-prompt--urgent .hn-refine-prompt-text strong {
  color: #1e3a5f;
}
.hn-refine-prompt--urgent .hn-refine-prompt-text span {
  color: #3d5166;
}
.hn-refine-prompt--urgent .hn-refine-prompt-btn {
  background: #1e3a5f;
}
.hn-refine-prompt--urgent .hn-refine-prompt-btn:hover {
  background: #0f1c2e;
}
@media (max-width: 640px) {
  .hn-refine-prompt { flex-direction: column; align-items: flex-start; }
  .hn-refine-prompt-btn { width: 100%; text-align: center; }
}
.hn-refine-prompt-bar {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--rs-surface-subtle);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius);
  display: flex;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
.hn-refine-prompt-bar .btn-text.hn-refine-toggle {
  appearance: none;
  background: var(--surface-white);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 24px;
  min-height: 44px;
  min-width: min(100%, 280px);
  border-radius: 10px;
  font-family: inherit;
  flex-shrink: 0;
  width: 100%;
  max-width: 320px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hn-refine-prompt-bar .btn-text.hn-refine-toggle:hover {
  background: var(--rs-accent-soft);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}
@media (max-width: 640px) {
  .hn-refine-prompt-bar {
    padding: 14px 12px;
  }
}
.hn-conditions-guidance {
  margin-top: 12px;
  border-radius: 12px;
  background: #f0f4f8;
  border: 1px solid #dde5ee;
  padding: 18px 20px;
}
.hn-guidance-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.hn-guidance-icon {
  font-size: 22px;
  flex-shrink: 0;
  opacity: 0.5;
  margin-top: 2px;
}
.hn-guidance-text {
  flex: 1;
  min-width: 200px;
}
.hn-guidance-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #1a2e45;
  display: block;
  margin-bottom: 5px;
}
.hn-guidance-text p {
  font-size: 13px;
  color: #3d5166;
  line-height: 1.55;
  margin: 0;
}
.hn-guidance-btn {
  flex-shrink: 0;
  background: #1a2e45;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  align-self: center;
  transition: background 0.12s;
}
.hn-guidance-btn:hover { background: #273044; }
@media (max-width: 640px) {
  .hn-guidance-inner { flex-direction: column; }
  .hn-guidance-btn { width: 100%; text-align: center; }
}

.hn-runners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.hn-runner-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(10, 22, 44, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--rs-radius);
  padding: 14px 16px 12px;
  text-decoration: none;
  color: #f0f6fc;
  transition: border-color .15s, box-shadow .15s, background .15s;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
.hn-runner-card:hover {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(10, 22, 44, 0.70);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30);
}
.hn-runner-sponsored { border-color: rgba(251, 191, 36, 0.50) !important; border-width: 1px; }
.hn-runner-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.hn-runner-sponsor { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(200,220,240,0.75); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); padding: 2px 7px; border-radius: 999px; }
.hn-runner-partner-callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
}
.hn-runner-partner-pill {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200,220,240,0.80);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 3px 9px;
  border-radius: 999px;
}
.hn-runner-partner-hint {
  font-size: 12px;
  color: rgba(200,220,240,0.60);
  line-height: 1.45;
}
.hn-runner-name { font-size: 1rem; font-weight: 600; color: #f0f6fc; margin: 0; line-height: 1.3; letter-spacing: -0.02em; }
.nrc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nrc-state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(160, 200, 235, 0.70);
  margin-bottom: 2px;
}
.nrc-name { margin-bottom: 2px; }
.nrc-differentiator {
  font-size: 12px;
  font-weight: 600;
  color: rgba(200, 230, 255, 0.90);
  margin-bottom: 4px;
  margin-top: 2px;
  line-height: 1.35;
}
.hn-runner-blurb { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: rgba(180, 210, 235, 0.72); flex: 1; min-height: 0; }
.hn-runner-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); }
.hn-runner-meta { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.hn-runner-drive { font-size: 12px; font-weight: 500; color: rgba(180, 210, 235, 0.72); }
.hn-runner-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 600;
  color: rgba(200, 220, 240, 0.85);
  flex-shrink: 0;
}
.hn-runner-score-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  opacity: 0.9;
}
.hn-runner-score-num { font-weight: 700; color: rgba(200,220,240,0.90); font-variant-numeric: tabular-nums; }
.hn-rchip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.hn-rchip-snow { background: rgba(43,109,233,0.22); color: #93c5fd; border: 1px solid rgba(147,197,253,0.25); }
.hn-rchip-pass { background: rgba(167,139,250,0.18); color: #c4b5fd; border: 1px solid rgba(196,181,253,0.25); }

/* ── Refine (planner) panel — dark navy treatment matching hero aesthetic ── */
.hn-refine-panel {
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  background: #0f1c2e;
  color: var(--text-on-dark);

  --panel: #152538;
  --panel-2: #1a2d42;
  --border: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.10);
  --text: #f0f6fc;
  --muted: rgba(186, 200, 218, 0.6);
  --accent: #5aaddc;
  --accent-hover: #7fc4e8;
  --text-on-dark: #f0f6fc;
}
.hn-refine-panel .planner-col-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hn-refine-panel .planner-col-header h2,
.hn-refine-panel .planner-col-header h3 {
  color: #f0f6fc;
}
.hn-refine-panel .planner-col-header p {
  color: rgba(186, 200, 218, 0.6);
}
.hn-refine-panel .planner-main-title {
  color: #f0f6fc;
}
.hn-refine-panel .planner-details {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hn-refine-panel .score-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  align-content: start;
}
.hn-refine-panel .score-control {
  padding: 14px 15px 12px;
  background: #152538;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}
.hn-refine-panel .score-control-label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 9px;
  letter-spacing: -0.01em;
  color: #f0f6fc;
}
.hn-refine-panel .priority-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}
.hn-refine-panel .priority-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(186, 200, 218, 0.75);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.2;
  text-align: center;
}
.hn-refine-panel .priority-btns--compact .priority-btn {
  font-size: 11px;
  padding: 5px 9px;
  white-space: normal;
  line-height: 1.25;
  max-width: 100%;
}
.hn-refine-panel .priority-btn:hover {
  border-color: #5aaddc;
  color: #5aaddc;
  background: rgba(90, 173, 220, 0.08);
}
.hn-refine-panel .priority-btn.active {
  background: #5aaddc;
  border-color: #5aaddc;
  color: #0f1c2e;
  font-weight: 700;
}
@media (max-width: 640px) {
  #plannerSection .priority-btn,
  .hn-refine-panel .priority-btn {
    min-height: 44px;
    padding: 10px 14px;
    box-sizing: border-box;
  }
  #plannerSection .priority-btns--compact .priority-btn,
  .hn-refine-panel .priority-btns--compact .priority-btn {
    min-height: 40px;
  }
}
.hn-refine-panel .slider-hint {
  font-size: 11px;
  color: rgba(186, 200, 218, 0.45);
  line-height: 1.4;
  margin-top: 8px;
  font-style: normal;
}

.planner-refine-footer {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.planner-see-verdict-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #5aaddc;
  color: #0f1c2e;
  transition: background 0.12s;
}
.planner-see-verdict-btn:hover {
  background: #7fc4e8;
}
.planner-see-verdict-hint {
  margin: 0;
  font-size: 13px;
  color: rgba(186, 200, 218, 0.5);
  line-height: 1.45;
  flex: 1;
  min-width: 200px;
}

@media (max-width: 640px) {
  .hn-refine-panel .score-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .hn-inner { padding: 28px 16px 30px; }
  .hn-headline { font-size: clamp(26px, 8vw, 34px); }
  .hn-box-top { flex-direction: column; }
  .hn-go-btn { width: 100%; padding: 14px; text-align: center; border-radius: 9px; }
  .hn-meta-row { flex-wrap: wrap; gap: 8px 10px; }
  .hn-trust-txt { margin-left: 0; width: 100%; text-align: center; font-size: 11px; line-height: 1.35; }
  .hn-runners-grid { grid-template-columns: 1fr 1fr; }
  .hn-booking-strip { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hn-runners-grid { grid-template-columns: 1fr; }
}

/* ── Runner-up book button + crowd chip ── */
.hn-runner-book {
  font-size: 12px;
  font-weight: 600;
  color: #a8d4f5;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  padding: 6px 12px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  transition: background .12s, border-color .12s;
}
.hn-runner-book:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.34);
}
.hn-rchip-crowd { background: rgba(20,160,80,0.22); color: #6ee7a8; border: 1px solid rgba(110,231,168,0.25); }
.hn-rchip-crowd-mod { background: rgba(251,191,36,0.18); color: #fcd34d; border: 1px solid rgba(252,211,77,0.25); }
.hn-rchip-warn  { background: rgba(248,113,113,0.18); color: #fca5a5; border: 1px solid rgba(252,165,165,0.25); }
.hn-rchip-pass-indy { background: rgba(167,139,250,0.18) !important; color: #c4b5fd !important; border: 1px solid rgba(196,181,253,0.25); }

.hn-runner-sponsored .hn-runner-sponsor {
  color: rgba(200,220,240,0.75);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
}
.hn-runner-book.hn-runner-book--cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  background: var(--accent) !important;
  color: var(--text-on-dark) !important;
  border: none !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  box-shadow: none;
}
.hn-runner-book.hn-runner-book--cta:hover {
  background: var(--accent-hover) !important;
  filter: none;
}
.hn-runner-sponsored .hn-runner-bottom {
  flex-wrap: wrap;
  gap: 12px;
}
.hn-runner-sponsored .hn-runner-book.hn-runner-book--cta {
  flex: 1 1 auto;
  text-align: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Verdict card — light focal card (travel / inspiration, not dashboard)
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-verdict-full.hn-results-panel {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 0 !important;
}
#verdictCard {
  min-height: 340px;
}
#verdictSection.hn-results-panel .vcard--dash {
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: var(--rs-surface);
}
.vcard--dash {
  border-radius: var(--rs-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--panel);
}
.vcard-hero-dash {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 22px 24px 20px;
  min-height: 0;
  max-height: 300px;
  color: var(--text-on-dark);
  border-bottom: none;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.78) 100%),
    url('/hero-bg.jpg');
  background-size: cover;
  background-position: center 38%;
  overflow: hidden;
}
.vb-verdict-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  align-self: flex-start;
}
.vb-verdict-badge--go {
  background: rgba(74, 222, 128, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.45);
  color: #4ade80;
}
.vb-verdict-badge--maybe {
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}
.vb-verdict-badge--skip {
  background: rgba(248, 113, 113, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #f87171;
}
.vcard-hero-dash-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.vcard-hero-dash-left {
  min-width: 0;
  flex: 1;
}
.vcard-eyebrow-dash {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
  line-height: 1.3;
}
/* Until origin is set — makes preloaded pick read as “not yours yet” */
.vcard-zip-nudge {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 12px;
  line-height: 1.45;
  max-width: 28rem;
}
.vcard-zip-nudge strong {
  color: var(--text-on-dark);
  font-weight: 600;
}
.vcard-name-dash {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  font-weight: 600;
  color: var(--text-on-dark);
  letter-spacing: -0.03em;
  line-height: 1.15;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s;
}
.vcard-name-dash:hover {
  color: rgba(255,255,255,.82);
}
.vcard-name-dash--static {
  cursor: default;
  pointer-events: none;
}
.vcard-name-dash--static:hover {
  color: var(--text);
}
.vcard-score-ring-dash {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(43, 109, 233, 0.25);
  border: 3px solid #fff;
}
.vcard-score-ring-num {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-on-dark);
}
.vcard-score-ring-lbl {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 3px;
}
.vcard-dash-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.vcard-dash-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.88);
}
.vcard-dash-pill--cond-great,
.vcard-dash-pill--cond-good {
  color: #4ade80;
  border-color: rgba(74,222,128,.4);
  background: rgba(74,222,128,.18);
}
.vcard-dash-pill--cond-warn {
  color: #fbbf24;
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.18);
}
.vcard-dash-pill--cond-bad {
  color: #f87171;
  border-color: rgba(248,113,113,.4);
  background: rgba(248,113,113,.18);
}
.vcard-dash-pill--crowd-low {
  color: #4ade80;
  border-color: rgba(74,222,128,.4);
  background: rgba(74,222,128,.18);
}
.vcard-dash-pill--crowd-mod {
  color: #fbbf24;
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.18);
}
.vcard-dash-pill--crowd-high {
  color: #f87171;
  border-color: rgba(248,113,113,.4);
  background: rgba(248,113,113,.18);
}
.vcard-body-dash {
  padding: 16px 22px 18px;
  background: var(--rs-surface);
}
.vcard-actions-dash {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.vcard-writeup--dash {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.85);
  margin: 10px 0 16px;
  padding: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: 52ch;
}
.vcard-writeup--dash.vcard-writeup--loading {
  min-height: 3.2em;
  background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.08) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 8px !important;
  animation: shimmer 1.4s infinite;
}
.vcard-fallback-copy {
  display: none;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 14px;
}
.verdict-conditions-slot {
  margin-bottom: 12px;
}
.verdict-conditions-slot .cond-row {
  gap: 6px;
}
.verdict-conditions-slot .cond-chip {
  background: #f1f5f9 !important;
  color: var(--text-body) !important;
  border-color: var(--border-light) !important;
}
.vcard-actions-dash {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* Supportive nudge when conditions are weak or fit is low — icy inset, not an alert */
.vcard-guidance-inset {
  margin-top: 20px;
  padding: 15px 16px 17px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0f7ff 0%, #e8f2fc 100%);
  border: 1px solid rgba(43, 109, 233, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.vcard-guidance-inset-title {
  margin: 0 0 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #1e3a4d;
}
.vcard-guidance-inset-body {
  margin: 0 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.52;
  font-weight: 500;
  color: #4a6178;
}
.vcard-guidance-inset-cta {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.vcard-guidance-inset-cta:hover {
  color: var(--accent-hover);
}
.vcard-guidance-inset-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Weekend lodging — secondary trip-planning block (not a banner ad) */
.vcard-lodging-module {
  margin-top: 22px;
  padding: 16px 16px 15px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbfd 0%, #f1f6fa 100%);
  border: 1px solid rgba(34, 50, 71, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.vcard-lodging-label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5a6a7a;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(34, 50, 71, 0.1);
  border-radius: 999px;
}
.vcard-lodging-headline {
  margin: 0 0 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #1e3a4d;
}
.vcard-lodging-support {
  margin: 0 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: #52606d;
}
.vcard-lodging-cta {
  display: inline-block;
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.vcard-lodging-cta:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vcard-lodging-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.vcard-lodging-disclosure {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  color: #6b7c8c;
}
a.vcard-book-btn,
.vcard-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  background: var(--accent);
  color: var(--text-on-dark) !important;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}
a.vcard-book-btn:hover,
.vcard-book-btn:hover {
  background: var(--accent-hover);
}
button.vcard-detail-btn,
.vcard-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  background: var(--rs-surface);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
button.vcard-detail-btn:hover,
.vcard-detail-btn:hover {
  background: var(--rs-surface-subtle);
  border-color: var(--border-mid);
}
.vcard-book-btn--disabled,
.vcard-detail-btn--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}
.vcard-demo-blurb {
  opacity: 0.85;
}

/* Storm / Hidden gems — section headers */
.feature-panel .feature-panel-header {
  margin-bottom: 14px;
}
.feature-panel.card {
  background: var(--surface-white);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.feature-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VERDICT PRE-LOCATION — shown before user enters a location
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-verdict-collapsed {
  display: none !important;
}

/* Smoothly reveal verdict once location is set */
.verdict-section {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.hn-verdict-reveal {
  opacity: 0;
  transform: translateY(-6px);
}

.vcard-location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: var(--muted);
}
.vcard-location-bar-text {
  font-size: 13px;
  line-height: 1.45;
}
.vcard-location-bar-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.vcard-location-bar-btn:hover { opacity: .85; }
.vcard-location-prompt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  flex-wrap: wrap;
}
.vcard-location-prompt-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-section-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.vcard-location-prompt-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vcard-location-prompt-text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.vcard-location-prompt-text span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.vcard-location-prompt-btn {
  background: var(--accent);
  color: var(--text-on-dark);
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  min-height: 40px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
  font-family: inherit;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vcard-location-prompt-btn:hover {
  background: var(--accent-hover);
}
@media (max-width: 640px) {
  .vcard-location-prompt { padding: 18px; }
  .vcard-location-prompt-btn { width: 100%; text-align: center; }
  .vcard-location-bar { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2026 REDESIGN — new component styles
   Append to end of styles.css. Do not edit anything above this block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Results & discovery region (homepage) ─────────────────────────────── */
.hn-results-region {
  display: flex;
  flex-direction: column;
  gap: var(--rs-gap);
  margin: 0;
  padding: 0;
}
.hn-results-region > .hn-results-panel {
  margin: 0;
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius);
  box-shadow: var(--shadow-sm);
}
/* Runner-up section overrides the generic panel background — must come AFTER the rule above */
.hn-results-region > .hn-runners-section.hn-results-panel {
  background-image: url('/runner-bg.jpg');
  background-size: cover;
  background-position: center 38%;
  background-color: #0c1a30;
  border: none;
}
#verdictSection.hn-results-panel {
  padding: 0;
  overflow: hidden;
}
.hn-results-trust {
  margin: 0;
  padding: 12px 18px;
  background: var(--rs-surface-subtle);
  border-bottom: 1px solid var(--rs-border);
}
.hn-results-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 4px;
}
.hn-results-trust-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.hn-results-trust-k {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hn-results-trust-l {
  font-weight: 500;
  color: var(--muted);
}
.hn-results-trust-sep {
  width: 1px;
  height: 12px;
  background: var(--border);
  margin: 0 6px;
  align-self: center;
}
@media (max-width: 520px) {
  .hn-results-trust-sep { display: none; }
  .hn-results-trust-list { gap: 10px 14px; justify-content: flex-start; }
}

/* ── Metro / explore tiles — lightweight pill navigation ──────────────── */
.hn-metro-section {
  padding: 14px 20px 18px;
}
.hn-metro-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hn-metro-card {
  flex-shrink: 0;
  background: var(--surface-subtle);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-light);
  transition: border-color 0.12s, background 0.12s;
  box-shadow: none;
}
.hn-metro-card:hover {
  border-color: var(--rs-accent-line);
  background: var(--accent-blue-dim);
}
.hn-metro-city {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hn-metro-detail {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .hn-metro-grid { display: flex; flex-wrap: wrap; gap: 8px; }
}

/* ── Runner-up crowd forecast chip ──────────────────────────────────────── */
.hn-runner-crowd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
  align-self: flex-start;
}
.hn-runner-crowd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hn-crowd-dot--quiet { background: #22c55e; }
.hn-crowd-dot--mod   { background: #f59e0b; }
.hn-crowd-dot--busy  { background: #ef4444; }

/* Crowd chip colour themes — dark-glass context inside runner-up section */
.crowd-quiet-chip {
  background: rgba(20,160,80,0.22);
  color: #6ee7a8;
  border: 1px solid rgba(110,231,168,0.28);
}
.crowd-mod-chip {
  background: rgba(251,191,36,0.18);
  color: #fcd34d;
  border: 1px solid rgba(252,211,77,0.28);
}
.crowd-busy-chip {
  background: rgba(248,113,113,0.18);
  color: #fca5a5;
  border: 1px solid rgba(252,165,165,0.28);
}

/* ── Verdict card: crowd pill label tweaks ───────────────────────────────── */
/* Ensure "Crowd forecast: Light" reads clearly on the dark hero */
.vcard-dash-pill--crowd-low {
  color: #4ade80;
  border-color: rgba(74,222,128,.4);
  background: rgba(74,222,128,.18);
}
.vcard-dash-pill--crowd-mod {
  color: #fbbf24;
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.18);
}
.vcard-dash-pill--crowd-high {
  color: #f87171;
  border-color: rgba(248,113,113,.4);
  background: rgba(248,113,113,.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero tweak chips (pass / drive / ski day)
   ═══════════════════════════════════════════════════════════════════════════ */

.hn-fd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Chips in hero card */
#searchSection .hn-pchip,
#searchSection .hn-tchip,
#searchSection .hn-dchip {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border-light);
  color: var(--hn-form-text);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  white-space: nowrap;
}
#searchSection .hn-pchip:hover,
#searchSection .hn-tchip:hover,
#searchSection .hn-dchip:hover {
  border-color: rgba(43, 109, 233, 0.75);
  color: var(--text-primary);
  background: rgba(43, 109, 233, 0.08);
}
#searchSection .hn-chip-on {
  background: rgba(43, 109, 233, 0.28) !important;
  border-color: rgba(43, 109, 233, 0.35) !important;
  color: var(--text-primary) !important;
}

/* Meta row (AI toggle) under hero card */
.hn-meta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hn-meta-sep { color: rgba(255,255,255,0.3); font-size: 12px; }
.hn-ai-tog {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.12s;
}
.hn-ai-tog:hover { color: var(--text-on-dark); }
.hn-trust-txt {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-left: auto;
  font-weight: 400;
  text-align: right;
}

/* Location status / detect button */
.hero-locate-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font: 500 13px/1 inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
}
.hero-locate-link:hover { color: var(--text-on-dark); }
.hn-location-status {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
  min-height: 1em;
  position: relative;
  z-index: 1;
}
.hero-location-status--error { color: #fca5a5 !important; font-weight: 600; }

/* Hidden select utility */
.hn-vis-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hn-inner--playful {
    padding: 36px 18px 32px;
  }
  .hn-hero-card {
    padding: 18px 16px 16px;
    border-radius: 14px;
  }
  .hn-hero-loc-row {
    flex-direction: column;
  }
  .hn-hero-primary-btn {
    width: 100%;
    text-align: center;
  }
  #searchSection .hn-pchip,
  #searchSection .hn-tchip,
  #searchSection .hn-dchip {
    padding: 8px 12px;
    font-size: 12px;
  }
  .hn-trust-txt { display: none; }
}

@media (max-width: 414px) {
  /* Common phone widths (414/390/375) */
  .hn-inner--playful { padding: 32px 14px 28px; }
  .hn-hero-card { padding: 16px 14px 14px; }
  .hn-hero-pill-label { width: 42px; }
  .hn-results-section-head { gap: 10px; }
  .hn-runners-section.hn-results-panel { padding: 20px 14px 22px; }
  .compare-tray-inner { padding: 10px 12px; border-radius: 16px; }
}

/* ── Filter bar chevron ──────────────────────────────────────────────────── */
.hn-fb-chevron {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 3px;
  line-height: 1;
  vertical-align: middle;
  transition: transform 0.15s ease, color 0.12s;
  font-style: normal;
}
.hn-fb-seg--clickable:hover .hn-fb-chevron {
  color: var(--text-muted);
}
.hn-fb-seg--open .hn-fb-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════════════════
   STORM CHASER + HIDDEN GEMS — display chips, powder alert, empty states
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Display-only chips (distinct from clickable filter chips) ─────────── */
/* metric-chip = interactive (blue tint, bold)
   display-chip = informational (neutral grey, regular weight) */
.display-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f0f4f8;
  color: #3d5166;
  font-size: 12px;
  font-weight: 500;
  border: none;
}
.display-chip--drive {
  background: #eaf0f8;
  color: #1a2e45;
  font-weight: 600;
}

/* ── Storm chip row ─────────────────────────────────────────────────────── */
.storm-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

/* ── No-snow label inside a card ────────────────────────────────────────── */
.storm-no-snow {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
  display: block;
}

/* ── Empty state — no storm in forecast ─────────────────────────────────── */
.storm-empty-state {
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.storm-empty-icon {
  font-size: 22px;
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 4px;
}
.storm-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.storm-empty-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
}

/* ── Powder alert — section-level active state ──────────────────────────── */
.storm-alert-active {
  background: linear-gradient(160deg, #eff6ff 0%, #f8fafc 60%) !important;
  border-color: #93c5fd !important;
}
.storm-alert-active .feature-title {
  color: #1e3a5f;
}
.storm-card--alert {
  border-color: rgba(37, 99, 235, 0.3) !important;
  background: linear-gradient(160deg, #eff6ff 0%, #fff 55%) !important;
}

/* ── "See conditions →" footer CTA on feature cards ────────────────────── */
.feature-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.feature-card-cta {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.12s;
}
.planner-card--clickable:hover .feature-card-cta {
  color: var(--accent);
}

/* ── Gem reasons row — inherit display-chip styles ──────────────────────── */
.gem-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-WIDTH EMPTY STATES — storm chaser + runner-up subtitle expansion
   ═══════════════════════════════════════════════════════════════════════════ */

/* Storm empty state spans all 3 grid columns */
.storm-empty-state--full {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0;
}
.storm-empty-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #f7fafc;
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
}
.storm-empty-icon {
  font-size: 28px;
  opacity: 0.4;
  line-height: 1;
  flex-shrink: 0;
}
.storm-empty-body {
  flex: 1;
  min-width: 0;
}
.storm-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.storm-empty-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

/* Runner-up subtitle — expands to full width below the header row
   when carrying a long storm note or condition warning */
.hn-results-sub--expanded {
  flex-basis: 100%;
  max-width: none;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: #3d5166;
  font-size: 13px;
  line-height: 1.55;
}

/* Make the section head a flex-wrap container so the expanded
   subtitle drops to its own full-width row naturally */
.hn-results-section-head {
  flex-wrap: wrap;
}

/* ── Affiliate disclosure ──────────────────────────────────────────────────── */
.site-footer-affiliate {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
}
.hn-booking-affiliate {
  display: block;
  font-size: 11px;
  color: #7a92a8;
  margin-top: 3px;
}
.affiliate-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(240, 246, 252, 0.55);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Split hero: editorial + image (homepage) — cool gray panel, nav accent blue only --- */
#searchSection.hn-hero-split {
  --hn-headline: #f0f6fc;
  --hn-ink: #f0f6fc;
  --hn-ink-mid: rgba(240, 246, 252, 0.78);
  --hn-eyebrow: rgba(147, 197, 253, 0.75);
  --hn-support: rgba(200, 220, 240, 0.65);
  --hn-accent: #7bb3f0;
  --hn-accent-hover: #93c5fd;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #1a3d5c url("/hero-bg.jpg") right 38% / cover no-repeat !important;
  min-height: min(640px, 92vh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#searchSection.hn-hero-split.card {
  background: #1a3d5c url("/hero-bg.jpg") right 38% / cover no-repeat !important;
}
.hn-split-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  min-height: min(640px, 92vh);
  max-width: 1480px;
  margin: 0 auto;
  align-items: stretch;
}
.hn-split-panel--editorial {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 64px) clamp(44px, 6vw, 88px) clamp(36px, 5.5vw, 72px);
  text-align: left;
  background: rgba(20, 44, 70, 0.88);
}
.hn-editorial-inner {
  max-width: 36.5rem;
  margin: 0;
}
.hn-editorial-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--hn-eyebrow);
  margin: 0 0 1.35rem;
}
.hn-editorial-kicker-line {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, rgba(147, 197, 253, 0.6), rgba(147, 197, 253, 0.12));
  border-radius: 1px;
}
.hn-editorial-headline {
  margin: 0 0 1rem;
  padding: 0;
  line-height: 1.06;
  letter-spacing: -0.038em;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.35rem);
  text-transform: none;
  color: var(--hn-headline);
  opacity: 1;
}
.hn-editorial-headline-sub {
  display: block;
  margin-top: 0.04em;
  font-weight: 800;
  letter-spacing: -0.036em;
  color: var(--hn-headline);
  opacity: 1;
}
.hn-editorial-headline-brand {
  color: var(--accent);
  font-weight: 800;
  opacity: 1;
}
.hn-editorial-accent {
  color: var(--hn-accent);
  font-weight: 800;
}
.hn-editorial-support {
  margin: 0 0 1.5rem;
  max-width: 46ch;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--hn-support);
  opacity: 1;
}
.hn-guided-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.hn-guided-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.hn-guided-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  align-items: end;
}
.hn-guided-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.hn-guided-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hn-support);
}
.hn-guided-input,
.hn-guided-select {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--hn-headline);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.hn-guided-input::placeholder {
  color: rgba(200, 220, 240, 0.38);
  font-weight: 500;
  opacity: 1;
}
.hn-guided-input:hover,
.hn-guided-select:hover {
  border-color: rgba(147, 197, 253, 0.45);
}
.hn-guided-input:focus,
.hn-guided-select:focus {
  outline: none;
  border-color: #7bb3f0;
  box-shadow: 0 0 0 3px rgba(123, 179, 240, 0.2);
  background: rgba(255, 255, 255, 0.13);
}
.hn-guided-select {
  padding-right: 40px;
  cursor: pointer;
  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 fill='%23a0c4e8' d='M1.41 0L6 4.59 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
  color-scheme: dark;
}
.hn-guided-input-shell {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.hn-guided-input-shell:hover {
  border-color: rgba(147, 197, 253, 0.45);
}
.hn-guided-input-shell:focus-within {
  border-color: #7bb3f0;
  box-shadow: 0 0 0 3px rgba(123, 179, 240, 0.2);
  background: rgba(255, 255, 255, 0.13);
}
.hn-guided-input-ico,
.hn-guided-input-suf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 220, 240, 0.62);
}
.hn-guided-input-suf {
  color: rgba(200, 220, 240, 0.48);
}
.hn-guided-input.hn-guided-input--shell {
  min-height: 48px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.hn-guided-input.hn-guided-input--shell:hover,
.hn-guided-input.hn-guided-input--shell:focus {
  border: none;
  box-shadow: none;
  background: transparent;
}
.hn-guided-input.hn-guided-input--shell::placeholder {
  color: rgba(200, 220, 240, 0.38);
}

.hn-editorial-actions-main {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.hn-hero-trust {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px 0;
  color: rgba(200, 220, 240, 0.72);
  font-family: 'Inter', system-ui, sans-serif;
  max-width: 320px;
}
.hn-hero-trust-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.hn-hero-trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(147, 197, 253, 0.9);
}
.hn-hero-trust-sub {
  font-size: 11px;
  font-weight: 650;
  color: rgba(200, 220, 240, 0.52);
}
@media (max-width: 520px) {
  .hn-editorial-actions-main { gap: 10px; }
  .hn-hero-trust { max-width: none; }
}
@media (max-width: 520px) {
  .hn-guided-row--half {
    grid-template-columns: 1fr;
  }
}
.hn-editorial-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.35rem;
}
.hn-editorial-actions-secondary {
  padding-left: 2px;
}
.hn-editorial-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  background: var(--hn-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(43, 109, 233, 0.35);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.hn-editorial-cta::after {
  content: " \2192";
  margin-left: 0.4em;
  font-weight: 700;
}
.hn-editorial-cta:hover {
  background: var(--hn-accent-hover);
  box-shadow: 0 4px 16px rgba(43, 109, 233, 0.4);
}
.hn-editorial-cta:active {
  transform: translateY(1px);
}
.hn-editorial-cta:focus-visible {
  outline: 2px solid var(--hn-ink);
  outline-offset: 3px;
}
.hn-editorial-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--hn-accent);
  background: none;
  border: none;
  padding: 0.15em 0;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(123, 179, 240, 0.35);
}
.hn-editorial-link:hover {
  color: var(--hn-accent-hover);
  border-bottom-color: var(--hn-accent-hover);
}
.hn-editorial-status {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(147, 197, 253, 0.8);
  min-height: 1.35em;
  margin: 0.35rem 0 0.5rem;
}
.hn-editorial-status.hero-location-status--error {
  color: #fca5a5;
  font-weight: 600;
}
.hn-editorial-ai {
  margin-top: 0.35rem;
}
.hn-editorial-ai--belowfold {
  margin: 14px 0 18px;
  max-width: 980px;
}
.hn-editorial-ai-tog {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--hn-accent);
  background: none;
  border: none;
  padding: 0.2em 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.hn-editorial-ai-tog:hover {
  color: var(--hn-accent-hover);
}
.hn-editorial-ai-panel {
  margin-top: 14px;
}
/* ── Hero pill filters ──────────────────────────────────────────────────── */
.hn-hero-pills-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 1.5rem;
}
.hn-hero-pill-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hn-hero-pill-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 220, 240, 0.45);
  width: 52px;
  flex-shrink: 0;
}
.hn-hero-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hn-hero-pill {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(200, 220, 240, 0.65);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.hn-hero-pill:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(147, 197, 253, 0.4);
  color: rgba(200, 220, 240, 0.9);
}
.hn-hero-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 109, 233, 0.22);
  border-color: rgba(147, 197, 253, 0.55);
}
.hn-hero-pill.active {
  background: rgba(43, 109, 233, 0.32);
  border-color: rgba(123, 179, 240, 0.55);
  color: #c0dcf8;
}
@media (max-width: 520px) {
  .hn-hero-pill-group { gap: 8px; }
  .hn-hero-pill-label { width: 44px; font-size: 9px; }
  .hn-hero-pill { font-size: 11px; padding: 10px 10px; }
}
/* ── Hero defaults row (secondary controls) ─────────────────────────────── */
.hn-hero-defaults {
  margin: -4px 0 1.4rem;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hn-hero-defaults-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.hn-hero-defaults-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200, 220, 240, 0.48);
}
.hn-hero-defaults-change {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 650;
  color: rgba(147, 197, 253, 0.92);
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(147, 197, 253, 0.28);
}
.hn-hero-defaults-change:hover {
  color: rgba(147, 197, 253, 1);
  border-bottom-color: rgba(147, 197, 253, 0.55);
}
.hn-hero-defaults-change:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 109, 233, 0.22);
  border-radius: 8px;
}
.hn-hero-defaults-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.hn-hero-default-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(240, 246, 252, 0.82);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.hn-hero-default-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(43, 109, 233, 0.14);
  border: 1px solid rgba(147, 197, 253, 0.22);
  color: rgba(147, 197, 253, 0.92);
  flex-shrink: 0;
}
.hn-hero-default-chip:hover {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(147, 197, 253, 0.34);
}
.hn-hero-default-chip:active {
  transform: translateY(1px);
}
.hn-hero-default-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 109, 233, 0.22);
  border-color: rgba(147, 197, 253, 0.55);
}
.hn-hero-defaults-editor {
  margin-top: 12px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
}
.hn-hero-pill-group--secondary {
  align-items: flex-start;
  gap: 10px;
}
.hn-hero-pill-label--secondary {
  width: auto;
  min-width: 70px;
  color: rgba(200, 220, 240, 0.40);
}
#heroDefaultsEditor .hn-hero-pill {
  min-height: 40px;
  padding: 8px 12px;
}

#searchSection.hn-hero-split .hn-editorial-ai-panel .ai-example-chip {
  color: var(--hn-accent);
  border-color: rgba(10, 13, 17, 0.16);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.85);
}
#searchSection.hn-hero-split .hn-editorial-ai-panel .ai-example-chip:hover {
  background: #fff;
  border-color: rgba(43, 109, 233, 0.45);
}
.hn-split-panel--visual {
  position: relative;
  min-height: min(640px, 92vh);
  background: transparent;
  box-shadow: none;
}
.hn-split-visual-bg {
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: none;
  background-size: cover;
  background-position: center 38%;
}
.hn-split-visual-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 15, 0.06) 0%,
    rgba(7, 11, 15, 0.02) 42%,
    rgba(7, 11, 15, 0.38) 100%
  );
  pointer-events: none;
}
.hn-split-visual-meta {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  z-index: 1;
  pointer-events: none;
}
.hn-split-visual-coords {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hn-hero-verdict-section {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(18px, 3.5vw, 36px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.hn-hero-verdict-section > * {
  pointer-events: auto;
}
.hn-hero-verdict-dock {
  width: 100%;
  max-width: min(520px, 100%);
  margin: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
/* One recommendation panel: soft shell, inner zones by spacing (not nested cards) */
.hn-hero-verdict-dock .vcard--dash.vcard--rail {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(
    168deg,
    rgba(12, 22, 40, 0.58) 0%,
    rgba(8, 15, 28, 0.72) 42%,
    rgba(6, 11, 20, 0.9) 100%
  );
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hn-hero-verdict-dock .vcard--dash:not(.vcard--rail) {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 16, 28, 0.68);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hn-hero-verdict-dock .vcard-hero-dash {
  background: transparent !important;
}
.hn-hero-verdict-dock .vcard-hero-dash--dock {
  padding: 22px 20px 18px;
}
.hn-hero-verdict-dock .vb-verdict-badge {
  display: none;
}
.hn-hero-verdict-dock .vcard-top-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(147,197,253,0.35);
  background: rgba(43,109,233,0.24);
  color: rgba(240,246,252,0.95);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hn-hero-verdict-dock .vcard--rail .vcard-top-pill.vcard-eyebrow {
  border-color: rgba(147, 197, 253, 0.22);
  background: rgba(43, 109, 233, 0.14);
}
.hn-hero-verdict-dock .vcard-name-dash {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #f0f6fc;
  margin: 0 0 6px;
}
.hn-hero-verdict-dock .vcard-rec-line {
  margin: 0 0 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(147,197,253,0.95);
}
.hn-hero-verdict-dock .vcard-bodycopy {
  margin: 0 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 520;
  line-height: 1.55;
  color: rgba(240,246,252,0.78);
}
.hn-hero-verdict-dock .vcard-stats3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 4px 0 14px;
}
.hn-hero-verdict-dock .vcard-stat3 {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 0;
  border: none;
  background: transparent;
}
.hn-hero-verdict-dock .vcard-stat3-ico {
  grid-row: 1 / span 2;
  color: rgba(147,197,253,0.95);
  margin-top: 2px;
}
.hn-hero-verdict-dock .vcard-stat3-ico svg {
  display: block;
}
.hn-hero-verdict-dock .vcard-stat3-top {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 750;
  color: rgba(240,246,252,0.92);
  line-height: 1.1;
}
.hn-hero-verdict-dock .vcard-stat3-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 650;
  color: rgba(200,220,240,0.62);
  line-height: 1.1;
}
.hn-hero-verdict-dock .vcard-actions-dash {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 0 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hn-hero-verdict-dock .vcard--rail .vcard-actions-dash {
  border-top: none;
  padding: 26px 0 10px;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hn-hero-verdict-dock .vcard-book-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  background: #2b6de9;
  box-shadow: 0 8px 20px rgba(43,109,233,0.22);
  font-weight: 700;
  font-size: 13px;
}
.hn-hero-verdict-dock .vcard--rail .vcard-book-btn {
  border-radius: 11px;
  box-shadow: 0 10px 26px rgba(43, 109, 233, 0.2);
}
.hn-hero-verdict-dock .vcard-detail-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 9px 16px;
  color: rgba(226, 232, 240, 0.9);
  font-size: 13px;
  font-weight: 650;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  min-height: 42px;
}
.hn-hero-verdict-dock .vcard-detail-btn:hover {
  background: rgba(43, 109, 233, 0.2);
  border-color: rgba(147, 197, 253, 0.35);
  color: #e0f2fe;
}
.hn-hero-verdict-dock .vcard--rail .vcard-detail-btn {
  border-radius: 9px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
}
.hn-hero-verdict-dock .vcard--rail .vcard-detail-btn:hover {
  background: rgba(43, 109, 233, 0.18);
  border-color: rgba(147, 197, 253, 0.28);
}
.hn-hero-verdict-dock .vcard-guidance-compact.vcard-guidance--soft {
  margin-top: 16px;
  margin-bottom: 4px;
}
/* Quiet inline hint when filters are tight — no alert slab */
.hn-hero-verdict-dock .vcard-refine-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.55rem;
  margin: 22px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(186, 200, 218, 0.78);
}
.hn-hero-verdict-dock .vcard-refine-hint-ico {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 16v-4M12 8h.01M22 12a10 10 0 11-20 0 10 10 0 0120 0z' stroke='%2393c5fd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.hn-hero-verdict-dock .vcard-refine-hint-text {
  font-weight: 600;
  color: rgba(200, 214, 230, 0.82);
}
.hn-hero-verdict-dock .vcard-refine-hint-link {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 650;
  color: #93c5fd;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.12s ease;
}
.hn-hero-verdict-dock .vcard-refine-hint-link:hover {
  color: #bfdbfe;
}
.hn-hero-verdict-dock .vcard-refine-hint--option2 {
  align-items: flex-start;
  gap: 0.45rem 0.65rem;
}
.hn-hero-verdict-dock .vcard-refine-hint-inline {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.hn-hero-verdict-dock .vcard-refine-hint-line {
  font-weight: 600;
  color: rgba(200, 214, 230, 0.82);
}
.hn-hero-verdict-dock .vcard-divider {
  margin: 14px 0 0;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.hn-hero-verdict-dock .vcard-runners-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(0.72rem, 1.2vw, 0.78rem);
  font-weight: 700;
  color: rgba(200, 220, 240, 0.62);
  margin-bottom: 12px;
  font-family: 'Inter', system-ui, sans-serif;
}
.hn-hero-verdict-dock .vcard-mini-runner {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  text-align: left;
  width: 100%;
}
.hn-hero-verdict-dock .vcard--rail .vcard-mini-runner {
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
}
.hn-hero-verdict-dock .vcard-mini-runner:hover {
  background: rgba(43,109,233,0.18);
  border-color: rgba(147,197,253,0.32);
}
.hn-hero-verdict-dock .vcard--rail .vcard-mini-runner:hover {
  background: rgba(43, 109, 233, 0.12);
  border-color: rgba(147, 197, 253, 0.22);
}
@media (max-width: 960px) {
  .hn-hero-verdict-dock .vcard-stats3 { grid-template-columns: 1fr; }
}

/* ── Nearby options: zone + row (no heavy strip box) ─ */
.hn-hero-verdict-dock .vcard-runners-strip {
  margin: 20px 0 0;
  padding: 26px 1.35rem 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hn-hero-verdict-dock .vcard-runners-header {
  margin-bottom: 14px;
}
.hn-hero-verdict-dock .vcard-runners-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.hn-hero-verdict-dock .vcard-runners-zone {
  margin: 32px 0 10px;
  padding: 0;
  border: none;
  background: none;
}
.hn-hero-verdict-dock .vcard-runners-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(186, 200, 218, 0.52);
  margin: 0 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
.hn-hero-verdict-dock .vcard-runners-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 640px) {
  .hn-hero-verdict-dock .vcard-actions-dash {
    flex-direction: column;
    align-items: stretch;
  }
  .hn-hero-verdict-dock .vcard-book-btn,
  .hn-hero-verdict-dock .vcard-detail-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .hn-hero-verdict-dock .vcard-runners-mini,
  .hn-hero-verdict-dock .vcard-runners-row {
    grid-template-columns: 1fr;
  }
  .hn-hero-verdict-dock button.vcard-mini-runner {
    max-width: none;
    min-height: 0;
  }
}

/* ===== Homepage Hero V2 Replacement ===== */

/* ── Verdict slot: reset absolute positioning from old split-panel layout ── */
#searchSection.hero-v2 .hn-hero-verdict-dock {
  width: 100%;
  max-width: min(520px, 100%);
}
#searchSection.hero-v2 #verdictSection {
  position: static !important;
  display: block;
  width: 100%;
  padding: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto;
  margin: 0;
}
#searchSection.hero-v2 #verdictCard {
  width: 100%;
}

/* ── Empty state: dark-themed to sit on the hero photo background ─────────── */
#searchSection.hero-v2 .hn-hero-verdict-empty {
  background: rgba(8, 16, 28, 0.64) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 56px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(240,246,252,0.95) !important;
  gap: 0;
}
#searchSection.hero-v2 .hn-verdict-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
  width: 100%;
}
#searchSection.hero-v2 .hn-verdict-empty-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: rgba(200, 220, 240, 0.88) !important;
}
#searchSection.hero-v2 .hn-verdict-empty-list li {
  margin: 0;
  padding: 0 0 0 0.85rem;
  position: relative;
}
#searchSection.hero-v2 .hn-verdict-empty-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(147, 197, 253, 0.55);
}
#searchSection.hero-v2 .hn-verdict-empty-locate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(147, 197, 253, 0.35);
  background: rgba(43, 109, 233, 0.28);
  color: #f0f6fc;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#searchSection.hero-v2 .hn-verdict-empty-locate-btn:hover {
  background: rgba(43, 109, 233, 0.4);
  border-color: rgba(147, 197, 253, 0.5);
}
#searchSection.hero-v2 .hn-hero-verdict-empty-title {
  color: #f0f6fc !important;
}
#searchSection.hero-v2 .hn-hero-verdict-empty-sub {
  color: rgba(200,220,240,0.72) !important;
}
#searchSection.hero-v2 .hn-verdict-empty-or {
  color: rgba(200,220,240,0.5) !important;
  margin-top: 0.65rem !important;
  margin-bottom: 0 !important;
}
@media (max-width: 420px) {
  #searchSection.hero-v2 .hn-verdict-empty-list {
    grid-template-columns: 1fr;
  }
}
#searchSection.hero-v2 {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #0b1b2b url("/hero-bg.jpg") right 38% / cover no-repeat !important;
  min-height: min(560px, 88vh);
}
#searchSection.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8, 18, 32, 0.97) 0%,
    rgba(8, 18, 32, 0.93) 32%,
    rgba(8, 18, 32, 0.62) 52%,
    rgba(8, 18, 32, 0.18) 72%,
    rgba(8, 18, 32, 0.04) 100%
  );
  pointer-events: none;
  z-index: 0;
}
#searchSection.hero-v2 .hero-v2__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  max-width: 1480px;
  margin: 0 auto;
  min-height: min(560px, 88vh);
}
#searchSection.hero-v2 .hero-v2__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 72px) clamp(28px, 4.6vw, 56px);
  background: transparent;
  backdrop-filter: none;
  position: relative;
  z-index: 1;
}
#searchSection.hero-v2 .hero-v2__eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.58);
  margin: 0 0 12px;
}
#searchSection.hero-v2 .hero-v2__headline {
  margin: 0 0 10px;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: #f0f6fc;
}
#searchSection.hero-v2 .hero-v2__headline-accent {
  color: var(--accent);
}
#searchSection.hero-v2 .hero-v2__support {
  margin: 0 0 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: rgba(220, 232, 245, 0.62);
  max-width: 48ch;
}

/* One grouped preferences block: title + Pass/Trip (not two separate sections) */
#searchSection.hero-v2 .hero-v2__ski-day {
  margin-top: 2px;
}
#searchSection.hero-v2 .hero-v2__ski-day-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(200, 220, 240, 0.42);
  margin: 0 0 6px;
}
#searchSection.hero-v2 .hero-v2__ski-day-inner .hero-v2__pill-row {
  margin-top: 6px;
}
#searchSection.hero-v2 .hero-v2__ski-day-inner .hero-v2__pill-row:first-child {
  margin-top: 0;
}

#searchSection.hero-v2 .hero-v2__label {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200, 220, 240, 0.45);
  margin-bottom: 6px;
}
#searchSection.hero-v2 .hero-v2__location {
  display: grid;
  grid-template-columns: 44px 1fr 48px;
  align-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 48px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  overflow: hidden;
}
#searchSection.hero-v2 .hero-v2__location:hover {
  border-color: rgba(147, 197, 253, 0.45);
}
#searchSection.hero-v2 .hero-v2__location:focus-within {
  border-color: rgba(123, 179, 240, 0.9);
  box-shadow: 0 0 0 3px rgba(123, 179, 240, 0.2);
  background: rgba(255, 255, 255, 0.12);
}
#searchSection.hero-v2 .hero-v2__location-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 220, 240, 0.48);
}
#searchSection.hero-v2 .hero-v2__location-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  border: none;
  background: #2b6de9;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
#searchSection.hero-v2 .hero-v2__location-submit:hover {
  background: #1a5dd8;
}
#searchSection.hero-v2 .hero-v2__location-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 650;
  color: rgba(240, 246, 252, 0.92);
}
#searchSection.hero-v2 .hero-v2__location-input::placeholder {
  color: rgba(200, 220, 240, 0.35);
  font-weight: 520;
}

#searchSection.hero-v2 .hero-v2__pill-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}
#searchSection.hero-v2 .hero-v2__ski-day .hero-v2__pill-label {
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9px;
  color: rgba(200, 220, 240, 0.32);
}
#searchSection.hero-v2 .hero-v2__pill-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(200, 220, 240, 0.42);
}
#searchSection.hero-v2 .hero-v2__pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#searchSection.hero-v2 .hero-v2__pill {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(210, 224, 238, 0.72);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
#searchSection.hero-v2 .hero-v2__pill.is-active {
  background: rgba(43, 109, 233, 0.28);
  border-color: rgba(147, 197, 253, 0.42);
  color: #eaf2ff;
}
#searchSection.hero-v2 .hero-v2__pill:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(147, 197, 253, 0.22);
}

#searchSection.hero-v2 .hero-v2__defaults {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}
#searchSection.hero-v2 .hero-v2__defaults-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}
#searchSection.hero-v2 .hero-v2__summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: min(100%, 200px);
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.028);
  color: rgba(230, 240, 250, 0.82);
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 580;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#searchSection.hero-v2 .hero-v2__summary-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(147, 197, 253, 0.2);
}
#searchSection.hero-v2 .hero-v2__change {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(147, 197, 253, 0.78);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(147, 197, 253, 0.35);
}
#searchSection.hero-v2 .hero-v2__change:hover {
  color: #bfdbfe;
  text-decoration-color: rgba(191, 219, 254, 0.55);
}
#searchSection.hero-v2 .hero-v2__defaults-editor {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
}
#searchSection.hero-v2 .hero-v2__mini-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}
#searchSection.hero-v2 .hero-v2__mini-row:first-child { margin-top: 0; }
#searchSection.hero-v2 .hero-v2__mini-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(200, 220, 240, 0.40);
  padding-top: 10px;
}
#searchSection.hero-v2 .hero-v2__mini-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#searchSection.hero-v2 .hero-v2__mini-pill {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(200, 220, 240, 0.78);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
#searchSection.hero-v2 .hero-v2__mini-pill.is-active {
  background: rgba(43, 109, 233, 0.26);
  border-color: rgba(147, 197, 253, 0.50);
  color: #e6f1ff;
}

#searchSection.hero-v2 .hero-v2__cta-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
}
#searchSection.hero-v2 .hero-v2__cta {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  background: #2b6de9;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(43, 109, 233, 0.22);
  width: 100%;
  max-width: 100%;
}
#searchSection.hero-v2 .hero-v2__trust {
  max-width: none;
  color: rgba(200, 220, 240, 0.52);
  font-family: Inter, system-ui, sans-serif;
}
#searchSection.hero-v2 .hero-v2__trust-line {
  font-size: 10.5px;
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(200, 220, 240, 0.4);
}
#searchSection.hero-v2 .hero-v2__trust-sub {
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 550;
  color: rgba(200, 220, 240, 0.32);
}

#searchSection.hero-v2 .hero-v2__aux {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#searchSection.hero-v2 .hero-v2__link {
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 580;
  color: rgba(147, 197, 253, 0.72);
  border-bottom: 1px solid rgba(147, 197, 253, 0.2);
}
#searchSection.hero-v2 .hero-v2__status {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(180, 205, 228, 0.55);
}

#searchSection.hero-v2 .hero-v2__right {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(22px, 4vw, 40px) clamp(18px, 3.5vw, 36px) clamp(28px, 5vw, 48px);
  position: relative;
  z-index: 1;
}
#searchSection.hero-v2 .hero-v2__card {
  width: 100%;
  max-width: 560px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 16, 28, 0.64);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  padding: 18px 18px 16px;
}
#searchSection.hero-v2 .hero-v2__top-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, 0.35);
  background: rgba(43, 109, 233, 0.24);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,246,252,0.95);
  margin-bottom: 12px;
}
#searchSection.hero-v2 .hero-v2__card-name {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f0f6fc;
  margin: 0 0 6px;
}
#searchSection.hero-v2 .hero-v2__card-rec {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 750;
  color: rgba(147,197,253,0.95);
  margin: 0 0 10px;
}
#searchSection.hero-v2 .hero-v2__card-body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 520;
  color: rgba(240,246,252,0.78);
  margin: 0 0 14px;
  max-width: 62ch;
}
#searchSection.hero-v2 .hero-v2__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 14px;
}
#searchSection.hero-v2 .hero-v2__stat-top {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 850;
  color: rgba(240,246,252,0.92);
}
#searchSection.hero-v2 .hero-v2__stat-sub {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(200,220,240,0.62);
  margin-top: 2px;
}
#searchSection.hero-v2 .hero-v2__card-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#searchSection.hero-v2 .hero-v2__card-cta {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: #2b6de9;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(43,109,233,0.25);
}
#searchSection.hero-v2 .hero-v2__card-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(200,220,240,0.78);
  border-bottom: 1px solid rgba(200,220,240,0.22);
  padding: 10px 2px;
}
#searchSection.hero-v2 .hero-v2__divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 14px 0 12px;
}
#searchSection.hero-v2 .hero-v2__runnerups-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200,220,240,0.58);
  margin-bottom: 8px;
}
#searchSection.hero-v2 .hero-v2__runnerups-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#searchSection.hero-v2 .hero-v2__mini {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  padding: 10px 10px 12px;
}
#searchSection.hero-v2 .hero-v2__mini::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 22px;
  height: 14px;
  opacity: 0.28;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M1 13h20M4 13l4-6 3 4 4-7 4 9' stroke='%23b7d6ff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
#searchSection.hero-v2 .hero-v2__mini-name {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 850;
  color: rgba(240,246,252,0.92);
  margin-bottom: 2px;
}
#searchSection.hero-v2 .hero-v2__mini-sub {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(200,220,240,0.62);
}

@media (max-width: 960px) {
  #searchSection.hero-v2 .hero-v2__grid { grid-template-columns: 1fr; }
  #searchSection.hero-v2 .hero-v2__right { justify-content: flex-start; }
  #searchSection.hero-v2 .hero-v2__stats { grid-template-columns: 1fr; }
  #searchSection.hero-v2 .hero-v2__runnerups-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  #searchSection.hero-v2 .hero-v2__defaults-summary-row {
    flex-direction: column;
    align-items: stretch;
  }
  #searchSection.hero-v2 .hero-v2__summary-chip {
    width: 100%;
    min-width: 0;
  }
  #searchSection.hero-v2 .hero-v2__change {
    align-self: flex-end;
  }
}
.hn-hero-verdict-dock--pulse {
  animation: hnVerdictDockIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hnVerdictDockIn {
  0% { opacity: 0.82; transform: translateY(8px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hn-hero-verdict-empty {
  padding: 1.35rem 1.45rem;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.75) inset,
    0 12px 40px rgba(12, 18, 24, 0.14);
  color: #0a0f14;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hn-hero-verdict-empty[hidden] {
  display: none !important;
}
.hn-hero-verdict-empty-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0e7490;
  margin: 0 0 0.45rem;
}
.hn-hero-verdict-empty-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d4ed8;
  margin: 0 0 0.35rem;
}
.hn-hero-verdict-empty-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.52;
  font-weight: 500;
  color: #64748b;
  margin: 0;
}
#verdictCard.hn-verdict-card-root {
  min-height: 0;
}
.hn-hero-verdict-dock .vcard-placeholder {
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.75) inset,
    0 12px 40px rgba(12, 18, 24, 0.14);
  padding: 2rem 1.5rem;
  min-height: 160px;
  color: #0a0f14;
}
.hn-hero-verdict-dock .vcard-placeholder-title {
  opacity: 1;
  color: #0a0f14;
  font-weight: 800;
}
.hn-hero-verdict-dock .vcard-placeholder-sub {
  color: #334155;
  font-weight: 600;
}
.hn-hero-verdict-dock .vcard--dash.vcard--hero-light:not(.vcard--rail),
.hn-hero-verdict-dock .vcard--dash:not(.vcard--rail) {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  color: #f0f6fc;
}
.hn-hero-verdict-dock .vcard-hero-dash--dock {
  max-height: none !important;
  min-height: 0 !important;
  padding: 1.45rem 1.35rem 1.35rem !important;
  color: #f0f6fc !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hn-hero-verdict-dock .vcard--rail .vcard-hero-dash--dock {
  border-bottom: none;
  padding: 1.55rem 1.35rem 1.5rem !important;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-body-dash,
.hn-hero-verdict-dock .vcard-body-dash {
  background: rgba(8, 16, 28, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 1.35rem 18px;
}
.hn-hero-verdict-dock .vcard--rail .vcard-body-dash {
  background: transparent;
  border-top: none;
  padding: 8px 1.35rem 22px;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-name-dash,
.hn-hero-verdict-dock .vcard-name-dash {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-name-dash:hover,
.hn-hero-verdict-dock .vcard-name-dash:hover {
  color: rgba(255,255,255,.85);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-eyebrow-dash,
.hn-hero-verdict-dock .vcard-eyebrow-dash {
  color: rgba(255,255,255,.65);
  text-shadow: none;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-writeup--dash,
.hn-hero-verdict-dock .vcard-writeup--dash {
  color: rgba(255,255,255,.88);
  font-weight: 400;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-writeup--dash.vcard-writeup--fallback {
  color: #334155 !important;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-writeup--dash.vcard-writeup--loading {
  background: linear-gradient(90deg, rgba(12, 18, 24, 0.06) 25%, rgba(12, 18, 24, 0.11) 50%, rgba(12, 18, 24, 0.06) 75%) !important;
}
/* ── All dock overrides now dark — no light mode on homepage card ─────────── */
.hn-hero-verdict-dock .vcard-stat-row,
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pills {
  margin-top: 0.7rem;
  gap: 7px;
}
.hn-hero-verdict-dock .vcard-stat-item,
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill {
  color: rgba(255,255,255,.78);
}
.hn-hero-verdict-dock .vcard-stat-badge.vcard-dash-pill--cond-great,
.hn-hero-verdict-dock .vcard-stat-badge.vcard-dash-pill--cond-good,
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill--cond-great,
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill--cond-good {
  color: #4ade80;
  border-color: rgba(74,222,128,.35);
  background: rgba(74,222,128,.18);
}
.hn-hero-verdict-dock .vcard-stat-badge.vcard-dash-pill--cond-warn,
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill--cond-warn {
  color: #fbbf24;
  border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.18);
}
.hn-hero-verdict-dock .vcard-stat-badge.vcard-dash-pill--cond-bad,
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill--cond-bad {
  color: #f87171;
  border-color: rgba(248,113,113,.35);
  background: rgba(248,113,113,.18);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill--crowd-low  { color: #4ade80; background: none; border: none; }
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill--crowd-mod  { color: #fbbf24; background: none; border: none; }
.hn-hero-verdict-dock .vcard--hero-light .vcard-dash-pill--crowd-high { color: #f87171; background: none; border: none; }
.hn-hero-verdict-dock .vcard--hero-light .vb-verdict-badge--go  { background: rgba(74,222,128,.18); border-color: rgba(74,222,128,.38); color: #4ade80; }
.hn-hero-verdict-dock .vcard--hero-light .vb-verdict-badge--maybe { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.38); color: #fbbf24; }
.hn-hero-verdict-dock .vcard--hero-light .vb-verdict-badge--skip { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.38); color: #f87171; }
.hn-hero-verdict-dock .vcard--hero-light .vb-verdict-badge { font-weight: 700; }
.hn-hero-verdict-dock .vcard--hero-light .affiliate-badge {
  color: #475569;
  background: #e2e8f0;
  font-weight: 600;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-zip-nudge {
  color: #1e293b;
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.12);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-guidance-inset {
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.98) 0%, rgba(232, 242, 252, 0.98) 100%);
  border-color: rgba(43, 109, 233, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-guidance-inset-title {
  color: #1e3a4d;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-guidance-inset-body {
  color: #52606d;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-guidance-inset-cta {
  color: var(--accent);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-guidance-inset-cta:hover {
  color: var(--accent-hover);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-lodging-module {
  background: linear-gradient(180deg, rgba(248, 251, 253, 0.98) 0%, rgba(238, 245, 250, 0.98) 100%);
  border-color: rgba(43, 109, 233, 0.1);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-lodging-headline {
  color: #223247;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-lodging-support {
  color: #52606d;
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-lodging-cta {
  color: var(--accent);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-lodging-cta:hover {
  color: var(--accent-hover);
}
.hn-hero-verdict-dock .vcard--hero-light .vcard-lodging-disclosure { display: none; }
.hn-hero-verdict-dock .vcard--hero-light .vcard-zip-nudge strong { color: #fff; }
@media (max-width: 960px) {
  .hn-split-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hn-split-panel--visual {
    /* On mobile/tablet: keep hero inputs first, then top pick/results */
    min-height: 0;
    order: 0;
    box-shadow: none;
  }
  .hn-split-panel--editorial {
    padding: 2rem 1.35rem 2.75rem;
  }
  .hn-editorial-inner {
    max-width: none;
  }
  .hn-hero-verdict-section {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: 1.25rem 1rem 1.5rem;
    background: transparent !important;
    /* Stack below hero inputs; avoid overlay behavior on mobile */
    display: block;
    pointer-events: auto;
  }
  .hn-split-visual-meta {
    top: 14px;
    left: 16px;
    right: 16px;
  }
}

@media (max-width: 520px) {
  /* Prevent pill rows / labels from clipping on narrow phones */
  .hn-hero-pill-group {
    align-items: flex-start;
    gap: 6px;
  }
  .hn-hero-pill-label {
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 2px;
  }
  .hn-hero-pills {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESORT LISTING — dark theme (matches /compare page aesthetic)
   Applied via #compareSection specificity to override light defaults.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section shell ─────────────────────────────────────────────────────── */
#compareSection.compare-section-engine {
  background: linear-gradient(165deg, rgba(12, 32, 58, 0.97) 0%, rgba(4, 12, 26, 0.99) 100%);
  border-color: rgba(142, 178, 226, 0.22);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* ── Section head ──────────────────────────────────────────────────────── */
#compareSection .compare-engine-head {
  background: transparent;
  border-bottom-color: rgba(142, 178, 226, 0.15);
}
#compareSection .compare-engine-eyebrow {
  color: #45a2ff;
}
#compareSection .compare-engine-title {
  color: #ffffff;
}
#compareSection .compare-engine-sub,
#compareSection #resultCount {
  color: rgba(240, 246, 252, 0.5);
}

/* ── Filter toggle button ──────────────────────────────────────────────── */
#compareSection .compare-filter-btn.filter-toggle-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(142, 178, 226, 0.25);
  color: rgba(240, 246, 252, 0.78);
}
#compareSection .compare-filter-btn.filter-toggle-btn:hover {
  background: rgba(69, 162, 255, 0.12);
  border-color: rgba(94, 148, 222, 0.5);
  color: #45a2ff;
}
#compareSection .compare-filter-btn.filter-toggle-btn.filter-toggle-btn--open {
  background: #45a2ff;
  border-color: #45a2ff;
  color: #f0f6fc;
}

/* ── Filter panel ──────────────────────────────────────────────────────── */
#compareSection .compare-filter-panel.filter-panel {
  background: rgba(8, 18, 38, 0.7);
  border-bottom-color: rgba(142, 178, 226, 0.15);
}
#compareSection .fp-label {
  color: rgba(240, 246, 252, 0.5);
}
#compareSection .fp-select {
  background: rgba(255, 255, 255, 0.07);
  color: #f0f6fc;
  border-color: rgba(142, 178, 226, 0.25);
}
#compareSection .fp-select option {
  background: #0b1b2b;
  color: #f0f6fc;
}
#compareSection .fp-clear-btn {
  color: rgba(240, 246, 252, 0.52);
  background: transparent;
  border-color: rgba(142, 178, 226, 0.25);
}
#compareSection .fp-clear-btn:hover {
  color: #45a2ff;
  border-color: #45a2ff;
}
#compareSection .fp-toggle-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(142, 178, 226, 0.25);
  color: rgba(240, 246, 252, 0.78);
}
#compareSection .fp-micro-hint {
  color: rgba(240, 246, 252, 0.35);
}

/* ── Controls strip (search + view all) ────────────────────────────────── */
#compareSection .compare-controls-strip {
  background: rgba(8, 18, 38, 0.5);
  border-bottom: 1px solid rgba(142, 178, 226, 0.12);
}
#compareSection .table-search-input.compare-search-input {
  background: rgba(255, 255, 255, 0.07);
  color: #f0f6fc;
  border-color: rgba(142, 178, 226, 0.25);
}
#compareSection .table-search-input.compare-search-input::placeholder {
  color: rgba(240, 246, 252, 0.32);
}
#compareSection .compare-search-icon {
  color: rgba(240, 246, 252, 0.35);
}
#compareSection .compare-view-all-btn.btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(142, 178, 226, 0.25);
  color: rgba(240, 246, 252, 0.78);
}
#compareSection .compare-view-all-btn.btn-secondary:hover {
  background: rgba(69, 162, 255, 0.12);
  border-color: #45a2ff;
  color: #45a2ff;
}

/* ── Active filters chips ───────────────────────────────────────────────── */
#compareSection .active-filter-chip {
  background: rgba(69, 162, 255, 0.15);
  border-color: rgba(69, 162, 255, 0.35);
  color: #93c5fd;
}
#compareSection .filter-pill {
  background: rgba(69, 162, 255, 0.12);
  color: #7eb8f7;
  padding: 6px 14px;
  border: 1px solid rgba(69, 162, 255, 0.25);
  margin-bottom: 8px;
}

/* ── Table shell & scroll ───────────────────────────────────────────────── */
#compareSection .compare-table-shell {
  background: transparent;
}
#compareSection .compare-table-scroll.table-wrap {
  border-top: 1px solid rgba(142, 178, 226, 0.12);
  /* Grow with content — inner vertical scrollbar removed; page scrolls instead */
  max-height: none;
  min-height: 0;
  overflow: visible;
}

/* ── Table head ─────────────────────────────────────────────────────────── */
#compareSection .comparison-table thead th {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(240, 246, 252, 0.38);
  border-bottom-color: rgba(142, 178, 226, 0.1);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#compareSection .comparison-table thead th.sortable-th {
  color: rgba(240, 246, 252, 0.38);
}
#compareSection .comparison-table thead th.sortable-th:hover {
  color: #45a2ff;
  background: rgba(69, 162, 255, 0.08);
}
#compareSection .comparison-table thead th.sort-active {
  color: rgba(69, 162, 255, 0.9);
}
#compareSection .compare-th-muted {
  color: rgba(240, 246, 252, 0.28);
}

/* ── Table rows ─────────────────────────────────────────────────────────── */
#compareSection .comparison-table tbody tr {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
#compareSection .comparison-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}
#compareSection .comparison-table tbody td {
  color: rgba(240, 246, 252, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* ── This weekend column — narrative + vibe (readable on dark blue) ───── */
#compareSection .compare-weekend {
  color: rgba(248, 250, 252, 0.96);
}
#compareSection .compare-weekend .story-text {
  display: inline;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: rgba(240, 246, 252, 0.78);
  -webkit-text-fill-color: rgba(240, 246, 252, 0.78);
}
#compareSection .compare-weekend .vibe-tag--mini {
  color: #f1f5f9;
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
  margin: 0 6px 0 0;
  vertical-align: middle;
}

/* ── Mountain name + state ──────────────────────────────────────────────── */
#compareSection .row-name {
  color: #f0f6fc;
  font-weight: 600;
}
#compareSection .row-name:hover {
  color: #45a2ff;
}
#compareSection .row-sub {
  color: rgba(240, 246, 252, 0.42);
}

/* ── Rank number ────────────────────────────────────────────────────────── */
#compareSection .compare-rank {
  color: rgba(240, 246, 252, 0.18);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  opacity: 1;
}

/* ── Hover-reveal checkbox ──────────────────────────────────────────────── */
#compareSection .table-compare-check {
  accent-color: #45a2ff;
}

/* ── Sponsored row ──────────────────────────────────────────────────────── */
#compareSection .comparison-table tbody tr.sponsored-row {
  background: linear-gradient(90deg, rgba(43, 109, 233, 0.14) 0%, transparent 60%);
  outline-color: rgba(43, 109, 233, 0.4);
}
#compareSection .comparison-table tbody tr.sponsored-row:hover {
  background: linear-gradient(90deg, rgba(43, 109, 233, 0.22) 0%, rgba(255,255,255,0.04) 60%);
}

/* ── Lodging link ───────────────────────────────────────────────────────── */
#compareSection .table-lodging-link {
  color: rgba(240, 246, 252, 0.38);
}
#compareSection .table-lodging-link:hover {
  color: #45a2ff;
}

/* ── Checkbox ───────────────────────────────────────────────────────────── */
#compareSection input[type="checkbox"] {
  accent-color: #45a2ff;
}

/* ── Price note ─────────────────────────────────────────────────────────── */
#compareSection .compare-price-note.price-disclaimer {
  background: rgba(8, 18, 38, 0.5);
  border-top-color: rgba(142, 178, 226, 0.12);
  color: rgba(240, 246, 252, 0.3);
}

/* ── Active (selected) row ──────────────────────────────────────────────── */
#compareSection .comparison-table tbody tr.active-row {
  background: rgba(43, 109, 233, 0.12);
  box-shadow: inset 3px 0 0 0 #45a2ff;
}
#compareSection .comparison-table tbody tr.active-row:hover {
  background: rgba(43, 109, 233, 0.18);
}

/* ── Location hint / empty states ──────────────────────────────────────── */
#compareSection .compare-location-hint {
  color: rgba(240, 246, 252, 0.52);
  border-color: rgba(142, 178, 226, 0.2);
  background: rgba(69, 162, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI MODULE — hero variant (inside search card, under Find My Mountain)
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-editorial-ai--hero {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.hn-editorial-ai--hero.hn-editorial-ai--belowfold {
  margin-top: 16px;
}
.hn-editorial-ai--hero .hn-editorial-ai-tog {
  font-size: 12px;
  font-weight: 600;
  color: rgba(200, 220, 240, 0.55);
  text-decoration-color: rgba(200, 220, 240, 0.25);
}
.hn-editorial-ai--hero .hn-editorial-ai-tog:hover {
  color: rgba(240, 246, 252, 0.82);
}