/* Avenyra. Travel, engineered intelligently
   Brand system v1.0. Midnight Navy + Sovereign Gold + Pearl Silver
   Color hex codes are the canonical brand palette; do not drift. */

:root {
  /* === Brand palette === */
  --midnight-navy:  #0B1426;
  --royal-blue:     #122B55;
  --sovereign-gold: #D4AF37;
  --pearl-silver:   #BFC6CF;
  --ivory-cream:    #F5F4EF;

  /* === Surface tokens === */
  --bg:             var(--midnight-navy);
  --bg-elev:        #0F1A33;        /* between midnight + royal */
  --bg-card:        var(--royal-blue);
  --bg-card-hover:  #1A3568;
  --border:         #1F2D4D;
  --border-strong:  #2E4070;

  /* === Text tokens === */
  --text:           var(--ivory-cream);
  --text-muted:     var(--pearl-silver);
  --text-faint:     #7B89A0;

  /* === Accent tokens === */
  --accent:         var(--sovereign-gold);
  --accent-bright:  #E5C963;
  --accent-soft:    rgba(212, 175, 55, 0.12);
  --accent-glow:    rgba(212, 175, 55, 0.35);

  /* === Semantic === */
  --good:    #5FD99C;
  --warn:    #F5A35C;
  --bad:     #EF6B78;
  --info:    #7FB6FF;
  --mistake: #C084FC;

  /* === Type === */
  --serif:   'Cormorant Garamond', 'Times New Roman', serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* === Geometry === */
  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.35);
  --shadow-gold: 0 0 0 1px rgba(212,175,55,0.12), 0 12px 28px rgba(212,175,55,0.18);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1200px 600px at 80% -100px, rgba(212,175,55,0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(18,43,85,0.55), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============= header ============= */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 48px;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logomark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}
img.logomark { color: var(--accent); }
.logomark svg { width: 100%; height: 100%; }
.brand-text h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ivory-cream);
}
.brand-text .tagline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  font-weight: 500;
}
.tabs { display: flex; gap: 4px; }
.tab {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.15s ease;
}
.tab:hover { color: var(--text); background: var(--bg-card); }
.tab.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(212, 175, 55, 0.25);
}

/* ============= section nav (single-page continuous flow) ============= */
.section-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.section-link {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.section-link:hover { color: var(--text); background: var(--bg-card); }
.section-link.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(212, 175, 55, 0.25);
}
@media (max-width: 880px) {
  .section-nav { gap: 0; }
  .section-link { padding: 8px 10px; font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 640px) {
  .site-header { padding: 14px 16px; flex-wrap: wrap; }
  .section-nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============= full-screen hero ============= */
.hero-full {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-margin-top: 80px;
}
.hero-full .bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,20,38,0.45) 0%, rgba(11,20,38,0.30) 45%, rgba(11,20,38,0.95) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 820px;
}
.hero-content .eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero-content .brand-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(56px, 11vw, 120px);
  line-height: 1.0;
  margin: 0;
  color: var(--ivory-cream);
  text-transform: uppercase;
  letter-spacing: clamp(6px, 1.2vw, 14px);
}
.hero-content .ornament {
  display: flex; align-items: center;
  gap: 14px; justify-content: center;
  margin: 22px 0 26px;
}
.hero-content .ornament .line {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.hero-content .ornament .dot {
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}
.hero-content .pitch {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--pearl-silver);
  margin: 14px auto 36px;
  max-width: 640px;
  line-height: 1.4;
  font-weight: 400;
}
.hero-content .cta-row {
  display: flex; gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-content .cta-row .btn { text-decoration: none; display: inline-block; }
.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--accent);
  opacity: 0.6;
  text-decoration: none;
  animation: scrollBounce 2.4s ease-in-out infinite;
}
.scroll-cue:hover { opacity: 1; }
@keyframes scrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* ============= continuous-flow app sections ============= */
.app-section {
  padding: 100px 32px 80px;
  scroll-margin-top: 80px;
  position: relative;
}
.app-section.alt-bg {
  background:
    linear-gradient(180deg, transparent, rgba(18,43,85,0.18), transparent);
}
.app-section.compact { padding: 64px 32px 48px; }
.section-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 600;
}
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  color: var(--ivory-cream);
}
.section-title em {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

/* inline info button + popover */
.info-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 10px;
}
.info-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.10);
  color: var(--accent);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.info-btn:hover,
.info-btn[aria-expanded="true"] {
  background: rgba(212, 175, 55, 0.22);
  transform: scale(1.05);
}
.info-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  min-width: 280px;
  max-width: 380px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(11, 20, 38, 0.98), rgba(11, 20, 38, 0.94));
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.info-pop strong {
  color: var(--ivory-cream);
  font-weight: 600;
}
.info-pop::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 6px;
  width: 10px;
  height: 10px;
  background: rgba(11, 20, 38, 0.98);
  border-left: 1px solid rgba(212, 175, 55, 0.30);
  border-top: 1px solid rgba(212, 175, 55, 0.30);
  transform: rotate(45deg);
}
.info-btn[aria-expanded="true"] + .info-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 600px) {
  .info-pop { left: auto; right: 0; min-width: 240px; max-width: calc(100vw - 40px); }
  .info-pop::before { left: auto; right: 12px; }
}

.section-lead {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 700px;
  margin: 0 0 36px;
}

/* compact app shell strip (app.html only) */
.app-strip {
  background: linear-gradient(180deg, rgba(11,20,38,0.95), rgba(18,43,85,0.35));
  border-bottom: 1px solid var(--border);
  padding: 56px 32px 36px;
}
.app-strip-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.app-strip-eyebrow {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.app-strip h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  margin: 0 0 6px;
  color: var(--ivory-cream);
  letter-spacing: -0.3px;
}
.app-strip p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
  max-width: 600px;
}

/* ============= hero banner (legacy app.html marquee, preserved) ============= */
.hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  max-height: 480px;
  background: var(--bg);
}
.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.hero-banner-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,20,38,0) 55%, rgba(11,20,38,0.85) 92%, var(--bg) 100%),
    radial-gradient(60% 80% at 50% 20%, rgba(11,20,38,0.0) 0%, rgba(11,20,38,0.18) 100%);
}
@media (max-width: 720px) {
  .hero-banner { aspect-ratio: 4 / 3; max-height: 380px; }
  .hero-banner img { object-position: center 40%; }
}

/* ============= main ============= */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hero { margin-bottom: 32px; }
.hero h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}
.hero .accent { color: var(--accent); font-style: italic; }
.lead {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 640px;
  margin: 0;
}

/* ============= cards / forms ============= */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.form { display: flex; flex-direction: column; gap: 20px; }
.grid { display: grid; gap: 16px; }
.grid.two   { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field span {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 500;
}
.field small { color: var(--text-faint); font-size: 12px; min-height: 14px; }
.field input, .field select {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.field input:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.field.tight input { padding: 9px 12px; font-size: 14px; }
.field input::placeholder { color: var(--text-faint); }

.balances {
  border: 1px solid rgba(46, 64, 112, 0.4);
  border-radius: 12px;
  padding: 18px 20px 20px;
  background: rgba(11, 20, 38, 0.35);
  margin: 0;
  position: relative;
}
.balances-title {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 16px;
  font-family: var(--sans);
}
.balances-title small {
  text-transform: none;
  letter-spacing: 0.3px;
  color: var(--text-faint);
  margin-left: 8px;
  font-weight: 400;
  font-size: 11px;
}
.balance-section { margin-top: 14px; }
.balance-section:first-of-type { margin-top: 0; }
.balance-section h4 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  font-family: var(--sans);
}
.balance-section h4 small {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
  margin-left: 4px;
  font-weight: 400;
}

/* Balance list: vertical rows with program name on the left and value on the right.
   Used for both transferable currencies and airline frequent flyer programs. */
.balance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.balance-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(11, 20, 38, 0.45);
  border: 1px solid rgba(46, 64, 112, 0.35);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: text;
}
.balance-row:hover {
  border-color: rgba(46, 64, 112, 0.6);
  background: rgba(11, 20, 38, 0.6);
}
.balance-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.balance-row .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ivory-cream);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.balance-row input[type="number"] {
  background: transparent;
  border: 1px solid rgba(191, 198, 207, 0.18);
  border-radius: 6px;
  color: var(--ivory-cream);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  text-align: right;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.balance-row input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}
.balance-row.removable {
  grid-template-columns: 1fr 130px 32px;
}
.balance-row .remove {
  background: transparent;
  border: 1px solid rgba(191, 198, 207, 0.2);
  color: var(--text-faint);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  transition: all 0.12s ease;
}
.balance-row .remove:hover {
  color: var(--bad);
  border-color: var(--bad);
  background: rgba(239, 107, 120, 0.08);
}

/* Mobile: tighten the name and value columns */
@media (max-width: 560px) {
  .balance-row { grid-template-columns: 1fr 110px; padding: 10px 12px; gap: 10px; }
  .balance-row.removable { grid-template-columns: 1fr 90px 28px; }
  .balance-row .name { font-size: 13px; }
  .balance-row input[type="number"] { padding: 7px 10px; font-size: 14px; }
}
.airline-balance-add select {
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 14px;
  width: 100%;
  outline: none;
  cursor: pointer;
}
.airline-balance-add select:hover {
  border-color: var(--accent);
  color: var(--text);
}
.airline-balance-add select:focus {
  border-color: var(--accent);
  border-style: solid;
}

