:root {
  --bg-page: #0B1120;
  --bg-dark: #0F172A;
  --bg-elevated: #1E293B;
  --bg-card-hover: #26354D;
  --border-muted: #475569;
  --border-subtle: #334155;
  --text-main: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #CBD5E1;
  --accent-cyan: #38BDF8;
  --accent-cyan-hover: #7DD3FC;
  --accent-green: #4ADE80;
  --accent-red: #F87171;
  --accent-amber: #FBBF24;
  --base-font-size: 18px;
}

html[data-font-scale="large"] {
  --base-font-size: 20.5px;
}

html[data-font-scale="xlarge"] {
  --base-font-size: 23px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Override any legacy dark-gray text on dark blue backgrounds across all pages */
p, li, span, div, label, td, th, small {
  color: inherit;
}

.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700,
.text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700,
.muted, .subtitle {
  color: var(--text-secondary) !important;
}

/* High-visibility keyboard focus indicator (WCAG 2.4.7 & 2.4.11) */
:focus-visible {
  outline: 3px solid var(--accent-cyan) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Skip to Main Content Link for Screen Readers & Keyboard Users */
.wom-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--accent-cyan);
  color: #0F172A;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s ease;
}

.wom-skip-link:focus {
  top: 12px;
}

.wom-header {
  background: var(--bg-dark);
  border-bottom: 2px solid var(--border-muted);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.wom-header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wom-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 1;
}

.wom-brand img,
.wom-logo {
  width: clamp(220px, 22vw, 340px) !important;
  height: auto !important;
  max-height: 120px !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}

.wom-nav-desktop {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wom-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.wom-nav-sep {
  width: 2px;
  height: 22px;
  background: var(--border-muted);
  display: inline-block;
}

.wom-nav-item {
  color: var(--text-main);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: 6px;
  padding: 8px 6px;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wom-nav-item:hover,
.wom-nav-item.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

.wom-status-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  display: inline-block;
}

/* Senior Accessibility Text Size Switcher */
.wom-a11y-controls {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.wom-a11y-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 700;
  padding: 6px 10px;
  min-height: 40px;
  min-width: 38px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.wom-a11y-btn.active,
.wom-a11y-btn:hover {
  background: var(--accent-cyan);
  color: #0F172A;
}

.wom-cart-pill {
  background: var(--bg-elevated);
  border: 2px solid var(--border-muted);
  color: var(--text-main);
  padding: 8px 14px;
  min-height: 48px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.wom-cart-pill:hover {
  border-color: var(--accent-cyan);
}

.wom-cart-count {
  background: var(--accent-cyan);
  color: #0F172A;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.85rem;
  font-weight: 800;
}

/* Minimum 48x48px Senior & ADA Touch Target Buttons */
.wom-btn {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}

.wom-btn-primary {
  background: var(--accent-cyan);
  color: #0F172A !important;
}

.wom-btn-primary:hover {
  background: var(--accent-cyan-hover);
}

.wom-btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-main) !important;
  border-color: var(--border-muted);
}

.wom-btn-secondary:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
}

.wom-btn-danger {
  background: #DC2626;
  color: #FFFFFF !important;
}

.wom-btn-login {
  background: var(--accent-cyan);
  color: #0F172A !important;
}

.wom-btn-login-sm {
  background: var(--accent-cyan);
  color: #0F172A !important;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

.wom-btn-account {
  background: var(--bg-elevated);
  color: var(--text-main) !important;
  border: 2px solid var(--border-muted);
  gap: 8px;
  padding: 8px 16px;
}

.wom-account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wom-dropdown {
  position: relative;
  display: inline-block;
}

.wom-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

.wom-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--bg-elevated);
  border: 2px solid var(--border-muted);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
  min-width: 270px;
  display: none;
  flex-direction: column;
  padding: 8px 0;
  z-index: 1005;
}

.wom-dropdown-menu.open {
  display: flex !important;
}

.wom-dropdown-header {
  padding: 12px 18px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  word-break: break-all;
}

.wom-dropdown-item {
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 46px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  text-align: left;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}

.wom-dropdown-item:hover {
  background: var(--bg-dark);
  color: var(--accent-cyan);
}

