/* Round 8 hero globe, phones only (<=760px). Desktop keeps round 7: .h7__globe stays display:none there. */
@media (max-width:760px){
  .hero7 .h7__globe.h8g{display:block;position:relative;width:100vw;height:400px;margin:8px 0 0;left:50%;transform:translateX(-50%);overflow:hidden;z-index:1}
  .hero7 .h7__globe.h8g canvas{position:absolute;left:50%;top:30px;width:820px;height:820px;max-width:none;transform:translateX(-50%);display:block;cursor:grab;touch-action:pan-y}
  /* fade the lower part into the page so the globe reads as rising behind the text below */
  .hero7 .h7__globe.h8g::after{content:"";position:absolute;inset:auto 0 0 0;height:170px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 88%);pointer-events:none;z-index:2}
  .h8g__c{position:absolute;z-index:4;left:0;top:0;opacity:0;transition:opacity .6s var(--ease);will-change:transform}
  .h8g__c.on{opacity:1}
  .h8g__in{position:relative;display:flex;align-items:center;gap:9px;padding:9px 11px;white-space:nowrap;background:rgba(255,255,255,.97);border-radius:18px;box-shadow:0 0 0 1px var(--line2),0 10px 24px -12px rgba(22,19,61,.28);animation:h8gfloat 6s ease-in-out infinite}
  .h8g__c[data-pin="2"] .h8g__in{animation-delay:-3s}
  .h8g__av,.h8g__cal{width:32px;height:32px;border-radius:50%;flex:none}
  .h8g__cal{border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--line2);display:grid;place-items:center}
  .h8g__cal img{width:18px;height:18px}
  .h8g__in b{display:block;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ink)}
  .h8g__in span{font-size:11px;line-height:1.3;color:var(--body);display:flex;align-items:center;gap:6px}
  .h8g__in em{font-style:normal;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--acc);background:var(--lav);border-radius:6px;padding:1px 6px}
  .h8g__in em svg{width:10px;height:10px;stroke:currentColor}
  .h8g__stem{position:absolute;left:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ind);box-shadow:0 0 0 5px rgba(62,52,249,.18)}
  @keyframes h8gfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .hero7 .h7__gcap{margin-top:-14px}

  /* Variant B (?v_globe=b): a smaller sphere whose whole horizon curve is visible, rising into place */
  html[data-v-globe="b"] .hero7 .h7__globe.h8g{height:360px}
  html[data-v-globe="b"] .hero7 .h7__globe.h8g canvas{width:600px;height:600px;top:24px;animation:h8grise 1.1s var(--ease) both}
  html[data-v-globe="b"] .hero7 .h7__globe.h8g::after{height:120px}
  html[data-v-globe="b"] .h8g__c[data-pin="0"]{display:none}
  @keyframes h8grise{from{opacity:0;transform:translateX(-50%) translateY(70px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
}
@media (prefers-reduced-motion:reduce){.h8g__in,.h8g canvas{animation:none!important}}