/* ============================================================
   OnsJag Website Theme — Canonical Palette + Glass Effects
   Based on OJ_UI_Baseline_Theme_Update.md
   ============================================================ */

:root {
  /* ── Greens ── */
  --pale-yellow-green: #D9EC7F;
  --light-lime: #abdb53;
  --vibrant-green: #4ea10e;
  --vibey-dark-green: #2d5a27;
  --accacia-green: #486636;
  --more-olive: #576600;
  --olive: #666100;
  --light-olive: #dbe0b1;
  --olive-cream: #eaf0cc;
  --vibey-light-green: #bcf0ae;
  --super-light-green: #f0f9f0;

  /* ── Warm / Orange ── */
  --burnt-terracotta: #A0522D;
  --deep-orange: #eb6e00;
  --bright-orange: #f79d00;
  --pale-theme-orange: #ffb961;

  /* ── Neutrals ── */
  --grey-brown: #5c5545;
  --dark-brown: #5f4b1c;
  --darker-cream: #e5d4a6;
  --cream: #faf2da;
  --light-cream: #f7f5ed;
  --light-grey: #efefef;
  --mid-grey: #999999;

  /* ── Semantic ── */
  --blood-red: #b31f05;
  --nice-blue: #199bb5;
  --bright-blue: #0d60a1;

  /* ── Glass ── */
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-light: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-dark: rgba(45, 90, 39, 0.12);
  --glass-blur: 16px;

  /* ── Typography ── */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  /* ── Sizing ── */
  --nav-height: 72px;
  --section-padding: clamp(3rem, 8vw, 7rem);
  --content-max: 1200px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--vibey-dark-green);
  background: var(--light-cream);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--vibey-dark-green);
}

a { color: var(--bright-blue); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--vibey-dark-green); }

img { max-width: 100%; height: auto; display: block; }

/* ── Glass Navbar ── */
.nav-glass {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 50;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-dark);
  border-radius: 16px;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 24px rgba(45, 90, 39, 0.06);
}

.nav-glass.scrolled {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 32px rgba(45, 90, 39, 0.10);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vibey-dark-green);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo img {
  height: 36px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 8px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--vibey-dark-green);
  padding: 8px 16px;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.nav-links a:hover,
.nav-links a.active {
  background: rgba(45, 90, 39, 0.08);
  color: var(--vibey-dark-green);
}

.nav-cta {
  background: var(--bright-orange) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(247, 157, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(247, 157, 0, 0.35) !important;
  background: var(--deep-orange) !important;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--vibey-dark-green);
  margin: 6px 0;
  transition: transform 0.3s, opacity 0.3s;
  border-radius: 2px;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(var(--nav-height) + 8px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 16px;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--glass-border-dark);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; border-radius: 8px; }
}

/* ── Hunters dropdown ── */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--vibey-dark-green);
  padding: 8px 16px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, color 0.2s;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active,
.nav-dropdown.open .nav-dropdown-toggle {
  background: rgba(45, 90, 39, 0.08);
}

.nav-caret { flex-shrink: 0; transition: transform 0.2s; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 210px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border-dark);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 32px rgba(45, 90, 39, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 60;
}

.nav-dropdown-menu a {
  display: block;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--vibey-dark-green);
  padding: 10px 14px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: rgba(45, 90, 39, 0.08);
}

.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Open on hover for mouse/trackpad users only */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
}

/* Mobile: dropdown expands inline inside the stacked menu */
@media (max-width: 768px) {
  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 1rem;
  }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 2px 0 6px 14px;
    min-width: 0;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; }
  /* Hover must not auto-open the inline submenu on touch screens */
  .nav-dropdown:hover .nav-dropdown-menu { display: none; }
  .nav-dropdown.open:hover .nav-dropdown-menu { display: flex; }
}

/* ── Sections ── */
.section {
  padding: var(--section-padding) 24px;
  position: relative;
}

.section-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.section-dark {
  background: linear-gradient(135deg, var(--more-olive) 0%, var(--accacia-green) 100%);
  color: var(--light-cream);
  position: relative;
}
.section-dark h2, .section-dark h3, .section-dark p { color: var(--light-cream); }
.section-dark .text-muted { color: var(--light-olive); }

