/* ===========================================================================
   WALI marketing homepage — "WhatsApp-Native & Warm" (Direction B)
   Bespoke design system. EVERYTHING here is scoped under `body.wali-home`
   so it can never leak into the rest of the (Tailwind v2, dark) app.

   This file is loaded by the warm public layout in views/layout.js, which
   also loads Tailwind v3 Play CDN + Plus Jakarta Sans + Inter. This stylesheet
   owns: design tokens, base type, the WhatsApp doodle texture, the shell
   chrome (nav / footer / sticky mobile CTA / skip link), the reusable
   component looks (hero phone + chat bubbles + lead card, leads wall cards,
   sandbox panel, pricing teaser, FAQ, buttons), the motion keyframes +
   helper classes used by the later GSAP stage, and a reduced-motion block
   that forces all final visible states (the page never depends on JS to show
   content).

   CONTRAST RULE: dark ink on light greens / paper; white ONLY on the deep/mid
   greens (#075E54 / #128C7E), NEVER on bright #25D366. All pairs target WCAG AA.
=========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens (scoped custom properties)
--------------------------------------------------------------------------- */
body.wali-home {
  /* WhatsApp greens */
  --wa-deep: #075E54;       /* deep teal-green — white text OK */
  --wa-deep-2: #054b43;     /* darker deep — white text OK */
  --wa-mid: #128C7E;        /* mid green — white text OK */
  --wa-bright: #25D366;     /* bright signal — DARK ink only, never white text */
  --wa-bright-2: #1ebe5a;   /* bright hover */
  --wa-sent: #D9FDD3;       /* sent-bubble light green */
  --wa-sent-2: #DCF8C6;     /* sent-bubble soft */

  /* warm chat-paper surfaces + cards */
  --paper: #ECE5DD;
  --paper-2: #EFEAE2;
  --card: #FFFFFF;

  /* ink */
  --ink: #0b141a;           /* near-black body/display ink */
  --ink-2: #3b4a54;         /* slate secondary */
  --ink-mute: #6b7c78;      /* muted captions */

  /* on-bright-green accessible ink (used for text/icons on #25D366) */
  --on-bright: #04261f;

  /* read-receipt tick */
  --tick: #34B7F1;

  /* fonts */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* premium shadows */
  --shadow-bubble: 0 1px 1px rgba(11, 31, 28, 0.06), 0 1px 0.5px rgba(11, 31, 28, 0.04);
  --shadow-card: 0 10px 30px -12px rgba(7, 94, 84, 0.25), 0 4px 10px -6px rgba(11, 31, 28, 0.12);
  --shadow-float: 0 24px 60px -20px rgba(7, 94, 84, 0.45);
  --shadow-phone: 0 40px 90px -30px rgba(5, 75, 67, 0.55), 0 12px 30px -16px rgba(11, 31, 28, 0.4);

  /* geometry */
  --radius-bubble: 14px;
}

/* ---------------------------------------------------------------------------
   2. Base
--------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body.wali-home {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* guard against the absolutely-positioned hero phone causing horizontal scroll */
  overflow-x: hidden;
  min-height: 100vh;
}

body.wali-home ::selection {
  background: var(--wa-sent);
  color: var(--wa-deep);
}

/* Display type — friendly rounded humanist sans, tight tracking */
body.wali-home .font-display,
body.wali-home h1,
body.wali-home h2,
body.wali-home h3 {
  font-family: var(--font-display);
  font-feature-settings: "ss01" 1, "cv01" 1;
  letter-spacing: -0.018em;
}
body.wali-home h1 { letter-spacing: -0.032em; line-height: 1.04; }
body.wali-home h2 { letter-spacing: -0.026em; line-height: 1.08; }