.wom-dropdown-divider {
  height: 1px;
  background: var(--border-muted);
  margin: 6px 0;
}

.wom-danger-text {
  color: var(--accent-red) !important;
  font-weight: 700;
}

.wom-mobile-controls {
  display: none;
  align-items: center;
  gap: 10px;
}

.wom-hamburger {
  background: var(--bg-elevated);
  border: 2px solid var(--border-muted);
  border-radius: 8px;
  color: var(--text-main);
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wom-drawer {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: min(360px, 100vw);
  background: var(--bg-elevated);
  border-left: 2px solid var(--border-muted);
  border-bottom: 2px solid var(--border-muted);
  border-bottom-left-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
  padding: 18px 22px 26px;
  z-index: 1005;
}

.wom-drawer.open {
  display: block !important;
}

.wom-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wom-drawer-link {
  color: var(--text-main);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  min-height: 48px;
  padding: 10px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wom-drawer-link.active,
.wom-drawer-link:hover {
  color: var(--accent-cyan);
}

.wom-drawer-divider {
  height: 1px;
  background: var(--border-muted);
  margin: 8px 0;
}

.wom-drawer-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-cyan);
  margin-top: 6px;
}

@media (max-width: 1024px) {
  .wom-nav-desktop {
    display: none;
  }
  .wom-mobile-controls {
    display: inline-flex;
  }
}

/* Homepage Hero & High-Contrast Sections */
.wom-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.wom-hero-badge {
  display: inline-block;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.wom-hero h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--text-main);
}

.wom-hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0 0 28px;
}

.wom-personas-section {
  max-width: 1280px;
  margin: 44px auto;
  padding: 0 24px;
}

.wom-personas-header {
  text-align: center;
  margin-bottom: 32px;
}

.wom-personas-header h2 {
  font-size: 1.85rem;
  color: var(--text-main);
  margin-bottom: 10px;
}

.wom-personas-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 760px;
  margin: 0 auto;
}

.wom-personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.wom-persona-card {
  background: var(--bg-elevated);
  border: 2px solid var(--border-muted);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-margin-top: 140px;
}

.wom-persona-card:target {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.3);
}

.wom-persona-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.wom-persona-desc {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 24px;
}

/* Referral Banner Component */
.wom-referral-banner {
  max-width: 1232px;
  margin: 48px auto;
  padding: 28px 32px;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border: 2px solid var(--accent-cyan);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.wom-footer {
  background: var(--bg-dark);
  border-top: 2px solid var(--border-muted);
  padding: 52px 24px 28px;
  margin-top: 64px;
  display: block !important;
}

.wom-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 36px;
}

.wom-footer-logo {
  width: 280px !important;
  height: auto !important;
  filter: brightness(0) invert(1);
  margin-bottom: 14px;
}

.wom-footer-col h4 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--text-main);
}

.wom-footer-col p {
  color: var(--text-secondary);
}

.wom-footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.wom-footer-col a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

.wom-notice-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-amber);
  margin-top: 6px;
}

.wom-footer-bar {
  max-width: 1280px;
  margin: 32px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .wom-hero {
    grid-template-columns: 1fr;
    padding: 32px 20px;
  }
  .wom-footer-grid {
    grid-template-columns: 1fr;
  }
}
EOF

