/* ============================================================================
   AppWT Analytics design system, v2026-10-08 (A.D.A.M. for O.W.E.N., PLAN F6)
   ONE THEME, LIGHT, FORCED (optimization module PART 112): Pearl ground, black
   type, black and charcoal chrome bands (site header, footer, closing CTA band,
   promo card), and Champagne Gold as the ONE accent.
   - Gold #C4A052 is a FILL and a border, or text on black. On Pearl it is 2.37:1,
     so gold TEXT on a light ground uses --c-gold-text #806224 (5.45:1 on #FAFAFA).
   - The body ground is a flat colour, never a gradient image: a background image
     on <body> makes every contrast audit skip the whole page.
   - prefers-color-scheme is not honoured anywhere. color-scheme is light.
   Linked from the <head> by pages/includes/header.php, and again (same URL, cached)
   by pages/includes/footer.php for pages that do not use the shared header.
   Prior version: analytics-2026.css.bak-analytics-1008-20261008 (black ground).
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- the brand, named --- */
  --c-ground:   #FAFAFA;   /* Pearl, never pure #FFFFFF */
  --c-band:     #F3F1EC;   /* alternate light band */
  --c-card:     #FCFBF8;   /* card on Pearl, always with a border */
  --c-ink:      #0A0A0A;
  --c-ink-2:    #333333;   /* 12.1:1 on Pearl */
  --c-muted:    #555555;   /* 7.14:1 on Pearl, 6.6:1 on the band */
  --c-line:     #E2DED4;
  --c-black:    #0A0A0A;
  --c-charcoal: #1A1A1A;
  --c-charcoal-2: #222222;
  --c-gold:     #C4A052;   /* fills and borders; black text on it is 8.01:1 */
  --c-gold-text:#806224;   /* gold text on Pearl, 5.45:1 */
  --c-warm-gray:#A3B5CC;

  /* --- legacy tokens every page already reads, mapped to the light theme --- */
  --bg-primary:   var(--c-ground);
  --bg-secondary: var(--c-band);
  --surface-2:    var(--c-card);
  --surface-3:    #EFECE4;
  --text-primary:   var(--c-ink);
  --text-secondary: var(--c-ink-2);
  --text-muted:     var(--c-muted);
  --gold:        var(--c-gold);
  --gold-bright: #D8BE79;
  --gold-deep:   #9C7E3A;
  --gold-grad:   linear-gradient(135deg, #E7CE8B 0%, #C4A052 45%, #9C7E3A 100%);
  --link:        var(--c-gold-text);
  --verified: #2E6B4F;     /* status only; 6.04:1 on Pearl */
  --alert:    #9A4F24;     /* status only; 5.72:1 on Pearl */
  --border-color: var(--c-line);
  --border-soft:  rgba(10,10,10,0.06);
  --shadow-lg: 0 18px 44px rgba(10,10,10,0.10);
  --shadow-sm: 0 2px 10px rgba(10,10,10,0.06);

  /* legacy accents: on the light ground they are the TEXT-safe gold */
  --accent-blue:   var(--c-gold-text);
  --accent-cyan:   var(--c-gold-text);
  --accent-purple: var(--c-gold-text);
  --accent-orange: var(--c-gold-text);
  --accent-gold:   var(--c-gold-text);
  --accent-pink:   var(--alert);
  --accent-green:  var(--verified);
  --accent-red:    var(--alert);
  --gold-dark:     var(--gold-deep);
}

/* --- dark chrome bands: the site header, the site footer, the closing CTA band,
       the promo card, and any block that opts in with .aw-dark --- */
body > header, header.aw-site-header, footer[role="contentinfo"], .aw-dark, .cta, .appwt-promo-popup, .hero-video {
  --bg-primary:   var(--c-black);
  --bg-secondary: #141414;
  --surface-2:    #1C1C1C;
  --surface-3:    #242424;
  --text-primary:   #FAFAFA;
  --text-secondary: var(--c-warm-gray);   /* 9.46:1 on black */
  --text-muted:     #8C97A8;              /* 6.7:1 on black */
  --link:        var(--c-gold);
  --verified: #4FB286;
  --alert:    #C97A4A;
  --border-color: rgba(196,160,82,0.22);
  --border-soft:  rgba(255,255,255,0.06);
  --accent-blue:   var(--c-gold);
  --accent-cyan:   var(--c-gold);
  --accent-purple: var(--c-gold);
  --accent-orange: var(--c-gold);
  --accent-gold:   var(--c-gold);
  --accent-green:  #4FB286;
  --accent-red:    #C97A4A;
  --accent-pink:   #C97A4A;
  color: var(--text-primary);
}