/* Camo texture variant — use on page headers and hero-adjacent dark sections */
.section-dark-camo {
  background: var(--accacia-green);
  color: var(--light-cream);
  position: relative;
  overflow: hidden;
}
.section-dark-camo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/backgrounds/long_crisp_camo.png') center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.section-dark-camo > * { position: relative; z-index: 1; }
.section-dark-camo h1, .section-dark-camo h2, .section-dark-camo h3,
.section-dark-camo p { color: var(--light-cream); }
.section-dark-camo .text-muted { color: var(--light-olive); }
.section-dark-camo .pill-green {
  background: rgba(255, 255, 255, 0.12);
  color: var(--pale-yellow-green);
}
.section-dark-camo .pill-orange {
  background: rgba(247, 157, 0, 0.15);
  color: var(--pale-theme-orange);
}

.section-cream { background: var(--cream); }
.section-olive-cream { background: var(--olive-cream); }
.section-light-green { background: var(--super-light-green); }
.section-light { background: var(--light-cream); }

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + 48px);
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-placeholder {
  width: 100%;
  height: 100%;
  background:
    url('../assets/backgrounds/long_crisp_camo.png') center / cover no-repeat;
  opacity: 0.18;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(45, 90, 39, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(247, 157, 0, 0.05) 0%, transparent 50%);
}

/* Hero top block — heading + eyebrow centered above the split */
.hero-top {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 3rem;
}

.hero-top h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.hero-eyebrow-sub {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 400;
  color: var(--olive);
  letter-spacing: 0.01em;
}

/* Hero split — image left, copy right */
.hero-split {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

@media (min-width: 769px) {
  .hero-split {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }
}

.hero-visual {
  flex-shrink: 0;
}

@media (min-width: 769px) {
  .hero-visual { flex: 0 0 38%; max-width: 420px; }
}

.hero-phone-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 20px 48px rgba(45, 90, 39, 0.12));
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
}

.hero-content .hero-subheading {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--grey-brown);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-support {
  font-size: 0.9rem;
  color: var(--mid-grey);
  margin-top: 1.5rem;
  font-style: italic;
}

/* Legacy placeholder (kept for other pages) */
.hero-mockup {
  width: 100%;
  max-width: 520px;
  border-radius: 20px;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--olive-cream) 0%, var(--cream) 50%, var(--light-olive) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--olive);
  font-size: 0.9rem;
  text-align: center;
  padding: 24px;
  border: 1px solid rgba(45, 90, 39, 0.08);
  box-shadow: 0 20px 60px rgba(45, 90, 39, 0.08);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--bright-orange);
  color: #fff;
  box-shadow: 0 4px 16px rgba(247, 157, 0, 0.3);
}
.btn-primary:hover {
  background: var(--deep-orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(247, 157, 0, 0.4);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--vibey-dark-green);
  border: 2px solid var(--vibey-dark-green);
}
.btn-secondary:hover {
  background: var(--vibey-dark-green);
  color: var(--light-cream);
}

.btn-green {
  background: var(--accacia-green);
  color: #fff;
}
.btn-green:hover {
  background: var(--vibey-dark-green);
  color: #fff;
}

.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Cards ── */
.card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(45, 90, 39, 0.06);
  box-shadow: 0 2px 12px rgba(45, 90, 39, 0.04);
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: default;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(45, 90, 39, 0.08);
}

.card-accent { border-left: 4px solid var(--vibrant-green); }
.card-orange { border-left: 4px solid var(--bright-orange); }

.card-glass {
  background: var(--glass-bg-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border-dark);
}

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.card p {
  color: var(--grey-brown);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ── App Store / Google Play badges ── */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.store-badge:hover { opacity: 0.9; }
.store-badge:focus-visible {
  outline: 2px solid var(--bright-orange, #f08a24);
  outline-offset: 3px;
}

.store-badge img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
}

@media (min-width: 1024px) {
  .store-badge img { max-width: 220px; }
}

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Icon circles ── */
.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.icon-circle svg { width: 28px; height: 28px; }
.icon-circle-green { background: var(--super-light-green); color: var(--vibrant-green); }
.icon-circle-orange { background: rgba(247, 157, 0, 0.1); color: var(--bright-orange); }
.icon-circle-olive { background: var(--olive-cream); color: var(--olive); }
.icon-circle-blue { background: rgba(25, 155, 181, 0.1); color: var(--nice-blue); }

/* ── Steps / How it works ── */
.steps { counter-reset: step; }
.step {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  position: relative;
}

.step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vibey-dark-green);
  color: var(--light-cream);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-content h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step-content p { color: var(--grey-brown); font-size: 0.95rem; }

