/* TX Home Buying Pros — global styles, resets, keyframes.
   Layout/visual styling is authored inline per element (component-scoped). */
*{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:#F7F3EC;color:#1F1A16;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  a{color:#4E6357;text-decoration:none;transition:color .3s ease}
  a:hover{color:#8CA697}
  img{display:block;max-width:100%}
  ::selection{background:#8CA697;color:#17110E}
  @keyframes heroRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
  @keyframes glowFloat{0%,100%{transform:translate(0,0) scale(1);opacity:.55}50%{transform:translate(3%,-4%) scale(1.08);opacity:.8}}
  @keyframes glowFloat2{0%,100%{transform:translate(0,0) scale(1);opacity:.4}50%{transform:translate(-4%,3%) scale(1.12);opacity:.65}}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @keyframes txhbpGlow{0%,100%{transform:translate(0,0) scale(1);opacity:.55}50%{transform:translate(3%,-4%) scale(1.08);opacity:.8}}
  .txhbp-compare{background:#E7EFE8;padding:clamp(70px,9vw,120px) clamp(18px,5vw,64px);font-family:'Hanken Grotesk',system-ui,sans-serif}
  .txhbp-compare *{box-sizing:border-box}
  .txhbp-compare .grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;max-width:1160px;margin:0 auto}
  .txhbp-compare .vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:66px;height:66px;border-radius:50%;background:#17110E;border:2px solid #8CA697;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px -16px rgba(23,17,14,.6)}
  @media(max-width:860px){
    .txhbp-compare .grid{grid-template-columns:1fr}
    .txhbp-compare .vs{display:none}
  }
  details.faq summary{list-style:none;cursor:pointer;outline:none}
  details.faq summary::-webkit-details-marker{display:none}
  details.faq .faq-ic{transition:transform .3s ease}
  details.faq[open] .faq-ic{transform:rotate(45deg);background:#17110E}
  details.faq[open] .faq-ic svg{stroke:#F7F3EC}

  /* ============ MOBILE RESPONSIVENESS ============
     Inline styles carry the desktop/component design; the overrides below
     patch touch targets, the one ungoverned grid (compare table), iOS zoom,
     and hero image height for phones. !important is used deliberately to
     beat inline styles without having to rewrite every element by hand. */
  @media (max-width: 900px) {
    /* Touch targets: hamburger + footer social icons were under the 44px minimum */
    [data-menu-btn] { padding: 10px !important; }
    a[aria-label="Facebook"], a[aria-label="Instagram"], a[aria-label="Google"] {
      width: 44px !important; height: 44px !important;
    }

    /* Prevent iOS Safari auto-zoom on form focus (inputs must be 16px+) */
    [data-offer-form] input { font-size: 16px !important; }

    /* Hero portrait's height floor (420px) doesn't shrink further on phones,
       making the hero unnecessarily tall before the fold */
    [data-hero-img] img { height: 340px !important; }
  }

  @media (max-width: 480px) {
    [data-hero-img] img { height: 280px !important; }
  }