/* tracked-caps label */
body.wali-home .eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* utility text colors (for non-Tailwind authored markup) */
body.wali-home .text-ink { color: var(--ink); }
body.wali-home .text-ink-soft { color: var(--ink-2); }
body.wali-home .text-ink-mute { color: var(--ink-mute); }
body.wali-home .text-wa-teal { color: var(--wa-deep); }
body.wali-home .text-wa-green { color: var(--wa-mid); }

/* ---------------------------------------------------------------------------
   3. WhatsApp chat-wallpaper doodle texture (very faint inline-SVG data-URI)
   Applied only to warm sections via .wa-doodle. Decorative (aria-hidden in markup).
--------------------------------------------------------------------------- */
body.wali-home .wa-doodle {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23075E54' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'><path d='M22 30c5-7 15-7 20 0'/><circle cx='140' cy='34' r='8'/><path d='M120 128h22M120 137h15'/><path d='M34 140l10-10 10 10'/><path d='M78 74q10-12 20 0'/><rect x='70' y='22' width='20' height='15' rx='4'/><path d='M150 86c-4 5-11 5-15 0'/><path d='M16 88h18'/><path d='M58 150c6 0 6-8 0-8s-6 8 0 8'/><path d='M104 156l6-6 6 6'/></g></svg>");
  background-size: 320px 320px;
}

/* faint light-green doodle overlay for the deep-green sections */
body.wali-home .wa-doodle-dark {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23D9FDD3' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.9'><path d='M22 30c5-7 15-7 20 0'/><circle cx='140' cy='34' r='8'/><path d='M120 128h22M120 137h15'/><path d='M34 140l10-10 10 10'/><path d='M78 74q10-12 20 0'/><rect x='70' y='22' width='20' height='15' rx='4'/><path d='M150 86c-4 5-11 5-15 0'/><path d='M16 88h18'/></g></svg>");
  background-size: 320px 320px;
}

/* ---------------------------------------------------------------------------
   4. Buttons
--------------------------------------------------------------------------- */
/* primary green — DARK ink on bright green (never white text) */
body.wali-home .btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--on-bright);
  background: var(--wa-bright);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  box-shadow: var(--shadow-bubble);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.wali-home .btn-wa:hover { background: var(--wa-bright-2); }
body.wali-home .btn-wa--float { box-shadow: var(--shadow-float); }
body.wali-home .btn-wa--lg { padding: 1rem 1.75rem; font-size: 1.0625rem; }

/* secondary — warm card with deep-green ink */
body.wali-home .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--wa-deep);
  background: var(--card);
  border: 1px solid rgba(7, 94, 84, 0.2);
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  box-shadow: var(--shadow-bubble);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
body.wali-home .btn-ghost:hover { background: #fff; }

/* ---------------------------------------------------------------------------
   5. Shell chrome — nav, footer, sticky mobile CTA, skip link
--------------------------------------------------------------------------- */
/* skip link */
body.wali-home .skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--wa-deep);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s ease;
}
body.wali-home .skip-link:focus { top: 12px; }

/* sticky nav */
body.wali-home .wa-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 234, 226, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(7, 94, 84, 0.1);
}
body.wali-home .wa-nav-inner {
  max-width: 72rem;
  margin: 0 auto;
  height: 4rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.wali-home .wa-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}
body.wali-home .wa-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--wa-deep);
}
body.wali-home .wa-nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
body.wali-home .wa-nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
body.wali-home .wa-nav-link:hover { color: var(--wa-deep); }
/* on small screens, hide the secondary text links; keep brand + Start free */
@media (max-width: 640px) {
  body.wali-home .wa-nav-link:not(.btn-wa) { display: none; }
}

