:root {
  /* v362 "Jetstream" — bright royal blue forward. The deep near-black anchor
     is replaced by a rich royal-blue ground (brighter, more energetic, less
     dull) that carries the nav, dark sections, headings and dark cards. */
  --hybrid-midnight: #0a1f7a;   /* deep royal-blue anchor (was #0c0a2a near-black) */
  /* Bright, cool-tinted neutrals so light sections read fresh + airy. */
  --hybrid-cloud: #F6F8FD;      /* near-white cool — quiet/base + pale sections */
  /* Jetstream blue family — the expressive colour, used as ground + accent. */
  --hybrid-sky: #3f8be6;        /* bright sky-blue accent */
  --hybrid-sky-ink: #1834c7;    /* readable royal-blue for text on light grounds */
  --hybrid-sky-deep: #1e46d6;   /* royal blue — gradient midtone / highlight */
  --hybrid-horizon: #78b4ff;    /* light sky highlight — gradient tail */
  --hybrid-pine: #143d20;
  --hybrid-jetstream: #120a8f;
  --hybrid-priority: #fe6f00;
  --hybrid-priority-hover: #e05e00;
  --hybrid-priority-ink: #b23c00;
  --hybrid-lounge: #c4fe98;
  --hybrid-lounge-hover: #b0f080;
  --hybrid-runway: #0a0a0a;

  /* Compatibility aliases keep existing component rules stable. */
  --hybrid-navy: var(--hybrid-midnight);
  --hybrid-navy-deep: var(--hybrid-midnight);
  --hybrid-blue: var(--hybrid-jetstream);
  --hybrid-champagne: var(--hybrid-lounge);
  --hybrid-champagne-hover: var(--hybrid-lounge-hover);
  --hybrid-gold-ink: var(--hybrid-jetstream);
  --hybrid-cream: #EEF2FB;   /* v362 Jetstream — bright cool feature white (was warm cream) */
  --hybrid-ivory: #ffffff;
  --hybrid-pale: var(--hybrid-cloud);
  --hybrid-white: #ffffff;
  --hybrid-ink: #1a1a19;
  --hybrid-muted: #34322d;
  --hybrid-border: rgba(12, 10, 42, 0.14);
  --hybrid-gold-border: rgba(196, 254, 152, 0.25);
  --hybrid-shadow: 0 18px 55px rgba(12, 10, 42, 0.14);
}