/* ============= autocomplete ============= */
.autocomplete-field { position: relative; }
.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  max-height: 360px;
  overflow-y: auto;
}
.autocomplete-dropdown.is-open { display: block; }
.autocomplete-dropdown .ac-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s ease;
}
.autocomplete-dropdown .ac-item:last-child { border-bottom: 0; }
.autocomplete-dropdown .ac-item:hover,
.autocomplete-dropdown .ac-item.is-selected {
  background: var(--accent-soft);
}
.autocomplete-dropdown .ac-iata {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
  font-weight: 500;
  width: 44px;
}
.autocomplete-dropdown .ac-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.autocomplete-dropdown .ac-name .city {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-dropdown .ac-name .airport {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-dropdown .ac-region {
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.advanced {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: -4px;
}
.advanced summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.advanced summary:hover { color: var(--accent); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn.primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #1a1f3a;
  font-weight: 600;
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(212, 175, 55, 0.35); }
.btn.ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}
.btn.ghost:hover { color: var(--text); border-color: var(--accent); }

/* ============= results ============= */
.results { margin-top: 36px; }
.results.hidden { display: none; }

/* ============= wallet status banner ============= */
.wallet-status {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 18px;
  border: 1px solid;
}
.wallet-status.wallet-good {
  background: rgba(95, 217, 156, 0.08);
  border-color: rgba(95, 217, 156, 0.35);
}
.wallet-status.wallet-warn {
  background: rgba(245, 163, 92, 0.08);
  border-color: rgba(245, 163, 92, 0.35);
}
.wallet-status.wallet-bad {
  background: rgba(239, 107, 120, 0.08);
  border-color: rgba(239, 107, 120, 0.35);
}
.wallet-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
}
.wallet-good .wallet-icon  { background: rgba(95, 217, 156, 0.18); color: var(--good); }
.wallet-warn .wallet-icon  { background: rgba(245, 163, 92, 0.18); color: var(--warn); }
.wallet-bad  .wallet-icon  { background: rgba(239, 107, 120, 0.18); color: var(--bad); }
.wallet-title {
  font-size: 15px;
  color: var(--ivory-cream);
  font-weight: 600;
  letter-spacing: 0.1px;
}
.wallet-detail {
  font-size: 13px;
  color: var(--pearl-silver);
  margin-top: 2px;
}

/* ============= pay-with chips inside option card ============= */
.pay-paths {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  margin-top: 4px;
}
.pay-paths-label {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
  font-weight: 600;
}
.pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pay-chip {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid;
  white-space: nowrap;
  font-weight: 500;
}
.pay-chip .src { color: var(--ivory-cream); font-weight: 600; }
.pay-chip .amt { font-family: var(--serif); font-size: 13px; font-weight: 500; }
.pay-chip .status {
  font-size: 11px;
  padding-left: 6px;
  border-left: 1px solid currentColor;
  opacity: 0.85;
}
.pay-chip.sufficient {
  background: rgba(95, 217, 156, 0.10);
  border-color: rgba(95, 217, 156, 0.45);
  color: var(--good);
}
.pay-chip.sufficient .amt { color: var(--good); }
.pay-chip.close {
  background: rgba(245, 163, 92, 0.08);
  border-color: rgba(245, 163, 92, 0.35);
  color: var(--warn);
}
.pay-chip.close .amt { color: var(--warn); }
.pay-chip.insufficient {
  background: rgba(11, 20, 38, 0.5);
  border-color: rgba(46, 64, 112, 0.4);
  color: var(--text-faint);
}
.pay-chip.insufficient .amt,
.pay-chip.insufficient .src { color: var(--pearl-silver); }

.source-tag.insufficient-tag {
  background: rgba(11, 20, 38, 0.5);
  color: var(--text-faint);
  border: 1px solid rgba(46, 64, 112, 0.4);
}

@media (max-width: 720px) {
  .wallet-status { grid-template-columns: 32px 1fr; padding: 12px 14px; gap: 12px; }
  .wallet-icon { width: 28px; height: 28px; font-size: 16px; }
  .wallet-title { font-size: 14px; }
  .wallet-detail { font-size: 12.5px; }
  .pay-chip { font-size: 11.5px; padding: 6px 10px; gap: 6px; }
  .pay-chip .status { display: none; }
}

/* headline metric cards. mockup parity ("Best Opportunity / Value Score / Est. Value") */
.headline-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.headline-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.headline-card.primary {
  background:
    radial-gradient(180% 110% at 100% 0%, rgba(212,175,55,0.10), transparent 50%),
    var(--bg-card);
  border-color: rgba(212, 175, 55, 0.35);
}
.headline-card .lbl {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.headline-card .route {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--ivory-cream);
  line-height: 1.05;
  margin-top: 2px;
}
.headline-card .meta {
  font-size: 13px;
  color: var(--pearl-silver);
}
.headline-card .meta-small {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: auto;
}
.headline-card .points {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
  margin-top: auto;
  letter-spacing: 0.5px;
}
.headline-card .points .taxes {
  font-size: 14px;
  color: var(--pearl-silver);
  font-family: var(--sans);
  letter-spacing: 0;
}
.headline-card .score-big {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
.headline-card .score-big .denom {
  font-size: 18px;
  color: var(--text-muted);
  margin-left: 4px;
}
.headline-card .value-big {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  color: var(--ivory-cream);
  line-height: 1;
}
.headline-card .grade {
  font-size: 13px;
  color: var(--pearl-silver);
}
.headline-card .bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: auto;
}
.headline-card .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: 2px;
}
@media (max-width: 880px) {
  .headline-grid { grid-template-columns: 1fr; }
}

.summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.summary-bar .item { display: flex; flex-direction: column; gap: 2px; }
.summary-bar .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-faint);
}
.summary-bar .val { font-family: var(--serif); font-size: 22px; color: var(--text); }
.summary-bar .val.accent { color: var(--accent); }

.result-grid { display: grid; gap: 14px; }
.option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr 1fr auto;
  gap: 18px;
  align-items: center;
  transition: all 0.15s ease;
}
.option:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.option .head {
  display: flex; flex-direction: column; gap: 2px;
}
.option .program {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--text);
}
.option .partner {
  font-size: 13px;
  color: var(--text-muted);
}
.option .stat {
  display: flex; flex-direction: column; gap: 2px;
}
.option .stat .num {
  font-family: var(--serif); font-size: 22px; color: var(--text);
}
.option .stat .num.accent { color: var(--accent); }
.option .stat .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-faint);
}
.option .source-tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(212,175,55,0.3);
}
.option .source-tag.direct {
  background: rgba(95, 217, 156, 0.12);
  color: var(--good);
  border-color: rgba(95, 217, 156, 0.3);
}
.option .insufficient {
  color: var(--bad);
  font-size: 12px;
  margin-top: 4px;
}
.option .score-pill {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-align: center;
  min-width: 64px;
}
.option .score-pill .v {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--accent);
}
.option .score-pill .l {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.option .notes {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
@media (max-width: 860px) {
  .option { grid-template-columns: 1fr 1fr; }
  .option .head { grid-column: 1 / -1; }
  .option .score-pill { grid-column: 1 / -1; justify-self: start; }
}

/* score tab */
.score-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.tier-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.tier-banner .glyph {
  font-family: var(--serif);
  font-size: 38px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
}
.tier-banner h3 { margin: 0; font-family: var(--serif); font-size: 26px; }
.tier-banner p { margin: 4px 0 0; opacity: 0.9; }
.tier-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.tier-stats .item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.tier-stats .lbl { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-faint); }
.tier-stats .val { font-family: var(--serif); font-size: 22px; color: var(--text); }
.notes-list { list-style: none; padding: 0; margin: 16px 0 0; }
.notes-list li {
  padding: 10px 14px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 14px;
}

/* positioning */
.position-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 12px;
}
.position-card h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; }
.position-card .meta { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }
.position-card .savings { color: var(--good); font-weight: 600; }
.position-card .risk { color: var(--warn); font-size: 13px; margin-top: 8px; }
.position-card.advisory { border-color: rgba(192, 132, 252, 0.4); background: linear-gradient(180deg, rgba(192,132,252,0.04), transparent); }
.position-card.advisory h4 { color: var(--mistake); }
.hc-carriers {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.hc-carriers-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 4px;
}
.hc-carrier-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(192, 132, 252, 0.10);
  border: 1px solid rgba(192, 132, 252, 0.35);
  color: var(--mistake);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.hc-carrier-chip em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 11.5px;
}

/* error */
.error {
  background: rgba(239, 107, 120, 0.08);
  border: 1px solid rgba(239, 107, 120, 0.3);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--bad);
}

/* ============= four-pillar brand strip ============= */
.pillars {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,20,38,0.6), rgba(18,43,85,0.25));
  padding: 56px 32px;
}
.pillars-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.pillar {
  text-align: left;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
}
.pillar-icon {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  color: var(--accent);
  display: block;
  margin-top: 2px;
}
.pillar h3 {
  grid-column: 2;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ivory-cream);
  margin: 0;
  line-height: 1.25;
}
.pillar p {
  grid-column: 2;
  margin: 0;
  font-size: 13px;
  color: var(--pearl-silver);
  line-height: 1.55;
  max-width: 240px;
}
@media (max-width: 880px) {
  .pillars-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .pillars-inner { grid-template-columns: 1fr; }
}

/* footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 24px 48px;
  background: rgba(11, 16, 32, 0.4);
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.muted { color: var(--text-muted); }
.muted.small { font-size: 12px; }

/* misc */
.hidden { display: none !important; }
.empty {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
}
.empty h3 { font-family: var(--serif); }

/* ============= calendar heatmap ============= */
.cal-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--pearl-silver);
  margin-bottom: 16px;
}
.cal-legend i.cal-key {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.cal-key.avail   { background: var(--good); }
.cal-key.noavail { background: rgba(239, 107, 120, 0.35); }
.cal-key.unknown { background: rgba(46, 64, 112, 0.35); }
.cal-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.cal-month {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.cal-month-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ivory-cream);
  margin-bottom: 10px;
  font-weight: 500;
}
.cal-grid-hdr, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-grid-hdr { margin-bottom: 4px; }
.cal-wkday {
  text-align: center;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  position: relative;
  cursor: default;
}
.cal-day.blank, .cal-day.past { background: transparent; }
.cal-day.past .n { display: none; }
/* Heatmap mode. Background alpha is set inline by the JS renderer
   based on miles cost; color intensity goes from faint gold (priciest
   open day in window) to saturated gold (cheapest). The border keeps
   the cell legible even at low alpha. */
.cal-day.status-available {
  color: var(--ivory-cream);
  border: 1px solid rgba(212, 175, 55, 0.18);
  /* `background` is set inline via style="..." attribute */
}
.cal-day.status-available .pts {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(245, 244, 239, 0.85);
  line-height: 1;
  margin-top: 2px;
}
.cal-day.status-unavailable {
  background: rgba(46, 64, 112, 0.10);
  color: var(--text-faint);
  border: 1px solid rgba(46, 64, 112, 0.18);
}
.cal-day.status-unknown {
  background: rgba(46, 64, 112, 0.18);
  color: var(--text-faint);
  border: 1px solid rgba(46, 64, 112, 0.3);
}
.cal-day .n { font-weight: 500; }
.cal-day.clickable { cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
.cal-day.clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.22);
  border-color: rgba(212, 175, 55, 0.55);
}

/* Heatmap legend: a thin gradient strip with anchor labels. Replaces
   the old binary "available / not available" key with a real scale. */
