/* HTX Plans styles. Palette and type per the approved brand board (2026-09-16).
   Montserrat throughout. HTX Navy anchors; Sunset sparingly for CTAs and
   accents; Skyline and Bayou as supporting accents. No frameworks. */

:root {
  color-scheme: light;
  --midnight: #0B1F3B;
  --coral: #F7934E;
  --gold: #F7934E;
  --limestone: #FFFFFF;
  --shell: #E7E9EC;
  --slate: #5B6470;
  --ink: #0B1F3B;
  --white: #FFFFFF;

  --skyline: #4F7CA9;
  --bayou: #1E6F5C;
  --sunset-deep: #C96A24;
  --skyline-deep: #3A5F86;

  --cat-music: #F7934E;
  --cat-sports: #4F7CA9;
  --cat-food: #C96A24;
  --cat-family: #2E7D6B;
  --cat-free: #1E6F5C;
  --cat-under30: #0B1F3B;

  --font-display: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --shadow-card: 0 1px 2px rgba(11, 31, 59, 0.06), 0 8px 24px rgba(11, 31, 59, 0.08);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--limestone);
}

img { max-width: 100%; display: block; }
a { color: var(--skyline-deep); }
a:hover { color: var(--midnight); }

/* ---------- Eyebrows, headings ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--slate);
}
.eyebrow--gold { color: var(--gold); }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.page-title {
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.25rem);
  margin: 0.35rem 0 0.5rem;
}
.section-title { font-weight: 700; font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 0.75rem; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Skip link / a11y ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--midnight);
  color: var(--limestone); padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--midnight);
  border-bottom: 1px solid rgba(231, 233, 236, 0.14);
}
.header-inner {
  max-width: 1280px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand-link { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand-link img { height: 42px; width: auto; display: block; max-width: 58vw; }
.site-nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.site-nav a {
  font-weight: 600; font-size: 14px; color: var(--limestone); text-decoration: none;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.site-nav a:hover { background: rgba(231, 233, 236, 0.12); color: #ffffff; }
.site-nav a.active { background: var(--limestone); color: var(--midnight); }

/* Mobile menu button: shown only on phones (<=768px), where it toggles the
 * single .mobile-nav dropdown. Hidden on desktop/tablet. */
.menu-toggle {
  display: none;
  margin-left: auto; flex: 0 0 auto;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px; padding: 12px 13px; cursor: pointer;
}
.menu-toggle:hover { border-color: var(--limestone); }
.menu-icon { display: block; width: 22px; height: 2px; background: var(--limestone); position: relative; }
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--limestone);
}
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; }

/* Mobile dropdown nav: hidden everywhere by default; the <=768px query
 * reveals it only while the header carries .nav-open. */
