.landing-v9 .landing-globe { position: relative; isolation: isolate; background: transparent; padding: 36px 0; }
.landing-v9 .landing-globe [hidden], .landing-v9 .landing-globe[hidden] { display: none; }
.landing-v9 .landing-globe__intro { padding-inline: 40px; text-align: center; }
.landing-v9 .landing-globe__title { margin: 0; font: 400 64px / 80px var(--font-sans); text-transform: uppercase; }
.landing-v9 .landing-globe__body { margin: 8px 0 0; font: 400 20px / 28px var(--font-sans); }
.landing-v9 .landing-globe__stage { --globe-size: min(560px, 42vw); position: relative; width: calc(100% - 80px); max-width: 1440px; height: var(--globe-size); margin: 12px auto 0; }
.landing-v9 .landing-globe__map { position: absolute; left: 50%; transform: translateX(-50%); width: var(--globe-size); height: var(--globe-size); background: transparent; opacity: 0; }
.landing-v9 .landing-globe[data-globe-state="ready"] .landing-globe__map { opacity: 1; }
.landing-v9 .landing-globe .mapboxgl-canvas { background: transparent; }
.landing-v9 .landing-globe .mapboxgl-canvas:focus-visible { outline: 2px solid var(--color-text); outline-offset: -4px; }
.landing-v9 .landing-globe__connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.landing-v9 .landing-globe__connector { fill: none; stroke: var(--color-text); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity 150ms ease; }
.landing-v9 .landing-globe__connector.is-open { opacity: 1; pointer-events: stroke; }
.landing-v9 .landing-globe__reveal { stroke-dasharray: 1; stroke-dashoffset: 1; }
.landing-v9 .landing-globe__reveal.is-open { stroke-dashoffset: 0; transition: stroke-dashoffset 400ms ease 300ms; }
.landing-v9 .landing-globe__markers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.landing-v9 .landing-globe__pin { position: absolute; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--color-text); cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.landing-v9 .landing-globe__badge { position: absolute; left: calc(12px + var(--label-x)); top: calc(12px + var(--label-y)); transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 32px; border: 1px solid var(--color-text); background: white; font: 400 12px / 14px var(--font-mono); letter-spacing: .06em; z-index: 1; }
.landing-v9 .landing-globe__leader { position: absolute; left: 12px; top: 12px; width: var(--leader-length); height: 1px; transform-origin: left center; transform: rotate(var(--leader-angle)); background: var(--color-text); pointer-events: none; }
.landing-v9 .landing-globe__dot { position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text); }
.landing-v9 .landing-globe__pin.is-selected .landing-globe__badge { background: var(--color-text); color: white; }
.landing-v9 .landing-globe__pin.is-selected .landing-globe__dot { box-shadow: 0 0 0 7px var(--landing-sticker), 0 0 0 8px var(--color-text); }
.landing-v9 .landing-globe__pin.is-compact:not(.is-revealed):not(:focus-visible) :is(.landing-globe__badge, .landing-globe__leader) { visibility: hidden; }
.landing-v9 .landing-globe__pin:is(:hover, :focus-visible) { z-index: 3; }
.landing-v9 .landing-globe__pin:focus-visible { outline: none; }
.landing-v9 .landing-globe__pin:focus-visible .landing-globe__badge { outline: 2px solid var(--color-text); outline-offset: 4px; }
.landing-v9 .landing-globe__cards { position: absolute; top: 0; bottom: 0; width: calc((100% - var(--globe-size)) / 2 - 24px); pointer-events: none; z-index: 3; }
.landing-v9 .landing-globe__cards--left { left: 0; }
.landing-v9 .landing-globe__cards--right { right: 0; }
.landing-v9 .landing-globe__card { position: absolute; top: 4%; height: auto; min-height: 100px; pointer-events: auto; }
.landing-v9 .landing-globe__card[data-slot="1"] { top: 54%; }
.landing-v9 .landing-globe__cards--right .landing-globe__card { top: 14%; }
.landing-v9 .landing-globe__cards--right .landing-globe__card[data-slot="1"] { top: 68%; }
.landing-v9 .landing-globe__footer { padding: 12px 24px 0; text-align: center; }
.landing-v9 .landing-globe__hint { margin: 0; font: 400 15px / 22px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.landing-v9 .landing-globe__example { margin: 8px 0 0; color: var(--color-text-secondary, #54534d); font: 400 13px / 18px var(--font-sans); }
/* Native logo and responsive credit disclosure remain legible and operable. */
.landing-v9 .landing-globe .mapboxgl-ctrl-bottom-left { left: 8px; bottom: 0; }
.landing-v9 .landing-globe .mapboxgl-ctrl-bottom-right { right: 8px; bottom: 0; }
.landing-v9 .landing-globe .mapboxgl-ctrl-attrib { color: #5b5e5b; font-size: 12px; line-height: 20px; }
.landing-v9 .landing-globe .mapboxgl-ctrl-attrib a { color: inherit; }
.landing-v9 .landing-globe .mapboxgl-ctrl-attrib.mapboxgl-compact { background-color: rgba(250, 250, 248, .95); }
@media (max-width: 1199px) and (min-width: 1024px) {
  .landing-v9 .landing-globe__stage { width: calc(100% - 48px); }
  .landing-v9 .landing-globe__cards { width: calc((100% - var(--globe-size)) / 2 - 12px); }
  .landing-v9 .landing-globe__card { padding: 12px; gap: 10px; }
}
@media (max-width: 1023px) {
  .landing-v9 .landing-globe__title { font-size: 48px; line-height: 60px; }
  .landing-v9 .landing-globe__stage { --globe-size: min(560px, calc(100vw - 48px)); width: calc(100% - 48px); height: auto; }
  .landing-v9 .landing-globe__map { position: relative; left: auto; transform: none; margin-inline: auto; }
  .landing-v9 .landing-globe__markers { height: var(--globe-size); }
  .landing-v9 .landing-globe__cards, .landing-v9 .landing-globe__connectors { display: none; }
  .landing-v9 .landing-globe__mobile-card { position: relative; z-index: 3; max-width: 420px; margin-inline: auto; }
  .landing-v9 .landing-globe__mobile-card .landing-globe__card { position: relative; margin-top: 16px; }
}
@media (max-width: 639px) {
  .landing-v9 .landing-globe__intro { padding-inline: 24px; }
  .landing-v9 .landing-globe__title { font-size: 40px; line-height: 48px; }
  .landing-v9 .landing-globe__body { font-size: 18px; line-height: 26px; }
  .landing-v9 .landing-globe__hint { font-size: 12px; line-height: 20px; }
  .landing-v9 .landing-globe .mapboxgl-ctrl-bottom-right { bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v9 .landing-globe :is(.landing-globe__connector, .landing-globe__reveal, .landing-globe__card) { transition: none; animation: none; }
}