.cal-legend-heatmap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--muted);
  margin-bottom: 14px;
}
.cal-legend-heatmap .cal-legend-lbl {
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--accent);
}
.cal-legend-heatmap .cal-legend-bar {
  flex: 0 0 120px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(212,175,55,0.92),
    rgba(212,175,55,0.18));
}
.cal-legend-heatmap .cal-legend-range {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/* Per-day detail panel surfaced when a date cell is clicked. */
.cal-detail { margin-top: 22px; }
.cal-detail-card {
  background: linear-gradient(180deg, rgba(95,217,156,0.05), rgba(11,20,38,0.4));
  border: 1px solid rgba(95, 217, 156, 0.30);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.cal-detail-head { margin-bottom: 14px; }
.cal-detail-head h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--ivory-cream);
}
.cal-detail-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.cal-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-detail-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(140px, 1fr) minmax(120px, 0.8fr) minmax(90px, 0.6fr) minmax(80px, 0.5fr);
  gap: 12px;
  padding: 12px 14px;
  background: rgba(11, 20, 38, 0.5);
  border: 1px solid rgba(46, 64, 112, 0.35);
  border-radius: 8px;
  align-items: center;
  font-size: 13.5px;
}
.cd-prog-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.35);
  padding-bottom: 1px;
}
.cd-prog-link:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.cd-arrow { font-size: 11px; opacity: 0.7; }
.cd-carrier {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(127, 182, 255, 0.10);
  border: 1px solid rgba(127, 182, 255, 0.35);
  color: var(--info);
}
.cd-direct, .cd-conn {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.cd-direct { background: rgba(95,217,156,0.10); border: 1px solid rgba(95,217,156,0.30); color: var(--good); }
.cd-conn   { background: rgba(245,163,92,0.08);  border: 1px solid rgba(245,163,92,0.30);  color: var(--warn); }
.cd-points strong { color: var(--accent); font-weight: 700; }
.cd-direct-cost {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.cd-taxes { color: var(--text-muted); font-size: 12.5px; }
.cd-seats { color: var(--text-muted); font-size: 12.5px; text-align: right; }
.cal-detail-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(46, 64, 112, 0.35);
  font-size: 11.5px;
  color: var(--text-faint);
}
.cal-detail-foot a { color: var(--text-muted); text-decoration: underline; }
.cal-detail-foot a:hover { color: var(--accent); }
.cal-detail-empty {
  padding: 16px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  background: rgba(11, 20, 38, 0.4);
  border-radius: 8px;
}
@media (max-width: 720px) {
  .cal-detail-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cal-detail-row .cd-prog { grid-column: 1 / -1; }
  .cal-detail-row .cd-flight { grid-column: 1 / -1; }
}

/* tab badge */
.badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin-left: 6px;
  vertical-align: middle;
}
.badge:empty { display: none; }

/* promo dashboard */
.promo-section { margin-bottom: 32px; }
.promo-freshness {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: rgba(95, 217, 156, 0.08);
  border: 1px solid rgba(95, 217, 156, 0.25);
}
.promo-freshness.warn {
  color: var(--text-muted);
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.25);
}
.promo-source {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-faint);
  text-decoration: none;
  border-bottom: 1px dashed rgba(191, 198, 207, 0.25);
  padding-bottom: 1px;
}
.promo-source:hover { color: var(--accent); border-bottom-color: var(--accent); }
.promo-section h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--text);
}
.promo-section h3 .count {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 10px;
}
.promo-grid { display: grid; gap: 12px; }
.promo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(64px, 140px);
  gap: 18px;
  align-items: start;
}
.promo-card .body { min-width: 0; }
.promo-card .body h4 { overflow-wrap: anywhere; word-break: break-word; }
.promo-card.relevant {
  border-color: rgba(212, 175, 55, 0.45);
  background: linear-gradient(180deg, rgba(212,175,55,0.04), var(--bg-card));
}
.promo-card .impact-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 5px 10px;
  border-radius: 4px;
  align-self: start;
}
.impact-extreme   { background: rgba(192,132,252,0.15); color: var(--mistake); }
.impact-very-high { background: rgba(95,217,156,0.15); color: var(--good); }
.impact-high      { background: rgba(127,182,255,0.15); color: var(--info); }
.impact-medium    { background: rgba(245,163,92,0.12);  color: var(--warn); }
.impact-low       { background: rgba(148,163,184,0.12); color: var(--text-muted); }

.promo-card .body h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 4px;
}
.promo-card .body .meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.promo-card .body .advice {
  font-size: 13px;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 12px;
  margin: 0;
}
.promo-card .ratio {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--accent);
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.1;
}
.promo-card .ratio .lbl {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}
.relevance-pin {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
@media (max-width: 720px) {
  .promo-card { grid-template-columns: 1fr; }
  .promo-card .ratio { text-align: left; }
}

/* learn cards */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}
.learn-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
}
.learn-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--accent);
}
.learn-card p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 12px;
}
.learn-card p:last-child { margin-bottom: 0; }
.learn-card em { color: var(--text); font-style: normal; font-weight: 500; }
.learn-card a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent); }
.learn-card a:hover { color: var(--accent-bright); }

/* availability hint inside option card */
.availability-hint {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.availability-hint .label {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
}
.availability-hint a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* premium badge */
.premium-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: var(--bg);
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* loading */
.loading {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Synthesis panel (the 10-second WOW above the optimizer's
   detailed list). Brand discipline: Sovereign Gold for primary
   signals, Pearl Silver for secondary. No foreign accents.
   ============================================================ */
.synth-headline {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.synth-headline h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--ivory-cream);
  margin: 0;
  letter-spacing: -0.3px;
}
.synth-headline h2 em {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}
.synth-meta {
  font-size: 12px;
  color: var(--pearl-silver);
  letter-spacing: 0.3px;
  opacity: 0.8;
}
.synth-meta strong { color: var(--ivory-cream); font-weight: 600; }

.synth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}
@media (max-width: 1080px) { .synth-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .synth-grid { grid-template-columns: 1fr; } }

.synth-card {
  position: relative;
  padding: 20px 20px 20px;
  background: linear-gradient(180deg, var(--royal-blue), var(--midnight-navy));
  border: 1px solid rgba(191, 198, 207, 0.16);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* Subtle premium hover lift. Restraint is the brand: 2px translate, a
     marginal border tighten, a soft shadow. No 3D rotation, no parallax. */
  transition: transform var(--motion-medium, 320ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color var(--motion-medium, 320ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              box-shadow var(--motion-medium, 320ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.synth-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.32),
              0 0 0 1px rgba(212, 175, 55, 0.12);
}
.synth-card.gold-primary:hover {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 20px 48px rgba(0,0,0,0.38),
              0 0 0 1px rgba(212, 175, 55, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .synth-card { transition: none; }
  .synth-card:hover { transform: none; }
}

/* Route arc rendered inside the smarter-routing synth card. The path is
   drawn on entry via JS (stroke-dashoffset transition); the dots and
   labels are static. Sized to fit comfortably above the .synth-tag. */
.synth-card .route-arc {
  width: 100%;
  height: 64px;
  display: block;
  margin: 4px 0 12px;
  overflow: visible;
}
.route-arc-dot {
  fill: var(--accent, #D4AF37);
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.55));
}
.route-arc-dot-from { fill: var(--pearl-silver, #BFC6CF); filter: none; }
.route-arc-label {
  fill: var(--pearl-silver, #BFC6CF);
  font-family: var(--ui, 'Inter', sans-serif);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* (Reveal-on-scroll layer removed: the pre-existing
   `.synth-grid > .synth-card` rule with avFadeUp keyframe already handles
   verdict-card entry animation, and that selector has higher specificity
   than `.reveal` so dual-layering caused a silent visual no-op.) */

/* =============================================================
   Strategist (00 / Strategist) - natural-language trip planner
============================================================= */
.strategist-form {
  background: linear-gradient(180deg, rgba(18, 43, 85, 0.65), rgba(11, 20, 38, 0.55));
  border: 1px solid rgba(212, 175, 55, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.strategist-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 18px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .strategist-row { grid-template-columns: 1fr; }
}
.strategist-query textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font-family: var(--ui, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.5;
  background: rgba(11, 20, 38, 0.6);
  border: 1px solid rgba(191, 198, 207, 0.18);
  color: var(--ivory-cream);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.strategist-query textarea:focus {
  border-color: rgba(212, 175, 55, 0.55);
  outline: 0;
}
.strat-query-hint {
  display: block;
  margin-top: 6px;
  color: var(--text-faint, #7B89A0);
  font-size: 11.5px;
  letter-spacing: 0.2px;
}
.strategist-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.strategist-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: linear-gradient(180deg, #E5C963 0%, #D4AF37 100%);
  color: var(--midnight-navy);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(212,175,55,0.16);
  transition: transform 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.strategist-submit:hover { transform: translateY(-1px); }
.strategist-examples { display: flex; gap: 8px; flex-wrap: wrap; }
.example-chip {
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.28);
  color: var(--accent);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.example-chip:hover { background: rgba(212,175,55,0.18); }

/* Result panel */
.strat-head { margin-bottom: 18px; }
.strat-eyebrow {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.strat-interp {
  margin: 0;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--ivory-cream);
  line-height: 1.45;
  letter-spacing: -0.1px;
}
.strat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 880px) {
  .strat-grid { grid-template-columns: 1fr; }
}
.strat-card {
  position: relative;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, var(--royal-blue), var(--midnight-navy));
  border: 1px solid rgba(191, 198, 207, 0.18);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 320ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 320ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.strat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.4);
}
.strat-card-primary {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(212, 175, 55, 0.18);
}
.strat-card-rank {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 26px;
  color: rgba(212, 175, 55, 0.32);
  font-weight: 500;
}
.strat-card-route {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.strat-iata {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--ivory-cream);
}
.strat-iata-gold { color: var(--accent); }
.strat-card-route .route-arc {
  flex: 1;
  height: 50px;
  display: block;
}
.strat-card-route .route-arc-dot { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(212,175,55,0.55)); }
.strat-card-meta {
  font-size: 12px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--pearl-silver);
  font-weight: 600;
}
.strat-card-program {
  font-size: 14px;
  color: var(--pearl-silver);
  line-height: 1.4;
}
.strat-card-program strong { color: var(--ivory-cream); font-weight: 600; }
.strat-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed rgba(46, 64, 112, 0.35);
}
.strat-stat { display: flex; flex-direction: column; gap: 2px; }
.strat-stat-num {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--accent);
}
.strat-stat-lbl {
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pearl-silver);
  font-weight: 600;
}
.strat-card-tag { margin-top: 4px; }
.strat-card-carriers {
  font-size: 12.5px;
  color: var(--pearl-silver);
  line-height: 1.4;
  margin-top: -2px;
}
.strat-card-carriers strong {
  color: var(--ivory-cream);
  font-weight: 600;
}
.strat-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.strat-card-dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.32);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.strat-card-dates:hover {
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.55);
}
.strat-card-dates svg {
  transition: transform 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.strat-card-dates:hover svg { transform: translateX(2px); }
/* External-link variant: program lacks reliable seats.aero coverage so the
   CTA leaves /app entirely. Render the link as a button visually so the
   user sees a single consistent control vocabulary across all cards, but
   muted slightly to indicate "exits the app" without shouting. */
a.strat-card-dates-external {
  text-decoration: none;
}
a.strat-card-dates-external::after {
  content: "↗";
  font-size: 11px;
  opacity: 0.7;
  margin-left: -2px;
}
/* Strategist diagnostic chip: shows the candidate programs considered,
   which were dropped and why, and which surfaced. Small, muted, but
   always visible so the user can see why the strategist returned 1 card
   vs 3. Removes the "why only one" mystery. */
.strat-diag {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(191, 198, 207, 0.06);
  border: 1px solid rgba(191, 198, 207, 0.14);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.2px;
  line-height: 1.55;
}
.strat-diag code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(212, 175, 55, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--ivory);
}
.strat-diag-label {
  color: var(--ivory);
  font-weight: 600;
  margin-right: 4px;
}
/* CURATED KNOWLEDGE LAYER. The whyItWins sentence is the headline of
   every card - the editorial reasoning that turns a number into a
   recommendation. Larger and lighter than body copy so the eye lands on
   it before the points stat block. */
