/* Loaded only for the home, product and AI landing pages.
   The fixed header is inside the viewport budget, not added above it.
   A minimum height lets long copy, translations and zoom grow naturally. */
body.j3-page[data-j3-page] #hero.j3-hero {
  --hero-header-height:85px;
  --hero-air:clamp(28px,4svh,64px);
  box-sizing:border-box;
  min-height:calc(100vh - var(--hero-strip-height,0px) - var(--hero-toolbar-height,0px));
  min-height:calc(100svh - var(--hero-strip-height,0px) - var(--hero-toolbar-height,0px));
  height:auto;
  padding-top:calc(var(--hero-header-height) + var(--hero-air));
  padding-bottom:var(--hero-air);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.j3-page[data-j3-page] #hero.j3-hero > :is(.w,.container) {
  width:100%;
  flex:none;
}
/* Replace the old width-based 600–700px stage with natural content height.
   The section itself distributes the remaining vertical space. */
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-frame {
  min-height:0;
}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-support {
  margin-top:clamp(32px,5svh,64px);
}
@media(max-width:760px) {
  body.j3-page[data-j3-page] #hero.j3-hero {
    --hero-header-height:75px;
    --hero-air:clamp(28px,4svh,44px);
  }
}
/* Keep breathing room on landscape phones and short laptop windows. */
@media(max-height:600px) {
  body.j3-page[data-j3-page] #hero.j3-hero {--hero-air:24px;}
}
/* Home hero: one screen minus the strip below it; the illustration gives way first. */
body.j3-page[data-j3-page="home-page"] #hero.j3-hero{--hs-strip:96px;--hero-air:clamp(14px,2.5vh,40px);min-height:calc(100vh - var(--hs-strip));min-height:calc(100svh - var(--hs-strip));max-height:calc(100vh - var(--hs-strip));max-height:calc(100svh - var(--hs-strip));overflow:hidden;justify-content:center}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-support{margin-top:clamp(14px,2.5vh,40px)}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art img{max-height:min(520px,calc(100svh - 96px - 85px - 330px));width:auto;max-width:100%;margin-inline:auto}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-copy h1{font-size:clamp(34px,min(4.6vw,6.4vh),64px)}
@media(max-width:900px){body.j3-page[data-j3-page="home-page"] #hero.j3-hero{min-height:0;max-height:none;overflow:visible}body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art img{max-height:none;width:100%}}

/* Home: copy, illustration and the support strip fit one viewport at any height. */
body.j3-page[data-j3-page="home-page"] #hero.j3-hero{max-height:100vh;max-height:100svh;overflow:hidden;--hero-air:clamp(16px,2.5vh,48px)}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{max-height:min(560px,calc(100svh - 440px));display:flex;align-items:center;justify-content:center}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art :is(img,svg,picture){max-height:100%;width:auto;max-width:100%;object-fit:contain}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero h1{font-size:clamp(32px,min(4.2vw,6.4vh),64px)}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-support{margin-top:clamp(16px,3vh,48px)}
@media(max-width:900px){body.j3-page[data-j3-page="home-page"] #hero.j3-hero{max-height:none;overflow:visible}body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{max-height:none;display:block}}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{max-height:min(560px,calc(100svh - 470px))}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-support{margin-top:clamp(10px,2.5vh,44px)}
/* Home: leave room for the strip that follows the hero. */
body.j3-page[data-j3-page="home-page"] #hero.j3-hero{min-height:0;max-height:calc(100vh - 96px);max-height:calc(100svh - 96px);--hero-air:clamp(12px,2vh,40px)}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{max-height:max(200px,min(560px,calc(100svh - 560px)))}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .hero-desc{font-size:clamp(14px,1.9vh,17px);line-height:1.55}
@media(max-width:900px){body.j3-page[data-j3-page="home-page"] #hero.j3-hero{max-height:none}}
/* Home: full first screen; the strip after the hero appears on scroll. */
body.j3-page[data-j3-page="home-page"] #hero.j3-hero{min-height:100vh;min-height:100svh;max-height:100vh;max-height:100svh}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{max-height:max(220px,min(600px,calc(100svh - 470px)))}
@media(max-width:900px){body.j3-page[data-j3-page="home-page"] #hero.j3-hero{max-height:none}}
/* Investors: the first screen is copy + the round-terms card, fitted to the viewport like the home hero. */
body.j3-page[data-j3-page="investors"] #hero.j3-hero{max-height:none;overflow:visible;--hero-air:clamp(12px,2.5vh,48px)}
/* Never clip: below ~800px of viewport height the copy scales down instead. */
@media(max-height:820px){body.j3-page[data-j3-page="investors"] #hero.j3-hero h1{font-size:clamp(26px,min(3vw,4.8vh),44px);line-height:1.1}body.j3-page[data-j3-page="investors"] #hero.j3-hero .hero-sub{font-size:clamp(13px,1.8vh,16px);margin:14px 0 18px}body.j3-page[data-j3-page="investors"] #hero.j3-hero .mini-stats{margin-top:12px;padding-top:10px}body.j3-page[data-j3-page="investors"] #hero.j3-hero .mini-stat-n{font-size:20px}body.j3-page[data-j3-page="investors"] #hero.j3-hero .hero-ctas{margin-top:14px}body.j3-page[data-j3-page="investors"] #hero.j3-hero :is(.btn-primary,.btn-watch){padding:11px 18px;font-size:14px}}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-frame{min-height:0}
/* Investors: the right column is the round-terms card (seed markup is prebuilt, data-j3-custom), not an illustration. */
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-frame{grid-template-columns:1.12fr 1fr;gap:clamp(28px,4vw,64px)}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms{min-width:0;align-self:center}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms .round-card{padding:clamp(22px,3.2vh,42px) clamp(22px,2.6vw,38px)}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms .round-amt{font-size:clamp(30px,min(2.8vw,4.6vh),44.8px)}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms .round-card>p{font-size:clamp(13px,1.7vh,14.4px);line-height:1.6}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms .round-facts-mini{margin-top:clamp(12px,2vh,22px);padding-top:clamp(12px,2vh,22px);gap:clamp(7px,1.2vh,13px)}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms .round-facts-mini div{font-size:clamp(13px,1.6vh,14.9px)}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms .round-chips{margin-top:clamp(12px,2vh,22px)}
body.j3-page[data-j3-page="investors"] #hero.j3-hero h1{font-size:clamp(30px,min(3.4vw,5.4vh),54px)}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .hero-sub{font-size:clamp(14px,1.9vh,18px);line-height:1.55}
body.j3-page[data-j3-page="investors"] #hero.j3-hero .mini-stats{margin-top:clamp(12px,2.5vh,32px);padding-top:clamp(10px,2vh,22px)}
@media(max-width:900px){body.j3-page[data-j3-page="investors"] #hero.j3-hero{max-height:none;overflow:visible}body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-frame{grid-template-columns:1fr;gap:28px}body.j3-page[data-j3-page="investors"] #hero.j3-hero .j3-hero-terms .round-card{padding:26px 22px}}
/* Partner program: copy + illustration + the reseller-book card are one first screen (no clipping: everything scales down on short windows). */
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero{--hero-air:clamp(10px,2vh,40px);min-height:100vh;min-height:100svh;max-height:none;overflow:visible}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-frame{min-height:0;gap:clamp(24px,3vw,55px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-art{max-height:max(140px,min(520px,calc(100svh - 600px)));display:flex;align-items:center;justify-content:center}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-art :is(img,svg,picture){max-height:100%;width:auto;max-width:100%;object-fit:contain}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero h1{font-size:clamp(28px,min(3.4vw,5vh),56px);margin:clamp(10px,1.6vh,22px) 0 clamp(10px,1.8vh,24px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero :is(.hero-sub,.hero-desc){font-size:clamp(14px,1.9vh,18px);line-height:1.55;margin-bottom:clamp(12px,2vh,28px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-support{margin-top:clamp(12px,2.2vh,40px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .payout-card{padding:clamp(16px,2.2vh,35px) clamp(18px,2.5vw,35px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .payout-head{margin-bottom:clamp(8px,1.4vh,24px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .pb-payout-n{font-size:clamp(28px,min(4.5vw,4.6vh),49.6px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .pb-bars{height:clamp(44px,8vh,112px);margin-top:clamp(8px,1.6vh,24px)}
body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .pb-stats{margin-top:clamp(8px,1.4vh,22px);padding-top:clamp(8px,1.4vh,22px)}
@media(max-height:660px) and (min-width:901px){body.j3-page[data-j3-page="partner-program"] #hero.j3-hero{--hero-air:8px}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-art{max-height:150px}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero :is(.hero-sub,.hero-desc){font-size:13px;line-height:1.45;margin-bottom:10px}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .payout-card{padding:12px 20px}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .pb-bars{height:40px;margin-top:6px}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .pb-payout-n{font-size:26px}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-support{margin-top:8px}}
@media(max-width:900px){body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-frame{display:block}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .j3-hero-art{max-height:none;display:block}body.j3-page[data-j3-page="partner-program"] #hero.j3-hero .pb-bars{height:90px}}
/* About: no full-viewport rule (its hero is a title + illustration only, not a complete hero section). */