# 2. Update web/components/wom-nav.js with ADA Skip-Link, Senior Text Resizer (A/A+/A++), GA4 + Stripe Event Dispatcher, and Referral Capture
cat << 'EOF' > web/components/wom-nav.js
(function initAnalyticsAndReferrals() {
  // Load GA4 tag dynamically if not already present
  if (!window.gtag) {
    window.dataLayer = window.dataLayer || [];
    window.gtag = function(){ window.dataLayer.push(arguments); };
    window.gtag('js', new Date());
    window.gtag('config', 'G-WOMMEASUREMENT', {
      anonymize_ip: true,
      page_path: window.location.pathname
    });
    const s = document.createElement('script');
    s.async = true;
    s.src = 'https://www.googletagmanager.com/gtag/js?id=G-WOMMEASUREMENT';
    document.head.appendChild(s);
  }

  // Capture referral code (?ref= or ?utm_source=) for attribution & Stripe checkout metadata
  try {
    const params = new URLSearchParams(window.location.search);
    const ref = params.get('ref') || params.get('referral') || params.get('utm_source');
    if (ref) {
      localStorage.setItem('wom_referral_code', ref.trim().slice(0, 64));
      window.gtag('event', 'referral_visit', {
        referral_code: ref.trim().slice(0, 64),
        landing_page: window.location.pathname
      });
    }
  } catch (e) {}

  // Global helper for firing GA4 + Stripe funnel telemetry events
  window.womTrack = function(eventName, payload = {}) {
    try {
      const refCode = localStorage.getItem('wom_referral_code') || 'direct';
      const enriched = { ...payload, referral_code: refCode, timestamp: new Date().toISOString() };
      if (typeof window.gtag === 'function') {
        window.gtag('event', eventName, enriched);
      }
    } catch (e) {}
  };

  // Restore saved Senior Font Scale preference immediately
  const savedScale = localStorage.getItem('wom_font_scale') || 'normal';
  document.documentElement.setAttribute('data-font-scale', savedScale);
})();

class WomNavigation extends HTMLElement {
  constructor() {
    super();
    this._flyoutTimer = null;
    this._drawerTimer = null;
    this._boundCartListener = () => this.updateCartBadgesOnly();
    this._boundOutsideClick = (e) => {
      if (!this.contains(e.target)) {
        const profileMenu = this.querySelector('#womProfileMenu');
        const drawer = this.querySelector('#womDrawer');
        if (profileMenu) profileMenu.classList.remove('open');
        if (drawer) drawer.classList.remove('open');
      }
    };
  }

  connectedCallback() {
    this.render();
    window.removeEventListener('wom-cart-updated', this._boundCartListener);
    window.addEventListener('wom-cart-updated', this._boundCartListener);
    document.removeEventListener('pointerdown', this._boundOutsideClick);
    document.addEventListener('pointerdown', this._boundOutsideClick);
  }

  disconnectedCallback() {
    window.removeEventListener('wom-cart-updated', this._boundCartListener);
    document.removeEventListener('pointerdown', this._boundOutsideClick);
  }

  static getCartTotalItems() {
    try {
      const raw = localStorage.getItem('wom_cart');
      if (!raw) return 0;
      const c = JSON.parse(raw);
      if (!c || c.isEmpty === true) return 0;
      const hasHub = (c.mode === 'kit_400') || (c.mode === 'custom_individual' && c.includeStandaloneHub === true);
      let count = hasHub ? 1 : 0;
      const extras = c.extraSensors || {};
      count += (Number(extras.reed) || 0) + (Number(extras.pir) || 0) + (Number(extras.mmwave) || 0) + (Number(extras.button) || 0);
      return count;
    } catch (e) {
      return 0;
    }
  }

  static setFontScale(scale) {
    localStorage.setItem('wom_font_scale', scale);
    document.documentElement.setAttribute('data-font-scale', scale);
    document.querySelectorAll('.wom-a11y-btn').forEach(btn => {
      btn.classList.toggle('active', btn.getAttribute('data-scale') === scale);
    });
    if (window.womTrack) window.womTrack('accessibility_font_scale', { scale });
  }

  updateCartBadgesOnly() {
    const count = WomNavigation.getCartTotalItems();
    this.querySelectorAll('.wom-cart-count').forEach(badge => {
      badge.textContent = String(count);
    });
    const drawerCartLink = this.querySelector('#womDrawerCartLink');
    if (drawerCartLink) {
      drawerCartLink.textContent = `Cart & Setup Wizard (${count})`;
    }
  }

