/* Isolated phone experiment. The full-height semantic card still owns its
   caption, chooser and fade. Only its painted artwork surface is shorter.
   Intro positioning is CSS-only: equal free space above and below.
   No additional video, observer, measurement or motion loop. */
@media (max-width: 600px) {
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] {
    /* Keep the existing caption/circle spacing at the viewport bottom. */
    --inset-footer-gap: calc(var(--mobile-service-title-inset) * .8);
    /* Current text measure * 1.05 equals the existing usable-width cap. */
    --mobile-intro-growth-room: .05;
    --mobile-intro-css-position: 1;
    --inset-artwork-side: 5px;
    --inset-artwork-radius: 14px;
    /* Circle bottom = reduced gap. Leave the same gap above it. */
    --inset-artwork-footer: calc(40px + 2 * var(--inset-footer-gap));
    /* Centre the optical letter body on the 40px circle, not its bottom.
       The existing font/resize fitter reads this phone-only opt-in. */
    --proo-card-label-center-offset: 20px;
    --inset-footer-ink: #151516;
    --inset-footer-circle-ink: #f7f7f5;
    height: var(--proo-hero-viewport-height, 100svh) !important;
    min-height: 0 !important;
  }
  html[data-hero-theme="dark"] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] {
    --inset-footer-ink: #f7f7f5;
    --inset-footer-circle-ink: #131314;
  }
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__inner {
    /* Footer/card own the bottom row; all remaining height belongs to intro. */
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100% !important;
  }
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards {
    height: auto !important;
    align-self: start !important;
  }
  /* A square is the maximum. Reuse the existing text-fit guard's required
     intro height to shorten artwork on short screens, preserving the footer.
     No new measurements, observers or animation loops. */
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__cards::before {
    content: "";
    display: block;
    grid-area: 1 / 1;
    width: calc(100% - 2 * var(--inset-artwork-side));
    aspect-ratio: 1;
    max-height: max(0px, calc(var(--proo-hero-viewport-height, 100svh) - var(--mobile-intro-required-height, 140px) - var(--inset-artwork-footer)));
    margin: 0 var(--inset-artwork-side) var(--inset-artwork-footer);
    pointer-events: none;
  }
  /* Center the natural text group in the actual remaining first row. Freed
     artwork height is shared equally above and below this group. */
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__copy {
    grid-area: 1 / 1;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--mobile-story-v4-panel-top) !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
    align-self: center !important;
    transform: none !important;
    translate: none !important;
  }
  /* Retain approved Greek mobile leading. V4's narrower H1 width naturally
     reduces its font size/height; do not compensate with extra line-height. */
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang="el"] .proo-static-hero__copy > .proo-static-hero__title {
    line-height: 1.2825 !important;
  }
  /* Noto's visible letters start lower within their line boxes than Junicode's.
     Lift only the painted H1 lines by a font-relative optical offset. Preserve
     the H1 box so the existing intro/card fitter and 50/50 centering are unchanged. */
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang="el"] .proo-static-hero__copy > .proo-static-hero__title > span {
    translate: 0 -.16em;
  }
  /* A barely perceptible increase from 1.25, only for the Greek intro copy. */
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang="el"] .proo-static-hero__copy > .proo-static-hero__subtitle {
    line-height: 1.28 !important;
  }
  html[data-hero-theme] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card-title, .proo-static-hero__mobile-software-label, .proo-card-info) {
    bottom: var(--inset-footer-gap) !important;
  }
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__section4-tabs {
    /* Place the 32px hit row at the intro's end, shifted 8px down: its top
       remains 24px above the card even as the available intro height changes. */
    grid-area: 1 / 1;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    align-self: end !important;
    justify-self: start !important;
    translate: 0 8px !important;
  }
  /* Metadata is positioned in the full-width card, but the painted artwork
     starts 5px inward. Match each top gap to its actual painted side gap. */
  html .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 {
    top: calc(var(--open-number-inset) - var(--inset-artwork-side)) !important;
  }
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__card > .proo-static-hero__card-kind {
    top: calc(var(--card-content-inset, 20px) - var(--inset-artwork-side)) !important;
  }
  /* Preserve the full-height containing block used by the shared ink fitter.
     Card-local palettes still colour the metadata and artwork, not the footer. */
  html[data-hero-theme] .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 {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html[data-hero-theme] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__card::after {
    content: none !important;
    display: none !important;
  }
  html[data-hero-theme] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 var(--inset-artwork-side) var(--inset-artwork-footer) !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: var(--inset-artwork-radius) !important;
    background: #131314 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    mask: none !important;
    z-index: 0 !important;
    pointer-events: none !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__card--formation::before {
    background: #e2e1e0 !important;
  }
  html[data-hero-theme] .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__responsive-mark {
    inset: 0 var(--inset-artwork-side) var(--inset-artwork-footer) !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--inset-artwork-radius) !important;
    overflow: hidden !important;
  }
  /* Resize the existing artwork regions, keeping each image's own scale and
     transform untouched. The globe remains contained rather than cropped. */
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__hands {
    inset: 48px var(--inset-artwork-side) calc(var(--inset-artwork-footer) + 8px) !important;
    width: auto !important;
  }
  html .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-static-hero__formation-globe {
    /* Equal top/bottom reserves within the painted card. Same total 48px
       reserve as before, so centring alone does not change the globe size. */
    inset: 24px calc(3% + var(--inset-artwork-side)) calc(var(--inset-artwork-footer) + 24px) !important;
    width: auto !important;
  }
  html[data-hero-theme] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card-title, .proo-static-hero__mobile-software-label) {
    /* Match Custom Software's existing softness. Keep this on the outer
       caption so the independent inner-ink fade continues from 0 to 1. */
    opacity: .82 !important;
  }
  html[data-hero-theme] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] :is(.proo-static-hero__card-title, .proo-static-hero__mobile-software-label),
  html[data-hero-theme] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-card-label-ink {
    /* The video label's inner span has its own white colour rule. Override
       the painted ink too; changing only its parent cannot recolour it. */
    color: var(--inset-footer-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke-color: currentColor !important;
    text-shadow: none !important;
  }
  html[data-hero-theme] .proo-static-hero.proo-static-hero--three-card-stage.proo-static-hero--open-fade[data-lang] .proo-card-info {
    /* A single circle box for the pre-rendered arrow and injected info cues.
       Keep identical geometry before/after the chooser initializes. */
    position: absolute !important;
    top: auto !important;
    right: var(--mobile-service-title-inset) !important;
    bottom: var(--inset-footer-gap) !important;
    width: 40px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    translate: none !important;
    background: var(--inset-footer-ink) !important;
    border-color: var(--inset-footer-ink) !important;
    color: var(--inset-footer-circle-ink) !important;
  }
}