/* Wire 3 — "check availability" gate styles (shared single source of truth).
   ----------------------------------------------------------------------------
   The dark address-gate section used BOTH at the top of the main buy flow
   (index.html, via `@import "availability.css"` in buy.css) and embedded on
   /promo/<slug> campaign pages (lib/promo.js renders the markup when a campaign
   sets "availability"; client is public/availability.js). Brand-level styling
   (tokens, buttons, the `rise` animation, .vh-eyebrow / .vi-body) comes from shared
   outward.css. Keeping the gate styles HERE (not duplicated in buy.css) is what
   stops the two surfaces drifting. (The promo CTAs anchor to #availGate; that scroll
   offset lives in the promo template's inline <style>.)
   ============================================================================ */

/* ── Hero: full-bleed DARK check-availability gate ── */
.hero { position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(125deg,var(--navy-900) 0%,var(--navy-800) 60%,var(--navy-mid) 100%); }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size:24px 24px; }
.hero::after { content:""; position:absolute; bottom:-180px; left:-120px; width:480px; height:480px; border-radius:50%;
  pointer-events:none; background:radial-gradient(circle, rgba(46,144,224,.28), transparent 68%); }
.hero-inner { position:relative; z-index:1; max-width:720px; margin:0 auto; padding:56px 24px 64px; text-align:center; animation:rise .5s var(--ease) both; }
.hero-title { color:#fff; font-size:2em; line-height:1.08; margin:8px 0 0; text-wrap:balance; }
.hero-sub { max-width:56ch; font-size:1.12em; }

/* Address gate — light pill fields on the dark hero (drips-style), with depth. */
.leadform { display:flex; flex-direction:column; gap:13px; margin:28px auto 0; }
.lf-field { display:flex; align-items:center; gap:10px; min-width:0; padding:0 17px; background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7); border-radius:26px;
  box-shadow:0 5px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(var(--navy-rgb),.07);
  transition:border-color .15s, box-shadow .15s; }
.lf-field svg { width:18px; height:18px; color:var(--grey-mid); flex-shrink:0; transition:color .15s; }
.lf-field input { flex:1; min-width:0; border:0; background:transparent; color:var(--navy); font:16px var(--font-body); padding:13px 0; outline:none; }
.lf-field input::placeholder { color:var(--grey-mid); }
.lf-field:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(var(--green-rgb),.45), 0 5px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.95); }
.lf-field:focus-within svg { color:var(--green-dk); }
.lf-field.bad { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.25), 0 5px 14px rgba(0,0,0,.34); }
.lf-field.bad svg { color:var(--red); }
.lf-field.shake, .lf-consent.shake { animation:shake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }

/* ── Availability loading state ("Finding the best offers in your area") ── */
.av-loading { display:flex; flex-direction:column; align-items:center; gap:20px; padding:26px 0 6px; animation:rise .35s var(--ease) both; }
.av-loading[hidden] { display:none; }
.av-radar { position:relative; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }
.av-radar svg { position:relative; z-index:2; width:32px; height:32px; color:var(--green); filter:drop-shadow(0 2px 7px rgba(0,0,0,.45)); }
.av-radar i { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(var(--green-rgb),.7); opacity:0; animation:radar 1.9s cubic-bezier(.2,.6,.3,1) infinite; }
.av-radar i:nth-child(2){ animation-delay:.63s; } .av-radar i:nth-child(3){ animation-delay:1.26s; }
@keyframes radar { 0%{transform:scale(.28);opacity:.85;} 75%{opacity:0;} 100%{transform:scale(1);opacity:0;} }
.av-loading-text { color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.06em; letter-spacing:.01em; }
.ac-wrap { position:relative; }
.ac-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; margin:0; padding:6px; list-style:none; text-align:left;
  background:var(--white); border:1px solid var(--grey-lt); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.45); max-height:284px; overflow:auto; }
.ac-list[hidden] { display:none; }
.ac-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; cursor:pointer; color:var(--navy); }
.ac-item svg { width:16px; height:16px; color:var(--grey-mid); flex-shrink:0; }
.ac-item .ac-main { font-weight:600; font-size:.95em; white-space:nowrap; }
.ac-item .ac-sub { color:var(--grey-mid); font-size:.85em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-item:hover, .ac-item.active { background:var(--off-white); }
.lf-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lf-consent { display:flex; align-items:flex-start; gap:11px; width:max-content;
  max-width:calc(100vw - 40px); align-self:center; margin:0 auto;
  text-align:left; cursor:pointer; }
/* Custom checkbox styled like the pill fields (white face, soft radius, same depth);
   checked = green fill + navy check (the house green/navy affordance, e.g. header-icon hover). */
.lf-consent input { appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; flex-shrink:0;
  display:inline-grid; place-content:center; cursor:pointer;
  background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.7); border-radius:7px;
  box-shadow:0 5px 14px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(var(--navy-rgb),.07);
  transition:border-color .15s, box-shadow .15s, background .15s; }
.lf-consent input::before { content:''; width:13px; height:13px; transform:scale(0); transition:transform .12s ease-in;
  background:var(--navy); clip-path:polygon(14% 44%, 0 62%, 42% 100%, 100% 18%, 84% 4%, 40% 68%); }
.lf-consent input:checked { background:var(--green); border-color:var(--green); }
.lf-consent input:checked::before { transform:scale(1); }
.lf-consent input:focus-visible { outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.45), 0 5px 14px rgba(0,0,0,.34); }
/* pretty avoids a one-word orphan line on narrow screens (graceful no-op elsewhere);
   the markup also glues "Wire 3 LLC." with nbsp so the name never splits mid-wrap. */
.lf-consent-text { color:rgba(255,255,255,.84); font-size:.8em; line-height:1.45; font-weight:500; text-wrap:pretty; }
.lf-consent-text small { display:block; margin-top:3px; font-size:.97em; font-weight:400; color:rgba(255,255,255,.55); }
.lf-consent-text small a { color:inherit; font-weight:inherit; text-decoration:underline; text-underline-offset:2px; }
.lf-consent-text small a:hover { color:rgba(255,255,255,.8); }
.lf-consent.bad input { border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.25), 0 5px 14px rgba(0,0,0,.34); }
.lf-consent.bad .lf-consent-text { color:#FDB4B4; }
.lf-consent.bad .lf-consent-text small { color:rgba(253,180,180,.7); }
.leadform .btn { width:100%; max-width:540px; align-self:center; padding:15px; font-size:1.02em; margin-top:4px; border-radius:26px; box-shadow:0 5px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28); }
.leadform .btn svg { width:18px; height:18px; transition:transform .15s; }
.leadform .btn:hover svg { transform:translateX(3px); }
.form-nudge { margin-top:14px; color:rgba(255,255,255,.6); font-size:.86em; font-weight:500; text-align:center; }
.addr-note { margin-top:10px; font-size:.95em; min-height:22px; color:rgba(255,255,255,.82); text-align:center; }
.addr-note.ok { color:var(--green); font-weight:700; }
.addr-note.bad { color:#ff9a9a; font-weight:700; }

@media (max-width:820px){ .hero-title { font-size:1.6em; } }
@media (max-width:480px){ .lf-two { grid-template-columns:1fr; } }
@media (max-width:560px){
  /* Tighter vertical rhythm: 56/64px of hero padding pushed the CTA ~1.5 screens down
     on small phones — the gate should land near the first fold. */
  .hero-inner { padding:30px 14px 40px; }
  .leadform { max-width:none; }
  .leadform .btn { width:auto; align-self:center; padding:15px 36px; }
}