  render() {
    const page = this.getAttribute('active') || '';
    const userSession = localStorage.getItem('wom_user_session');
    const user = userSession ? JSON.parse(userSession) : null;
    const displayName = user?.name || user?.email?.split('@')[0] || 'Account';
    const cartCount = WomNavigation.getCartTotalItems();
    const currentScale = localStorage.getItem('wom_font_scale') || 'normal';

    this.innerHTML = `
      <a href="#main-content" class="wom-skip-link">Skip to Main Content</a>
      <header class="wom-header" role="banner">
        <div class="wom-header-container">
          <a href="/index.html" class="wom-brand" aria-label="Watch Over Me Home">
            <img src="/logo.png" alt="Watch Over Me" class="wom-logo" />
          </a>

          <div class="wom-nav-desktop">
            <nav class="wom-links" aria-label="Primary Navigation">
              <a href="/index.html#families" class="wom-nav-item ${page === 'families' ? 'active' : ''}">Families</a>
              <a href="/index.html#seniors" class="wom-nav-item ${page === 'seniors' ? 'active' : ''}">Seniors</a>
              <a href="/index.html#solo" class="wom-nav-item ${page === 'solo' ? 'active' : ''}">Solo &amp; Pets</a>
              <span class="wom-nav-sep" aria-hidden="true"></span>
              <a href="/store.html" class="wom-nav-item ${page === 'shop' ? 'active' : ''}">Shop</a>
              <a href="/support.html" class="wom-nav-item ${page === 'support' ? 'active' : ''}">Help</a>
              <a href="/status.html" class="wom-nav-item ${page === 'status' ? 'active' : ''}" title="System Health">
                <span class="wom-status-pip" aria-hidden="true"></span>Status
              </a>
            </nav>

            <div class="wom-a11y-controls" role="group" aria-label="Text Size Adjustment">
              <button type="button" class="wom-a11y-btn ${currentScale === 'normal' ? 'active' : ''}" data-scale="normal" onclick="WomNavigation.setFontScale('normal')" title="Standard Text Size" aria-label="Standard Text Size">A</button>
              <button type="button" class="wom-a11y-btn ${currentScale === 'large' ? 'active' : ''}" data-scale="large" onclick="WomNavigation.setFontScale('large')" title="Large Text Size" aria-label="Large Text Size">A+</button>
              <button type="button" class="wom-a11y-btn ${currentScale === 'xlarge' ? 'active' : ''}" data-scale="xlarge" onclick="WomNavigation.setFontScale('xlarge')" title="Extra Large Senior Text Size" aria-label="Extra Large Text Size">A++</button>
            </div>

            <div class="wom-auth-slot" style="display:flex; align-items:center; gap:12px;">
              <a href="/onboarding.html" class="wom-cart-pill" aria-label="Shopping Cart with ${cartCount} items">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                <span>Cart</span>
                <span class="wom-cart-count">${cartCount}</span>
              </a>

              ${user ? `
                <div class="wom-dropdown" id="womDesktopDropdown">
                  <a href="/portal.html" class="wom-btn wom-btn-account" id="womProfileBtn" aria-haspopup="true">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                    <span class="wom-account-name">${displayName}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
                  </a>
                  <div class="wom-dropdown-menu" id="womProfileMenu" role="menu">
                    <div class="wom-dropdown-header">Signed in as <strong>${user.email || 'User'}</strong></div>
                    <a href="/onboarding.html?step=1" class="wom-dropdown-item" role="menuitem">Profile &amp; Billing Address</a>
                    <a href="/onboarding.html?step=2" class="wom-dropdown-item" role="menuitem">Cart, Sensors &amp; Shipping</a>
                    <a href="/onboarding.html?step=3" class="wom-dropdown-item" role="menuitem">Household, Pets &amp; Rules</a>
                    <a href="/portal.html#subscriptions" class="wom-dropdown-item" role="menuitem">Subscriptions &amp; Orders</a>
                    <a href="/portal.html#referral" class="wom-dropdown-item" role="menuitem">Refer a Friend ($25 Credit)</a>
                    <a href="/privacy.html" class="wom-dropdown-item" role="menuitem">Privacy &amp; Data Rights</a>
                    <div class="wom-dropdown-divider"></div>
                    <button class="wom-dropdown-item wom-danger-text" id="womDesktopLogoutBtn" role="menuitem">Sign Out</button>
                  </div>
                </div>
              ` : `
                <a href="/login.html" class="wom-btn wom-btn-login">Sign In</a>
              `}
            </div>
          </div>

          <div class="wom-mobile-controls" id="womMobileTriggerZone">
            <a href="/onboarding.html" class="wom-cart-pill" aria-label="Cart with ${cartCount} items">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
              <span class="wom-cart-count">${cartCount}</span>
            </a>
            ${user ? `
              <a href="/portal.html" class="wom-btn wom-btn-login-sm">${displayName}</a>
            ` : `
              <a href="/login.html" class="wom-btn wom-btn-login-sm">Sign In</a>
            `}
            <button class="wom-hamburger" id="womBurgerBtn" aria-label="Open Navigation Menu" aria-expanded="false">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
            </button>
          </div>
        </div>

        <div class="wom-drawer" id="womDrawer" aria-hidden="true">
          <nav class="wom-drawer-nav" aria-label="Mobile Navigation">
            <div class="wom-drawer-section-label">Text Size (Accessibility)</div>
            <div class="wom-a11y-controls" style="margin-bottom:8px;">
              <button type="button" class="wom-a11y-btn ${currentScale === 'normal' ? 'active' : ''}" data-scale="normal" onclick="WomNavigation.setFontScale('normal')">Standard (A)</button>
              <button type="button" class="wom-a11y-btn ${currentScale === 'large' ? 'active' : ''}" data-scale="large" onclick="WomNavigation.setFontScale('large')">Large (A+)</button>
              <button type="button" class="wom-a11y-btn ${currentScale === 'xlarge' ? 'active' : ''}" data-scale="xlarge" onclick="WomNavigation.setFontScale('xlarge')">Senior (A++)</button>
            </div>
            <div class="wom-drawer-divider"></div>
            <div class="wom-drawer-section-label">Who We Protect</div>
            <a href="/index.html#families" class="wom-drawer-link">For Families</a>
            <a href="/index.html#seniors" class="wom-drawer-link">For Seniors</a>
            <a href="/index.html#solo" class="wom-drawer-link">For Solo &amp; Pets</a>
            <div class="wom-drawer-divider"></div>
            <a href="/store.html" class="wom-drawer-link ${page === 'shop' ? 'active' : ''}">Shop Hardware &amp; Sensors</a>
            <a href="/onboarding.html" class="wom-drawer-link" id="womDrawerCartLink">Cart &amp; Setup Wizard (${cartCount})</a>
            <a href="/support.html" class="wom-drawer-link ${page === 'support' ? 'active' : ''}">Help &amp; Support</a>
            <a href="/status.html" class="wom-drawer-link ${page === 'status' ? 'active' : ''}">
              <span class="wom-status-pip" aria-hidden="true"></span> System Health
            </a>
            ${user ? `
              <div class="wom-drawer-divider"></div>
              <div class="wom-drawer-section-label">Account (${user.email || 'Active'})</div>
              <a href="/onboarding.html?step=1" class="wom-drawer-link">Profile &amp; Billing Address</a>
              <a href="/onboarding.html?step=2" class="wom-drawer-link">Cart, Sensors &amp; Shipping</a>
              <a href="/onboarding.html?step=3" class="wom-drawer-link">Household, Pets &amp; Rules</a>
              <a href="/portal.html#subscriptions" class="wom-drawer-link">Subscriptions &amp; Orders</a>
              <a href="/privacy.html" class="wom-drawer-link">Privacy &amp; Data Rights</a>
              <button class="wom-drawer-link wom-danger-text wom-drawer-btn" id="womDrawerLogoutBtn">Sign Out</button>
            ` : `
              <div class="wom-drawer-divider"></div>
              <a href="/login.html" class="wom-btn wom-btn-primary" style="margin-top:8px;">Sign In / Create Profile</a>
            `}
          </nav>
        </div>
      </header>
    `;

    this.bindMenuInteractions();
  }

