/*
 * index-cinematic.css — Bold Cinematic homepage (ONLY body.home-page)
 * LOAD LAST. Beats style.css nuclear rules + legacy tab/search classes.
 */

:root {
  --gp-cin-bg: #050d0a;
  --gp-cin-bg-2: #071310;
  --gp-cin-search-zone: #0c2419;
  --gp-cin-surface: #103528;
  --gp-cin-surface-2: #0d2a1f;
  --gp-cin-tab-active-bg: linear-gradient(180deg, #2dd46a 0%, #22c55e 50%, #16a34a 100%);
  --gp-cin-tab-active-bg-hover: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  --gp-cin-accent: #22c55e;
  --gp-cin-accent-hi: #2dd46a;
  --gp-cin-accent-text: #052e16;
  --gp-cin-border: rgba(74, 222, 128, 0.22);
  --gp-cin-glow: rgba(34, 197, 94, 0.35);
  --gp-cin-font: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ── Page ─────────────────────────────────────────────────── */
body.home-page,
body.home-page.ds-page {
  background: var(--gp-cin-bg-2) !important;
  color: #fff !important;
  font-family: var(--gp-cin-font) !important;
}

/* ── Slow connection notice (above hero, homepage only) ───── */
body.home-page .gp-slow-connection-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(180deg, #fff8f8 0%, #ffecec 100%) !important;
  border-bottom: 1px solid #f3b4b4 !important;
  color: #7f1d1d !important;
  text-align: center;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  box-shadow: 0 2px 10px rgba(127, 29, 29, 0.08) !important;
}

body.home-page .gp-slow-connection-banner:not([hidden]) {
  display: flex !important;
}

body.home-page .gp-slow-connection-banner-text {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 12rem;
  max-width: 52rem;
}

body.home-page .gp-slow-connection-banner-dismiss {
  flex: 0 0 auto;
  border: none !important;
  background: transparent !important;
  color: #991b1b !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px !important;
  cursor: pointer !important;
  padding: 0 !important;
}

body.home-page .gp-slow-connection-banner-dismiss:hover,
body.home-page .gp-slow-connection-banner-dismiss:focus-visible {
  background: rgba(153, 27, 27, 0.1) !important;
  outline: none !important;
}

/* ── Nav ──────────────────────────────────────────────────── */
body.home-page .header,
body.home-page .ds-nav {
  background: #091a11 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.home-page .header-container {
  display: flex !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  height: 62px !important;
  gap: 0 !important;
}

body.home-page .header-container .logo {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-family: var(--gp-cin-font) !important;
  font-weight: 800 !important;
  font-size: 2.46rem !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

body.home-page .header-container .logo img {
  width: 47px !important;
  height: 47px !important;
}

body.home-page .header-container nav {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body.home-page .header-container .nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 720px !important;
}

body.home-page .header-container .nav-menu > li > a,
body.home-page .header-container .nav-menu > li > a:visited {
  display: block !important;
  padding: 0.45rem 0.65rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
}

body.home-page .header-container .nav-menu > li > a:hover,
body.home-page .header-container .nav-menu > li > a:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Active/current page link — elegant golden yellow, matching the rest of the site. */
body.home-page .header-container .nav-menu > li > a.active-link,
body.home-page .header-container .nav-menu > li > a[aria-current="page"] {
  color: var(--gp-nav-active, #f2c14e) !important;
  background: rgba(242, 193, 78, 0.12) !important;
}

body.home-page .nav-cta { display: none !important; }

/* Search title — one line on desktop, two lines on cellphone */
body.home-page .gp-cin-search-title .gp-search-title-line {
  display: inline;
}

body.home-page .gp-cin-search-title .gp-search-title-line + .gp-search-title-line::before {
  content: " ";
}

/* ── Hero ─────────────────────────────────────────────────── */
body.home-page .hero-cin-section,
body.home-page .hero-cin-section.ds-hero,
body.home-page .hero-cin-section.hero {
  background: var(--gp-cin-bg-2) !important;
  text-align: left !important;
  padding: 0.65rem 1.5rem 0.2rem !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border-bottom: none !important;
  overflow: visible !important;
}

body.home-page .hero-cin-section.ds-hero::before,
body.home-page .hero-cin-section.hero::before {
  display: none !important;
  content: none !important;
}

body.home-page .hero-cin-wrap.gp-cin-hero-panel,
body.home-page .gp-cin-hero-panel {
  max-width: 1200px !important;
  width: calc(100% - 3rem) !important;
  margin: 0 auto !important;
  padding: 1.2rem 1.75rem 0.95rem !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(74, 222, 128, 0.18) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  background:
    linear-gradient(125deg, rgba(4, 11, 7, 0.42) 0%, rgba(8, 20, 12, 0.26) 50%, rgba(4, 11, 7, 0.18) 100%),
    url("/images/hero_desktop.png") 22% 42% / cover no-repeat !important;
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 1.1rem !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

body.home-page .hero-cin-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 0.28rem !important;
}

/* Right column stacks: demo image → primary CTA.
   Feedback + social live in the left column under course pills on desktop;
   display:contents on phones preserves the stacked mobile order. */
body.home-page .hero-cin-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  width: 100% !important;
}

body.home-page .hero-cin-section .hero-social-row-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0.45rem !important;
  width: 100% !important;
  margin: 0.1rem auto 0 !important;
}

body.home-page .hero-cin-headline {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0.5rem 0.85rem 0.55rem !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.home-page .hero-cin-section .hero-cin-left .hero-title,
body.home-page .hero-cin-section .hero-cin-left .hero-desc,
body.home-page .hero-cin-headline .hero-title,
body.home-page .hero-cin-headline .hero-desc {
  text-align: center !important;
  width: 100% !important;
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
  font-synthesis: none !important;
  transform: none !important;
  filter: none !important;
}

body.home-page .hero-cin-section .hero-cin-left .hero-title,
body.home-page .hero-cin-headline .hero-title {
  font-family: var(--gp-cin-font) !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.08rem !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.9),
    0 0 1px rgba(0, 0, 0, 0.85) !important;
}

body.home-page .hero-cin-headline .hero-title-line {
  display: block !important;
  width: 100% !important;
}

body.home-page .hero-cin-headline .hero-title-line--secondary {
  font-size: 0.92em !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

body.home-page .hero-cin-headline .hero-title-line--primary {
  white-space: nowrap !important;
}

/* On phones, scale the primary headline down so it stays on a single line,
   keeping the whole title to just two lines. */
@media (max-width: 767px) {
  body.home-page .hero-cin-headline .hero-title-line--primary {
    font-size: clamp(1.1rem, 5vw, 1.7rem) !important;
  }
}

body.home-page .hero-cin-section .hero-cin-left .hero-desc,
body.home-page .hero-cin-headline .hero-desc {
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0.45rem auto 0 !important;
  max-width: 70ch !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28) !important;
}

body.home-page .hero-cin-section #home-movie-course-btns,
body.home-page .hero-cin-left .home-preview-tour-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: center !important;
  width: 100% !important;
}

body.home-page .hero-cin-section #home-movie-course-btns .movie-course-btn,
body.home-page .hero-cin-section #home-movie-course-btns a.movie-course-btn {
  background: #1b4332 !important;
  background-image: none !important;
  border: 1px solid #ffffff !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.48rem 0.95rem !important;
  text-decoration: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
  line-height: 1.22 !important;
  letter-spacing: 0.01em !important;
}

