/* IDX Bloom home v2: hero IMAGE options A / B / C (2026-11-11). Local preview only. Loaded after site-v2.css.
   Scoped to body.v2. Light only, no dark boxes. Brand: navy #10264A, green #00D48A. */

/* ================= A: photos in the sample cards + a wide photo band ================= */
body.v2 .axd-ph{background:#EAF0F7}
body.v2 .axd-ph img{background:#EAF0F7}
body.v2 .axd-ph::after{content:"Sample";position:absolute;bottom:8px;right:8px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:#10264A;font:800 11px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
body.v2 .ha-band{padding:6px 0 10px;background:#fff}
body.v2 .ha-fig{margin:0;position:relative;border-radius:22px;overflow:hidden;border:1.5px solid #D5DEEC;background:#EAF0F7;box-shadow:0 24px 50px -30px rgba(16,38,74,.35)}
body.v2 .ha-fig picture,body.v2 .ha-fig img{display:block;width:100%;height:auto}
body.v2 .ha-fig img{aspect-ratio:3/1;object-fit:cover}
body.v2 .ha-fig figcaption{position:absolute;left:14px;bottom:12px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.94);color:#41567A;font:600 12.5px/1.3 var(--f-body)}
@media (max-width:860px){
  body.v2 .ha-band{padding:0}
  body.v2 .ha-fig{border-radius:16px}
  body.v2 .ha-fig img{aspect-ratio:16/9}
  body.v2 .ha-fig figcaption{font-size:11.5px;left:10px;bottom:10px}
}

/* ================= B: full-width photo hero ================= */
body.v2 .ax-hero.hb{position:relative;overflow:hidden;isolation:isolate;background:#fff}
body.v2 .hb-bg{position:absolute;left:0;right:0;top:0;height:600px;z-index:-2;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
body.v2 .hb-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 52%}
/* the light overlay: near-white under the headline (navy on white, well over 4.5:1), the skyline opens up to the right, white again at the bottom edge */
body.v2 .ax-hero.hb::before{content:"";position:absolute;left:0;right:0;top:0;height:600px;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 43%,rgba(255,255,255,.3) 57%,rgba(255,255,255,0) 72%)}
body.v2 .ax-hero.hb .ax-demo{background:rgba(255,255,255,.97);box-shadow:0 36px 70px -28px rgba(16,38,74,.5)}
body.v2 .ax-hero.hb .ax-note{color:#10264A;font-weight:600}
body.v2 .ax-hero.hb .ax-3{background:rgba(255,255,255,.96)}
@media (min-width:960px){
  body.v2 .ax-hero.hb{padding:64px 0 84px}
  body.v2 .ax-hero.hb .ax-demo{margin-top:190px}
  body.v2 .ax-hero.hb{padding-bottom:64px}
}
@media (max-width:959px){
  /* phone: a clear photo strip on top, fading into the page; text and Start free sit right under it */
  body.v2 .ax-hero.hb{padding-top:0}
  body.v2 .hb-bg{height:120px;bottom:auto}
  body.v2 .hb-bg img{object-position:60% 70%}
  body.v2 .ax-hero.hb::before{bottom:auto;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0) 55%,#fff 100%)}
  body.v2 .ax-hero.hb .ax-grid{padding-top:128px}
  body.v2 .ax-hero.hb .ax-kick{background:rgba(230,251,243,.97)}
}

/* ================= C: laptop + phone mockups ================= */
body.v2 .ax-hero.hc{background:radial-gradient(120% 90% at 85% 10%,#E3FAF0 0%,rgba(242,252,248,0) 60%),linear-gradient(180deg,#F2FCF8,#fff)}
body.v2 .hc-stage{position:relative;padding:0 0 5%;margin:0 auto;max-width:640px}
body.v2 .hc-cap{text-align:center;margin-top:8px}
@media (min-width:960px){body.v2 .ax-hero.hc .ax-d{align-self:center;margin-top:0}body.v2 .hc-stage{max-width:none;padding-bottom:7%}}
body.v2 .hc-laptop{width:90%}
body.v2 .hc-lid{position:relative;border:2px solid #10264A;border-bottom:0;border-radius:14px 14px 0 0;background:#fff;padding:2.2% 2.2% 0;box-shadow:0 30px 60px -30px rgba(16,38,74,.45)}
body.v2 .hc-cam{position:absolute;left:50%;top:.9%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#D5DEEC}
body.v2 .hc-lid picture,body.v2 .hc-lid img{display:block;width:100%;height:auto;border-radius:4px 4px 0 0}
body.v2 .hc-base{height:14px;margin:0 -4%;border:2px solid #10264A;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#EAF0F7,#D5DEEC);position:relative}
body.v2 .hc-base::before{content:"";position:absolute;left:50%;top:-2px;width:18%;height:6px;margin-left:-9%;border-radius:0 0 8px 8px;background:#C3CFE2}
body.v2 .hc-phone{position:absolute;right:0;bottom:0;width:36%;aspect-ratio:9/17.5;border:2.5px solid #10264A;border-radius:26px;background:#fff;padding:7px;box-shadow:0 24px 44px -16px rgba(16,38,74,.55),0 0 0 6px rgba(255,255,255,.9);overflow:hidden}
body.v2 .hc-notch{position:absolute;left:50%;top:9px;width:30%;height:9px;margin-left:-15%;border-radius:6px;background:#10264A;z-index:2}
body.v2 .hc-scr{height:100%;border-radius:19px;background:#F6F9FD;padding:26px 8px 8px;overflow:hidden;font-family:var(--f-body)}
body.v2 .hc-q{margin:0 0 6px;padding:7px 9px;border:1.5px solid #D5DEEC;border-radius:999px;background:#fff;color:#10264A;font-weight:700;font-size:clamp(8.5px,1.5vw,11px);line-height:1.2}
body.v2 .hc-q span{color:#007A50;margin-right:3px}
body.v2 .hc-sum{margin:0 0 6px;font:700 clamp(9px,1.6vw,12px)/1.2 var(--f-display);color:#10264A}
body.v2 .hc-card{margin:0 0 7px;border:1px solid #D5DEEC;border-radius:9px;background:#fff;overflow:hidden}
body.v2 .hc-ph{position:relative;display:block;aspect-ratio:16/9}
body.v2 .hc-ph picture,body.v2 .hc-ph img{display:block;width:100%;height:100%;object-fit:cover}
body.v2 .hc-ph b{position:absolute;top:5px;right:5px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.95);color:#10264A;font:800 clamp(6.5px,1vw,8px)/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
body.v2 .hc-cb{display:flex;flex-direction:column;padding:5px 7px 6px;font-size:clamp(7.5px,1.2vw,9.5px);line-height:1.3;color:#41567A}
body.v2 .hc-cb b{font:800 clamp(10px,1.8vw,14px)/1.2 var(--f-display);color:#10264A}
body.v2 .hc-try{padding:0 0 18px;background:#fff}
body.v2 .hc-try-in{max-width:760px;margin:0 auto}
@media (max-width:959px){
  body.v2 .hc-stage{max-width:420px}
  body.v2 .hc-phone{width:38%;border-radius:20px;padding:5px;border-width:2px}
  body.v2 .hc-scr{padding:20px 6px 6px;border-radius:15px}
  body.v2 .hc-notch{top:6px;height:7px}
}