  bindMenuInteractions() {
    const desktopDropdown = this.querySelector('#womDesktopDropdown');
    const profileMenu = this.querySelector('#womProfileMenu');

    if (desktopDropdown && profileMenu) {
      const openFlyout = () => {
        if (this._flyoutTimer) {
          clearTimeout(this._flyoutTimer);
          this._flyoutTimer = null;
        }
        profileMenu.classList.add('open');
      };
      const scheduleCloseFlyout = () => {
        if (this._flyoutTimer) clearTimeout(this._flyoutTimer);
        this._flyoutTimer = setTimeout(() => {
          profileMenu.classList.remove('open');
        }, 300);
      };

      desktopDropdown.addEventListener('pointerenter', openFlyout);
      desktopDropdown.addEventListener('pointerleave', scheduleCloseFlyout);
      profileMenu.addEventListener('pointerenter', openFlyout);
      profileMenu.addEventListener('pointerleave', scheduleCloseFlyout);
    }

    const burgerBtn = this.querySelector('#womBurgerBtn');
    const drawer = this.querySelector('#womDrawer');

    if (burgerBtn && drawer) {
      const openDrawer = () => {
        if (this._drawerTimer) {
          clearTimeout(this._drawerTimer);
          this._drawerTimer = null;
        }
        drawer.classList.add('open');
        burgerBtn.setAttribute('aria-expanded', 'true');
      };
      const scheduleCloseDrawer = () => {
        if (this._drawerTimer) clearTimeout(this._drawerTimer);
        this._drawerTimer = setTimeout(() => {
          drawer.classList.remove('open');
          burgerBtn.setAttribute('aria-expanded', 'false');
        }, 320);
      };

      burgerBtn.addEventListener('pointerenter', openDrawer);
      burgerBtn.addEventListener('pointerleave', scheduleCloseDrawer);
      burgerBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        if (drawer.classList.contains('open')) {
          drawer.classList.remove('open');
        } else {
          openDrawer();
        }
      });