html { scroll-behavior: smooth; }
body {
  background: var(--hybrid-pale) !important;
  color: var(--hybrid-ink);
  font-family: 'Nunito Sans', 'Avenir Next', Avenir, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.hybrid-skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 0 0 8px 8px;
  background: var(--hybrid-priority);
  color: var(--hybrid-midnight);
  font-weight: 800;
  text-decoration: none;
  transition: top 0.2s ease;
}
.hybrid-skip-link:focus { top: 0; }
.hybrid-accessible-promise {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Merged, service-led navigation */
.hybrid-nav {
  background: rgba(10, 31, 122, 0.97) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 28px rgba(10, 10, 10, 0.24);
  backdrop-filter: blur(18px) saturate(115%);
}
.hybrid-nav a {
  font-size: 15px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}
.hybrid-nav .hybrid-nav-main { color: rgba(255,255,255,0.9) !important; }
.hybrid-nav .hybrid-nav-main:hover { color: #fff !important; }
.hybrid-nav .hybrid-nav-concierge,
.hybrid-nav .hybrid-nav-audit {
  min-height: 44px;
  /* display is set to inline-flex only >=768px (see @media below) so we never
     override Manus's native `hidden md:inline` on mobile — the CTAs live in the
     bottom mobile dock there, and this avoids any pre-hydration flash. */
  align-items: center;
  justify-content: center;
  padding: 10px 19px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  text-decoration: none;
}
.hybrid-nav .hybrid-nav-concierge {
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.78) !important;
  background: transparent !important;
}
.hybrid-nav .hybrid-nav-concierge:hover { background: rgba(255,255,255,0.1) !important; }
.hybrid-nav .hybrid-nav-audit {
  color: var(--hybrid-midnight) !important;
  border: 1px solid var(--hybrid-priority) !important;
  background: var(--hybrid-priority) !important;
  box-shadow: 0 6px 22px rgba(10,10,10,0.22);
}
.hybrid-nav .hybrid-nav-audit:hover { background: var(--hybrid-priority-hover) !important; }
/* Show the nav CTAs only from tablet up; on mobile they stay hidden (bottom dock). */
@media (min-width: 768px) {
  .hybrid-nav .hybrid-nav-concierge,
  .hybrid-nav .hybrid-nav-audit { display: inline-flex !important; }
}

/* Section rhythm */
section[data-hybrid-tone] {
  position: relative;
  isolation: isolate;
  border-color: var(--hybrid-border) !important;
  scroll-margin-top: 88px;
}
section[data-hybrid-tone="cream"] { background: var(--hybrid-cream) !important; color: var(--hybrid-ink) !important; }
section[data-hybrid-tone="white"],
section[data-hybrid-tone="light"] { background: var(--hybrid-white) !important; color: var(--hybrid-ink) !important; }
section[data-hybrid-tone="pale"] { background: var(--hybrid-pale) !important; color: var(--hybrid-ink) !important; }
section[data-hybrid-tone="dark"] { background: var(--hybrid-midnight) !important; color: #fff !important; }
section[data-hybrid-tone="pine"] { background: var(--hybrid-pine) !important; color: #fff !important; }
section[data-hybrid-tone="pine"] p,
section[data-hybrid-tone="pine"] li,
section[data-hybrid-tone="pine"] [class*="text-white/"] { color: rgba(255,255,255,.86) !important; }
section[data-hybrid-tone="pine"] h1,
section[data-hybrid-tone="pine"] h2,
section[data-hybrid-tone="pine"] h3,
section[data-hybrid-tone="pine"] h4,
section[data-hybrid-tone="pine"] [class*="text-white"] { color: #fff !important; }
section[data-hybrid-tone="dark"] p,
section[data-hybrid-tone="dark"] li,
section[data-hybrid-tone="dark"] [class*="text-white/20"],
section[data-hybrid-tone="dark"] [class*="text-white/25"],
section[data-hybrid-tone="dark"] [class*="text-white/30"],
section[data-hybrid-tone="dark"] [class*="text-white/35"],
section[data-hybrid-tone="dark"] [class*="text-white/40"],
section[data-hybrid-tone="dark"] [class*="text-white/50"],
section[data-hybrid-tone="dark"] [class*="text-white/60"] {
  color: rgba(255,255,255,.82) !important;
}
section[data-hybrid-tone="dark"] [class*="text-[#ADFF2F]"],
section[data-hybrid-tone="dark"] [class*="text-[#C4FE98]"] {
  color: var(--hybrid-champagne) !important;
}

section[data-hybrid-tone="cream"] [class*="text-white"],
section[data-hybrid-tone="white"] [class*="text-white"],
section[data-hybrid-tone="light"] [class*="text-white"],
section[data-hybrid-tone="pale"] [class*="text-white"] { color: var(--hybrid-ink) !important; }
section[data-hybrid-tone="cream"] p,
section[data-hybrid-tone="white"] p,
section[data-hybrid-tone="light"] p,
section[data-hybrid-tone="pale"] p { color: var(--hybrid-muted) !important; }
section[data-hybrid-tone="cream"] h1,
section[data-hybrid-tone="cream"] h2,
section[data-hybrid-tone="cream"] h3,
section[data-hybrid-tone="cream"] h4,
section[data-hybrid-tone="white"] h1,
section[data-hybrid-tone="white"] h2,
section[data-hybrid-tone="white"] h3,
section[data-hybrid-tone="white"] h4,
section[data-hybrid-tone="light"] h1,
section[data-hybrid-tone="light"] h2,
section[data-hybrid-tone="light"] h3,
section[data-hybrid-tone="light"] h4,
section[data-hybrid-tone="pale"] h1,
section[data-hybrid-tone="pale"] h2,
section[data-hybrid-tone="pale"] h3,
section[data-hybrid-tone="pale"] h4 { color: var(--hybrid-navy) !important; }

section[data-hybrid-tone="cream"] [class*="border-white"],
section[data-hybrid-tone="white"] [class*="border-white"],
section[data-hybrid-tone="light"] [class*="border-white"],
section[data-hybrid-tone="pale"] [class*="border-white"] { border-color: var(--hybrid-border) !important; }
section[data-hybrid-tone="cream"] [class*="bg-white/"],
section[data-hybrid-tone="white"] [class*="bg-white/"],
section[data-hybrid-tone="light"] [class*="bg-white/"],
section[data-hybrid-tone="pale"] [class*="bg-white/"] {
  background: rgba(255,255,255,0.78) !important;
  box-shadow: 0 10px 34px rgba(8,13,40,0.07);
}

/* Preserve high-contrast text inside dark media panels, photographs and video. */
section[data-hybrid-tone]:not([data-hybrid-tone="dark"]) section[class*="bg-[#0c0a2a]"] {
  color: #fff !important;
}
section[data-hybrid-tone]:not([data-hybrid-tone="dark"]) section[class*="bg-[#0c0a2a]"] p {
  color: rgba(255,255,255,.82) !important;
}
section[data-hybrid-tone]:not([data-hybrid-tone="dark"]) section[class*="bg-[#0c0a2a]"] [class*="text-white"] {
  color: #fff !important;
}
section[data-hybrid-tone] [class*="absolute"] [class*="text-white"],
section[data-hybrid-tone] [class*="absolute"][class*="text-white"] { color: #fff !important; }
section[data-hybrid-tone] [class*="bg-black"] [class*="text-white"] { color: #fff !important; }

/* Readable type for a 40+ audience */
section[data-hybrid-section]:not([data-hybrid-section="hero"]) h2 {
  font-size: clamp(36px, 4.4vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}
section[data-hybrid-section]:not([data-hybrid-section="hero"]) h3 {
  font-size: clamp(25px, 2.2vw, 34px) !important;
  line-height: 1.18 !important;
}
section[data-hybrid-section]:not([data-hybrid-section="hero"]) p,
section[data-hybrid-section]:not([data-hybrid-section="hero"]) li {
  font-size: 18px !important;
  line-height: 1.68 !important;
}
section[data-hybrid-section] [class*="uppercase"] {
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
}
/* Cormorant is a thin serif — lift h3-size headings on light grounds for 40+ eyes. */
section[data-hybrid-tone="cream"] h3,
section[data-hybrid-tone="white"] h3,
section[data-hybrid-tone="light"] h3,
section[data-hybrid-tone="pale"] h3 { font-weight: 500 !important; }
section[data-hybrid-tone]:not([data-hybrid-tone="dark"]) [class*="text-[#FE6F00]"] {
  color: var(--hybrid-gold-ink) !important;
}
section[data-hybrid-section="faq"] summary span:first-child {
  color: var(--hybrid-navy) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
}
section[data-hybrid-section="faq"] details > p {
  color: var(--hybrid-muted) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

/* Hero: stable proposition and two clear service pathways */
[data-hybrid-section="hero"] h1 {
  font-size: clamp(46px, 6.5vw, 84px) !important;
  line-height: 0.98 !important;
}
[data-hybrid-section="hero"] h1 + p {
  max-width: 620px !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: clamp(18px, 1.45vw, 21px) !important;
  line-height: 1.62 !important;
  margin-bottom: 34px !important;
}
[data-hybrid-section="hero"] .hybrid-fixed-promise {
  position: relative !important;
  display: inline-block !important;
  min-width: 5.9em !important;
  height: 1.15em !important;
  overflow: hidden !important;
  color: transparent !important;
  text-shadow: none !important;
}
[data-hybrid-section="hero"] .hybrid-fixed-promise > * { visibility: hidden !important; }
[data-hybrid-section="hero"] .hybrid-fixed-promise::after {
  content: 'Travel Dreams.';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: var(--hybrid-cloud);
  font-style: italic;
  white-space: nowrap;
}
.hybrid-btn,
.hybrid-conversion-audit,
.hybrid-conversion-concierge {
  min-height: 50px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 27px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.hybrid-btn:hover,
.hybrid-conversion-audit:hover,
.hybrid-conversion-concierge:hover { transform: translateY(-1px); }
.hybrid-btn-audit,
.hybrid-conversion-audit {
  color: var(--hybrid-midnight) !important;
  background: var(--hybrid-priority) !important;
  border: 1px solid var(--hybrid-priority) !important;
  box-shadow: 0 8px 28px rgba(10,10,10,0.22);
}
.hybrid-btn-audit:hover,
.hybrid-conversion-audit:hover { background: var(--hybrid-priority-hover) !important; }
[data-hybrid-section="hero"] .hybrid-btn-concierge,
[data-hybrid-section="hero"] .hybrid-btn-concierge.hybrid-conversion-concierge {
  color: #fff !important;
  background: rgba(8,13,40,0.74) !important;
  border: 1.5px solid rgba(255,255,255,0.82) !important;
  box-shadow: none !important;
}
[data-hybrid-section="hero"] .hybrid-btn-concierge:hover,
[data-hybrid-section="hero"] .hybrid-btn-concierge.hybrid-conversion-concierge:hover { background: var(--hybrid-navy) !important; }
.hybrid-conversion-concierge,
section[data-hybrid-section] a.hybrid-conversion-concierge {
  color: #fff !important;
  background: var(--hybrid-navy) !important;
  border: 1.5px solid var(--hybrid-navy) !important;
}

/* Early pathway cards */
[data-hybrid-section="start"] [class*="rounded"] {
  border-color: var(--hybrid-border) !important;
}
[data-hybrid-section="start"] a[href*="concierge"] {
  color: #fff !important;
  background: var(--hybrid-navy) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  display: block !important;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(8,13,40,.16);
}
[data-hybrid-section="start"] a[href*="concierge"] * {
  color: #fff !important;
}
[data-hybrid-section="start"] a[href*="concierge"] [class*="text-[#ADFF2F]"] {
  color: var(--hybrid-champagne) !important;
}
[data-hybrid-section="start"] a[href*="thehouseofpoints"] {
  color: var(--hybrid-navy-deep) !important;
  background: #fff !important;
  border: 1px solid rgba(16,26,69,.16) !important;
  box-shadow: 0 12px 36px rgba(8,13,40,.09) !important;
}
[data-hybrid-section="start"] a[href*="thehouseofpoints"] p,
[data-hybrid-section="start"] a[href*="thehouseofpoints"] [class*="text-white"] {
  color: var(--hybrid-navy-deep) !important;
}
[data-hybrid-section="start"] a[href*="thehouseofpoints"] p[class*="text-white/40"] {
  color: var(--hybrid-muted) !important;
}
[data-hybrid-section="start"] a[href*="thehouseofpoints"] [class*="text-[#C4FE98]"] {
  color: var(--hybrid-blue) !important;
}

/* Prominent one-off Concierge service */
.hybrid-concierge {
  padding: clamp(76px, 9vw, 118px) 24px;
  border-top: 1px solid var(--hybrid-border);
  border-bottom: 1px solid var(--hybrid-border);
}
.hybrid-concierge__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}
.hybrid-eyebrow {
  margin: 0 0 14px;
  color: var(--hybrid-gold-ink) !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hybrid-concierge h2 {
  margin: 0 0 22px;
  color: var(--hybrid-navy);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(44px, 5vw, 68px) !important;
  font-weight: 500;
  line-height: 1;
}
.hybrid-concierge__lead {
  max-width: 690px;
  margin: 0;
  color: var(--hybrid-ink) !important;
  font-size: clamp(18px, 1.5vw, 21px) !important;
  line-height: 1.7 !important;
}
.hybrid-concierge__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.hybrid-btn-concierge-solid {
  color: #fff !important;
  background: var(--hybrid-navy) !important;
  border: 1.5px solid var(--hybrid-navy) !important;
}
.hybrid-btn-concierge-solid:hover { background: var(--hybrid-blue) !important; }
.hybrid-text-link {
  color: var(--hybrid-navy) !important;
  font-size: 16px;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.hybrid-concierge__card {
  padding: clamp(28px, 4vw, 42px);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(145deg, var(--hybrid-pine), #1b5e20);
  border: 1px solid var(--hybrid-gold-border);
  box-shadow: var(--hybrid-shadow);
}
.hybrid-concierge__card-label {
  margin: 0 0 10px;
  color: var(--hybrid-champagne) !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hybrid-concierge__card h3 {
  margin: 0 0 22px;
  color: #fff !important;
  font-size: clamp(28px, 3vw, 40px) !important;
}
.hybrid-concierge__card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.hybrid-concierge__card li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  color: rgba(255,255,255,.92);
  font-size: 17px !important;
}
.hybrid-concierge__card li span { color: var(--hybrid-champagne); font-weight: 900; }
.hybrid-concierge__card a {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-underline-offset: 4px;
}

/* Founder media: never crop Steve's face or head */
.hybrid-founder-media {
  height: auto !important;
  aspect-ratio: auto !important;
  background: var(--hybrid-cream);
}
.hybrid-founder-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* Steve Hui’s seat portrait is a 1153 × 1680 source. Preserve the complete image on mobile. */
.hybrid-steve-seat-media {
  background: var(--hybrid-cream);
  overflow: hidden;
}
.hybrid-steve-seat-image {
  object-position: center top !important;
}

/* Viewport-aware media retains stable poster geometry. */
video[data-hybrid-media="true"] {
  background: var(--hybrid-navy-deep);
  object-position: center;
}
video[data-hybrid-media="true"][data-hybrid-autoplay-blocked="true"] { cursor: pointer; }

/* Official membership tier hierarchy */
[data-hybrid-section="membership"] [data-hybrid-tier] {
  position: relative;
  overflow: hidden;
  background: #fff !important;
  color: var(--hybrid-ink) !important;
  border: 1px solid rgba(12,10,42,.16) !important;
  box-shadow: 0 16px 42px rgba(10,10,10,.16);
}
[data-hybrid-section="membership"] [data-hybrid-tier] h3,
[data-hybrid-section="membership"] [data-hybrid-tier] p,
[data-hybrid-section="membership"] [data-hybrid-tier] li,
[data-hybrid-section="membership"] [data-hybrid-tier] [class*="text-white"] {
  color: var(--hybrid-ink) !important;
}
[data-hybrid-section="membership"] [data-hybrid-tier="blue"] {
  border: 2px solid var(--hybrid-jetstream) !important;
  box-shadow: inset 0 5px 0 var(--hybrid-jetstream), 0 16px 42px rgba(10,10,10,.16);
}
[data-hybrid-section="membership"] [data-hybrid-tier="blue"] h3 { color: var(--hybrid-jetstream) !important; }
[data-hybrid-section="membership"] [data-hybrid-tier="platinum"] {
  border: 2px solid var(--hybrid-lounge) !important;
  box-shadow: inset 0 5px 0 var(--hybrid-lounge), 0 16px 42px rgba(10,10,10,.16);
}
[data-hybrid-section="membership"] [data-hybrid-tier="platinum"] [class~="bg-[#C4FE98]"] {
  color: var(--hybrid-pine) !important;
  background: var(--hybrid-lounge) !important;
}
[data-hybrid-section="membership"] [data-hybrid-tier="black"] {
  background: var(--hybrid-midnight) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: inset 0 5px 0 var(--hybrid-runway), 0 16px 42px rgba(10,10,10,.24);
}
[data-hybrid-section="membership"] [data-hybrid-tier="black"] h3,
[data-hybrid-section="membership"] [data-hybrid-tier="black"] p,
[data-hybrid-section="membership"] [data-hybrid-tier="black"] li,
[data-hybrid-section="membership"] [data-hybrid-tier="black"] [class*="text-white"] {
  color: #fff !important;
}
[data-hybrid-section="membership"] a { font-size: 16px !important; }
[data-hybrid-section="bookings"] [class*="overflow"] { scroll-snap-type: x mandatory; }
[data-hybrid-section="bookings"] [class*="flex-shrink"] { scroll-snap-align: center; }

/* Preserve the official roles of the authored legacy accent utilities. */
body [class~="text-[#FE6F00]"] { color: var(--hybrid-priority-ink) !important; }
body [class~="text-[#C4FE98]"],
body [class~="text-[#ADFF2F]"] { color: var(--hybrid-pine) !important; }
section[data-hybrid-tone="dark"] [class~="text-[#FE6F00]"],
section[data-hybrid-tone="pine"] [class~="text-[#FE6F00]"] { color: var(--hybrid-priority) !important; }
section[data-hybrid-tone="dark"] [class~="text-[#C4FE98]"],
section[data-hybrid-tone="dark"] [class~="text-[#ADFF2F]"],
section[data-hybrid-tone="pine"] [class~="text-[#C4FE98]"],
section[data-hybrid-tone="pine"] [class~="text-[#ADFF2F]"] { color: var(--hybrid-lounge) !important; }
body [class~="bg-[#FE6F00]"] {
  color: var(--hybrid-midnight) !important;
  background: var(--hybrid-priority) !important;
  box-shadow: 0 8px 28px rgba(254,111,0,.2) !important;
}
body [class~="bg-[#C4FE98]"],
body [class~="bg-[#ADFF2F]"] {
  color: var(--hybrid-pine) !important;
  background: var(--hybrid-lounge) !important;
  box-shadow: none !important;
}
body [class~="bg-[#FE6F00]"] [class*="text-white"] { color: var(--hybrid-midnight) !important; }
body [class~="bg-[#C4FE98]"] [class*="text-white"],
body [class~="bg-[#ADFF2F]"] [class*="text-white"] { color: var(--hybrid-pine) !important; }
section[data-hybrid-tone] a[class~="bg-[#FE6F00]"] { color: var(--hybrid-midnight) !important; }
section[data-hybrid-tone] a[class~="bg-[#C4FE98]"],
section[data-hybrid-tone] a[class~="bg-[#ADFF2F]"] { color: var(--hybrid-pine) !important; }
body [class~="border-[#FE6F00]"] { border-color: var(--hybrid-priority) !important; }
body [class~="border-[#C4FE98]"],
body [class~="border-[#ADFF2F]"] { border-color: var(--hybrid-lounge) !important; }
body [class*="hover:bg-[#e05e00]"]:hover { background: var(--hybrid-priority-hover) !important; }
body [class*="hover:bg-[#b0f080]"]:hover { background: var(--hybrid-lounge-hover) !important; }

/* Simplify persistent controls. */
.hybrid-hide-floating-discovery { display: none !important; }
.hybrid-back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}
.hybrid-back-to-top--visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.hybrid-mobile-dock { display: none; }

/* Preserve visible focus across the new light sections. */
.hybrid-nav a:focus-visible,
.hybrid-btn:focus-visible,
.hybrid-mobile-dock a:focus-visible,
section[data-hybrid-section] a:focus-visible,
section[data-hybrid-section] button:focus-visible,
section[data-hybrid-section] summary:focus-visible {
  outline: 3px solid var(--hybrid-priority) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   v362 "JETSTREAM" — bright royal-blue forward. The expressive
   colour is a rich royal/sky blue used as the dark ground (hero,
   dark sections, nav, dark cards) and as accents; light sections
   are bright + cool. Orange = CTAs, lime = savings/go. Fixes the
   "too dark" read of the near-black scheme.
   ============================================================ */

/* Hero: royal-to-sky blue rising behind the cabin video. Two scrim layers —
   deep royal through the vertical centre keeps the white headline legible,
   brighter sky-blue washes the upper frame. */
#root [data-hybrid-section="hero"] [class*="bg-black/50"] {
  background: linear-gradient(
      180deg,
      rgba(63, 139, 230, 0.34) 0%,
      rgba(20, 42, 150, 0.56) 38%,
      rgba(10, 26, 98, 0.68) 62%,
      rgba(10, 26, 98, 0.50) 100%) !important;
}
#root [data-hybrid-section="hero"] [class*="from-[#0c0a2a]"] {
  background-image: linear-gradient(
      to top,
      #0a1f7a 0%,
      rgba(10, 31, 122, 0) 38%,
      rgba(63, 139, 230, 0.40) 74%,
      rgba(120, 180, 255, 0.36) 100%) !important;
}
/* Hero background video: identical framing on mobile and desktop. */
#root [data-hybrid-section="hero"] > video {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Unify near-black grounds to the Jetstream royal. Manus hardcodes
   bg-[#0c0a2a] on the app root + the press strip, so those (and any
   unlabelled dark section showing the base through) rendered as an
   out-of-place near-black block. Royal-ise them to match the scheme.
   (The Black tier card is exempt — it uses --hybrid-runway, not this class.) */
#root [class*="bg-[#0c0a2a]"] { background-color: var(--hybrid-midnight) !important; }

/* ---- Membership cards: more luxe (v362) ---------------------------
   The white Explore/Platinum cards read plain next to the black tier.
   Give them subtle depth (soft gradient ground), a refined tier-accent
   hairline, and a layered premium shadow — without going gaudy. */
#root [data-hybrid-section="membership"] [data-hybrid-tier="blue"],
#root [data-hybrid-section="membership"] [data-hybrid-tier="platinum"] {
  background: linear-gradient(180deg, #ffffff 0%, #eef3fc 100%) !important;
  box-shadow: 0 26px 60px rgba(10,31,122,.16), 0 3px 10px rgba(10,31,122,.07) !important;
}
#root [data-hybrid-section="membership"] [data-hybrid-tier="blue"] {
  border: 1px solid rgba(18,52,199,.28) !important;
  box-shadow: inset 0 4px 0 var(--hybrid-jetstream), 0 26px 60px rgba(10,31,122,.16), 0 3px 10px rgba(10,31,122,.07) !important;
}
#root [data-hybrid-section="membership"] [data-hybrid-tier="platinum"] {
  border: 1px solid rgba(20,61,32,.22) !important;
  box-shadow: inset 0 4px 0 var(--hybrid-lounge), 0 26px 60px rgba(10,31,122,.16), 0 3px 10px rgba(10,31,122,.07) !important;
}

/* ---- Pairing: show the destination photo on mobile too (v362) ------
   Manus's image is `position:absolute; inset-0; w-full h-full object-cover`,
   so it fills a POSITIONED container with a real height. On desktop the grid
   cell supplies that; on mobile the `md:block` container is display:none, and
   naively un-hiding it collapses to height:0 (its only child is out of flow),
   letting the image escape. So give the container itself a positioned,
   aspect-ratio box for the absolute image to fill. */
@media (max-width: 767px) {
  #root [data-hybrid-section="pairing"] [class*="md:block"] {
    display: block !important;
    position: relative !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 200px;
    margin-top: 22px;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  #root [data-hybrid-section="pairing"] [class*="md:block"] img {
    border-radius: 18px !important;
  }
}

/* Royal-blue accent on light grounds — eyebrows/labels lift off the cool white.
   (Orange stays for CTAs; lime for savings/go.) */
section[data-hybrid-tone="cream"] [class*="uppercase"],
section[data-hybrid-tone="white"] [class*="uppercase"],
section[data-hybrid-tone="light"] [class*="uppercase"],
section[data-hybrid-tone="pale"] [class*="uppercase"] {
  color: var(--hybrid-sky-ink) !important;
}
/* Links/emphasis that were deep jetstream on light -> brighter sky-blue */
section[data-hybrid-tone]:not([data-hybrid-tone="dark"]):not([data-hybrid-tone="pine"]) [class*="text-[#FE6F00]"] {
  color: var(--hybrid-sky-ink) !important;
}
/* A hairline of sky under section eyebrows reads as horizon/light. */
[data-hybrid-section="proof"] [class*="uppercase"],
[data-hybrid-section="maths"] [class*="uppercase"],
[data-hybrid-section="audit"] [class*="uppercase"] {
  color: var(--hybrid-sky-ink) !important;
}

/* Bright close: the final CTA glows in royal->sky blue with a light-sky
   highlight, instead of flat near-black. */
#root section[data-hybrid-section="final"] {
  background:
     radial-gradient(95% 120% at 80% 6%, rgba(120, 180, 255, 0.28) 0%, rgba(120,180,255,0) 48%),
     linear-gradient(165deg, var(--hybrid-sky-deep) 0%, #14309e 42%, var(--hybrid-midnight) 100%) !important;
}

/* Keep the Black tier genuinely black — it must not inherit the royal ground. */
#root [data-hybrid-section="membership"] [data-hybrid-tier="black"] {
  background: var(--hybrid-runway) !important;
}

/* Removed blocks (Executive Traveller strip; fabricated "Member Story"). */
.hybrid-removed { display: none !important; }

/* ---- Dark-island readability (v362) --------------------------------
   The light-ground "eyebrow/accent -> royal-blue" recolors bleed into
   the dark cards nested in light sections (the green Concierge card and
   the royal "Concierge" pathway card), turning their text blue-on-dark.
   Force white text + lime accents inside those islands (#root beats the
   0,4,1 recolor rules). */
#root .hybrid-concierge__card,
#root .hybrid-concierge__card *,
#root [data-hybrid-section="start"] a[href*="concierge"],
#root [data-hybrid-section="start"] a[href*="concierge"] * {
  color: #fff !important;
}
#root .hybrid-concierge__card [class*="uppercase"],
#root .hybrid-concierge__card .hybrid-concierge__card-label,
#root [data-hybrid-section="start"] a[href*="concierge"] [class*="uppercase"],
#root [data-hybrid-section="start"] a[href*="concierge"] [class*="text-[#FE6F00]"],
#root [data-hybrid-section="start"] a[href*="concierge"] [class*="text-[#ADFF2F]"] {
  color: var(--hybrid-lounge) !important;
}

/* ---- Generous section rhythm (v362) --------------------------------
   Give the light-scheme room to breathe — a more luxurious vertical
   cadence between sections instead of the crammed default. */
#root section[data-hybrid-section]:not([data-hybrid-section="hero"]) {
  padding-top: clamp(84px, 8.5vw, 136px) !important;
  padding-bottom: clamp(84px, 8.5vw, 136px) !important;
}

/* ---- Curated Experiences: cards line up (v362) ---------------------
   Equal-height cards; the title reserves two lines so the date and
   description rows align across all four; a consistent "Explore ->"
   affordance pins to the bottom of each card. */
#root [data-hybrid-section="experiences"] [class*="grid"] > * { height: 100% !important; }
#root [data-hybrid-section="experiences"] a[class*="group"] { display: flex !important; height: 100% !important; }
#root [data-hybrid-section="experiences"] a[class*="group"] > div { display: flex !important; flex-direction: column !important; width: 100%; }
#root [data-hybrid-section="experiences"] a[class*="group"] [class*="p-5"] {
  display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;
}
#root [data-hybrid-section="experiences"] a[class*="group"] h3 {
  min-height: 2.35em !important;   /* reserve two lines so single-line titles align */
}
#root [data-hybrid-section="experiences"] a[class*="group"] [class*="p-5"]::after {
  content: "Explore →";
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--hybrid-sky-ink);
}