.strat-card-why {
  margin: 8px 0 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ivory);
  letter-spacing: 0.1px;
  font-weight: 400;
}
.strat-card-primary .strat-card-why {
  color: var(--accent);
  font-weight: 500;
}
/* Gotchas collapsible. Hidden by default so they don't crowd the card,
   but always one click away. The summary indicator is gold to draw the
   eye when there are real caveats the user should not skip. */
.strat-card-gotchas {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.strat-card-gotchas summary {
  cursor: pointer;
  color: var(--accent);
  letter-spacing: 0.3px;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.strat-card-gotchas summary::before {
  content: "⚠ ";
  margin-right: 2px;
}
.strat-card-gotchas summary:hover { text-decoration: underline; }
.strat-card-gotchas ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.55;
}
.strat-card-gotchas li { margin: 2px 0; }
/* PREDICTIVE LAYER trend chip. Filled in by hydrateStrategistInsights
   after /insights returns. Pending state shows "history building". */
.strat-card-insight {
  margin: 8px 0 0;
  min-height: 18px;
}
.strat-insight-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.3px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--ivory);
  border: 1px solid rgba(212, 175, 55, 0.20);
  line-height: 1.4;
}
.strat-insight-pill strong { color: var(--accent); font-weight: 600; }
.strat-insight-pending {
  background: rgba(191, 198, 207, 0.06);
  border-color: rgba(191, 198, 207, 0.15);
  color: var(--muted);
}

/* ==================== RARE PRODUCT STRIP ====================
   The MOAT, made visible. A horizontal scroll of curated rare-cabin
   detections. Gold-on-navy gradient anchors the section as premium.
   Each card is glassy with a soft glow halo behind it that pulses on
   the "extreme" rarity tier.
====================================================================== */
.rare-strip {
  position: relative;
  margin: 36px auto 28px;
  max-width: 1280px;
  padding: 18px 24px 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(212,175,55,0.10), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(212,175,55,0.06), transparent 55%),
    linear-gradient(180deg, rgba(18,43,85,0.55), rgba(11,20,38,0.30));
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 16px 50px -22px rgba(0,0,0,0.55);
}
.rare-strip-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rare-strip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--accent);
  text-transform: uppercase;
}
.rare-pulse {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(212,175,55,0.6);
  animation: rare-pulse 1.8s var(--ease-premium, cubic-bezier(0.22,1,0.36,1)) infinite;
}
@keyframes rare-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.6); }
  60%  { box-shadow: 0 0 0 12px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
.rare-strip-explainer {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2px;
  flex: 1 1 auto;
  min-width: 280px;
}
.rare-strip-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  /* Hide scrollbar visually; keep accessible */
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.25) transparent;
}
.rare-strip-track::-webkit-scrollbar { height: 6px; }
.rare-strip-track::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.25); border-radius: 3px; }
.rare-card {
  position: relative;
  flex: 0 0 240px;
  scroll-snap-align: start;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(18,43,85,0.65) 0%, rgba(11,20,38,0.45) 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  color: var(--ivory);
  isolation: isolate;
  overflow: hidden;
  transition: transform 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              box-shadow 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.rare-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 18px 36px -22px rgba(212,175,55,0.45);
}
.rare-card-glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 65%);
  z-index: -1;
}
.rare-card-extreme .rare-card-glow {
  animation: rare-glow-shimmer 4.2s ease-in-out infinite;
}
@keyframes rare-glow-shimmer {
  0%, 100% { opacity: 0.7; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(-6px, 4px); }
}
.rare-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rare-card-badge {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(212, 175, 55, 0.18);
  color: var(--accent);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 6px;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  font-weight: 700;
  text-transform: uppercase;
}
.rare-card-since {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.rare-card-name {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  color: var(--ivory);
}
.rare-card-route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 16px;
  color: rgba(245, 244, 239, 0.85);
  margin-bottom: 6px;
}
.rare-card-arc {
  flex: 0 0 auto;
  width: 60px; height: 18px;
  color: var(--accent);
}
.rare-card-meta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.rare-card-cost {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.rare-card-pts {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 22px;
  color: var(--accent);
  font-weight: 500;
}
.rare-card-pts-lbl {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.rare-card-via {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

/* ==================== DEAL FEED ====================
   Editorial cards. Premium: route arc, big serif points, hover lift,
   gold accent on the destination IATA, "verified Xh ago" trust signal.
   Visually shows the difference vs flat data tables.
====================================================================== */
.deal-feed {
  margin: 36px auto 24px;
  max-width: 1280px;
  padding: 0 24px;
}
.alerts-feed {
  /* Tight pairing with the deal feed above; the alerts strip reads as a
     contextual extension rather than a fully separate section. */
  margin: 0 auto 48px;
}
.deal-feed-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.deal-feed-titleblock {
  flex: 1 1 auto;
  min-width: 280px;
}
.deal-feed-title {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 32px;
  letter-spacing: 0.5px;
  margin: 4px 0 6px;
  color: var(--ivory);
  font-weight: 500;
}
.deal-feed-title em {
  color: var(--accent);
  font-style: italic;
}
.deal-feed-explainer {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0.2px;
  max-width: 540px;
}
.eyebrow-gold {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.deal-feed-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.region-pill {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(191, 198, 207, 0.18);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 150ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              color 150ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 150ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.region-pill:hover {
  border-color: rgba(212, 175, 55, 0.35);
  color: var(--ivory);
}
.region-pill-active {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--accent);
  font-weight: 600;
}
.deal-feed-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 20px;
  min-height: 80px;
  align-items: stretch;
}
.deal-empty {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: rgba(191, 198, 207, 0.04);
  border: 1px dashed rgba(191, 198, 207, 0.16);
  border-radius: 12px;
}
.deal-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 11px 13px 12px;
  border-radius: 11px;
  background: linear-gradient(170deg, rgba(18,43,85,0.55) 0%, rgba(11,20,38,0.35) 100%);
  border: 1px solid rgba(191, 198, 207, 0.12);
  color: var(--ivory);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition: transform 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              box-shadow 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.deal-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 18px 36px -22px rgba(0,0,0,0.6),
              0 0 0 1px rgba(212, 175, 55, 0.15) inset;
}
.deal-card-topline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.deal-card-date {
  color: var(--muted);
  font-weight: 600;
}
.deal-card-cabin {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(191, 198, 207, 0.10);
  border: 1px solid rgba(191, 198, 207, 0.20);
  border-radius: 999px;
  font-size: 9.5px;
  color: var(--ivory);
  letter-spacing: 0.6px;
}
.deal-card-newbadge {
  margin-left: auto;
  display: inline-block;
  padding: 2px 8px;
  background: rgba(212, 175, 55, 0.18);
  color: var(--accent);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  animation: deal-newbadge-pulse 2.4s ease-in-out infinite;
}
@keyframes deal-newbadge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(212,175,55,0); }
}
.deal-card-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}
.deal-card-iata {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.7px;
  color: var(--ivory);
  font-weight: 500;
  line-height: 1;
}
.deal-card-iata-gold { color: var(--accent); }
.deal-card-arc {
  flex: 1 1 auto;
  height: 24px;
  max-width: 72px;
}
.deal-card-cost {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.deal-card-pts {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 19px;
  color: var(--accent);
  font-weight: 500;
  line-height: 1;
}
.deal-card-pts-lbl {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.deal-card-fees {
  font-size: 10.5px;
  color: var(--muted);
  margin-left: auto;
  letter-spacing: 0.2px;
}
.deal-card-program-row {
  font-size: 11px;
  color: var(--ivory);
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 6px;
}
.deal-card-program-row .program-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.deal-card-airline-row {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 10px;
  letter-spacing: 0.15px;
  line-height: 1.45;
}
.deal-card-airline-row .airline-iata {
  display: inline-block;
  padding: 1px 5px;
  font-size: 9px;
  letter-spacing: 0.6px;
  background: rgba(212, 175, 55, 0.10);
  color: var(--accent);
  border-radius: 3px;
  margin-right: 2px;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
}
.deal-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(191, 198, 207, 0.10);
  font-size: 10px;
  letter-spacing: 0.4px;
}
.deal-card-since {
  color: var(--muted);
}
.deal-card-cta {
  color: var(--accent);
  font-weight: 600;
}
.deal-card-new {
  background: linear-gradient(170deg, rgba(212,175,55,0.10) 0%, rgba(11,20,38,0.35) 100%);
  border-color: rgba(212, 175, 55, 0.32);
}

/* ==================== ALERTS FEED (JUST OPENED) ====================
   Same card design, warmer ambient tint, gold pulse on the badge.
====================================================================== */
.alerts-feed {
  margin: 0 auto 36px;
  max-width: 1280px;
  padding: 22px 24px 26px;
  background:
    radial-gradient(circle at 8% 0%, rgba(212,175,55,0.10), transparent 60%),
    linear-gradient(180deg, rgba(18,43,85,0.45), rgba(11,20,38,0.25));
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 18px;
}
.alerts-feed-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.alerts-feed-pulse {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  align-self: center;
  box-shadow: 0 0 0 0 rgba(212,175,55,0.6);
  animation: rare-pulse 1.8s var(--ease-premium, cubic-bezier(0.22,1,0.36,1)) infinite;
}
.alerts-feed-title {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 22px;
  margin: 0;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.4px;
}
.alerts-feed-explainer {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2px;
  flex: 1 1 auto;
  min-width: 240px;
}
.alerts-feed-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* ==================== MOAT SECTIONS (Flex + Wallet) ====================
   Flex Search and Wallet Reverse Search both ride the existing app-section
   shell but get a slim gold accent rail to differentiate them as the
   "you cannot do this anywhere else" tier.
====================================================================== */
.moat-section .section-eyebrow {
  color: var(--accent);
  letter-spacing: 1.6px;
}
.moat-section { position: relative; }
.moat-section::before {
  content: "";
  position: absolute;
  top: 24px; bottom: 24px; left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(212,175,55,0.7) 0%, rgba(212,175,55,0) 100%);
  border-radius: 2px;
}
.wallet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.wallet-col h4 {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 16px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.4px;
  margin: 0 0 8px;
}
.wallet-col .field {
  margin-bottom: 8px;
}
.flex-results-head {
  margin: 18px 0 12px;
}
.flex-results-head h3 {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 22px;
  color: var(--ivory);
  font-weight: 500;
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}
.deal-card-wallet {
  background: linear-gradient(170deg, rgba(212,175,55,0.12) 0%, rgba(11,20,38,0.30) 100%);
  border-color: rgba(212, 175, 55, 0.35);
}
/* Flex search budget explainer. Sits between the form fields and the
   submit row to clarify what "max miles cap" means - face-value chart
   price vs wallet conversion. Includes a link to Wallet Search for the
   wallet-aware path. */
