/* ============================================================
   Candle Story — Mobile-only patch
   Apply with: <link rel="stylesheet" href="/mobile.css">
   Placed AFTER all existing <style> blocks on every page.
   Zero desktop changes. All rules wrapped in max-width queries.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   GLOBAL — full-bleed container, flush nav, no edge gaps
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* Nav always touches the very top with zero gap, full width */
  nav.nav {
    margin: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }
}

/* ────────────────────────────────────────────────────────────
   GLOBAL — safe-area insets + iOS scroll fix
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent iOS auto-zoom on any input/select/textarea */
  input, select, textarea, .form-input, .finput, .date-text-input {
    font-size: 16px !important;
  }

  /* Safe-area padding for sticky navs */
  .nav {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Body scroll wrapper safe-area bottom clearance */
  .scroll-wrap {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Scrollbar hidden on mobile (takes up space) */
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}


/* ────────────────────────────────────────────────────────────
   NAV — overflow guard (all pages)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Clamp nav to viewport, prevent overflow */
  .nav {
    overflow: hidden;
  }

  /* Email in user trigger: hard cap */
  .nav-user-trigger span:not(.nav-user-caret):not(.nav-user-dot) {
    max-width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Dropdown: never overflow left viewport edge */
  .nav-dropdown {
    right: 0;
    left: auto;
    max-width: calc(100vw - 16px);
  }

  /* Nav usage panel: clamp width */
  #navUsagePanel {
    width: min(220px, calc(100vw - 24px)) !important;
    right: 0;
    left: auto;
  }
}

