/* One viewport for service-page heroes. Phone layouts remain content-height.
   Enabled only after the artwork stage is initialized, so no-JS stays readable. */
.snk-hero-stage, .snk-hero-stage-frame { display: contents; }

@media (min-width: 721px) {
  body.inner-page-v2.has-viewport-hero .inner-hero {
    box-sizing: border-box;
    height: 100dvh;
    min-height: 100dvh;
    padding: clamp(96px, 11.5svh, 144px) 0 clamp(68px, 8.4svh, 108px);
  }
  body.inner-page-v2.has-viewport-hero .inner-hero > .shell:is(.inner-hero-grid, .inner-hero-layout) {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    align-items: center;
    gap: clamp(28px, 4vw, 64px) !important;
    height: 100%;
    min-height: 0 !important;
  }
  body.inner-page-v2.has-viewport-hero .inner-hero-copy { width: 100%; max-width: none; min-width: 0; }
  body.inner-page-v2.has-viewport-hero .inner-hero h1 {
    margin: 0;
    font-size: clamp(34px, min(4.9vw, 7.5svh), 80px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.05em !important;
  }
  body.inner-page-v2.has-viewport-hero.page-dongming-ai .inner-hero h1 { font-size: clamp(30px, min(4.2vw, 7svh), 68px) !important; }
  body.inner-page-v2.has-viewport-hero .inner-hero .breadcrumbs { margin: 0 0 16px; }
  body.inner-page-v2.has-viewport-hero .inner-hero .eyebrow { margin: 0 0 clamp(16px, 2.4svh, 26px); }
  body.inner-page-v2.has-viewport-hero .inner-hero-copy > :is(.inner-hero-lede, p:not(.eyebrow):not(.breadcrumbs):not(.says-kicker)) {
    margin-top: clamp(16px, 2.6svh, 28px);
    font-size: clamp(13px, min(1.14vw, 1.95svh), 16px);
    line-height: 1.8;
  }
  body.inner-page-v2.has-viewport-hero .inner-hero :is(.hero-actions, .inner-hero-actions) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(18px, 3svh, 30px);
  }
  body.inner-page-v2.has-viewport-hero .inner-hero :is(.hero-actions, .inner-hero-actions) .button {
    width: auto;
    min-height: 48px;
    min-width: 0;
    padding-inline: clamp(16px, 1.7vw, 26px);
    gap: 18px;
  }
  body.inner-page-v2.has-viewport-hero .inner-hero > .inner-scroll-cue {
    position: absolute;
    inset: auto auto 18px 50%;
    display: flex;
    width: max-content;
    margin: 0;
    transform: translateX(-50%);
  }
  body.inner-page-v2.has-viewport-hero .inner-hero > .inner-scroll-cue:hover { transform: translate(-50%, -3px); }
  body.inner-page-v2.has-viewport-hero .agent-hero-proof { margin-top: clamp(18px, 3svh, 30px); }
  body.inner-page-v2.has-viewport-hero .agent-hero-proof li { padding: 0; }

  /* Reserve a real grid cell, then fit only the illustration into that cell.
     Its own entrance/replay transforms remain on the original element. */
  .has-viewport-hero .snk-hero-stage { position: relative; display: block; align-self: stretch; min-width: 0; min-height: 0; }
  .has-viewport-hero .snk-hero-stage-frame { position: absolute; display: flow-root; transform-origin: 0 0; }
  body.inner-page-v2 .snk-hero-stage :is(.wz-assembly, .ai-bracket-scene, .snk-sim--hero, .photo-wrap) {
    width: 100%; max-width: none; margin: 0; justify-self: auto;
  }
  body.inner-page-v2 .snk-hero-stage--build .snk-hero-stage-frame { padding: 10px 32px; }
  body.inner-page-v2 .snk-hero-stage--build .wz-assembly { min-height: 530px; }
  body.inner-page-v2 .snk-hero-stage--answer .ai-bracket-scene { min-height: 506px; }
  body.inner-page-v2 .snk-hero-stage--founder .photo-wrap { display: block; height: 520px; min-height: 0; overflow: hidden; }
  body.inner-page-v2 .snk-hero-stage--founder .portrait { position: absolute; inset: auto 0 0 auto; width: auto; max-width: none; height: 100%; }
  body.inner-page-v2 .snk-hero-stage--founder .talk { position: absolute; inset: 12% auto auto 0; width: 47%; min-height: 0; }
  body.inner-page-v2.has-viewport-hero .about-hero-says h1 { font-size: clamp(30px, min(3.25vw, 5.8svh), 48px) !important; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-kicker { margin-bottom: 18px !important; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-bio { margin: 20px 0 16px; padding: 0; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-creds { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 22px; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-creds article { min-width: 0; }
}

/* Compact laptop artwork keeps its own proportions before being fitted. */
@media (min-width: 981px) and (max-width: 1180px) {
  body.inner-page-v2 .snk-hero-stage--build .wz-assembly { min-height: 500px; }
  body.inner-page-v2 .snk-hero-stage--build .wz-assembly-browser { width: calc(100% - 39px); height: 330px; }
  body.inner-page-v2 .snk-hero-stage--build .wz-assembly-blueprint { height: 316px; }
  body.inner-page-v2 .snk-hero-stage--build .wz-assembly-mobile { top: 225px; width: 102px; height: 187px; }
  body.inner-page-v2 .snk-hero-stage--build .wz-assembly-delivery { bottom: 37px; min-width: 280px; }
}

/* Portrait tablets keep readable text above the illustration. */
@media (min-width: 721px) and (max-width: 980px) and (min-height: 821px) {
  body.inner-page-v2.has-viewport-hero .inner-hero > .shell:is(.inner-hero-grid, .inner-hero-layout) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 24px !important;
  }
  body.inner-page-v2.has-viewport-hero .inner-hero h1 { font-size: clamp(32px, 4.7vw, 46px) !important; }
  body.inner-page-v2.has-viewport-hero .inner-hero-copy > :is(.inner-hero-lede, p:not(.eyebrow):not(.breadcrumbs):not(.says-kicker)) { margin-top: 16px; }
  body.inner-page-v2.has-viewport-hero .inner-hero :is(.hero-actions, .inner-hero-actions) { margin-top: 18px; }
  body.inner-page-v2.has-viewport-hero .agent-hero-proof { margin-top: 18px; }
  body.inner-page-v2.has-viewport-hero .snk-hero-stage--founder .photo-wrap { height: 400px; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-bio { margin-top: 14px; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-bio li { padding-block: 5px; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-creds { margin-block: 14px; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-hero-engine { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 12px; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-engine-core { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-engine-core > strong { font-size: 50px; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-engine-core > i { display: none; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-engine-core > div { grid-column: 1 / -1; border-left: 0; padding: 8px 0 0; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-engine-core b { font-size: 26px; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-hero-task { margin: 0; }
  body.inner-page-v2 .snk-hero-stage--agent .dm-hero-task li { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; }
  body.inner-page-v2 .snk-hero-stage--agent .snk-agent-output { grid-column: 1 / -1; margin-top: 0; }
}

/* Short windows: keep actions and evidence visible instead of cropping them. */
@media (min-width: 721px) and (max-height: 720px) {
  body.inner-page-v2.has-viewport-hero .inner-hero { padding-top: 92px; padding-bottom: 64px; }
  body.inner-page-v2.has-viewport-hero .inner-hero h1 { font-size: clamp(28px, min(4.35vw, 6.4svh), 52px) !important; }
  body.inner-page-v2.has-viewport-hero .inner-hero :is(.eyebrow, .breadcrumbs) { margin-bottom: 12px; }
  body.inner-page-v2.has-viewport-hero .inner-hero-copy > :is(.inner-hero-lede, p:not(.eyebrow):not(.breadcrumbs):not(.says-kicker)) { margin-top: 14px; font-size: 13px; line-height: 1.65; }
  body.inner-page-v2.has-viewport-hero .inner-hero :is(.hero-actions, .inner-hero-actions) { margin-top: 16px; }
  body.inner-page-v2.has-viewport-hero .inner-hero :is(.hero-actions, .inner-hero-actions) .button { min-height: 44px; }
  body.inner-page-v2.has-viewport-hero .agent-hero-proof { margin-top: 16px; }
  body.inner-page-v2.has-viewport-hero .agent-hero-proof li { padding-block: 0; }
  body.inner-page-v2.has-viewport-hero .about-hero-says h1 { font-size: clamp(28px, 3vw, 40px) !important; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-bio { margin-block: 12px; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-bio li { font-size: 13px; padding-block: 4px; }
  body.inner-page-v2.has-viewport-hero .about-hero-says .says-creds { margin-block: 12px; }
}