.flex-budget-note {
  margin: 12px 2px 0;
  padding: 10px 12px;
  background: rgba(212, 175, 55, 0.04);
  border-left: 2px solid rgba(212, 175, 55, 0.35);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: 0.1px;
}
.flex-budget-note a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.flex-budget-note a:hover { text-decoration: underline; }

/* Honest empty-state when the user picks an origin we don't yet snapshot.
   Distinct from the generic "no matches" empty so the user understands
   the difference between "no data" and "no current matches." */
.deal-empty-coverage {
  text-align: left;
  padding: 22px 24px;
}
.deal-empty-coverage .deal-empty-title {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 20px;
  color: var(--ivory);
  font-weight: 500;
  margin-bottom: 6px;
}
.deal-empty-coverage .deal-empty-title strong { color: var(--accent); }
.deal-empty-coverage .deal-empty-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 14px;
}
.deal-empty-coverage .deal-empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.flex-origin-chip {
  padding: 5px 10px;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.6px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.20);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: background 150ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 150ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.flex-origin-chip:hover {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.5);
}
.deal-empty-coverage .deal-empty-foot {
  margin: 0;
  font-size: 11.5px;
}
/* "Also bookable" row on Flex cards. Shows alternate programs that
   publish the same route, sorted cheapest first. Tells the user "you
   can use Aeroplan OR KrisFlyer OR Cathay miles for this exact trip."
   Decoupled from the booking hint so it never wraps awkwardly. */
.deal-card-alts {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deal-card-alts-lbl {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
}
.deal-card-alts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.deal-card-alt {
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(191,198,207,0.06);
  border: 1px solid rgba(191,198,207,0.10);
  border-radius: 6px;
  padding: 3px 7px;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.deal-card-alt strong { color: var(--ivory); font-weight: 600; }

/* Tabular alt-rows on the Deal Feed cards. Different shape from the
   pill-style .deal-card-alt above (used by Flex), since here each row
   carries date + miles + program in 3 aligned columns. Reads as
   "same route, also open on these days" without leaving the card. */
.deal-card-alts {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(191,198,207,0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deal-card-alts-lbl {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.deal-card-alt-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 6px;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.1px;
}
.deal-card-alt-date {
  color: var(--muted);
  font-weight: 500;
}
.deal-card-alt-miles {
  color: var(--accent);
  font-weight: 500;
}
.deal-card-alt-miles strong { color: var(--accent); font-weight: 600; }
.deal-card-alt-program {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* Booking hint shown on Wallet + Flex result cards. Tells the user
   exactly what to type into the airline's redemption search. Avoids
   the trap of showing "you can book this" without showing how. */
.deal-card-booking-hint {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(191,198,207,0.04);
  border: 1px solid rgba(191,198,207,0.10);
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.1px;
}
.deal-card-booking-hint .hint-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 9px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 2px;
}
.deal-card-booking-hint .hint-text strong { color: var(--ivory); font-weight: 600; }
.deal-card-booking-hint .hint-iso {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
}
/* Two-button action row. Primary = gold "Book on X" (opens airline).
   Secondary = neutral "View history" (goes to /route). */
.deal-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.deal-card-action {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  transition: background 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              color 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.deal-card-action-primary,
.deal-card-action-primary:link,
.deal-card-action-primary:visited {
  background: rgba(212,175,55,0.14);
  border: 1px solid rgba(212,175,55,0.45);
  color: var(--accent);
}
.deal-card-action-primary:hover {
  background: rgba(212,175,55,0.22);
  border-color: rgba(212,175,55,0.65);
}
.deal-card-action-secondary,
.deal-card-action-secondary:link,
.deal-card-action-secondary:visited {
  background: transparent;
  border: 1px solid rgba(191,198,207,0.18);
  color: var(--muted);
}
.deal-card-action-secondary:hover {
  border-color: rgba(191,198,207,0.40);
  color: var(--ivory);
}

/* ==================== CINEMATIC LAYER ====================
   1. Route-arc draws on first paint. Path stroke begins fully dashed
      and animates to dashoffset:0. Triggered by IntersectionObserver
      adding .in-view to the .deal-card. Honored prefers-reduced-motion.
   2. Waterfall entry. Sections that opt in via [data-stagger] get a
      staggered translateY+opacity sequence keyed by their child index.
   3. Editor's pick promoted: bigger gold halo, scale-on-enter, gentler
      hover. Single full-width card per row even on wide viewports so
      it reads as the "headline" deal of the moment.
====================================================================== */
.deal-card-arc path,
.deal-feature-arc path,
.rare-card-arc path,
.route-arc path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  /* Slowed from 1100ms -> 2200ms with a 200ms entry delay so the draw
     reads as deliberate rather than flickering past. The cubic-bezier
     easing keeps the line gentle through the middle of the path
     instead of snapping. */
  transition: stroke-dashoffset 2200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.deal-card.in-view .deal-card-arc path,
.deal-feature.in-view .deal-feature-arc path,
.rare-card.in-view .rare-card-arc path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .deal-card-arc path,
  .deal-feature-arc path,
  .rare-card-arc path,
  .route-arc path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Waterfall stagger. Apply [data-stagger] on a parent and the children
   fade-in sequentially using the --i custom property as their position
   index. Hydrators set --i in JS for dynamic content. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(8px);
  animation: cinematic-fade-up 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@keyframes cinematic-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Editor's pick: more screen presence. Gold halo, soft scale-on-enter,
   slightly bigger title typography. The grid-column: 1 / -1 makes it
   span the entire deal-feed-track row; the box itself sits taller than
   regular cards so it reads as the headline. */
.deal-feature-wrap {
  grid-column: 1 / -1;
}
.deal-feature {
  position: relative;
  min-height: 280px;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.6),
              0 0 0 1px rgba(212,175,55,0.15) inset;
  animation: feature-enter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes feature-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.deal-feature::after {
  /* Soft gold halo behind the card - decorative, sets the "editor's
     pick" apart from the regular grid below. */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: radial-gradient(circle at 70% 0%, rgba(212,175,55,0.18), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.deal-feature-iata { font-size: 44px; }
.deal-feature-pts { font-size: 52px; }
@media (max-width: 720px) {
  .deal-feature-iata { font-size: 30px; }
  .deal-feature-pts { font-size: 38px; }
}

/* ==================== HERO STRATEGIST ====================
   Strategist-first hero. Replaces the old two-column command center.
   The input box IS the product; everything else is supporting trust
   signal. Scaled for desktop AND mobile so the input stays the most
   visible thing on the page in both modes.
====================================================================== */
.hero-strategist {
  position: relative;
  padding: 64px 24px 56px;
  overflow: hidden;
}
.hero-strategist::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(212,175,55,0.10), transparent 55%),
    radial-gradient(ellipse at 90% 60%, rgba(18,43,85,0.40), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Stylized world map drifting subtly behind the hero copy. The hub
   pings ripple in a staggered cycle to suggest live activity without
   being noisy. opacity is held below 0.5 so the map never competes
   with the input box for attention. */
.hero-routemap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Bumped 0.45 -> 0.75. The 0.45 multiplier on top of the ping
     keyframe peak (0.55) made combined opacity 0.25 - basically
     invisible against navy. 0.75 gets us to ~0.55 at peak, which
     reads clearly without competing with hero text. */
  opacity: 0.75;
  filter: drop-shadow(0 0 30px rgba(212,175,55,0.06));
}
.hub-dot {
  /* Solid gold pin at every hub. Visible even when the surrounding
     ping is at the trough of its cycle, so users see static structure
     plus moving rings, not just blank canvas. */
  fill: rgba(212,175,55,0.95);
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.75));
}
.hub-ping {
  fill: url(#hub-ping);
  transform-origin: center;
  transform-box: fill-box;
  animation: hub-ripple 4.2s ease-out infinite;
  opacity: 0;
}
@keyframes hub-ripple {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 0.75; }
  60%  { opacity: 0.4; }
  100% { transform: scale(3.0); opacity: 0; }
}

/* Flight-path trails connecting the hubs. Faint gold dashed lines that
   the plane glyphs trace via SMIL animateMotion. The trail itself is
   static; only the planes move. */
.hero-routemap-flights .hero-flight-trail {
  fill: none;
  stroke: rgba(212, 175, 55, 0.22);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
}
/* Plane glyph. Inner solid gold dot + outer halo. The animateMotion
   element on each plane drives the position; we just style the visual. */
.hero-routemap-flights .hero-flight {
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the planes pinned at start when motion is reduced; SMIL has
     no native reduced-motion hook, so we hide the planes entirely and
     leave the trails as a static suggestion of routes. */
  .hero-routemap-flights .hero-flight { display: none; }
}

/* ==================== SECTION-LEVEL WATERFALL ====================
   Top-level sections (#strategist, #optimize, #calendar, etc.) start
   slightly translated + transparent and reveal as they scroll into
   view. Distinct from the per-card stagger inside [data-stagger]
   rails - this is the section-by-section sweep the user expected
   when scrolling down /app.

   Hooked via JS: observeSectionReveals() in app.js walks every
   element with [data-section-reveal] and toggles .is-revealed when
   it enters the viewport. Honours prefers-reduced-motion.
====================================================================== */
[data-section-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-section-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-section-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-ping { animation: none; opacity: 0.25; }
}
.hero-strat-inner { position: relative; z-index: 1; }

/* LIVE DATA PILL above the input. Single line; pulsing dot for proof-of-life. */
.hero-livepill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  margin: 0 auto 18px;
  background: rgba(212,175,55,0.07);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  color: var(--muted);
  animation: livepill-fade-in 600ms ease-out;
}
.hero-livepill strong { color: var(--accent); font-weight: 600; }
.hero-livepill-pulse {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: livepill-pulse 1.6s ease-in-out infinite;
}
@keyframes livepill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(212,175,55,0); }
}
@keyframes livepill-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-strat-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hero-strat-eyebrow {
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero-strat-display {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: clamp(36px, 5.6vw, 64px);
  letter-spacing: 0.5px;
  color: var(--ivory);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 16px;
}
.hero-strat-display em {
  color: var(--accent);
  font-style: italic;
}
.hero-strat-sub {
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--muted);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 32px;
  letter-spacing: 0.2px;
}

.hero-strat-form {
  margin: 0 auto 28px;
  max-width: 720px;
}
.hero-strat-inputwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  background: linear-gradient(180deg, rgba(18,43,85,0.65) 0%, rgba(11,20,38,0.45) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -22px rgba(0,0,0,0.7);
  transition: border-color 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              box-shadow 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.hero-strat-inputwrap:focus-within {
  border-color: rgba(212, 175, 55, 0.65);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset,
              0 0 0 3px rgba(212,175,55,0.10),
              0 18px 50px -22px rgba(0,0,0,0.7);
}
.hero-strat-prefix {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  flex: 0 0 auto;
}
.hero-strat-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ivory);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.2px;
  padding: 12px 8px;
  line-height: 1.4;
}
.hero-strat-input::placeholder { color: rgba(191,198,207,0.55); }
.hero-strat-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(140deg, rgba(212,175,55,0.95) 0%, rgba(180,142,28,0.95) 100%);
  color: var(--bg, #0B1426);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              box-shadow 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.hero-strat-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(212,175,55,0.55);
}
.hero-strat-submit svg { transition: transform 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)); }
.hero-strat-submit:hover svg { transform: translateX(2px); }

