/* ============================================================
   HLRBO Hunter How It Works (/howitworks/hunter) — tokens,
   keyframes, hover/focus states, and responsive rules for the
   Claude Design "Hunter How It Works v2.dc.html" handoff. The
   Razor view keeps the design's inline styles verbatim; ONLY
   state-dependent properties (hover-affected backgrounds/colors,
   card lift) and responsive overrides live here. Prefix: hiw26.
   ============================================================ */

:root {
  --hlrbo-green-dark: #31420E;
  --hlrbo-green: #6E883F;
  --hlrbo-green-hover: #5E7434;
  --hlrbo-orange: #DC7001;
  --hlrbo-orange-hover: #C56401;
  --hlrbo-text-primary: #1A1A1A;
  --hlrbo-text-secondary: #666666;
  --hlrbo-border: #E0E0E0;
  --hlrbo-bg: #F8F9FA;
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html { scroll-behavior: smooth; }
.hiw26 {
  margin: 0;
  background: #FFFFFF;
  font-family: var(--font-sans);
  color: var(--hlrbo-text-primary);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hiw26 a { color: #6E883F; }
.hiw26 a:hover { color: #5E7434; }
.hiw26 a:focus-visible { outline: 2px solid #DC7001; outline-offset: 3px; border-radius: 4px; }

/* ---------- Keyframes (verbatim from the design) ---------- */
@keyframes hiw26HeroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.hiw26-hero-zoom { animation: hiw26HeroZoom 45s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hiw26 div { animation: none !important; }
}

/* ---------- Hover states (from the prototype's style-hover attrs).
   All prefixed .hiw26 so they outrank the page's global anchor rule. ---------- */
.hiw26 .hiw26-banner-link { color: #FFFFFF; text-decoration: none; }
.hiw26 .hiw26-banner-link:hover { color: #FFFFFF; text-decoration: underline; }
.hiw26 .hiw26-navlink { color: rgba(255,255,255,0.95); text-decoration: none; }
.hiw26 .hiw26-navlink:hover { color: #FFFFFF; }
.hiw26 .hiw26-btn-white { background: #FFFFFF; color: #31420E; text-decoration: none; }
.hiw26 .hiw26-btn-white:hover { background: #EDEFE6; color: #31420E; }
.hiw26 .hiw26-btn-outline-w { color: #FFFFFF; text-decoration: none; background: transparent; }
.hiw26 .hiw26-btn-outline-w:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; }
.hiw26 .hiw26-btn-green { background: #6E883F; color: #FFFFFF; text-decoration: none; }
.hiw26 .hiw26-btn-green:hover { background: #5E7434; color: #FFFFFF; }
.hiw26 .hiw26-link-green { color: #6E883F; text-decoration: none; }
.hiw26 .hiw26-link-green:hover { color: #5E7434; }
/* Choose Silver / Choose Platinum outline buttons (hover fills #EDF1E2) */
.hiw26 .hiw26-btn-outline-green { background: transparent; color: #6E883F; }
.hiw26 a:hover .hiw26-btn-outline-green, .hiw26 .hiw26-btn-outline-green:hover { background: #EDF1E2; color: #6E883F; }
/* Choose Gold — design default goldCta='orange' */
.hiw26 .hiw26-btn-orange { background: #DC7001; color: #FFFFFF; }
.hiw26 a:hover .hiw26-btn-orange, .hiw26 .hiw26-btn-orange:hover { background: #C56401; color: #FFFFFF; }
/* Plan-card CTA wrapper links shouldn't inherit the green link color */
.hiw26 .hiw26-plan-cta { text-decoration: none; }

/* ---------- Listing cards (hover lift per the design) ---------- */
.hiw26 .hiw26-card {
  background: #FFFFFF; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none; color: inherit;
}
.hiw26 .hiw26-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.12); transform: translateY(-2px); color: inherit; }
/* "View details" keeps the design's link hover (the whole card is the anchor,
   so the color state lives on the span) */
.hiw26 .hiw26-card-view { color: #6E883F; }
.hiw26 .hiw26-card-view:hover, .hiw26 .hiw26-card:hover .hiw26-card-view { color: #5E7434; }

/* Live-data accommodations kept out of the verbatim inline styles:
   long geo/meta strings wrap instead of overflowing. */
.hiw26 .hiw26-card-meta { flex-wrap: wrap; }
.hiw26 .hiw26-listings-head { flex-wrap: wrap; }
.hiw26 .hiw26-cta-center { text-align: center; }

/* ---------- Responsive (the prototype is desktop-only; these keep the
   page usable on tablet/phone without altering desktop pixels) ---------- */
@media (max-width: 1023px) {
  .hiw26-nav-links { display: none !important; }
  /* #12882 - the announcement banner is a fixed 44px row. Once the copy wraps it is
     clipped, so below the desktop breakpoint it grows instead and centres its lines. */
  .hiw26-banner { height: auto !important; min-height: 44px; flex-wrap: wrap;
                  padding: 8px 16px; row-gap: 2px; text-align: center; }
  .hiw26-freeacct-grid, .hiw26-steps-grid, .hiw26-lease-grid, .hiw26-why-grid,
  .hiw26-listings-grid, .hiw26-quotes-grid, .hiw26-pricing-grid, .hiw26-faq-grid { grid-template-columns: 1fr !important; }
  /* #12778 — the trust row lost its fourth badge ("Cancel anytime"), so a 2-up
     tablet override would leave the third badge dangling on its own line. */
  .hiw26-trust-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .hiw26-hero-h1 { font-size: clamp(52px, 9vw, 88px) !important; }
}
@media (max-width: 640px) {
  .hiw26-pagepad { padding-left: 20px !important; padding-right: 20px !important; }
  /* #10197: this page has no fixed nav — just the one hero nav row — which
     overflows at ≤640, clipping Sign Up. Its row gap is already
     clamp(20px, 3.4vw, 44px) (floors to 20px here) with a 14px gap in the
     Log in/Lease Your Land/Sign Up group; both get pinned to 12px here so
     the full row (pill still shown) fits down to ~521px — the pill itself
     only needs to go below that; see the ≤520px block below. :has()
     isolates the nav-row .hiw26-pagepad from the other two .hiw26-pagepad
     rows (hero copy, stat bar) that don't have a .hiw26-nav-links child,
     so neither's layout (incl. the stat bar's own flex spacing) is
     touched. No logged-in swap class in this page's nav (no LoggedIn
     check here), so there's no extra logged-in variant to hide. Its logo
     is a flat 28px (~80px wide), already under the ~100px target other
     pages' hero logos get clamped to at ≤360, so it's left untouched. */
  .hiw26-pagepad:has(> .hiw26-nav-links) {
    gap: 12px !important;
  }
  .hiw26-pagepad:has(> .hiw26-nav-links) > div[style*="margin-left: auto"] {
    gap: 12px !important;
  }
  .hiw26-hero-h1 { font-size: clamp(42px, 12vw, 60px) !important; }
  .hiw26-trust-grid { grid-template-columns: 1fr !important; }
  .hiw26-freeacct-card { padding: 28px 22px !important; }
}
@media (max-width: 520px) {
  /* #10197: hide the outline Lease Your Land pill below the width the
     ≤640 gap fix alone can't cover. Nav-scoped so the "See how it
     works"/"Browse leases" outline buttons elsewhere on the page stay
     untouched. */
  .hiw26-pagepad:has(> .hiw26-nav-links) a.hiw26-btn-outline-w {
    display: none !important;
  }
}