/* ============================================================
   v360 — contrast hardening for accent text inside DARK cards.
   The orange->jetstream and lime->pine remaps above use broad
   [class*]/[class~] selectors that repaint accent text sitting
   inside dark cards nested in light/pine sections, producing
   navy-on-navy (~1.34:1). These rules win on specificity+order
   and restore legible text. Sizes also clear the 40+ floor.
   ============================================================ */

/* 1. "Book a points flight ->" on the dark concierge pathway card (was #120a8f on #0c0a2a) */
#root section[data-hybrid-section="start"] a[href*="concierge"] span[class*="text-[#FE6F00]"] {
  color: var(--hybrid-lounge) !important;
  font-size: 15px !important;
}

/* 2. "Limited to 200 members" scarcity line on the Black tier card (was #120a8f on #0c0a2a) */
section[data-hybrid-tone="pine"][data-hybrid-section="membership"] [data-hybrid-tier="black"] [class*="text-[#FE6F00]"],
section[data-hybrid-tone="pine"][data-hybrid-section="membership"] [data-hybrid-tier="black"] p[class*="text-["] {
  color: rgba(255,255,255,0.92) !important;
  font-size: 13px !important;
}

/* 3. Platinum price + eyebrow: raw/pale lime on white -> readable pine */
section[data-hybrid-tone="pine"][data-hybrid-section="membership"] [data-hybrid-tier="platinum"] [class*="text-[#C4FE98]"] {
  color: var(--hybrid-pine) !important;
}