/* Phones only — collapse non-essential nav items */
@media (max-width: 480px) {

  /* Hide Pricing/FAQ/Usage text links in app nav — logo + email dropdown sufficient */
  #appPage .nav .nav-link-a-prominent {
    display: none !important;
  }

  /* Hide usage bar in nav on small phones — still accessible via /usage */
  #navUsageWrap {
    display: none !important;
  }

  /* Plan badge: shrink text */
  #appPlanBadge {
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — landing page hero
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .hero {
    padding: 40px 20px 32px !important;
    gap: 24px !important;
  }

  .hero-h1 {
    font-size: clamp(26px, 8vw, 36px) !important;
  }

  .hero-sub {
    font-size: 14px !important;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta .btn-lg {
    width: 100%;
    text-align: center;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    margin: 32px 0 !important;
  }

  .hs-n {
    font-size: 22px !important;
  }

  .features {
    padding: 0 20px 48px !important;
  }

  .pricing {
    padding: 0 20px 48px !important;
  }

  footer {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — app page: sidebar replacement on mobile
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* App layout: single column, sidebar hidden (existing rule), main panel full width */
  .app-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Re-show pair selector as a horizontal pill strip at top of main panel */
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 16px 0 !important;
    gap: 10px !important;
    overflow: visible !important;
    border-right: none !important;
    border-bottom: 0.5px solid var(--border) !important;
    background: transparent !important;
  }

  /* Hide everything in sidebar EXCEPT the pair list and usage bar */
  .sidebar .sb-divider,
  .sidebar .sb-session,
  .sidebar #trialBox,
  .sidebar #starterBox,
  .sidebar .sb-label:not(:first-child),
  .sidebar > div:last-child /* coverage years */ {
    display: none !important;
  }

  /* Usage bar: show inline, compact */
  .sidebar #usageBar {
    display: block !important;
  }

  /* Pair list: horizontal row of pills */
  .pair-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .pair-item {
    flex: 1;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    min-height: 52px;
    text-align: center;
  }

  .pi-right { display: none !important; }

  .pi-left .pi-name {
    font-size: 11px !important;
  }

  .pi-left .pi-full {
    font-size: 9px !important;
  }

  /* Main panel: no extra horizontal padding, allow natural scroll */
  .main-panel {
    padding: 14px 14px 80px !important;
    overflow-y: visible !important;
  }

  /* App page: allow body scroll */
  #appPage.active {
    overflow-y: auto !important;
  }

  /* Height is now content-driven */
  #appPage.active .app-layout {
    min-height: 0 !important;
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — control grid
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .ctrl-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Date takes full width */
  .ctrl-grid .ctrl:first-child {
    grid-column: 1 / -1;
  }

  /* GENERATE button: full width, proper tap target */
  .gen-btn {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  /* On very small phones: stack everything */
  .ctrl-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — notable dates
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .notable-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .nd {
    flex: 0 0 auto !important;
    min-width: 110px !important;
    max-width: 140px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — results grid + cards
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .results-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Stats row: 3 visible + scroll for others */
  .stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: auto !important;
  }

  /* Narrative and brief cards: auto height, min-height instead of fixed */
  .narr-card,
  .brief-card {
    height: auto !important;
    min-height: 280px !important;
    max-height: 70vh !important;
  }

  .narr-body-wrap,
  .brief-body-wrap {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: 55vh !important;
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — calendar popup
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .cal-popup {
    position: fixed !important;
    top: auto !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.7) !important;
    z-index: 10000 !important;
  }

  .cal-days,
  .cal-grid-12,
  .cal-grid-10 {
    gap: 4px !important;
  }

  .cal-day,
  .cal-cell {
    padding: 8px 2px !important;
    font-size: 12px !important;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — modals (auth, upgrade, payment, PDF)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 28px 20px max(28px, env(safe-area-inset-bottom)) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .upgrade-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 28px 20px max(28px, env(safe-area-inset-bottom)) !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Upgrade modal actions: full-width buttons */
  .um-actions {
    gap: 8px !important;
  }

  .um-btn-primary,
  .um-btn-secondary {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Form buttons: tap target */
  .form-btn {
    min-height: 48px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   INDEX.HTML — canvas tooltip clamp
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tip {
    max-width: calc(100vw - 28px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}


/* ────────────────────────────────────────────────────────────
   PRICING.HTML — nav + layout
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .page-hero {
    padding: 40px 0 32px !important;
  }

  .hero-h1 {
    font-size: clamp(26px, 8vw, 40px) !important;
  }

  /* Trial notice: block, full width */
  .trial-notice {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
  }

  /* Pricing cards: reduce padding on mobile */
  .price-card {
    padding: 20px 16px !important;
  }

  .price-card.featured {
    padding-top: 42px !important;
  }

  /* Topup cards */
  .topup-card {
    padding: 20px 16px !important;
  }

  /* Section spacing */
  .section {
    padding: 40px 0 !important;
  }

  footer {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* Phones: hide some nav links to prevent overflow */
@media (max-width: 480px) {
  /* pricing.html nav: hide sign-in when showing trial btn, etc */
  .nav-right {
    gap: 6px !important;
  }

  .nav-link-a-prominent {
    padding: 5px 7px !important;
    font-size: 11px !important;
  }

  .nav-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   FAQ.HTML — iOS 100vh fix + answer indent
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Fix iOS 100vh: use dvh where supported, fall back to 100% */
  body {
    height: 100% !important;
  }

  html {
    height: 100%;
  }

  .scroll-wrap {
    height: calc(100dvh - 52px) !important;
  }

  /* Reduce FAQ answer left indent on small screens */
  .faq-answer-inner {
    padding: 16px 20px 20px 44px !important;
  }

  /* Tap zone on FAQ question */
  .faq-question {
    padding: 18px 20px !important;
    min-height: 56px;
  }

  .q-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
  }

  .container {
    padding: 48px 16px 80px !important;
  }

  .footer-note {
    padding: 18px 16px !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}


/* ────────────────────────────────────────────────────────────
   USAGE.HTML — iOS 100vh fix + topup grid
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* iOS 100vh fix (same as FAQ) */
  .scroll-wrap {
    height: calc(100dvh - 52px) !important;
  }

  .wrap {
    padding: 40px 16px 80px !important;
  }

  /* Upgrade card: stack on mobile */
  .upgrade-card {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
  }

  .uc-btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* FAQ items on usage page */
  .faq-q {
    min-height: 52px;
    padding: 14px 16px !important;
  }

  /* Topup grid already goes to 1-col at 600px — no change needed */
}


/* ────────────────────────────────────────────────────────────
   SETTINGS.HTML — inputs, layout
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .wrap {
    padding: 36px 16px 80px !important;
  }

  .card {
    padding: 18px 16px !important;
  }

  .trigger-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .trigger-btn {
    min-height: 44px !important;
    width: 100% !important;
  }

  .form-btn {
    min-height: 48px !important;
  }

  /* Sign-out card: stack */
  .card[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}


/* ────────────────────────────────────────────────────────────
   THANK-YOU.HTML — allow scroll on short screens
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Override the overflow:hidden on body */
  body {
    overflow-y: auto !important;
  }

  .wrapper {
    min-height: 100dvh !important;
    padding: 32px 20px max(32px, env(safe-area-inset-bottom)) !important;
  }

  .headline {
    font-size: clamp(24px, 7vw, 40px) !important;
  }

  .access-badge {
    text-align: left;
  }

  .cta-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   RESET-PASSWORD.HTML — scrollable card on short screens
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  body {
    padding: 16px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    min-height: 100dvh !important;
  }

  .card {
    padding: 24px 16px !important;
    margin-top: 16px;
    margin-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .form-btn {
    min-height: 48px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   COMING-SOON.HTML — logo overflow + form
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .logo-wrap {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .logo {
    width: 100% !important;
  }

  .headline {
    font-size: clamp(28px, 9vw, 48px) !important;
  }

  .form {
    padding: 0 4px !important;
  }

  /* Form row: already stacks at 480px per existing rule */

  /* Safe area on scroll pages */
  .page {
    padding-bottom: max(56px, env(safe-area-inset-bottom)) !important;
  }
}


/* ────────────────────────────────────────────────────────────
   ADMIN.HTML — module grid
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .module-grid {
    grid-template-columns: 1fr !important;
  }

  .wrap {
    padding: 24px 16px 60px !important;
  }

  .auth-box {
    width: calc(100vw - 32px) !important;
    padding: 28px 20px !important;
  }
}


/* ────────────────────────────────────────────────────────────
   ADMIN-REVENUE.HTML — stats grid
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .two-col {
    grid-template-columns: 1fr !important;
  }

  .wrap {
    padding: 24px 12px 60px !important;
  }

  .auth-box {
    width: calc(100vw - 32px) !important;
    padding: 28px 20px !important;
  }
}

@media (max-width: 420px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ────────────────────────────────────────────────────────────
   ALL ADMIN PAGES — auth box
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-box {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
  }
}


/* ────────────────────────────────────────────────────────────
   GLOBAL — button tap targets (44px minimum everywhere)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .nav-btn,
  .btn-lg,
  .price-btn,
  .topup-buy-btn,
  .form-btn,
  .gate-btn,
  .upgrade-btn,
  .uc-btn,
  .gen-btn,
  .copy-btn,
  .dl-btn {
    min-height: 44px !important;
  }

  /* Pair items already get min-height from sidebar rules above */

  /* TF pills: make tappable */
  .tp {
    min-height: 36px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ────────────────────────────────────────────────────────────
   PROMPT FIX — Hide Sign In button on mobile
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* index.html landing nav */
  #landingSignInBtn {
    display: none !important;
  }

  /* pricing.html + faq.html nav */
  #signInBtn {
    display: none !important;
  }
}


/* ────────────────────────────────────────────────────────────
   PROMPT FIX — Footer bar alignment on mobile
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  footer {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    padding: 16px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  footer > * {
    width: 100% !important;
    text-align: center !important;
  }

  footer .logo {
    text-align: center !important;
  }
}


/* ────────────────────────────────────────────────────────────
   PROMPT FIX v2 — Hide ALL Sign In buttons on mobile
   (covers nav button, hero ghost button, and any page variant)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Landing nav Sign In */
  #landingSignInBtn {
    display: none !important;
  }

  /* pricing.html + faq.html nav Sign In */
  #signInBtn {
    display: none !important;
  }

  /* Hero "Sign in" ghost button (index.html hero-cta) */
  .hero-cta .btn-lg.ghost {
    display: none !important;
  }
}


/* ────────────────────────────────────────────────────────────
   COMING-SOON — edge-to-edge on mobile, no horizontal scroll
   Scoped to #scrollWrap (coming-soon.html only) — does not
   touch index.html's .page/.scroll-wrap (different page, same
   class names, different IDs).
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  html, body {
    overflow-x: hidden !important;
  }

  #scrollWrap {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  #scrollWrap .page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    /* Edge-to-edge: kill the source padding, replace with a single
       consistent value so left/right are identical and top sits
       flush under the sticky nav (nav handles its own height). */
    padding: 32px 20px 48px !important;
    padding-bottom: max(48px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  /* Force logo wrap to fit viewport, centered, no side overflow */
  #scrollWrap .logo-wrap {
    width: 100% !important;
    max-width: min(320px, 86vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #scrollWrap .logo {
    width: 100% !important;
    height: auto !important;
  }

  #scrollWrap .headline {
    width: 100% !important;
    font-size: clamp(26px, 8.5vw, 42px) !important;
    word-break: break-word !important;
  }

  #scrollWrap .form,
  #scrollWrap .form-row,
  #scrollWrap .form-field {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #scrollWrap .beta {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}


/* ────────────────────────────────────────────────────────────
   MOBILE NAV — hamburger menu (index, pricing, faq, usage)
   Desktop/tablet untouched — all rules scoped to ≤768px.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Resize nav bar to fit proportionally on small screens */
  nav.nav {
    padding: 0 16px !important;
    height: 52px !important;
  }

  .nav-right {
    gap: 8px !important;
  }

  .nav-logo {
    font-size: 13px !important;
  }

  .nav-beta {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* Hide existing public-nav items (links group, sign in, trial, sign out) */
  .nav-right > div[style*="display:flex"][style*="gap:6px"],
  .nav-right > div[style*="display: flex"][style*="gap: 6px"] {
    display: none !important;
  }

  #signInBtn,
  #trialBtn,
  #signOutBtn,
  #landingSignInBtn,
  #landingSignOutBtn,
  #landingTrialBtn,
  .nav-plan-badge {
    display: none !important;
  }

  /* Hamburger icon */
  .mnav-burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.04);
    border: 0.5px solid var(--border, #1a1f2e);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .mnav-burger span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--green, #b8e832);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .mnav-burger.open span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .mnav-burger.open span:nth-child(2) {
    opacity: 0;
  }
  .mnav-burger.open span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }
}

