.hero-text{padding-left: clamp(1.25rem, 4vw, 4rem);}
.hero-text .display {margin-bottom: 0.75rem;}
.hero-text .display em{margin-left: -4px;}
.hero-logo {
    width: clamp(150px, 13vw, 210px);
    height: auto;
    display: block;
    margin: 0px 0px 1.5rem;
}

.promo-band {
  color: var(--ink-deep);
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.promo-track {width: max-content; animation: promo-scroll 50s linear infinite;}
.promo-track:hover {animation-play-state: paused;}
.promo-item {gap: 1.2rem; padding: 0 3rem; border-right: 1px solid rgba(0, 62, 81, 0.14); color: inherit; transition: opacity .25s ease;}
.promo-community {font-size: 0.76rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);}
.promo-offer {font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 400; color: var(--ink-deep); letter-spacing: -0.005em;}

@keyframes promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.section-dark {background: var(--ink-deep);}
.section-dark .body {color: #b9cad1;}
.section-dark .display, .section-dark .eyebrow {color:var(--canvas)}

.why-grid {max-width: var(--max-w);  gap: clamp(2rem, 5vw, 5rem);}
.why-text {padding-right: 1rem; max-width: 36rem;}
.dare-panels {margin-top: 2.5rem;}

.dare-back {display: none; gap: 0.45rem; margin: 0 0 1.1rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; color: var(--accent); cursor: pointer;
transition: gap .2s ease, opacity .2s ease;}
.dare-back.is-visible {display: inline-flex; animation: 0.3s ease 0s 1 normal none running dare-fade-in;}
.dare-panel {display: none;}
.dare-panel.active {display: block; animation: 0.3s ease 0s 1 normal none running dare-fade-in;}

.dare-panel h3 {font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 1.25rem;}
.dare-features {gap: 1.4rem;}

.dare-feature-name {font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 0.55rem;}
.compare-row {gap: 0.7rem; padding: 0.35rem 0;}
.compare-row.estela .compare-mark {background: var(--accent); color: var(--ink-deep);}
.compare-row.typical .compare-mark {color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.1);}
.compare-row.typical p {color: rgba(255, 255, 255, 0.6);}

.compare-mark {--size:22px; width: 22px; height: 22px; flex-shrink: 0; font-size: 0.7rem; font-weight: 600; margin-top: 0.1rem;}
.compare-row p {font-size: 0.92rem; line-height: 1.45;}

.why-image {aspect-ratio: 37 / 27;}
.why-image img[src*="backyard"] {object-position: 70% center;}
.why-image img {display: block; object-position: center center; transition: opacity .22s ease;}
.why-image.has-active .hotspot:not(.active) {opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s;}

.hotspot {left: var(--x); top: var(--y); width: 22px; height: 22px; margin: -11px 0 0 -11px; background: rgba(155, 211, 221, 0.92); border: 2px solid rgba(255, 255, 255, 0.9);
cursor: pointer; z-index: 2; animation: hotspot-pulse 2.4s ease-out infinite; transition: transform .25s ease, opacity .25s ease, background .2s ease, box-shadow .2s ease, visibility 0s linear 0s;}
.hotspot-label{left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-6px); background: var(--accent); color: var(--ink-deep);
padding: 0.4rem 0.8rem; border-radius: 3px; font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);}

.hotspot.active .hotspot-label {opacity: 1; transform: translateY(-50%) translateX(0px);}
.hotspot.label-left .hotspot-label {left: auto; right: calc(100% + 10px); transform: translateY(-50%) translateX(6px);}
.hotspot.label-left.active .hotspot-label {transform: translateY(-50%) translateX(0);}


.dare-cta {margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15);}
.dare-cta-line {font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 1.1rem; letter-spacing: -0.01em;}
.dare-cta .btn-primary {margin-bottom: 0.85rem; background: var(--ink-deep-hi); border-color: var(--ink-deep);}
.dare-cta-note {font-family: var(--font-body); font-size: 0.85rem; color: rgba(255, 255, 255, 0.65);}


@media all and (min-width:800px){
  .hero-inner{grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);}
  .review-info p{max-width:84%; }

  .section-built .group-hd{max-width:80%;}
  .front-txt{max-width:60%;}
  .section-built{ padding-right: var(--section-gap-medium);}
  .why-grid {grid-template-columns: minmax(0, 1fr) minmax(0, 1.43fr);}
  .home-hero{padding-right: var(--pad-x);}
}

@media all and (max-width:960px){
  .review-info p {font-size: 1.2rem; line-height: 2rem;}
  .home-hero{height: auto!important;} 
  .hero-text {padding: var(--pad-y) var(--pad-x);}  
}