/* ============================================================
   v360 §3 — Recent Member Bookings re-skin. The light-section
   remaps had flattened Manus's intended dark cards into
   periwinkle-on-cream (off-palette, least-premium moment).
   Restore them as solid midnight islands with white type and
   lime savings, matching the pairing section's language.
   ============================================================ */
section[data-hybrid-section="bookings"] [class*="flex-shrink"] {
  background: var(--hybrid-midnight) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
/* neutral (non-purple) photo scrim instead of the royal wash */
section[data-hybrid-section="bookings"] [class*="from-[#120A8F]"] {
  background-image: linear-gradient(to top, var(--hybrid-midnight), transparent) !important;
  opacity: 0.55 !important;
}
/* legible white type on the dark card */
section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-white"] {
  color: rgba(255,255,255,0.86) !important;
}
/* clear the sub-12px floor for the card's micro-labels */
section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[8px]"],
section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[9px]"],
section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[10px]"],
section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[11px]"] {
  font-size: 12px !important;
}
/* savings figure + "Saved" -> lime (needs #root to outrank the light-ground
   orange->sky-ink accent rule, which would otherwise turn it blue-on-blue). */
#root section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[#FE6F00]"] {
  color: var(--hybrid-lounge) !important;
}

/* ============================================================
   v360 §4 — 40+ readability floor. Manus's arbitrary micro-sizes
   (8-11px badges, captions, ticker labels, attributions) are too
   small for a 40-65 audience. Nothing renders below 12px; most
   secondary text lands at 13px. Bookings cards keep their own
   12px floor (set above) so the narrow cards don't overflow.
   ============================================================ */
