/* ============================================================================
   HawaiiGuide Homepage Beta v1
   All selectors scoped under .hg-beta to prevent leaking to other pages.
   Uses px font sizes (site base is 1rem = 10px — never use rem for fonts).
   ============================================================================ */

.hg-beta {
  --hg-oahu: #F27A24;
  --hg-maui: #1866B4;
  --hg-big-island: #c3232f;
  --hg-kauai: #1D9771;
  --hg-green: #1b4332;
  --hg-green-mid: #2d6a4f;
  --hg-green-soft: #f0f7f4;
  --hg-cream: #faf8f3;
  --hg-ink: #1a1a1a;
  --hg-muted: #6b7280;
  --hg-border: #e5e7eb;
  --hg-radius: 16px;
  --hg-radius-lg: 24px;
  --hg-shadow: 0 4px 16px rgba(0,0,0,0.08);
  --hg-shadow-lg: 0 12px 32px rgba(0,0,0,0.14);
  font-family: inherit;
}

.hg-beta * { box-sizing: border-box; }
.hg-beta a { color: var(--hg-green); }

.hg-beta-section {
  padding: 80px 24px;
  /* The homepage main wrapper becomes a flex column for inline-hero ordering.
     Keep sections stretched before max-width centering so auto margins don't
     shrink flex items to their contents. */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.hg-beta-section-narrow {
  align-self: center;
  max-width: 1100px;
}
.hg-beta-section-header { text-align: center; margin-bottom: 48px; }
.hg-beta-eyebrow-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--hg-green);
  margin: 0 0 10px;
}
.hg-beta-section-title {
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--hg-ink);
  font-weight: 700;
}
.hg-beta-section-sub {
  font-size: 18px;
  color: var(--hg-muted);
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================================
   1. HERO — split layout (desktop) / stacked (mobile)
   ============================================================================ */

.hg-beta-hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 620px;
  background: var(--hg-cream);
  position: relative;
  margin: 0 0 20px;
  overflow: hidden;
}
.hg-beta-hero-text {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}
.hg-beta-hero-eyebrow {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--hg-oahu);
  margin: 0 0 18px;
}
.hg-beta-hero-title {
  font-family: Georgia, 'Playfair Display', serif;
  font-size: 112px;
  line-height: 0.92;
  font-weight: 700;
  color: var(--hg-ink);
  margin: 0 0 24px;
  letter-spacing: -3px;
}
.hg-beta-hero-sub {
  font-size: 22px;
  line-height: 1.45;
  color: #333;
  max-width: 480px;
  margin: 0 0 36px;
  font-weight: 400;
}
.hg-beta-hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 44px;
}
.hg-beta-btn-primary {
  display: inline-block;
  background: var(--hg-green);
  color: #fff !important;
  padding: 18px 36px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--hg-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: none;
  cursor: pointer;
}
.hg-beta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--hg-shadow-lg);
  background: var(--hg-green-mid);
}
.hg-beta-hero-link {
  font-size: 16px;
  color: var(--hg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hg-beta-hero-link:hover { color: var(--hg-ink); }
.hg-beta-hero-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--hg-muted);
}
.hg-beta-hero-trust img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: var(--hg-shadow);
}
.hg-beta-hero-trust strong {
  color: var(--hg-ink);
  font-weight: 700;
}

.hg-beta-hero-media {
  position: relative;
  overflow: hidden;
  background: #000;
}
.hg-beta-hero-media .video-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.hg-beta-hero-media .video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 101%;
  min-height: 101%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.hg-beta-aloha-watermark {
  position: absolute;
  bottom: 32px;
  left: 32px;
  z-index: 5;
  font-family: Georgia, 'Playfair Display', serif;
  font-style: italic;
  font-size: 56px;
  color: #fff;
  opacity: 0.85;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
  pointer-events: none;
  margin: 0;
  line-height: 1;
}

/* Tablet + mobile — stacked with video behind */
@media (max-width: 1023px) {
  .hg-beta-hero {
    display: block;
    min-height: 560px;
    background: #000;
    position: relative;
  }
  .hg-beta-hero-media {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
  }
  .hg-beta-hero-media::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
    pointer-events: none;
  }
  .hg-beta-hero-text {
    padding: 72px 32px 56px;
    min-height: 560px;
    color: #fff;
  }
  .hg-beta-hero-title,
  .hg-beta-hero-sub { color: #fff; }
  .hg-beta-hero-title { font-size: 80px; }
  .hg-beta-hero-sub { font-size: 18px; }
  .hg-beta-hero-link { color: rgba(255,255,255,0.85); }
  .hg-beta-hero-trust { color: rgba(255,255,255,0.85); }
  .hg-beta-hero-trust strong { color: #fff; }
  .hg-beta-aloha-watermark { display: none; }
}
@media (max-width: 600px) {
  .hg-beta-hero-title { font-size: 60px; letter-spacing: -2px; }
  .hg-beta-hero-sub { font-size: 17px; }
  .hg-beta-hero-text { padding: 56px 22px 44px; }
}

/* ============================================================================
   2. PICK YOUR ISLAND — 4 equal cards
   ============================================================================ */

.hg-beta-islands-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
#travel-guide.hg-beta-section {
  max-width: 1600px;
}
.hg-beta-island-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--hg-radius);
  overflow: hidden;
  box-shadow: var(--hg-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-top: 5px solid var(--hg-accent, var(--hg-green));
}
.hg-beta-island-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hg-shadow-lg);
}
.hg-beta-island-card[data-island="oahu"] { --hg-accent: var(--hg-oahu); }
.hg-beta-island-card[data-island="maui"] { --hg-accent: var(--hg-maui); }
.hg-beta-island-card[data-island="big-island"] { --hg-accent: var(--hg-big-island); }
.hg-beta-island-card[data-island="kauai"] { --hg-accent: var(--hg-kauai); }

