/*
 * 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;
}

/* ── 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;
}

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;
}

@media (min-width: 768px) {
  body.home-page .hero-cin-headline .hero-title-line--primary {
    white-space: nowrap !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: 700 !important;
  margin: 0.3rem 0 0 !important;
  max-width: 42ch !important;
  line-height: 1.35 !important;
  letter-spacing: 0.015em !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.88),
    0 0 1px rgba(0, 0, 0, 0.8) !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 #2d6a4f !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: #52b788 !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;
}

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;
  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: cover !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !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;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: inherit !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  aspect-ratio: auto !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; }
@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 {
    align-items: start !important;
    padding: 0.58rem 1.35rem 0.42rem !important;
    column-gap: 1.1rem !important;
    row-gap: 0.38rem !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.35rem !important;
    align-self: start !important;
  }

  body.home-page .hero-cin-right .home-video-frame {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }

  /* Keep the right-column stack compact — frame, link, and image share one height
     so object-fit:cover fills the rounded frame with no letterbox bars. */
  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 {
    height: 148px !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: cover !important;
  }

  body.home-page .hero-cin-right .hero-primary-cta {
    margin: 1.05rem auto 0 !important;
    width: auto !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.92rem !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;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 0.88rem !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;
  }

  body.home-page .hero-cin-section .hero-cin-left .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home svg {
    width: 14px !important;
    height: 14px !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;
}

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;
}

body.home-page .gp-cin-search-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !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.58) !important;
  font-size: 0.9rem !important;
  margin: 0 auto !important;
  line-height: 1.4 !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 640px !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-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 .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.25rem 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 {
  margin: 0 !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 #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.1) !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: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);
}

/* 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;
}

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;
}

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 .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;
    /* Task 7: a bit wider so the search area below needs less scrolling. */
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    margin: 0.45rem auto 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45) !important;
  }

  /* Mobile: scale preview at native 16:9 — fixed 146px height made the frame
     wider than the image, so object-fit:cover cropped the left/right edges. */
  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: cover !important;
    object-position: center 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;
  }

  body.home-page .hero-cin-section .hero-social-row-wrap {
    order: 5 !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    margin: 0.35rem auto 0 !important;
    width: 100% !important;
  }

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

  body.home-page .hero-cin-section .hero-social-row-wrap .gp-feedback-trigger.gp-feedback-home {
    order: 2 !important;
  }

  body.home-page .hero-cin-section,
  body.home-page .hero-cin-section.ds-hero {
    padding: 0.5rem 0 0.35rem !important;
  }

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

  /* 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 .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;
  }

  body.home-page .gp-cin-search-title .gp-search-title-line {
    display: block !important;
  }

  body.home-page .gp-cin-search-title .gp-search-title-line + .gp-search-title-line::before {
    content: none !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: 0.8125rem !important;
    font-weight: 700 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    margin: 0.22rem 0 0 !important;
    letter-spacing: 0.02em !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.35rem !important;
    margin: 0.25rem auto 0 !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.4rem !important;
    margin: 0 !important;
  }

  body.home-page .hero-cin-section .hero-social-media a {
    width: 28px !important;
    height: 28px !important;
  }

  body.home-page .hero-cin-section .hero-social-media svg {
    width: 13px !important;
    height: 13px !important;
  }

  body.home-page .gp-cin-search-title,
  body.home-page .gp-cin-search-card #searchTitle,
  body.home-page .home-search-wrap #searchTitle {
    font-size: 1.3rem !important;
    line-height: 1.18 !important;
    margin-bottom: 0.12rem !important;
  }

  body.home-page .gp-cin-search-subtitle,
  body.home-page .home-search-wrap .search-subtitle {
    font-size: 0.82rem !important;
    margin-bottom: 0.35rem !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;
  }

  body.home-page .gp-cin-input-column .gp-cin-helper {
    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) "Find golf courses near your current location."  (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 {
  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;
}

.hero-preview-modal-media {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 66.67vw !important;
  max-height: 66.67vh !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: 66.67vw !important;
  max-height: 66.67vh !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: auto !important;
  height: auto !important;
  max-width: 66.67vw !important;
  max-height: 66.67vh !important;
  object-fit: contain !important;
  aspect-ratio: 16 / 9 !important;
}

.hero-preview-modal-x {
  position: absolute !important;
  top: var(--hero-preview-x-top, 0.45rem) !important;
  right: var(--hero-preview-x-right, 0.45rem) !important;
  z-index: 2 !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(8, 18, 14, 0.82) !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-preview-modal-x:hover,
.hero-preview-modal-x:focus-visible {
  background: rgba(18, 36, 28, 0.95) !important;
  border-color: rgba(74, 222, 128, 0.55) !important;
}

.hero-preview-modal-close {
  margin: 0 !important;
  padding: 0.42rem 1.1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.hero-preview-modal-close:hover,
.hero-preview-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .hero-preview-modal {
    padding:
      max(0.5rem, env(safe-area-inset-top, 0px))
      max(0.5rem, env(safe-area-inset-right, 0px))
      max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 2.85rem))
      max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .hero-preview-modal-inner {
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-preview-modal-panel {
    gap: 0 !important;
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem
    ) !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-preview-modal-media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: min(90vw, calc(100dvw - 1rem)) !important;
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 3.75rem
    ) !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: rotate(90deg) !important;
    max-width: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 3.75rem
    ) !important;
    max-height: min(90vw, calc(100dvw - 1rem)) !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;
  }

  /* Task 3: the demo image is rotated 90° into a forced-landscape view on
     phones, so the close "X" is rotated 90° to match that orientation. It's
     also enlarged, given the Golfapedia green theme, and made easy to tap.
     The JS-set --hero-preview-x-* vars keep it pinned to the visible image
     corner (clear of browser UI / safe areas). */
  .hero-preview-modal-x {
    top: var(--hero-preview-x-top, 0.5rem) !important;
    right: var(--hero-preview-x-right, 0.5rem) !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    font-size: 1.75rem !important;
    border: 2px solid rgba(74, 222, 128, 0.85) !important;
    background: rgba(8, 18, 14, 0.92) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    transform: rotate(90deg) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .hero-preview-modal-x:hover,
  .hero-preview-modal-x:focus-visible {
    background: #1f6a4f !important;
    border-color: rgba(74, 222, 128, 1) !important;
    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%) !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;
  }
}

/* =====================================================================
   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) {
  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;
  }
}