.mobile-nav { display: none; }
.header-cta {
  display: none;
  font-weight: 700; font-size: 14px; color: var(--midnight) !important;
  background: var(--coral); padding: 10px 18px !important; border-radius: 999px;
}
.header-cta:hover { background: #E8823C !important; }
@media (min-width: 769px) { .header-cta { display: inline-block; } }

/* ---------- Hero ---------- */
.hero {
  background: var(--midnight);
  color: var(--limestone);
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 90% at 85% 10%, rgba(247, 147, 78, 0.14), transparent 60%);
}
.hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hero h1 {
  font-weight: 900; font-size: clamp(2.4rem, 8vw, 4.5rem);
  line-height: 1.02; max-width: 16ch; color: var(--limestone);
}
.hero h1 .accent { color: var(--coral); }
.hero-sub { font-size: 1.15rem; color: var(--limestone); opacity: 0.85; margin: 14px 0 26px; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-block; font-weight: 600; font-size: 16px; text-decoration: none;
  padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--font-body);
}
.btn-primary { background: var(--coral); color: var(--midnight); font-weight: 700; }
.btn-primary:hover { background: #E8823C; color: var(--midnight); }
.btn-ghost { background: transparent; color: var(--limestone); border: 2px solid rgba(255,255,255,0.35); }
.btn-ghost:hover { border-color: var(--limestone); color: var(--limestone); }
.btn-dark { background: var(--midnight); color: var(--limestone); }
.btn-dark:hover { background: #1B3A5F; color: var(--limestone); }
.hero-meta { margin-top: 22px; font-size: 13px; color: var(--limestone); opacity: 0.65; font-weight: 500; }

/* Subtle scroll cue: signals that the weekend picks are one swipe below. */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  color: var(--limestone); opacity: 0.78; text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.scroll-cue:hover { opacity: 1; color: var(--limestone); }
.scroll-cue span { display: inline-block; animation: cue-bounce 2.2s ease-in-out infinite; }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* Mobile: keep the hero compact so event picks land within ~one thumb swipe. */
@media (max-width: 639px) {
  .hero { padding: 34px 0 28px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .hero-sub { font-size: 1.02rem; margin: 12px 0 20px; }
  .hero-meta { margin-top: 16px; }
  .scroll-cue { margin-top: 18px; }
}

/* ---------- Filter bar ---------- */
.filter-bar {
  background: var(--white); border-bottom: 1px solid var(--shell);
  position: sticky; top: 58px; z-index: 90; padding: 12px 0;
}
.filter-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.filter-row + .filter-row { margin-top: 8px; }
.filter-group-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--slate);
  align-self: center; flex: 0 0 auto; margin-right: 4px;
}
.pill {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--shell); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.pill:hover { border-color: var(--ink); }
.pill.active { background: var(--midnight); border-color: var(--midnight); color: var(--limestone); }
.pill .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.pill .count { font-size: 12px; font-weight: 500; color: var(--slate); }
.pill.active .count { color: var(--limestone); opacity: 0.7; }

/* Category pill on cards: dot + label, never color alone */
.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--limestone); border: 1px solid var(--shell);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.cat-pill .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.on-dark .cat-pill { background: transparent; color: var(--limestone); border-color: rgba(255,255,255,0.3); }

/* ---------- Card grid ---------- */
.grid-section { padding: 32px 0 8px; }
.cards {
  display: grid; gap: 20px; grid-template-columns: 1fr;
  padding: 0 0 8px;
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--white); border: 1px solid var(--shell); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; position: relative;
}
.card.sponsored { border: 2px solid var(--gold); }

/* Branded fallback graphic (no hotlinked photos; verified info only) */
.card-graphic {
  aspect-ratio: 16 / 9; background: var(--midnight); color: var(--limestone);
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px 18px;
}
.card-graphic .bg-pattern { position: absolute; inset: 0; opacity: 1; }
.card-graphic .graphic-eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--gold);
  position: relative; z-index: 1; margin-bottom: 6px;
}
.card-graphic .graphic-name {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  line-height: 1.08; letter-spacing: -0.01em; color: var(--limestone);
  position: relative; z-index: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-graphic .graphic-meta {
  position: relative; z-index: 1; margin-top: 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.graphic-price {
  font-weight: 600; font-size: 14px; color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.card-photo { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--midnight); }
.photo-credit { font-size: 11px; color: var(--slate); padding: 4px 18px 0; }

.card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.card-day {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--slate);
}
.card-day .day-gold { color: var(--sunset-deep); }
.card-title { font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.card-pick {
  font-size: 14px; font-style: italic; color: var(--slate);
  border-left: 3px solid var(--skyline); padding-left: 10px; margin: 0;
}
.card-desc { font-size: 15px; color: var(--ink); margin: 0; }
.card-desc.clamped {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.desc-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--sunset-deep); align-self: flex-start;
}
.desc-toggle:hover { text-decoration: underline; }

.meta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.meta-list li {
  font-size: 14px; color: var(--ink); font-weight: 500;
  display: flex; gap: 8px; align-items: baseline;
}
.meta-list .meta-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate);
  flex: 0 0 74px;
}
.meta-list .price-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.meta-list .price-val.hot { color: var(--sunset-deep); }
.price-free-pill {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--white);
  background: var(--cat-free); border-radius: 999px; padding: 2px 12px;
}
.price-note { font-size: 13px; color: var(--slate); font-weight: 400; }