.hg-beta-island-topo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #faf8f3;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
.hg-beta-island-topo img {
  width: 112%;
  max-width: none;
  height: 112%;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  border-radius: 0 !important;
  transition: transform 0.5s ease;
  filter: drop-shadow(0 6px 14px rgba(15, 35, 28, 0.12));
}
.hg-beta-island-card:hover .hg-beta-island-topo img {
  transform: scale(1.03) rotate(-0.5deg);
}

/* Per-island sizing — gentle geographic-proportion read across
   the card grid. Compressed from real-world (Big Island is ~7x
   Kauaʻi by area, which would look like a layout bug at uniform
   card sizes), tuned by eye so Kauaʻi reads smallest and Big
   Island reads largest without any card feeling skimpy. Big
   Island carries its weight visually from the dramatic volcanic
   terrain rendering even where its CSS width matches Maui's. */
.hg-beta-island-card[data-island="kauai"]      .hg-beta-island-topo img { width: 105%; height: 105%; }
.hg-beta-island-card[data-island="oahu"]       .hg-beta-island-topo img { width: 110%; height: 110%; }
.hg-beta-island-card[data-island="maui"]       .hg-beta-island-topo img { width: 112%; height: 112%; }
/* Big Island defaults to width: 112% / height: 112% from the base rule */
.hg-beta-island-body {
  padding: 22px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hg-beta-island-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--hg-accent);
  line-height: 1.1;
}
.hg-beta-island-name i {
  flex: 0 0 auto;
  font-size: 31px;
  line-height: 1;
  color: var(--hg-accent);
}
.hg-beta-island-name span {
  min-width: 0;
}
.hg-beta-island-stat {
  font-size: 14px;
  color: var(--hg-muted);
  margin: 0 0 18px;
  line-height: 1.4;
  flex: 1;
}
.hg-beta-island-cta {
  display: inline-block;
  padding: 10px 20px;
  background: var(--hg-accent);
  color: #fff !important;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 14px;
  align-self: flex-start;
  transition: opacity 0.15s ease;
}
.hg-beta-island-card:hover .hg-beta-island-cta { opacity: 0.92; }
.hg-beta-island-links {
  display: flex;
  gap: 14px;
  font-size: 13px;
  border-top: 1px solid var(--hg-border);
  padding-top: 12px;
}
.hg-beta-island-links span {
  color: var(--hg-muted);
  text-decoration: none;
}
@media (max-width: 1023px) {
  .hg-beta-islands-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .hg-beta-islands-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   3. PLAN YOUR TRIP — 4 tool tiles
   ============================================================================ */

.hg-beta-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hg-beta-tool {
  display: block;
  background: #fff;
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius);
  padding: 32px 24px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  text-align: left;
}
.hg-beta-tool:hover {
  border-color: var(--hg-green);
  box-shadow: var(--hg-shadow);
  transform: translateY(-3px);
}
.hg-beta-tool-icon {
  font-size: 34px;
  color: var(--hg-green);
  margin-bottom: 18px;
  display: block;
  line-height: 1;
}
.hg-beta-tool-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--hg-ink);
}
.hg-beta-tool-desc {
  font-size: 15px;
  color: var(--hg-muted);
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 1023px) {
  .hg-beta-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hg-beta-tools-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   4. WHAT'S HAPPENING NOW — dynamic strip
   ============================================================================ */

.hg-beta-now {
  background: linear-gradient(135deg, #f0f7f4 0%, #e8f2ec 100%);
  border-radius: var(--hg-radius-lg);
  padding: 40px 32px;
  max-width: 100%;
  margin: 0 auto;
}
.hg-beta-now-title {
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--hg-green);
  margin: 0 0 24px;
  font-weight: 700;
}
.hg-beta-now-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.hg-beta-now-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.15s ease;
  border-left: 4px solid var(--hg-green);
}
.hg-beta-now-chip:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.hg-beta-now-chip[data-status="alert"] { border-left-color: #d97706; }
.hg-beta-now-chip[data-status="active"] { border-left-color: #059669; }
.hg-beta-now-chip[data-status="inactive"] { border-left-color: #cbd5e1; }
.hg-beta-now-icon {
  font-size: 26px;
  color: var(--hg-green);
  flex-shrink: 0;
  line-height: 1;
}
.hg-beta-now-chip[data-status="alert"] .hg-beta-now-icon { color: #d97706; }
.hg-beta-now-chip[data-status="active"] .hg-beta-now-icon { color: #059669; }
.hg-beta-now-chip[data-status="inactive"] .hg-beta-now-icon { color: #94a3b8; }
.hg-beta-now-text {
  flex: 1;
  min-width: 0;
}
.hg-beta-now-label {
  font-size: 11px;
  color: var(--hg-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 2px;
  font-weight: 700;
}
.hg-beta-now-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--hg-ink);
  margin: 0;
  line-height: 1.3;
}
.hg-beta-now-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 6px;
  vertical-align: middle;
  animation: hg-beta-pulse 2s ease-in-out infinite;
}
.hg-beta-now-chip[data-status="alert"] .hg-beta-now-dot { background: #d97706; }
.hg-beta-now-chip[data-status="inactive"] .hg-beta-now-dot {
  background: #cbd5e1;
  animation: none;
}
@keyframes hg-beta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}
@media (max-width: 1100px) {
  .hg-beta-now-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .hg-beta-now-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hg-beta-now-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hg-beta-now { padding: 28px 20px; }
  .hg-beta-now-chip {
    align-items: flex-start;
    gap: 9px;
    padding: 14px 12px;
    min-width: 0;
  }
  .hg-beta-now-icon { font-size: 20px; }
  .hg-beta-now-label { font-size: 10px; letter-spacing: 0.8px; }
  .hg-beta-now-value { font-size: 13px; }
}

/* ============================================================================
   5. LATEST FROM THE BLOG — recent + trending cards
   ============================================================================ */

.hg-beta-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hg-beta-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--hg-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--hg-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hg-beta-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hg-shadow-lg);
}
.hg-beta-blog-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 62%;
  overflow: hidden;
  background: #f4f4f4;
}
.hg-beta-blog-img-wrap img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Override site-wide `img { border-radius: 10px }` in 04-08-25-v1.css —
     the card's own overflow:hidden + border-radius handles the rounded
     top corners; the image bottom meets the card body flush. Specificity
     (0,1,1) beats the global (0,0,1) cleanly without !important. */
  border-radius: 0;
  transition: transform 0.5s ease;
}
.hg-beta-blog-card:hover .hg-beta-blog-img-wrap img {
  transform: scale(1.06);
}
.hg-beta-blog-body {
  padding: 22px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hg-beta-blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hg-muted);
  font-weight: 700;
}
.hg-beta-blog-category {
  background: var(--hg-green-soft);
  color: var(--hg-green);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.hg-beta-blog-title {
  font-size: 19px;
  line-height: 1.32;
  font-weight: 700;
  margin: 0;
  color: var(--hg-ink);
}
.hg-beta-blog-cta-wrap {
  text-align: center;
  margin-top: 48px;
}
.hg-beta-btn-outline {
  display: inline-block;
  padding: 15px 34px;
  border: 2px solid var(--hg-green);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: var(--hg-green) !important;
  text-decoration: none;
  background: transparent;
  transition: all 0.15s ease;
}
.hg-beta-btn-outline:hover {
  background: var(--hg-green);
  color: #fff !important;
}
@media (max-width: 1023px) {
  .hg-beta-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .hg-beta-blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   6. MALAMA HAWAIʻI
   ============================================================================ */

.hg-beta-malama-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.hg-beta-malama {
  position: relative;
  border-radius: var(--hg-radius-lg);
  overflow: hidden;
  padding: 120px 40px;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hg-beta-malama::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10,40,25,0.55) 0%, rgba(10,30,20,0.82) 100%);
}
.hg-beta-malama-inner {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}
.hg-beta-malama-eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.75);
  margin: 0 0 14px;
  font-weight: 700;
}
.hg-beta-malama h2 {
  font-family: Georgia, 'Playfair Display', serif;
  font-size: 48px;
  margin: 0 0 22px;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -1px;
}
.hg-beta-malama p {
  font-size: 19px;
  line-height: 1.65;
  margin: 0 0 28px;
  color: rgba(255,255,255,0.92);
}
.hg-beta-malama a.hg-beta-malama-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
  font-size: 16px;
}
@media (max-width: 768px) {
  .hg-beta-malama { padding: 72px 28px; }
  .hg-beta-malama h2 { font-size: 34px; }
  .hg-beta-malama p { font-size: 17px; }
}

