/* ============================================================
   FAYE POLISH — shared rebrand override layer
   White nav, lavender hero "card", rounded sans typography,
   no solid-violet section backgrounds. Loaded last on every
   public page so !important rules win over inline <style>.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

:root{
  --fp-purple: #5B17EB;
  --fp-purple-2: #4A0BD0;
  --fp-purple-deep: #1A0E40;
  --fp-ink: #0A0A14;
  --fp-ink-2: #2A2A38;
  --fp-ink-3: #5C5C6E;
  --fp-line: rgba(10,10,20,.08);
  --fp-lav-1: #F4EFFE;   /* very pale lavender - card bg base */
  --fp-lav-2: #EBE3FE;   /* mid lavender - card bg accent */
  --fp-lav-3: #DDD0FB;   /* deeper lavender for chips */
  --fp-lav-4: #C7B3F8;   /* deepest lavender accent */
  --fp-coral: #FF8E5E;
  --fp-coral-soft: #FFD9C2;
  --fp-cream: #FBFAF7;
  --fp-purple-soft: #EDE6FE;
  --fp-radius: 28px;
  --fp-sans: 'Sora', ui-rounded, 'SF Pro Rounded', 'Plus Jakarta Sans',
             -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- BASE TYPOGRAPHY ---------- */
html, body{ font-family: var(--fp-sans) !important; }
body{ background: #ffffff !important; color: var(--fp-ink) !important; }

h1, h2, h3, h4, h5, h6,
.section-title, .section-h, .hero-title, .hero h1, .header h1,
.page-hero h1, .pricing-hero h1, .coverage-hero h1, .review-hero h1,
.guides-hero h1, .head-hero h1, .app-hero h1, .how-hero h1,
header.header h1, header.hero h1, header.app-header h1{
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  line-height: 1.08 !important;
  font-style: normal !important;
}

/* Kill every italic-serif accent across the site */
.hero-title em, .hero h1 em, .header h1 em, .page-hero h1 em,
.section-title em, h2 em, h3 em,
.italic-mark, .accent, .wise,
h1 .wise, h2 .wise, .final h2 .wise, h2.section-h .italic-mark,
h2.section-h .purple, h1.hero-title .wise{
  font-style: normal !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  color: var(--fp-purple) !important;
}
/* Kill the squiggly underline under .wise */
h1.hero-title .wise::after, h2 .wise::after, .final h2 .wise::after,
.hero h1 .wise::after{
  display: none !important;
  content: none !important;
}
/* The hoot eyebrow uses ✦ sparkles - keep them but force violet */
.walkthrough-eyebrow, .ptype-head .eyebrow, .coverage-head .eyebrow,
.pricing-head .eyebrow, .ptype-head h2 .eyebrow{
  color: var(--fp-purple) !important;
}

/* ---------- NAV — white background, violet text + violet pill CTA ---------- */
nav, header > nav, .site-nav, body > nav{
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(91,23,235,.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(10,10,20,.04) !important;
}
/* Mobile open menu was rgba dark violet — make lavender */
@media(max-width:900px){
  .site-nav.open ul{ background:#ffffff !important; border-top:1px solid var(--fp-line) !important; }
}

/* Middle nav menu list (horizontal, no bullets).
   Task #100: scoped `display: flex !important` to ≥901px so the
   existing `.site-nav ul { display: none }` rule in site.css can take
   effect on tablet/mobile widths without an !important shouting match.
   This avoids the previous bug where between 761–900px the link bar
   stayed visible and cramped (e.g. "Sign in" wrapped to two lines on
   768px tablets). */
nav ul, header nav ul, nav .nav-links, header .nav-links{
  list-style: none !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 901px) {
  nav ul, header nav ul, nav .nav-links, header .nav-links{
    display: flex !important;
  }
}
nav ul li, header nav ul li, nav .nav-links li, header .nav-links li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Nav links */
nav a, nav ul a, .nav-links a, .site-nav ul a, header nav a{
  color: var(--fp-ink-2) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}
nav a:hover, nav ul a:hover, .nav-links a:hover, .site-nav ul a:hover{
  color: var(--fp-purple) !important;
}
.site-nav .menu-toggle{ color: var(--fp-purple) !important; }

/* Wordmark / logo block */
nav .logo-text, .site-nav .logo-text, header .logo-text{
  color: var(--fp-purple) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: -.02em !important;
  text-transform: lowercase !important;
}
/* Logo mark — violet box on white nav (was white box on violet) */
nav .logo-mark, .site-nav .logo-mark, header .logo-mark{
  background-color: var(--fp-purple) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 7 L33 18 L33 33 L7 33 L7 18 Z' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linejoin='round'/><path d='M13 19 L20 26 L27 19' fill='none' stroke='%23FFD9C2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  box-shadow: 0 4px 12px rgba(91,23,235,.18) !important;
}

/* Nav primary CTA: violet pill with white text and trailing arrow */
.nav-cta, nav a.nav-cta, .site-nav .nav-cta, header .nav-cta{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 6px 16px rgba(91,23,235,.22) !important;
  border: 0 !important;
  transition: transform .15s, background .15s, box-shadow .15s !important;
}
.nav-cta::after, nav a.nav-cta::after, .site-nav .nav-cta::after,
header .nav-cta::after{
  content: '\2192' !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: inline-block !important;
  margin-left: 2px !important;
}
.nav-cta:hover, nav a.nav-cta:hover, .site-nav .nav-cta:hover{
  background: var(--fp-purple-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(91,23,235,.28) !important;
}

/* Injected Log-in link (from nav-patch.js) — plain text link, NOT a pill,
   so the only pill CTA on the nav is the violet "Start free →". */
.nav-login{
  background: transparent !important;
  color: var(--fp-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 4px !important;
  font-family: var(--fp-sans) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: -.005em !important;
  display: inline-block !important;
  transition: color .15s !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.nav-login:hover, .nav-login:focus{
  color: var(--fp-purple) !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
}

/* ---------- HERO — convert every hero into a lavender rounded "card" ---------- */
.hero, header.hero,
.header, header.header,
.page-hero, header.page-hero,
.pricing-hero, .coverage-hero, .review-hero, .head-hero,
.guides-hero, .app-hero, .how-hero, header.app-header{
  /* Lavender card with multi-layer flat-illustration corners:
     1. coral "sun" radial wash (top-right)
     2. little violet house SVG (bottom-left)
     3. violet sparkle SVG (bottom-right)
     4. lavender base gradient (full)
     ::before adds the palm sketch (top-left), ::after adds the paper plane (top-right). */
  background:
    radial-gradient(circle at 82% 10%, rgba(255,142,94,.28) 0%, rgba(255,142,94,0) 26%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'><path d='M10 30 L32 12 L54 30 L54 54 L10 54 Z' fill='%23FFD9C2' stroke='%235B17EB' stroke-width='2.6' stroke-linejoin='round'/><rect x='26' y='38' width='12' height='16' fill='%235B17EB'/><circle cx='35' cy='46' r='1.2' fill='%23ffffff'/><path d='M18 28 L18 22 L24 22' stroke='%235B17EB' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat 36px calc(100% - 24px) / 84px 84px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'><path d='M32 6 L36 26 L56 32 L36 38 L32 58 L28 38 L8 32 L28 26 Z' fill='%235B17EB'/><circle cx='52' cy='14' r='3' fill='%23FF8E5E'/><circle cx='12' cy='52' r='2.4' fill='%23FF8E5E'/></svg>") no-repeat calc(100% - 42px) calc(100% - 32px) / 60px 60px,
    linear-gradient(165deg, var(--fp-lav-2) 0%, var(--fp-lav-1) 60%, #FBF9FF 100%) !important;
  color: var(--fp-ink) !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: var(--fp-radius) !important;
  margin: 18px !important;
  padding: 84px 44px 88px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  box-shadow: 0 1px 0 rgba(10,10,20,.02) !important;
}
@media(max-width:760px){
  .hero, header.hero, .header, header.header,
  .page-hero, header.page-hero, .pricing-hero, .coverage-hero,
  .review-hero, .head-hero, .guides-hero, .app-hero, .how-hero,
  header.app-header{
    /* Hide the corner illustrations on small screens — keep only the gradient */
    background:
      linear-gradient(165deg, var(--fp-lav-2) 0%, var(--fp-lav-1) 60%, #FBF9FF 100%) !important;
    margin: 12px !important;
    padding: 56px 22px 64px !important;
    border-radius: 22px !important;
  }
}

/* Replace the dark radial-gradient ::before/::after with cute SVG decorations */
.hero::before, .header::before, .page-hero::before,
header.hero::before, header.header::before, header.page-hero::before,
.pricing-hero::before, .coverage-hero::before, .review-hero::before,
.head-hero::before, .guides-hero::before, .app-hero::before,
.how-hero::before, header.app-header::before{
  content: '' !important;
  position: absolute !important;
  top: 22px !important;
  left: 28px !important;
  right: auto !important;
  bottom: auto !important;
  width: 96px !important;
  height: 96px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'><path d='M14 50 C18 30 30 18 50 14' stroke='%235B17EB' stroke-width='3' stroke-linecap='round'/><path d='M22 46 C24 36 30 28 42 22 M30 50 C32 42 38 34 48 30 M16 38 C20 32 26 26 36 22' stroke='%235B17EB' stroke-width='2.2' stroke-linecap='round' opacity='.85'/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 0 !important;
  opacity: .85 !important;
  pointer-events: none !important;
  transform: rotate(-12deg) !important;
}
.hero::after, .header::after, .page-hero::after,
header.hero::after, header.header::after, header.page-hero::after,
.pricing-hero::after, .coverage-hero::after, .review-hero::after,
.head-hero::after, .guides-hero::after, .app-hero::after,
.how-hero::after, header.app-header::after{
  content: '' !important;
  position: absolute !important;
  top: 28px !important;
  right: 32px !important;
  bottom: auto !important;
  left: auto !important;
  width: 88px !important;
  height: 88px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'><path d='M6 30 L58 8 L48 38 L30 34 L26 56 L20 38 Z' fill='%235B17EB' opacity='.92'/><path d='M30 34 L48 38' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/></svg>") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 0 !important;
  opacity: .9 !important;
  pointer-events: none !important;
  transform: rotate(8deg) !important;
}
@media(max-width:760px){
  .hero::before, .header::before, .page-hero::before,
  header.hero::before, header.header::before, header.page-hero::before{
    width: 56px !important; height: 56px !important; top: 14px !important; left: 14px !important;
  }
  .hero::after, .header::after, .page-hero::after,
  header.hero::after, header.header::after, header.page-hero::after{
    width: 56px !important; height: 56px !important; top: 14px !important; right: 14px !important;
  }
}

/* Hero content typography — dark headline with violet accents only */
.hero h1, .hero h1.hero-title,
.header h1, .page-hero h1, header.hero h1, header.header h1,
.pricing-hero h1, .coverage-hero h1, .review-hero h1,
.head-hero h1, .guides-hero h1, .app-hero h1, .how-hero h1,
header.app-header h1{
  color: var(--fp-purple-deep) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  line-height: 1.02 !important;
  font-size: clamp(44px, 6.5vw, 84px) !important;
}
/* Accent words inside hero headlines stay violet */
.hero h1 .wise, .hero h1 em, .hero h1 .accent,
.hero h1.hero-title .wise,
.header h1 .wise, .page-hero h1 .wise,
.section-h .italic-mark, h2.section-h .italic-mark,
h2.section-h .purple{
  color: var(--fp-purple) !important;
  font-style: normal !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
}
.hero p, .hero .hero-sub,
.header p, .page-hero p, header.hero p, header.header p,
.pricing-hero p, .coverage-hero p, .review-hero p,
.head-hero p, .guides-hero p, .app-hero p, .how-hero p{
  color: var(--fp-ink-2) !important;
  font-family: var(--fp-sans) !important;
}
.hero-sub strong, .hero p strong, .header p strong, .page-hero p strong{
  color: var(--fp-purple) !important;
  font-weight: 600 !important;
}

/* Hero stars / rating chip — white pill on lavender */
.hero-stars{
  background: #ffffff !important;
  border: 1px solid var(--fp-line) !important;
  color: var(--fp-ink-2) !important;
  box-shadow: 0 2px 8px rgba(91,23,235,.06) !important;
}
.hero-stars strong{ color: var(--fp-ink) !important; }
.hero-stars .stars{ color: var(--fp-coral) !important; }

/* Eyebrow chips */
.page-hero .eyebrow, .header .eyebrow, .hero .eyebrow,
.pricing-hero .eyebrow, .coverage-hero .eyebrow{
  background: #ffffff !important;
  color: var(--fp-purple) !important;
  border: 1px solid var(--fp-lav-2) !important;
  box-shadow: 0 1px 2px rgba(91,23,235,.06) !important;
}

/* Hero CTA — violet pill (was amber) */
.hero-cta, a.hero-cta,
.header a.btn-primary, .page-hero a.btn-primary, .hero a.btn-primary,
.final-cta, a.final-cta{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  padding: 18px 32px !important;
  box-shadow: 0 16px 32px -12px rgba(91,23,235,.45) !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.hero-cta:hover, .final-cta:hover{
  background: var(--fp-purple-2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 40px -14px rgba(91,23,235,.55) !important;
}
.hero-cta svg path, .hero-cta svg{ stroke: #ffffff !important; }

/* ---------- Solid violet section backgrounds → lavender panels ---------- */

/* Generic CTA strip (used on shared site.css pages) */
.cta-strip{
  background: linear-gradient(160deg, var(--fp-lav-2) 0%, var(--fp-lav-1) 100%) !important;
  color: var(--fp-ink) !important;
  border-radius: 32px !important;
  padding: 56px 44px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--fp-lav-2) !important;
}
.cta-strip::before{
  background: radial-gradient(circle, rgba(91,23,235,.08) 0%, transparent 70%) !important;
}
.cta-strip h2{
  color: var(--fp-ink) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  font-style: normal !important;
}
.cta-strip p{ color: var(--fp-ink-2) !important; }
.cta-strip .btn-primary{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 16px 32px !important;
  box-shadow: 0 12px 28px rgba(91,23,235,.28) !important;
}
.cta-strip .btn-primary:hover{
  background: var(--fp-purple-2) !important;
}
.cta-strip .btn-ghost{
  background: #ffffff !important;
  color: var(--fp-purple) !important;
  border: 1px solid var(--fp-lav-3) !important;
}

/* "Final CTA" section on hoot-v10 / index */
.final{
  background: linear-gradient(180deg, #ffffff 0%, var(--fp-lav-1) 100%) !important;
}
.final h2{
  color: var(--fp-ink) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
}
.final h2 .wise{
  color: var(--fp-purple) !important;
  font-style: normal !important;
}

/* Reviews "Share your story" CTA section */
.cta-section{
  background: linear-gradient(160deg, var(--fp-lav-2) 0%, var(--fp-lav-1) 100%) !important;
  border: 1px solid var(--fp-lav-2) !important;
  border-radius: 28px !important;
  margin: 24px 18px !important;
}
.cta-section a, .cta-section .btn{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 16px 32px !important;
}

/* The "checklist" panel on how.html (was solid purple) */
.checklist{
  background: linear-gradient(160deg, var(--fp-lav-2) 0%, var(--fp-lav-1) 100%) !important;
  color: var(--fp-ink) !important;
  border: 1px solid var(--fp-lav-2) !important;
  border-radius: 28px !important;
}
.checklist h2{ color: var(--fp-ink) !important; font-family: var(--fp-sans) !important; }
.checklist-item{ color: var(--fp-ink-2) !important; }
.checklist-item svg{ color: var(--fp-purple) !important; }
.checklist a, .checklist .btn-primary{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

/* Stats row on about/etc — was solid dark violet */
.stats-row{
  background: linear-gradient(160deg, var(--fp-lav-2), var(--fp-lav-1)) !important;
  color: var(--fp-ink) !important;
  border: 1px solid var(--fp-lav-2) !important;
  border-radius: 28px !important;
}
.stats-row .stat .num{
  color: var(--fp-purple) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
}
.stats-row .stat .lbl{ color: var(--fp-ink-3) !important; }

/* Walkthrough heading + section heading */
h2.section-h, .section-h{
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  color: var(--fp-ink) !important;
  font-style: normal !important;
}
h2.section-h .purple{ color: var(--fp-purple) !important; }

/* Generic primary buttons site-wide → pill, violet, no amber */
.btn-primary{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  border: 0 !important;
}
.btn-primary:hover{
  background: var(--fp-purple-2) !important;
  transform: translateY(-1px) !important;
}

/* Form focus */
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--fp-purple) !important;
  box-shadow: 0 0 0 4px rgba(91,23,235,.12) !important;
}

/* Cards / icons */
.card{ border-radius: 22px !important; }
.card .ic{
  background: var(--fp-lav-2) !important;
  color: var(--fp-purple) !important;
  border-radius: 14px !important;
}

/* TOC + tables — lavender mist */
.toc{ background: var(--fp-lav-1) !important; border-color: var(--fp-lav-2) !important; }
.table th{ background: var(--fp-lav-1) !important; }

/* FAQ dividers */
.faq-list .qa{ border-bottom-color: var(--fp-lav-2) !important; }

/* Timeline pulse */
.timeline .item::before{
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px var(--fp-lav-2) !important;
}

/* Footer — soft lavender */
.site-foot{
  background: #FBF9FF !important;
  border-top: 1px solid var(--fp-line) !important;
}
.site-foot .brand-col .logo-text{
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  text-transform: lowercase !important;
  color: var(--fp-purple) !important;
}
.site-foot .col a:hover{ color: var(--fp-purple) !important; }

/* Press strip — keep neutral white */
.press{ background: #ffffff !important; }

/* ============================================================
   FAYE-2 ADDITIONS
   wordmark cleanup, no more dark phones, illustrated walk-phones,
   warmer ambient surfaces. Loaded after the original Faye block,
   so these win on duplicate selectors.
   ============================================================ */

/* ---------- Wordmark: kill the badge, keep only "wise" ---------- */
/* The site uses two wordmark patterns:
   - <div class="logo-mark">…</div><div class="logo-text">Wise Tax</div>     (most pages)
   - <a class="brand"><div class="brand-mark">…</div>Wise Tax</a>            (signin/signup/forgot)
   We hide the badge and force the text style. The HTML "Wise Tax" /
   "wise" copy is rewritten in markup pass; this CSS hides the glyph. */
nav .logo-mark, .site-nav .logo-mark, header .logo-mark,
footer .logo-mark, .site-foot .logo-mark,
.brand-mark, a.brand .brand-mark{
  display: none !important;
}
nav .logo-wrap, header .logo-wrap, footer .logo-wrap,
.site-foot .brand-col .logo-wrap{
  gap: 0 !important;
}
a.brand,
.brand-pane .brand,
section.brand-pane .brand{
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  color: var(--fp-purple) !important;
  letter-spacing: -.02em !important;
  text-transform: lowercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ---------- Hide the noisy strips above the hero on homepage ---------- */
/* Award strip and veterans box don't fit Faye's calm, single-CTA top fold.
   Scoped to body.home so future pages reusing these class names don't break. */
body.home .award-strip,
body.home .vet-wrap,
body.home .whyfree{
  display: none !important;
}

/* ---------- Hero on homepage: no phones inside the lavender card ---------- */
/* Faye's hero is a single calm panel — headline + sub + one CTA + soft art.
   The 3-phone visual moves down into the walkthrough section.
   Scoped to body.home so non-homepage heroes that reuse .hero-visual stay intact. */
body.home .hero .hero-visual{
  display: none !important;
}
/* Tighten the hero card now that the phones are gone */
.hero, header.hero{
  padding: 92px 44px 96px !important;
}
@media(max-width:760px){
  .hero, header.hero{
    padding: 60px 22px 64px !important;
  }
}

/* Hero "award" pill (Voted Best Use of AI) — was pure dark, make it light */
.hero-award{
  background: #ffffff !important;
  color: var(--fp-ink) !important;
  border: 1px solid var(--fp-lav-2) !important;
  box-shadow: 0 2px 8px rgba(91,23,235,.06) !important;
}
.hero-award .seal{ color: var(--fp-coral) !important; }
.hero-award strong{ color: var(--fp-purple) !important; }

/* ---------- Walkthrough: friendly illustrated phones ---------- */
/* Lavender frame with a thin dark stroke, no glossy black bezel, no notch */
.walk-phone{
  background: var(--fp-lav-2) !important;
  border: 2px solid var(--fp-ink) !important;
  border-radius: 36px !important;
  padding: 10px !important;
  box-shadow: 0 22px 44px -22px rgba(20,16,52,.22) !important;
}
.walk-phone .notch{ display: none !important; }
.walk-phone-screen,
.walk-phone-screen.b1,
.walk-phone-screen.b2,
.walk-phone-screen.b3{
  background: #FBF9FF !important;
  border-radius: 28px !important;
  padding: 22px 16px 16px !important;
}
.walk-phone-screen.b2{
  background: linear-gradient(180deg, #FFF6EE 0%, #FFE6D3 100%) !important;
}

/* Inside-phone CTAs swap amber → violet pill */
.p1-btn{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.p1-estimate{
  background: var(--fp-purple) !important;
  border-radius: 16px !important;
}
.p1-estimate .val{ color: #FFD9C2 !important; }
.p3-bell{
  background: var(--fp-coral-soft) !important;
  color: var(--fp-purple) !important;
  border-radius: 14px !important;
}
.p3-card .val{ color: var(--fp-purple) !important; }

/* Walk titles use the rounded sans, not italic */
.walk-title, .walk-desc{
  font-family: var(--fp-sans) !important;
  font-style: normal !important;
}
.walk-title{
  color: var(--fp-ink) !important;
  font-weight: 600 !important;
}
.walk-desc{ color: var(--fp-ink-2) !important; }
.walk-step-num{ color: var(--fp-purple) !important; font-weight: 600 !important; }
.walk-link{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 26px !important;
  font-family: var(--fp-sans) !important;
}
.walk-link:hover{
  background: var(--fp-purple-2) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
}

/* ---------- Property-type section warmer, less austere ---------- */
.ptype{ background: #FBF9FF !important; }
.ptype-card{
  border-radius: 28px !important;
  border: 1px solid var(--fp-lav-2) !important;
  box-shadow: 0 1px 0 rgba(91,23,235,.04) !important;
}
.ptype-card:hover{
  border-color: var(--fp-purple) !important;
  box-shadow: 0 22px 44px -22px rgba(91,23,235,.18) !important;
}
.ptype-card .cta{
  background: var(--fp-lav-1) !important;
  color: var(--fp-purple) !important;
  border-radius: 999px !important;
}
.ptype-card:hover .cta{
  background: var(--fp-purple) !important;
  color: #ffffff !important;
}

/* ---------- Pricing strip on homepage ---------- */
.pricing-row .price-card{
  border-radius: 22px !important;
  border: 1px solid var(--fp-lav-2) !important;
  background: #ffffff !important;
}
.pricing-row .price-card.us{
  background: linear-gradient(165deg, var(--fp-lav-2) 0%, var(--fp-lav-1) 100%) !important;
  border-color: var(--fp-purple) !important;
}
.pricing-row .price-card .name{ color: var(--fp-ink) !important; font-weight: 600 !important; }
.pricing-row .price-card .kept{ color: var(--fp-purple) !important; font-weight: 600 !important; }

/* ---------- Love (testimonials) — softer divider ---------- */
.love{ background: #ffffff !important; }
.love-card{
  border-radius: 22px !important;
  border: 1px solid var(--fp-lav-2) !important;
  background: #FBF9FF !important;
}
.love-card .love-stars{ color: var(--fp-coral) !important; }
.love-link{
  color: var(--fp-purple) !important;
  font-weight: 600 !important;
}

/* ---------- Sample appeal letter card — soften ---------- */
.sample{ background: linear-gradient(180deg, #ffffff 0%, var(--fp-lav-1) 100%) !important; }
.sample-h2{ font-family: var(--fp-sans) !important; font-weight: 600 !important; }
.sample-h2 .wise{ color: var(--fp-purple) !important; font-style: normal !important; }
.letter-bar{
  background: linear-gradient(90deg, var(--fp-purple) 0%, var(--fp-lav-4) 100%) !important;
}
.sample-cta{
  background: var(--fp-purple) !important;
  border-radius: 999px !important;
  font-family: var(--fp-sans) !important;
}
.sample-cta:hover{ background: var(--fp-purple-2) !important; }

/* ---------- Final CTA wave gradient ---------- */
.final-wave{ background: var(--fp-lav-1) !important; }
.final-trust .stars{ color: var(--fp-coral) !important; }

/* ---------- Footer — clean dark navy (Faye spec) ---------- */
footer{
  background: #0E0A2E !important;
  color: rgba(255,255,255,.72) !important;
  border-top: 0 !important;
}
footer h4, footer .footer-col h4{
  color: #fff !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
}
footer a{ color: rgba(255,255,255,.72) !important; }
footer a:hover{ color: #fff !important; }
footer .footer-bottom,
footer .footer-disclaimer,
footer .footer-fine,
footer .footer-legal{
  color: rgba(255,255,255,.5) !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
footer .footer-brand .logo-text,
footer .brand,
footer .logo-text{
  color: #A78BFA !important;       /* lighter violet for contrast on dark */
  text-transform: lowercase !important;
}

/* ---------- Auth pages (signin / signup / forgot-password) ---------- */
/* They use site.css base + brand link in nav. Hide brand-mark and lowercase. */
body.auth-page a.brand,
.auth-shell a.brand{
  text-transform: lowercase !important;
  color: var(--fp-purple) !important;
}

/* =========================================================================
   FAYE-3 ADDITIONS — pricing section + walkthrough phone polish
   Goal: kill the dark violet pricing band, simplify dense in-phone UI so
   the "Three wise steps" reads like Faye's "App, app & away".
   ========================================================================= */

/* ---------- PRICING: "Same win. Different math." ---------- */
/* The original .pricing section is dark violet with white text and an amber
   "winner" pill. Faye uses calm white sections with lavender accents. */
section.pricing,
.pricing{
  background: var(--fp-cream) !important;
  color: var(--fp-ink) !important;
  padding: 110px 44px !important;
}
/* Kill the orange + violet radial blobs */
.pricing::before,
.pricing::after{
  display: none !important;
}
/* Headline & sub copy back to dark on cream */
.pricing-head .eyebrow,
.pricing .eyebrow{
  color: var(--fp-purple) !important;
}
.pricing-head h2{
  color: var(--fp-ink) !important;
}
.pricing-head h2 .italic-mark{
  color: var(--fp-purple) !important;
  font-style: normal !important;
}
.pricing-head .sub{
  color: var(--fp-ink-3) !important;
}
.pricing-head .sub strong{
  color: var(--fp-ink) !important;
}

/* The 5 comparison cards: lavender outline, dark text, calm spacing */
.pricing-grid .price-card{
  background: #fff !important;
  border: 1px solid var(--fp-line) !important;
  border-radius: 22px !important;
  padding: 30px 22px !important;
  box-shadow: 0 1px 0 rgba(31,16,71,.02) !important;
}
.pricing-grid .price-card .name{
  color: var(--fp-ink) !important;
  font-weight: 700 !important;
}
.pricing-grid .price-card .fee,
.pricing-grid .price-card .kept-lbl{
  color: var(--fp-ink-3) !important;
}
.pricing-grid .price-card .fee-total{
  color: #B85C3D !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
}
.pricing-grid .price-card .kept{
  color: var(--fp-ink) !important;
}

/* The "Wise" winner card: lavender pillow, violet accent, no amber */
.pricing-grid .price-card.winner{
  background: linear-gradient(160deg, var(--fp-lav-2) 0%, var(--fp-lav-1) 100%) !important;
  border: 1px solid var(--fp-purple) !important;
  box-shadow: 0 18px 40px -16px rgba(91,55,235,.35) !important;
  color: var(--fp-purple) !important;
}
.pricing-grid .price-card.winner .name,
.pricing-grid .price-card.winner .kept{
  color: var(--fp-purple) !important;
}
.pricing-grid .price-card.winner .fee,
.pricing-grid .price-card.winner .kept-lbl{
  color: rgba(91,55,235,.7) !important;
}
.pricing-grid .price-card.winner .fee-total{
  color: rgba(91,55,235,.85) !important;
}
.pricing-grid .price-card.winner::before{
  background: var(--fp-purple) !important;
  color: #fff !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

/* Footnote */
.pricing .price-footnote{
  color: var(--fp-ink-3) !important;
}

/* ---------- WALKTHROUGH: simplify the in-phone content ---------- */
/* Faye's "App, app & away" phones have one calm illustration / single big
   stat per screen. Ours had dense fake-app UI. Trim it visually. */

/* Section bg + headline calm */
section.walkthrough,
.walkthrough{
  background: var(--fp-cream) !important;
}
.walkthrough-eyebrow{
  color: var(--fp-purple) !important;
  font-family: var(--fp-sans) !important;
}
.walkthrough .section-h{
  color: var(--fp-ink) !important;
}
.walkthrough .section-h .italic-mark{
  color: var(--fp-purple) !important;
  font-style: normal !important;
}

/* Step labels above phones — make them dark like Faye, not violet */
.walkthrough .walk-step-num{
  color: var(--fp-ink) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  margin-bottom: 28px !important;
}

/* The phone screen surface — calm white, more breathing room */
.walk-phone-screen,
.walk-phone-screen.b1,
.walk-phone-screen.b2,
.walk-phone-screen.b3{
  background: #fff !important;
  padding: 32px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  text-align: center !important;
}

/* STEP 1 phone — keep title + big savings, hide the input row & button */
.walk-phone-screen .p1-input,
.walk-phone-screen .p1-btn{
  display: none !important;
}
.walk-phone-screen .p1-title{
  color: var(--fp-ink-2) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.walk-phone-screen .p1-estimate{
  background: linear-gradient(160deg, var(--fp-lav-2), var(--fp-lav-1)) !important;
  border: 1px solid var(--fp-purple) !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
  width: 100% !important;
  text-align: center !important;
}
.walk-phone-screen .p1-estimate .lbl{
  color: var(--fp-purple) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.walk-phone-screen .p1-estimate .val{
  color: var(--fp-purple) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  margin: 4px 0 !important;
}
.walk-phone-screen .p1-estimate .sub{
  color: var(--fp-ink-3) !important;
  font-size: 12px !important;
}

/* STEP 2 phone — keep header + person; hide the dense timeline */
.walk-phone-screen .p2-timeline{
  display: none !important;
}
.walk-phone-screen .p2-header{
  text-align: center !important;
  width: 100% !important;
}
.walk-phone-screen .p2-header .t{
  color: var(--fp-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.walk-phone-screen .p2-header .b{
  background: var(--fp-purple-soft) !important;
  color: var(--fp-purple) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  display: inline-block !important;
  margin-top: 8px !important;
}
.walk-phone-screen .p2-person{
  background: var(--fp-lav-1) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
}
.walk-phone-screen .p2-person .p2-av{
  background: var(--fp-purple) !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
.walk-phone-screen .p2-person .nm{
  color: var(--fp-ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.walk-phone-screen .p2-person .r{
  color: var(--fp-ink-3) !important;
  font-size: 12px !important;
}

/* STEP 3 phone — keep emoji + title + savings card; hide Before/After detail */
.walk-phone-screen .p3-detail{
  display: none !important;
}
.walk-phone-screen .p3-bell{
  font-size: 36px !important;
  margin: 0 !important;
}
.walk-phone-screen .p3-title{
  color: var(--fp-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
}
.walk-phone-screen .p3-sub{
  color: var(--fp-ink-3) !important;
  font-size: 12px !important;
  margin: 0 !important;
}
.walk-phone-screen .p3-card{
  background: linear-gradient(160deg, var(--fp-lav-2), var(--fp-lav-1)) !important;
  border: 1px solid var(--fp-purple) !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
  width: 100% !important;
  text-align: center !important;
}
.walk-phone-screen .p3-card .lbl{
  color: var(--fp-purple) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.walk-phone-screen .p3-card .val{
  color: var(--fp-purple) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  margin: 4px 0 !important;
}
.walk-phone-screen .p3-card .sub{
  color: var(--fp-ink-3) !important;
  font-size: 12px !important;
}

/* Below-phone text */
.walkthrough .walk-title{
  color: var(--fp-ink) !important;
  font-family: var(--fp-sans) !important;
  font-weight: 700 !important;
}
.walkthrough .walk-desc,
.walkthrough .walk-desc strong{
  color: var(--fp-ink-3) !important;
}
.walkthrough .walk-desc strong{
  color: var(--fp-purple) !important;
}

/* Bottom link to /start */
.walkthrough .walk-link{
  background: var(--fp-purple) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  font-family: var(--fp-sans) !important;
}

/* ============================================================
   FAYE-4 — Mobile pass + 3-step redesign + sticky CTA
   Loaded last; safe to override any earlier rule.
   ============================================================ */

:root {
  --fp-purple: #5B17EB;
  --fp-violet-deep: #1B0B4F;
  --fp-coral: #FF8E5E;
  --fp-lav-1: #EBE3FE;
  --fp-lav-2: #F4EFFE;
  --fp-cream: #FFF4EB;
}

/* ---------- Unified mobile navbar (≤760px) ---------- */
@media (max-width: 760px) {
  /* Inline-nav pages: hide desktop links + CTA, show hamburger */
  body nav:not(.site-nav) > ul,
  body nav:not(.site-nav) > ul.nav-links,
  body nav:not(.site-nav) > a.nav-cta {
    display: none !important;
  }
  body nav:not(.site-nav) {
    position: relative;
    padding: 14px 18px !important;
  }
  body nav:not(.site-nav) .nav-mobile-toggle,
  body .site-nav .menu-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 48px; height: 48px;
    min-width: 48px; min-height: 48px;
    background: rgba(91,23,235,.06) !important;
    border: 1px solid rgba(91,23,235,.14) !important;
    color: var(--fp-purple) !important;
    border-radius: 12px !important;
    padding: 0 !important; margin: 0 !important;
    font-size: 22px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body nav:not(.site-nav) .nav-mobile-toggle:active,
  body .site-nav .menu-toggle:active { transform: scale(.96); }

  /* .site-nav mobile sheet styling (overrides site.css) */
  .site-nav { padding: 14px 18px !important; position: relative !important; }
  .site-nav.open ul {
    display: flex !important; flex-direction: column !important;
    position: absolute !important; top: 100% !important;
    left: 0 !important; right: 0 !important;
    background: linear-gradient(180deg, #F4EFFE 0%, #EBE3FE 100%) !important;
    padding: 12px 20px 22px !important;
    gap: 0 !important;
    box-shadow: 0 24px 40px -16px rgba(27,11,79,.18) !important;
    border-bottom: 1px solid rgba(91,23,235,.14) !important;
    z-index: 99 !important;
  }
  .site-nav.open ul li { width: 100%; list-style: none; }
  .site-nav.open ul li a {
    display: block; color: var(--fp-ink-2) !important;
    font-size: 16px; font-weight: 500;
    padding: 14px 4px !important;
    border-bottom: 1px solid rgba(91,23,235,.08);
    text-decoration: none !important;
  }
  .site-nav.open ul li a.nav-cta {
    background: var(--fp-purple) !important; color: #fff !important;
    border-radius: 999px !important; text-align: center !important;
    margin-top: 14px !important; padding: 14px !important;
    border-bottom: 0 !important;
  }
}
/* Task #100: bumped from 761px to 901px so the hamburger toggle stays
   visible on tablets (768px). Site.css already collapses
   `.site-nav ul` at ≤900px, and the original `nav ul { display:flex
   !important }` rule above is now scoped to ≥901px, so the hamburger
   becomes the only nav affordance between 521–900px. */
@media (min-width: 901px) {
  body nav:not(.site-nav) .nav-mobile-toggle,
  body .site-nav .menu-toggle { display: none !important; }
  body nav:not(.site-nav) .nav-mobile-sheet { display: none !important; }
}

/* Inline-nav slide-down sheet (injected by nav-patch.js) */
.nav-mobile-sheet {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: linear-gradient(180deg, #F4EFFE 0%, #EBE3FE 100%);
  padding: 12px 20px 22px;
  z-index: 99;
  flex-direction: column; gap: 0;
  box-shadow: 0 24px 40px -16px rgba(27,11,79,.18);
  border-bottom: 1px solid rgba(91,23,235,.14);
}
nav.is-open .nav-mobile-sheet { display: flex !important; }
.nav-mobile-sheet a {
  display: block;
  color: var(--fp-ink-2) !important;
  font-size: 16px; font-weight: 500;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(91,23,235,.08);
  text-decoration: none !important;
  font-family: var(--fp-sans, 'Instrument Sans', sans-serif);
}
.nav-mobile-sheet a:last-child { border-bottom: 0; }
.nav-mobile-sheet a.cta {
  margin-top: 14px;
  background: var(--fp-purple) !important; color: #fff !important;
  border-radius: 999px;
  text-align: center; padding: 14px;
  font-weight: 700;
  border-bottom: 0 !important;
  box-shadow: 0 6px 16px rgba(91,23,235,.22);
}
.nav-mobile-sheet a.cta::after { content: " →"; }
.nav-mobile-sheet a.login {
  border-bottom: 1px solid rgba(91,23,235,.08);
}

/* ---------- Hero card mobile padding + decorations (≤760px) ---------- */
@media (max-width: 760px) {
  .hero, header.hero {
    padding: 56px 22px 44px !important;
  }
  .hero h1, header.hero h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  .hero p, header.hero p {
    font-size: 16px !important; line-height: 1.5 !important;
  }
  /* Homepage hoot-v10 hero stat card */
  .hero-stat, .hero-cards, .hero-card, .hero-frame {
    margin: 28px auto 0 !important;
    border-radius: 24px !important;
  }
  .hero-cloud, .hero-decor, .hero-stars { display: none !important; }
}
@media (max-width: 420px) {
  .hero, header.hero {
    padding: 48px 18px 36px !important;
  }
  .hero h1, header.hero h1 {
    font-size: 30px !important;
  }
}

/* ---------- 3-step "Three wise steps" redesign ---------- */
/* Existing FAYE-3 layer styles .walk-phone with lavender frame.
   Here we add: edge-to-edge illustration block, desktop tilt/overlap,
   mobile single-column stack. */
.walk-phone {
  border-radius: 36px !important;
  background: var(--fp-lav-2) !important;
  border: none !important;
  box-shadow:
    0 30px 60px -20px rgba(27,11,79,.18),
    0 0 0 1px rgba(91,23,235,.08) !important;
  padding: 14px !important;
  width: 264px !important;
  max-width: 100% !important;
}
.walk-phone-screen {
  background: #fff !important;
  border-radius: 26px !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 460px;
  display: flex; flex-direction: column;
}
/* Hide the old dense UI blocks completely — illustrations replace them */
.walk-phone-screen .p1-input,
.walk-phone-screen .p1-btn,
.walk-phone-screen .p2-timeline,
.walk-phone-screen .p3-detail { display: none !important; }
.walk-phone-screen .p1-title,
.walk-phone-screen .p2-header,
.walk-phone-screen .p3-title {
  padding: 0 18px !important;
  margin-top: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--fp-violet-deep) !important;
  font-family: var(--fp-sans) !important;
  letter-spacing: -0.01em !important;
}
.walk-phone-screen .p1-estimate,
.walk-phone-screen .p2-person,
.walk-phone-screen .p3-card,
.walk-phone-screen .p3-sub {
  padding: 0 18px !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  color: #5C5C6E !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--fp-sans) !important;
}
.walk-phone-screen .p3-bell { display: none !important; }

/* Tighter caption block under the illustration so the phone doesn't feel hollow */
.walk-phone-screen { padding-bottom: 18px !important; }
.walk-phone-screen .p1-title,
.walk-phone-screen .p2-header,
.walk-phone-screen .p3-title { margin-top: 14px !important; }

/* Illustration block — compact, square card centered above text */
.walk-illus {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  margin: 8px auto 22px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 18px 40px -22px rgba(20,16,52,.28), 0 4px 14px -6px rgba(20,16,52,.10);
}
.walk-illus svg,
.walk-illus img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: center;
}
/* Background fallbacks behind images (in case an image is still loading) */
.walk-illus--lav    { background: #C8B8F5; }
.walk-illus--cream  { background: #FFE9D6; }
.walk-illus--purple { background: #5B17EB; }
@media (max-width: 760px) {
  .walk-illus { max-width: 240px; border-radius: 18px; margin-bottom: 18px; }
}

/* Desktop: tilt phones and overlap them slightly */
@media (min-width: 901px) {
  .walkthrough .walkthrough-grid,
  .walkthrough-grid {
    align-items: flex-start !important;
    gap: 0 !important;
  }
  .walkthrough-grid .walk-card { padding: 0 8px !important; }
  .walkthrough-grid .walk-card:nth-child(1) .walk-phone {
    transform: rotate(-4deg) translateY(8px);
    margin-right: -22px;
  }
  .walkthrough-grid .walk-card:nth-child(2) .walk-phone {
    transform: rotate(0deg) translateY(-12px);
    z-index: 3;
    box-shadow:
      0 40px 70px -20px rgba(27,11,79,.28),
      0 0 0 1px rgba(91,23,235,.10) !important;
  }
  .walkthrough-grid .walk-card:nth-child(3) .walk-phone {
    transform: rotate(4deg) translateY(8px);
    margin-left: -22px;
  }
  .walkthrough-grid .walk-card .walk-phone {
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .walkthrough-grid .walk-card:hover .walk-phone {
    transform: rotate(0deg) translateY(-16px) !important;
    z-index: 4;
  }
}
/* Tablet */
@media (max-width: 900px) and (min-width: 761px) {
  .walkthrough-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .walk-phone { width: 100% !important; max-width: 240px !important; margin: 0 auto !important; }
}
/* Mobile: stack with healthy gap */
@media (max-width: 760px) {
  .walkthrough-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .walk-card { text-align: center !important; }
  .walk-phone { width: 280px !important; margin: 0 auto !important; }
  .walk-card .walk-title,
  .walk-card .walk-desc { padding: 0 12px; }
}

/* ---------- Pricing comparison: mobile cards (≤760px) ---------- */
@media (max-width: 760px) {
  .pricing-table {
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; border-radius: 0 !important;
    margin-bottom: 48px !important;
  }
  .pricing-table thead { display: none !important; }
  .pricing-table tbody { display: block; }
  .pricing-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #fff !important;
    border: 1px solid rgba(10,10,20,.08) !important;
    border-radius: 16px !important;
    margin-bottom: 14px;
    overflow: hidden;
  }
  .pricing-table tr td:first-child {
    grid-column: 1 / -1;
    background: var(--fp-lav-2) !important;
    color: var(--fp-violet-deep) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(91,23,235,.10) !important;
  }
  .pricing-table tr td {
    padding: 14px 16px !important;
    border: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    position: relative;
  }
  .pricing-table tr td.col-hoot-free {
    background: rgba(91,23,235,.05) !important;
    border-right: 1px solid rgba(10,10,20,.06) !important;
  }
  .pricing-table tr td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
    color: #5C5C6E;
    margin-bottom: 6px;
  }
  .pricing-table tr td.col-hoot-free:not(:first-child)::before {
    content: "Wise";
    color: var(--fp-purple);
  }
  .pricing-table tr td:not(.col-hoot-free):not(:first-child)::before {
    content: "Big firms";
  }
  .pricing-table .price-val { font-size: 18px !important; }
  .pricing-table .price-sub { font-size: 12px !important; }
}

/* ---------- Reviews: SVG portrait avatars ---------- */
.review-card .avatar {
  background: var(--fp-lav-2) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative;
  overflow: hidden;
  width: 44px !important; height: 44px !important;
  border: 1px solid rgba(91,23,235,.12);
}
.review-card .avatar::before,
.review-card .avatar::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  inset: 0;
}
/* Distinct portraits per first-letter via inline SVGs (data-uri).
   We target via :nth-of-type fallback because the only key signal in
   reviews.html is initials text. We use attribute-style nth fallbacks. */
.review-card:nth-of-type(1) .avatar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='22' fill='%23FFD9C2'/><circle cx='22' cy='18' r='7' fill='%23FFEFE0'/><path d='M9 38c2-7 8-10 13-10s11 3 13 10z' fill='%23FFEFE0'/><path d='M22 8c-5 0-8 3-8 8 0 0 4-3 8-3s8 3 8 3c0-5-3-8-8-8z' fill='%231B0B4F'/></svg>");
}
.review-card:nth-of-type(2) .avatar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='22' fill='%23EBE3FE'/><circle cx='22' cy='18' r='7' fill='%23FFEFE0'/><path d='M9 38c2-7 8-10 13-10s11 3 13 10z' fill='%235B17EB'/><path d='M22 7c-6 0-9 4-9 10 0 2 1 3 1 3s2-3 3-4c2-1 4-2 5-2s4 1 5 2 3 4 3 4 1-1 1-3c0-6-3-10-9-10z' fill='%231B0B4F'/></svg>");
}
.review-card:nth-of-type(3) .avatar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='22' fill='%23E1D4FB'/><circle cx='22' cy='18' r='7' fill='%23FFEFE0'/><path d='M9 38c2-7 8-10 13-10s11 3 13 10z' fill='%23FF8E5E'/><path d='M22 7c-4 0-8 3-8 7 0 1 1 2 1 2h14s1-1 1-2c0-4-4-7-8-7z' fill='%231B0B4F'/><circle cx='17' cy='18' r='1.2' fill='%231B0B4F'/><circle cx='27' cy='18' r='1.2' fill='%231B0B4F'/></svg>");
}
.review-card:nth-of-type(4) .avatar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='22' fill='%23FFE9D6'/><circle cx='22' cy='18' r='7' fill='%23FFEFE0'/><path d='M9 38c2-7 8-10 13-10s11 3 13 10z' fill='%231B0B4F'/><path d='M14 16c0-5 4-9 8-9s8 4 8 9c0 1-1 2-1 2-2-2-4-3-7-3s-5 1-7 3c0 0-1-1-1-2z' fill='%23FF8E5E'/></svg>");
}
.review-card:nth-of-type(5) .avatar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='22' fill='%23F4EFFE'/><circle cx='22' cy='18' r='7' fill='%23FFEFE0'/><path d='M9 38c2-7 8-10 13-10s11 3 13 10z' fill='%235B17EB'/><circle cx='17' cy='17' r='2' fill='%231B0B4F'/><circle cx='27' cy='17' r='2' fill='%231B0B4F'/><path d='M14 13l4-2M30 13l-4-2' stroke='%231B0B4F' stroke-width='1.5' stroke-linecap='round' fill='none'/></svg>");
}
.review-card:nth-of-type(6) .avatar::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><circle cx='22' cy='22' r='22' fill='%23FFD9C2'/><circle cx='22' cy='18' r='7' fill='%23FFEFE0'/><path d='M9 38c2-7 8-10 13-10s11 3 13 10z' fill='%23FF8E5E'/><path d='M22 8c-4 0-8 2-8 8h16c0-6-4-8-8-8z' fill='%231B0B4F'/></svg>");
}

/* ---------- Auth pages: form above fold on 390px ---------- */
@media (max-width: 760px) {
  .auth-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 100vh !important;
  }
  .brand-pane {
    padding: 14px 20px !important;
    min-height: auto !important;
    display: flex !important; flex-direction: row !important;
    align-items: center !important;
    background: var(--fp-violet-deep) !important;
    color: #fff !important;
  }
  .brand-pane .brand {
    color: #fff !important;
    font-size: 22px !important;
  }
  .brand-pane .pitch { display: none !important; }
  .brand-pane .proof { display: none !important; }
  .brand-pane .testimonial { display: none !important; }
  .brand-pane .trust-row { display: none !important; }
  .brand-pane h2 { display: none !important; }
  .brand-pane > p { display: none !important; }

  .form-pane {
    padding: 18px 18px 28px !important;
    min-height: auto !important;
  }
  .form-pane .top {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }
  .form-pane .top .home { font-size: 13px !important; }
  .form-pane .top .switch { font-size: 13px !important; }
  .form-card {
    margin-top: 8px !important;
    padding: 22px 20px !important;
    border-radius: 18px !important;
  }
  .form-card h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  .form-card .eyebrow {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .form-card .sub {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  .form-card .social-row {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .form-card .social-btn {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .form-card .field {
    margin-bottom: 12px !important;
  }
  .form-card .field-row {
    gap: 8px !important;
  }
  .form-card .btn {
    padding: 14px !important;
    font-size: 15px !important;
  }
  .form-card .consent {
    font-size: 11px !important;
    line-height: 1.45 !important;
    margin-top: 12px !important;
  }
  .form-pane .bottom {
    margin-top: 16px !important;
    font-size: 11px !important;
    padding-top: 14px !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
}

/* ---------- Start funnel rhythm (≤760px) ---------- */
@media (max-width: 760px) {
  .flow-main {
    padding: 28px 20px !important;
  }
  .flow-main-inner h1 {
    font-size: 26px !important;
    margin-bottom: 8px !important;
  }
  .flow-main-inner p.sub {
    font-size: 14px !important;
    margin-bottom: 22px !important;
  }
  .progress-bar {
    margin-bottom: 22px !important;
    gap: 8px !important;
  }
  .progress-step { height: 5px !important; }
  .input-group {
    margin-bottom: 16px !important;
  }
  .input-group input {
    padding: 14px 16px !important;
    font-size: 16px !important;
  }
  .btn-submit {
    padding: 16px !important;
    font-size: 15px !important;
  }
  .trust-chips {
    margin-top: 18px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
  .flow-side {
    padding: 28px 20px !important;
    gap: 18px !important;
  }
  .flow-side .side-card {
    padding: 18px !important;
  }
  .flow-side .side-card .val {
    font-size: 26px !important;
  }
}

/* ---------- Footer mobile grid polish ---------- */
@media (max-width: 760px) {
  .site-foot {
    padding: 40px 20px 32px !important;
  }
  .site-foot .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 18px !important;
  }
  .site-foot .grid .brand-col {
    grid-column: 1 / -1 !important;
  }
  .site-foot .grid .col h5 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  .site-foot .grid .col ul li {
    margin-bottom: 6px !important;
  }
  .site-foot .grid .col ul li a {
    font-size: 13px !important;
  }
  .site-foot .legal {
    margin-top: 24px !important;
    padding-top: 18px !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    font-size: 12px !important;
  }

  /* Hoot-v10 inline footer */
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 18px !important;
  }
  .footer-top .footer-brand,
  .footer-top > div:first-child {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 420px) {
  .site-foot .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 14px !important;
  }
  .site-foot .grid .col ul li a { font-size: 12.5px !important; }
}

/* ---------- Sticky bottom CTA bar (mobile only, scroll-gated) ---------- */
.mobile-cta-bar { display: none; }
@media (max-width: 760px) {
  .mobile-cta-bar {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 999;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(10,10,20,.08);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none !important;
    font-family: var(--fp-sans, 'Instrument Sans', sans-serif);
    box-shadow: 0 -8px 24px -8px rgba(10,10,20,.12);
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-cta-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-cta-bar .lbl {
    font-size: 13px; font-weight: 600;
    color: #2A2A38;
    letter-spacing: -0.01em;
  }
  .mobile-cta-bar .cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--fp-purple);
    color: #fff;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 8px 16px -6px rgba(91,23,235,.4);
  }
  /* Add bottom padding so sticky bar doesn't overlap sticky CTA pages */
  body { padding-bottom: 78px; }
  /* Don't double-pad on auth/start funnel pages (where bar is hidden via JS) */
  body:has(.auth-shell), body:has(.flow-container) { padding-bottom: 0 !important; }
}

/* ---------- Mobile: tighten nav on hoot homepage ---------- */
@media (max-width: 760px) {
  body nav .logo-text, body header nav .logo-text {
    font-size: 22px !important;
  }
  body nav .logo-mark, body header nav .logo-mark {
    width: 34px !important; height: 34px !important;
  }
}

/* ============================================================
   FAYE-4 — Refinements & overrides for new walk illustrations
   ============================================================ */

/* Override FAYE-3 walk-phone-screen layout so illustration sits at top */
.walkthrough .walk-phone-screen,
.walk-phone-screen.b1,
.walk-phone-screen.b2,
.walk-phone-screen.b3 {
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 0 0 18px 0 !important;
  text-align: left !important;
}

/* Title sits below illustration */
.walk-phone-screen .p1-title,
.walk-phone-screen .p2-header,
.walk-phone-screen .p3-title {
  padding: 14px 18px 0 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
}
/* Sub-text caption */
.walk-phone-screen .p1-estimate,
.walk-phone-screen .p2-person,
.walk-phone-screen .p3-sub {
  padding: 0 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: block !important;
  text-align: left !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #5C5C6E !important;
}
/* Defeat inner span styling from FAYE-3 (.t / .b / .nm / .r) since
   we now use simpler inline markup. */
.walk-phone-screen .p2-header > .t,
.walk-phone-screen .p2-header > .b,
.walk-phone-screen .p2-person > .info,
.walk-phone-screen .p2-person > .p2-av {
  display: inline !important;
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}
.walk-phone-screen .p2-header .t {
  color: var(--fp-violet-deep) !important;
  font-weight: 700 !important;
}
.walk-phone-screen .p1-estimate .amt {
  color: var(--fp-purple) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -.01em !important;
  margin-right: 4px;
}
.walk-phone-screen .p3-sub strong {
  color: var(--fp-purple) !important;
  font-weight: 700 !important;
}

/* Don't hide hero-stars (it's the rating content), only true decorations */
@media (max-width: 760px) {
  .hero-stars { display: flex !important; justify-content: center; }
  .hero-cloud { display: none !important; }
  .hero-visual { margin-top: 28px !important; }
  .hero-house { max-width: 280px !important; }
  /* The wisest underline can wrap awkwardly on narrow screens */
  .hero-title .wise { background-size: 100% 0.4em !important; }
  /* Mock chat bubbles around the hero on hoot-v10 — hide on mobile */
  .hero-bubble, .hero-mock { display: none !important; }
}

/* Walkthrough section padding tighten on mobile */
@media (max-width: 760px) {
  .walkthrough { padding: 56px 22px !important; }
  .walkthrough-head { margin-bottom: 36px !important; }
  .walk-step-num { font-size: 16px !important; margin-bottom: 18px !important; }
  .walk-card .walk-title {
    font-size: 22px !important; margin-top: 22px !important;
  }
  .walk-card .walk-desc { font-size: 15px !important; }
}

/* ============================================================
   TASK #100 — SITE-WIDE MOBILE PASS (loaded last; can override)
   Goals: no horizontal scroll at 320/375/414, ≥44px tap targets,
   ≥15px body text, single-column forms ≤520px, polished tablet
   range (600–900px). Surgical fixes only — no visual redesign.
   ============================================================ */

/* ---------- 1. Hard guard against horizontal scroll ---------- */
html { overflow-x: hidden !important; }
body { overflow-x: clip; max-width: 100vw; }

/* Replaced elements never push viewport width */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* Long preformatted blocks and code can scroll internally */
pre, code, kbd, samp {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Wide tables become horizontally scrollable strips on phones,
   but never push the body itself — wrap them in .table-wrap or
   the rule below will simply allow the cell text to break. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  table.table, table.prose-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Long URLs / emails / hashes / wallet addresses inside copy */
.prose a, .prose code,
.footer-disclaimer, .legal a,
.field .hint, .form-pane .bottom,
.consent { overflow-wrap: anywhere; word-break: break-word; }

/* ---------- 2. Min-width:0 on common flex/grid children ----------
   Without this, a single long word inside a grid cell can blow
   the column past its `1fr` track and create page-level overflow. */
.cards-grid > *, .stats-row > *, .two-col > *,
.team-grid > *, .stat-grid > *, .qchips > *,
.form-grid > *, .resource-grid > *, .evi-grid > *,
.footer-top > *, .footer-col,
.row > *, .field-row > *, .social-row > * { min-width: 0; }

/* ---------- 3. Tablet polish (600–900px) ---------- */
@media (min-width: 600px) and (max-width: 900px) {
  /* Marketing containers: room to breathe but not overstretched */
  .container { padding: 56px 28px; }
  .page-hero { padding: 72px 28px 56px; }
  .page-hero h1 { font-size: 44px; }
  .cta-strip { padding: 44px 32px; border-radius: 22px; }
  .cta-strip h2 { font-size: 30px; }

  /* Card grids: comfortable 2-up at tablet */
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Footer: 4 cols → 2 cols at tablet, brand spans both */
  footer { padding: 56px 28px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- 4. Phone pass (≤520px) ---------- */
@media (max-width: 520px) {
  /* Body text floor — never below 15px on phones, prevents iOS auto-zoom */
  body { font-size: 15px; }

  /* Minimum tap target on every interactive element in nav/cta context */
  .site-nav a, .site-nav .menu-toggle,
  .nav-mobile-sheet a,
  nav a, nav button,
  .btn, .btn-primary, .btn-ghost, .btn-amber,
  .btn-secondary, .install-btn, .nav-cta,
  .footer-col a, .footer-bottom a,
  .field-row-aux a,
  .toggle, .row .toggle {
    min-height: 44px;
  }
  .site-nav a, .nav-mobile-sheet a, .footer-col a {
    display: inline-flex;
    align-items: center;
  }

  /* Form fields: 16px font-size avoids the iOS auto-zoom on focus,
     and 44px min height keeps them tap-friendly. Single column. */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea { min-height: 88px; }
  .field-row, .social-row, .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-card { padding: 22px !important; max-width: 100%; }

  /* Marketing hero/section padding crunch for very small phones */
  .page-hero { padding: 56px 18px 40px; }
  .page-hero h1 { font-size: 32px; }
  .page-hero p { font-size: 15px; }
  .container { padding: 48px 18px; }
  .cta-strip { padding: 36px 22px; border-radius: 22px; }
  .cta-strip h2 { font-size: 26px; }
  .cta-strip .btn-primary, .cta-strip .btn-ghost {
    display: inline-flex; margin: 6px 4px 0; padding: 14px 22px;
  }
  .section-title { font-size: 28px; }

  /* Footer: single column on phones (already in site.css ≤520px) */
  footer { padding: 48px 20px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
  .footer-bottom { font-size: 12px; }
  .footer-bottom .legal { width: 100%; }
  .footer-bottom .legal a { margin-right: 12px; }

  /* Stats row: single column with smaller pad on phones */
  .stats-row { padding: 28px 22px; gap: 18px; }
  .stats-row .stat .num { font-size: 32px; }

  /* Cards a touch tighter */
  .card { padding: 22px; }

  /* Job card → stack vertically */
  .job-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .job-card .arrow { display: none; }

  /* Onboarding flow — most flow pages use inline `nav { padding:16px 44px }`
     and `.flow-main { padding:60px 44px }`. Crunch them on phones so the
     CTAs and form fields aren't jammed against the edge. */
  body > nav:not(.site-nav),
  body > header > nav { padding: 12px 16px !important; }
  .flow-main { padding: 32px 18px !important; }
  .flow-main-inner { max-width: 100% !important; }
  .flow-side { display: none !important; } /* desktop-only marketing rail */

  /* Auth two-pane form padding */
  .form-pane { padding: 22px 18px !important; }
  .auth-shell .brand-pane { padding: 22px 18px 26px !important; }
  .form-card h1 { font-size: 28px !important; }

  /* Bottom-fixed CTAs / install banners shouldn't cover the active CTA.
     Provide bottom spacer when an .app-fab or .bottom-nav is present. */
  body[data-app] .app-main { padding-bottom: 110px; }
}

/* ---------- 5. Extra-small phones (≤360px) ---------- */
@media (max-width: 360px) {
  .page-hero h1 { font-size: 28px; }
  .section-title { font-size: 24px; }
  .container { padding: 40px 14px; }
  .form-card { padding: 18px !important; }
  .page-hero { padding: 48px 14px 32px; }
}

/* ---------- 6. Reduced-motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 7. start-property.html — mobile rules ----------
   The property-detail page has 14 grid layouts (detail-grid, comp-row,
   nbhd-row, rates-grid, etc.) and zero @media queries of its own. These
   rules collapse multi-column grids to phone-friendly stacks without
   touching the file. */
@media (max-width: 600px) {
  .detail-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ratio-grid, .ratio-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rates-grid { grid-template-columns: 1fr !important; }
  .comp-row, .listing-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: left !important;
  }
  .nbhd-row {
    grid-template-columns: 1fr auto !important;
    gap: 6px 12px !important;
  }
  .nbhd-row .addr { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .equity-grid, .equity-card .grid {
    grid-template-columns: 1fr !important;
  }
  .map-wrap, .static-map, .leaflet-container {
    height: 220px !important;
    max-width: 100% !important;
  }
  .addr-card { flex-wrap: wrap !important; }
}

/* ---------- 8. In-app dashboard refinements (≤600px) ---------- */
@media (max-width: 600px) {
  /* AI chat bubbles / long messages must wrap aggressively */
  .chat-msg, .chat-bubble, .ai-msg, .ai-bubble,
  .ask-msg, .hoot-bubble {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Comp tables / evidence rows: allow inner text to wrap */
  .cad-actions-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .cad-key-dates { grid-template-columns: 1fr !important; }

  /* Modal body padding */
  .wpt-modal-head { padding: 18px 18px 10px; }
  .wpt-modal-body { padding: 0 18px 14px; }
  .wpt-modal-foot { padding: 12px 18px 18px; flex-direction: column; }
  .wpt-modal-foot > * { width: 100%; justify-content: center; }
}

/* ---------- 9. Long words/email lines never overflow ---------- */
.field input, .field-readonly,
.row .v, .stat .num, .resource-tile p, .evi-item .evi-sub,
.tl-content p { overflow-wrap: anywhere; }

/* ---------- 10. Hide pure-decorative elements on phones ---------- */
@media (max-width: 520px) {
  .deco-mobile-hide,
  .hero-cloud, .hero-decor:not(.hero-stars),
  .award-strip, .marquee-strip { display: none !important; }
}

/* ---------- 11. Tablet nav (Task #100) ----------
   The root-cause fix lives in Section 1 above: the original
   `nav ul { display:flex !important }` rule was wrapped in
   `@media (min-width: 901px)`, so site.css's existing
   `.site-nav ul { display:none }` at ≤900px now takes effect
   naturally — no broad blanket override needed. We only ensure the
   site-nav hamburger toggle is visible and tap-friendly on the same
   range. */
@media (max-width: 900px) {
  .site-nav .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
  }
}

/* ---------- 12. Responsive tables (Task #100) ----------
   On phones a `.table` like the one on /veterans.html can easily
   overflow horizontally because tables are display:table and won't
   shrink below their intrinsic content width. Make every shared
   `.table` horizontally scrollable inside the page (instead of
   pushing the body sideways) at ≤600px. */
@media (max-width: 600px) {
  table.table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.table th,
  table.table td {
    white-space: nowrap;
    font-size: 13.5px !important;
    padding: 10px 12px !important;
  }
}