/* AIOTOR v10.15.0 — shared visual composition system
   Purpose: consistent heading rhythm and full-frame informative imagery.
   Decorative CSS backgrounds remain free to crop; product screenshots/diagrams do not. */

:root{
  --vs-hero-title-max:76px;
  --vs-section-title-max:60px;
}

/* ---------- Heading composition ---------- */
main h1,
main h2{
  text-wrap:balance;
  word-break:normal;
  overflow-wrap:normal;
}

@media (min-width:1101px){
  :where(
    .growth-hero-grid,
    .iv-hero-grid,
    .app-hero-grid,
    .fs-hero-grid,
    .micro-hero-grid,
    .research-hero-grid,
    .premium-hero-grid,
    .sos-hero-grid,
    .scie-hero-grid,
    .trust-hero-grid,
    .vf-hero-grid
  ){
    grid-template-columns:minmax(0,1.08fr) minmax(460px,.92fr)!important;
    gap:clamp(42px,4.6vw,76px)!important;
  }

  :where(
    .growth-hero h1,
    .iv-copy h1,
    .app-copy h1,
    .fs-copy h1,
    .micro-hero-copy h1,
    .research-hero h1,
    .premium-hero-copy h1,
    .sos-copy h1,
    .scie-hero h1,
    .trust-hero h1,
    .vf-copy h1
  ){
    max-width:18ch!important;
    font-size:clamp(52px,4.6vw,var(--vs-hero-title-max))!important;
    line-height:1.01!important;
    letter-spacing:-.048em!important;
    text-wrap:balance!important;
  }

  .pixeld-topic-hero h1{
    max-width:20ch!important;
    font-size:clamp(52px,4.8vw,78px)!important;
    line-height:1.01!important;
  }

  :where(
    .section-intro,
    .commercial-head,
    .cinematic-caption,
    .home-pixeld-head,
    .showcase-copy,
    .architecture-copy,
    .validation-head,
    .company-statement,
    .contact-panel
  ) h2{
    max-width:21ch!important;
    font-size:clamp(38px,3.55vw,var(--vs-section-title-max))!important;
    line-height:1.045!important;
    letter-spacing:-.042em!important;
    text-wrap:balance!important;
  }

  :where(
    .growth-hero-grid,
    .iv-hero-grid,
    .app-hero-grid,
    .fs-hero-grid,
    .micro-hero-grid,
    .research-hero-grid,
    .premium-hero-grid,
    .sos-hero-grid,
    .scie-hero-grid,
    .trust-hero-grid,
    .vf-hero-grid
  ) > :first-child{
    min-width:0!important;
    max-width:780px!important;
  }
}

/* Homepage hero is art-directed separately. */
.hero-v114 .home-hero-title{
  max-width:900px!important;
}

/* ---------- Full-frame informative media ---------- */
.home-pixeld-visual{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:1400/788!important;
  overflow:hidden;
  background:#070b12;
}
.home-pixeld-visual > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}

.pixeld-fabric-visual .pixel-screen{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1400/788!important;
  overflow:hidden!important;
  background:#070b12;
}
.pixeld-fabric-visual .pixel-screen > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}

.workspace-hero-visual .office-shot{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1500/844!important;
  overflow:hidden!important;
  background:#070b12;
}
.workspace-hero-visual .office-shot > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Cinematic security/research artwork is interface content, not disposable background art. */
.cinematic-stage{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1672/941!important;
  overflow:hidden!important;
  background:#050810;
}
.cinematic-stage > .cinematic-art{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}

.catalog-visual img,
.cinematic-workbench img,
.showcase-image img,
.suite-premium-media img{
  object-fit:contain!important;
  object-position:center center!important;
}

/* ---------- Responsive composition ---------- */
@media (max-width:1100px){
  :where(
    .growth-hero-grid,
    .iv-hero-grid,
    .app-hero-grid,
    .fs-hero-grid,
    .micro-hero-grid,
    .research-hero-grid,
    .premium-hero-grid,
    .sos-hero-grid,
    .scie-hero-grid,
    .trust-hero-grid,
    .vf-hero-grid
  ){
    grid-template-columns:1fr!important;
  }

  main h1,
  main h2{
    max-width:100%!important;
  }

  .cinematic-stage{
    aspect-ratio:16/9!important;
  }
}