.hero-strat-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.hero-strat-chip {
  padding: 7px 14px;
  background: rgba(191,198,207,0.04);
  border: 1px solid rgba(191,198,207,0.16);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              color 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 160ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.hero-strat-chip:hover {
  background: rgba(212,175,55,0.10);
  color: var(--ivory);
  border-color: rgba(212,175,55,0.45);
}

/* LIVE DATA RIBBON. Three numbers proving the moat exists. */
.hero-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 56px auto 0;
  max-width: 880px;
  padding: 22px 26px;
  background: linear-gradient(180deg, rgba(18,43,85,0.30) 0%, rgba(11,20,38,0.10) 100%);
  border: 1px solid rgba(191,198,207,0.10);
  border-radius: 16px;
  text-align: left;
}
.hero-ribbon-cell {
  position: relative;
  padding-left: 16px;
}
.hero-ribbon-cell::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(212,175,55,0.7) 0%, rgba(212,175,55,0) 100%);
  border-radius: 2px;
}
.hero-ribbon-val {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 36px;
  color: var(--accent);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ribbon-loading {
  display: inline-block;
  color: rgba(212,175,55,0.45);
  animation: ribbon-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes ribbon-loading-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.hero-ribbon-lbl {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--ivory);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hero-ribbon-sub {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.2px;
  line-height: 1.4;
}

/* Clickable variant of the ribbon cell. Used to wrap the trend cell in
   an anchor that opens the live /route forecast for the sample
   corridor. Inherits cell layout but adds hover affordance + a small
   "View live forecast →" hint that fades in on hover. */
a.hero-ribbon-cell-link {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 8px;
  transition: background 200ms, transform 200ms;
}
a.hero-ribbon-cell-link:hover,
a.hero-ribbon-cell-link:focus-visible {
  background: rgba(212,175,55,0.05);
  transform: translateY(-1px);
}
a.hero-ribbon-cell-link:focus-visible {
  outline: 2px solid rgba(212,175,55,0.5);
  outline-offset: 2px;
}
.hero-ribbon-cta {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  opacity: 0.55;
  transition: opacity 200ms, transform 200ms;
}
a.hero-ribbon-cell-link:hover .hero-ribbon-cta,
a.hero-ribbon-cell-link:focus-visible .hero-ribbon-cta {
  opacity: 1;
}
.hero-ribbon-cta-arrow {
  display: inline-block;
  transition: transform 200ms;
}
a.hero-ribbon-cell-link:hover .hero-ribbon-cta-arrow {
  transform: translateX(3px);
}

/* ==================== LIVE FORECASTS SECTION ====================
   Standalone band promoting the predictive /route surface. Sits as
   its own section between the hero and the moat tools (Flex /
   Wallet) so users discover it in the natural scroll flow.
   Each card is a clickable link to /route?o=&d=&c=, hydrated from
   /forecast on load with cheapest miles + program count + trend.
====================================================================== */
.forecasts-section {
  position: relative;
  padding: 56px 0 64px;
  background:
    radial-gradient(1400px 360px at 50% 0%, rgba(212,175,55,0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(11,20,38,0) 0%, rgba(18,43,85,0.18) 100%);
}
.forecasts-section::before {
  /* Top hairline accent in gold so the section reads as its own
     deliberate band rather than a continuation of the hero. */
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.45) 30%, rgba(212,175,55,0.45) 70%, transparent 100%);
}
.forecasts-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 16px;
}
.forecasts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.forecasts-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(212,175,55,0.65);
  animation: forecastsPulse 2.4s ease-out infinite;
}
@keyframes forecastsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
  80%  { box-shadow: 0 0 0 8px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
@media (prefers-reduced-motion: reduce) {
  .forecasts-pulse { animation: none; }
}
.forecasts-title {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ivory);
  letter-spacing: 0.5px;
  margin: 0 0 10px;
}
.forecasts-sub {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.2px;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}
.forecasts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 24px;
}
.forecast-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  background: linear-gradient(170deg, rgba(18,43,85,0.55) 0%, rgba(11,20,38,0.40) 100%);
  border: 1px solid rgba(191,198,207,0.14);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ivory);
  transition: border-color 220ms, transform 220ms, box-shadow 220ms;
  overflow: hidden;
}
.forecast-card::after {
  /* Faint gold halo on hover. Subtle, premium, not theatrical. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(400px 120px at 50% 0%, rgba(212,175,55,0.15) 0%, transparent 70%);
  transition: opacity 220ms;
}
.forecast-card:hover,
.forecast-card:focus-visible {
  border-color: rgba(212,175,55,0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(212,175,55,0.18);
}
.forecast-card:hover::after,
.forecast-card:focus-visible::after { opacity: 1; }
.forecast-card:focus-visible {
  outline: 2px solid rgba(212,175,55,0.5);
  outline-offset: 2px;
}
.forecast-card-route {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.forecast-card-iata {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--ivory);
}
.forecast-card-iata-gold { color: var(--accent); }
.forecast-card-arrow {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 22px;
  color: var(--muted);
}
.forecast-card-cabin {
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.forecast-card-miles {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 30px;
  color: var(--accent);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  min-height: 30px;
}
.forecast-card-miles .miles-loading {
  color: rgba(212,175,55,0.35);
  animation: ribbon-loading-pulse 1.4s ease-in-out infinite;
}
.forecast-card-miles strong { color: var(--accent); font-weight: 600; }
.forecast-card-miles .miles-suffix {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: 6px;
}
.forecast-card-meta {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.2px;
  line-height: 1.5;
  min-height: 32px;
}
.forecast-card-meta .meta-trend-loose  { color: #b8e3cd; }
.forecast-card-meta .meta-trend-tight  { color: #f5c5b8; }
.forecast-card-meta .meta-trend-stable { color: var(--muted); }

/* 120x28 inline sparkline rendering 30 days of cheapest-miles per
   snapshot day. Skipped when data is too thin to plot. Lower line =
   corridor got cheaper. Glance-readable signal next to the headline
   numbers. */
.forecast-card-spark {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 6px;
  margin-bottom: 4px;
  opacity: 0.95;
}
.forecast-card-cta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  opacity: 0.6;
  transition: opacity 220ms, transform 220ms;
  border-top: 1px solid rgba(191,198,207,0.08);
}
.forecast-card:hover .forecast-card-cta,
.forecast-card:focus-visible .forecast-card-cta {
  opacity: 1;
}
.forecast-card-cta-arrow {
  display: inline-block;
  transition: transform 220ms;
}
.forecast-card:hover .forecast-card-cta-arrow {
  transform: translateX(3px);
}
@media (max-width: 600px) {
  .forecasts-section { padding: 40px 0 48px; }
  .forecasts-title { font-size: 28px; }
  .forecasts-grid { gap: 10px; padding: 0 16px; }
  .forecast-card { padding: 16px; }
  .forecast-card-iata { font-size: 22px; }
  .forecast-card-miles { font-size: 26px; }
}

@media (max-width: 600px) {
  .hero-strategist { padding: 36px 16px 32px; }
  .hero-strat-inputwrap { padding: 6px 6px 6px 14px; }
  .hero-strat-input { font-size: 14px; padding: 10px 4px; }
  .hero-strat-submit span { display: none; }
  .hero-strat-submit { padding: 10px 14px; }
  .hero-ribbon { padding: 18px 18px; gap: 14px; margin-top: 36px; }
  .hero-ribbon-val { font-size: 30px; }
  .hero-forecast-chips { gap: 6px; }
  .hero-forecast-chip { padding: 5px 10px; font-size: 11.5px; }
}

/* ==================== EDITOR'S PICK ====================
   Featured top card on the deal feed. One curated deal-of-the-moment
   above the grid. Bigger, with prose reasoning. Wirecutter-style
   editor pick rather than a flat data row. Hidden until the JS
   hydrator promotes a deal into it. The card itself reuses .deal-card
   markup but with a ".deal-card-feature" modifier that scales up.
====================================================================== */
/* The wrapper is an <a>; the user-agent stylesheet would otherwise paint
   every inheriting child royal blue. Anchor the link color to ivory and
   let inner classes override where they want gold or muted. */
.deal-feature-wrap,
a.deal-feature-wrap:link,
a.deal-feature-wrap:visited,
a.deal-feature-wrap:hover,
a.deal-feature-wrap:active {
  display: block;
  margin-bottom: 22px;
  color: var(--ivory);
  text-decoration: none;
}
.deal-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(212,175,55,0.10) 0%, rgba(18,43,85,0.55) 50%, rgba(11,20,38,0.50) 100%);
  border: 1px solid rgba(212, 175, 55, 0.32);
  color: var(--ivory);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition: transform 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              border-color 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              box-shadow 200ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.deal-feature:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 26px 50px -22px rgba(212,175,55,0.25);
}
.deal-feature-left {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.deal-feature-eyebrow {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.deal-feature-route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.deal-feature-iata {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 36px;
  letter-spacing: 1.2px;
  color: var(--ivory);
  font-weight: 500;
  line-height: 1;
}
.deal-feature-iata-gold { color: var(--accent); }
.deal-feature-arc { flex: 1 1 auto; height: 36px; max-width: 140px; }
.deal-feature-meta {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.2px;
  margin-bottom: 16px;
}
.deal-feature-prose {
  font-size: 14.5px;
  color: var(--ivory);
  line-height: 1.5;
  margin: 0 0 18px;
  letter-spacing: 0.1px;
}
.deal-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--accent);
}
.deal-feature-right {
  padding: 28px 32px;
  background: rgba(11,20,38,0.45);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(212, 175, 55, 0.14);
}
.deal-feature-cost {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.deal-feature-pts {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 44px;
  color: var(--accent);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.5px;
}
.deal-feature-pts-lbl {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.deal-feature-fees {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.deal-feature-via {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.deal-feature-via strong { color: var(--ivory); font-weight: 600; }
.deal-feature-since {
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-top: auto;
}

@media (max-width: 720px) {
  .deal-feature { grid-template-columns: 1fr; }
  .deal-feature-right { border-left: none; border-top: 1px solid rgba(212,175,55,0.14); }
  .deal-feature-iata { font-size: 28px; }
  .deal-feature-pts { font-size: 36px; }
}
.strat-downgrade-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: rgba(245, 163, 92, 0.08);
  border: 1px solid rgba(245, 163, 92, 0.24);
  border-radius: 12px;
  color: var(--warn, #F5A35C);
  font-size: 13px;
  line-height: 1.5;
}
.strat-downgrade-note strong { color: var(--ivory-cream); font-weight: 600; }
.strat-empty {
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(18, 43, 85, 0.55), rgba(11, 20, 38, 0.55));
  border: 1px solid rgba(191, 198, 207, 0.18);
  border-radius: 18px;
  text-align: center;
}
.strat-empty h3 {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--ivory-cream);
  margin: 0 0 6px;
}
.strat-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--pearl-silver);
  line-height: 1.55;
}