/* Scope to the whole homepage app root so the footer, the tier-compare
   table, testimonial bylines and other loose (non-section) content are
   covered too — not just labelled sections. Bookings cards are re-capped
   to 12px just below so the narrow 240px cards don't overflow. */
#root [class*="text-[8px]"],
#root [class*="text-[9px]"] {
  font-size: 12px !important;
  line-height: 1.4 !important;
}
#root [class*="text-[10px]"],
#root [class*="text-[11px]"] {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
/* keep the narrow bookings cards compact (needs #root to outrank the floor above) */
#root section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[8px]"],
#root section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[9px]"],
#root section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[10px]"],
#root section[data-hybrid-section="bookings"] [class*="flex-shrink"] [class*="text-[11px]"] {
  font-size: 12px !important;
}
/* Pathway/mini-card links read as real links, not fine print. */
#root section[data-hybrid-section="start"] a span[class*="text-[10px]"] {
  font-size: 15px !important;
}
/* Faint white text on the pine membership section (tier-compare, meta) -> legible. */
section[data-hybrid-tone="pine"] [class*="text-white/2"],
section[data-hybrid-tone="pine"] [class*="text-white/3"],
section[data-hybrid-tone="pine"] [class*="text-white/4"],
section[data-hybrid-tone="pine"] [class*="text-white/5"] {
  color: rgba(255,255,255,0.84) !important;
}

