/* =========================================================
   ADDITIONS — separate on purpose so styles.css stays
   byte-for-byte your original file.
   This file contains ONLY things you asked for.
   ========================================================= */

/* "We Don't Take" list: red X bullets.
   Mirrors your .checklist spacing exactly (same margins,
   same 1.25rem indent) so the two lists line up side by side. */
.xlist{
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
}
.xlist li{
  margin: .35rem 0;
  padding-left: 1.25rem;
  position: relative;
}
.xlist li:before,
.xlist li:after{
  content: "";
  position: absolute;
  left: 0;
  top: .62rem;
  width: .7rem;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}
.xlist li:before{ transform: rotate(45deg); }
.xlist li:after{ transform: rotate(-45deg); }

/* ===== Hero: banner image ===== */
/* The banner is a wide graphic with its text baked in, so it sits in
   the hero as a normal image that scales with the screen — the whole
   banner stays visible on phones, tablets, and desktops. Never cropped,
   never stretched. */
.hero{ min-height:auto; }              /* hero hugs the banner instead of forcing empty space */
.hero-media{ background:#fff; }        /* plain backdrop — replaces the old cover-crop image */
.hero-overlay{ background:none; }      /* no dark tint */
.hero-content{ max-width:100%; color:var(--text); padding:1.4rem 0 2rem; }
.hero-banner{ display:block; width:100%; max-width:1128px; height:auto; margin:0 auto 1rem; border-radius:12px; }
.hero h1{ color:var(--blue); }
.hero .sub{ color:#3c4a66; }

/* Keeps the company name in the code for Google without showing it
   twice on screen (the banner already says it). */
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* ===== "We take tires" note under What We Take ===== */
.take-note{ margin-top:1rem; }

/* ===== Vendor packet band (Realtors & Property Managers) ===== */
.vendor-band{
  background:#0f2c56;
  color:#fff;
  padding:2.6rem 0;
  border-top:4px solid var(--red);
  border-bottom:4px solid var(--red);
}
.vendor-inner{ text-align:center; max-width:820px; }
.vendor-chip{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.35rem .9rem;
  border-radius:999px;
  margin-bottom:.7rem;
}
.vendor-band h2{ margin:.2rem 0 .5rem; font-size:clamp(1.5rem,3vw,2.1rem); color:#fff; }
.vendor-band p{ color:#dfe7f5; margin:.4rem 0 1rem; }
.vendor-ctas{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.vendor-band .btn-outline{ background:#fff; }

/* ===== FAQ & Services cards: match Pricing's layout behavior ===== */
/* .cards.three normally steps through 3 -> 2 -> 1 columns as the
   screen narrows (2 columns on tablets, which is what stranded the
   3rd card alone on its own row with empty space beside it — the
   FAQ's 3rd question, and Services' "Service Area" card). This
   scopes both sections to skip the 2-column step entirely, same as
   .price-grid: full width stacked below 780px, then straight to 3
   across. The #faq/#services ids make this specific enough to win
   regardless of stylesheet order, so it won't get re-overridden by
   later edits. */
#faq .cards.three,
#services .cards.three{ grid-template-columns: 1fr; }
@media (min-width: 780px){
  #faq .cards.three,
  #services .cards.three{ grid-template-columns: repeat(3, 1fr); }
}