/* ============================================================================
   Version C — the latest plan. Loads after main.css (+ b.css on flow screens)
   and reuses their design tokens. Adds the ONE exclusive traffic-green "go"
   button and a few shopfront touches. Green appears on nothing else, so it
   always, unmistakably means "this is the way in".
   ========================================================================== */

:root{ --go:#0f8a39; --go-dark:#0c6f2e; --go-tint:rgba(15,138,57,.12); }

.btn-go{ --bd:var(--go); background:var(--go); color:#fff; border-color:var(--go); }
.btn-go:hover,.btn-go:focus-visible{ background:var(--go-dark); border-color:var(--go-dark); color:#fff; box-shadow:0 10px 24px rgba(15,138,57,.28); outline:none; }
.btn-go .ar{ transition:transform .2s; }
.btn-go:hover .ar{ transform:translateX(5px); }
.hero .btn-go{ font-size:1.18rem; padding:18px 34px; }

/* Price-transparency strip on the homepage hero */
.price-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; justify-content:center; margin-top:20px; font-weight:600; color:var(--ink-muted); font-size:.98rem; }
.price-strip b{ color:var(--ink); }
.price-strip .price-strip__free{ color:var(--go-dark); font-weight:800; }
.price-strip a{ color:var(--blue); font-weight:700; text-decoration:none; }
.price-strip a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Result-screen call-to-email + the Evan call-out */
.bb-email-cta{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:24px; }
.evan-card{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--go); border-radius:14px; box-shadow:var(--shadow); padding:22px 24px; margin:16px 0; }
.evan-card h3{ color:var(--navy); font-size:1.12rem; margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.evan-card p{ color:var(--ink-muted); font-size:1rem; }
.evan-card .when{ color:var(--ink); font-weight:600; margin-top:6px; }

/* "available soon" pill on paid tiers */
.soon{ display:inline-flex; align-items:center; gap:6px; background:var(--navy-tint); color:var(--navy); font-weight:700; font-size:.78rem; letter-spacing:.02em; padding:5px 11px; border-radius:100px; }

/* Hero — tighten the top gap under the nav to a clean 75px on every screen.
   (Was the section's padding-block ~72px + .hero__inner padding-top ~84px ≈ 165px.)
   Zero the hero section's top padding, then set the single intentional gap. */
.hero{ padding-block-start:0; }
.hero__inner{ padding-top:75px; }

/* Nav green button must look + behave like a main button. The plain nav-link styles
   were leaking onto it (dark text via .nav a, and the .nav a::after underline bar).
   Force white text/arrow + proper button padding, and kill the underline. */
.site-header .nav a.nav-cta{ color:#fff; padding:11px 20px; }
.site-header .nav a.nav-cta:hover,
.site-header .nav a.nav-cta:focus-visible{ color:#fff; }
.site-header .nav a.nav-cta::after{ display:none; }

/* Pricing — all four tiers in ONE row, sitting high under the banner (above the fold).
   Desktop only; <=980px keeps the stacked layout from main.css. Compacted a touch so
   four fit cleanly across and stay above the fold under the 250px banner. */
.pricing-tiers{ padding-top:30px; }
@media (min-width:981px){
  .pricing-tiers .tiers{ grid-template-columns:repeat(4,1fr); gap:16px; }
  .pricing-tiers .tier__head{ padding:20px 18px 14px; }
  .pricing-tiers .tier__price{ font-size:1.95rem; }
  .pricing-tiers .tier__body{ padding:16px 18px 20px; gap:12px; }
  .pricing-tiers .tier__list{ gap:9px; }
  .pricing-tiers .tier__list li{ font-size:.9rem; }
}

/* Every pricing tier is equal and behaves like a Service NSW card: white by default,
   turns navy with white text on hover. No tier is singled out. */
.pricing-tiers .tier{ cursor:pointer; transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s; }
.pricing-tiers .tier:hover,
.pricing-tiers .tier:focus-within{ background:var(--navy); border-color:var(--navy); box-shadow:var(--shadow-lift); transform:translateY(-3px); }
.pricing-tiers .tier:hover .tier__head,
.pricing-tiers .tier:focus-within .tier__head{ background:transparent; border-bottom-color:rgba(255,255,255,.22); }
.pricing-tiers .tier:hover .tier__name,
.pricing-tiers .tier:hover .tier__price,
.pricing-tiers .tier:hover .tier__price span,
.pricing-tiers .tier:hover .tier__list li,
.pricing-tiers .tier:hover .tier__list svg,
.pricing-tiers .tier:focus-within .tier__name,
.pricing-tiers .tier:focus-within .tier__list li{ color:#fff; }
.pricing-tiers .tier:hover .soon{ background:rgba(255,255,255,.16); color:#fff; }