/* ── Section headings ── */
.section-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.section-subheading {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--grey-brown);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 3rem;
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── CTA Strip ── */
.cta-strip {
  text-align: center;
  padding: var(--section-padding) 24px;
}

.cta-strip h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  margin-bottom: 1rem;
}

.cta-strip p {
  max-width: 560px;
  margin: 0 auto 2rem;
  color: var(--grey-brown);
  font-size: 1.05rem;
}

/* ── Footer ── */
.footer {
  background: linear-gradient(135deg, var(--more-olive) 0%, var(--accacia-green) 100%);
  color: var(--light-olive);
  padding: 64px 24px 32px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/backgrounds/long_crisp_camo.png') center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }

.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
}

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
}

.footer-brand p {
  color: var(--light-olive);
  font-size: 0.9rem;
  line-height: 1.65;
  margin-top: 12px;
}

.footer h4 {
  color: var(--pale-yellow-green);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  color: var(--light-olive);
  font-size: 0.9rem;
  transition: color 0.2s;
}
.footer-links a:hover { color: #fff; }

.footer-bottom {
  max-width: var(--content-max);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--mid-grey);
}

/* ── Audience tabs ── */
.audience-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.audience-tab {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 24px;
  border-radius: 12px;
  border: 2px solid rgba(45, 90, 39, 0.12);
  background: transparent;
  color: var(--vibey-dark-green);
  cursor: pointer;
  transition: all 0.2s;
}

.audience-tab:hover { border-color: var(--vibrant-green); }
.audience-tab.active {
  background: var(--vibey-dark-green);
  color: var(--light-cream);
  border-color: var(--vibey-dark-green);
}

.audience-panel { display: none; }
.audience-panel.active { display: block; }

/* ── Contact form ── */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--vibey-dark-green);
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(45, 90, 39, 0.15);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--vibey-dark-green);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--vibrant-green);
  box-shadow: 0 0 0 3px rgba(78, 161, 14, 0.1);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── Animations (scroll reveal) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Pill badge ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.82rem;
}

.pill-green {
  background: var(--super-light-green);
  color: var(--vibrant-green);
}

.pill-orange {
  background: rgba(247, 157, 0, 0.1);
  color: var(--deep-orange);
}

/* ── Login Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  position: relative;
  transform: translateY(12px);
  transition: transform 0.25s;
}

.modal-overlay.open .modal-card {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mid-grey);
  padding: 4px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}

.modal-close:hover {
  color: var(--vibey-dark-green);
  background: var(--light-grey);
}

.modal-card h2 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.modal-card .modal-subtitle {
  color: var(--grey-brown);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.modal-card .form-group { margin-bottom: 16px; }

.modal-card .form-group input {
  padding: 14px 16px;
}

.login-error {
  background: rgba(179, 31, 5, 0.08);
  color: var(--blood-red);
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  display: none;
}

.login-error.visible { display: block; }

.login-btn {
  width: 100%;
  justify-content: center;
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* ── Signed-in utility on a Public Website page ──────────────
   Exactly one compact control. The old layout put the whole marketing
   menu, the user's email and a separately wrapping Log out button in the
   same bar, which read as "you have been ejected from the Portal". A
   signed-in visitor on public content gets Open Portal and nothing else —
   never Login and Log out at the same time. */
.nav-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--vibey-dark-green);
  padding: 6px 14px 6px 6px;
  border-radius: 100px;
  background: var(--super-light-green);
  border: 1px solid rgba(78, 161, 14, 0.22);
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.nav-portal-link:hover {
  background: var(--vibey-light-green);
  border-color: rgba(78, 161, 14, 0.4);
  color: var(--vibey-dark-green);
}

.nav-user-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--vibrant-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .nav-portal-link { width: 100%; justify-content: flex-start; min-height: 44px; }
}

/* ── Shell controller primitives (js/shell.js) ───────────────── */

