/* ===== FLOWSENSE NAV — shared across all pages =====
   Loaded AFTER style.css and any inline <style> blocks so it
   wins specificity ties via load order. Provides a polished
   nav with hover/focus dropdowns and matched action buttons. */

nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 247, 250, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-line);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 1.05rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 2rem;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.logo img { height: 46px; width: auto; display: block; }

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

/* Top-level nav items (links and dropdown toggles) */
.nav-links > a,
.nav-dropdown-toggle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;            /* ~16px */
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: none; border: none;
  padding: 0.35rem 0;
  cursor: pointer;
  line-height: 1.2;
  transition: color 0.18s ease;
  display: inline-flex; align-items: center;
}
.nav-links > a:hover,
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle {
  color: var(--teal);
}

/* Dropdown */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-toggle::after {
  content: '';
  display: inline-block;
  width: 0.42em; height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 0.55em;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after {
  opacity: 1;
  transform: rotate(225deg) translate(-2px, -2px);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -1rem;
  min-width: 248px;
  background: white;
  border: 1px solid var(--gray-line);
  border-radius: 6px;
  box-shadow: 0 18px 44px -16px rgba(15, 45, 69, 0.22);
  padding: 0.55rem 0;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.nav-dropdown::before {
  /* invisible hover bridge so the menu stays open between toggle and panel */
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 0.7rem;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown.is-open .nav-dropdown-toggle::after {
  opacity: 1;
  transform: rotate(225deg) translate(-2px, -2px);
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.7rem 1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-menu a:hover {
  background: var(--cloud-warm);
  color: var(--teal);
}

/* Action buttons (Login + Demo Request) — matched dimensions */
.nav-actions {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-left: 0.6rem;
}
.nav-btn {
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;        /* ~15px - readable, balanced */
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 0.62rem 1.2rem;
  height: 40px;
  border-radius: 4px;
  border: 1.5px solid var(--gray-line);
  color: var(--navy) !important;
  background: transparent;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nav-btn:hover {
  border-color: var(--teal);
  color: var(--teal) !important;
}
.nav-btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: white !important;
}
.nav-btn-primary:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: white !important;
}

/* Mobile menu button + panel */
.mobile-menu-btn {
  display: none;
  background: none; border: none;
  font-size: 1.6rem; color: var(--navy);
  cursor: pointer; padding: 0.3rem; line-height: 1;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--cloud);
  border-top: 1px solid var(--gray-line);
  padding: 0.6rem 2rem 1.4rem;
  gap: 0;
}
.mobile-menu.open { display: flex; }
.mobile-menu .mobile-section-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-mid);
  padding: 1.1rem 0 0.45rem;
  margin-top: 0.2rem;
  border-bottom: 1px solid var(--gray-line);
}
.mobile-menu a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--gray-line);
  transition: color 0.18s ease;
}
.mobile-menu a.indented { padding-left: 0.9rem; font-size: 0.95rem; }
.mobile-menu a:hover { color: var(--teal); }
.mobile-menu .mobile-actions {
  display: flex; gap: 0.6rem; padding-top: 1.1rem; margin-top: 0.5rem;
  border-top: 1px solid var(--gray-line);
}
.mobile-menu .mobile-actions a {
  flex: 1; padding: 0.75rem 1rem; border-bottom: none;
  text-align: center;
  border: 1.5px solid var(--gray-line);
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--navy);
}
.mobile-menu .mobile-actions a.primary {
  background: var(--navy); color: white; border-color: var(--navy);
}

@media (max-width: 1060px) {
  .nav-links { display: none; }
  .mobile-menu-btn { display: block; }
}
@media (max-width: 600px) {
  .nav-inner { padding: 0.8rem 1.1rem; gap: 1rem; }
  .logo img { height: 38px; }
  .mobile-menu { padding: 0.6rem 1.1rem 1.2rem; }
}

/* ===== TYPOGRAPHY POLISH (loaded last so it tops other stylesheets) =====
   Bumps base sizes sitewide for confident readability without going oversized.
   Inline-style pages still inherit these because nav.css is linked last. */

body {
  font-size: 1.0625rem;   /* 17px mobile baseline */
  line-height: 1.65;
}
@media (min-width: 768px) {
  body { font-size: 1.125rem; }   /* 18px desktop baseline */
}

/* Eyebrow — slightly larger so it reads cleanly */
.eyebrow { font-size: 0.82rem; letter-spacing: 0.18em; }

/* Buttons — bump from ~0.88rem to ~1rem (16px) for SaaS readability */
.btn {
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 1rem 1.85rem;
}

/* Hero copy: nudge up the lede */
.hero-lede {
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
}

/* Body paragraphs in major sections — nudge up small ones */
.diagnosis-body,
.why-now-body,
.what-body { font-size: 1.13rem; line-height: 1.8; }

.fork-card p { font-size: 1.05rem; line-height: 1.7; }
.fork-card h3 { font-size: clamp(1.7rem, 2.4vw, 2.05rem); }

.what-pill h4 { font-size: 1.25rem; }
.what-pill p { font-size: 1rem; line-height: 1.65; }

.demo-why-card h3 { font-size: 1.3rem; }
.demo-why-card p { font-size: 1.02rem; }
.demo-hero-text p { font-size: 1.1rem; }
.form-group label { font-size: 0.78rem; }
.form-group input,
.form-group select,
.form-group textarea { font-size: 0.98rem; padding: 0.85rem 1rem; }

.final-cta p { font-size: 1.13rem; }

.footer-tagline { font-size: 0.95rem; }
.footer-links a { font-size: 0.92rem; }

/* Headings nudge — ensure H2 lands in 36-48 range on desktop */
.diagnosis h2,
.fork-head h2,
.what-head h2,
.why-now h2,
.final-cta h2 {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1.18;
}

/* ===== HERO BACKGROUND IMAGE OVERLAY SUPPORT =====
   Usage:
   <section class="hero hero-bg" style="background-image: url('assets/yourimg.jpg');">
   The overlay keeps text readable. Tune --hero-overlay if needed. */

.hero.hero-bg {
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 24, 38, 0.86) 0%,
    rgba(15, 45, 69, 0.78) 55%,
    rgba(15, 45, 69, 0.92) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.hero.hero-bg .hero-inner { position: relative; z-index: 2; }
.hero.hero-bg::before { z-index: 1; }   /* keep grid lines above bg, below text */

/* ===== ICON UTILITY =====
   Inline SVG sizing helper. Used for tasteful section icons. */

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(13, 158, 122, 0.10);
  color: var(--teal);
  margin-bottom: 1rem;
}
.icon-tile svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-tile.on-dark {
  background: rgba(17, 200, 150, 0.14);
  color: var(--teal-bright);
}

/* Inline icon (smaller, for inside titles or counter rows) */
/* Outcome card icon — sits between number and h3 */
.outcome-card .icon-inline {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0.4rem 0 0.6rem;
  color: var(--teal, #0D9E7A);
}
.icon-inline {
  display: inline-flex;
  width: 20px; height: 20px;
  vertical-align: middle;
  color: var(--teal);
  margin-right: 0.45rem;
}
.icon-inline svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   LOGO ON DARK BACKGROUNDS
   The wordmark PNG is navy + teal, which disappears against
   the navy footer. Invert to pure white in dark contexts so
   it stays legible. Uses brightness(0) to flatten all colors
   to black, then invert(1) to flip to white.
   ========================================================= */
footer .footer-logo img,
.on-dark .logo img {
  filter: brightness(0) invert(1);
}