/* Hero always fills one screen; script/shrink logic keeps its content inside it. */
.hero .hero-inner{
  min-height:100vh;min-height:100svh;min-height:100lvh;
  padding-top:calc(var(--header-h,76px) + clamp(8px,3.4vh,42px));
}

/* Phone hero: the first screen holds only the copy; the globe and its callouts follow on scroll. */
@media(max-width:560px){
  .hero .hero-inner{min-height:0;padding:calc(var(--header-h,76px) + 6px) var(--pad-x) 0;}
  .hero .hero-grid{row-gap:0;padding-bottom:0;}
  .hero .hero-copy{
    min-height:calc(100vh - var(--header-h,76px) - 22px);min-height:calc(100svh - var(--header-h,76px) - 22px);min-height:calc(100lvh - var(--header-h,76px) - 22px);
    display:flex;flex-direction:column;justify-content:center;
  }
  .hero h1{font-size:clamp(32px,min(10.4vw,5.6vh),46px);line-height:1.08;margin-bottom:clamp(8px,1.4vh,14px);letter-spacing:-.4px;}
  .hero p{font-size:clamp(15px,2.3vh,17px);margin-bottom:clamp(14px,2.6vh,26px);}
  .hero-ctas{gap:10px;margin-bottom:clamp(14px,3vh,30px);}
  .hero-ctas .btn{padding:clamp(10px,1.8vh,15px) 18px;font-size:15px;}
  .hero-social{gap:12px;}
  .avatars img{width:34px;height:34px;margin-left:-9px;}
  .hero-social .label{font-size:16px;line-height:1.15;}
  .hero-social .sub{font-size:13px;}
  .hero-feature-row{margin-top:clamp(14px,3vh,30px);gap:clamp(9px,1.8vh,18px) 12px;}
  .hero-feature-row .feat{font-size:12.5px;gap:9px;line-height:1.25;}
  .hero-feature-row .feat .ic{width:38px;height:38px;border-radius:10px;}
  .hero-feature-row .feat .ic svg{width:23px;height:23px;}

  .hero .hero-visual{height:clamp(300px,90vw,350px);min-height:0;margin:10px auto 0;transform:none;overflow:visible;}
  .hero .hero-visual #globeCanvas{width:clamp(290px,92vw,350px);top:50%;}
  .hero .hero-visual .globe-glow{width:72vw;height:72vw;top:calc(50% - 36vw);}
  .hero .hero-visual .globe-acronym{font-size:clamp(32px,10.4vw,44px);top:50%;}
  /* Callouts float around the globe as on desktop, just smaller and kept inside the visual. */
  .hero .hero-visual .float-card{
    top:auto;left:auto;right:auto;bottom:auto;width:auto;max-width:48%;
    padding:6px 10px 6px 6px;gap:7px;border-radius:16px;font-size:10.5px;line-height:1.22;
  }
  .hero .hero-visual .float-card .ic-sq{width:28px;height:28px;}
  .hero .hero-visual .float-card .ic-sq svg{width:15px;height:15px;}
  .hero .hero-visual .float-card .sub{font-size:9.5px;line-height:1.22;}
  .hero .hero-visual .fc-sbr{top:6px;left:0;}
  .hero .hero-visual .fc-aaa{top:0;right:0;}
  .hero .hero-visual .fc-students{bottom:22px;left:0;}
  .hero .hero-visual .fc-global{bottom:0;right:0;}
}