/* footer — deep green section */
body.wali-home .wa-footer {
  background: var(--wa-deep-2);
  color: rgba(255, 255, 255, 0.7);
}
body.wali-home .wa-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  body.wali-home .wa-footer-inner { flex-direction: row; text-align: left; }
}
body.wali-home .wa-footer .wa-wordmark { color: #fff; }
body.wali-home .wa-footer-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  flex-wrap: wrap;
  justify-content: center;
}
body.wali-home .wa-footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}
body.wali-home .wa-footer-links a:hover { color: #fff; }
body.wali-home .wa-footer-links span a { color: var(--wa-sent); }
body.wali-home .wa-footer-links span a:hover { text-decoration: underline; }

/* sticky mobile CTA bar — only visible below sm */
body.wali-home .wa-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: none;
}
@media (max-width: 640px) {
  body.wali-home .wa-mobile-cta { display: block; }
  /* reserve space so the fixed CTA bar never occludes the footer / final CTA */
  body.wali-home { padding-bottom: 5.5rem; }
}
body.wali-home .wa-mobile-cta-inner {
  margin: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: rgba(7, 94, 84, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
body.wali-home .wa-mobile-cta-copy { line-height: 1.2; }
body.wali-home .wa-mobile-cta-title { margin: 0; color: #fff; font-weight: 600; font-size: 0.875rem; }
body.wali-home .wa-mobile-cta-sub { margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.6875rem; }
body.wali-home .wa-mobile-cta-btn { margin-left: auto; }

/* ---------------------------------------------------------------------------
   6. Hero — phone, chat bubbles, lifted lead card
--------------------------------------------------------------------------- */
body.wali-home .phone-glow { position: relative; }
body.wali-home .phone-glow::before {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(closest-side, rgba(37, 211, 102, 0.35), transparent 70%);
  filter: blur(20px);
  z-index: -1;
}

/* phone shell */
body.wali-home .phone-frame {
  position: relative;
  border-radius: 2.4rem;
  background: #0a0a0a;
  padding: 0.625rem;
  box-shadow: var(--shadow-phone);
}
body.wali-home .phone-screen {
  border-radius: 2rem;
  overflow: hidden;
  background: var(--paper);
}
body.wali-home .phone-header {
  background: var(--wa-deep);
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* chat bubbles */
body.wali-home .chat-bubble {
  max-width: 80%;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
  border-radius: var(--radius-bubble);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow-bubble);
}
/* incoming (left) — white bubble, sender label in mid green */
body.wali-home .chat-bubble--in {
  background: var(--card);
  border-top-left-radius: 4px;
}
/* outgoing / sent (right) — light green */
body.wali-home .chat-bubble--out {
  background: var(--wa-sent);
  border-top-right-radius: 4px;
}
body.wali-home .chat-sender {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--wa-mid);
  margin-bottom: 0.125rem;
}
body.wali-home .chat-time {
  display: block;
  font-size: 9px;
  color: var(--ink-mute);
  text-align: right;
  margin-top: 0.125rem;
}

/* gentle scanning sweep over the chat */
@keyframes waScanSweep {
  0%   { transform: translateY(-120%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(420%); opacity: 0; }
}
body.wali-home .scan-line {
  background: linear-gradient(180deg, transparent, rgba(37, 211, 102, 0.55), transparent);
  animation: waScanSweep 1.4s ease-in-out infinite;
}

/* live dot pulse */
@keyframes waLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); }
}
body.wali-home .live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--wa-bright);
  animation: waLivePulse 2s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   7. Lead card (hero card + leads-wall cards)
--------------------------------------------------------------------------- */
body.wali-home .lead-card {
  background: var(--card);
  border: 1px solid rgba(7, 94, 84, 0.1);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* confidence accent bar (left) — set per card with --accent */
  border-left: 4px solid var(--accent, var(--wa-bright));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
body.wali-home .lead-card--high { --accent: var(--wa-bright); }
body.wali-home .lead-card--medium { --accent: #f59e0b; }
@media (hover: hover) {
  body.wali-home .lead-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px -22px rgba(7, 94, 84, 0.42), 0 6px 16px -10px rgba(11, 31, 28, 0.18);
  }
}

/* badges */
body.wali-home .badge-confidence {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 10px;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}
/* High = dark green ink on light sent-green */
body.wali-home .badge-confidence--high {
  color: var(--wa-deep);
  background: var(--wa-sent);
}
/* Medium = amber ink on amber tint */
body.wali-home .badge-confidence--medium {
  color: #b45309;
  background: #fef3c7;
}
body.wali-home .badge-category {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--wa-deep);
  background: rgba(217, 253, 211, 0.5);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

/* matched-keyword chips */
body.wali-home .keyword-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid rgba(7, 94, 84, 0.1);
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  white-space: nowrap;
}