body.home-page .hero-primary-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.15rem auto 0 !important;
  padding: 0.68rem 1.55rem !important;
  min-width: min(100%, 320px) !important;
  background: linear-gradient(135deg, #34d399 0%, #22c55e 40%, #16a34a 100%) !important;
  color: #ffffff !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  text-transform: none !important;
  border-radius: 999px !important;
  border: 2px solid rgba(187, 247, 208, 0.65) !important;
  box-shadow: 0 8px 28px rgba(34, 197, 94, 0.45), 0 0 40px rgba(34, 197, 94, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.home-page .hero-primary-cta:hover,
body.home-page .hero-primary-cta:focus {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 36px rgba(34, 197, 94, 0.55), 0 0 48px rgba(34, 197, 94, 0.2) !important;
  color: #fff !important;
}

body.home-page .hero-explore-link { display: none !important; }

body.home-page .hero-cin-section .hero-social-media {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.85rem !important;
  margin: 0 !important;
  width: auto !important;
}

body.home-page .hero-cin-section .hero-social-media a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  transition: color 0.15s, border-color 0.15s, background 0.15s !important;
}

body.home-page .hero-cin-section .hero-social-media a:hover {
  color: #fff !important;
  border-color: rgba(74, 222, 128, 0.6) !important;
  background: rgba(34, 197, 94, 0.2) !important;
}

body.home-page .hero-cin-section .hero-social-media svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

body.home-page .hero-cin-section #home-movie-course-btns .movie-course-btn:hover,
body.home-page .hero-cin-section #home-movie-course-btns a.movie-course-btn:hover {
  background: #2d6a4f !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.home-page .hero-cin-section .home-video-frame {
  border: 2px solid rgba(74, 222, 128, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
  background: #0b1f16 !important;
  display: block !important;
  line-height: 0 !important;
}

body.home-page .hero-cin-section .home-preview-video-wrap {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

body.home-page .hero-cin-section .home-preview-demo-btn {
  position: absolute !important;
  left: 50% !important;
  bottom: 0.72rem !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  text-decoration: none !important;
  padding: 0.42rem 0.95rem !important;
  border: 1px solid rgba(187, 247, 208, 0.45) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.92) 0%, rgba(22, 163, 74, 0.94) 100%) !important;
  color: #fff !important;
  font-family: var(--gp-cin-font, inherit) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

body.home-page .hero-cin-section .home-preview-demo-btn:hover,
body.home-page .hero-cin-section .home-preview-demo-btn:focus-visible {
  transform: translateX(-50%) translateY(-1px) !important;
  border-color: rgba(220, 252, 231, 0.75) !important;
  box-shadow: 0 10px 26px rgba(34, 197, 94, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
  outline: none !important;
}

body.home-page .hero-cin-section .home-preview-video,
body.home-page .hero-cin-section #homePreviewTour .home-preview-video {
  width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  background: #0b1f16 !important;
}

/* Tasks 1/2: graceful image fallbacks. If a course/demo image fails to load,
   the container keeps a tasteful dark-green panel instead of a broken icon. */
body.home-page .home-video-frame.home-video-frame--noimg {
  min-height: 146px !important;
  background: linear-gradient(135deg, #123a28 0%, #0b1f16 100%) !important;
}
.cin-card-photo.cin-card-photo--noimg {
  min-height: 140px !important;
  background: linear-gradient(135deg, #14402c 0%, #1b4332 100%) !important;
}

body.home-page .hero-cin-section .home-preview-video-link,
body.home-page .hero-cin-section #homePreviewTour.home-preview-video-link {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b1f16 !important;
  aspect-ratio: 16 / 9 !important;
  color: inherit !important;
  font: inherit !important;
  text-align: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

body.home-page .hero-cin-section .home-preview-video-link:focus-visible {
  outline: 2px solid rgba(74, 222, 128, 0.85) !important;
  outline-offset: 3px !important;
}

.hero-desktop-br { display: none; }
.hero-desc-mobile { display: none; }
.hero-desc-desktop { display: inline; }
.gp-search-title-mobile,
.gp-search-subtitle-mobile { display: none; }
.gp-search-title-desktop,
.gp-search-subtitle-desktop { display: inline; }
@media (max-width: 767px) {
  .hero-desc-mobile { display: inline; }
  .hero-desc-desktop { display: none; }
  .gp-search-title-mobile,
  .gp-search-subtitle-mobile { display: inline; }
  .gp-search-title-desktop,
  .gp-search-subtitle-desktop { display: none; }
}
@media (min-width: 901px) {
  .hero-desktop-br { display: block; }

  /* Desktop hero: left column = headline, pills, feedback + social centered;
     right column = preview image, then Search CTA with breathing room below. */
  body.home-page .hero-cin-section,
  body.home-page .hero-cin-section.ds-hero,
  body.home-page .hero-cin-section.hero {
    padding: 0.28rem 1.5rem 0.05rem !important;
  }

  body.home-page .hero-cin-wrap.gp-cin-hero-panel {
    position: relative !important;
    align-items: start !important;
    /* Extra bottom padding reserves vertical space for the absolutely-positioned
       Search CTA which is centered horizontally on the page (see below). */
    padding: 0.58rem 1.35rem 3.6rem !important;
    column-gap: 1.1rem !important;
    row-gap: 0.38rem !important;
    /* Right column sized for demo image (~15% wider than 0.86fr baseline). */
    grid-template-columns: 1.05fr 0.99fr !important;
  }

  body.home-page .hero-cin-left {
    justify-content: flex-start !important;
    gap: 0.24rem !important;
    padding-top: 0 !important;
  }

  body.home-page .hero-cin-headline {
    padding: 0.38rem 0.75rem 0.4rem !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-desc,
  body.home-page .hero-cin-headline .hero-desc {
    margin-top: 0.18rem !important;
  }

  body.home-page .hero-cin-right {
    gap: 0.22rem !important;
    /* Vertically center the demo image against the taller left column so it sits
       balanced on the right instead of pinned to the top. */
    align-self: center !important;
  }

  body.home-page .hero-cin-right .home-video-frame {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* Nudge the demo image slightly toward the right edge of the panel. */
    transform: translateX(0.6rem) !important;
    background: #0b1f16 !important;
  }

  /* Desktop: full column width, native 16:9 — contain shows entire demo with no crop. */
  body.home-page .hero-cin-right .home-video-frame,
  body.home-page .hero-cin-section .hero-cin-right .home-preview-video-wrap,
  body.home-page .hero-cin-section .hero-cin-right #homePreviewTour.home-preview-video-link {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    background: #0b1f16 !important;
  }

  body.home-page .hero-cin-section .hero-cin-right #homePreviewTour.home-preview-video-link {
    aspect-ratio: 16 / 9 !important;
    background: #0b1f16 !important;
  }

  body.home-page .hero-cin-section .hero-cin-right #homePreviewTour .home-preview-video,
  body.home-page .hero-cin-section .hero-cin-right .home-preview-video {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #0b1f16 !important;
    transform: none !important;
  }

  /* Desktop: center the Search CTA horizontally on the page by anchoring it to
     the bottom-center of the hero panel (which is itself centered on the page
     via max-width:1200px + margin:auto). Absolute positioning takes it out of
     the right-column flow so its left/right position is no longer biased by
     the 2-column grid. */
  body.home-page .hero-cin-right .hero-primary-cta,
  body.home-page .hero-cin-section .hero-cin-right .hero-primary-cta {
    position: absolute !important;
    left: 50% !important;
    bottom: 0.8rem !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0.5rem 1.4rem !important;
    font-size: 0.92rem !important;
  }

  body.home-page .hero-cin-right .hero-primary-cta:hover,
  body.home-page .hero-cin-right .hero-primary-cta:focus,
  body.home-page .hero-cin-section .hero-cin-right .hero-primary-cta:hover,
  body.home-page .hero-cin-section .hero-cin-right .hero-primary-cta:focus {
    transform: translateX(-50%) translateY(-2px) scale(1.02) !important;
  }

  /* Desktop: feedback + social in one row, centered under course pill buttons */
  body.home-page .hero-cin-section .hero-cin-left .hero-social-row-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    margin: 0.6rem auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 0.62rem 1.1rem !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    border-radius: 10px !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-social-media {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 0.55rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-social-media a,
  body.home-page .hero-cin-section .hero-cin-left .hero-social-media .gp-social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
    margin: 0 !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-social-media svg,
  body.home-page .hero-cin-section .hero-cin-left .hero-social-media .gp-social-link svg {
    width: 18px !important;
    height: 18px !important;
  }

}

/* ── Proof strip ──────────────────────────────────────────── */
body.home-page .proof-strip {
  background: transparent !important;
  padding: 0.4rem 1.5rem 0.35rem !important;
}

body.home-page .proof-strip-inner {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 1rem 1.1rem !important;
  background: rgba(10, 26, 18, 0.92) !important;
  border: 1px solid rgba(74, 222, 128, 0.12) !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

/* Five proof cards: equal width columns, even gaps, full row centered in the strip. */
body.home-page .proof-strip-track {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.65rem !important;
  width: 100% !important;
  align-items: stretch !important;
}

body.home-page .proof-strip-track > .proof-tile {
  flex: unset !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.home-page .proof-tile {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

body.home-page .proof-tile-icon { color: var(--gp-cin-accent-hi) !important; }
body.home-page .proof-value { color: #fff !important; }
body.home-page .proof-label { color: rgba(255, 255, 255, 0.85) !important; }
body.home-page .proof-note { color: rgba(255, 255, 255, 0.48) !important; }

/* ── Search wrap ──────────────────────────────────────────── */
body.home-page .home-search-wrap,
body.home-page .home-search-wrap.ds-section {
  background: transparent !important;
  padding: 0.15rem 1.5rem 0 !important;
}

body.home-page .home-search-wrap::before,
body.home-page .home-search-wrap::after {
  display: none !important;
  background: none !important;
}

body.home-page .home-search-wrap .search-area-flex,
body.home-page .home-search-wrap .search-container {
  width: min(1200px, 100%) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ── Search card (gp-cin only — no tab-button/search-button classes) ── */
body.home-page .home-search-wrap .search-card.home-search-card.gp-cin-search-card,
body.home-page .gp-cin-search-card.search-card {
  background: linear-gradient(180deg, var(--gp-cin-surface) 0%, var(--gp-cin-surface-2) 100%) !important;
  border: 1px solid var(--gp-cin-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  padding: 0.65rem 2rem 1.15rem !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  color: #fff !important;
  text-align: center !important;
  overflow: visible !important;
}

body.home-page .home-search-wrap,
body.home-page .home-search-wrap .search-container {
  overflow: visible !important;
}

body.home-page .gp-cin-search-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.65rem 1rem !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  position: relative !important;
}

body.home-page .gp-cin-search-header-text {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* ── Search course-type filter (header, left of title) ── */
/* Absolutely positioned on the left so the title stays centered on the page. */
body.home-page .gp-search-type-filter {
  flex: 0 0 auto !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
  overflow: visible !important;
  z-index: 130 !important;
}

body.home-page .gp-search-type-filter-stack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
}

/* Narrow desktop: stack filter above centered title so status text never overlaps search copy. */
@media (min-width: 769px) and (max-width: 1100px) {
  body.home-page .gp-search-type-filter {
    position: static !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 0.15rem !important;
  }

  body.home-page .gp-search-type-filter-stack {
    justify-content: center !important;
  }

  body.home-page .gp-search-type-filter-status {
    max-width: none !important;
    text-align: center !important;
  }
}

body.home-page .gp-search-type-filter-status {
  margin: 0 !important;
  padding: 0 0.1rem !important;
  max-width: 12.65rem !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.706rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  white-space: nowrap !important;
  color: #fde047 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

body.home-page .gp-search-type-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 0.4rem !important;
  line-height: 1 !important;
  padding: 0.42rem 0.85rem 0.42rem 0.72rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: linear-gradient(145deg, rgba(32, 107, 72, 0.92), rgba(21, 55, 38, 0.95)) !important;
  color: #f4faf6 !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.home-page .gp-search-type-filter-btn:hover,
body.home-page .gp-search-type-filter-btn:focus-visible {
  border-color: rgba(120, 220, 170, 0.55) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(44, 122, 86, 0.35) !important;
  outline: none !important;
}

body.home-page .gp-search-type-filter-btn[aria-expanded="true"],
body.home-page .gp-search-type-filter-btn--active {
  background: linear-gradient(145deg, rgba(44, 122, 86, 0.98), rgba(21, 55, 38, 1)) !important;
  border-color: rgba(160, 235, 195, 0.5) !important;
}

body.home-page .gp-search-type-filter-btn i {
  font-size: 0.78rem !important;
  opacity: 0.92 !important;
}

body.home-page .gp-search-type-filter-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.15rem !important;
  height: 1.15rem !important;
  padding: 0 0.28rem !important;
  border-radius: 999px !important;
  background: #e8f5ee !important;
  color: #1a5c3d !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.home-page .gp-search-type-filter-panel {
  position: fixed !important;
  z-index: 10050 !important;
  isolation: isolate !important;
  width: max-content !important;
  min-width: 11.25rem !important;
  max-width: min(14.75rem, calc(100vw - 1.25rem)) !important;
  padding: 0.3rem 0.36rem 0.28rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(120, 200, 150, 0.28) !important;
  background: #0c1f15 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
  color: rgba(244, 250, 246, 0.92) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  max-height: min(72vh, 26rem) !important;
}

body.home-page .gp-search-type-filter-total {
  margin: 0 0 0.2rem !important;
  padding: 0 0.12rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: rgba(187, 247, 208, 0.95) !important;
  line-height: 1.15 !important;
}

body.home-page .gp-search-type-filter-section {
  margin: 0.04rem 0 0.08rem !important;
}

body.home-page #gpSearchTypeFilterOptions {
  margin-top: 0.06rem !important;
}

body.home-page.gp-search-filter-open #search-container .golf-course-card,
body.home-page.gp-search-filter-open #results .golf-course-card {
  z-index: 1 !important;
}

body.home-page .gp-search-type-filter-panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.home-page .gp-search-type-filter-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.35rem !important;
  margin-bottom: 0.12rem !important;
  padding-bottom: 0.12rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.home-page .gp-search-type-filter-panel-title {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

body.home-page .gp-search-type-filter-show-all {
  border: none !important;
  background: transparent !important;
  color: rgba(134, 239, 172, 0.95) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0.1rem 0.2rem !important;
  border-radius: 6px !important;
}

body.home-page .gp-search-type-filter-show-all:hover,
body.home-page .gp-search-type-filter-show-all:focus-visible {
  color: #bbf7d0 !important;
  text-decoration: underline !important;
  outline: none !important;
}

body.home-page .gp-search-type-filter-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: min(28vh, 11.5rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0.02rem 0 0.12rem !important;
  padding: 0 !important;
}

body.home-page #gpSearchHoleCountFilterOptions {
  max-height: none !important;
  overflow-y: visible !important;
}

body.home-page #results .gp-search-filter-empty-notice {
  margin: 0.75rem 0 0.5rem !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(134, 239, 172, 0.25) !important;
  color: rgba(226, 232, 240, 0.92) !important;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

body.home-page #results .gp-search-filter-empty-notice p {
  margin: 0 !important;
}

body.home-page #results .gp-search-filter-empty-notice strong {
  color: rgba(187, 247, 208, 0.98) !important;
  font-weight: 700 !important;
}

body.home-page .gp-search-type-filter-option {
  display: flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  padding: 0.05rem 0.14rem !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
  user-select: none !important;
  line-height: 1.05 !important;
  width: 100% !important;
  min-height: 1.55rem !important;
}

body.home-page .gp-search-type-filter-option-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.home-page .gp-search-type-filter-option-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: rgba(236, 253, 245, 0.92) !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

body.home-page .gp-search-type-filter-count {
  flex: 0 0 auto !important;
  align-self: center !important;
  min-width: 2.15rem !important;
  margin-left: auto !important;
  padding: 0.04rem 0.28rem !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(187, 247, 208, 0.95) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  line-height: 1.1 !important;
}

body.home-page .gp-search-type-filter-option:hover {
  background: rgba(44, 122, 86, 0.22) !important;
}

body.home-page .gp-search-type-filter-option input {
  width: 0.92rem !important;
  height: 0.92rem !important;
  min-width: 0.92rem !important;
  min-height: 0.92rem !important;
  accent-color: #4ade80 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

body.home-page .gp-search-type-filter-option--divider {
  margin-top: 0.14rem !important;
  padding-top: 0.16rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

body.home-page .gp-search-type-filter-option--unavailable {
  cursor: default !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

body.home-page .gp-search-type-filter-option--unavailable:hover {
  background: transparent !important;
}

body.home-page .gp-search-type-filter-option--unavailable .gp-search-type-filter-option-name,
body.home-page .gp-search-type-filter-option--unavailable .gp-search-type-filter-count {
  color: rgba(148, 163, 155, 0.72) !important;
}

body.home-page .gp-search-type-filter-check-na {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  flex-shrink: 0 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(148, 163, 155, 0.45) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(148, 163, 155, 0.85) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.home-page .gp-search-type-filter-loading,
body.home-page .gp-search-type-filter-empty {
  margin: 0.15rem 0 !important;
  font-size: 0.76rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body.home-page .gp-search-type-filter-apply {
  flex: 0 0 auto !important;
  width: 100% !important;
  padding: 0.34rem 0.55rem !important;
  margin-top: 0.02rem !important;
  border: none !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #2c7a56, #1f6b48) !important;
  color: #fff !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(31, 107, 72, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.home-page .gp-search-type-filter-apply:hover,
body.home-page .gp-search-type-filter-apply:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(31, 107, 72, 0.42) !important;
  outline: none !important;
}

/* Mobile / narrow phones only — desktop header + filter layout unchanged above 768px */
@media (max-width: 768px) {
  body.home-page .gp-cin-search-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.28rem !important;
    margin-bottom: 0.35rem !important;
  }

  body.home-page .gp-cin-search-header-text {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  body.home-page .gp-search-type-filter {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  body.home-page .gp-search-type-filter-stack {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38rem !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.home-page .gp-search-type-filter-status {
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    text-align: left !important;
    max-width: 10.5rem !important;
    font-size: 0.557rem !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  body.home-page .gp-search-type-filter-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0.24rem 0.44rem 0.24rem 0.4rem !important;
    font-size: 0.68rem !important;
    gap: 0.24rem !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  body.home-page .gp-search-type-filter-btn i {
    font-size: 0.65rem !important;
  }

  body.home-page .gp-search-type-filter-badge {
    min-width: 0.95rem !important;
    height: 0.95rem !important;
    font-size: 0.58rem !important;
    padding: 0 0.22rem !important;
  }

  body.home-page .gp-search-type-filter-panel.gp-search-type-filter-panel--mobile-center {
    transform: none !important;
  }

  body.home-page .gp-search-type-filter-panel {
    width: max-content !important;
    min-width: 11.5rem !important;
    max-width: min(14.25rem, calc(100vw - 1rem)) !important;
    padding-left: 0.38rem !important;
    padding-right: 0.42rem !important;
  }

  body.home-page .gp-search-type-filter-options {
    padding-right: 0.22rem !important;
    scrollbar-gutter: stable !important;
  }

  body.home-page .gp-search-type-filter-option {
    padding-left: 0.08rem !important;
    padding-right: 0.2rem !important;
    min-height: 1.85rem !important;
    gap: 0.34rem !important;
  }

  body.home-page .gp-search-type-filter-option-label {
    gap: 0.55rem !important;
    padding-right: 0 !important;
  }

  body.home-page .gp-search-type-filter-option-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  body.home-page .gp-search-type-filter-count {
    flex-shrink: 0 !important;
    min-width: 2.15rem !important;
    margin-inline-end: 0.06rem !important;
    text-align: right !important;
  }

  body.home-page .gp-search-type-filter-option input[type="checkbox"] {
    width: 1.1rem !important;
    height: 1.1rem !important;
    min-width: 1.1rem !important;
    min-height: 1.1rem !important;
  }

  body.home-page .gp-search-type-filter-check-na {
    width: 0.98rem !important;
    height: 0.98rem !important;
  }
}

body.home-page .gp-cin-search-title,
body.home-page .gp-cin-search-card #searchTitle,
body.home-page .home-search-wrap #searchTitle,
body.home-page .home-search-wrap .search-title {
  color: #fff !important;
  font-family: var(--gp-cin-font) !important;
  font-size: clamp(1.45rem, 2.5vw, 1.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin: 0 auto 0.2rem !important;
  line-height: 1.15 !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

body.home-page .gp-cin-search-subtitle,
body.home-page .home-search-wrap .search-subtitle {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.95rem !important;
  margin: 0.35rem auto 0 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 640px !important;
}

body.home-page .gp-cin-search-subtitle.gp-cin-search-subtitle--accent {
  color: #fde047 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* ── Search tabs (mockup: 3 equal pills, active = solid green + white text) ── */
body.home-page .gp-cin-search-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.home-page .gp-cin-search-card .gp-cin-search-tabs button.gp-cin-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0.55rem 0.65rem !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  min-width: 0 !important;
  border-radius: 10px !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  background: rgba(0, 0, 0, 0.35) !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.home-page .gp-cin-search-card button.gp-cin-tab span {
  display: inline !important;
}

body.home-page .gp-cin-search-card button.gp-cin-tab:hover {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: #fff !important;
}

body.home-page .gp-cin-search-card button.gp-cin-tab.active {
  background: var(--gp-cin-tab-active-bg) !important;
  background-image: var(--gp-cin-tab-active-bg) !important;
  color: #ffffff !important;
  border-color: #4ade80 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.4) !important;
}

/* Input panel — fixed height so all tabs match */
body.home-page .gp-cin-search-panel {
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid rgba(74, 222, 128, 0.22) !important;
  border-radius: 14px !important;
  padding: 0.7rem 1rem !important;
  min-height: 112px !important;
  box-sizing: border-box !important;
}

body.home-page .gp-top-world-link-wrap {
  margin: 0.55rem 0 0 !important;
  padding: 0 0.25rem 0.05rem !important;
  text-align: center !important;
  width: 100% !important;
}

body.home-page .gp-top-world-link {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #7cb8ff !important;
  font-family: var(--gp-cin-font) !important;
  font-size: clamp(0.78rem, 2.2vw, 0.86rem) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(124, 184, 255, 0.55) !important;
  text-underline-offset: 0.2em !important;
  cursor: pointer !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, opacity 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.home-page .gp-top-world-link:hover,
body.home-page .gp-top-world-link:focus-visible {
  color: #a8d4ff !important;
  text-decoration-color: rgba(168, 212, 255, 0.85) !important;
  outline: none !important;
}

body.home-page .gp-top-world-link:active {
  opacity: 0.82 !important;
}

body.home-page .gp-top-world-link:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}

body.home-page .gp-top-world-link-sep {
  display: inline !important;
  margin: 0 0.55rem !important;
  color: rgba(124, 184, 255, 0.5) !important;
  font-weight: 400 !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* ── Elegant desktop hover tooltips (data-gp-tip) ──────────────────────── */
body.home-page .gp-tip {
  position: relative !important;
}

@media (hover: hover) and (pointer: fine) {
  body.home-page .gp-tip::after,
  body.home-page .gp-tip::before {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 60;
  }

  body.home-page .gp-tip::after {
    content: attr(data-gp-tip);
    max-width: 16rem;
    width: max-content;
    padding: 0.42rem 0.7rem;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(17, 40, 28, 0.98) 0%, rgba(10, 26, 18, 0.98) 100%);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #f4fbf6;
    font-family: var(--gp-cin-font, Inter, system-ui, sans-serif);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body.home-page .gp-tip::before {
    content: "";
    bottom: calc(100% + 4px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(10, 26, 18, 0.98);
    filter: drop-shadow(0 1px 0 rgba(74, 222, 128, 0.3));
  }

  body.home-page .gp-tip:hover::after,
  body.home-page .gp-tip:focus-visible::after,
  body.home-page .gp-tip:hover::before,
  body.home-page .gp-tip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ── "View Demo" video lightbox ────────────────────────────────────────── */
.gp-demo-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(4, 12, 8, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: gp-demo-video-fade 0.18s ease;
}

@keyframes gp-demo-video-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gp-demo-video-dialog {
  position: relative;
  width: min(960px, 100%);
}

.gp-demo-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(74, 222, 128, 0.4);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.6);
}

.gp-demo-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gp-demo-video-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 26, 18, 0.95);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, background 0.15s ease;
}

.gp-demo-video-close:hover,
.gp-demo-video-close:focus-visible {
  background: rgba(34, 197, 94, 0.9);
  transform: scale(1.06);
  outline: none;
}

body.gp-demo-video-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .gp-demo-video-close {
    top: 6px;
    right: 6px;
  }
}

body.home-page .gp-cin-tab-pane[hidden] {
  display: none !important;
}

body.home-page .gp-cin-tab-pane.active {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 108px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.home-page .gp-cin-search-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.4rem !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.home-page .gp-cin-field-stack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

body.home-page .gp-cin-input-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.35rem !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

body.home-page .gp-cin-input-column .gp-cin-label,
body.home-page .gp-cin-input-column .gp-cin-helper {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body.home-page .gp-cin-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: #ffffff !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

body.home-page .gp-cin-field-stack > .gp-cin-submit {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.home-page .gp-cin-search-card input.gp-cin-input {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 0.9rem !important;
  margin: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid #b8cfc4 !important;
  border-radius: 10px !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.92rem !important;
  caret-color: #16a34a !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

body.home-page .gp-cin-input-column .gp-cin-input {
  flex: 0 0 auto !important;
  width: 250px !important;
  max-width: 250px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.home-page .gp-cin-search-card input.gp-cin-input::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

body.home-page .gp-cin-search-card input.gp-cin-input:focus {
  outline: none !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Submit buttons — match active tab gradient + white text */
body.home-page .gp-cin-search-card .gp-cin-search-panel button.gp-cin-submit,
body.home-page .gp-cin-search-card button.gp-cin-submit[type="submit"],
body.home-page .gp-cin-search-card button#nearMeButton.gp-cin-submit,
body.home-page .home-search-wrap .gp-cin-search-card button.gp-cin-submit,
body.home-page .home-search-wrap button.gp-cin-submit[type="submit"],
body.home-page .home-search-wrap #nearMeButton.gp-cin-submit,
body.home-page .home-search-wrap .gp-cin-search-card button#nearMeButton.gp-cin-submit-wide {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  height: 44px !important;
  padding: 0 1.1rem !important;
  margin: 0 !important;
  min-width: auto !important;
  max-width: none !important;
  width: auto !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  background: var(--gp-cin-tab-active-bg) !important;
  background-image: var(--gp-cin-tab-active-bg) !important;
  background-color: #22c55e !important;
  color: #ffffff !important;
  border: 1px solid #4ade80 !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.4) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

body.home-page .gp-cin-search-card .gp-cin-search-panel button.gp-cin-submit span,
body.home-page .gp-cin-search-card button.gp-cin-submit span,
body.home-page .gp-cin-search-card button#nearMeButton.gp-cin-submit span {
  color: #ffffff !important;
}

body.home-page .gp-cin-search-card .gp-cin-search-panel button.gp-cin-submit:hover,
body.home-page .gp-cin-search-card button#nearMeButton.gp-cin-submit:hover,
body.home-page .home-search-wrap #nearMeButton.gp-cin-submit:hover {
  background: var(--gp-cin-tab-active-bg-hover) !important;
  background-image: var(--gp-cin-tab-active-bg-hover) !important;
  color: #fff !important;
  transform: none !important;
}

body.home-page .gp-cin-helper {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.76rem !important;
  margin: 0.15rem 0 0 !important;
  line-height: 1.35 !important;
}

body.home-page #nearMeLocationHelper[hidden] {
  display: none !important;
}

body.home-page .gp-name-search-count {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  margin: 0.15rem 0 0 !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
}

body.home-page .gp-name-search-count.is-loading {
  color: rgba(255, 255, 255, 0.45) !important;
}

body.home-page .gp-name-search-count:empty {
  display: none !important;
  margin: 0 !important;
}

/* When the count has text (4+ chars typed → result or "Searching…"), it
   replaces the "Enter at least 4 characters." helper underneath the input. */
body.home-page .gp-cin-input-column:has(.gp-name-search-count:not(:empty)) .gp-cin-helper {
  display: none !important;
}

/* ── Suggested search keywords (Search by Name) ───────────────────────────── */
/* Wrapper provides the positioning context for the dropdown directly under the box.
   It owns the 250px field width so the input fills it and the dropdown aligns edge-to-edge. */
body.home-page .gp-name-input-wrap {
  position: relative !important;
  width: 250px !important;
  max-width: 100% !important;
}
body.home-page .gp-name-input-wrap .gp-cin-input {
  width: 100% !important;
  max-width: 100% !important;
}

/* Helper row: "Enter at least 4 characters." on the left, elegant "Suggestions" link on the right. */
body.home-page .gp-name-helper-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

body.home-page .gp-name-suggest-link {
  color: #6ee7a8 !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color 0.15s ease;
}
body.home-page .gp-name-suggest-link:hover,
body.home-page .gp-name-suggest-link:focus-visible {
  color: #bff3d4 !important;
  text-decoration: underline !important;
  outline: none !important;
}

/* Polished, Google-Places-style dropdown directly below the input. */
body.home-page .gp-name-suggestions {
  /* position:fixed so the list escapes the .gp-cin-hero-panel `overflow:hidden`
     ancestor that otherwise clips it. Exact top/left/width are set in JS to
     track the input on open, scroll, and resize. */
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2147483000 !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  background: #ffffff !important;
  border: 1px solid #d4e2db !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  text-align: left !important;
}
body.home-page .gp-name-suggestions[hidden] {
  display: none !important;
}
body.home-page .gp-name-suggestion {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.5rem 0.7rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #163f34 !important;
  font-family: var(--gp-cin-font) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
body.home-page .gp-name-suggestion::before {
  /* Dependency-free magnifier (inline SVG) — matches the Places autocomplete feel
     without relying on a Font Awesome glyph being loaded/named a certain way. */
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bb5a9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Pin the magnifier to the first text line when a suggestion has a subtitle. */
body.home-page .gp-name-suggestion:has(.gp-name-suggestion-sub)::before {
  align-self: flex-start !important;
  margin-top: 2px !important;
}
body.home-page .gp-name-suggestion-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body.home-page .gp-name-suggestion-main {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.home-page .gp-name-suggestion-main strong {
  font-weight: 700 !important;
  color: #0f5132 !important;
}
body.home-page .gp-name-suggestion-sub {
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  color: #6f8a7f !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.home-page .gp-name-suggestion:hover,
body.home-page .gp-name-suggestion.is-active {
  background: #eef6f1 !important;
  color: #0f5132 !important;
}
/* "No matching courses" placeholder — non-interactive, no magnifier. */
body.home-page .gp-name-suggestion--empty,
body.home-page .gp-name-suggestion--empty:hover {
  cursor: default !important;
  color: #8a9c93 !important;
  font-style: italic !important;
  background: transparent !important;
}
body.home-page .gp-name-suggestion--empty::before {
  display: none !important;
}

/* ── Location tab with the redundant "Search by Location" button removed ───── */
/* Center and gently widen the single location field so the panel still looks balanced. */
body.home-page .gp-cin-field-stack--single {
  justify-content: center !important;
}
body.home-page .gp-cin-field-stack--single .gp-cin-input-column .gp-cin-input {
  width: 320px !important;
  max-width: 100% !important;
}

body.home-page .gp-cin-nearme-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  min-height: 108px !important;
  gap: 0.5rem !important;
}

body.home-page .gp-cin-submit-wide {
  width: auto !important;
  max-width: 320px !important;
  margin: 0 !important;
}

/* style.css sets #name-tab { background: #e8eaed } without .home-page */
body.home-page #name-tab,
body.home-page #location-tab,
body.home-page #nearme-tab {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Global .search-card white — homepage only */
body.home-page .search-card {
  background: linear-gradient(180deg, var(--gp-cin-surface) 0%, var(--gp-cin-surface-2) 100%) !important;
  color: #fff !important;
  border-color: var(--gp-cin-border) !important;
}

/* Beat index-page / site.css dark input overrides */
body.home-page .home-search-wrap .ds-input,
body.home-page .home-search-wrap input[type="text"],
body.home-page .home-search-wrap input[type="search"],
body.home-page .home-search-wrap #locationInput,
body.home-page .home-search-wrap #golfClubInput,
body.home-page .gp-cin-search-card input.gp-cin-input,
body.home-page .gp-cin-search-card #locationInput,
body.home-page .gp-cin-search-card #golfClubInput,
body.home-page .form-group input.gp-cin-input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid #b8cfc4 !important;
}

body.home-page .home-search-wrap button[type="submit"]:not(.gp-cin-tab),
body.home-page .home-search-wrap .search-button:not(.gp-cin-tab),
body.home-page .home-search-wrap #nearMeButton.gp-cin-submit {
  background: var(--gp-cin-tab-active-bg) !important;
  background-image: var(--gp-cin-tab-active-bg) !important;
  color: #ffffff !important;
  border: 1px solid #4ade80 !important;
}

/* Legacy class fallbacks (if cached HTML still has them) */
body.home-page .home-search-wrap .tab-button,
body.home-page .search-card .tab-button {
  background: rgba(0, 0, 0, 0.28) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(74, 222, 128, 0.28) !important;
  border-radius: 12px !important;
}

body.home-page .home-search-wrap #name-tab.tab-content,
body.home-page .home-search-wrap #location-tab.tab-content,
body.home-page .home-search-wrap #nearme-tab.tab-content {
  background: transparent !important;
  border: none !important;
}

/* ── Results ──────────────────────────────────────────────── */
body.home-page .results-section,
body.home-page #search-container,
body.home-page .home-search-loading-section {
  background: var(--gp-cin-bg-2) !important;
}

body.home-page .results-header {
  text-align: center !important;
  padding: 0.35rem 0 0.2rem !important;
  margin-bottom: 0.35rem !important;
}

body.home-page #search-container {
  padding-top: 0 !important;
  /* Task 12: trim the empty space below "Show More Golf Courses" so the page
     ends tighter (still leaves breathing room before the footer). */
  padding-bottom: 0.75rem !important;
}

/* Task 12: tighten the load-more block's own bottom spacing. */
body.home-page #results .gp-results-load-more {
  margin-bottom: 0 !important;
  padding-bottom: 0.4rem !important;
}

/* Results grid spacing: keep vertical == horizontal */
body.home-page #search-container .results-grid,
body.home-page #results .results-grid,
body.home-page #search-container .course-list-grid .results-grid {
  /* Make this tighter and ALWAYS apply (this file loads last). */
  column-gap: 0.45rem !important;
  row-gap: 0.45rem !important;
  gap: 0.45rem !important;
  align-items: start !important;
}

/* Guardrail: ensure cards don't add their own vertical spacing */
body.home-page #search-container .golf-course-card,
body.home-page #results .golf-course-card,
body.home-page .course-list-grid .golf-course-card {
  margin: 0 !important;
}

body.home-page .results-title {
  color: #fff !important;
  font-family: var(--gp-cin-font) !important;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
  font-weight: 800 !important;
}

body.home-page .results-title .results-title-query {
  display: block !important;
  margin-top: 0.12em !important;
  color: #fde047 !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

/* Search results: minimal empty state (no white card) */
body.home-page #results .gp-no-courses-found {
  text-align: center !important;
  padding: 2.25rem 1rem 2.75rem !important;
  margin: 0 auto !important;
  max-width: 640px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.home-page #results .gp-no-courses-found-title {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--gp-cin-font) !important;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35) !important;
}

body.home-page #results .empty-state {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2.25rem 1rem 2.75rem !important;
}

body.home-page #results .empty-state i,
body.home-page #results .empty-state p,
body.home-page #results .empty-state .suggested-searches {
  display: none !important;
}

body.home-page #results .empty-state h3 {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--gp-cin-font) !important;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35) !important;
}

body.home-page #search-container .golf-course-card,
body.home-page .course-list-grid .golf-course-card {
  background: #0f2318 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.home-page #search-container .golf-course-card.gp-club-type-filter-hidden,
body.home-page #results .golf-course-card.gp-club-type-filter-hidden,
body.home-page .course-list-grid .golf-course-card.gp-club-type-filter-hidden {
  display: none !important;
}

body.home-page #search-container .golf-course-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

/* Card photo + badge + overlay text */
body.home-page .cin-card-photo {
  position: relative;
  width: 100%;
  height: 148px;
  max-height: 148px;
  aspect-ratio: auto;
  overflow: hidden;
}

body.home-page .cin-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

body.home-page .golf-course-card:hover .cin-card-photo img {
  transform: scale(1.05);
}

/* Badge: top-right, above text overlay */
body.home-page .cin-view3d-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  bottom: auto;
  z-index: 12;
  background: linear-gradient(180deg, var(--gp-cin-accent-hi), var(--gp-cin-accent)) !important;
  color: var(--gp-cin-accent-text) !important;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* No mapped fairways: no 3D tour available yet — red badge, white text. */
body.home-page .cin-view3d-badge.cin-view3d-badge--unavailable {
  background: linear-gradient(180deg, #c97b7b, #b56565) !important;
  color: #ffffff !important;
}

/* Text overlay — lighter, semi-transparent; vertically centered in lower photo */
body.home-page .cin-card-photo .cin-card-info {
  position: absolute;
  left: 50%;
  top: 58%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: calc(100% - 0.85rem);
  max-width: 100%;
  padding: 0.5rem 0.65rem 0.55rem;
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(2px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  box-sizing: border-box;
  pointer-events: none;
  overflow: visible;
}

body.home-page .cin-card-info .course-name,
body.home-page .golf-course-card .cin-card-info .course-name {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85) !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.home-page .cin-card-info .course-location,
body.home-page .golf-course-card .cin-card-info .course-location {
  color: #f0f0f0 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.home-page .cin-card-info .course-location:not(:last-child)::after,
body.home-page .golf-course-card .cin-card-info .course-location:not(:last-child)::after {
  content: "" !important;
  display: block !important;
  width: 82% !important;
  max-width: none !important;
  height: 0 !important;
  margin: 0.22rem auto 0.14rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 4px solid #fff9c4 !important;
  box-shadow: 0 0 14px rgba(255, 248, 180, 0.95), 0 0 5px rgba(255, 255, 255, 0.75) !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
}

body.home-page .cin-card-info .course-club-type,
body.home-page .golf-course-card .cin-card-info .course-club-type,
body.home-page .cin-card-info .course-hole-count,
body.home-page .golf-course-card .cin-card-info .course-hole-count {
  margin: 0 !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(187, 247, 208, 0.9) !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
}

body.home-page .cin-card-info .course-meta-sep,
body.home-page .golf-course-card .cin-card-info .course-meta-sep {
  margin: 0 0.35rem !important;
  padding: 0 !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(187, 247, 208, 0.9) !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
  opacity: 0.95 !important;
}

body.home-page .cin-card-info .distance-badge,
body.home-page .cin-card-info [class*="distance"] {
  color: rgba(187, 247, 208, 0.98) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

body.home-page .cin-card-body { display: none !important; }

body.home-page .golf-course-card .course-card-buttons {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0.55rem 0.9rem !important;
  gap: 0.5rem !important;
  background: transparent !important;
}

body.home-page .golf-course-card .card-action-btn {
  font-size: 0.72rem !important;
  padding: 0.35rem 0.45rem !important;
  min-height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  white-space: normal !important;
}

body.home-page .golf-course-card .course-card-buttons .btn-action-label {
  display: block !important;
  text-align: center !important;
  line-height: 1.05 !important;
}

body.home-page .golf-course-card .course-card-buttons .btn-action-line {
  display: block !important;
  white-space: nowrap !important;
}

body.home-page .golf-course-card .card-action-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  transform: none !important;
}

/* ── FAQ ──────────────────────────────────────────────────── */
body.home-page .home-faq {
  background: transparent !important;
  border-top: none !important;
}

body.home-page .home-search-loading-section .search-loading-panel {
  max-width: 420px !important;
  margin: 1.5rem auto 2rem !important;
  padding: 1.75rem 1.25rem !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.home-page #search-skeleton[aria-busy="false"],
body.home-page #search-skeleton[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

body.home-page .home-search-loading-section .search-loading-spinner {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 1rem !important;
  border: 3px solid rgba(74, 222, 128, 0.22) !important;
  border-top-color: #4ade80 !important;
  border-radius: 50% !important;
  animation: gp-cin-search-spin 0.85s linear infinite !important;
}

@keyframes gp-cin-search-spin {
  to { transform: rotate(360deg); }
}

body.home-page .home-search-loading-section .search-loading-text {
  font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 !important;
  letter-spacing: 0.02em !important;
}

body.home-page .home-faq-title { color: #fff !important; }
body.home-page .home-faq-intro { color: rgba(255, 255, 255, 0.58) !important; }
body.home-page .home-faq-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

body.home-page .home-faq-question { color: #fff !important; }
body.home-page .home-faq-answer { color: rgba(255, 255, 255, 0.66) !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  body.home-page .gp-cin-hero-panel,
  body.home-page .hero-cin-wrap.gp-cin-hero-panel {
    width: calc(100% - 2rem) !important;
    padding: 1.35rem 1.15rem 1.1rem !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  body.home-page .hero-cin-section .hero-cin-left,
  body.home-page .hero-cin-section .hero-cin-left * {
    text-align: center !important;
    align-items: center !important;
  }

  body.home-page .hero-cin-section #home-movie-course-btns {
    justify-content: center !important;
  }

  body.home-page .hero-cin-section .hero-social-media {
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  body.home-page .gp-cin-hero-panel,
  body.home-page .hero-cin-wrap.gp-cin-hero-panel {
    background:
      linear-gradient(125deg, rgba(4, 11, 7, 0.42) 0%, rgba(8, 20, 12, 0.26) 50%, rgba(4, 11, 7, 0.18) 100%),
      url("/images/hero_cellphone.png") center center / cover no-repeat !important;
  }
}

@media (max-width: 768px) {
  /* Proof strip hidden on phone to save vertical space */
  body.home-page .proof-strip {
    display: none !important;
  }

  /* Stack hero blocks: headline/pills → search → preview → social → feedback */
  body.home-page .hero-cin-wrap.gp-cin-hero-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.home-page .hero-cin-left {
    display: contents !important;
  }

  body.home-page .hero-cin-headline {
    order: 1 !important;
    width: 100% !important;
  }

  body.home-page .hero-cin-section #home-movie-course-btns,
  body.home-page .hero-cin-left .home-preview-tour-links {
    order: 2 !important;
    width: 100% !important;
  }

  body.home-page .hero-primary-cta {
    order: 3 !important;
  }

  /* CTA + social now live inside .hero-cin-right; flatten it so the original
     phone order (headline → pills → Search button → preview → social) is kept
     via the existing order values. */
  body.home-page .hero-cin-right {
    display: contents !important;
  }

  body.home-page .hero-cin-section .home-video-frame {
    order: 4 !important;
    /* Cellphone: demo image scaled down 15% in both X and Y (320 → 272).
       Centered horizontally via margin auto; object-fit: contain (set below)
       keeps the full 16:9 frame visible without cropping. */
    width: min(100%, 272px) !important;
    max-width: 272px !important;
    margin: 0.38rem auto 0 !important; /* 15% less top space than 0.45rem */
    border-radius: 0 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45) !important;
  }

  /* Mobile: scale preview at native 16:9 with contain (no cover crop on demo UI). */
  body.home-page .hero-cin-section .home-video-frame,
  body.home-page .hero-cin-section .home-preview-video-wrap,
  body.home-page .hero-cin-section #homePreviewTour.home-preview-video-link {
    height: auto !important;
  }

  body.home-page .hero-cin-section #homePreviewTour.home-preview-video-link {
    aspect-ratio: 16 / 9 !important;
  }

  body.home-page .hero-cin-section #homePreviewTour .home-preview-video,
  body.home-page .hero-cin-section .home-preview-video {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Cellphone hero: crop the demo mockup to the phone panel and hide left-side UI chrome. */
  body.home-page .hero-cin-section .home-preview-video-wrap {
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  body.home-page .hero-cin-section #homePreviewTour .home-preview-video,
  body.home-page .hero-cin-section .home-preview-video {
    object-fit: cover !important;
    object-position: 78% center !important;
    transform: scale(1.18) !important;
    transform-origin: 78% center !important;
  }

  /* Task 4: on phones, lift the search section so it sits directly beneath the
     hero (title/subtitle/CTA) and is visible without long scrolling. <main>
     becomes a column flex container so we can reorder its sections; the
     proof-strip marketing row drops below the results. Children stay full
     width (default stretch), so only the vertical order changes. */
  body.home-page main {
    display: flex !important;
    flex-direction: column !important;
  }
  body.home-page main > .hero-cin-section { order: 1 !important; }
  body.home-page main > #search-box { order: 2 !important; }
  body.home-page main > #search-skeleton { order: 3 !important; }
  body.home-page main > #search-container { order: 4 !important; }
  body.home-page main > .proof-strip {
    order: 5 !important;
    margin-top: 1.25rem !important;
  }

  body.home-page .hero-cin-section .home-preview-demo-btn {
    bottom: 0.42rem !important;
    font-size: 0.62rem !important;
    padding: 0.3rem 0.68rem !important;
  }

  /* Cellphone: feedback + social icons on a single horizontal row, with
     Send-Feedback on the LEFT and the 5 brand icons evenly spaced after it.
     .hero-social-media uses display:contents so its anchor children become
     direct flex siblings of the feedback button inside .hero-social-row-wrap
     (DOM order is: feedback button, then FB / X / LinkedIn / YouTube / TikTok).
     justify-content:space-evenly distributes all six items across the row. */
  body.home-page .hero-cin-section .hero-social-row-wrap {
    order: 5 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    gap: 0.28rem !important;
    margin: 0.3rem auto 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.home-page .hero-cin-section .hero-social-media {
    display: contents !important;
  }

  /* Cellphone: match static-page hero feedback button sizing. */
  body.home-page .hero-cin-section .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0.5rem 0.95rem !important;
    font-size: 0.82rem !important;
    gap: 0.45rem !important;
  }

  body.home-page .hero-cin-section .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Social icons on cellphone: perfectly round (border-radius 50% + 1:1 aspect
     ratio + zero padding) and ~12% smaller than before (34 → 30) so the full
     row of 5 icons + the Send-Feedback button fits inside the hero panel on
     narrow portrait screens (412px / 360px / 320px). */
  body.home-page .hero-cin-section .hero-social-media a,
  body.home-page .hero-cin-section .hero-social-row-wrap > a.gp-social-link {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  body.home-page .hero-cin-section .hero-social-media svg,
  body.home-page .hero-cin-section .hero-social-row-wrap > a.gp-social-link svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Hero vertical rhythm tightened ~15% on cellphone. */
  body.home-page .hero-cin-section,
  body.home-page .hero-cin-section.ds-hero {
    padding: 0.425rem 0 0.3rem !important; /* was 0.5rem 0 0.35rem */
  }

  body.home-page .gp-cin-hero-panel,
  body.home-page .hero-cin-wrap.gp-cin-hero-panel {
    padding: 0.85rem 1rem 0.72rem !important; /* was 1rem 1rem 0.85rem */
  }

  /* 15% less vertical breathing inside the headline pill so the subtitle
     sits closer to the title (font sizes unchanged). */
  body.home-page .hero-cin-headline {
    padding: 0.425rem 0.85rem 0.47rem !important; /* was 0.5rem 0.85rem 0.55rem */
  }
  body.home-page .hero-cin-section .hero-cin-left .hero-desc,
  body.home-page .hero-cin-headline .hero-desc {
    margin-top: 0.25rem !important; /* was 0.3rem */
  }

  /* Search CTA: 15% less top space so it tucks closer to the pill buttons. */
  body.home-page .hero-primary-cta {
    margin-top: 0.13rem !important; /* was 0.15rem */
  }

  /* style.css hides hero social SVGs below 768px — restore for cinematic hero */
  body.home-page .hero-cin-section .hero-social-media {
    display: flex !important;
  }

  body.home-page .hero-cin-section .hero-social-media a {
    display: inline-flex !important;
  }

  body.home-page .hero-cin-section .hero-social-media svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 640px) {
  body.home-page .hero-primary-cta {
    font-size: 0.82rem !important;
    padding: 0.5rem 1rem !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    letter-spacing: 0.02em !important;
    line-height: 1.25 !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.38) !important;
  }

  body.home-page .gp-cin-search-card {
    padding: 0.75rem 1.15rem 1rem !important;
  }

  body.home-page .gp-cin-search-tabs {
    grid-template-columns: 1fr !important;
  }

  body.home-page .gp-cin-search-panel {
    min-height: 0 !important;
    padding: 0.6rem 0.75rem !important;
  }

  body.home-page .gp-cin-tab-pane.active {
    min-height: 0 !important;
  }

  body.home-page .gp-cin-nearme-form {
    min-height: 0 !important;
  }

  body.home-page .gp-cin-field-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.home-page .gp-cin-input-column {
    width: 100% !important;
  }

  body.home-page .gp-cin-search-form,
  body.home-page .gp-cin-field-stack {
    max-width: 100% !important;
  }

  body.home-page .gp-cin-input-column .gp-cin-input,
  body.home-page .gp-cin-search-card input.gp-cin-input,
  body.home-page .home-search-wrap #locationInput,
  body.home-page .home-search-wrap #golfClubInput {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  body.home-page .gp-cin-field-stack > .gp-cin-submit {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    align-self: stretch !important;
  }

  body.home-page #name-tab .gp-cin-field-stack > .gp-cin-submit {
    width: 80% !important;
    max-width: 80% !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home-page .gp-cin-submit-wide {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Beat style.css nuclear `button` + site.css #nearMeButton */
body.home-page .home-search-wrap .gp-cin-search-card .gp-cin-search-panel button.gp-cin-submit,
body.home-page .home-search-wrap .gp-cin-search-card button.gp-cin-submit[type="submit"],
body.home-page .home-search-wrap .gp-cin-search-card button#nearMeButton.gp-cin-submit,
body.home-page #nearMeButton.gp-cin-submit.gp-cin-submit-wide {
  background: var(--gp-cin-tab-active-bg) !important;
  background-image: var(--gp-cin-tab-active-bg) !important;
  background-color: #22c55e !important;
  color: #ffffff !important;
  border: 1px solid #4ade80 !important;
  border-radius: 10px !important;
  min-width: auto !important;
  padding: 0 1.1rem !important;
  box-shadow: 0 4px 18px rgba(34, 197, 94, 0.4) !important;
}

body.home-page .home-search-wrap .gp-cin-search-card .gp-cin-search-panel button.gp-cin-submit:hover,
body.home-page .home-search-wrap .gp-cin-search-card button#nearMeButton.gp-cin-submit:hover,
body.home-page #nearMeButton.gp-cin-submit.gp-cin-submit-wide:hover {
  background: var(--gp-cin-tab-active-bg-hover) !important;
  background-image: var(--gp-cin-tab-active-bg-hover) !important;
  color: #fff !important;
}

body.home-page .home-search-wrap #locationInput,
body.home-page .home-search-wrap #golfClubInput,
body.home-page .gp-cin-search-card #locationInput,
body.home-page .gp-cin-search-card #golfClubInput {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ── Cellphone only: shorter nav, hero, search header ─────── */
@media (max-width: 767px) {
  /* Task 6 — shared mobile header: logo left, wordmark centered, hamburger
     right.  gp-brand.css owns the actual flex layout (space-between +
     absolutely positioned wordmark); we only set the cinematic-page
     specific height/padding here. */
  body.home-page .header-container {
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 0.85rem !important;
    overflow: visible !important;
    justify-content: space-between !important;
  }

  body.home-page .header-container nav {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }

  /* Cinematic homepage overrides desktop nav flex — restore mobile drawer */
  body.home-page .header-container .nav-menu {
    display: none !important;
  }

  body.home-page .header-container .nav-menu.open {
    display: flex !important;
  }

  /* Task 6 — mobile logo sizing is owned by gp-brand.css (single source of
     truth, matches directory page reference 47×47).  Keep only flex
     behavior here so the cinematic homepage layout still works. */
  body.home-page .header-container .logo {
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  body.home-page .header-container .hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2002 !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: 0.35rem !important;
    padding: 0.35rem !important;
  }

  body.home-page .header-container .hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    margin: 3px 0 !important;
    background: #fff !important;
    opacity: 1 !important;
  }

  /* Legacy two-line title markup — keep on one line if present. */
  body.home-page .gp-cin-search-title .gp-search-title-line {
    display: inline !important;
  }

  body.home-page .gp-cin-search-title .gp-search-title-line + .gp-search-title-line::before {
    content: " " !important;
  }

  body.home-page .hero-cin-section,
  body.home-page .hero-cin-section.ds-hero,
  body.home-page .hero-cin-section.hero {
    padding: 0.08rem 0.55rem 0.12rem !important;
    margin-top: 0 !important;
  }

  body.home-page .gp-cin-hero-panel,
  body.home-page .hero-cin-wrap.gp-cin-hero-panel {
    padding: 0.5rem 0.65rem 0.4rem !important;
    width: calc(100% - 1.1rem) !important;
  }

  body.home-page .hero-cin-left {
    gap: 0.18rem !important;
  }

  body.home-page .hero-cin-headline {
    padding: 0.35rem 0.55rem 0.38rem !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-title,
  body.home-page .hero-cin-headline .hero-title {
    font-size: 1.5625rem !important;
    line-height: 1.12 !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-desc,
  body.home-page .hero-cin-headline .hero-desc {
    font-size: clamp(0.68rem, 3.4vw, 0.8125rem) !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    margin: 0.22rem 0 0 !important;
    letter-spacing: normal !important;
  }

  body.home-page .hero-cin-section #home-movie-course-btns,
  body.home-page .hero-cin-left .home-preview-tour-links {
    gap: 0.28rem !important;
    margin-top: 0.1rem !important;
  }

  body.home-page .hero-cin-section #home-movie-course-btns .movie-course-btn,
  body.home-page .hero-cin-section #home-movie-course-btns a.movie-course-btn {
    font-size: 0.68rem !important;
    padding: 0.34rem 0.7rem !important;
  }

  body.home-page .hero-primary-cta {
    margin: 0.12rem auto 0 !important;
    padding: 0.5rem 0.95rem !important;
    font-size: 0.8rem !important;
  }

  body.home-page .hero-cin-section .hero-social-row-wrap {
    gap: 0.25rem !important;
    margin: 0.25rem auto 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.home-page .hero-cin-section .home-video-frame {
    width: min(100%, 220px) !important;
    max-width: 220px !important;
    margin: 0.22rem auto 0 !important;
  }

  body.home-page .hero-cin-section .hero-social-media {
    gap: 0.25rem !important;
    margin: 0 !important;
  }

  body.home-page .hero-cin-section .hero-social-media a,
  body.home-page .hero-cin-section .hero-social-row-wrap > a.gp-social-link {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  body.home-page .hero-cin-section .hero-social-media svg,
  body.home-page .hero-cin-section .hero-social-row-wrap > a.gp-social-link svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Match static-page hero feedback button sizing on narrow phones. */
  body.home-page .hero-cin-section .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home {
    padding: 0.5rem 0.95rem !important;
    font-size: 0.82rem !important;
    gap: 0.45rem !important;
    flex: 0 0 auto !important;
  }

  body.home-page .hero-cin-section .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Cellphone title/subtitle: short copy + vw clamp so both stay on one line down to ~320px. */
  body.home-page .gp-cin-search-title,
  body.home-page .gp-cin-search-card #searchTitle,
  body.home-page .home-search-wrap #searchTitle {
    font-size: clamp(0.88rem, 4.6vw, 1.25rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 0.12rem !important;
    white-space: nowrap !important;
  }

  body.home-page .gp-cin-search-subtitle,
  body.home-page .home-search-wrap .search-subtitle {
    font-size: clamp(0.68rem, 3.2vw, 0.85rem) !important;
    margin: 0.2rem auto 0.35rem !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  body.home-page .home-search-wrap,
  body.home-page .home-search-wrap.ds-section {
    padding-top: 0.35rem !important;
  }
}

body.home-page .home-search-wrap #locationInput:focus,
body.home-page .home-search-wrap #golfClubInput:focus {
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ── Desktop search panel — label/helper over input; button aligned to input row ── */
@media (min-width: 768px) {
  body.home-page .gp-cin-tab-pane.active {
    align-items: center !important;
  }

  body.home-page .gp-cin-search-form {
    width: auto !important;
    max-width: 100% !important;
  }

  body.home-page .gp-cin-field-stack {
    display: grid !important;
    /* 25% wider inputs (250px → ~312px) */
    grid-template-columns: 312px auto !important;
    grid-template-rows: auto 44px auto !important;
    column-gap: 0.55rem !important;
    row-gap: 0.35rem !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  body.home-page .gp-cin-input-column {
    display: contents !important;
  }

  body.home-page .gp-cin-input-column .gp-cin-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    text-align: center !important;
  }

  body.home-page .gp-cin-input-column .gp-cin-input,
  body.home-page .gp-cin-search-card #locationInput,
  body.home-page .gp-cin-search-card #golfClubInput {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    align-self: center !important;
  }

  /* The name-search input is nested in .gp-name-input-wrap, so the wrapper
     (not the input) is the grid item. Place it on the input row so the
     "Search by Name" button sits to its right instead of dropping below. */
  body.home-page .gp-cin-input-column .gp-name-input-wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: center !important;
  }

  body.home-page .gp-cin-input-column .gp-cin-helper,
  body.home-page .gp-cin-input-column .gp-name-search-count {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    text-align: center !important;
  }

  body.home-page .gp-cin-field-stack > .gp-cin-submit {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  body.home-page .gp-cin-nearme-form {
    width: fit-content !important;
    max-width: 100% !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home-page .gp-cin-nearme-form > .gp-cin-label {
    width: 100% !important;
    text-align: center !important;
  }

  body.home-page .gp-cin-nearme-form #nearMeButton.gp-cin-submit-wide,
  body.home-page #nearMeButton.gp-cin-submit.gp-cin-submit-wide {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: center !important;
    padding: 0 1.35rem !important;
  }

  /* Near Me has no input field. Stack it as a centered column:
       1) "Search Courses Near You"  (single line)
       2) "Tap the button below … use your location."       (single line, above btn)
       3) Search Near Me button
     The label + helper stay on one line each (no word-wrap) on desktop. */
  body.home-page .gp-cin-nearme-form .gp-cin-field-stack {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    row-gap: 0.55rem !important;
    column-gap: 0 !important;
    width: fit-content !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  body.home-page .gp-cin-nearme-form .gp-cin-input-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  body.home-page .gp-cin-nearme-form .gp-cin-input-column .gp-cin-label,
  body.home-page .gp-cin-nearme-form .gp-cin-input-column .gp-cin-helper {
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
    text-align: center !important;
  }
  body.home-page .gp-cin-nearme-form .gp-cin-field-stack > #searchNearMeBtn.gp-cin-submit {
    align-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

/* ── Hero preview enlarge modal ───────────────────────────── */
.hero-preview-modal {
  --hero-preview-btn-bg: #1f6a4f;
  --hero-preview-btn-bg-hover: #174d3a;
  --hero-preview-btn-shadow: 0 4px 14px rgba(31, 106, 79, 0.35);
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
  background: rgba(4, 10, 8, 0.88) !important;
}

.hero-preview-modal[hidden] {
  display: none !important;
}

html.hero-preview-modal-open,
html.hero-preview-modal-open body {
  overflow: hidden !important;
}

.hero-preview-modal-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.hero-preview-modal-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.85rem !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.hero-preview-modal-media {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow: visible !important;
}

.hero-preview-modal-image-btn {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  line-height: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
}

.hero-preview-modal-image-btn:focus-visible {
  outline: 2px solid rgba(74, 222, 128, 0.85) !important;
  outline-offset: 3px !important;
}

.hero-preview-modal-image {
  display: block !important;
  width: 90vw !important;
  height: auto !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  object-fit: contain !important;
  aspect-ratio: 16 / 9 !important;
}

.hero-preview-modal-x {
  position: absolute !important;
  top: var(--hero-preview-x-top, -0.55rem) !important;
  right: var(--hero-preview-x-right, -0.55rem) !important;
  z-index: 2 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: var(--hero-preview-btn-bg) !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--hero-preview-btn-shadow) !important;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hero-preview-modal-x:hover,
.hero-preview-modal-x:focus-visible {
  background: var(--hero-preview-btn-bg-hover) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(31, 106, 79, 0.42) !important;
}

.hero-preview-modal-close {
  margin: 0 !important;
  padding: 0.5rem 1.35rem !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--hero-preview-btn-bg) !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: var(--hero-preview-btn-shadow) !important;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hero-preview-modal-close:hover,
.hero-preview-modal-close:focus-visible {
  background: var(--hero-preview-btn-bg-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(31, 106, 79, 0.42) !important;
}

@media (max-width: 768px) {
  .hero-preview-modal {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .hero-preview-modal-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .hero-preview-modal-panel {
    position: relative !important;
    gap: 0.35rem !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-preview-modal-media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: min(92vw, calc(100dvw - 1rem)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 3.5rem) !important;
    overflow: visible !important;
  }

  .hero-preview-modal-image-btn {
    overflow: visible !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 1 !important;
    min-height: 0 !important;
  }

  .hero-preview-modal-image {
    transform: none !important;
    max-width: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 3.5rem) !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  }

  /* X: top-right of the image; rotated 90° for landscape-style controls */
  .hero-preview-modal-x {
    top: 0.35rem !important;
    right: 0.35rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 1.75rem !important;
    transform: rotate(90deg) !important;
  }

  .hero-preview-modal-x:hover,
  .hero-preview-modal-x:focus-visible {
    transform: rotate(90deg) scale(1.06) !important;
  }

  .hero-preview-modal-close {
    position: fixed !important;
    left: 50% !important;
    bottom: max(0.65rem, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) rotate(90deg) !important;
    z-index: 12001 !important;
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    padding: 0.38rem 0.95rem !important;
    min-height: 2.25rem !important;
    min-width: 4.25rem !important;
  }

  .hero-preview-modal-close:hover,
  .hero-preview-modal-close:focus-visible {
    transform: translateX(-50%) rotate(90deg) translateY(-1px) !important;
  }
}

/* Portrait phone: CSS landscape lock (no Screen Orientation API — keeps screenshots working) */
@media (max-width: 768px) and (orientation: portrait) {
  html.hero-preview-modal-open,
  html.hero-preview-modal-open body {
    overflow: hidden !important;
  }

  .hero-preview-modal--portrait-lock .hero-preview-modal-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-preview-modal--portrait-lock .hero-preview-modal-panel--landscape-lock,
  .hero-preview-modal--portrait-lock .hero-preview-modal-panel {
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
    width: 100dvh !important;
    height: 100dvw !important;
    max-width: 100dvh !important;
    max-height: 100dvw !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
  }

  .hero-preview-modal--portrait-lock .hero-preview-modal-media {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .hero-preview-modal--portrait-lock .hero-preview-modal-image {
    /* Panel is rotated 90° — width becomes visual height on screen. */
    width: 90dvh !important;
    height: auto !important;
    max-width: 90dvh !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  }

  /* X button in portrait-lock landscape view:
     - Panel is rotated 90deg cw; positioning at local top-right of media maps
       to the visual bottom-right of the screen, which is the landscape
       image's top-right corner from the user's mental tilt.
     - No extra rotation: the panel's 90deg cw rotation already orients the
       button so its "top" points to the physical right of the screen,
       matching the landscaped image content. */
  .hero-preview-modal--portrait-lock .hero-preview-modal-x {
    top: 0.4rem !important;
    right: 0.4rem !important;
    left: auto !important;
    bottom: auto !important;
    width: 1.45rem !important;
    height: 1.45rem !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 6px !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    transform: none !important;
  }

  .hero-preview-modal--portrait-lock .hero-preview-modal-x:hover,
  .hero-preview-modal--portrait-lock .hero-preview-modal-x:focus-visible {
    transform: scale(1.06) !important;
  }

  /* Close button in portrait-lock landscape view.
     In rotated panel coords, right edge = physical bottom, so Close sits on
     the landscape "side" (bottom of the visual viewport). Drop the extra
     rotate(90deg) so the button only inherits the panel's 90deg cw rotation,
     leaving "Close" text reading upright (top of letters toward the physical
     right of the screen) in line with the landscaped image. */
  .hero-preview-modal--portrait-lock .hero-preview-modal-close {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    font-size: 0.78rem !important;
    padding: 0.38rem 0.95rem !important;
    min-height: 2.25rem !important;
    min-width: 4.25rem !important;
  }

  .hero-preview-modal--portrait-lock .hero-preview-modal-close:hover,
  .hero-preview-modal--portrait-lock .hero-preview-modal-close:focus-visible {
    transform: translateX(-50%) scale(1.03) !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .hero-preview-modal--landscape-lock .hero-preview-modal-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-preview-modal--landscape-lock .hero-preview-modal-panel,
  .hero-preview-modal--landscape-lock .hero-preview-modal-panel--landscape-lock {
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
    width: 100dvh !important;
    height: 100dvw !important;
    max-width: 100dvh !important;
    max-height: 100dvw !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .hero-preview-modal--landscape-lock .hero-preview-modal-media {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: visible !important;
  }

  .hero-preview-modal--landscape-lock .hero-preview-modal-image {
    /* Rotated panel: width maps to visual height — 90% of viewport height. */
    width: 90dvh !important;
    height: auto !important;
    max-width: 90dvh !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    transform: none !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  }

  .hero-preview-modal--landscape-lock .hero-preview-modal-x {
    top: 0.4rem !important;
    right: 0.4rem !important;
    transform: none !important;
  }

  .hero-preview-modal--landscape-lock .hero-preview-modal-x:hover,
  .hero-preview-modal--landscape-lock .hero-preview-modal-x:focus-visible {
    transform: scale(1.06) !important;
  }

  .hero-preview-modal--landscape-lock .hero-preview-modal-close {
    position: absolute !important;
    left: 50% !important;
    bottom: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
  }

  .hero-preview-modal--landscape-lock .hero-preview-modal-close:hover,
  .hero-preview-modal--landscape-lock .hero-preview-modal-close:focus-visible {
    transform: translateX(-50%) scale(1.03) !important;
  }
}

/* =====================================================================
   Item 13 (cb20260530l) — mobile search-result cards (≤768px).
   site.css keeps .course-list-grid .results-grid on auto-fit minmax(280px,1fr)
   and style.css sets .golf-course-card { min-width: 280px } below 600px. On
   phones that still render two narrow columns, cards overflow their track and
   overflow-x:hidden clips the photo + "View in 3D" badge on the right. Force
   one full-width column, zero min-width, and stretch the photo edge-to-edge.
   ===================================================================== */
@media (max-width: 768px) {
  /* Keep the "Powered By Google" helper on a single line on phones. */
  body.home-page .gp-cin-helper {
    font-size: 0.62rem !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }

  body.home-page #search-container .results-grid,
  body.home-page #search-container .course-list-grid .results-grid,
  body.home-page #results .results-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    justify-items: center !important;
  }

  body.home-page #search-container .course-list-grid,
  body.home-page #results.course-list-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home-page #search-container .golf-course-card,
  body.home-page .course-list-grid .golf-course-card,
  body.home-page .results-grid.single-result .golf-course-card {
    width: min(94vw, 520px) !important;
    max-width: min(94vw, 520px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home-page .golf-course-card .cin-card-photo {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
  }

  body.home-page .golf-course-card .cin-card-photo img {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Keep both action buttons fully inside the card; allow them to wrap to a
     second row on very narrow phones instead of being cut off on the right. */
  body.home-page .golf-course-card .course-card-buttons {
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
  }
  body.home-page .golf-course-card .course-card-buttons .card-action-btn {
    flex: 1 1 calc(50% - 0.45rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.home-page .golf-course-card .course-card-buttons .btn-action-line {
    white-space: normal !important;
  }

  /* "View in 3D" badge — fully inside the photo, never clipped on the right. */
  body.home-page .cin-view3d-badge {
    right: 8px !important;
    left: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* Very narrow phones: stack the two action buttons so neither is clipped. */
@media (max-width: 380px) {
  body.home-page .golf-course-card .course-card-buttons .card-action-btn {
    flex: 1 1 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO REDESIGN — cinematic, single centered column, one message + one action.
   Appended LAST so these rules win over the earlier 2-column hero styles via
   equal specificity + source order. Preserves all existing DOM/JS hooks:
   headline, course pills, primary CTA, demo preview, feedback + social row.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Responsive copy: shorter headline / subtitle / CTA on phones. */
.hero-title-primary-mobile { display: none; }
.hero-cta-text-mobile { display: none; }
@media (max-width: 767px) {
  .hero-title-primary-desktop { display: none; }
  .hero-title-primary-mobile { display: inline; }
  .hero-cta-text-desktop { display: none; }
  .hero-cta-text-mobile { display: inline; }
}

/* Shared: collapse the old 2-column grid into a single centered column and
   let the left/right wrappers pass their children straight into the flex flow
   so we can order everything with a single vertical rhythm. */
body.home-page .hero-cin-wrap.gp-cin-hero-panel,
body.home-page .gp-cin-hero-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  text-align: center !important;
  max-width: 1120px !important;
}

body.home-page .hero-cin-left,
body.home-page .hero-cin-right {
  display: contents !important;
}

/* Headline sits directly on the darkened image — no inner box. */
body.home-page .hero-cin-headline {
  order: 1 !important;
  width: 100% !important;
  max-width: 940px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.home-page .hero-cin-section .hero-cin-left .hero-title,
body.home-page .hero-cin-headline .hero-title {
  text-wrap: balance !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

body.home-page .hero-cin-headline .hero-title-line {
  text-wrap: balance !important;
}

body.home-page .hero-cin-section .hero-cin-left .hero-desc,
body.home-page .hero-cin-headline .hero-desc {
  color: rgba(255, 255, 255, 0.9) !important;
  text-wrap: balance !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ── Desktop / tablet (>=768px) ─────────────────────────────── */
@media (min-width: 768px) {
  body.home-page .hero-cin-section,
  body.home-page .hero-cin-section.ds-hero,
  body.home-page .hero-cin-section.hero {
    padding: 1rem 1.5rem 1.25rem !important;
  }

  body.home-page .hero-cin-wrap.gp-cin-hero-panel,
  body.home-page .gp-cin-hero-panel {
    width: min(100% - 3rem, 1120px) !important;
    padding: clamp(2.25rem, 4.5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem) !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    align-items: center !important;
    /* Stronger dark overlay so white text reads clearly over the bright course. */
    background:
      linear-gradient(180deg, rgba(3, 10, 6, 0.60) 0%, rgba(3, 10, 6, 0.46) 42%, rgba(3, 10, 6, 0.66) 100%),
      radial-gradient(130% 120% at 50% 38%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.55) 100%),
      url("/images/hero_desktop.png") center 40% / cover no-repeat !important;
  }

  body.home-page .hero-cin-headline {
    padding: 0 !important;
    margin: 0 auto !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-title,
  body.home-page .hero-cin-headline .hero-title {
    font-size: clamp(2rem, 3.6vw, 3rem) !important;
    line-height: 1.05 !important;
    gap: 0.06em !important;
  }

  body.home-page .hero-cin-headline .hero-title-line--primary {
    font-size: 0.86em !important;
    white-space: normal !important;
  }

  body.home-page .hero-cin-headline .hero-title-line--secondary {
    font-size: 1em !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-desc,
  body.home-page .hero-cin-headline .hero-desc {
    font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
    line-height: 1.5 !important;
    max-width: 720px !important;
    margin: 0.9rem auto 0 !important;
  }

  /* Course pills — secondary, evenly spaced under the supporting line. */
  body.home-page .hero-cin-section #home-movie-course-btns,
  body.home-page .hero-cin-left .home-preview-tour-links {
    order: 2 !important;
    max-width: 760px !important;
    margin: 1.35rem auto 0 !important;
    gap: 0.6rem !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  body.home-page .hero-cin-section #home-movie-course-btns .movie-course-btn,
  body.home-page .hero-cin-section #home-movie-course-btns a.movie-course-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 46px !important;
    font-size: 0.82rem !important;
    padding: 0.5rem 1.05rem !important;
    background: rgba(11, 31, 22, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* Primary CTA — the obvious action. Reset the old absolute placement used by
     the 2-column layout so it flows centered under the pills. */
  body.home-page .hero-primary-cta,
  body.home-page .hero-cin-right .hero-primary-cta,
  body.home-page .hero-cin-section .hero-cin-right .hero-primary-cta {
    order: 3 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 1.6rem auto 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 420px !important;
    padding: 0.95rem 2.4rem !important;
    font-size: 1.12rem !important;
    letter-spacing: 0.02em !important;
  }

  body.home-page .hero-primary-cta:hover,
  body.home-page .hero-primary-cta:focus,
  body.home-page .hero-cin-right .hero-primary-cta:hover,
  body.home-page .hero-cin-right .hero-primary-cta:focus,
  body.home-page .hero-cin-section .hero-cin-right .hero-primary-cta:hover,
  body.home-page .hero-cin-section .hero-cin-right .hero-primary-cta:focus {
    transform: translateY(-2px) scale(1.02) !important;
  }

  /* Demo preview — supporting product visual, secondary to the CTA.
     4-class selector to beat the earlier `.hero-cin-section .hero-cin-right`
     desktop rules that stretch the frame full width. */
  body.home-page .hero-cin-section .home-video-frame,
  body.home-page .hero-cin-section .hero-cin-right .home-video-frame {
    order: 4 !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 1.6rem auto 0 !important;
    transform: none !important;
  }

  /* Feedback + social — quiet secondary row at the very bottom of the hero,
     kept out of the headline/CTA flow. */
  body.home-page .hero-cin-section .hero-social-row-wrap,
  body.home-page .hero-cin-section .hero-cin-left .hero-social-row-wrap {
    order: 5 !important;
    margin: 1.5rem auto 0 !important;
    opacity: 0.92 !important;
  }
}

/* Real desktop: keep the long primary line on one line (fits comfortably). */
@media (min-width: 901px) {
  body.home-page .hero-cin-headline .hero-title-line--primary {
    white-space: nowrap !important;
  }
}

/* ── Phones (<=767px) ───────────────────────────────────────── */
@media (max-width: 767px) {
  body.home-page .hero-cin-section,
  body.home-page .hero-cin-section.ds-hero,
  body.home-page .hero-cin-section.hero {
    padding: 0.5rem 0.6rem 0.65rem !important;
  }

  body.home-page .hero-cin-wrap.gp-cin-hero-panel,
  body.home-page .gp-cin-hero-panel {
    width: calc(100% - 1.5rem) !important;
    padding: 1.6rem 1.15rem 1.5rem !important;
    row-gap: 0 !important;
    min-height: 0 !important;
    background:
      linear-gradient(180deg, rgba(3, 10, 6, 0.55) 0%, rgba(3, 10, 6, 0.42) 45%, rgba(3, 10, 6, 0.68) 100%),
      url("/images/hero_cellphone.png") center center / cover no-repeat !important;
  }

  body.home-page .hero-cin-headline {
    order: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-title,
  body.home-page .hero-cin-headline .hero-title {
    font-size: clamp(1.65rem, 7.5vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.015em !important;
  }

  body.home-page .hero-cin-headline .hero-title-line--primary,
  body.home-page .hero-cin-headline .hero-title-line--secondary {
    font-size: 1em !important;
    white-space: normal !important;
  }

  /* Short supporting sentence — wraps cleanly, never dominates the headline. */
  body.home-page .hero-cin-section .hero-cin-left .hero-desc,
  body.home-page .hero-cin-headline .hero-desc {
    font-size: clamp(0.9rem, 3.8vw, 1.02rem) !important;
    line-height: 1.42 !important;
    white-space: normal !important;
    max-width: 32ch !important;
    margin: 0.7rem auto 0 !important;
  }

  /* Primary CTA — full-width, the first action after the headline. */
  body.home-page .hero-primary-cta,
  body.home-page .hero-cin-right .hero-primary-cta,
  body.home-page .hero-cin-section .hero-cin-right .hero-primary-cta {
    order: 2 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 340px !important;
    min-width: 0 !important;
    margin: 1.05rem auto 0 !important;
    padding: 0.9rem 1.2rem !important;
    font-size: 1.02rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
  }

  /* Course pills — easy-tap 2-column grid under the CTA. */
  body.home-page .hero-cin-section #home-movie-course-btns,
  body.home-page .hero-cin-left .home-preview-tour-links {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 1rem auto 0 !important;
  }

  body.home-page .hero-cin-section #home-movie-course-btns .movie-course-btn,
  body.home-page .hero-cin-section #home-movie-course-btns a.movie-course-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 46px !important;
    font-size: 0.78rem !important;
    padding: 0.45rem 0.6rem !important;
    margin: 0 !important;
    background: rgba(11, 31, 22, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
  }

  /* Demo preview kept accessible, sits last and modest. */
  body.home-page .hero-cin-section .home-video-frame,
  body.home-page .hero-cin-section .hero-cin-right .home-video-frame {
    order: 4 !important;
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    margin: 1.1rem auto 0 !important;
  }

  /* Feedback + social icons removed from the mobile hero entirely (still in
     the footer / reachable elsewhere) so the hero stays calm and uncrowded. */
  body.home-page .hero-cin-section .hero-social-row-wrap {
    display: none !important;
  }
}