.oj-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Neutral pending bar: holds the approved header geometry while the shell is
   still being resolved, showing the brand and no destinations at all. Showing
   the Public menu here is what caused the wrong-shell flash. */
.nav-glass.oj-shell-pending {
  justify-content: flex-start;
  pointer-events: none;
}
.nav-glass.oj-shell-pending .nav-logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vibey-dark-green);
  opacity: 0.55;
}

.nav-portal-link:focus-visible {
  outline: 3px solid var(--vibrant-green);
  outline-offset: 2px;
}

/* A shared page rendered inside the Admin workspace: the operator bar keeps its
   deliberate solid look, but goes fixed so the page's own hero spacing (which
   was written for the floating bar) still clears it.
   admin.css sizes the bar against `body.adm-body` (15px/1.45). A shared page
   uses the public 16px/1.65 body, which made the operator nav wrap and clip, so
   the bar's own typography is restated here — scoped to the header, never to
   the page content underneath it. */
body.oj-shared-admin .adm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
}
body.oj-shared-admin .adm-header-inner { height: 58px; }
/* One row, always: overflow scrolls rather than wrapping out of the bar. */
body.oj-shared-admin .adm-nav {
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}
body.oj-shared-admin .adm-nav::-webkit-scrollbar { display: none; }
body.oj-shared-admin .adm-nav a,
body.oj-shared-admin .adm-nav .adm-nav-group { white-space: nowrap; flex-shrink: 0; }
body.oj-shared-admin .adm-header-right { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .nav-portal-link { transition: none; }
}

/* ── Image placeholder ── */
.img-placeholder {
  border-radius: 16px;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--olive);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(45, 90, 39, 0.15);
}

.img-placeholder-warm {
  background: linear-gradient(135deg, var(--cream) 0%, var(--olive-cream) 100%);
}

.img-placeholder-green {
  background: linear-gradient(135deg, var(--super-light-green) 0%, var(--olive-cream) 100%);
}

/* ── Floating shapes (decorative) ── */
.float-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.08;
  pointer-events: none;
}

/* ── Feature page specific ── */
.feature-block {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 32px 0;
}

.feature-block:nth-child(even) { flex-direction: row-reverse; }
.feature-block-text { flex: 1; }
.feature-block-visual { flex: 0 0 45%; }

.feature-block-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 470px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 48px rgba(45, 90, 39, 0.12));
}

@media (max-width: 768px) {
  .feature-block,
  .feature-block:nth-child(even) {
    flex-direction: column;
    gap: 32px;
    padding: 24px 0;
  }
  .feature-block-visual { flex: none; width: 100%; }
}

.feature-block h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.feature-block p {
  color: var(--grey-brown);
  font-size: 1rem;
  line-height: 1.7;
}

/* Olive/dark feature band — single-feature section used for Live Hunt.
   Tighten the surrounding section padding so the band reads as a feature
   strip rather than a hero, and restore readable text colour for the
   .feature-block p rule above which otherwise wins over .section-dark p. */
.feature-band {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .feature-band {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

.section-dark .feature-block p { color: var(--light-cream); }
.section-dark .feature-bullets { color: var(--light-cream); }

/* ── Stat counter ── */
.stat-row {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

.stat {
  text-align: center;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bright-orange);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--grey-brown);
  margin-top: 4px;
}

/* ── Provider segments ── */
.segment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 1024px) {
  .segment-grid { grid-template-columns: repeat(4, 1fr); }
}

.segment-card {
  background: var(--cream);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(45, 90, 39, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}

.segment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 90, 39, 0.06);
}

.segment-card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--vibey-dark-green);
}

.segment-card p {
  font-size: 0.85rem;
  color: var(--grey-brown);
  line-height: 1.5;
}

/* ============================================================
   Auth pages (login / register / verify / reset)
   Reuses .modal-card, .form-group, .login-error, .login-btn.
   ============================================================ */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 60px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.auth-card h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  color: var(--vibey-dark-green);
}

.auth-card .auth-subtitle {
  color: var(--grey-brown);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.auth-card .form-group {
  margin-bottom: 14px;
}

.auth-card .form-group input {
  width: 100%;
  box-sizing: border-box;
}

.auth-card .login-btn {
  width: 100%;
  margin-top: 8px;
}

.auth-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.92rem;
}