/* ============================================================
   v360 §5 — quieter, more expensive depth on light sections.
   Soften the heavy SaaS-style drop shadows; the 1px hairline
   dividers do the separating. Dark cards keep their own depth.
   ============================================================ */
section[data-hybrid-tone="cream"] [class*="shadow"],
section[data-hybrid-tone="white"] [class*="shadow"],
section[data-hybrid-tone="light"] [class*="shadow"],
section[data-hybrid-tone="pale"] [class*="shadow"] {
  box-shadow: 0 10px 30px rgba(12,10,42,0.08) !important;
}

@media (max-width: 900px) {
  body { font-size: 17px; }
  .hybrid-concierge__inner { grid-template-columns: 1fr; }
  .hybrid-concierge__card { max-width: 640px; }
}

@media (max-width: 767px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .hybrid-nav { min-height: 64px; height: 64px !important; padding-inline: 18px !important; overflow: hidden; }
  .hybrid-nav a { font-size: 15px !important; }
  /* Hide the two nav CTA pills on mobile (they live in the bottom dock).
     Scoped to the persistent <nav> element — NOT the .hybrid-nav class, which
     Manus strips off the nav on scroll. It also targets the hybrid-conversion-*
     classes because normaliseConversionLabels() adds those to the same nav links
     once renamed; the global `.hybrid-conversion-* { display:inline-flex }` rule
     (specificity 0,1,0) would otherwise resurface them as overflowing "circle"
     buttons after scroll. `nav .hybrid-*` (0,1,1) + !important wins. */
  nav .hybrid-nav-concierge,
  nav .hybrid-nav-audit,
  nav .hybrid-conversion-concierge,
  nav .hybrid-conversion-audit {
    display: none !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  [data-hybrid-section="hero"] {
    min-height: 720px !important;
    height: max(720px, 100svh) !important;
  }
  /* v362: hero video framing matches desktop (was 54% — caused a different crop on mobile). */
  [data-hybrid-section="hero"] > video { object-position: center center !important; }
  [data-hybrid-section="hero"] h1 {
    font-size: clamp(43px, 13vw, 62px) !important;
    line-height: 1 !important;
  }
  [data-hybrid-section="hero"] h1 + p {
    font-size: 18px !important;
    line-height: 1.58 !important;
    margin-bottom: 28px !important;
  }
  [data-hybrid-section="hero"] .hybrid-fixed-promise { min-width: 0 !important; width: 100%; }
  [data-hybrid-section="hero"] .hybrid-fixed-promise::after { justify-content: center; }
  [data-hybrid-section="hero"] .hybrid-btn {
    width: 100% !important;
    max-width: 340px;
    min-height: 54px;
    font-size: 17px !important;
  }

  section[data-hybrid-section]:not([data-hybrid-section="hero"]) {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  section[data-hybrid-section]:not([data-hybrid-section="hero"]) h2 {
    font-size: clamp(34px, 10.5vw, 46px) !important;
  }
  section[data-hybrid-section]:not([data-hybrid-section="hero"]) h3 {
    font-size: clamp(25px, 7.5vw, 32px) !important;
  }
  section[data-hybrid-section]:not([data-hybrid-section="hero"]) p,
  section[data-hybrid-section]:not([data-hybrid-section="hero"]) li {
    font-size: 17px !important;
    line-height: 1.66 !important;
  }
  section[data-hybrid-section] [class*="text-center"] p {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .hybrid-concierge { padding: 76px 22px !important; }
  .hybrid-concierge h2 { font-size: clamp(42px, 13vw, 58px) !important; }
  .hybrid-concierge__lead { font-size: 18px !important; }
  .hybrid-concierge__actions { align-items: stretch; flex-direction: column; }
  .hybrid-concierge__actions .hybrid-btn,
  .hybrid-concierge__actions .hybrid-text-link { width: 100%; text-align: center; }
  .hybrid-concierge__card { padding: 30px 24px; border-radius: 20px; }

  .hybrid-founder-media {
    width: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }
  .hybrid-founder-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
  .hybrid-steve-seat-media {
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    border-radius: 24px !important;
  }
  .hybrid-steve-seat-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: inherit;
  }

  .hybrid-mobile-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(16,26,69,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 34px rgba(8,13,40,.18);
    backdrop-filter: blur(18px);
  }
  .hybrid-mobile-dock a {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
  }
  .hybrid-mobile-dock__audit { color: var(--hybrid-midnight); background: var(--hybrid-priority); }
  .hybrid-mobile-dock__concierge { color: #fff; border: 1px solid var(--hybrid-midnight); background: var(--hybrid-midnight); }

  .hybrid-chat {
    right: 14px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    width: 48px !important;
    height: 48px !important;
    color: #fff !important;
    background: var(--hybrid-navy-deep) !important;
    border: 1px solid rgba(255,255,255,.7) !important;
  }
  .hybrid-back-to-top {
    right: 14px !important;
    bottom: calc(142px + env(safe-area-inset-bottom)) !important;
    width: 44px !important;
    height: 44px !important;
  }

  [data-hybrid-section="bookings"] [class*="overflow"] {
    padding-left: 18px;
    padding-right: 18px;
    scroll-padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   v364 — design-review fixes
   ================================================================ */

/* SB1 — conversion CTAs keep their skin no matter which Manus utility
   classes they carry. The mobile benefits block renames an ORANGE
   Manus pill (bg-[#FE6F00] text-white) to 'Book a Points Flight' and
   skins it navy, but the later legacy-utility rule
   `section[data-hybrid-tone] a[class~="bg-[#FE6F00]"]` repainted its
   TEXT navy too -> navy-on-navy, an invisible button. #root (id
   specificity) outranks every utility remap. */
#root a.hybrid-conversion-concierge {
  color: #fff !important;
  background: var(--hybrid-navy) !important;
  border-color: var(--hybrid-navy) !important;
}
#root a.hybrid-conversion-audit {
  color: var(--hybrid-midnight) !important;
  background: var(--hybrid-priority) !important;
}

/* SB3 — footer readability (40+ floor). Manus authored the footer in
   white at 20-40% alpha on navy (~1.5-3:1). Lift body/links to a
   readable weight, keep the column headings quieter but legible. */
#root footer [class*="text-white/20"],
#root footer [class*="text-white/30"],
#root footer [class*="text-white/35"],
#root footer [class*="text-white/40"],
#root footer [class*="text-white/50"] { color: rgba(255,255,255,.74) !important; }
#root footer [class*="text-white/25"] { color: rgba(255,255,255,.58) !important; }
#root footer a:hover { color: #fff !important; }
#root footer a[class*="text-[12px]"] { font-size: 13px !important; }

/* H1 — nav links must survive the scroll re-render. Manus drops the
   .hybrid-nav class off <nav> on scroll, so the .hybrid-nav-scoped
   colour stopped applying and links fell back to Manus grey on navy.
   Scope to the persistent <nav> element instead; the soft shadow keeps
   them legible over light frames of the hero video at page top. */
nav .hybrid-nav-main {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 14px rgba(6,10,40,.5);
}
nav .hybrid-nav-main:hover { color: #fff !important; }

/* H2 — the House of Points CTA was a lime-filled button; lime is the
   savings/status colour, not a CTA fill. Navy secondary matches the
   page's CTA language (orange primary / navy secondary). */
#root [data-hybrid-section="employee"] a[class~="bg-[#C4FE98]"] {
  background: var(--hybrid-navy) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(10,31,122,.25) !important;
}

/* H3 — pairing card 'YOU SAVE' figure: savings are lime, orange is for
   CTAs only. (On the navy card lime also reads far better.) */
#root [data-hybrid-section="pairing"] [class~="text-[#FE6F00]"] {
  color: var(--hybrid-lounge) !important;
}

/* M1 — tier-card corner label 'EXPLORE' was #90caf9 at 60% on white
   (~1.5:1, invisible to the 40+ eye). Readable royal on light. */
#root [data-hybrid-section="membership"] [data-hybrid-tier="blue"] [class*="text-[#90caf9]"],
#root [data-hybrid-section="membership"] [data-hybrid-tier="platinum"] [class*="text-[#90caf9]"] {
  color: var(--hybrid-sky-ink) !important;
}

/* M2 — pin the divider + CTA row to the bottom of the light tier cards
   so 'Start with Explore' / 'Join Platinum' align across the row
   instead of floating mid-card above dead space. */
#root [data-hybrid-section="membership"] [data-hybrid-tier="blue"],
#root [data-hybrid-section="membership"] [data-hybrid-tier="platinum"] {
  display: flex !important;
  flex-direction: column !important;
}
#root [data-hybrid-section="membership"] [data-hybrid-tier="blue"] > div[class*="h-[1px]"],
#root [data-hybrid-section="membership"] [data-hybrid-tier="platinum"] > div[class*="h-[1px]"] {
  margin-top: auto !important;
}

