/* Opendoor-style shell (original code). No framework. */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#5b5b5b;
  --border:#e8e6e4;
  --pill:#ffffff;
  --shadow: 0 18px 45px rgba(0,0,0,.10);
  --shadowSoft: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
  --radiusPill: 999px;
  --container: 1260px;
  --gutter: 40px;

  /* Type scale */
  --h1: 65px;
  --h2: clamp(32px, 3.3vw, 56px);
  --p: 18px;

  /* Spacing */
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 20px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 56px;
  --s9: 72px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
html{ overflow-x:hidden; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

/* Hide legacy debug version stamps (we use .versionBadge now) */
body::after{ content:"" !important; display:none !important; }

a{ color:inherit; text-decoration:none; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .95em; }

.container{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}

.srOnly{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
  gap: 18px;
  min-width: 0;
}
.header__inner > *{ min-width:0; }

/* Desktop: hide hamburger menu toggle */
.navToggle{ display:none; }

.brand{
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 24px;
}

.brand__logo{
  display:block;
  height:44px; /* tuned: increase optical size for Apex mark */
  width:auto;
}
@media (max-width: 700px){
  .brand__logo{ height:28px; }
}

.brand__word{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}

.nav{
  display:flex;
  align-items:center;
  gap: 34px;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}
.nav__link{
  font-size: 16px;
  color:#151515;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.nav__caret{ font-size: 14px; opacity: .9; transform: translateY(-1px); }
.header__right{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width: 0; /* mobile/desktop safe */
  justify-content: flex-end;
}

.iconbtn{
  border:0;
  background:transparent;
  padding: 10px;
  border-radius: 10px;
  cursor:pointer;
  color:#222;
}
.iconbtn:hover{ background: rgba(0,0,0,.05); }
.dots{ letter-spacing: 2px; }

.hamburger{
  display:inline-block;
  width: 20px;
  height: 2px;
  background: #222;
  position: relative;
}
.hamburger::before, .hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width: 20px;
  height: 2px;
  background:#222;
}
.hamburger::before{ top:-6px; }
.hamburger::after{ top:6px; }

.nav--mobile{ display:none; }

/* Mobile menu */
.mobileMenu{
  border-top: 1px solid var(--border);
  background: #fff;
  display:none;
}
.mobileMenu__inner{
  padding: 16px 0 22px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.mobileMenu__link{
  font-size: 16px;
  padding: 10px 0;
}

/* Hero */
.hero{
  padding: 48px 0 80px;
}

.hero__grid{
  display:grid;
  grid-template-columns: minmax(360px, 500px) 1fr;
  gap: 84px;
  align-items:center;
}
.hero__copy{
  padding-top: 6px;
}

.hero__h1{
  margin:0 0 22px;
  font-size: clamp(64px, 4.9vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 750;
  color: #23201D;
}

.hero__sub{
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 1.55;
  color:#2b2b2b;
  max-width: 46ch;
}

/* Address pill */
.addr{
  display:flex;
  align-items:center;
  width: min(560px, 100%);
  background: #ffffff;
  border: 2px solid var(--border);
  border-radius: var(--radiusPill);
  height: 78px;
  padding: 0 22px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  gap: 10px;
}
.addr__input{
  border:0;
  outline:none;
  font-size: 20px;
  line-height: 1.2;
  width:100%;
  height: 100%;
  background: transparent;
}
.addr__input::placeholder{ color:#8b8784; }
.addr__btn{
  border:0;
  background: transparent;
  color:#2a2a2a;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex: 0 0 auto;
}
.addr__btn:hover{ background: rgba(0,0,0,.05); }



/* Address pill */
.addr__input::placeholder{ color:#8b8784; }
.addr__btn:hover{ background: rgba(0,0,0,.05); }

/* Art */

.hero__art{
  position:relative;
  min-height: 660px;
}




.heroCircle__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

/* Bubbles */
.bubble{
  position:absolute;
  display:flex;
  align-items:center;
  gap: 12px;
  background: rgba(18,18,18,.96);
  color:#fff;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: var(--shadowSoft);
  max-width: 260px;
}
.bubble__avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, #d9d9d9);
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.22);
}
.bubble__avatar--photo{
  background: linear-gradient(135deg, #d9d9d9, #bdbdbd);
}
.bubble__avatar--logo{
  display:grid;
  place-items:center;
  font-weight: 800;
  font-size: 22px;
  background: #2f6cff;
}
.bubble__kicker{ font-size: 13px; opacity: .85; line-height: 1.1; }
.bubble__value{ font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

.bubble--top{
  top: 66px;
  left: 56%;
  transform: translateX(-50%);
}
.bubble--left{
  top: 238px;
  left: 6px;
}
.bubble--right{
  top: 210px;
  right: 18px;
}

.bubble__tail{
  position:absolute;
  left: 54%;
  bottom: -8px;
  width: 18px;
  height: 18px;
  background: rgba(18,18,18,.96);
  transform: rotate(45deg);
  border-radius: 4px;
}

/* Reviews card */
.stars{
  color: #9aa6ff;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-size: 20px;
}

/* Reviews card */


.reviewLine{ color:#7a7a7a; font-size: 16px; margin-bottom: 6px; }
.reviewQuote{ font-size: 20px; color:#6a6a6a; margin-bottom: 14px; }
.linkish{ color:#5b74ff; font-weight: 600; margin-left: 6px; }
.reviewLink{ color:#3f5fff; font-weight: 600; }

.section{
  padding: 80px 0;
}
.section--intro{
  padding-top: 72px;
  padding-bottom: 88px;
}

/* Section-specific container width override */
.container--wide{
  --container: 1280px;
}

/* Heading row above panel */
.introHeader{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items:start;
  margin-bottom: 56px;
}
.introHeader__h2{
  grid-column: 1 / 7;
  margin:0;
  font-size: 64px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.introHeader__p{
  grid-column: 7 / 13;
  margin:0;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #2b2b2b;
  max-width: 36ch;
  align-self:center;
}

/* Rounded panel wrapper (Opendoor-style) */
.introPanel{
  background: rgb(247,246,245);
  border-radius: 36px;
  padding: 76px 80px;
  overflow:hidden;
}

/* Panel content */
.introPanel__grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items:center;
  min-height: 360px;
}
.introPanel__label{
  grid-column: auto;
  justify-self:start;
  align-self:start;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #222;
}
.introPanel__art{
  grid-column: 6 / 13;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: 6px;
}

/* Placeholder animated offer card (swap later for custom art) */
.offerCard{
  width: 520px;
  max-width: 100%;
  height: 360px;
  border-radius: 30px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform: translateY(0);
  animation: offerFloat 5.5s ease-in-out infinite;
}

.offerCard__top{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.offerCard__badge{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(0,0,0,.08);
}
.offerCard__lines{
  flex:1;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 6px;
}
.offerCard__line{
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
}
.offerCard__line--w80{ width: 80%; }
.offerCard__line--w70{ width: 70%; }
.offerCard__line--w55{ width: 55%; }

.offerCard__mid{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.offerCard__money{
  height: 38px;
  width: 62%;
  border-radius: 12px;
  background: rgba(0,0,0,.10);
}

.offerCard__btm{
  display:flex;
  justify-content:flex-end;
}
.offerCard__pill{
  height: 48px;
  width: 56%;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
}

@keyframes offerFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

@media (max-width: 900px){
  .introHeader__h2{ font-size: 54px; }
  .introHeader__p{ font-size: 24px; }
  .introPanel{ padding: 64px 48px; }
  .offerCard{ width: 460px; height: 340px; }
  .introPanel__label{ font-size: 30px; }
}

@media (max-width: 768px){
  .section--intro{ padding-top: 56px; padding-bottom: 72px; }
  .introHeader{ grid-template-columns: 1fr; row-gap: 18px; margin-bottom: 36px; }
  .introHeader__h2, .introHeader__p{ grid-column: auto; }
  .introHeader__h2{ font-size: 40px; }
  .introHeader__p{ font-size: 20px; max-width: 40ch; }

  .introPanel{ padding: 44px 24px; }
  .introPanel__grid{ grid-template-columns: 1fr; row-gap: 28px; min-height: auto; }
  .introPanel__label, .introPanel__art{ grid-column: auto; }
  .introPanel__art{ justify-content:flex-start; }
  .offerCard{ width: 360px; height: 280px; }
}
.footer{
  border-top: 1px solid var(--border);
  padding: 20px 0;
  color:#6a6a6a;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap: 16px;
  font-size: 14px;
}

/* Responsive */


/* v6.48-charlotte-page: Art anchoring so review card centers to circle (desktop baseline) */
.hero__art{ position: relative; }
.artWrap{
  position: relative;
  width: min(820px, 100%);
  margin-left: auto;
}
.heroCircle{
  position:relative;
  width: min(820px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow:hidden;
  margin-left:auto;
  background: #f2f2f2;
  transform: translateX(64px) scale(1.10);
  transform-origin: center;
}
.reviewCard{
  position:absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: min(720px, 92%);
  background: rgba(245,245,245,.88);
  border-radius: 28px;
  padding: 28px 36px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; gap: 30px; }
  
.hero__art{
  position:relative;
  min-height: 660px;
}

  
.heroCircle{
  position:relative;
  width: min(820px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow:hidden;
  margin-left:auto;
  background: #f2f2f2;
  transform: translateX(72px) scale(1.12);
  transform-origin: center;
}

  
.reviewCard{
  position:absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: min(720px, 92%);
  background: rgba(245,245,245,.92);
  border-radius: 28px;
  padding: 28px 36px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

  .introGrid{ grid-template-columns: 1fr; }
  .introP{ justify-self:start; }
}

@media (max-width: 780px){
  :root{ --gutter: 18px; }
  .nav--desktop{ display:none !important; }
  .nav--mobile{ display:inline-flex; }
  .header__inner{ padding: 16px 0; }
  .brand{ font-size: 22px; }
  .hero{
  padding: 48px 0 80px;
}
  .hero__copy{ text-align:center; padding-top: 8px; }
  .hero__h1{ font-size: 64px; line-height: 0.98; letter-spacing: -0.03em; }
  .hero__sub{ margin-inline:auto; }
  .addr{ margin-inline:auto; height: 78px; }
  
.hero__art{
  position:relative;
  min-height: 660px;
}

/* v6.48-charlotte-page: Mobile hero geometry lock (390px target) */

  
.heroCircle{
  position:relative;
  width: min(820px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow:hidden;
  margin-left:auto;
  background: #f2f2f2;
  transform: translateX(72px) scale(1.12);
  transform-origin: center;
}

  .bubble--top{ top: 76px; left: 50%; transform: translateX(-50%); }
  .bubble--left{ top: 255px; left: 10px; }
  .bubble--right{ top: 230px; right: 10px; }
  
.reviewCard{
  position:absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: min(720px, 92%);
  background: rgba(245,245,245,.92);
  border-radius: 28px;
  padding: 28px 36px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

}
  .nav--desktop{ display:none !important; }
  .nav--mobile{ display:inline-flex; }
  .header__inner{
    padding: 16px 0;
  }
  .brand{ font-size: 22px; }
  .hero{
  padding: 48px 0 80px;
}


@media (max-width: 780px){
  :root{ --gutter: 18px; }
  .nav--desktop{ display:none !important; }
  .nav--mobile{ display:inline-flex; }
  .header__inner{ padding: 16px 0; }
  .brand{ font-size: 22px; }
  .hero{
  padding: 48px 0 80px;
}
  .hero__copy{ text-align:center; padding-top: 8px; }
  .hero__h1{ font-size: 64px; line-height: 0.98; letter-spacing: -0.03em; }
  .hero__sub{ margin-inline:auto; }
  .addr{ margin-inline:auto; height: 78px; }
  
.hero__art{
  position:relative;
  min-height: 660px;
}

  
.heroCircle{
  position:relative;
  width: min(820px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow:hidden;
  margin-left:auto;
  background: #f2f2f2;
  transform: translateX(72px) scale(1.12);
  transform-origin: center;
}

  .bubble--top{ top: 76px; left: 50%; transform: translateX(-50%); }
  .bubble--left{ top: 255px; left: 10px; }
  .bubble--right{ top: 230px; right: 10px; }
  
.reviewCard{
  position:absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: min(720px, 92%);
  background: rgba(245,245,245,.92);
  border-radius: 28px;
  padding: 28px 36px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}


/* Review rotator (geometry-safe crossfade: no layout shift) */
.reviewCard{
  overflow: hidden;
}
.reviewQuote{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* clamps height across quotes */
}
.reviewCard.isFading{
  animation: reviewFade 900ms ease-in-out;
}
@keyframes reviewFade{
  0%{ opacity: 1; transform: translateX(-50%) translateY(0); }
  35%{ opacity: 0; transform: translateX(-50%) translateY(2px); }
  70%{ opacity: 0; transform: translateX(-50%) translateY(2px); }
  100%{ opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* Version marker (for deploy verification) */
.versionBadge{
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(0,0,0,.65);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  padding: 6px 10px;
  backdrop-filter: blur(6px);
}
.footer .ver{
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(0,0,0,.6);
}

.heroCircle__img{width:100%;height:100%;object-fit:cover;object-position:center center;}

/* =========================
   Offer Step 2 (Page 2)
   ========================= */
.header--offer .nav{display:none;}

.section--offer{padding-top:110px;padding-bottom:90px;}
.offer__grid{display:grid;grid-template-columns: 1.05fr .95fr;gap:56px;align-items:start;}
.offer__kicker{font-weight:600;opacity:.75;letter-spacing:.2px;margin-bottom:14px;}
.offer__h1{margin:0 0 14px;font-size:52px;line-height:1.03;letter-spacing:-.6px;}
.offer__sub{margin:0 0 28px;font-size:18px;line-height:1.5;opacity:.85;max-width:46ch;}

.offer__addr{border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:14px 16px;margin-bottom:26px;}
.offer__addrLabel{font-size:12px;letter-spacing:.3px;text-transform:uppercase;opacity:.7;margin-bottom:6px;}
.offer__addrValue{font-size:16px;font-weight:600;}
.offer__addrEdit{display:inline-block;margin-top:8px;font-size:14px;opacity:.75;text-decoration:underline;color:inherit;}

.offer__bullets{list-style:none;padding:0;margin:0 0 22px;max-width:42ch;}
.offer__bullets li{position:relative;padding-left:26px;margin:0 0 12px;line-height:1.5;}
.offer__bullets li:before{content:"✓";position:absolute;left:0;top:0;opacity:.8;}

.offer__trust{display:flex;align-items:center;gap:10px;opacity:.75;font-size:14px;}
.offer__trustDot{opacity:.5;}

.offerCard{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.10);padding:22px 22px 18px;transform:none;animation:none;}
.offerCard__title{font-size:18px;font-weight:700;margin-bottom:16px;}

.offerForm{display:flex;flex-direction:column;gap:12px;}
.offerForm__input{height:52px;border-radius:12px;border:1px solid rgba(0,0,0,.18);padding:0 14px;font-size:16px;outline:none;}
.offerForm__input:focus{border-color:rgba(0,0,0,.45);}
.offerForm__btn{height:56px;border-radius:14px;border:none;background:#000;color:#fff;font-weight:700;font-size:16px;letter-spacing:.2px;cursor:pointer;}
.offerForm__btn:hover{opacity:.92;}
.offerForm__fineprint{margin-top:4px;font-size:13px;line-height:1.4;opacity:.72;}

.offerMissing__h{font-weight:800;font-size:18px;margin:0 0 6px;}
.offerMissing__p{margin:0 0 14px;opacity:.82;line-height:1.5;}
.offerMissing__btn{display:inline-flex;align-items:center;justify-content:center;height:52px;border-radius:14px;background:#000;color:#fff;text-decoration:none;font-weight:700;padding:0 18px;}

@media (max-width: 980px){
  .offer__grid{grid-template-columns:1fr;gap:28px;}
  .section--offer{padding-top:96px;}
  .offer__h1{font-size:40px;}
}

@media (max-width: 480px){
  .section--offer{padding-top:88px;padding-bottom:72px;}
  .offer__h1{font-size:34px;}
  .offerCard{padding:18px 16px 16px;}
}

/* =========================
   Thank You
   ========================= */
.section--thankyou{padding-top:120px;padding-bottom:110px;}
.thankyou__wrap{display:flex;justify-content:center;}
.thankyou__card{width:min(720px, 100%);background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.10);padding:30px 26px;}
.thankyou__kicker{font-weight:700;opacity:.7;letter-spacing:.2px;margin-bottom:10px;}
.thankyou__h1{margin:0 0 12px;font-size:44px;line-height:1.06;letter-spacing:-.5px;}
.thankyou__p{margin:0 0 18px;font-size:18px;line-height:1.55;opacity:.86;}
.thankyou__ctaRow{display:flex;gap:12px;margin:18px 0 10px;}
.thankyou__btn{display:inline-flex;align-items:center;justify-content:center;height:52px;border-radius:14px;background:#000;color:#fff;text-decoration:none;font-weight:800;padding:0 22px;}
.thankyou__btn--ghost{background:transparent;color:#000;border:1px solid rgba(0,0,0,.18);}
.thankyou__fine{margin-top:10px;opacity:.72;font-size:14px;}
.thankyou__back{margin-top:18px;}

@media (max-width: 480px){
  .thankyou__h1{font-size:34px;}
  .thankyou__ctaRow{flex-direction:column;}
}


/* v5.2 tweak: move testimonial DOWN (final) */
.reviewCard{ bottom: -120px !important; }

/* Headline inside gray panel */
.cash-headline{
  font-size:64px;
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:600;
  margin:40px 0 0 0;
  max-width:600px;
}

/* Left column wrapper for label + headline (matches Opendoor layout) */
.introPanel__left{
  grid-column:1 / 6;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-bottom:40px;
}

/* Headline inside panel under Cash label */
.introPanel__headline{
  font-size:64px;
  line-height:1.05;
  letter-spacing:-0.025em;
  font-weight:600;
  margin:0;
  max-width:17ch;
}

.introPanel__label{
  margin-bottom:48px;
}


/* ===== OPENDOOR FIDELITY: SECTION 2 (INTRO PANEL) v5.22-reviewcard-pos-down ===== */
.section--intro { padding-top: 0; padding-bottom: 0; }

.introHeader__h2{
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -1.2px;
  font-weight: 500;
  max-width: 16ch;
  margin: 0 0 16px 0;
}
.introHeader__p{
  font-size: 24px;
  line-height: 26.1px; /* matches bodyLarge line-height in reference token set */
  letter-spacing: -0.432px;
  font-weight: 400;
  margin: 0;
}

.introPanel{
  background: rgb(247,246,245);
  border-radius: 36px;
  padding: 0;             /* reference uses internal padding blocks */
  padding-left: 80px;     /* >=1440 */
  overflow: hidden;
}

.introPanel__grid{
  display: flex;
  width: 100%;
  height: 592px;          /* >=1201 */
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.introPanel__left{
  width: 299px;
  max-width: 299px;
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
}

.introPanel__label{
  font-size: 18px;
  line-height: 26.1px;
  letter-spacing: -0.432px;
  font-weight: 400;
  margin: 0 0 10px 0;
  color: #222;
}

.introPanel__headline{
  font-size: 28px;
  line-height: 30.8px;
  letter-spacing: -0.784px;
  font-weight: 500;
  margin: 0;
  color: #222;
}

.introPanel__art{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-top: 48px;
}

/* Responsive (match reference breakpoints behavior) */
@media (max-width: 1200px){
  .introPanel__grid{ height: 396px; }
}

@media (max-width: 1439px) and (min-width: 768px){
  .introPanel{ padding-left: 64px; }
}

@media (max-width: 767px){
  .introHeader__h2{
    font-size: 40px; /* keep for now; tighten later with mobile oracle */
    line-height: 44px;
    max-width: none;
  }
  .introHeader__p{
    font-size: 20px;
    line-height: 27.2px;
    letter-spacing: -0.48px;
  }
  .introPanel{ padding-left: 0; }
  .introPanel__grid{
    flex-direction: column;
    height: 596px;
    align-items: center;
  }
  .introPanel__left{
    width: 100%;
    max-width: none;
    padding: 32px 32px 0 32px;
  }
  .introPanel__art{
    width: 100%;
    justify-content: center;
    padding: 0 0 32px 0;
  }
}
/* ===== END SECTION 2 ===== */


/* ===== OPENDOOR FIDELITY: SECTION 2 (INTRO PANEL) v5.22-reviewcard-pos-down ===== */
/* Goal: match template spacing/typography; ignore art fidelity for now */

.section--intro { padding-top: 0; padding-bottom: 0; }

/* Keep header above the panel as-is (already close) */
.introPanel{
  background: rgb(247,246,245);
  border-radius: 40px;
  padding: 64px 80px;
  min-height: 592px;
}

/* Panel grid: stretch so left column can pin label to top + headline to bottom */
.introPanel__grid{
  align-items: stretch;
  min-height: 464px; /* interior height after padding */
}

/* Left column geometry + vertical distribution */
.introPanel__left{
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  max-width: 440px;
  height: 100%;
}

/* Label matches template: larger + heavier */
.introPanel__label{
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.64px;
  font-weight: 600;
  margin: 0;
}

/* Headline matches template: bigger, airy, strong */
.introPanel__headline{
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1.68px;
  font-weight: 500;
  margin: 0;
  max-width: 520px;
}

/* Art placement: keep in right half, vertically centered-ish */
.introPanel__art{
  grid-column: 6 / 13;
  align-items: center;
  padding-top: 0;
}

/* Breakpoints */
@media (max-width: 1439px){
  .introPanel{ padding: 64px 64px; border-radius: 40px; }
  .introPanel__left{ max-width: 420px; }
  .introPanel__headline{ font-size: 52px; letter-spacing: -1.56px; }
}

@media (max-width: 1024px){
  .introPanel{ padding: 56px 48px; min-height: 520px; }
  .introPanel__left{ grid-column: 1 / 7; max-width: 520px; }
  .introPanel__art{ grid-column: 7 / 13; }
  .introPanel__headline{ font-size: 48px; }
}

@media (max-width: 768px){
  .introPanel{ padding: 48px 24px; min-height: auto; border-radius: 32px; }
  .introPanel__grid{ grid-template-columns: 1fr; row-gap: 28px; }
  .introPanel__left{ grid-column: auto; max-width: none; justify-content: flex-start; gap: 18px; }
  .introPanel__label{ font-size: 24px; letter-spacing: -0.48px; }
  .introPanel__headline{ font-size: 36px; letter-spacing: -1.08px; line-height: 1.08; }
  .introPanel__art{ grid-column: auto; justify-content: flex-start; }
}


/* ===== OPENDOOR FIDELITY: SECTION 2 WRAP LOCK v5.22-reviewcard-pos-down ===== */
/* Source: ref desktop singlefile (classes map to headerMedium/subheaderMedium) */

.section--intro .introPanel{
  background: rgb(247,246,245);
  border-radius: 36px;
}

/* Match panel padding closer to template */
.section--intro .introPanel{
  padding: 32px;
  min-height: 472px;
}

/* Keep layout stable: left column + art */
.section--intro .introPanel__grid{
  align-items: stretch;
  min-height: calc(472px - 64px);
}

/* Left column should not be too narrow: allow wrap to match template */
.section--intro .introPanel__left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 520px;
}

/* Label "Cash" = subheaderMedium */
.section--intro .introPanel__label{
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 28px;
  line-height: 30.8px;
  letter-spacing: -0.784px;
  font-weight: 500;
  margin: 0;
}

/* Headline = headerMedium */
.section--intro .introPanel__headline{
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -1.2px;
  font-weight: 500;
  margin: 0;
  max-width: 520px; /* governs line breaks */
}

/* Desktop padding at 1440 mirrors site padding */
@media (min-width: 1200px){
  .section--intro .introPanel{ padding: 32px 40px; }
}

/* Mobile: keep reasonable, but not part of this lock */
@media (max-width: 768px){
  .section--intro .introPanel{ padding: 24px; border-radius: 32px; min-height: auto; }
  .section--intro .introPanel__left{ justify-content: flex-start; gap: 16px; }
  .section--intro .introPanel__label{ font-size: 24px; line-height: 26.4px; letter-spacing: -0.672px; }
  .section--intro .introPanel__headline{ font-size: 32px; line-height: 33.6px; letter-spacing: -0.96px; }
}

/* Force visible version stamp (in case earlier blocks exist) */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== OPENDOOR FIDELITY: DEDICATED SUPPORT SECTION (SHELL) v5.22-reviewcard-pos-down ===== */

.section--support { padding-top: 0; padding-bottom: 0; }

.section--support .supportPanel{
  background: rgb(247,246,245);
  border-radius: 36px;
  padding: 32px 40px;
  min-height: 680px; /* large whitespace like template */
}

.section--support .supportPanel__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  align-items: stretch;
  min-height: calc(680px - 64px);
}

.section--support .supportPanel__left{
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 520px;
}

.section--support .supportPanel__label{
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 28px;
  line-height: 30.8px;
  letter-spacing: -0.784px;
  font-weight: 500;
  color: #23201d;
  margin: 0;
}

.section--support .supportPanel__headline{
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -1.2px;
  font-weight: 500;
  color: #23201d;
  margin: 0;
}

.section--support .supportPanel__art{
  grid-column: 6 / 13;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* =============================
   Map + Stats section (base)
   ============================= */

.section--mapStats{
  position: relative;
  padding: 0;
  margin-top: 56px;
}

.section--mapStats .mapStats__bg,
.section--mapStats .mapStats__overlay,
.section--mapStats .mapStats__noise{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section--mapStats .mapStats__bg{
  background: url('assets/map-bg.svg') center/cover no-repeat;
  filter: blur(1.5px) saturate(0.9);
  transform: scale(1.02);
}

.section--mapStats .mapStats__overlay{
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.78) 100%),
    linear-gradient(180deg, rgba(5,8,16,0.35) 0%, rgba(5,8,16,0.55) 60%, rgba(5,8,16,0.80) 100%);
}

.section--mapStats .mapStats__noise{
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 5px);
}

.section--mapStats .mapStats__inner{
  position: relative;
  padding: 72px 0;
}

.section--mapStats .mapStats__content{
  max-width: 640px;
  color: rgba(255,255,255,0.92);
}

.section--mapStats .mapStats__eyebrow{
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin-bottom: 14px;
}

.section--mapStats .mapStats__headline{
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 550;
  margin: 0 0 14px;
}

.section--mapStats .mapStats__sub{
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}

.section--mapStats .mapStats__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin-bottom: 28px;
}

.section--mapStats .mapStat{
  background: rgba(14, 20, 38, 0.48);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 16px 18px;
  backdrop-filter: blur(16px);
}

.section--mapStats .mapStat__value{
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: rgba(255,255,255,0.96);
}

.section--mapStats .mapStat__label{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}

.section--mapStats .mapStats__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section--mapStats .mapStats__cta:hover{ filter: brightness(1.03); }

/* Chat mock (static) */
.chatMock{
  width: 520px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.chatMock__row{ display: flex; align-items: flex-start; gap: 14px; }
.chatMock__row--right{ justify-content: flex-end; }

.chatMock__avatar{
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  flex: 0 0 auto;
}

.chatMock__avatar--right{ margin-left: 14px; }

/* Chat mock avatars */
.chatMock__avatar{ background-size: cover; background-position: center; }
.chatMock__avatar--expert{ background-image: url("assets/avatar_casey_v3.png"); position: relative; }
.chatMock__avatar--expert::after{
  content:"";
  position:absolute;
  left: 2px; bottom: 2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #24c26a;
  box-shadow: 0 0 0 3px #ffffff;
}
.chatMock__avatar--you{ background-image: url("assets/avatar_customer_v3.png"); }
.chatMock__avatar--agent{ background-image: url("assets/avatar_jordan_v3.png"); }

/* Chat mock animation */
.chatMock{ transition: transform 700ms cubic-bezier(.2,.8,.2,1); will-change: transform; }
.chatMock__row{ opacity: 0; transform: translateY(18px); transition: opacity 450ms ease, transform 450ms ease; }
.chatMock.is-step1 [data-chat-row="1"]{ opacity: 1; transform: translateY(0); }
.chatMock.is-step2{ transform: translateY(-22px); }
.chatMock.is-step2 [data-chat-row="1"],
.chatMock.is-step2 [data-chat-row="2"]{ opacity: 1; transform: translateY(0); }
.chatMock.is-step3{ transform: translateY(-48px); }
.chatMock.is-step3 [data-chat-row="1"],
.chatMock.is-step3 [data-chat-row="2"],
.chatMock.is-step3 [data-chat-row="3"]{ opacity: 1; transform: translateY(0); }
.chatMock.is-step4{ transform: translateY(-76px); }
.chatMock.is-step4 [data-chat-row="1"],
.chatMock.is-step4 [data-chat-row="2"],
.chatMock.is-step4 [data-chat-row="3"],
.chatMock.is-step4 [data-chat-row="4"]{ opacity: 1; transform: translateY(0); }

.chatMock__bubble{
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  max-width: 380px;
}

.chatMock__bubble--light{
  background: #ffffff;
}

.chatMock__bubble--blue{
  background: #1f5be6;
  color: #ffffff;
  border-radius: 18px;
  padding: 16px 18px;
}

.chatMock__meta{
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: rgba(35,32,29,0.55);
  margin-bottom: 2px;
}

.chatMock__meta--blue{ color: rgba(255,255,255,0.75); }

.chatMock__text{
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: -0.224px;
  font-weight: 500;
  color: #23201d;
}

.chatMock__text--blue{ color: #ffffff; }

.chatMock__link{ color: #1f5be6; font-weight: 600; }

@media (max-width: 1024px){
  .section--support .supportPanel{ padding: 32px; min-height: 620px; }
  .section--support .supportPanel__left{ grid-column: 1 / 7; }
  .section--support .supportPanel__art{ grid-column: 7 / 13; }
  .chatMock{ width: 460px; }
}

@media (max-width: 768px){
  .section--support .supportPanel{ padding: 24px; min-height: auto; border-radius: 32px; }
  .section--support .supportPanel__grid{ grid-template-columns: 1fr; row-gap: 28px; min-height: auto; }
  .section--support .supportPanel__left{ grid-column: auto; justify-content: flex-start; gap: 16px; }
  .section--support .supportPanel__art{ grid-column: auto; justify-content: flex-start; }
  .chatMock{ width: 100%; gap: 18px; }
  .chatMock__bubble{ max-width: 100%; }
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== INTER-SECTION SPACING LOCK (Desktop Fidelity) v5.22-reviewcard-pos-down ===== */

/* Match Opendoor vertical rhythm between rounded panels */
.section--support{
  margin-top: 96px;   /* tuned to desktop oracle spacing */
}

@media (max-width: 1024px){
  .section--support{ margin-top: 72px; }
}

@media (max-width: 768px){
  .section--support{ margin-top: 48px; }
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== INTER-SECTION SPACING TRIMMED v5.22-reviewcard-pos-down ===== */

.section--support{
  margin-top: 32px;   /* reduced ~2/3 */
}

@media (max-width: 1024px){
  .section--support{ margin-top: 24px; }
}

@media (max-width: 768px){
  .section--support{ margin-top: 16px; }
}

/* ===== HERO REASSURANCE LINE v5.22-reviewcard-pos-down ===== */
.heroReassurance{
  margin-top: 12px;
  font-family: Graphik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 27.2px;
  letter-spacing: -0.224px;
  color: rgba(35,32,29,0.68);
  max-width: 520px;
}

@media (max-width: 768px){
  .heroReassurance{
    margin-top: 10px;
    font-size: 14px;
    line-height: 23.8px;
    letter-spacing: -0.196px;
    color: rgba(35,32,29,0.70);
    max-width: none;
  }
}



/* ===== HERO REVIEW CARD SLEEK PASS v5.22-reviewcard-pos-down ===== */
/* Goal: less intrusive, softer, Opendoor-like glass card. Keep existing fade/rotation logic. */

.reviewCard{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow:
    0 18px 60px rgba(0,0,0,0.12),
    0 2px 10px rgba(0,0,0,0.06);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 22px 26px;
}

/* If the card has a fixed width/position in base CSS, soften it */
.reviewCard{
  max-width: 780px;
}

/* Stars: slightly muted */
.reviewCard .stars{
  opacity: 0.85;
  font-size: 16px;
  letter-spacing: 2px;
}

/* Top line typography */
.reviewCard .reviewLine{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.reviewCard .muted{
  color: rgba(35,32,29,0.58);
}

.reviewCard .linkish{
  color: rgb(0,64,230);
  font-weight: 500;
}

/* Body review text */
.reviewCard [data-review="quote"],
.reviewCard .reviewText{
  margin-top: 4px;
  color: rgba(35,32,29,0.72);
  font-weight: 500;
}

/* CTA row */
.reviewCard .reviewCta,
.reviewCard a,
.reviewCard button{
  font-weight: 500;
}

/* Make "See reviews" sit with more breathing room if it is on its own line */
.reviewCard .seeReviews,
.reviewCard [data-review="cta"]{
  margin-top: 10px;
  display: inline-flex;
}

/* Responsive */
@media (max-width: 768px){
  .reviewCard{
    padding: 16px 18px;
    border-radius: 20px;
    box-shadow:
      0 14px 40px rgba(0,0,0,0.12),
      0 2px 10px rgba(0,0,0,0.06);
  }
  .reviewCard{
    max-width: 92vw;
  }
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== HERO REVIEW CARD COMPACT PASS v5.22-reviewcard-pos-down ===== */
/* Goal: reduce vertical footprint; keep glass look */

.reviewCard{
  padding: 16px 22px;
  border-radius: 22px;
}

/* Stars smaller + tighter */
.reviewCard .stars{
  font-size: 14px;
  letter-spacing: 1.5px;
  margin: 0;
}

/* Tighten line spacing */
.reviewCard .reviewLine{
  margin-top: 4px;
  gap: 8px;
}

/* Reduce quote text size slightly */
.reviewCard [data-review="quote"],
.reviewCard .reviewText{
  margin-top: 2px;
  font-size: 18px;
  line-height: 24px;
}

/* CTA row closer */
.reviewCard .seeReviews,
.reviewCard [data-review="cta"]{
  margin-top: 6px;
}

/* If there is a forced min-height anywhere, neutralize */
.reviewCard{ min-height: unset !important; }

@media (max-width: 768px){
  .reviewCard{
    padding: 14px 16px;
    border-radius: 18px;
  }
  .reviewCard [data-review="quote"],
  .reviewCard .reviewText{
    font-size: 16px;
    line-height: 21px;
  }
  .reviewCard .seeReviews,
  .reviewCard [data-review="cta"]{
    margin-top: 6px;
  }
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== HERO REVIEW CARD HEIGHT UNLOCK v5.22-reviewcard-pos-down ===== */
/* The card was staying same height due to fixed height/line-clamp styles upstream.
   This override force-unlocks height + clamps, then applies compact spacing. */

.reviewCard,
.reviewCard *{
  box-sizing: border-box;
}

.reviewCard{
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 14px 20px !important;
  border-radius: 22px !important;
}

/* Disable common multi-line clamps */
.reviewCard [data-review="quote"],
.reviewCard .reviewText,
.reviewCard .reviewLine{
  height: auto !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow: visible !important;
}

/* Tighten internal typography */
.reviewCard .stars{
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

.reviewCard .reviewLine{
  margin-top: 4px !important;
}

.reviewCard [data-review="quote"],
.reviewCard .reviewText{
  margin-top: 2px !important;
  font-size: 18px !important;
  line-height: 24px !important;
}

.reviewCard .seeReviews,
.reviewCard [data-review="cta"]{
  margin-top: 6px !important;
}

/* If a wrapper is forcing height, relax it */
.hero__art,
.hero__art .artWrap,
.hero__art .heroCircle{
  overflow: visible;
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== HERO REVIEW CARD COMPACT (REAL TARGETS) v5.22-reviewcard-pos-down ===== */
/* Prior attempts targeted wrong inner class names; base uses .reviewLine/.reviewQuote/.reviewLink. */

.reviewCard{
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;

  padding: 14px 20px !important; /* core height reduction */
  border-radius: 22px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  box-shadow:
    0 16px 52px rgba(0,0,0,0.12),
    0 2px 10px rgba(0,0,0,0.06) !important;
}

/* Stars line (if present as .stars text) */
.reviewCard .stars{
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  line-height: 1.1 !important;
  margin: 0 0 2px 0 !important;
  opacity: 0.85 !important;
}

/* Top meta line */
.reviewCard .reviewLine{
  font-size: 14px !important;
  line-height: 18px !important;
  margin: 0 0 4px 0 !important;
  color: rgba(35,32,29,0.58) !important;
}

/* Main quote */
.reviewCard .reviewQuote{
  font-size: 18px !important;
  line-height: 24px !important;
  margin: 0 0 8px 0 !important;
  color: rgba(35,32,29,0.72) !important;
  font-weight: 500 !important;
}

/* Link */
.reviewCard .reviewLink,
.reviewCard .linkish{
  font-weight: 500 !important;
  margin: 0 !important;
}

/* Position tweak to feel less intrusive (slightly lower overlap) */
.reviewCard{
  bottom: -22px !important;
}

/* Mobile */
@media (max-width: 768px){
  .reviewCard{
    padding: 12px 16px !important;
    border-radius: 18px !important;
    width: min(92vw, 560px) !important;
    bottom: -18px !important;
  }
  .reviewCard .reviewQuote{
    font-size: 16px !important;
    line-height: 21px !important;
  }
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== HERO REVIEW CARD OPENDOOR-ISH v5.22-reviewcard-pos-down ===== */
/* Keep width; reduce vertical footprint + make quote 1-line (sleeker, less intrusive). */

.reviewCard{
  width: min(720px, 92%) !important; /* keep original width */
  padding: 12px 20px !important;      /* shorter */
  border-radius: 24px !important;
  background: rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 14px 46px rgba(0,0,0,0.11),
    0 2px 10px rgba(0,0,0,0.06) !important;
}

/* Stars: smaller + softer */
.reviewCard .stars{
  font-size: 13px !important;
  letter-spacing: 1.25px !important;
  line-height: 1 !important;
  margin: 0 0 2px 0 !important;
  opacity: 0.75 !important;
}

/* Meta line: tighter */
.reviewCard .reviewLine{
  font-size: 14px !important;
  line-height: 18px !important;
  margin: 0 0 2px 0 !important;
  color: rgba(35,32,29,0.56) !important;
}

/* Quote: 1-line sleek */
.reviewCard .reviewQuote{
  font-size: 16px !important;
  line-height: 20.8px !important;
  margin: 0 0 6px 0 !important;
  color: rgba(35,32,29,0.70) !important;
  font-weight: 500 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Link row: tighter */
.reviewCard .reviewLink,
.reviewCard .linkish{
  font-weight: 500 !important;
}

/* CTA spacing */
.reviewCard .reviewLink{
  display: inline-block;
  margin-top: 0 !important;
}

/* Position: slightly less overlap so it feels lighter */
.reviewCard{
  bottom: -18px !important;
}

@media (max-width: 768px){
  .reviewCard{
    padding: 10px 14px !important;
    border-radius: 20px !important;
    bottom: -14px !important;
  }
  .reviewCard .reviewQuote{
    font-size: 15px !important;
    line-height: 19.5px !important;
    margin-bottom: 6px !important;
  }
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }


/* ===== HERO REVIEW CARD POSITION DOWN v5.22-reviewcard-pos-down ===== */
/* Move the floating card down so it sits between hero + next section like Opendoor. */

.reviewCard{
  bottom: -44px !important;
}

@media (max-width: 768px){
  .reviewCard{
    bottom: -32px !important;
  }
}

/* Force visible version stamp */
body::after{ content:"v5.22-reviewcard-pos-down" !important; }

/* =========================
   Offer Pulse (Opendoor-style)
   ========================= */
.offerPulse{
  position: relative;
  overflow: hidden;
  padding: 140px 0 120px;
  background: #0f0f10;
}
.offerPulse__bg,
.offerPulse__dim,
.offerPulse__vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.offerPulse__bg{
  background: url("assets/map-bg.svg") center/cover no-repeat;
  filter: saturate(0) contrast(1.05) brightness(0.72);
  transform: scale(1.02);
}
.offerPulse__dim{
  background: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.58) 60%, rgba(0,0,0,0.70) 100%);
}
.offerPulse__vignette{
  background:
    radial-gradient(1200px 520px at 50% 38%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.78) 100%),
    radial-gradient(900px 420px at 50% 100%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.80) 100%);
}
.offerPulse__inner{
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 980px;
}
.offerPulse__headline{
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.offerPulse__headlineTop{
  display:block;
  font-size: 64px;
  color: #ffffff;
}
.offerPulse__headlineBottom{
  display:block;
  margin-top: 8px;
  font-size: 64px;
  color: rgba(255,255,255,0.35);
}
.offerPulse__sub{
  margin: 26px auto 0;
  max-width: 720px;
  color: rgba(255,255,255,0.88);
  font-size: 20px;
  line-height: 1.35;
}
.offerPulse__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 18px 34px;
  border-radius: 14px;
  background: #2f6bff;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.offerPulse__btn:hover{ filter: brightness(1.03); }

/* bubbles */
.offerPulse__bubbles{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.offerBubble{
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.75);
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(0);
  animation: offerBubblePulse 12s ease-in-out infinite;
}
.offerBubble__thumb{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: url('assets/hero-house-photo-tight.png') center/cover no-repeat;
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

/* Slightly vary crop so the bubbles don't look duplicated */
.offerBubble--a .offerBubble__thumb{ background-position: 55% 45%; }
.offerBubble--b .offerBubble__thumb{ background-position: 35% 55%; }
.offerBubble--c .offerBubble__thumb{ background-position: 60% 60%; }
.offerBubble--d .offerBubble__thumb{ background-position: 45% 35%; }
.offerBubble__kicker{
  font-size: 12px;
  line-height: 1.1;
  color: rgba(255,255,255,0.62);
}
.offerBubble__price{
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}

@keyframes offerBubblePulse{
  0%   { opacity: 0; transform: translateY(6px); }
  12%  { opacity: 1; transform: translateY(0px); }
  55%  { opacity: 1; transform: translateY(-2px); }
  75%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(6px); }
}

/* positions + timing (stagger) */
.offerBubble--a{ top: 170px; right: 220px; animation-delay: 0s; }
.offerBubble--b{ top: 310px; left: 120px; animation-delay: 1.5s; }
.offerBubble--c{ top: 360px; right: 160px; animation-delay: 3s; }
.offerBubble--d{ bottom: 90px; left: 220px; animation-delay: 4.5s; }

@media (max-width: 1024px){
  .offerPulse{ padding: 110px 0 100px; }
  .offerPulse__headlineTop,
  .offerPulse__headlineBottom{ font-size: 54px; }
  .offerBubble--a{ right: 80px; }
  .offerBubble--b{ left: 40px; }
}

@media (max-width: 640px){
  /* Mobile canvas: give bubbles room (Opendoor-style) */
  .offerPulse{
    padding: 110px 0 140px;
    min-height: clamp(560px, 78vh, 680px);
  }
  .offerPulse__headlineTop,
  .offerPulse__headlineBottom{ font-size: 40px; }
  .offerPulse__sub{ font-size: 16px; }

  /* Keep bubbles behind text and make them fit without overlaps */
  .offerPulse__bubbles{ z-index: 1; }
  .offerBubble{
    transform: none;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    max-width: 46vw;
  }
  .offerBubble__thumb{ width: 28px; height: 28px; }
  .offerBubble__kicker{ font-size: 11px; }
  .offerBubble__price{ font-size: 16px; }

  /* Percent anchors (stable across devices) */
  .offerBubble--a{ top: 22%; right: 8%; left: auto; bottom: auto; }
  .offerBubble--b{ top: 48%; left: 6%; right: auto; bottom: auto; }
  .offerBubble--c{ top: 60%; right: 10%; left: auto; bottom: auto; }
  .offerBubble--d{ bottom: 12%; left: 12%; right: auto; top: auto; }
}


/* =========================
   Testimonials Carousel
   ========================= */
.section.testimonials{
  padding: 96px 0 120px;
  background: #ffffff;
}
.testimonials__inner{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 64px;
}
.testimonials__left{
  flex: 0 0 520px;
  padding-top: 80px;
}
.testimonials__headline{
  margin:0;
  font-family: Graphik, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-size: 56px;
}
.testimonials__headlineBlue{
  color: var(--blue, #1f5eff);
  display:inline;
}
.testimonials__headlineBlack{
  color:#141312;
  display:inline;
}
.testimonials__nav{
  display:flex;
  gap: 14px;
  margin-top: 34px;
}
.tNavBtn{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid rgba(20,19,18,0.12);
  background: rgba(255,255,255,0.85);
  color: #141312;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  line-height: 1;
  cursor:pointer;
}
.tNavBtn:disabled{
  opacity:0.35;
  cursor:default;
}

.testimonials__right{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;
}
.tCarousel{
  width:100%;
  overflow:hidden;
  padding: 24px 0;
}
.tTrack{
  display:flex;
  gap: 32px;
  will-change: transform;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}
.tCard{
  flex: 0 0 440px;
  background: #f4f3f1;
  border-radius: 44px;
  padding: 44px 44px 38px;
  min-height: 560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.tAvatar{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: #ddd;
  background-image: url("./assets/hero-house-photo-tight.png");
  background-size: 220%;
  background-position: 50% 35%;
  background-repeat:no-repeat;
  margin-bottom: 28px;
}
.tAvatar--b{background-position: 80% 30%;}
.tAvatar--c{background-position: 35% 55%;}
.tAvatar--d{background-position: 60% 70%;}
.tAvatar--e{background-position: 25% 30%;}
.tQuote{
  margin:0;
  font-size: 18px;
  line-height: 1.6;
  color:#23201d;
  max-width: 330px;
}
.tMore{
  margin-top: 22px;
  color: var(--blue, #1f5eff);
  font-weight: 600;
  text-decoration:none;
}
.tMore:hover{ text-decoration:underline; }
.tMeta{
  margin-top:auto;
  padding-top: 34px;
}
.tName{
  font-weight: 700;
  font-size: 20px;
  color:#23201d;
}
.tSold{
  margin-top: 4px;
  font-size: 18px;
  color: rgba(35,32,29,0.45);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1200px){
  .testimonials__inner{gap: 40px;}
  .testimonials__left{flex-basis: 460px;}
  .testimonials__headline{font-size: 48px;}
  .tCard{flex-basis: 420px;}
}
@media (max-width: 900px){
  .section.testimonials{padding: 72px 0 96px;}
  .testimonials__inner{flex-direction:column; gap: 24px;}
  .testimonials__left{flex-basis:auto; padding-top:0;}
  .testimonials__headline{font-size: 44px;}
  .tCarousel{padding-top: 0;}
}
@media (max-width: 520px){
  .testimonials__headline{font-size: 36px;}
  .tCard{flex-basis: 320px; padding: 34px 28px 30px; border-radius: 36px; min-height: 520px;}
  .tAvatar{width: 104px; height:104px;}
}


/* QA / Support strip */
.qa{
  padding: 170px 0 190px;
  background: #ffffff;
}
.qa__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 80px;
}
.qa__left{
  flex: 0 1 520px;
}
.qa__headline{
  margin:0;
  font-size: clamp(44px, 4.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #111111;
}
.qa__sub{
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 1.35;
  color: #222222;
  max-width: 420px;
}
.qa__right{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 22px;
  padding-right: 20px;
}
.qa__pillsRow{
  display:flex;
  gap: 26px;
  flex-wrap:wrap;
}
.qaPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 34px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  text-decoration:none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}
.qaPill:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 4px;
}

@media (max-width: 980px){
  .qa{
    padding: 110px 0 130px;
  }
  .qa__inner{
    flex-direction:column;
    align-items:flex-start;
    gap: 40px;
  }
  .qa__left{
    flex-basis:auto;
    max-width: 680px;
  }
  .qa__right{
    padding-right: 0;
  }
  .qaPill{
    font-size: 18px;
    padding: 16px 28px;
  }
}



/* =========================
   Footer (Opendoor-style)
========================= */
.siteFooter{
  background: #1f1d1b;
  color: rgba(255,255,255,.92);
  margin-top: 0;
}
.siteFooter a{ color: rgba(255,255,255,.9); text-decoration: none; }
.siteFooter a:hover{ text-decoration: underline; }

.siteFooter__hero{
  padding: 92px 0 44px;
}
.siteFooter__heroInner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 80px;
}
.siteFooter__heroLeft{
  max-width: 420px;
}
.siteFooter__logoMark{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  font-weight: 700;
  margin-bottom: 44px;
  opacity:.9;
}

.siteFooter__logoImg{
  width: 28px;
  height: 28px;
  display:block;
}
.siteFooter__heroTitle{
  margin: 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 650;
  color: rgba(255,255,255,.96);
}
.siteFooter__heroRight{
  flex: 0 0 auto;
}
.siteFooter__heroImage{
  width: 420px;
  height: 320px;
  border-radius: 26px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
}
.siteFooter__heroImage img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Link columns */
.siteFooter__links{
  padding: 28px 0 30px;
}
.siteFooter__linksGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}
.footerCol__title{
  font-size: 26px;
  font-weight: 650;
  margin-bottom: 22px;
  color: rgba(255,255,255,.95);
}
.footerLink{
  display:block;
  padding: 10px 0;
  font-size: 18px;
  color: rgba(255,255,255,.84);
}

/* Market card */
.siteFooter__market{
  padding: 28px 0 26px;
}
.marketCard{
  background: rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 22px 26px;
}
.marketCard__label{
  font-size: 16px;
  font-weight: 650;
  color: rgba(255,255,255,.9);
  margin-bottom: 12px;
}
.marketCard__cities{
  font-size: 18px;
  line-height: 1.9;
  color: rgba(255,255,255,.9);
  text-align:center;
  word-spacing: 6px;
}
.marketCard__cities span{ white-space:nowrap; }
.marketCard__cities span:nth-child(2n){ opacity:.55; }

/* Utility row */
.siteFooter__utility{
  padding: 14px 0 22px;
}
.utilityRow{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
}
.utilityCard{
  background: rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 64px;
}
.utilityCard__title{
  font-size: 18px;
  font-weight: 650;
  color: rgba(255,255,255,.92);
}
.utilityCard__badges{
  display:flex;
  gap: 10px;
}
.storeBadge{
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 650;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  white-space:nowrap;
}
.utilityCard--questions{
  grid-template-columns: 1fr auto;
}
.utilityCard__cta{
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 650;
  font-size: 14px;
  color: rgba(255,255,255,.95);
}

/* Legal card */
.siteFooter__legal{
  padding: 10px 0 26px;
}
.legalCard{
  background: rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px 20px;
}
.legalLine{
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}
.legalState{ font-weight: 800; margin-right: 4px; }
.legalLink{ text-decoration: underline; }
.legalBody{
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
}

/* Bottom row */
.siteFooter__bottom{
  padding: 18px 0 26px;
}
.bottomRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.bottomRow__left{
  font-size: 18px;
  color: rgba(255,255,255,.9);
}
.bottomRow__right{
  display:flex;
  gap: 10px;
}
.badgeSquare{
  width: 34px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}
.siteFooter .ver{
  margin-left: 10px;
  opacity: .65;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1020px){
  .siteFooter__heroInner{ flex-direction:column; gap: 28px; }
  .siteFooter__heroImage{ width: 100%; max-width: 520px; height: 320px; }
  .siteFooter__linksGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .utilityRow{ grid-template-columns: 1fr; }
  .utilityCard{ justify-content:space-between; }
}
@media (max-width: 560px){
  .siteFooter__heroTitle{ font-size: 44px; }
  .marketCard__cities{ font-size: 16px; }
  .bottomRow{ flex-direction:column; align-items:flex-start; }
}


/* Apex: remove auth/menu; keep primary nav visible on mobile */
@media (max-width: 780px){
  .nav--desktop{ display:flex !important; }
  .nav--mobile{ display:none !important; }
  .header__right{ min-width: 0; }
}


/* ===== Apex Offer Timeline Card (Intro Panel Art) ===== */
.introPanel__art{display:flex;align-items:center;justify-content:center;}
.apexOfferCard{
  width: 360px;
  background:#fff;
  border-radius: 28px;
  padding: 28px 28px 24px;
  box-shadow: 0 24px 44px rgba(0,0,0,.14);
  font-family: inherit;
  color:#111;
  transform: translateY(10px);
  opacity: 0;
  animation: apexCardIn .9s ease-out forwards;
}

.apexOfferCard__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.apexOfferCard__logo{height:22px;width:auto;display:block;}
.apexOfferCard__chev{font-size:22px;line-height:1;color:#222;opacity:.7;}

.apexOfferCard__address{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight: 600;
  font-size: 20px;
}
.apexOfferCard__addrChev{opacity:.65;font-size:18px;}

.apexOfferCard__divider{
  margin-top: 14px;
  height:1px;
  background: rgba(0,0,0,.08);
}

.apexOfferCard__steps{margin-top: 18px;}
.apexStep{
  display:flex;align-items:center;gap:12px;
  font-size: 18px;
  color:#111;
  opacity:0;
  transform: translateY(6px);
  animation: apexStepIn .55s ease-out forwards;
}
.apexStep + .apexStep{margin-top: 14px;}
.apexStep::before{
  content:"";
  width:22px;height:22px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius: 999px;
  border:2px solid rgba(0,0,0,.25);
  box-sizing:border-box;
  flex:0 0 22px;
}
.apexStep--done::before{
  content:"✓";
  font-size:14px;
  border-color: rgba(16,129,73,.35);
  color:#108149;
}
.apexStep--load::before{
  content:"⌛";
  font-size:14px;
  border-color: rgba(0,0,0,.18);
  color:#555;
}
.apexStep--done:nth-child(1){animation-delay:.35s;}
.apexStep--done:nth-child(2){animation-delay:.7s;}
.apexStep--load{animation-delay:1.05s;}

.apexOfferCard__offer{
  margin-top: 18px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-top: 5px solid rgba(60,145,190,.55);
  padding: 16px 18px 14px;
  opacity:0;
  transform: translateY(6px);
  animation: apexOfferIn .65s ease-out forwards;
  animation-delay: 1.35s;
}
.apexOfferCard__offerTop{font-size:22px;font-weight:500;margin-bottom:6px;}
.apexOfferCard__offerAmt{font-size:46px;font-weight:700;letter-spacing:-.02em;line-height:1.05;}
.apexOfferCard__offerSub{margin-top:8px;color:rgba(0,0,0,.6);font-size:18px;}

.apexOfferCard__bullets{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  opacity:0;
  transform: translateY(6px);
  animation: apexBulletsIn .55s ease-out forwards;
  animation-delay: 1.75s;
}
.apexBullet{
  display:flex;align-items:center;gap:12px;
  font-size: 18px;
  color:#111;
}
.apexBullet::before{
  content:"✓";
  width:22px;height:22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid rgba(0,0,0,.14);
  color:#222;
  font-size:14px;
  flex:0 0 22px;
  opacity:.75;
}

@keyframes apexCardIn{to{opacity:1;transform:translateY(0);}}
@keyframes apexStepIn{to{opacity:1;transform:translateY(0);}}
@keyframes apexOfferIn{to{opacity:1;transform:translateY(0);}}
@keyframes apexBulletsIn{to{opacity:1;transform:translateY(0);}}

/* Keep inside panel on smaller screens */
@media (max-width: 900px){
  .apexOfferCard{width: 320px;border-radius: 24px;padding: 22px;}
  .apexOfferCard__address{font-size:18px;}
  .apexOfferCard__offerAmt{font-size:40px;}
}

/* v5.63 avatar centering fix */
.chat-avatar,
.chat-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* v5.64 chat mock right-edge clipping fix */
.section--support .supportPanel__art{ padding-right: 24px; }
@media (max-width: 1100px){
  .section--support .supportPanel__art{ padding-right: 12px; }
}


/* v5.65 chat avatar recenter (assets are framed right-heavy) */
.chatMock__avatar--expert{ background-position: 32% 50%; }
.chatMock__avatar--agent{  background-position: 32% 50%; }
.chatMock__avatar--you{    background-position: 38% 50%; }


/* v5.66 support chat positioning fix (prevent right avatar clipping) */
.section--support .chatMock{ transform: translateX(-28px); }
@media (max-width: 900px){
  .section--support .chatMock{ transform: translateX(0); }
}

/* v5.67 avatar crop fix */
.chatMock__avatar{ background-position: 50% 50% !important; background-size: cover !important; }

/* v5.67 build stamp */
body::after{ content:"v5.67-avatar-crop-fix" !important; position:fixed; left:10px; bottom:10px; font:12px/1.2 system-ui; color:#999; z-index:999999; }


/* v5.68 chat redo (img avatars + mobile fit) */
.chatMock--v2 .chatMock__avatar{
  background: transparent !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatMock--v2 .chatMock__avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* online dot */
.chatMock--v2 .chatMock__avatar--expert,
.chatMock--v2 .chatMock__avatar--agent{
  position: relative;
}
.chatMock--v2 .chatMock__avatar--expert::after,
.chatMock--v2 .chatMock__avatar--agent::after{
  content:"";
  position:absolute;
  left: 2px; bottom: 2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #24c26a;
  box-shadow: 0 0 0 3px #ffffff;
}

/* prevent right avatar clipping */
.chatMock--v2{ padding-right: 18px; }
.chatMock--v2 .chatMock__row--right{ justify-content: flex-end; }
.chatMock--v2 .chatMock__row--right .chatMock__bubble{
  max-width: calc(100% - 64px);
}
@media (max-width: 768px){
  .section--support .supportPanel__art{ overflow: visible; }
  .chatMock--v2{ width: 100%; padding-right: 10px; }
  .chatMock--v2 .chatMock__row{ width: 100%; }
  .chatMock--v2 .chatMock__row--right .chatMock__bubble{
    max-width: calc(100% - 72px);
  }
}

/* v5.68 build stamp */
body::after{ content:"v5.68-chat-redo" !important; position:fixed; left:10px; bottom:10px; font:12px/1.2 system-ui; color:#999; z-index:999999; }


/* v5.69 avatar img fix */
.chatMock__avatar{
  overflow: hidden !important;
  background: none !important;
  background-image: none !important;
}
.chatMock__avatar img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  border-radius: 999px !important;
}

body::after{content:"v5.69-avatar-img-fix" !important; position:fixed; left:10px; bottom:10px; font:12px/1.2 system-ui; color:#999; z-index:999999;}

/* v5.70 tight avatar system */
.chatMock__avatar {
  width:48px;
  height:48px;
  border-radius:50%;
  overflow:hidden;
}
.chatMock__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  display:block;
}

/* v5.71 avatar img lock */
.chatMock__avatar{ width:48px; height:48px; border-radius:50%; overflow:hidden; background:none !important; }
.chatMock__avatar img{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; object-position:50% 40% !important; }

/* v5.71 stamp */
body::after{ content:"v5.71-avatar-v3" !important; position:fixed; left:10px; bottom:10px; font:12px/1.2 system-ui; color:#999; z-index:999999; }

/* v5.75 stamp */
body::after{content:"v5.75-support-headline" !important;position:fixed;left:10px;bottom:10px;font:12px/1.2 system-ui;color:#999;z-index:999999;}

/* v5.92 stamp */
body::after{content:"v5.92-testimonials" !important;position:fixed;left:10px;bottom:10px;font:12px/1.2 system-ui;color:#999;z-index:999999;}

@media (max-width: 420px){
  /* tighter top spacing on real devices (Safari chrome makes this look oversized) */
  .hero{ padding: 20px 0 56px; }

  /* center the whole hero stack on true mobile */
  .hero__grid{ justify-items: center; }
  .hero__copy{
    padding-top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__h1{
    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
  }

  .hero__sub{
    font-size: 16px;
    line-height: 1.4;
    margin: 0 auto 16px;
    max-width: 36ch;
  }

  .addr{
    height: 64px;
    padding: 0 16px;
    border-radius: 24px;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .addr__input{ font-size: 18px; }
  .addr__btn{ width: 44px; height: 44px; }

  .hero__art{
    min-height: 520px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .artWrap{
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    justify-content: center;
  }
  /* remove desktop offset on mobile so circle is truly centered */
  .heroCircle{
    /* IMPORTANT: base .heroCircle transform appears later in file; lock override */
    transform: translateX(0) scale(1.02) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .reviewCard{
    width: min(560px, 92%);
    padding: 16px 16px;
    border-radius: 24px;
    background: rgba(242,241,240,0.64);
    backdrop-filter: blur(20px);
    bottom: -28px;
  }

  body{ overflow-x:hidden; }
}




/* ===== v6.48-charlotte-page MOBILE HEADER LOCK (Opendoor mobile parity) ===== */
@media (max-width: 780px){
  /* Mobile header: logo + hamburger, no desktop links */
  .nav.nav--desktop{ display:none !important; }
  .header__right{ display:none !important; min-width:0 !important; }
  .navToggle{ display:none !important; }
  .header__inner{ padding: 12px 0 !important; gap: 10px !important; }
}
@media (max-width: 420px){
  html, body{ overflow-x:hidden !important; width:100% !important; }
  .header{ overflow-x:clip !important; }
  .header__inner{ width:100% !important; max-width:100% !important; }
  .header__inner > *{ min-width:0 !important; }
  .brand__logo{ height:26px !important; }
  /* Prevent any transforms from leaking into mobile */
  .hero__art{ justify-content:center !important; }
  .artWrap{ width:100% !important; margin:0 auto !important; display:flex !important; justify-content:center !important; }
  /* Hard-center hero circle (do not rely on margins; matches Opendoor mobile centering behavior) */
  .heroCircle{
    position:relative !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width: min(420px, 92vw) !important;
    margin:0 !important;
    transform-origin:center !important;
  }
  /* Footer market chips: allow wrap */
  .marketCard__cities, .marketCard__cities *{ white-space:normal !important; overflow-wrap:anywhere !important; }
}


/* ===== v6.43 mobile OfferPulse bubble tweak ===== */
@media (max-width: 640px){
  /* Hide the top-right $677K bubble on mobile */
  .offerBubble--a{ display: none !important; }
  /* Nudge $471K bubble slightly right (avoid clipping the label on small screens) */
  .offerBubble--b{ left: 20px !important; }
}



/* Offer page stability fix: keep form card and fields static */
.section--offer .offerCard,
.section--offer .offerForm,
.section--offer .offerForm__input,
.section--offer .offerForm__btn{
  animation:none !important;
  transform:none !important;
}

/* Offer form card fix: prevent inherited hero art dimensions/layout from clipping fine print */
.section--offer .offerCard{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  justify-content:flex-start !important;
  padding:22px 22px 24px !important;
}
.section--offer .offerForm__fineprint{
  margin-top:12px !important;
  max-width:100% !important;
}
@media (max-width:480px){
  .section--offer .offerCard{padding:18px 16px 20px !important;}
}


/* v6.89 Charlotte asset fallback */
.hero__art img:not([src]), .hero__art img[src=""] { display:none !important; }


/* v6.89 Charlotte review card pin */
body.charlotte-page .hero__art,
body[data-page="charlotte"] .hero__art,
.charlotte .hero__art {
  position: relative !important;
  overflow: visible !important;
}

body.charlotte-page .hero__art .reviewCard,
body[data-page="charlotte"] .hero__art .reviewCard,
.charlotte .hero__art .reviewCard,
body.charlotte-page .reviewCard.heroReview,
body[data-page="charlotte"] .reviewCard.heroReview,
.charlotte .reviewCard.heroReview {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: -46px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: min(620px, 78%) !important;
  max-width: 620px !important;
  z-index: 5 !important;
}

@media (max-width: 900px) {
  body.charlotte-page .hero__art .reviewCard,
  body[data-page="charlotte"] .hero__art .reviewCard,
  .charlotte .hero__art .reviewCard,
  body.charlotte-page .reviewCard.heroReview,
  body[data-page="charlotte"] .reviewCard.heroReview,
  .charlotte .reviewCard.heroReview {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 18px auto 0 !important;
  }
}


/* v6.89 Charlotte review behavior copied from main */
body.charlotte-page .hero__art {
  position: relative !important;
  overflow: visible !important;
}

body.charlotte-page .artWrap {
  position: relative !important;
  overflow: visible !important;
}

body.charlotte-page .hero__art .reviewCard,
body.charlotte-page .artWrap .reviewCard {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -44px !important;
  transform: translateX(-50%) !important;
  width: min(620px, 78%) !important;
  max-width: 620px !important;
  margin: 0 !important;
  z-index: 30 !important;
}

body.charlotte-page .hero__art + .reviewCard,
body.charlotte-page .artWrap + .reviewCard {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -44px !important;
  transform: translateX(-50%) !important;
  width: min(620px, 78%) !important;
  max-width: 620px !important;
  margin: 0 !important;
  z-index: 30 !important;
}

@media (min-width: 901px) {
  body.charlotte-page .hero__grid {
    overflow: visible !important;
  }
  body.charlotte-page .hero {
    overflow: visible !important;
  }
}

@media (max-width: 900px) {
  body.charlotte-page .hero__art .reviewCard,
  body.charlotte-page .artWrap .reviewCard,
  body.charlotte-page .hero__art + .reviewCard,
  body.charlotte-page .artWrap + .reviewCard {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 0 !important;
  }
}


/* v6.89 Charlotte mobile hero = main hero behavior */
@media (max-width: 780px) {
  body.charlotte-page .hero,
  body.charlotte-page .hero__grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  body.charlotte-page .hero__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: left !important;
  }

  body.charlotte-page .hero__copy {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.charlotte-page .hero__h1 {
    max-width: 100% !important;
  }

  body.charlotte-page .addr,
  body.charlotte-page form.addr {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.charlotte-page .hero__art {
    width: 100% !important;
    max-width: 640px !important;
    min-height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  body.charlotte-page .artWrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    overflow: visible !important;
  }

  body.charlotte-page .heroCircle,
  body.charlotte-page .heroImage,
  body.charlotte-page .hero__art img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  body.charlotte-page .cashBubble,
  body.charlotte-page .offerBubble {
    transform: scale(.82) !important;
    transform-origin: top right !important;
  }

  body.charlotte-page .reviewCard,
  body.charlotte-page .hero__art .reviewCard,
  body.charlotte-page .artWrap .reviewCard {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto 0 !important;
    z-index: 5 !important;
  }
}

@media (max-width: 430px) {
  body.charlotte-page .hero__grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* v6.89 Charlotte mobile hero final fix: force exact main behavior on mobile */
@media (max-width: 780px){
  body.charlotte-page .hero__grid{
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    overflow: visible !important;
  }
  body.charlotte-page .hero__copy{
    text-align: center !important;
    padding-top: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.charlotte-page .hero__h1{
    font-size: 64px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.03em !important;
    max-width: none !important;
    text-align: center !important;
  }
  body.charlotte-page .hero__sub{
    margin-inline: auto !important;
    text-align: center !important;
    max-width: 46ch !important;
  }
  body.charlotte-page .addr,
  body.charlotte-page form.addr{
    margin-inline: auto !important;
    height: 78px !important;
    width: min(100%, 620px) !important;
    max-width: min(100%, 620px) !important;
  }
  body.charlotte-page .heroReassurance{
    text-align: center !important;
  }
  body.charlotte-page .hero__art{
    position: relative !important;
    min-height: 660px !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  body.charlotte-page .artWrap{
    position: relative !important;
    width: min(820px, 100%) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  body.charlotte-page .heroCircle,
  body.charlotte-page .hero__art img.heroCircle__img{
    position: relative !important;
    width: min(820px, 100%) !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-left: auto !important;
    background: #f2f2f2 !important;
    transform: translateX(72px) scale(1.12) !important;
    transform-origin: center !important;
    left: auto !important;
    right: auto !important;
  }
  body.charlotte-page .reviewCard,
  body.charlotte-page .hero__art .reviewCard,
  body.charlotte-page .artWrap .reviewCard,
  body.charlotte-page .reviewCard.heroReview{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -34px !important;
    transform: translateX(-50%) !important;
    width: min(720px, 92%) !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 30 !important;
  }
}

@media (max-width: 430px){
  body.charlotte-page .hero__h1{
    font-size: 56px !important;
  }
}


/* v6.89 Charlotte mobile hero image: match main centering/shape */
@media (max-width: 780px){
  body.charlotte-page .hero__art{
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  body.charlotte-page .artWrap{
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  body.charlotte-page .heroCircle{
    position: relative !important;
    left: 50% !important;
    width: min(420px, 92vw) !important;
    max-width: min(420px, 92vw) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #f2f2f2 !important;
    transform: translateX(-50%) !important;
    transform-origin: center !important;
  }
  body.charlotte-page .heroCircle__img,
  body.charlotte-page .hero__art img.heroCircle__img{
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: scale(1.02) !important;
  }
}


/* v6.89 mobile tap fix */
@media (hover: none), (pointer: coarse) {
  a,
  button,
  input,
  label {
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
    touch-action: manipulation;
  }

  a:hover,
  button:hover {
    text-decoration: inherit;
  }

  /* Prevent decorative hero layers from stealing taps */
  .hero__art,
  .artWrap,
  .heroCircle,
  .heroCircle__img,
  .bubble,
  .offerBubble,
  .cashBubble,
  .reviewCard {
    pointer-events: none;
  }

  /* Keep real forms/buttons tappable */
  .hero__copy,
  .addr,
  .addr *,
  .offerCard,
  .offerForm,
  .offerForm *,
  .ml-form-embedWrapper,
  .ml-form-embedWrapper * {
    pointer-events: auto;
  }
}


/* v6.89 Google Places dropdown layering */
.pac-container {
  z-index: 99999 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}


/* v6.89 Places API New widget inside address pill */
.addr__input--hiddenForPlaces {
  display: none !important;
}
.apexPlacesElement,
.addr gmp-place-autocomplete {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  font-family: inherit !important;
}
.apexPlacesElement:focus,
.addr gmp-place-autocomplete:focus {
  outline: none !important;
}
.pac-container {
  z-index: 99999 !important;
}

/* Live deployment: hide all version/debug stamps */
.versionBadge, .footer .ver { display: none !important; }
body::after { content: none !important; display: none !important; }






/* operator footer inline */
.operatorFooterInline {
  display: inline !important;
  margin-left: 8px !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  opacity: .85 !important;
  white-space: normal !important;
}
@media (max-width: 640px) {
  .operatorFooterInline {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
  }
}