/* One viewport budget: unchanged intro, remaining artwork space to the fold.
   The indicator overlays the bottom of the intro, outside the card area.
   Artwork contains itself in that space; no animated layout or resize polling. */
.proo-open-globe { display: none; }
.proo-static-hero.proo-static-hero--three-card-stage .proo-mobile-video-control { display: none !important; }
.proo-static-hero--open-fade .proo-open-pill-mobile { display: none !important; }
@media (max-width: 600px) {
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] {
    height: var(--proo-hero-viewport-height, 100svh) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    --open-ink: #151516;
    --open-muted: #55555b;
    --open-beta-bg: #dedede;
    --open-beta-ink: #353538;
    --open-service-bg: #e7e5e5;
    --open-service-ink: #57555a;
    --open-image-filter: brightness(0) drop-shadow(0 0 .45px #151516) drop-shadow(0 0 .25px #151516);
    --open-globe-filter: grayscale(1) invert(1) brightness(1.8) contrast(1.5);
    --open-globe-opacity: .70;
    --open-hands-opacity: 1;
    --open-globe-land: #7e7e7e;
    --open-globe-ocean: #484848;
  }
  html[data-hero-theme="dark"] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] {
    --open-ink: #f7f7f5;
    --open-muted: #b8b8bd;
    --open-beta-bg: #444448;
    --open-beta-ink: #f3f3f3;
    --open-service-bg: #2c2c30;
    --open-service-ink: #c8c8cc;
    --open-image-filter: brightness(0) invert(1);
    --open-globe-filter: grayscale(1) invert(1) brightness(2.8) contrast(1.6);
    --open-globe-opacity: .64;
    --open-hands-opacity: .78;
    --open-globe-land: #858585;
    --open-globe-ocean: #343438;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--mobile-story-v4-panel-top) minmax(0, 1fr);
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__copy {
    grid-area: 1 / 1;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__section4-tabs {
    grid-area: auto;
    position: absolute !important;
    top: calc(var(--mobile-story-v4-panel-top) - 24px) !important;
    left: calc(var(--card-content-inset, 1rem) + var(--three-card-mobile-label-offset, .32rem)) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 12;
    align-self: center !important;
    justify-self: center !important;
    width: auto !important;
    height: 32px !important;
    /* Desktop's compact 14px pitch, 5px dots and 14px active pill.
       Keep the full 32px row available for touch rather than 5px-high targets. */
    margin: 0 !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__section4-dot,
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__section4-dot[aria-current="true"] {
    width: 14px !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__section4-dot[aria-current="true"]::before {
    width: 14px;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__section4-dot:first-child {
    /* Pin the painted left edge, not the centre of the changing dot/pill. */
    justify-content: flex-start !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards {
    grid-area: 2 / 1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    touch-action: pan-y pinch-zoom !important;
    cursor: default !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards > .proo-static-hero__slide {
    grid-area: 1 / 1;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang]:not(.is-open-fade-ready) .proo-static-hero__cards > .proo-static-hero__slide:first-child,
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang].is-open-fade-ready .proo-static-hero__cards > .proo-static-hero__slide.is-open-fade-current {
    visibility: visible;
    opacity: 1;
    pointer-events: auto !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards > .proo-static-hero__slide:nth-child(n+2) > .proo-static-hero__card {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    contain: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--open-ink) !important;
  }
  .proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation)::before,
  .proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation)::after {
    content: none !important;
    display: none !important;
  }
  /* The hands card retains its approved dark palette in light mode too.
     Card-local tokens cannot recolour the hero, indicator or globe sibling. */
  html[data-hero-theme="light"] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card--software {
    --hero-bg: #131314;
    --open-ink: #f7f7f5;
    --open-muted: #b8b8bd;
    --open-service-bg: #2c2c30;
    --open-service-ink: #c8c8cc;
    --open-image-filter: brightness(0) invert(1);
    --open-hands-opacity: .78;
    background: var(--hero-bg) !important;
  }
  html[data-hero-theme="light"] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards > .proo-static-hero__slide > .proo-static-hero__card--formation {
    --open-service-bg: #d1d0cf;
    background: #eae9e8 !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__formation-globe {
    position: absolute !important;
    inset: 40px 3% 80px !important;
    width: 94% !important;
    height: auto !important;
    aspect-ratio: auto;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__formation-globe-image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: var(--open-globe-filter) !important;
    opacity: var(--open-globe-opacity) !important;
    transform: none !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .has-open-globe > .proo-static-hero__formation-globe-image {
    display: none !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-open-globe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    background: transparent !important;
    filter: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  .proo-static-hero--open-fade .proo-open-globe__land { fill: var(--open-globe-land); }
  .proo-static-hero--open-fade .proo-open-globe__ocean { fill: var(--open-globe-ocean); }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__hands {
    position: absolute !important;
    inset: 48px 0 72px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important;
    filter: var(--open-image-filter) !important;
    opacity: var(--open-hands-opacity) !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__hand {
    inset: 0 auto 0 -15% !important;
    width: 130% !important;
    /* WordPress/Blocksy caps every img at 100%. Retain the deliberate
       overscan so the source's wrist edge stays beyond the viewport mask. */
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    /* Each source occupies one half of a shared transparent canvas. Offset
       the 5% shrink by 1.25% so its own centre stays in place. */
    transform: rotate(-22deg) translateX(var(--open-hand-shrink-offset)) scale(.95) !important;
    translate: none !important;
    animation: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transition: none !important;
    object-fit: contain !important;
    user-select: none;
    -webkit-user-drag: none;
  }
  .proo-static-hero--open-fade .proo-static-hero__hand--left {
    --open-hand-shrink-offset: -1.25%;
  }
  .proo-static-hero--open-fade .proo-static-hero__hand--right {
    --open-hand-shrink-offset: 1.25%;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) .proo-static-hero__card-title {
    color: var(--open-ink) !important;
    -webkit-text-stroke-color: currentColor !important;
    text-shadow: none !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) .proo-static-hero__card-title,
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__mobile-software-label {
    /* 6% larger preferred size; the existing shared fitter may reduce it.
       Reserve the same 40px circle + 12px clearance on all three cards. */
    --mobile-service-title-size: clamp(25.44px, 6.89vw, 38.16px);
    right: calc(var(--mobile-service-title-inset) + 52px) !important;
  }
  .proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card--software, .proo-static-hero__card--formation) :is(.proo-static-hero__card-number, .proo-static-hero__card-beta) {
    color: var(--open-muted) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
  /* One position owner for 01/02/03, overriding the old video-only inset. */
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__card > .proo-static-hero__card-number {
    --open-number-inset: calc(var(--card-content-inset, 1rem) + var(--three-card-mobile-label-offset, .32rem));
    top: var(--open-number-inset) !important;
    left: var(--open-number-inset) !important;
    font-size: .792rem !important; /* .66rem × 1.20, shared by 01/02/03. */
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__slide:first-child .proo-static-hero__card--builder > .proo-static-hero__card-number {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 8;
    color: #f7f7f5 !important;
    text-shadow: 0 1px 3px rgb(0 0 0 / .65);
    pointer-events: none;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__card--software > .proo-static-hero__card-beta {
    display: none !important;
  }
  .proo-static-hero--open-fade[data-lang] .proo-open-pill-desktop {
    display: none !important;
  }
  .proo-static-hero--open-fade[data-lang] .proo-open-pill-mobile {
    display: inline !important;
    font: inherit;
    color: inherit !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__card--software > .proo-static-hero__card-kind {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 8;
  }
  .proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card-kind, .proo-card-info) {
    background: var(--open-ink) !important;
    color: var(--hero-bg) !important;
    border-color: var(--open-ink) !important;
    box-shadow: none !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__card-kind {
    background: var(--open-service-bg) !important;
    color: var(--open-service-ink) !important;
    border-color: var(--open-service-bg) !important;
  }
  .proo-static-hero--open-fade[data-lang] .proo-static-hero__card[role="button"]:focus-visible {
    outline-color: var(--open-ink) !important;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-mobile-video-control {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9;
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-mobile-video-next {
    padding: 0;
    pointer-events: none;
  }
  .proo-static-hero--open-fade .proo-mobile-video-next svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  @keyframes proo-open-caption-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .is-open-fade-current .proo-card-label-ink {
    /* Let the 460ms panel entrance finish before revealing its caption.
       The separate beat makes the new title noticeable without moving it,
       touching the fitted baseline or adding per-frame layout work. */
    animation: proo-open-caption-reveal 600ms ease-in-out 480ms backwards;
  }
}