/* M3 — 'Where do you start?': the Membership | Concierge cards ran
   two-up even at 390px, squeezing copy to a few characters per line.
   Stack them on small phones. */
@media (max-width: 520px) {
  #root [data-hybrid-section="start"] [class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   v365 — Steve's review-round fixes
   ================================================================ */

/* Card figures: Cormorant's old-style numerals made the bookings and
   pairing dollar amounts read dated on the data cards. Money and points
   figures use the sans stack with lining numerals; the serif stays for
   editorial headings and tier pricing. */
#root [data-hybrid-section="bookings"] [class*="font-serif"],
#root [data-hybrid-section="pairing"] [class*="font-serif"] {
  font-family: 'Nunito Sans', 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-variant-numeric: lining-nums !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Secondary CTAs (Join the Community / Explore Experiences / See
   Membership) step down to navy so orange stays exclusive to the two
   conversion actions. */
#root a.hybrid-conversion-secondary {
  color: #fff !important;
  background: var(--hybrid-navy) !important;
  border: 1.5px solid var(--hybrid-navy) !important;
  box-shadow: 0 8px 24px rgba(10,31,122,.22) !important;
}
#root a.hybrid-conversion-secondary:hover { background: var(--hybrid-sky-deep) !important; }

/* Media band lede — shortened by tightenMediaBand(); lift it from faint
   13px white/40 to a readable statement. */
#root p.hybrid-media-lede {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.88) !important;
  max-width: 56ch !important;
}

/* Curated Experiences cards without a real URL: not clickable, and the
   pinned CTA row becomes a quiet note so card bottoms still align. */
#root [data-hybrid-section="experiences"] a[data-hybrid-nolink] { cursor: default !important; }
#root [data-hybrid-section="experiences"] a[data-hybrid-nolink] [class*="p-5"]::after {
  content: "Details coming soon";
  color: rgba(18,35,92,.5);
  font-weight: 700;
}

/* Quick spend buttons under the Points Audit input. */
.hybrid-spend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.hybrid-spend-chip {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(10,31,122,.28);
  background: #fff;
  color: var(--hybrid-midnight);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hybrid-spend-chip:hover { border-color: var(--hybrid-navy); background: rgba(10,31,122,.06); }
.hybrid-spend-chip.on {
  background: var(--hybrid-navy);
  border-color: var(--hybrid-navy);
  color: #fff;
}
.hybrid-spend-chip:focus-visible { outline: 3px solid var(--hybrid-priority); outline-offset: 2px; }