.card-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 6px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-card {
  flex: 1 1 auto; text-align: center; font-size: 15px; padding: 12px 18px; text-decoration: none;
}
.btn-tickets { background: var(--coral); color: var(--midnight); font-weight: 700; }
.btn-tickets:hover { background: #E8823C; color: var(--midnight); }
.btn-details { background: var(--midnight); color: var(--limestone); }
.btn-details:hover { background: #1B3A5F; color: var(--limestone); }
.link-note {
  font-size: 12px; color: var(--slate); line-height: 1.45; margin: 0;
}
.link-note .resale-tag {
  font-weight: 600; color: var(--ink);
}
.featured-tag, .sponsored-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 6px 12px; border-radius: 999px;
}
.featured-tag { background: var(--gold); color: var(--midnight); }
.sponsored-tag { background: var(--midnight); color: var(--gold); border: 1px solid var(--gold); }
.sponsored-disclosure {
  font-size: 12px; color: var(--slate); border-top: 1px solid var(--shell);
  padding-top: 8px; margin: 4px 0 0;
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center; padding: 56px 24px; background: var(--white);
  border: 1px dashed var(--shell); border-radius: var(--radius);
  max-width: 560px; margin: 24px auto;
}
.empty-state .eyebrow { margin-bottom: 8px; display: block; }
.empty-state h3 { font-size: 1.4rem; margin-bottom: 8px; }
.empty-state p { color: var(--slate); margin: 0 0 18px; }

/* ---------- Sections ---------- */
.band-dark { background: var(--midnight); color: var(--limestone); }
.band-dark .section-title, .band-dark h2 { color: var(--limestone); }
.band-dark p { color: var(--limestone); opacity: 0.85; }
.band-light { background: var(--white); border-top: 1px solid var(--shell); border-bottom: 1px solid var(--shell); }
.section-pad { padding: 48px 0; }
.lead { font-size: 1.1rem; max-width: 62ch; }
.stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
.stat { min-width: 110px; }
.stat .num { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.stat .cap { font-size: 13px; color: var(--limestone); opacity: 0.7; font-weight: 500; }
/* Light-background variant for the This Weekend section on the homepage. */
.stat-row--light .num { color: var(--midnight); }
.stat-row--light .cap { color: var(--slate); opacity: 1; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--midnight); color: var(--limestone);
  border-radius: 20px; padding: 36px 28px; margin: 40px 0;
  position: relative; overflow: hidden;
}
.newsletter::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(247, 147, 78, 0.18);
}
.newsletter h2 { font-weight: 900; font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin: 8px 0 10px; }
.newsletter p { color: var(--limestone); opacity: 0.85; max-width: 56ch; margin: 0 0 20px; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.newsletter-form input[type="email"] {
  flex: 1 1 240px; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08); color: var(--limestone); font-size: 15px; font-family: var(--font-body);
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-note { font-size: 12px; color: var(--limestone); opacity: 0.6; margin-top: 12px; }
.newsletter-done { font-weight: 600; color: var(--gold); }

/* ---------- Newsletter placements (2026-09-17 visibility directive) ---------- */
.hero-newsline { margin: 14px 0 0; font-size: 14px; color: var(--gold); font-weight: 600; }
.hero-meta a { color: var(--limestone); font-weight: 700; }

/* After-first-value band: light editorial, not a competing navy box. */
.nl-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--shell);
  border-left: 5px solid var(--gold); border-radius: 16px;
  padding: 26px 28px; margin: 8px 0 40px; box-shadow: var(--shadow-card);
}
.nl-band h2 { font-size: clamp(1.3rem, 3.5vw, 1.7rem); margin: 6px 0 8px; font-weight: 800; color: var(--ink); }
.nl-band p { margin: 0; color: var(--slate); max-width: 52ch; }
.nl-band p.eyebrow--gold { color: var(--gold); }
.nl-band .btn { flex: 0 0 auto; }

/* Inline CTA used at the end of plan pages and category views. */
.nl-cta {
  background: var(--white); border: 1px solid var(--shell); border-radius: 16px;
  padding: 24px 26px; margin: 36px 0 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; box-shadow: var(--shadow-card);
}
.nl-cta p { margin: 0; max-width: 52ch; color: var(--slate); }
.nl-cta p strong { color: var(--ink); }
.nl-cta .btn { flex: 0 0 auto; }