/* suggested-reply block (sent-bubble style) */
body.wali-home .suggested-reply {
  background: rgba(217, 253, 211, 0.7);
  border: 1px solid rgba(7, 94, 84, 0.1);
  border-radius: 1rem;
  border-bottom-right-radius: 4px;
  padding: 0.75rem;
}

/* copy button + flash */
body.wali-home .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-deep);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  min-height: 36px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
body.wali-home .copy-btn:hover { background: #fff; }
body.wali-home .copy-btn.copied {
  background: var(--wa-bright) !important;
  color: var(--on-bright) !important;
}

/* read-receipt double tick */
body.wali-home .ticks { color: var(--tick); }

/* leads wall scrollbar polish (if it ever scrolls) */
body.wali-home .leads-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
body.wali-home .leads-scroll::-webkit-scrollbar-thumb {
  background: rgba(7, 94, 84, 0.25);
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   8. Sandbox panel (deep-green section, white text)
--------------------------------------------------------------------------- */
body.wali-home .sandbox-section {
  position: relative;
  background: var(--wa-deep-2);
  color: #fff;
  overflow: hidden;
}
body.wali-home .sandbox-panel {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 1.75rem;
}
body.wali-home .sandbox-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-sent);
  margin-bottom: 0.5rem;
}
body.wali-home .sandbox-input,
body.wali-home .sandbox-select {
  width: 100%;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--ink);
  padding: 0.875rem 1rem;
  font-size: 15px;
  box-shadow: var(--shadow-bubble);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
body.wali-home .sandbox-input::placeholder { color: var(--ink-mute); }
body.wali-home .sandbox-idle {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
body.wali-home .sandbox-feed {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  height: 180px;
  overflow: hidden;
}
/* quick-try chips — guarantee a 44px mobile tap target */
body.wali-home .sandbox-chip { min-height: 44px; }

/* ---------------------------------------------------------------------------
   9. How-it-works + pricing teaser + FAQ
--------------------------------------------------------------------------- */
/* how-it-works step card */
body.wali-home .how-card {
  background: var(--card);
  border: 1px solid rgba(7, 94, 84, 0.1);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
body.wali-home .how-step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 1;
  color: rgba(7, 94, 84, 0.3);
}

/* pricing teaser cards */
body.wali-home .price-card {
  background: var(--card);
  border: 1px solid rgba(7, 94, 84, 0.1);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-bubble);
  display: flex;
  flex-direction: column;
}
/* highlighted (most-popular) tier — deep green, white text */
body.wali-home .price-card--featured {
  position: relative;
  background: var(--wa-deep);
  color: #fff;
  box-shadow: var(--shadow-float);
  outline: 2px solid rgba(37, 211, 102, 0.6);
}
body.wali-home .price-card--featured .price-amount,
body.wali-home .price-card--featured .price-tier { color: #fff; }
body.wali-home .price-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--wa-bright);
  color: var(--on-bright);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}
body.wali-home .price-tier { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
body.wali-home .price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.875rem;
  color: var(--ink);
}
body.wali-home .price-check { color: var(--wa-mid); }
body.wali-home .price-card--featured .price-check { color: var(--wa-bright); }