/* ============================================================================
   7. ABOUT / TRUST / SIGNUP (merged)
   ============================================================================ */

.hg-beta-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.hg-beta-about-photo {
  text-align: center;
}
.hg-beta-about-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}
.hg-beta-about-text h2 {
  font-size: 36px;
  margin: 0 0 16px;
  color: var(--hg-ink);
  font-weight: 700;
  line-height: 1.15;
}
.hg-beta-about-text p {
  font-size: 17px;
  line-height: 1.65;
  color: #333;
  margin: 0 0 22px;
}
.hg-beta-about-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.hg-beta-about-byline img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--hg-green-soft);
}
.hg-beta-about-byline-text {
  font-size: 14px;
  line-height: 1.3;
}
.hg-beta-about-byline-text strong {
  display: block;
  font-size: 16px;
  color: var(--hg-ink);
}
.hg-beta-about-byline-text span { color: var(--hg-muted); }
.hg-beta-about-stats {
  display: flex;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--hg-border);
  border-bottom: 1px solid var(--hg-border);
  margin: 0 0 8px;
}
.hg-beta-about-stat { flex: 1; }
.hg-beta-about-stat strong {
  display: block;
  font-size: 24px;
  color: var(--hg-green);
  margin-bottom: 4px;
  font-weight: 700;
}
.hg-beta-about-stat span {
  font-size: 12px;
  color: var(--hg-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.hg-beta-signup {
  background: var(--hg-green-soft);
  border-radius: var(--hg-radius);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.hg-beta-signup h3 {
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--hg-ink);
  font-weight: 700;
}
.hg-beta-signup p.hg-beta-signup-sub {
  font-size: 15px;
  color: var(--hg-muted);
  margin: 0 0 24px;
  line-height: 1.4;
}
.hg-beta-signup-field {
  margin-bottom: 12px;
  text-align: left;
}
.hg-beta-signup-field label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--hg-muted);
  margin-bottom: 6px;
  font-weight: 700;
}
.hg-beta-signup-field input,
.hg-beta-signup-field select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--hg-border);
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
  color: var(--hg-ink);
  font-family: inherit;
}
.hg-beta-signup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hg-beta-signup button[type="submit"] {
  width: 100%;
  margin-top: 14px;
  padding: 16px 24px;
  background: var(--hg-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hg-beta-signup button[type="submit"]:hover {
  background: var(--hg-green-mid);
  transform: translateY(-1px);
}
.hg-beta-signup-note {
  font-size: 12px;
  color: var(--hg-muted);
  margin: 14px 0 0;
}
@media (max-width: 1100px) {
  .hg-beta-about { grid-template-columns: 1fr; gap: 40px; }
  .hg-beta-about-photo,
  .hg-beta-about-text {
    grid-column: 1 / -1;
  }
  .hg-beta-about-photo {
    text-align: left !important;
  }
  .hg-beta-about-img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .hg-beta-about-photo { text-align: center !important; }
  .hg-beta-about-img {
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}
@media (max-width: 600px) {
  .hg-beta-about-signal {
    padding-top: 42px;
    padding-bottom: 42px;
  }
  .hg-beta-about {
    gap: 20px;
  }
  .hg-beta-about-img { border-radius: 12px; }
  .hg-beta-about-photo p {
    margin-top: 10px !important;
    font-size: 12px !important;
  }
  .hg-beta-about-text h2 {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .hg-beta-about-text p {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .hg-beta-about-stats {
    gap: 10px;
    padding: 14px 0;
  }
  .hg-beta-about-stat strong {
    font-size: 18px;
  }
  .hg-beta-about-stat span {
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  .hg-beta-signup-row { grid-template-columns: 1fr; }
  .hg-beta-signup { padding: 32px 22px; }
}

/* ============================================================================
   1.5 FOUR HAWAIIS — full-bleed photo band, emotional chooser right after hero
   ============================================================================ */

.hg-beta .hg-beta-vibe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  max-width: 100%;
}

.hg-beta-vibe-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  background: #111;
  isolation: isolate;
}

.hg-beta-vibe-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transition: transform 0.7s ease;
  z-index: 1;
  will-change: transform;
}

.hg-beta-vibe-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 72%, rgba(0,0,0,0.88) 100%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hg-beta-vibe-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 28px 28px 28px;
  color: #fff;
}

.hg-beta-vibe-name {
  font-family: Georgia, 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.hg-beta-vibe-name::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  margin-top: 14px;
  background: #fff;
  opacity: 0.95;
  transition: width 0.3s ease;
}
.hg-beta-vibe-card[data-island="oahu"] .hg-beta-vibe-name::after { background: var(--hg-oahu); }
.hg-beta-vibe-card[data-island="maui"] .hg-beta-vibe-name::after { background: var(--hg-maui); }
.hg-beta-vibe-card[data-island="big-island"] .hg-beta-vibe-name::after { background: var(--hg-big-island); }
.hg-beta-vibe-card[data-island="kauai"] .hg-beta-vibe-name::after { background: var(--hg-kauai); }

.hg-beta-vibe-tag {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin: 14px 0 0;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}

.hg-beta-vibe-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.hg-beta-vibe-card:hover .hg-beta-vibe-photo { transform: scale(1.06); }
.hg-beta-vibe-card:hover::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 68%, rgba(0,0,0,0.92) 100%);
}
.hg-beta-vibe-card:hover .hg-beta-vibe-cta {
  opacity: 1;
  transform: translateY(0);
}
.hg-beta-vibe-card:hover .hg-beta-vibe-name::after { width: 72px; }

