/* Native touch/keyboard exploration; the desktop benefits layout stays intact. */
@media (max-width: 760px) {
  #good-work { --benefit-gutter: 24px; }
  #good-work .mc-benefit-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 360px);
    gap: 16px;
    width: calc(100% + var(--benefit-gutter) * 2);
    margin-inline: calc(var(--benefit-gutter) * -1);
    padding: 0 var(--benefit-gutter) 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--benefit-gutter);
    scrollbar-width: thin;
    scrollbar-color: #ffffff80 transparent;
  }
  #good-work .mc-benefit-grid:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 6px;
  }
  #good-work .mc-benefit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 26px 26px 30px;
    scroll-snap-align: start;
  }
  #good-work .mc-benefit-art {
    flex: 0 0 170px;
    height: 170px;
    width: 100%;
    max-width: 290px;
    margin: 0 auto 24px;
    transform: none;
  }
  #good-work .mc-benefit h3 {
    align-self: auto;
    font-size: 27px;
    line-height: 1.18;
  }
  #good-work .mc-benefit > p {
    align-self: auto;
    max-width: none;
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.7;
  }
  #good-work .mc-lower-inner::after {
    content: "Swipe to explore  →";
    display: block;
    margin-top: 12px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    opacity: .85;
  }
}

@media (max-width: 480px) {
  #good-work { --benefit-gutter: 22px; }
}

/* Each new section slides over the previous one using browser-native sticky
   positioning. This wrapper must remain free of overflow/transform ancestors. */
:root { --site-stack-gap: 0px; }
.mc-scroll-stack {
  --stack-header: calc(var(--site-header-height, 58px) + var(--site-stack-gap));
  position: relative;
  isolation: isolate;
  background: #2563eb;
}
.mc-scroll-stack > .mc-stack-panel {
  --stack-order: 0;
  position: sticky;
  top: var(--stack-top, var(--stack-slot, var(--stack-header)));
  z-index: calc(var(--stack-order) + 1);
  min-height: calc(100svh - var(--stack-slot, var(--stack-header)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -10px 32px #0a0a0a14;
}
/* A scene remains a tall normal-flow runway. Its nested stage pins first;
   the whole runway then pins at its end as the next card slides over it. */
.mc-stack-marker { height: 0; width: 0; pointer-events: none; }
.mc-scroll-stack > .mc-stack-panel.scene {
  display: block;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
#ai.mc-stack-panel, #advertising.mc-stack-panel { background: transparent; }
.mc-scroll-stack > .mc-stack-panel.scene > .stage {
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -10px 32px #0a0a0a14;
}
body:not(.reading) .mc-scroll-stack > #ai.mc-stack-panel > .stage,
body:not(.reading) .mc-scroll-stack > #advertising.mc-stack-panel > .stage {
  top: var(--stack-slot, var(--stack-header));
  height: calc(100svh - var(--stack-slot, var(--stack-header)));
}

@media (max-width: 800px) {
  .mc-scroll-stack > .mc-stack-panel,
  .mc-scroll-stack > .mc-stack-panel.scene > .stage { border-radius: 26px 26px 0 0; }
  .mc-scroll-stack > .mc-stack-panel[data-nav-joined],
  .mc-scroll-stack > .mc-stack-panel.scene > .stage[data-nav-joined] {
    border-radius: 0;
    box-shadow: none;
  }
}

/* Keep the complete chat and chapter controls inside the shorter sticky card.
   The chat itself can still scroll when a response needs more room. */
@media (max-width: 540px) and (max-height: 800px) {
  body:not(.reading) #ai .chat-viewport {
    height: calc(clamp(200px, calc(100svh - 400px), 280px) - var(--site-stack-gap) - 20px);
  }
}
@media (max-width: 540px) and (min-height: 801px) {
  body:not(.reading) #ai .chat-viewport {
    height: calc(clamp(280px, calc(100svh - 490px), 420px) - var(--site-stack-gap));
  }
}
@media (max-width: 540px) and (min-height: 801px) and (max-height: 900px) {
  body:not(.reading) #ai .chat-viewport {
    /* Reserve the scene footer's space beneath the chapter controls. */
    height: calc(clamp(280px, calc(100svh - 490px), 420px) - var(--site-stack-gap) - 32px);
  }
}
@media (max-width: 600px) and (max-height: 800px) {
  body:not(.reading) #advertising .campaign-network {
    /* Scale the whole portrait map, preserving every icon and connection while
       reserving the header gap and a clear inset below the chapter controls. */
    max-width: min(100%, 310px, calc((100svh - 356px - var(--site-stack-gap)) * .88636));
  }
}

/* The same content remains in normal document flow in the still view. */
body.reading .mc-scroll-stack > .mc-stack-panel {
  position: relative;
  top: auto;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .mc-scroll-stack > .mc-stack-panel {
    position: relative;
    top: auto;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

body.reading .mc-scroll-stack > .mc-stack-panel.scene > .stage {
  position: relative;
  top: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .mc-scroll-stack > .mc-stack-panel.scene > .stage {
    position: relative;
    top: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
}