/* Featured newsletter entry in the hamburger menu. */
.mobile-nav .mnav-link--featured {
  display: flex; align-items: center; gap: 12px;
  background: rgba(247, 147, 78, 0.14);
  border: 1px solid rgba(247, 147, 78, 0.45);
  border-radius: 12px; margin: 14px 0 6px; padding: 13px 12px;
  white-space: normal;
}
.mobile-nav .mnav-link--featured:hover { background: rgba(247, 147, 78, 0.22); color: #ffffff; }
.mnav-nl-icon { font-size: 22px; color: var(--gold); flex: 0 0 auto; }
.mnav-nl-text strong { display: block; font-size: 16px; color: #ffffff; }
.mnav-nl-text small { font-size: 12px; color: var(--limestone); opacity: 0.75; }

/* Dedicated newsletter landing page. */
.nl-landing { max-width: 660px; margin: 0 auto; padding: 48px 0 24px; }
.nl-landing-title { font-size: clamp(2rem, 7vw, 3rem); font-weight: 900; margin: 8px 0 14px; color: var(--ink); }
.nl-benefits { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; }
.nl-benefits li { padding-left: 30px; position: relative; font-weight: 600; color: var(--ink); }
.nl-benefits li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--sunset-deep); font-weight: 800;
}

/* Mobile sticky newsletter bar: slim, dismissible, never blocks content.
   Phones only; JS adds body.nl-sticky-on for bottom padding. */
.nl-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--midnight); color: var(--limestone);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(231, 233, 236, 0.18);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
}
.nl-sticky[hidden] { display: none; }
.nl-sticky-link {
  color: #ffffff; font-weight: 700; font-size: 15px; text-decoration: none;
  display: flex; gap: 8px; align-items: center;
}
.nl-sticky-close {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--limestone); border-radius: 50%; width: 30px; height: 30px;
  font-size: 16px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
@media (min-width: 769px) { .nl-sticky { display: none; } }
body.nl-sticky-on { padding-bottom: 60px; }

/* ---------- Save toast + Send My Plan (2026-09-17 retention directive) ---------- */
.btn-sm { padding: 10px 16px; font-size: 14px; }

/* Post-save toast: confirmation first, optional email capture second.
 * Dismissible, never modal, never blocks content. */