.hg-beta-vibe-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

@media (max-width: 1023px) {
  .hg-beta .hg-beta-vibe { grid-template-columns: repeat(2, 1fr); }
  .hg-beta-vibe-card { aspect-ratio: 4 / 5; }
  .hg-beta-vibe-name { font-size: 36px; }
  .hg-beta-vibe-tag { font-size: 18px; }
  .hg-beta-vibe-cta { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .hg-beta-vibe-card { aspect-ratio: 3 / 4; }
  .hg-beta-vibe-body { padding: 20px 20px 22px; }
  .hg-beta-vibe-name { font-size: 30px; }
  .hg-beta-vibe-name::after { width: 38px; height: 3px; margin-top: 10px; }
  .hg-beta-vibe-tag { font-size: 16px; margin-top: 10px; }
  .hg-beta-vibe-cta { font-size: 12px; margin-top: 10px; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-beta-vibe-photo,
  .hg-beta-vibe-card::after,
  .hg-beta-vibe-cta,
  .hg-beta-vibe-name::after { transition: none; }
  .hg-beta-vibe-card:hover .hg-beta-vibe-photo { transform: none; }
}

/* ============================================================================
   Tools Made for Hawai'i — 16-tile feature showcase
   4 categorized rows. Modern card design with category-tinted accents.
   ============================================================================ */

.hg-beta-toolshow {
  background:
    radial-gradient(circle at 0% 0%, rgba(29,151,113,0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(24,102,180,0.05), transparent 50%),
    var(--hg-cream);
  border-radius: var(--hg-radius-lg);
  padding-top: 72px;
  padding-bottom: 72px;
  width: calc(100% - 48px);
  max-width: 1232px;
  margin-left: auto;
  margin-right: auto;
}
.hg-beta-toolshow-header { position: relative; padding-top: 8px; }
.hg-beta-toolshow-bloom {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto 14px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 10px rgba(15, 35, 28, 0.15));
  user-select: none;
  pointer-events: none;
}
@media (max-width: 560px) {
  .hg-beta-toolshow-bloom { width: 52px; margin-bottom: 10px; }
}
.hg-beta-toolrow {
  margin: 0 0 36px;
}
.hg-beta-toolrow:last-of-type { margin-bottom: 0; }
.hg-beta-toolrow-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--hg-green);
  margin: 0 0 18px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--hg-border);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hg-beta-toolrow[data-tier="match"] .hg-beta-toolrow-label { color: #1866B4; }
.hg-beta-toolrow[data-tier="budget"] .hg-beta-toolrow-label { color: #8a5b10; }
.hg-beta-toolrow[data-tier="trip"]  .hg-beta-toolrow-label { color: #c3232f; }
.hg-beta-toolgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hg-beta-toolcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid var(--hg-border);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
.hg-beta-toolcard::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--hg-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.hg-beta-toolcard:hover,
.hg-beta-toolcard:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 35, 28, 0.10);
  border-color: rgba(29,151,113,0.35);
}
.hg-beta-toolcard:hover::before,
.hg-beta-toolcard:focus-visible::before { transform: scaleX(1); }
.hg-beta-toolrow[data-tier="match"] .hg-beta-toolcard::before { background: #1866B4; }
.hg-beta-toolrow[data-tier="budget"] .hg-beta-toolcard::before { background: #8a5b10; }
.hg-beta-toolrow[data-tier="trip"]  .hg-beta-toolcard::before { background: #c3232f; }
.hg-beta-toolrow[data-tier="match"] .hg-beta-toolcard:hover { border-color: rgba(24,102,180,0.35); }
.hg-beta-toolrow[data-tier="budget"] .hg-beta-toolcard:hover { border-color: rgba(138,91,16,0.35); }
.hg-beta-toolrow[data-tier="trip"]  .hg-beta-toolcard:hover { border-color: rgba(195,35,47,0.35); }
.hg-beta-toolcard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(29,151,113,0.10);
  color: var(--hg-green);
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
.hg-beta-toolrow[data-tier="match"] .hg-beta-toolcard-icon {
  background: rgba(24,102,180,0.10);
  color: #1866B4;
}
.hg-beta-toolrow[data-tier="budget"] .hg-beta-toolcard-icon {
  background: rgba(138,91,16,0.10);
  color: #8a5b10;
}
.hg-beta-toolrow[data-tier="trip"] .hg-beta-toolcard-icon {
  background: rgba(195,35,47,0.10);
  color: #c3232f;
}
.hg-beta-toolcard-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--hg-ink);
  line-height: 1.25;
}
.hg-beta-toolcard-desc {
  font-size: 14px;
  color: var(--hg-muted);
  margin: 0;
  line-height: 1.45;
  flex: 1;
}
.hg-beta-toolcard-cta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--hg-green);
  margin-top: 4px;
  transition: transform 0.18s ease;
}
.hg-beta-toolrow[data-tier="match"] .hg-beta-toolcard-cta { color: #1866B4; }
.hg-beta-toolrow[data-tier="budget"] .hg-beta-toolcard-cta { color: #8a5b10; }
.hg-beta-toolrow[data-tier="trip"]  .hg-beta-toolcard-cta { color: #c3232f; }
.hg-beta-toolcard:hover .hg-beta-toolcard-cta { transform: translateX(3px); }
.hg-beta-toolcard-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
  color: #fff;
  line-height: 1;
}
.hg-beta-toolshow-foot {
  text-align: center;
  margin-top: 36px;
}
.hg-beta-toolshow-foot .hg-beta-btn-outline { font-size: 15px; }

@media (max-width: 1023px) {
  .hg-beta-toolgrid { grid-template-columns: repeat(2, 1fr); }
  .hg-beta-toolshow {
    padding-top: 56px;
    padding-bottom: 56px;
    width: calc(100% - 32px);
  }
}
@media (max-width: 560px) {
  .hg-beta-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hg-beta-toolcard {
    gap: 7px;
    min-width: 0;
    padding: 16px 14px 15px;
  }
  .hg-beta-toolcard-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 18px;
    margin-bottom: 3px;
  }
  .hg-beta-toolcard-title { font-size: 15px; }
  .hg-beta-toolcard-desc { font-size: 12px; line-height: 1.35; }
  .hg-beta-toolcard-cta { font-size: 11px; line-height: 1.25; }
  .hg-beta-toolcard-badge {
    top: 12px;
    right: 12px;
    font-size: 9px;
    padding: 4px 7px;
  }
  .hg-beta-toolrow { margin-bottom: 28px; }
  .hg-beta-toolrow-label { font-size: 11px; padding: 5px 12px; letter-spacing: 1.5px; }
  .hg-beta-toolshow { width: calc(100% - 24px); padding: 44px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-beta-toolcard,
  .hg-beta-toolcard::before,
  .hg-beta-toolcard-cta { transition: none; }
  .hg-beta-toolcard:hover { transform: none; }
}

/* ============================================================================
   Book the Trip — commercial-intent bento grid
   Tours card spans 2x2 as the hero; Luaus / Hotels / Vacation Packages /
   Cruises tile around it as a 2x2 sub-grid. Lighter gradient + larger
   typography on the hero, sliding-arrow micro-interaction on the small cards.
   ============================================================================ */

.hg-beta-bookshow { padding-top: 56px; padding-bottom: 56px; }
.hg-beta-bookgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.hg-beta-bookcard {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #1b4332;
  isolation: isolate;
  box-shadow: 0 8px 22px rgba(15, 35, 28, 0.10);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hg-beta-bookcard:hover,
.hg-beta-bookcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15, 35, 28, 0.18);
}
.hg-beta-bookcard--hero {
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: auto;
  min-height: 100%;
}
.hg-beta-bookcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, filter 0.4s ease;
  z-index: 0;
}
.hg-beta-bookcard:hover img,
.hg-beta-bookcard:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1.12);
}
.hg-beta-bookcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 35, 28, 0.78) 0%,
    rgba(15, 35, 28, 0.45) 28%,
    rgba(15, 35, 28, 0.05) 55%,
    rgba(15, 35, 28, 0) 80%
  );
  z-index: 1;
  transition: opacity 0.25s ease;
}
.hg-beta-bookcard--hero::after {
  background: linear-gradient(
    to top,
    rgba(15, 35, 28, 0.82) 0%,
    rgba(15, 35, 28, 0.35) 38%,
    rgba(15, 35, 28, 0.05) 65%,
    rgba(15, 35, 28, 0) 85%
  );
}
.hg-beta-bookcard-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px 20px;
  z-index: 2;
}
.hg-beta-bookcard--hero .hg-beta-bookcard-overlay {
  padding: 32px 36px 34px;
}
.hg-beta-bookcard-meta {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 6px;
}
.hg-beta-bookcard--hero .hg-beta-bookcard-meta {
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: #f9c97a;
}
.hg-beta-bookcard-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #fff;
  line-height: 1.18;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.hg-beta-bookcard--hero .hg-beta-bookcard-title {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
  display: block;
}
.hg-beta-bookcard-arrow {
  display: inline-block;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hg-beta-bookcard:hover .hg-beta-bookcard-arrow,
.hg-beta-bookcard:focus-visible .hg-beta-bookcard-arrow {
  opacity: 1;
  transform: translateX(0);
}
.hg-beta-bookcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  background: rgba(255, 255, 255, 0.96);
  color: #1b4332;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.hg-beta-bookcard-cta span {
  display: inline-block;
  transition: transform 0.25s ease;
}
.hg-beta-bookcard--hero:hover .hg-beta-bookcard-cta {
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.hg-beta-bookcard--hero:hover .hg-beta-bookcard-cta span {
  transform: translateX(4px);
}
.hg-beta-bookmore {
  text-align: center;
  margin: 36px 0 0;
  font-size: 15px;
  color: var(--hg-muted);
}
.hg-beta-bookmore a {
  color: var(--hg-green);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.hg-beta-bookmore a:hover { border-bottom-color: currentColor; }
.hg-beta-bookmore span { margin: 0 6px; color: #cbd5e1; }

@media (max-width: 1023px) {
  .hg-beta-bookgrid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .hg-beta-bookcard--hero {
    grid-column: 1 / span 2;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
  .hg-beta-bookcard--hero .hg-beta-bookcard-title { font-size: 32px; }
  .hg-beta-bookcard--hero .hg-beta-bookcard-overlay { padding: 26px 28px 28px; }
}
@media (max-width: 640px) {
  .hg-beta-bookgrid { gap: 14px; }
  .hg-beta-bookcard-title { font-size: 17px; }
  .hg-beta-bookcard-meta { font-size: 10px; letter-spacing: 1.3px; }
  .hg-beta-bookcard-overlay { padding: 14px 16px 16px; }
  .hg-beta-bookcard--hero .hg-beta-bookcard-title { font-size: 26px; margin-bottom: 14px; }
  .hg-beta-bookcard--hero .hg-beta-bookcard-overlay { padding: 20px 22px 22px; }
  .hg-beta-bookcard--hero { aspect-ratio: 4 / 3; }
  .hg-beta-bookcard-cta { padding: 9px 18px; font-size: 13px; }
}
@media (max-width: 460px) {
  .hg-beta-bookgrid { grid-template-columns: 1fr; }
  .hg-beta-bookcard--hero { grid-column: 1; aspect-ratio: 4 / 3; }
  .hg-beta-bookcard:not(.hg-beta-bookcard--hero) { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-beta-bookcard,
  .hg-beta-bookcard img,
  .hg-beta-bookcard::after,
  .hg-beta-bookcard-arrow,
  .hg-beta-bookcard-cta,
  .hg-beta-bookcard-cta span { transition: none; }
  .hg-beta-bookcard:hover { transform: none; }
  .hg-beta-bookcard:hover img { transform: none; filter: none; }
}

/* ============================================================================
   Utility + final polish
   ============================================================================ */

.hg-beta-section + .hg-beta-section { padding-top: 0; }
.hg-beta h2.hg-beta-section-title { font-weight: 700; }

/* First section after the hero/H1 — tighten the 80px top cushion to ~32px so
   the gap between "HAWAI'I TRAVEL GUIDE" eyebrow and "Pick Your Island"
   doesn't feel like dead air. Only the FIRST <section> on the page matches. */
.hg-beta-section:first-of-type { padding-top: 32px; }

.hg-beta-audio-intro {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 20px 0;
}
.hg-beta-guide-label {
  width: 100%;
  padding: 18px 20px 0;
}

@media (min-width: 1024px) {
  .hg-beta-audio-intro {
    position: relative;
    z-index: 3;
    margin-top: -28px;
    padding-top: 0;
  }
  /* When the site-wide weather alert is rendering above this container,
     don't pull the audio banner up — the negative margin overlaps the
     alert. The Liquid in index.html adds this modifier class. */
  .hg-beta-audio-intro--has-alert {
    margin-top: 0;
    padding-top: 14px;
  }
  /* Same problem when the holiday/celebration "Coming Up Soon" card renders
     directly above this container — the -28px pull-up yanks the audio banner
     into the card. Neutralize it whenever the card is present. Covers both the
     server-rendered card and the ?preview= JS-injected one. */
  #hg-holiday-mount:has(.hg-holiday-card) ~ .hg-beta-audio-intro {
    margin-top: 0;
    padding-top: 14px;
  }
  .hg-beta-audio-intro .hg-whippoorwill-banner-wrap {
    margin: 0 0 14px;
  }
  .hg-beta-guide-label { padding-top: 4px; }
  #travel-guide.hg-beta-section { padding-top: 18px; }
  #travel-guide .hg-beta-section-header { margin-bottom: 30px; }
}

/* ============================================================================
   Mobile-only hero CTAs — desktop already shows the same priority funnel
   over the video via .search-top (which is hidden below 1024px in the global
   stylesheet), so these surface the same Guide Me / Let Me Explore choice
   to phone + tablet readers immediately below the hero.
   ============================================================================ */
.hg-mobile-hero-ctas { display: none; }

@media (max-width: 1023px) {
  .hg-mobile-hero-ctas {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 14px 12px 4px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .hg-mobile-hero-cta {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    transition: transform .12s ease, box-shadow .15s ease;
  }
  .hg-mobile-hero-cta-primary {
    background: #F27A24;
    color: #fff !important;
    border: 2px solid #F27A24;
    box-shadow: 0 4px 14px rgba(242,122,36,0.30);
  }
  .hg-mobile-hero-cta-secondary {
    background: #fff;
    color: #F27A24 !important;
    border: 2px solid #F27A24;
  }
  .hg-mobile-hero-cta:active { transform: translateY(1px); }
  .hg-mobile-hero-cta i { font-size: 16px; line-height: 1; flex-shrink: 0; }
}

/* Wider phones + tablets (≥480px and ≤1023px): once the viewport has room
   for it, bump font + padding + gap to match the desktop hero CTAs over
   the video so the buttons feel like substantial CTAs, not cramped pills. */
@media (min-width: 480px) and (max-width: 1023px) {
  .hg-mobile-hero-ctas { gap: 14px; padding: 18px 20px 6px; }
  .hg-mobile-hero-cta {
    gap: 10px;
    padding: 18px 28px;
    font-size: 17px;
    border-radius: 12px;
  }
  .hg-mobile-hero-cta i { font-size: 17px; }
}

/* Very narrow phones (≤360px): drop font + tighten padding so "Let Me
   Explore" doesn't overflow its button. */
@media (max-width: 360px) {
  .hg-mobile-hero-ctas { gap: 8px; padding: 14px 8px 4px; }
  .hg-mobile-hero-cta { font-size: 14px; padding: 14px 6px; gap: 5px; }
  .hg-mobile-hero-cta i { font-size: 14px; }
}

/* Quiz prompt CTA — stack the primary button and the "Browse all quizzes"
   link on mobile so the text link drops to its own line below the button.
   On desktop they sit inline as before. */
.hg-beta-quiz-prompt-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hg-beta-quiz-prompt-alt {
  font-size: 16px;
  color: var(--hg-muted, #555);
  text-decoration: underline;
}
@media (min-width: 768px) {
  .hg-beta-quiz-prompt-cta {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}

/* ============================================================
   Hero Island Constellation — 4 watercolor PNGs arcing across
   the right half of the hero on desktop, top-spanning row on
   mobile. Each is a real <a> to the island hub with Plausible
   event tracking. Promoted from /admin/hero-preview after side-
   by-side review.
============================================================ */
.hg-hero-islands {
  position: absolute;
  inset: 0;
  /* z-index must beat .bg-image-overlay's z-index:99 (in
     04-08-25-v1.css line 644) — that overlay is the 10% black tint
     over the video for text contrast, and it has no pointer-events:
     none, so without sitting above it the islands' clicks/hovers get
     swallowed before reaching the <a> tags. */
  z-index: 100;
  pointer-events: none;
}
.hg-hero-isle {
  position: absolute;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition: transform .35s ease;
  transform-origin: center bottom;
  opacity: 0;
  animation: hgHeroIsleFadeIn 1.6s ease forwards;
}
.hg-hero-isle img {
  display: block;
  height: auto;
  opacity: .6;
  transition: opacity .35s ease;
  -webkit-user-drag: none;
  user-select: none;
  /* NB: do NOT add pointer-events:none here. The <a> wrapping the img
     has no background of its own, so its hit area is its content. If
     pointer-events is none on the img, hovers/clicks over the visible
     watercolor pass through to the video and the <a> never fires. */
  /* Alpha-threshold filter — the watercolor PNGs ship paper-bleed
     at the corners (alpha 9-38, cream RGB). Against dark scenes
     that reads as a faint box halo. SVG filter inline in index.html
     crushes anything below ~15% alpha to 0. */
  filter: url(#hg-hero-isle-alpha-cleanup);
}
.hg-hero-isle-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin-top: 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
}
.hg-hero-isle:hover,
.hg-hero-isle:focus-visible { transform: scale(1.08); outline: none; }
.hg-hero-isle:hover img,
.hg-hero-isle:focus-visible img { opacity: .94; }

@keyframes hgHeroIsleFadeIn { to { opacity: 1; } }

/* Stagger delays NW -> SE so the chain reveals in geographic order */
.hg-hero-isle--kauai { animation-delay: .25s; }
.hg-hero-isle--oahu  { animation-delay: .55s; }
.hg-hero-isle--maui  { animation-delay: .85s; }
.hg-hero-isle--big   { animation-delay: 1.15s; }

/* Desktop positions — chain arcs across the right half of the hero.
   Kauaʻi sits in the upper-middle (clear of the ~180px site-header
   overlay); Big Island anchors above the Guide Me / Let Me Explore
   CTA stack via bottom-percent so it never crashes into them
   regardless of hero height. */
.hg-hero-isle--kauai { top: 26%;   left: 38%; }
.hg-hero-isle--oahu  { top: 36%;   left: 52%; }
.hg-hero-isle--maui  { top: 48%;   left: 64%; }
.hg-hero-isle--big   { bottom: 20%; right: 5%; }

/* Per-island sizing — Big Island visually dominates the chain the
   way the real island does (clamp range ~2x Kauaʻi's). Ceiling
   capped at 300px so on huge viewports it doesn't grow past the
   hero's vertical safe-zone (nav above + CTAs below). */
.hg-hero-isle--kauai img { width: clamp(72px, 8.5vw, 150px); }
.hg-hero-isle--oahu  img { width: clamp(82px, 9.5vw, 170px); }
.hg-hero-isle--maui  img { width: clamp(100px, 11vw, 200px); }
.hg-hero-isle--big   img { width: clamp(160px, 16vw, 300px); }

/* Desktop + tablet landscape (>=1024px) — medium-large chain.
   Originally this block was gated at 1280px and the 1024-1279px
   range fell back to small default sizes, which made the chain
   look tiny on iPad landscape (1024x768). Merged the two tiers so
   iPads and small laptops both get the same chain proportions.
   The 1536+ tier below still layers the full real-proportional
   bump on top for wide monitors. */
@media (min-width: 1024px) {
  /* Spacing reflects real channel widths between the four main
     visitor islands. Kauaʻi Channel (Kauaʻi -> Oʻahu) is ~72 miles,
     widest in Hawaiʻi by far. The Maui-Big Island channel is ~30
     miles; Oʻahu-Maui (across Molokaʻi + Lānaʻi) ~35. So Kauaʻi
     sits alone on the left with a deliberate gap, then Oʻahu, Maui,
     and Big Island cluster tighter on the right. */
  .hg-hero-isle--kauai { left: 8%; }
  .hg-hero-isle--oahu  { top: 33%; left: 40%; }
  .hg-hero-isle--maui  { top: 40%; left: 58%; }
  /* Big Island still bottom:20%, right:5% */

  .hg-hero-isle--kauai img { width: clamp(72px, 9.5vw, 180px); }
  .hg-hero-isle--oahu  img { width: clamp(82px, 10.5vw, 200px); }
  .hg-hero-isle--maui  img { width: clamp(100px, 11.5vw, 220px); }
  .hg-hero-isle--big   img { width: clamp(160px, 22vw, 380px); }
}

/* Wide monitors (>=1536px) — full real geographic area proportions.
   sqrt of real km² gives the linear ratio per island:

     Kauaʻi 1.00  Oʻahu 1.04  Maui 1.15  Big Island 2.70

   That's why "two of the others fit inside Big Island" reads true
   visually — Big Island really is ~2.7x linear of any of the
   smaller three. Sizes scaled around John's wide-monitor test of
   Big Island at 39vw on a 1900-px screen. Positions shift further
   LEFT (Kauaʻi to 3%) so the bigger four-island chain still arcs
   NW->SE across the hero without crowding the bottom-right corner.
   Clamp ceilings tuned so the chain doesn't outgrow the hero on
   4K monitors — without them Big Island would hit ~1500px at 39vw
   on 3840px wide and overflow the 800px-tall hero. */
@media (min-width: 1536px) {
  /* Same geographic-channel spacing as the 1280-1535 tier, just
     tighter packing because Big Island grows to 39vw and eats more
     horizontal real estate. Kauaʻi stays anchored on the far left;
     Oʻahu, Maui, Big Island form a tight cluster on the right with
     small gaps. */
  .hg-hero-isle--kauai { left: 3%; }
  .hg-hero-isle--oahu  { left: 22%; }
  .hg-hero-isle--maui  { left: 38%; }
  /* top: 33%/40% inherited from the 1280px block above */

  .hg-hero-isle--kauai img { width: clamp(72px, 14.5vw, 280px); }
  .hg-hero-isle--oahu  img { width: clamp(82px, 15vw, 290px); }
  .hg-hero-isle--maui  img { width: clamp(100px, 16.5vw, 320px); }
  .hg-hero-isle--big   img { width: clamp(160px, 39vw, 750px); }
}

/* Mobile / tablet (<1024px) — desktop CTAs are hidden by the global
   .search-top rule at this breakpoint and the mobile CTAs sit below
   the hero, so the islands can spread across the upper portion of
   the hero without competing with anything else. Top-spanning row
   reads as a chain on portrait screens instead of stacking.
   Chain pushed up vs. earlier mobile positions because Aloha's
   script font has tall ascenders that extend visually higher than
   the text's bounding box — the Maui label kept landing in them.
   Kauaʻi at top:10% clears the solid ~40px utility bar; the
   translucent logo+menu area above can show watercolor through it.
   Desktop/tablet positions are NOT touched by this block. */
@media (max-width: 1023px) {
  .hg-hero-isle--kauai { top: 10%; left: 3%; }
  .hg-hero-isle--oahu  { top: 16%; left: 26%; }
  .hg-hero-isle--maui  { top: 22%; left: 50%; }
  .hg-hero-isle--big   { top: 30%; right: 2%; }

  .hg-hero-isle--kauai img { width: 14vw; }
  .hg-hero-isle--oahu  img { width: 16vw; }
  .hg-hero-isle--maui  img { width: 18vw; }
  .hg-hero-isle--big   img { width: 24vw; }

  /* Smaller label sizing on mobile. Visibility is now handled by the
     base rule (labels always visible at every viewport). */
  .hg-hero-isle-label { font-size: 9px; letter-spacing: 1.4px; }
}

/* ============================================================
   Tucked-corner pause/play — replaces the legacy 7rem center-right
   icon (the freed real estate is what the constellation now uses).
   Existing JS in index.html still wires #video-play / #video-pause
   so this is a visual-only refactor for the control itself.
============================================================ */
.hg-hero-video-control {
  position: absolute;
  bottom: 18px;
  right: 18px;
  /* Same story as .hg-hero-islands — must beat .bg-image-overlay's
     z-index:99. The legacy 7rem .video-controls icon shipped at
     z-index:1000 which is why it stayed clickable; matching that
     value keeps the corner button always on top of everything,
     including the islands. */
  z-index: 1000;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .55;
  border: none;
  padding: 0;
  margin: 0;
  transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.hg-hero-video-control:hover,
.hg-hero-video-control:focus-visible {
  opacity: 1;
  background: rgba(0,0,0,.62);
  transform: scale(1.08);
  outline: none;
}
.hg-hero-video-control i {
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
@media (max-width: 768px) {
  .hg-hero-video-control { bottom: 12px; right: 12px; width: 34px; height: 34px; }
  .hg-hero-video-control i { font-size: 13px; }
}