/* =============================================================
   Intelligence Summary panel (Bloomberg-style verdict)

   Sits below the four synthesis cards. Reads as an analyst note:
   one prose verdict, two side-by-side bullet blocks (Why this
   matters, Risk flags). Brand-only colors, no decorative chrome.
============================================================= */
.intel-summary {
  margin: 28px 0 8px;
  padding: 28px 28px 26px;
  background: linear-gradient(180deg, rgba(18, 43, 85, 0.55), rgba(11, 20, 38, 0.55));
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  /* Inherit the same fade-up entrance as the synth cards so the panel
     lands a beat after the grid resolves. Using avFadeUp keyframe that
     already exists in styles. */
  opacity: 0;
  transform: translateY(22px);
  animation: avFadeUp 540ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)) 320ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .intel-summary { opacity: 1; transform: none; animation: none; }
}
.intel-head { margin-bottom: 22px; }
.intel-eyebrow {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.intel-prose {
  margin: 0;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.42;
  color: var(--ivory-cream);
  letter-spacing: -0.2px;
  max-width: 920px;
}
.intel-prose strong {
  color: var(--accent);
  font-weight: 500;
}
.intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding-top: 22px;
  border-top: 1px dashed rgba(46, 64, 112, 0.4);
}
@media (max-width: 760px) {
  .intel-grid { grid-template-columns: 1fr; gap: 24px; }
}
.intel-block-title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pearl-silver);
}
.intel-block-risk .intel-block-title {
  color: var(--warn, #F5A35C);
}
.intel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.intel-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pearl-silver);
  border-bottom: 1px solid rgba(46, 64, 112, 0.18);
}
.intel-list li:last-child { border-bottom: 0; }
.intel-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.intel-list-risk li::before {
  background: var(--warn, #F5A35C);
}
.intel-list strong {
  color: var(--ivory-cream);
  font-weight: 600;
}
.synth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, var(--card-tint, rgba(191,198,207,0.06)), transparent 70%);
  z-index: -1;
}
.synth-card.gold-primary {
  border-color: rgba(212, 175, 55, 0.35);
  --card-tint: rgba(212, 175, 55, 0.16);
}
.synth-card.silver-secondary {
  border-color: rgba(191, 198, 207, 0.20);
  --card-tint: rgba(191, 198, 207, 0.08);
}

.synth-card .layer {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.synth-card.gold-primary .layer    { color: var(--accent); }
.synth-card.silver-secondary .layer{ color: var(--pearl-silver); }

.synth-card .verdict {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.1;
  color: var(--ivory-cream);
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}
.synth-card .verdict-sub {
  font-size: 13px;
  color: var(--pearl-silver);
  margin-bottom: 12px;
  line-height: 1.5;
  opacity: 0.92;
  flex: 1;
}
.synth-card .verdict-sub strong { color: var(--ivory-cream); }

.synth-stat {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(191, 198, 207, 0.18);
}
.synth-stat .stat-num {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}
.synth-card.gold-primary .stat-num    { color: var(--accent); }
.synth-card.silver-secondary .stat-num{ color: var(--ivory-cream); }
.synth-stat .stat-lbl {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pearl-silver);
  flex: 1;
  opacity: 0.8;
}

/* Brand-only tags (gold or silver, no green/red/orange here) */
.synth-tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.synth-tag.tag-gold {
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.40);
  color: var(--accent);
  /* Subtle breathing pulse to draw the eye to wallet readiness without
     becoming theatrical. avGoldPulse is defined alongside the orbital
     overlay; 4.6s loop is long enough to feel calm. */
  animation: avGoldPulse 4.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .synth-tag.tag-gold { animation: none; }
}
.synth-tag.tag-silver {
  background: rgba(191, 198, 207, 0.06);
  border: 1px solid rgba(191, 198, 207, 0.30);
  color: var(--pearl-silver);
}

/* Confidence ring uses gold on royal blue */
.conf-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    conic-gradient(var(--accent) 0deg calc(var(--score) * 3.6deg), rgba(191, 198, 207, 0.18) calc(var(--score) * 3.6deg) 360deg);
  display: grid;
  place-items: center;
  margin: 4px 0 12px;
  position: relative;
}
.conf-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--midnight-navy);
}
.conf-ring .conf-val {
  position: relative;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ivory-cream);
  font-weight: 600;
}
.conf-ring .conf-val sub {
  font-size: 10px;
  color: var(--pearl-silver);
  font-weight: 500;
  opacity: 0.7;
}

/* =============================================================
   Analyzing overlay + premium motion system
   Tasteful, perf-safe, transform/opacity only.
   Respects prefers-reduced-motion.
============================================================= */

:root {
  --motion-fast:   160ms;
  --motion-medium: 320ms;
  --motion-slow:   700ms;
  --ease-premium:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* Overlay container.
   !important on position + z-index defeats the global
   `body.marketing > * { position: relative; z-index: 1 }` rule that
   would otherwise force the overlay into the document flow at z-index:1
   and hide it behind the page content. */
.avenyra-analyzing {
  position: fixed !important;
  inset: 0;
  z-index: 1000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(800px 500px at 50% 30%, rgba(18,43,85,0.55), transparent 70%),
              rgba(11,20,38,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity var(--motion-medium) var(--ease-premium);
  pointer-events: none;
}
.avenyra-analyzing.av-visible {
  opacity: 1;
  pointer-events: auto;
}
.avenyra-analyzing.hidden { display: none; }

.avenyra-analyzing .av-card {
  width: 100%;
  max-width: 460px;
  padding: 36px 32px 30px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18,43,85,0.85), rgba(11,20,38,0.92));
  border: 1px solid rgba(212,175,55,0.22);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--motion-medium) var(--ease-premium);
}
.avenyra-analyzing.av-visible .av-card {
  transform: translateY(0) scale(1);
}

/* Orbit loader */
.av-orbit {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 22px;
}
.av-orbit-ring,
.av-orbit-ring--mid,
.av-orbit-ring--inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.18);
  animation: avOrbitSpin 4.2s linear infinite;
}
.av-orbit-ring::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(212,175,55,0.6);
  transform: translateX(-50%);
}
.av-orbit-ring--mid {
  inset: 14px;
  animation-duration: 3s;
  animation-direction: reverse;
  border-color: rgba(212,175,55,0.28);
}
.av-orbit-ring--mid::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pearl-silver);
  transform: translateX(-50%);
}
.av-orbit-ring--inner {
  inset: 28px;
  animation-duration: 2.2s;
  border-color: rgba(191,198,207,0.18);
}
.av-orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F0D390, #D4AF37 60%, #B8941F 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(212,175,55,0.55);
  animation: avOrbitPulse 2s ease-in-out infinite;
}

@keyframes avOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes avOrbitPulse {
  0%,100% { box-shadow: 0 0 14px rgba(212,175,55,0.4); transform: translate(-50%, -50%) scale(1); }
  50%     { box-shadow: 0 0 30px rgba(212,175,55,0.7); transform: translate(-50%, -50%) scale(1.1); }
}

.av-headline {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ivory-cream);
  margin: 0 0 6px;
}
.av-sub {
  font-size: 13px;
  color: var(--pearl-silver);
  margin: 0 0 22px;
  letter-spacing: 0.02em;
}
.av-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.av-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--pearl-silver);
  border-bottom: 1px solid rgba(46,64,112,0.18);
  opacity: 0;
  transform: translateY(6px);
  animation: avStepFadeIn var(--motion-medium) var(--ease-premium) forwards;
}
.av-step:last-child { border-bottom: 0; }
.av-step-mark {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(212,175,55,0.35);
  position: relative;
  background: transparent;
  transition: background var(--motion-fast) var(--ease-premium),
              border-color var(--motion-fast) var(--ease-premium);
}
.av-step-pending .av-step-mark::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  border-right-color: transparent;
  animation: avMarkSpin 0.9s linear infinite;
}
.av-step-done .av-step-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.av-step-done .av-step-mark::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 4px; height: 7px;
  border: solid var(--midnight-navy);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.av-step-done .av-step-text { color: var(--ivory-cream); }
.av-step-text { line-height: 1.4; }

@keyframes avStepFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes avMarkSpin {
  to { transform: rotate(360deg); }
}

/* =============================================================
   Tasteful animations for synthesis cards & confidence ring.
============================================================= */

/* Stagger fade-up on synthesis cards when they appear in the
   results pane. Uses transform/opacity only (no width/height
   changes) so it cannot trigger CLS. */
.synth-grid > .synth-card {
  opacity: 0;
  transform: translateY(22px);
  animation: avFadeUp 540ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1)) forwards;
}
.synth-grid > .synth-card:nth-child(1) { animation-delay:  80ms; }
.synth-grid > .synth-card:nth-child(2) { animation-delay: 220ms; }
.synth-grid > .synth-card:nth-child(3) { animation-delay: 360ms; }
.synth-grid > .synth-card:nth-child(4) { animation-delay: 500ms; }
.synth-grid > .synth-card:nth-child(5) { animation-delay: 640ms; }

@keyframes avFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Subtle gold pulse used to highlight live market signals */
.synth-card.gold-primary,
.market-signal-live {
  position: relative;
}
.synth-card.gold-primary::after,
.market-signal-live::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(212,175,55,0);
  animation: avGoldPulse 4.6s ease-in-out infinite;
}
@keyframes avGoldPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(212,175,55,0); }
  50%      { box-shadow: 0 0 26px rgba(212,175,55,0.18); }
}

/* Confidence ring count-up: the JS sets --conf-progress and the ring
   transitions smoothly from 0 to that value. */