/* Hamburger hidden by default — only shown via the mobile media query above */
.mnav-burger {
  display: none;
}

/* ── Dropdown menu — fixed position, top/right set via JS, so it can
   never be clipped by overflow:hidden ancestors. Defined outside the
   max-width block since JS only ever creates/opens it on mobile, but
   opacity/visibility default keeps it inert on desktop. ── */
.mnav-menu {
  position: fixed;
  background: #0a1128;              /* dark navy blue */
  border: 1px solid var(--green, #b8e832);
  border-radius: 8px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 9000;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}

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

.mnav-item {
  display: block;
  padding: 13px 18px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--green, #b8e832);     /* green text */
  text-decoration: none;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(184,232,50,0.25); /* thin green separator */
}

.mnav-item:last-child {
  border-bottom: none;
}

.mnav-item:hover,
.mnav-item:active {
  background: rgba(184,232,50,0.1);
}


/* ────────────────────────────────────────────────────────────
   LANDING HERO — mobile text + trial button fit
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .hero-eyebrow {
    font-size: 10px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.1em !important;
  }

  .hero-h1 {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
    word-break: break-word;
  }

  .hero-sub {
    font-size: 13px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  .hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    width: 100%;
  }

  #heroCtaBtn.btn-lg {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    text-align: center;
    white-space: normal;
  }
}


/* ────────────────────────────────────────────────────────────
   DESKTOP RECOMMENDATION POPUP — landing page, mobile only
   ──────────────────────────────────────────────────────────── */
.mnav-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

.mnav-popup-box {
  position: relative;
  background: var(--panel, #0d1117);
  border: 0.5px solid var(--border, #1a1f2e);
  border-radius: 12px;
  padding: 28px 24px 24px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.mnav-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 50%;
  color: var(--white, #f0f0f0);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mnav-popup-text {
  font-family: var(--sans, 'Syne', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--white, #f0f0f0);
  margin: 8px 0 0;
  padding-right: 12px;
}

@media (min-width: 769px) {
  .mnav-popup-overlay {
    display: none !important;
  }
}