/* FAQ — native <details> accordion */
body.wali-home .faq-item {
  background: var(--card);
  border: 1px solid rgba(7, 94, 84, 0.1);
  border-radius: 1rem;
  box-shadow: var(--shadow-bubble);
  overflow: hidden;
}
body.wali-home .faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
body.wali-home .faq-item summary::-webkit-details-marker { display: none; }
body.wali-home .faq-chev {
  color: var(--wa-deep);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
body.wali-home .faq-item[open] .faq-chev { transform: rotate(180deg); }
body.wali-home .faq-answer {
  padding: 0 1.25rem 1.25rem;
  margin-top: -0.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   10. Motion helpers + focus + reduced-motion fallback
--------------------------------------------------------------------------- */
/* GSAP reveal targets start hidden; JS reveals them. */
body.wali-home .reveal-init { opacity: 0; transform: translateY(24px); }

/* visible focus ring */
body.wali-home a:focus-visible,
body.wali-home button:focus-visible,
body.wali-home input:focus-visible,
body.wali-home select:focus-visible,
body.wali-home summary:focus-visible {
  outline: 3px solid rgba(7, 94, 84, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* REDUCED MOTION — force all final visible states. The page must NEVER depend
   on JS to show content. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.wali-home .scan-line,
  body.wali-home .live-dot { animation: none !important; }
  /* everything revealed */
  body.wali-home .reveal-init { opacity: 1 !important; transform: none !important; }
  /* hero bubbles, the plucked buyer message, and the lead card all visible */
  body.wali-home .hero-bubble,
  body.wali-home #buyerBubble,
  body.wali-home #heroCard {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   APP SHELL OVERRIDES — warm light theme for all app pages
   ============================================================ */

/* Active nav link in app shell */
body.wali-home .wa-nav-link--active {
  color: #075E54;
  font-weight: 600;
  background: rgba(7,94,84,0.08);
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
}

/* App nav mobile: scrollable links row */
@media (max-width: 640px) {
  body.wali-home header .wa-nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: calc(100vw - 180px);
    flex-wrap: nowrap;
  }
  body.wali-home header .wa-nav-links::-webkit-scrollbar { display: none; }
}

/* ── Buttons: brand green with WHITE text ──────────────────── */
body.wali-home .btn-wa {
  background: #16a34a;
  color: #ffffff !important;
}
body.wali-home .btn-wa:hover { background: #15803d; }
body.wali-home .btn-wa:focus-visible { outline-color: rgba(22,163,74,0.55); }

/* btn-accent (app forms) → same green pill, white text */
body.wali-home .btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #16a34a !important;
  color: #ffffff !important;
  border-radius: 999px;
  border: none;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(22,163,74,0.25);
  font-family: var(--font-display);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.wali-home .btn-accent:hover {
  background: #15803d !important;
  box-shadow: 0 6px 20px rgba(22,163,74,0.4);
  transform: translateY(-1px);
}

/* btn-ghost (logout, secondary actions) */
body.wali-home .btn-ghost {
  background: #ffffff;
  color: #075E54;
  border: 1px solid rgba(7,94,84,0.2);
  font-family: var(--font-display);
  font-weight: 600;
}
body.wali-home .btn-ghost:hover { background: #f0fdf4; border-color: rgba(7,94,84,0.35); }

/* ── Cards: glass-panel → warm white card ───────────────────── */
body.wali-home .glass-panel {
  background: #ffffff;
  border: 1px solid rgba(7,94,84,0.1);
  border-radius: 1.5rem;
  box-shadow: 0 4px 16px -4px rgba(7,94,84,0.12), 0 1px 4px rgba(11,31,28,0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.wali-home .glass-panel:hover {
  border-color: rgba(7,94,84,0.2);
  box-shadow: 0 10px 30px -8px rgba(7,94,84,0.2), 0 2px 8px rgba(11,31,28,0.08);
  transform: translateY(-2px);
}

/* ── Form inputs ────────────────────────────────────────────── */
body.wali-home .input-dark {
  background: #ffffff;
  border: 1px solid rgba(7,94,84,0.15);
  color: #0b141a;
  border-radius: 0.75rem;
}
body.wali-home .input-dark:focus {
  border-color: #075E54;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(7,94,84,0.15);
}
body.wali-home .input-dark::placeholder { color: #6b7c78; }

body.wali-home .select-dark {
  background-color: #ffffff;
  border: 1px solid rgba(7,94,84,0.15);
  color: #0b141a;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 9l3 3 3-3' stroke='%23075E54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.wali-home .select-dark:focus {
  border-color: #075E54;
  box-shadow: 0 0 0 3px rgba(7,94,84,0.15);
}

body.wali-home .checkbox-accent { accent-color: #075E54; }

/* ── Shimmer loading indicator ──────────────────────────────── */
body.wali-home .htmx-indicator { display: none; }
body.wali-home .htmx-request .htmx-indicator,
body.wali-home .htmx-request.htmx-indicator { display: inline-block; }
body.wali-home .htmx-indicator.shimmer-indicator {
  display: none;
  height: 3px;
  background: linear-gradient(90deg, transparent, #16a34a, transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 2px;
  margin-top: 0.5rem;
}
body.wali-home .htmx-request .shimmer-indicator { display: block; }

/* ── Text colour helpers (app pages use these) ──────────────── */
body.wali-home .text-primary { color: #0b141a; }
body.wali-home .text-secondary { color: #3b4a54; }
body.wali-home .text-muted { color: #6b7c78; }

/* ── Page-level padding for marketing auth pages (signup/login) */
body.wali-home .auth-page {
  min-height: calc(100vh - 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ── Signup padding fix ─────────────────────────────────────── */
body.wali-home .signup-wrap {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Hero card: on mobile flows below the phone, slides up via GSAP */
@media (max-width: 1023px) {
  body.wali-home #heroCard {
    transform-origin: center top;
    max-width: 100%;
  }
}

/* ── Glow Effect for WhatsApp button ───────────────────────── */
body.wali-home .btn-wa--glow {
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.4), 0 0 30px rgba(37, 211, 102, 0.2);
  animation: wa-glow 2.5s infinite ease-in-out;
}

@keyframes wa-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.4), 0 0 30px rgba(37, 211, 102, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(37, 211, 102, 0.7), 0 0 45px rgba(37, 211, 102, 0.3);
    transform: scale(1.015);
  }
}

/* ── Pricing Card Styling & Generous Padding ───────────────── */
body.wali-home .pricing-card {
  padding: 2.25rem 1.75rem !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Money-back Guarantee Banner ───────────────────────────── */
body.wali-home .guarantee-banner {
  border: 2px dashed rgba(18, 140, 126, 0.4) !important;
  background: rgba(18, 140, 126, 0.04) !important;
  border-radius: 1.5rem !important;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

body.wali-home .guarantee-banner:hover {
  border-color: rgba(18, 140, 126, 0.7) !important;
  background: rgba(18, 140, 126, 0.07) !important;
}

/* ── Onboarding: use the same warm WhatsApp-native theme as home ───────── */
body.wali-home .onboarding-page {
  min-height: calc(100vh - 8rem);
  padding: 3rem 1rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}

body.wali-home .onboarding-page * {
  box-sizing: border-box;
}

body.wali-home .onboarding-wrap {
  width: min(42rem, calc(100vw - 2rem));
  min-width: 0;
  max-width: 100%;
}

body.wali-home .onboarding-wrap > .glass-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.wali-home .onboarding-wordmark {
  color: var(--wa-deep);
  font-size: 1.5rem;
  font-weight: 800;
}

body.wali-home .onboarding-progress span {
  color: var(--ink-mute);
}

body.wali-home .onboarding-progress-track {
  background: rgba(7, 94, 84, 0.1);
}

body.wali-home .onboarding-progress-fill {
  background: var(--wa-bright);
}

body.wali-home .onboarding-skip {
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

body.wali-home .onboarding-option {
  background: #ffffff;
  border: 1px solid rgba(7, 94, 84, 0.12);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 31, 28, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.wali-home .onboarding-option:hover {
  border-color: rgba(7, 94, 84, 0.28);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

body.wali-home .onboarding-danger-text {
  color: #991b1b;
}

body.wali-home .onboarding-cta {
  min-height: 52px;
  padding: 0.875rem 2rem;
  font-size: 1.0625rem;
}

body.wali-home #groups-body [style*="color:#e2e8f0"],
body.wali-home #groups-body [style*="color: #e2e8f0"],
body.wali-home #keywords-container [style*="color:#e2e8f0"],
body.wali-home #keywords-container [style*="color: #e2e8f0"] {
  color: var(--ink) !important;
}

body.wali-home #groups-body [style*="color:#94a3b8"],
body.wali-home #groups-body [style*="color: #94a3b8"],
body.wali-home #keywords-container [style*="color:#94a3b8"],
body.wali-home #keywords-container [style*="color: #94a3b8"] {
  color: var(--ink-2) !important;
}

body.wali-home #groups-body [style*="color:#64748b"],
body.wali-home #groups-body [style*="color: #64748b"],
body.wali-home #keywords-container [style*="color:#64748b"],
body.wali-home #keywords-container [style*="color: #64748b"] {
  color: var(--ink-mute) !important;
}

body.wali-home #groups-body [style*="color:#60a5fa"],
body.wali-home #groups-body [style*="color: #60a5fa"],
body.wali-home #keywords-container [style*="color:#60a5fa"],
body.wali-home #keywords-container [style*="color: #60a5fa"],
body.wali-home #keywords-container [style*="color:#93c5fd"],
body.wali-home #keywords-container [style*="color: #93c5fd"] {
  color: var(--wa-deep) !important;
}

body.wali-home #groups-body [style*="border-bottom:1px solid rgba(255,255,255"],
body.wali-home #groups-body [style*="border-bottom: 1px solid rgba(255,255,255"] {
  border-bottom-color: rgba(7, 94, 84, 0.1) !important;
}

body.wali-home #groups-body [style*="background:#111a35"],
body.wali-home #groups-body [style*="background: #111a35"] {
  background: rgba(7, 94, 84, 0.06) !important;
}

body.wali-home #groups-body [style*="background:rgba(255,255,255,0.1)"],
body.wali-home #groups-body [style*="background: rgba(255,255,255,0.1)"] {
  background: rgba(7, 94, 84, 0.08) !important;
  color: var(--wa-deep) !important;
}

body.wali-home #groups-body [style*="background:rgba(74,222,128,0.2)"],
body.wali-home #groups-body [style*="background: rgba(74,222,128,0.2)"] {
  background: rgba(22, 163, 74, 0.14) !important;
  color: #166534 !important;
}

body.wali-home #groups-body [style*="background:rgba(248,113,113,0.2)"],
body.wali-home #groups-body [style*="background: rgba(248,113,113,0.2)"] {
  background: rgba(153, 27, 27, 0.08) !important;
  color: #991b1b !important;
}

body.wali-home #keywords-container .glass-panel {
  border-radius: 1rem;
}

body.wali-home #keywords-container [style*="background:rgba(96,165,250,0.2)"],
body.wali-home #keywords-container [style*="background: rgba(96,165,250,0.2)"] {
  background: var(--wa-sent) !important;
  border-color: rgba(7, 94, 84, 0.14) !important;
}

@media (max-width: 640px) {
  body.wali-home .onboarding-page {
    padding: 2rem 1rem;
  }

  body.wali-home .onboarding-wrap > .glass-panel {
    padding: 2rem 1.25rem !important;
    border-radius: 1.25rem;
  }
}