.auth-links a {
  color: var(--vibey-dark-green);
  text-decoration: none;
  font-weight: 600;
}

.auth-links a:hover { text-decoration: underline; }

.auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--grey-brown);
  margin-bottom: 12px;
  line-height: 1.4;
}

.auth-checkbox input { margin-top: 3px; }

.login-success {
  display: none;
  background: #ecfccb;
  color: #365314;
  border: 1px solid #d9f99d;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.login-success.visible { display: block; }

.auth-helper {
  font-size: 0.85rem;
  color: var(--grey-brown);
  margin-top: 6px;
}

.auth-helper.warn { color: #92400e; }

/* ── Password visibility toggle (added 2026-06-10) ──
   js/main.js wraps every <input type="password"> in .password-field and
   injects the .password-toggle button. UI-only: it flips input.type between
   'password' and 'text' and never touches values, validation, or submit. */
.password-field {
  position: relative;
  display: block;
}

.password-field input {
  width: 100%;
  box-sizing: border-box;
  /* Keep typed characters clear of the eye button. */
  padding-right: 48px !important;
}

.password-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--grey-brown);
  border-radius: 10px;
  transition: color 0.2s;
}

.password-toggle:hover { color: var(--vibey-dark-green); }

.password-toggle.is-visible { color: var(--vibrant-green); }

.password-toggle:focus-visible {
  outline: 2px solid var(--vibrant-green);
  outline-offset: 2px;
}

.password-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ============================================================
   How-to / Training page
   Compact hero, responsive YouTube embeds, secondary channel CTA,
   coming-soon placeholder
   ============================================================ */

/* Compact training hero — banner-feel, not a full-screen camo block.
   Overrides .section default top/bottom padding so the videos sit close. */
.howto-hero {
  padding-top: 112px;
  padding-bottom: 36px;
}

@media (min-width: 768px) {
  .howto-hero {
    padding-top: 124px;
    padding-bottom: 44px;
  }
}

.howto-hero h1 { max-width: 22ch; }
.howto-hero p { max-width: 68ch; margin-top: 12px; }

/* Videos sit immediately below the hero — tighten the top padding. */
.howto-videos {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .howto-videos {
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

/* Secondary YouTube channel CTA — compact centered band below videos. */
.howto-channel {
  padding-top: 48px;
  padding-bottom: 48px;
}

.channel-cta {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.channel-cta h2 {
  font-size: 1.5rem;
  margin: 0;
}

.channel-cta p {
  color: var(--grey-brown);
  font-size: 1rem;
  margin: 0 0 8px;
}

.channel-cta .btn svg { flex-shrink: 0; }

.howto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 1024px) {
  .howto-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.howto-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  border: 1px solid rgba(45, 90, 39, 0.08);
  box-shadow: 0 8px 28px rgba(45, 90, 39, 0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.howto-card h3 {
  font-size: 1.4rem;
  color: var(--vibey-dark-green);
  margin: 0;
}

.howto-card p {
  color: var(--grey-brown);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.howto-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vibrant-green);
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1a0d;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

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

.video-fallback {
  font-size: 0.92rem;
  color: var(--grey-brown);
}

.video-fallback a {
  font-weight: 600;
  color: var(--bright-blue);
}

.video-fallback a:hover { color: var(--vibey-dark-green); }

.video-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--olive-cream) 0%, var(--cream) 100%);
  border: 1px dashed rgba(45, 90, 39, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: var(--olive);
}

.video-placeholder .placeholder-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(45, 90, 39, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vibey-dark-green);
}

.video-placeholder .placeholder-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--vibey-dark-green);
}

.video-placeholder .placeholder-sub {
  font-size: 0.85rem;
  color: var(--grey-brown);
  max-width: 28ch;
}

/* ============================================================
   Home page — Moments brand band
   Compact olive ribbon between the audiences grid and the final
   CTA. Content-driven height; overrides .section default padding
   so it reads as a brand statement, not an empty hero block.
   ============================================================ */
.moments-band {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .moments-band {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.moments-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.moments-content h2 {
  margin: 0;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

.moments-content p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
}

.moments-content .moments-tagline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  margin-top: 4px;
  color: var(--pale-yellow-green);
}