      drawer.addEventListener('pointerenter', openDrawer);
      drawer.addEventListener('pointerleave', scheduleCloseDrawer);

      drawer.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          drawer.classList.remove('open');
        });
      });
    }

    const dLogout = this.querySelector('#womDesktopLogoutBtn');
    if (dLogout) dLogout.addEventListener('click', () => WomNavigation.logout());
    const mLogout = this.querySelector('#womDrawerLogoutBtn');
    if (mLogout) mLogout.addEventListener('click', () => WomNavigation.logout());
  }

  static logout() {
    if (window.womTrack) window.womTrack('user_logout');
    localStorage.removeItem('wom_user_session');
    window.location.href = '/index.html';
  }
}

class WomFooter extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <footer class="wom-footer" role="contentinfo">
        <div class="wom-footer-grid">
          <div class="wom-footer-col">
            <img src="/logo.png" alt="Watch Over Me" class="wom-footer-logo" />
            <p>Architectural, camera-free ambient welfare monitoring designed for personal autonomy, senior dignity, and solo-dweller peace of mind.</p>
            <div class="wom-footer-cust-service">
              <strong>Technical Support &amp; Customer Care:</strong><br/>
              <a href="tel:+18005550199" class="wom-phone-link" style="color:#38BDF8; font-weight:700; text-decoration:underline;">1 (800) 555-0199</a>
              <span class="wom-notice-badge">Non-Emergency Technical Assistance Only</span>
            </div>
          </div>
          <div class="wom-footer-col">
            <h4>Explore &amp; Shop</h4>
            <a href="/index.html#families">For Families &amp; Adult Children</a>
            <a href="/index.html#seniors">For Seniors &amp; Aging in Place</a>
            <a href="/index.html#solo">For Solo Adults &amp; Pet Guardians</a>
            <a href="/store.html">Shop Complete Kit &amp; Sensors</a>
            <a href="/onboarding.html">Cart &amp; Setup Wizard</a>
          </div>
          <div class="wom-footer-col">
            <h4>Support, Status &amp; Privacy</h4>
            <a href="/support.html">Technical FAQs &amp; Setup Guide</a>
            <a href="/status.html">Live System Health</a>
            <a href="/privacy.html">Privacy Policy &amp; HIPAA/ADA Commitment</a>
            <a href="/privacy.html#forget-me">Data Erasure ("Forget Me")</a>
            <a href="/terms.html">Terms of Service</a>
          </div>
        </div>
        <div class="wom-footer-bar">
          <p>&copy; ${new Date().getFullYear()} Infinite Solutions LLC. All rights reserved. Built to WCAG 2.1 AA Accessibility Standards.</p>
        </div>
      </footer>
    `;
  }
}

customElements.define('wom-navigation', WomNavigation);
customElements.define('wom-footer', WomFooter);


.wom-persona-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--border-muted);
  background: var(--bg-dark);
}

.wom-persona-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}