/* ---------- base ---------- */
html { background: var(--c-ground); }
body {
  background: var(--c-ground) !important;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html, body { max-width: 100%; overflow-x: hidden; }
::selection { background: rgba(196,160,82,0.35); color: var(--c-ink); }
h1, h2, h3, h4 { color: var(--text-primary); }

/* ---------- links ---------- */
a { color: var(--link); }
a:hover { color: var(--text-primary); }

/* ---------- the site header (black band) ---------- */
body > header, header.aw-site-header {
  background: var(--c-black) !important;
  border-bottom: 1px solid rgba(196,160,82,0.22) !important;
  padding: 10px 0 !important;
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
}
body > header .header-content, header.aw-site-header .header-content {
  display: flex; align-items: center; gap: 14px; flex-direction: row !important; padding: 0 !important;
  flex-wrap: nowrap; justify-content: space-between;
}
body > header .logo, header.aw-site-header .logo { gap: 10px; display: flex; align-items: center; text-decoration: none; order: 0 !important; min-height: 44px; flex: none; }
body > header .logo img, header.aw-site-header .logo img, .header-content .logo img {
  height: 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  position: static !important; object-fit: contain !important; border-radius: 10px;
  border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important;
  margin: 0 !important; transform: none !important;
}
body > header .logo-text, header.aw-site-header .logo-text {
  display: inline-block !important; color: #FAFAFA; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; line-height: 1.1;
}
body > header .logo-text span, header.aw-site-header .logo-text span { color: var(--c-gold); font-weight: 800; }
body > header .main-nav, header.aw-site-header .main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
body > header .nav-link, header.aw-site-header .nav-link {
  color: var(--c-warm-gray); font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px;
  background: transparent; text-decoration: none; transition: color .18s ease;
}
body > header .nav-link:hover, body > header .nav-link.active,
header.aw-site-header .nav-link:hover, header.aw-site-header .nav-link.active { color: var(--c-gold); background: transparent; }
body > header .nav-link.active, header.aw-site-header .nav-link.active { position: relative; }
body > header .nav-link.active::after, header.aw-site-header .nav-link.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--gold-grad); border-radius: 2px;
}
body > header .nav-buttons, header.aw-site-header .nav-buttons { display: flex; align-items: center; gap: 10px; flex: none; }
.aw-header-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 14px;
  color: #FAFAFA !important; font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none;
  border: 1px solid rgba(196,160,82,0.55); border-radius: 999px; flex: none;
}
.aw-header-phone:hover { border-color: var(--c-gold); color: var(--c-gold) !important; }
.aw-header-phone svg { flex: none; color: var(--c-gold); }
body > header .mobile-toggle, header.aw-site-header .mobile-toggle {
  display: none; position: static !important; transform: none !important; background: transparent; border: 0;
  color: #FAFAFA; min-width: 44px; min-height: 44px; padding: 0; font-size: 28px; cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}

/* narrower desktops: the phone pill becomes a 44px icon */
@media (max-width: 1180px) {
  body > header .nav-link, header.aw-site-header .nav-link { padding: 0 10px; font-size: 14px; }
  .aw-header-phone .aw-phone-num { display: none; }
  .aw-header-phone { padding: 0; width: 44px; }
}
/* phone and tablet: ONE compact bar. Logo, call, Get Started Free and the menu button stay on
   screen; only the page links fold into the menu (PLAN F1: the CTA is never inside the menu). */
@media (max-width: 900px) {
  body > header .main-nav, header.aw-site-header .main-nav {
    display: none !important; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: var(--c-black); flex-direction: column; align-items: stretch; padding: 8px 16px 16px;
    border-bottom: 1px solid rgba(196,160,82,0.22); gap: 0;
  }
  body > header .main-nav.active, header.aw-site-header .main-nav.active { display: flex !important; }
  body > header .main-nav .nav-link, header.aw-site-header .main-nav .nav-link { min-height: 48px; font-size: 16px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  body > header .nav-link.active::after, header.aw-site-header .nav-link.active::after { display: none; }
  body > header .mobile-toggle, header.aw-site-header .mobile-toggle { display: inline-flex !important; }
  body > header .nav-buttons, header.aw-site-header .nav-buttons { display: flex !important; flex-direction: row !important; width: auto !important; padding: 0 !important; gap: 8px; margin-left: auto; }
  body > header .nav-buttons .aw-login, header.aw-site-header .nav-buttons .aw-login { display: none !important; }
  body > header .nav-buttons .btn, header.aw-site-header .nav-buttons .btn { width: auto !important; max-width: none !important; white-space: nowrap !important; padding: 0 14px !important; }
}
@media (min-width: 901px) { .aw-menu-only { display: none !important; } }
@media (max-width: 420px) {
  body > header .logo-text, header.aw-site-header .logo-text { font-size: 14px; }
  body > header .logo-text span, header.aw-site-header .logo-text span { display: block; }
  body > header .nav-buttons .btn-primary, header.aw-site-header .nav-buttons .btn-primary { padding: 0 11px !important; font-size: 14px !important; }
  body > header .container, header.aw-site-header .container { padding: 0 12px !important; }
  body > header .header-content, header.aw-site-header .header-content { gap: 6px; }
  body > header .nav-buttons, header.aw-site-header .nav-buttons { gap: 6px; }
}
@media (max-width: 359px) {
  body > header .logo-text, header.aw-site-header .logo-text { display: none !important; }
}

/* ---------- buttons ---------- */
.btn { min-height: 44px; min-width: 44px; border-radius: 10px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary, .btn.btn-primary {
  background: var(--gold-grad) !important;
  color: var(--c-ink) !important; font-weight: 800 !important;
  border: 0 !important; box-shadow: 0 6px 18px rgba(156,126,58,0.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover, .btn.btn-primary:hover { color: var(--c-ink) !important; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(156,126,58,0.36); }
.btn-outline, .btn.btn-outline {
  background: transparent !important; color: var(--c-ink) !important;
  border: 1.5px solid var(--c-ink) !important; font-weight: 700 !important;
  transition: background .2s ease, color .2s ease;
}
.btn-outline:hover, .btn.btn-outline:hover { background: var(--c-ink) !important; color: #FAFAFA !important; }
body > header .btn-outline, header.aw-site-header .btn-outline, footer[role="contentinfo"] .btn-outline, .aw-dark .btn-outline, .cta .btn-outline {
  color: var(--c-gold) !important; border-color: var(--c-gold) !important;
}
body > header .btn-outline:hover, header.aw-site-header .btn-outline:hover, .aw-dark .btn-outline:hover, .cta .btn-outline:hover {
  background: rgba(196,160,82,0.12) !important; color: var(--gold-bright) !important;
}

/* ---------- hero (legacy pages) ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-line); }
.hero:not(.hero-video) { background: var(--c-ground); }
/* .hero-video (the /serves/ location pages) keeps its own dark video overlay and is a dark band above;
   the black ground under it is what shows if the video does not load. */
.hero-video { background: var(--c-black); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196,160,82,0.12); color: var(--link);
  border: 1px solid rgba(156,126,58,0.35); border-radius: 999px;
  padding: 7px 16px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.hero h1 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; color: var(--text-primary); }
.hero h1 .highlight, .hero h1 .em { color: var(--link); -webkit-text-fill-color: currentColor; background: none; }
.speakable-intro, .hero p { color: var(--text-secondary); }
.price-highlight { color: var(--c-ink-2); }
.price-highlight span { color: var(--c-ink); font-weight: 800; }

/* ---------- section rhythm + titles ---------- */
.section-title h2, .video-demo h2, .bot-filtering h2, .features h2, .how-it-works h2, .stats-section h2 {
  color: var(--c-ink); letter-spacing: -0.02em; font-weight: 800;
}
.section-title p, .video-demo p, .bot-filtering > .container > p { color: var(--c-ink-2); }
.video-demo, .how-it-works, .stats-section { background: var(--c-ground); }
.bot-filtering, .features { background: var(--c-band); }
section { border-color: var(--c-line) !important; }
.page-header { background: var(--c-ground); border-bottom: 1px solid var(--c-line); }
.page-header h1 { color: var(--c-ink); }
.page-header p { color: var(--c-ink-2); }

/* ---------- cards ---------- */
.bot-type-card, .feature-card, .stat-card, .step, .card, .features .feature, .how-it-works .step {
  background: var(--c-card) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.bot-type-card:hover, .feature-card:hover, .stat-card:hover, .card:hover {
  transform: translateY(-3px); border-color: rgba(156,126,58,0.55) !important; box-shadow: var(--shadow-lg);
}
.icon, .bot-type-card .icon, [class*="icon"].purple, [class*="icon"].cyan,
[class*="icon"].blue, [class*="icon"].orange, [class*="icon"].green { color: var(--c-gold-text) !important; }
.feature-icon, .feature-icon.blue, .feature-icon.green, .feature-icon.purple,
.feature-icon.orange, .feature-icon.cyan, .feature-icon.red, .feature-icon.teal,
.feature-icon.indigo, .feature-icon.pink, .feature-icon.gold, .bot-type-card .icon.green, .bot-type-card .icon.purple,
.bot-type-card .icon.red, .bot-type-card .icon.blue {
  background: rgba(196,160,82,0.14) !important; color: var(--c-gold-text) !important; border: 1px solid rgba(156,126,58,0.30) !important;
}
.feature-icon .material-symbols-outlined, .bot-type-card .icon .material-symbols-outlined { color: var(--c-gold-text) !important; }
.material-symbols-outlined { color: inherit; }
.stat-number, .stats-section .number, .stat h3 { color: var(--c-gold-text) !important; }

/* ---------- FAQ blocks (shared header styles) ---------- */
.faq-section { background: var(--c-band); }
.faq-item { background: var(--c-card); border: 1px solid var(--c-line); }
.faq-question:hover { background: var(--c-band); }
.faq-answer { color: var(--c-ink-2); }

/* ---------- the closing CTA band: black, gold button ---------- */
.cta, .cta.speakable-cta {
  background: var(--c-black) !important;
  border-top: 1px solid rgba(196,160,82,0.22); border-bottom: 1px solid rgba(196,160,82,0.22);
}
.cta h2 { color: #FAFAFA; }
.cta p { color: var(--c-warm-gray); }

/* ---------- retint stray hard-coded oranges (legacy inline styles) ---------- */
[style*="rgba(249, 115, 22"], [style*="rgba(249,115,22"] { background: rgba(196,160,82,0.10) !important; border-color: var(--gold-deep) !important; }
[style*="rgba(249, 115, 22"] p, [style*="rgba(249,115,22"] p,
[style*="color: var(--accent-orange)"], [style*="color:var(--accent-orange)"] { color: var(--c-gold-text) !important; }

/* ---------- legacy inline gold TEXT (signup notice, tutorial notice): #C4A052 is 2.37:1 on Pearl.
   --link is #806224 on the light ground and #C4A052 inside a dark band, so one rule serves both. ---------- */
[style*="color: var(--gold"]:not([style*="background-color: var(--gold"]):not([style*="background: var(--gold"]),
[style*="color:var(--gold"]:not([style*="background-color:var(--gold"]):not([style*="background:var(--gold"]) { color: var(--link) !important; }

/* ---------- legacy components that used an accent token as a FILL with black text (signup submit,
   tutorial step numbers and platform tabs, cookie Accept, back-to-top, skip link, translate header).
   On the light theme the accent tokens are the text-safe #806224, and black on it is only 3.74:1,
   so these fills stay Champagne Gold (black on #C4A052 is 8.01:1). ---------- */
.submit-btn, .step-number, .platform-tab:hover, .platform-tab.active, .cookie-btn.accept,
.back-to-top, .skip-link:focus, .appwt-translate-header { background: var(--c-gold) !important; color: var(--c-ink) !important; }
.submit-btn:hover:not(:disabled), .cookie-btn.accept:hover { background: var(--gold-bright) !important; }
.appwt-translate-header h3, .appwt-translate-close { color: var(--c-ink) !important; }

/* ---------- footer (black band) ---------- */
footer[role="contentinfo"] { background: var(--c-black) !important; margin-top: 0 !important; padding: 40px 0 120px !important; border-top: 1px solid rgba(196,160,82,0.22); }
footer[role="contentinfo"] a { color: var(--c-warm-gray); }
footer[role="contentinfo"] a:hover { color: var(--c-gold); }
footer[role="contentinfo"] p { color: var(--c-warm-gray); }

/* ---------- forms on the light ground ---------- */
input, select, textarea { color-scheme: light; }

/* ---------- focus visibility (a11y floor) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-gold-text); outline-offset: 2px; border-radius: 4px;
}
body > header a:focus-visible, footer[role="contentinfo"] a:focus-visible, .aw-dark a:focus-visible, .cta a:focus-visible { outline-color: var(--c-gold); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- table / code readability ---------- */
table { color: var(--c-ink-2); }
th { color: var(--c-ink); }
code, pre { background: #F1EEE6; color: #3D2F0E; border: 1px solid var(--c-line); border-radius: 6px; }

/* ---------- "Sample data" badge (demo and home previews, PLAN L15) ---------- */
.aw-sample-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #3D2F0E; background: #F2E6C7; border: 1px solid #C9B27A; border-radius: 999px; padding: 3px 10px;
}