.conf-ring {
  transition: background var(--motion-slow, 700ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}

/* Reduced motion — disable everything decorative */
@media (prefers-reduced-motion: reduce) {
  .avenyra-analyzing,
  .avenyra-analyzing .av-card,
  .av-step,
  .av-orbit-ring,
  .av-orbit-ring--mid,
  .av-orbit-ring--inner,
  .av-orbit-core,
  .synth-grid > .synth-card,
  .synth-card.gold-primary::after,
  .market-signal-live::after,
  .conf-ring {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }
}

/* =============================================================
   Avenyra explanation modal (AI / template)
============================================================= */
/* Native <dialog> element — renders in the browser top layer when opened
   with .showModal(). No CSS rule on the page can override the top-layer
   stacking, so the modal always appears above everything. */
dialog.av-explain {
  /* When closed, the dialog is display:none by default. When opened with
     showModal() the browser switches it to block and lifts it to the top
     layer automatically. */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--motion-medium, 320ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
  overflow: hidden;
  /* Inline !important rules from JS already pin width/height/padding/etc. */
}
dialog.av-explain[open] {
  /* !important here defeats `body.marketing > * { position: relative; z-index: 1 }`
     in marketing.css, which has identical specificity (0,1,1) and is loaded
     after styles.css. Without these overrides the dialog gets dragged into
     document flow at the bottom of body and renders below the footer instead
     of centered in the viewport, even when opened via showModal(). */
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483600 !important;
  margin: 0 !important;
  padding: 24px !important;
  align-items: center !important;
  justify-content: center !important;
}
dialog.av-explain.av-visible {
  opacity: 1;
}
/* Native dialog backdrop — sits behind the dialog in the top layer. */
dialog.av-explain::backdrop {
  background: rgba(11,20,38,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.av-explain-backdrop {
  position: absolute; inset: 0;
  background: rgba(11,20,38,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.av-explain-card {
  position: relative;
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, rgba(18,43,85,0.95), rgba(11,20,38,0.95));
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--motion-medium, 320ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
  max-height: 84vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.av-explain.av-visible .av-explain-card { transform: translateY(0) scale(1); }
.av-explain-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(46,64,112,0.25);
}
.av-explain-title {
  margin: 0;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 500; font-size: 22px;
  color: var(--ivory-cream);
}
.av-explain-close {
  background: transparent; border: 0;
  color: var(--pearl-silver);
  font-size: 28px; line-height: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--motion-fast, 160ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              color var(--motion-fast, 160ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.av-explain-close:hover { background: rgba(212,175,55,0.12); color: var(--ivory-cream); }
.av-explain-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}
.av-explain-summary {
  font-size: 15px; line-height: 1.55;
  color: var(--ivory-cream);
  margin: 0 0 18px;
}
.av-explain-section { margin-bottom: 16px; }
.av-explain-section h4 {
  margin: 0 0 6px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.av-explain-section ul {
  margin: 0; padding-left: 18px;
  color: var(--pearl-silver);
  font-size: 13.5px; line-height: 1.55;
}
.av-explain-section li { margin-bottom: 4px; }
.av-explain-footer {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed rgba(46,64,112,0.35);
  font-size: 12px;
  color: var(--text-faint, #7B89A0);
}
.av-explain-foot {
  display: flex; justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid rgba(46,64,112,0.25);
}
.av-explain-done {
  background: linear-gradient(180deg, var(--accent-bright, #E5C963), var(--accent));
  color: var(--midnight-navy);
  border: 0; padding: 10px 22px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.av-explain-loading {
  display: flex; align-items: center; gap: 12px;
  color: var(--pearl-silver);
  font-size: 14px;
}
.av-explain-spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(212,175,55,0.25);
  border-top-color: var(--accent);
  animation: avMarkSpin 0.9s linear infinite;
}

/* Inline "Explain" buttons used inside synthesis cards */
.synth-explain {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.32);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast, 160ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.synth-explain:hover { background: rgba(212,175,55,0.18); }
.synth-explain::before { content: '✦'; opacity: 0.8; }

/* =============================================================
   Inline explanation panel (sits under the synth-grid)
============================================================= */
/* Persistent in-page section that replaces the modal explain flow for
   the primary verdict. Reserves a stable min-height while loading so
   CLS stays at 0 and the verdict grid above does not jump. */
.explain-inline {
  display: block;
  margin-top: 22px;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, rgba(18,43,85,0.65), rgba(11,20,38,0.65));
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  min-height: 220px;
  animation: explainInlineFade 320ms var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.explain-inline[hidden] { display: none; }
@keyframes explainInlineFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explain-inline-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(46,64,112,0.28);
}
.explain-inline-title {
  margin: 0;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 500; font-size: 22px;
  color: var(--ivory-cream);
  letter-spacing: -0.2px;
}
.explain-inline-hide {
  background: transparent;
  border: 1px solid rgba(191,198,207,0.28);
  color: var(--pearl-silver);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-fast, 160ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1)),
              color var(--motion-fast, 160ms) var(--ease-premium, cubic-bezier(0.22,1,0.36,1));
}
.explain-inline-hide:hover {
  background: rgba(212,175,55,0.12);
  color: var(--ivory-cream);
}
.explain-inline-body { position: relative; }
.explain-inline-body .av-explain-summary {
  font-size: 15px; line-height: 1.55;
  color: var(--ivory-cream);
  margin: 0 0 16px;
}
.explain-inline-body .av-explain-section { margin-bottom: 14px; }
.explain-inline-body .av-explain-section h4 {
  margin: 0 0 6px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.explain-inline-body .av-explain-section ul {
  margin: 0; padding-left: 18px;
  color: var(--pearl-silver);
  font-size: 13.5px; line-height: 1.6;
}
.explain-inline-body .av-explain-section li { margin-bottom: 4px; }
.explain-inline-body .av-explain-footer {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(46,64,112,0.35);
  font-size: 12px;
  color: var(--text-faint, #7B89A0);
}
.explain-inline-loading {
  display: flex; align-items: center; gap: 12px;
  color: var(--pearl-silver);
  font-size: 13.5px;
  margin-bottom: 14px;
}
.explain-inline-error {
  color: var(--bad, #EF6B78);
  font-size: 13.5px;
  padding: 12px 0;
}
/* Skeleton shimmer while we wait for the fetch. Designed to roughly match
   the eventual content rhythm so the swap feels like text resolving rather
   than blocks moving. Hidden once content lands by replacement. */
.explain-skeleton { display: flex; flex-direction: column; gap: 10px; }
.explain-skeleton .sk-line {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(191,198,207,0.06) 0%,
    rgba(191,198,207,0.16) 50%,
    rgba(191,198,207,0.06) 100%);
  background-size: 200% 100%;
  animation: explainShimmer 1.4s ease-in-out infinite;
}
.explain-skeleton .sk-line-w90 { width: 90%; }
.explain-skeleton .sk-line-w85 { width: 85%; }
.explain-skeleton .sk-line-w80 { width: 80%; }
.explain-skeleton .sk-line-w75 { width: 75%; }
.explain-skeleton .sk-line-w70 { width: 70%; }
.explain-skeleton .sk-line-w30 { width: 30%; opacity: 0.85; }
.explain-skeleton .sk-block {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(46,64,112,0.25);
}
@keyframes explainShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .explain-inline { animation: none; }
  .explain-skeleton .sk-line { animation: none; }
}

/* ==================== CHAPTER BANNERS ====================
   Three numbered chapter dividers on /app: 01 Strategize, 02 Live
   Intelligence, 03 Tools. Each is a serif heading with an eyebrow
   and a one-line description. Gives the page a clear narrative
   arc instead of reading as a junk drawer of 14 sections.
====================================================================== */
.chapter-banner {
  position: relative;
  padding: 56px 24px 24px;
}
.chapter-banner::before {
  content: "";
  position: absolute;
  top: 24px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.35) 30%, rgba(212,175,55,0.35) 70%, transparent 100%);
}
.chapter-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding: 0 8px;
}
.chapter-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.chapter-num {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 28px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 1.4px;
}
.chapter-tag {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.chapter-title {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: 0.4px;
  margin: 0 0 10px;
}
.chapter-title em { color: var(--accent); font-style: italic; }
.chapter-sub {
  font-size: 14.5px;
  color: var(--muted);
  letter-spacing: 0.2px;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .chapter-banner { padding: 40px 16px 16px; }
  .chapter-title { font-size: 26px; }
  .chapter-num { font-size: 22px; }
  .chapter-rule { width: 24px; }
}

/* Numbered prefix on the simplified 3-item pill nav. The number reads
   in serif so it nests inline with the existing nav typography
   without competing with it. */
.mkt-nav .nav-num {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.6px;
  margin-right: 6px;
  opacity: 0.85;
}
.mkt-nav a:hover .nav-num,
.mkt-nav a.is-active .nav-num { opacity: 1; }

/* ==================== CLUSTER BANNERS ====================
   Smaller in-chapter dividers between tool groups inside Chapter 03.
   Discover / Plan / Validate / Stay current. Reads as a visual
   pause + label, not a full section header. */
.cluster-banner {
  margin: 28px auto 4px;
  padding: 12px 24px 0;
}
.cluster-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.cluster-eyebrow {
  font-family: var(--serif, 'Cormorant Garamond'), Georgia, serif;
  font-size: 17px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.6px;
}
.cluster-tag {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
@media (max-width: 600px) {
  .cluster-banner { padding: 8px 16px 0; }
  .cluster-inner { gap: 10px; }
  .cluster-eyebrow { font-size: 15px; }
  .cluster-tag { font-size: 10px; }
}

/* ==================== TIER CHIP ====================
   Three-tier bookable classification surface, shared across deal feed,
   forecast cards, route page, and Strategist results. Reads as the
   single trust signal points-folks want: "is this real right now, has
   it been real recently, or is it just chart speculation?"
====================================================================== */
.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.tier-chip .tier-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.tier-chip.tier-bookable {
  color: var(--accent);
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.35);
}
.tier-chip.tier-bookable .tier-dot {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(212,175,55,0.55);
}
/* "Recently observed" - between bookable-today and historical. Still
   gold-tinted but with no glow, signalling "we saw seats this week
   but not since yesterday." Added per Dec 2026 analyst review which
   asked for four tiers, not three. */
.tier-chip.tier-recent {
  color: var(--accent);
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.28);
}
.tier-chip.tier-recent .tier-dot {
  background: var(--accent);
  opacity: 0.7;
}
.tier-chip.tier-historical {
  color: rgba(212,175,55,0.65);
  background: rgba(212,175,55,0.03);
  border: 1px solid rgba(212,175,55,0.16);
}
.tier-chip.tier-historical .tier-dot { background: rgba(212,175,55,0.40); }
.tier-chip.tier-watchlist {
  color: var(--muted);
  background: rgba(191,198,207,0.04);
  border: 1px solid rgba(191,198,207,0.18);
}
.tier-chip.tier-watchlist .tier-dot { background: rgba(191,198,207,0.45); }

/* Slot for tier chip on forecast cards (Live Forecasts section). */
.forecast-card-tier {
  margin-top: 6px;
  display: flex;
}
.forecast-card-tier:empty { display: none; }

/* Tier row on deal feed cards. */
.deal-card-tier-row {
  margin-top: 8px;
  display: flex;
}
.deal-card-tier-row:empty { display: none; }