/* hero2.css: the top of buildradar.net - the nav, the 3-line headline over
   the framed house at dusk with the floating example cards, the 4 gold icon features, the two buttons, the map strip and
   the checklist. Shared by / and /es/ (same markup, own words). Everything is prefixed hx- so the page styles below it
   are untouched. Fonts: Barlow (headline, buttons; Montserrat until 10/19 - one font set with the app) + Inter, both from Google Fonts in each page's <head>. */
.hxv{--hx-navy:#0A1A33;--hx-navy2:#0F2444;--hx-ink:#06122A;--hx-gold:#d4a53a;--hx-gold2:#dcb24f;--hx-blue:#3B82F6;
  --hx-text:#FFFFFF;--hx-muted:#B9C6DD;--hx-line:rgba(185,198,221,.22);--hx-g:20px}
.hx{position:relative;overflow:hidden;color:var(--hx-text);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:radial-gradient(70% 60% at 0% 0%,rgba(37,84,180,.35),transparent 70%),linear-gradient(180deg,#0B1D3A 0%,var(--hx-navy) 55%,#081530 100%)}
.hxv,.hxv *{box-sizing:border-box}
.hxv a{text-decoration:none}
.hx-wrap{position:relative;max-width:1280px;margin:0 auto;padding:0 var(--hx-g)}

/* nav */
.hx-nav{position:sticky;top:0;z-index:30;background:rgba(8,21,44,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hx-line);font-family:Barlow,Inter,sans-serif}
.hx-nav .hx-wrap{display:flex;align-items:center;gap:14px;height:72px}
.hx-brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;font-size:26px;letter-spacing:-.02em;white-space:nowrap}
.hx-brand img{width:44px;height:44px;flex:none}
.hx-links{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,2.6vw,40px);font-weight:600;font-size:18px;white-space:nowrap}
.hx-links .hx-lang{color:#fff}
.hx-links .hx-in{color:var(--hx-gold);border:1.5px solid var(--hx-gold);border-radius:999px;padding:10px 22px;font-weight:700;white-space:nowrap}
@media (max-width:900px){.hx-links .hx-in{padding:8px 13px;font-size:15px}}
@media (max-width:400px){.hx-links .hx-in{padding:7px 9px;font-size:13.5px}}
.hx-links .hx-lang:hover,.hx-links .hx-in:hover{text-decoration:underline;text-underline-offset:4px}
.hx-links .hx-try{background:var(--hx-gold);color:#0b1f3f;font-weight:700;border-radius:999px;padding:12px 30px;font-size:19px;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}
.hx-links .hx-try:hover{background:var(--hx-gold2)}
.hx-links a{display:inline-flex;align-items:center;min-height:44px}
.hx-links .hx-try{min-height:0}

/* hero: text column on the left, the house on the right (it bleeds to the page edge, faded into the navy) */
.hx-hero{position:relative;padding:26px 0 0}
.hx-text{position:relative;z-index:3;width:60%}
.hx h1{font-family:Barlow,Inter,sans-serif;font-weight:800;text-transform:none;font-size:clamp(34px,6.3vw,84px);line-height:1.02;letter-spacing:-.035em;margin:0;
  text-shadow:0 4px 24px rgba(4,12,28,.55);white-space:nowrap}
.hx h1 span{display:block}
.hx h1 .g{color:var(--hx-gold)}
.hx-sub{font-size:clamp(17px,1.75vw,23px);line-height:1.38;color:#E6ECF6;margin:18px 0 0;max-width:640px}
.hx-sub b{color:var(--hx-gold);font-weight:700}

.hx-art{position:absolute;z-index:1;top:0;right:calc(-1 * var(--hx-g));width:52%;height:100%;container-type:inline-size}
.hx-photo{position:absolute;inset:0;overflow:hidden}
.hx-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.hx-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--hx-navy) 0%,rgba(10,26,51,.55) 16%,rgba(10,26,51,0) 38%),
             linear-gradient(0deg,var(--hx-navy) 0%,rgba(10,26,51,0) 22%),
             linear-gradient(180deg,rgba(10,26,51,.35) 0%,rgba(10,26,51,0) 14%)}

/* the floating example cards: crisp HTML over the photo, sized off the picture (cqw), never under 12px (audit 10/19 D7) */
.hx-card{position:absolute;z-index:2;background:#fff;color:#0E1A2E;border-radius:clamp(9px,2.2cqw,16px);
  box-shadow:0 14px 34px rgba(0,0,0,.38);padding:clamp(7px,1.9cqw,14px) clamp(8px,2.1cqw,16px);font-size:clamp(12px,2.05cqw,15px);line-height:1.3}
.hx-card h4{display:flex;align-items:center;gap:.55em;margin:0;font:700 1.12em/1.15 Barlow,Inter,sans-serif;color:#0E1A2E}
.hx-card h4 svg{width:1.45em;height:1.45em;flex:none;color:#173A7A}
.hx-card .big{font:800 1.3em/1.2 Barlow,Inter,sans-serif;margin-top:.45em;color:#0E1A2E}
.hx-card .small{color:#5A6880;font-size:max(12px,.82em)}
.hx-card ul{margin:.45em 0 0;padding:0 0 0 1.15em}
.hx-card li{margin:.12em 0}
.hx-card .ex{position:absolute;top:-.85em;right:.9em;background:var(--hx-gold);color:#0b1f3f;font:700 .7em/1 Inter,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;padding:.35em .6em;border-radius:999px}
.hx-c3d{top:3%;right:4%;width:37%}
.hx-c3d .pic{margin-top:.6em;border-radius:.6em;overflow:hidden;background:#0D1117;aspect-ratio:480/220}
.hx-c3d .pic img{width:100%;height:100%;object-fit:cover;display:block}
.hx-cmat{top:47%;left:27%;width:25%}
.hx-cmed{top:42%;right:3%;width:28%}
.hx-cest{top:67%;right:3%;width:28%}

.hx-top{position:relative;padding-bottom:6px}
.hx-hero h4{letter-spacing:normal;text-transform:none}

/* the 4 features */
.hx-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0 0;padding:0;list-style:none;max-width:800px}
.hx-feats li{text-align:center;font-size:16px;line-height:1.3;color:var(--hx-muted)}
.hx-feats b{display:block;color:#fff;font:700 17px/1.25 Barlow,Inter,sans-serif;margin:12px 0 3px}
.hx-ic{width:84px;height:84px;margin:0 auto;border-radius:50%;border:3px solid var(--hx-gold);display:grid;place-items:center;
  background:rgba(6,18,42,.55)}
.hx-ic svg{width:44px;height:44px;color:var(--hx-gold)}

/* buttons */
.hx-ctas{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap;align-items:stretch}
.hx-go{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--hx-gold);color:#0b1f3f;border-radius:22px;
  padding:0 40px;min-height:72px;font:800 clamp(21px,2.1vw,29px)/1 Barlow,Inter,sans-serif;letter-spacing:-.02em;
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .15s,background .15s}
.hx-go:hover{background:var(--hx-gold2);transform:translateY(-1px)}
.hx-go svg{width:1em;height:1em}
.hx-watch{display:inline-flex;align-items:center;gap:18px;background:rgba(6,18,42,.6);color:#fff;border:1.5px solid rgba(185,198,221,.45);
  border-radius:22px;padding:0 34px 0 30px;min-height:72px;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s}
.hx-watch:hover{border-color:var(--hx-gold)}
.hx-watch svg{width:28px;height:28px;flex:none;fill:#fff}
.hx-watch b{display:block;color:#fff;font:700 21px/1.2 Barlow,Inter,sans-serif}
.hx-watch span{display:block;color:var(--hx-muted);font-size:16.5px}
.hx-proof{margin:16px 0 0;color:var(--hx-muted);font-size:15.5px;max-width:640px}
.hx-proof b{color:var(--hx-gold)}
/* the material connection behind the $350,000 line (legal brief 10/3: FTC endorsement guides 16 CFR 255.5) - always beside it */
.hx-disclose{display:block;margin-top:4px;font-size:13px;color:var(--hx-muted)}

/* the map strip + the checklist */
.hx-bottom{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:center;margin-top:22px;padding-bottom:40px}
.hx-map{position:relative;border-radius:20px;overflow:hidden;border:1.5px solid rgba(110,150,220,.4);aspect-ratio:1160/290;background:#1d2a1f;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hx-map img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1) brightness(.92)}
.hx-map .pin{position:absolute;width:clamp(22px,3.1%,38px);transform:translate(-50%,-100%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.hx-map .credit{position:absolute;left:8px;bottom:6px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:4px}
.hx-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hx-checks li{display:flex;align-items:center;gap:16px;border:1.5px solid var(--hx-line);border-radius:16px;padding:12px 18px;
  background:rgba(6,18,42,.5);font:600 17.5px/1.25 Barlow,Inter,sans-serif}
.hx-checks i{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center}
.hx-checks i svg{width:18px;height:18px;fill:none;stroke:#0B1426;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hx-checks li:nth-child(1) i{background:#22C55E}
.hx-checks li:nth-child(2) i{background:#3B82F6}
.hx-checks li:nth-child(3) i{background:#A855F7}
.hx-checks li:nth-child(4) i{background:var(--hx-gold)}

/* the video, in place over the page */
.hx-dlg{border:0;padding:0;background:transparent;width:min(1100px,94vw);max-width:94vw;color:#fff}
.hx-dlg::backdrop{background:rgba(3,8,20,.86)}
.hx-dlg video{width:100%;max-height:82vh;display:block;border-radius:16px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.hx-dlg .x{display:block;margin:0 0 10px auto;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  font:600 15px/1 Inter,sans-serif;padding:10px 16px;cursor:pointer}

/* in between: the headline gets smaller before the house runs into it */
@media (max-width:1180px){.hx-feats b{font-size:15.5px}.hx-feats li{font-size:14.5px}.hx-ic{width:72px;height:72px}.hx-ic svg{width:38px;height:38px}
  .hx-go,.hx-watch{min-height:68px}.hx-go{padding:0 30px}.hx-watch{padding:0 24px}}

/* tablet and phone: everything stacks - headline, subline, the house, the features 2x2, the buttons, the map, the checklist */
@media (max-width:900px){
  .hx-text{width:auto}
  .hx h1{font-size:clamp(26px,8.9vw,72px);white-space:normal}
  .hx-art{position:relative;right:auto;top:auto;width:auto;height:auto;margin:22px calc(-1 * var(--hx-g)) 0;aspect-ratio:4/3.3}
  .hx-photo::after{background:linear-gradient(0deg,var(--hx-navy) 0%,rgba(10,26,51,0) 18%),linear-gradient(180deg,#0B1D3A 0%,rgba(11,29,58,.6) 9%,rgba(11,29,58,0) 24%)}
  .hx-photo img{object-position:70% 50%}
  .hx-c3d{top:4%;right:3%;width:44%}
  .hx-cmat{top:44%;left:4%;width:33%}
  .hx-cmed{top:44%;right:3%;width:37%}
  .hx-cest{top:69%;right:3%;width:37%}
  .hx-card h4{font-size:1.05em;gap:.45em}
  .hx-card{font-size:clamp(12px,3.1cqw,15px)}
  .hx-feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;max-width:none;margin-top:8px}
  .hx-ctas{flex-direction:column}
  .hx-go,.hx-watch{width:100%}
  .hx-watch{justify-content:center}
  .hx-bottom{grid-template-columns:1fr;gap:18px}
  .hx-map{aspect-ratio:16/9}
  .hx-map img{object-position:30% 50%}
}
@media (max-width:560px){
  .hxv{--hx-g:16px}
  .hx-nav .hx-wrap{height:62px;gap:10px}
  .hx-brand{font-size:19px;gap:8px}.hx-brand img{width:34px;height:34px}
  .hx-links{gap:12px;font-size:15px}
  .hx-links .hx-try{padding:9px 14px;font-size:15px}
  .hx-links .hx-lang .long{display:none}
  .hx-links .hx-lang .short{display:inline}
  .hx-sub{margin-top:16px}
  .hx-feats b{font-size:15px;margin-top:10px}.hx-feats li{font-size:14px}
  .hx-ic{width:64px;height:64px}.hx-ic svg{width:32px;height:32px}
  .hx-go{border-radius:18px;min-height:64px;font-size:22px}
  .hx-watch{border-radius:18px;min-height:64px}
  .hx-watch b{font-size:18px}.hx-watch span{font-size:15px}
  .hx-checks li{font-size:16px;padding:10px 14px}
}
.hx-links .hx-lang .short{display:none}
@media (max-width:560px){.hx-links .hx-lang .short{display:inline}}
@media (max-width:370px){
  .hx-brand{font-size:17px}.hx-brand img{width:30px;height:30px}
  .hx-links{gap:9px;font-size:14px}
  .hx-links .hx-try{padding:8px 11px;font-size:14px}
  .hx-go{font-size:20px;padding:0 16px}
  .hx-watch{padding:0 16px;gap:12px}
}
/* small phones: "Sign in" / "Entrar" stays in the bar, compact */
@media (max-width:420px){
  .hx-nav .hx-wrap{gap:8px}
  .hx-brand{font-size:16px;gap:6px}.hx-brand img{width:28px;height:28px}
  .hx-links{gap:8px;font-size:13.5px}
  .hx-links .hx-try{padding:8px 10px;font-size:13.5px}
}
@media (max-width:350px){
  .hx-nav .hx-wrap{gap:6px}
  .hx-brand{font-size:14px;gap:5px;letter-spacing:-.03em}.hx-brand img{width:24px;height:24px}
  .hx-links{gap:7px;font-size:12.5px}
  .hx-links .hx-try{padding:7px 8px;font-size:12.5px;letter-spacing:-.01em}
}

/* the old hero's four numbers, kept as a band under the new top */
section.statsband{padding:12px 0 64px;background:#081530}
section.statsband .stats{margin-top:0}

/* phones and tablets: the two buttons come right under the subline, above the house and the features */
@media (max-width:900px){
  .hx-top{display:flex;flex-direction:column}
  .hx-text2{display:contents}
  .hx-text{order:0}
  .hx-ctas{order:1;margin-top:22px}
  .hx-proof{order:2}
  .hx-art{order:3}
  .hx-feats{order:4;margin-top:8px}
}

/* the "What you get for this house" checklist card */
.hx-cc{top:10%;right:4%;width:46%}
.hx-card .ck{width:1.05em;height:1.05em;color:#16A34A;flex:none}
.hx-card .row{display:flex;gap:.45em;align-items:center;margin:.5em 0;font-size:1em}
.hx-card .row b{font-weight:800}
.hx-cap{position:absolute;left:3%;bottom:2.5%;z-index:2;background:rgba(6,16,28,.78);color:#E6EDF7;font:600 clamp(12px,1.6cqw,13px)/1.3 Inter,sans-serif;padding:.4em .7em;border-radius:.5em}
@media (max-width:900px){.hx-cc{top:8%;right:3%;width:66%}}
/* small phones: wider, so its 12px lines stay one line each and the card covers less of the house */
@media (max-width:420px){.hx-cc{width:80%}}
/* the start button's name (Getting in B2, 10/18) is long in the header: up to 900 px the header shows its short form
   ("3 free houses" / "3 casas gratis"), as the language link does, and from 561 to 900 px the button takes the phone's
   size - the long name made the page scroll sideways at 320-760 px. Last in the file, so it wins over the rules above. */
.hx-links .hx-try .short{display:none}
@media (max-width:900px){.hx-links .hx-try .long{display:none}.hx-links .hx-try .short{display:inline}}
@media (min-width:561px) and (max-width:900px){.hx-links .hx-try{padding:9px 14px;font-size:15px}}
/* a phone (10/19, a shorter page): the hero's map strip and its four checks give way to the map section just below */
@media (max-width:560px){.hx-bottom{display:none}}