#save-toast {
  position: fixed; left: 12px; right: 12px; z-index: 300;
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--white); border: 1px solid var(--shell);
  border-left: 5px solid var(--gold); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(11, 31, 59, 0.18);
  padding: 16px 18px; max-width: 440px; margin: 0 auto;
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#save-toast.show { transform: none; opacity: 1; pointer-events: auto; }
body.nl-sticky-on #save-toast { bottom: calc(74px + env(safe-area-inset-bottom)); }
.save-toast-title { margin: 0 0 2px; font-weight: 800; color: var(--ink); }
.save-toast-title span { color: var(--sunset-deep); }
.save-toast-name { margin: 0 0 10px; font-size: 14px; color: var(--slate); }
.save-toast-ask { margin: 8px 0 8px; font-weight: 700; color: var(--ink); font-size: 15px; }
.save-toast-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.save-toast-row input[type="email"] {
  flex: 1 1 180px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--shell); border-radius: 10px; font-family: inherit;
}
.save-toast-dismiss {
  background: none; border: none; padding: 8px 4px; cursor: pointer;
  color: var(--skyline-deep); font-weight: 700; font-size: 14px; font-family: inherit;
}
.save-toast-status { margin: 4px 0 0; font-size: 14px; color: var(--bayou); font-weight: 600; min-height: 0; }
.save-toast-status.is-error { color: #B3261E; }

/* My Weekend "Email My Plans" card. */
.sendplan-card {
  background: var(--white); border: 1px solid var(--shell);
  border-left: 5px solid var(--gold); border-radius: 16px;
  padding: 24px 26px; margin: 0 0 32px; box-shadow: var(--shadow-card);
}
.sendplan-card h3 { margin: 6px 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.sendplan-sub { margin: 0 0 14px; color: var(--slate); max-width: 52ch; }
.sendplan-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sendplan-row input[type="email"] {
  flex: 1 1 200px; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--shell); border-radius: 10px; font-family: inherit;
}
.sendplan-note { margin: 10px 0 0; font-size: 13px; color: var(--slate); }
#sendplan-status { margin-top: 10px; }

/* Newsletter issue structure on the landing page. */
.nl-structure { margin-top: 36px; }
.nl-structure-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.nl-structure-list li {
  background: var(--white); border: 1px solid var(--shell); border-radius: 12px;
  padding: 14px 16px;
}
.nl-structure-list strong { display: block; color: var(--ink); }
.nl-structure-list span { font-size: 14px; color: var(--slate); }

/* ---------- Footer ---------- */
.site-footer { background: var(--midnight); color: var(--limestone); margin-top: 56px; }
.footer-disclosure {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 28px 0;
}
.footer-disclosure p { font-size: 13px; color: var(--limestone); opacity: 0.8; max-width: 76ch; margin: 0; }
.footer-disclosure .eyebrow--gold { display: block; margin-bottom: 8px; }
.footer-main { padding: 36px 0 28px; display: grid; gap: 28px; }
@media (min-width: 760px) { .footer-main { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.footer-newsletter-text { font-size: 13px; color: var(--limestone); opacity: 0.7; margin: 0 0 10px; }
.newsletter-form--compact { flex-wrap: nowrap; }
@media (max-width: 420px) {
  .newsletter-form--compact { flex-wrap: wrap; }
  .newsletter-form--compact .btn { flex: 1 1 auto; }
}
.newsletter-form--compact input[type="email"] { flex: 1 1 auto; min-width: 0; padding: 11px 16px; font-size: 14px; }
.newsletter-form--compact .btn { padding: 11px 18px; font-size: 14px; flex: 0 0 auto; }
.newsletter-error { font-size: 13px; color: #FFB4A2; margin-top: 10px; }
.footer-col .newsletter-done { font-size: 13px; margin-top: 10px; }
.footer-main img.footer-logo { height: 34px; width: auto; margin-bottom: 12px; border-radius: 8px; }
.footer-tag { font-size: 14px; color: var(--limestone); opacity: 0.7; margin: 0; }
.footer-col h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--gold); margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--limestone); opacity: 0.8; text-decoration: none; font-size: 14px; }
.footer-col a:hover { opacity: 1; color: var(--gold); }
.footer-base {
  border-top: 1px solid rgba(255,255,255,0.15); padding: 18px 0 26px;
  font-size: 12px; color: var(--limestone); opacity: 0.55;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ---------- Static pages ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-weight: 700; font-size: 1.5rem; margin: 2rem 0 0.6rem; }
.prose h3 { font-weight: 700; font-size: 1.15rem; margin: 1.6rem 0 0.4rem; }
.prose p { margin: 0 0 1rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.page-hero { padding: 44px 0 8px; }
.inquiry-box {
  background: var(--white); border: 1px solid var(--shell); border-radius: var(--radius);
  padding: 24px; margin-top: 24px;
}
.fine-print { font-size: 13px; color: var(--slate); }
.fine-print ul { padding-left: 1.1rem; }

/* ---------- Route visibility ---------- */
.view { display: none; }
.view.active { display: block; }

/* ---------- Utility ---------- */
.result-count { font-size: 14px; color: var(--slate); font-weight: 500; margin: 4px 0 16px; }

/* ---------- Night Out ---------- */

.itinerary {
  border: 1px solid var(--shell);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.itinerary h3 { margin: 0 0 6px; font-size: 20px; color: var(--midnight); }
.itin-summary { margin: 0; color: var(--slate); font-size: 15px; }
.itin-stops { list-style: none; padding: 0; margin: 14px 0 0; }
.itin-stop {
  display: flex; gap: 16px; padding: 12px 0;
  border-top: 1px solid var(--shell);
}
.itin-time {
  font-weight: 800; color: var(--midnight);
  min-width: 82px; flex-shrink: 0; font-size: 14px;
}
.itin-detail { color: var(--slate); font-size: 14px; }

.tie-in {
  border: 1px solid var(--shell);
  border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px; background: var(--white);
}
.tie-in h3 { margin: 0 0 4px; font-size: 19px; color: var(--midnight); }
.tie-in .tie-sub { margin: 0 0 12px; color: var(--slate); font-size: 14px; }
.tie-cols { display: grid; gap: 16px; }
@media (min-width: 640px) { .tie-cols { grid-template-columns: 1fr 1fr; } }
.tie-col h4 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sunset-deep); }
.tie-col ul { margin: 0; padding-left: 18px; font-size: 15px; }
.tie-col li { margin-bottom: 8px; }
.tie-note { color: var(--slate); font-size: 13px; display: block; }

.night-out-card .graphic-eyebrow { letter-spacing: 0.08em; }

/* ---------- Mobile header: bar + guide row + discovery row (<=768px) ----------
   Row 1 (64px): hamburger left, HTX Plans logo beside it. Row 2 (52px):
   Weekend Guide, always visible as the clear path to weekend plans.
   Row 3 (48px): compact discovery row (Tonight / This Weekend / Upcoming /
   Eat & Drink / Night Out), horizontal scroll, never wraps.
   The hamburger opens the single mobile menu with clear sections.
   The desktop nav, the header CTA, and the old stacked rows never render
   on phones, so nothing wraps, duplicates, or pushes the hero down. */

/* Weekend Guide second row: mobile only; the desktop header never shows it. */
.header-guide-link { display: none; }

/* Compact discovery row: mobile only; the desktop header never shows it. */
.discovery-row { display: none; }

@media (min-width: 769px) {
  /* Desktop/tablet keep the single-row header: brand, horizontal nav, CTA. */
  .header-top { display: contents; }
  .mobile-nav { display: none !important; }
  .header-guide-link { display: none !important; }
  .discovery-row { display: none !important; }
  .quick-filters { display: none !important; }
}

/* Quick filters: mobile only, near the content, never in the header. */
.quick-filters { display: none; }

@media (max-width: 768px) {
  .header-inner {
    display: block; padding: 0;
    position: relative; /* anchors the dropdown menu */
  }
  .header-top {
    display: flex; align-items: center; gap: 14px;
    height: 64px; padding: 0 16px;
  }
  .brand-link img { height: 40px; max-width: 60vw; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin-left: 0;
  }
  /* Desktop-only elements stay out of the mobile header entirely. */
  .site-nav, .header-cta { display: none !important; }
  /* Row 2: Weekend Guide, the clear path to weekend plans. */
  .header-guide-link {
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; padding: 0 16px;
    border-top: 1px solid rgba(231, 233, 236, 0.14);
    color: var(--gold); font-weight: 700; font-size: 16px; text-decoration: none;
  }
  .header-guide-link::after { content: "\203A"; font-size: 22px; line-height: 1; }
  .header-guide-link.active { color: #ffffff; }
  /* Row 3: compact discovery navigation. One line, horizontal scroll,
     never wraps. Stays inside the sticky header. */
  .discovery-row {
    display: flex; align-items: stretch; gap: 2px; overflow-x: auto;
    height: 48px; padding: 0 8px;
    border-top: 1px solid rgba(231, 233, 236, 0.14);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .discovery-row::-webkit-scrollbar { display: none; }
  .discovery-row a {
    flex: 0 0 auto; align-self: center; white-space: nowrap;
    font-size: 14px; font-weight: 600;
    color: var(--limestone); text-decoration: none;
    padding: 9px 12px; border-radius: 999px;
  }
  .discovery-row a.active { background: rgba(231, 233, 236, 0.18); color: #ffffff; }
  /* Hamburger dropdown: hidden until opened, clear sections, readable list. */
  .mobile-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
    background: var(--midnight);
    border-bottom: 1px solid rgba(231, 233, 236, 0.14);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
    padding: 6px 16px 14px;
    max-height: 70vh; overflow-y: auto; overflow-x: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 0; transform: translateY(-6px);
  }
  .site-header.nav-open .mobile-nav { display: block; opacity: 1; transform: none; }
  .mnav-heading {
    margin: 16px 0 0; padding: 0 8px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--limestone); opacity: 0.55;
  }
  .mnav-link {
    display: block;
    padding: 13px 8px;
    font-size: 16px; font-weight: 600;
    color: var(--limestone); text-decoration: none;
    border-bottom: 1px solid rgba(231, 233, 236, 0.08);
    white-space: nowrap;
  }
  .mnav-link:last-child { border-bottom: 0; }
  .mnav-link:hover { color: #ffffff; }
  .mnav-link.active { color: var(--gold); }
  /* Keep the hero compact on phones: brand, value prop, CTA, then plans. */
  .hero { padding: 40px 0 36px; }
  /* Quick filters: a slim scrollable strip right under the hero. */
  .quick-filters {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 14px 16px 6px; margin: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .quick-filters::-webkit-scrollbar { display: none; }
  .quick-filters a {
    flex: 0 0 auto; white-space: nowrap;
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    background: var(--white); color: var(--ink); text-decoration: none;
    border: 1px solid var(--shell); border-radius: 999px;
    padding: 9px 15px;
  }
  .quick-filters a.active {
    background: var(--midnight); border-color: var(--midnight); color: var(--limestone);
  }
  /* Sticky category filter bars sit below the three-row mobile header
     (64px bar + 52px guide row + 48px discovery row). */
  .filter-bar { top: 164px; }
}

/* ---------- Decision prompt ---------- */
.intent-block { margin: 18px 0 22px; }
.intent-label {
  font-weight: 700; font-size: 15px; color: var(--ink);
  margin: 0 0 10px;
}
.intent-row { padding: 4px 0 10px; }
a.pill { text-decoration: none; }

/* ---------- Decision cards ---------- */
.card-bestfor { font-size: 14px; margin: 0; color: var(--ink); }
.verify-line {
  font-size: 12px; color: var(--slate); margin: 0;
  display: flex; align-items: center; gap: 6px;
}
.verify-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bayou); color: #ffffff; font-size: 10px; font-weight: 700;
  flex: 0 0 auto;
}
.save-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(11, 31, 59, 0.72); color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  font-size: 13px; font-weight: 600; font-family: var(--font-body);
  padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.save-toggle:hover { border-color: #ffffff; }
.save-toggle.saved { background: var(--coral); border-color: var(--coral); color: var(--midnight); }

/* ---------- Editorial: spotlight, Three to Beat ---------- */
.spotlight-why {
  font-size: 16px; max-width: 62ch; margin: 0 0 18px;
  border-left: 3px solid var(--gold); padding-left: 14px;
}
.plan-card .eyebrow { margin-bottom: 6px; }
.plan-estimate {
  background: var(--limestone); border: 1px solid var(--shell);
  border-radius: 10px; padding: 14px 16px; margin-top: 6px;
}
.plan-estimate h4 {
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--slate); font-weight: 700;
}
.est-lines { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.est-lines li { font-size: 14px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.est-label { font-weight: 600; }
.est-value { font-weight: 800; color: var(--sunset-deep); font-variant-numeric: tabular-nums; }
.est-note { flex-basis: 100%; font-size: 12px; color: var(--slate); }
.est-total { font-size: 14px; margin: 0; }
.plan-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-share { background: var(--white); color: var(--midnight); border: 2px solid var(--midnight); }
.btn-share:hover { background: var(--midnight); color: var(--limestone); }
.before-you-go {
  background: var(--white); border: 1px dashed var(--shell);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 24px;
}
.before-you-go h4 {
  margin: 0 0 8px; font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sunset-deep);
}
.before-you-go ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--slate); }
.before-you-go li { margin-bottom: 6px; }
.plan-subhead { font-size: 1.25rem; font-weight: 700; margin: 26px 0 12px; }
.surprise-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Share confirmation toast */
#share-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--midnight); color: var(--limestone);
  font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
  z-index: 300; max-width: 90vw; text-align: center;
}
#share-toast.show { opacity: 1; transform: translate(-50%, 0); }