@media (max-width:680px){
  :root{
    --vs-hero-title-max:52px;
    --vs-section-title-max:46px;
  }

  :where(
    .growth-hero h1,
    .iv-copy h1,
    .app-copy h1,
    .fs-copy h1,
    .micro-hero-copy h1,
    .research-hero h1,
    .premium-hero-copy h1,
    .sos-copy h1,
    .scie-hero h1,
    .trust-hero h1,
    .vf-copy h1,
    .pixeld-topic-hero h1
  ){
    font-size:clamp(38px,10.8vw,52px)!important;
    line-height:1.02!important;
    letter-spacing:-.042em!important;
  }

  :where(
    .section-intro,
    .commercial-head,
    .cinematic-caption,
    .home-pixeld-head,
    .showcase-copy,
    .architecture-copy,
    .validation-head,
    .company-statement,
    .contact-panel
  ) h2{
    font-size:clamp(32px,8.8vw,46px)!important;
    line-height:1.04!important;
  }

  .home-pixeld-visual,
  .pixeld-fabric-visual .pixel-screen,
  .workspace-hero-visual .office-shot,
  .cinematic-stage{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
}


/* v10.15.0 final alignment refinement */
@media (min-width:1101px){
  :where(
    .growth-hero-grid,
    .iv-hero-grid,
    .app-hero-grid,
    .fs-hero-grid,
    .micro-hero-grid,
    .research-hero-grid,
    .premium-hero-grid,
    .sos-hero-grid,
    .scie-hero-grid,
    .trust-hero-grid,
    .vf-hero-grid
  ){
    grid-template-columns:minmax(0,1.14fr) minmax(400px,.86fr)!important;
    gap:clamp(38px,3.8vw,60px)!important;
  }

  :where(
    .growth-hero h1,
    .iv-copy h1,
    .app-copy h1,
    .fs-copy h1,
    .micro-hero-copy h1,
    .research-hero h1,
    .premium-hero-copy h1,
    .sos-copy h1,
    .scie-hero h1,
    .trust-hero h1,
    .vf-copy h1
  ){
    font-size:clamp(50px,4.3vw,72px)!important;
    max-width:19ch!important;
  }

  :where(
    .two-col,
    .vault-grid,
    .cloud-story-grid,
    .suite-layout,
    .research-feature-grid,
    .kvfes-feature-grid,
    .security-explain-grid
  ){
    grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr)!important;
    gap:clamp(38px,4.5vw,72px)!important;
  }

  :where(
    .two-col,
    .vault-copy,
    .cloud-story-copy,
    .suite-copy,
    .research-copy,
    .kvfes-copy,
    .explain-copy
  ) h2{
    max-width:22ch!important;
    font-size:clamp(38px,3.15vw,54px)!important;
    line-height:1.055!important;
    letter-spacing:-.04em!important;
    text-wrap:balance!important;
  }

  .commercial-head h2{
    max-width:23ch!important;
    font-size:clamp(38px,3.3vw,56px)!important;
  }

  .v9sec-stage-copy{
    width:min(48%,520px)!important;
    max-width:520px!important;
  }
  .v9sec-stage-copy h2{
    font-size:clamp(30px,2.5vw,42px)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
  }
}


/* Long-form hero exceptions: preserve hierarchy without creating 5–7 line walls. */
@media (min-width:1101px){
  .app-hero .app-copy h1,
  .premium-product-hero .premium-hero-copy h1{
    max-width:21ch!important;
    font-size:clamp(50px,4vw,68px)!important;
    line-height:1.02!important;
  }

  .app-hero .app-hero-grid,
  .premium-product-hero .premium-hero-grid{
    grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr)!important;
    gap:clamp(36px,3.6vw,56px)!important;
  }
}


/* Mobile long-title finish */
@media (max-width:680px){
  .app-hero .app-copy h1,
  .pixeld-topic-hero h1{
    font-size:clamp(36px,9.6vw,46px)!important;
    line-height:1.03!important;
  }
}