/* Match added service sections to the original content grid. The green Vuddy
   experience keeps its independent composition. */
:is(.service-page,.vuddy-product-page) .aio-layout {
  max-width:calc(1680px - 2 * var(--page));
  margin-inline:auto;
}
.page-animation .a-works > :is(.service-composition,.s-section-top) {
  max-width:calc(1680px - 2 * var(--page));
}
@media(min-width:1101px) {
  :is(.service-page,.vuddy-product-page) :is(.aio-layout,.v-faq.v-section) {
    grid-template-columns:minmax(310px,.78fr) minmax(0,1.6fr);
    column-gap:clamp(42px,5.2vw,88px);
  }

  /* Keep each use case's story beside its interactive illustration. */
  #use-cases .service-content .v-use-panel {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px;
    padding:clamp(22px,2vw,34px);
    align-items:center;
  }
  #use-cases .v-use-copy {order:1;min-width:0;gap:12px}
  #use-cases .v-use-index {font-size:36px;flex-shrink:0}
  #use-cases .v-use-copy > div {min-width:0;padding-top:0}
  #use-cases .v-use-copy .v-step {font-size:11px;letter-spacing:.04em}
  #use-cases .v-use-copy h3 {font-size:clamp(23px,1.8vw,30px);line-height:1.5;margin-bottom:18px}
  #use-cases .v-use-copy p:not(.v-step) {font-size:15px;line-height:1.9;max-width:none}
  #use-cases .v-scenario-path {margin-top:20px}
  #use-cases .v-scenario-path li {gap:10px;padding:12px 0}
  #use-cases .v-use-copy .v-scenario-path p {font-size:14px}
  #use-cases .v-use-copy .v-text-link {font-size:14px;margin-top:24px;gap:12px}
  #use-cases .v-use-illustration {order:2;min-width:0;padding:22px 0 128px 0}
  #use-cases .v-use-picture {min-height:0;aspect-ratio:16/9}
  #use-cases .v-use-question {grid-template-columns:1fr;gap:8px}
  #use-cases .v-use-question > strong {font-size:14px;line-height:1.6}
  #use-cases .v-use-question > button {font-size:14px;min-height:48px}
  #use-cases .v-use-tag {right:0;bottom:0;width:100px;height:100px;padding:16px;text-align:center;font-size:12px}
  #use-cases .v-use-panel.has-outcome .v-use-picture {aspect-ratio:auto}
  #use-cases .v-use-panel.has-outcome .v-use-outcome {padding:16px;gap:10px}
  #use-cases .v-use-panel.has-outcome .v-use-outcome h4 {font-size:22px}
  #use-cases .v-use-panel.has-outcome .v-use-outcome > p,
  #use-cases .v-use-panel.has-outcome .v-outcome-next > strong {font-size:15px}
}
@media(min-width:1101px) and (max-width:1300px) {
  :is(.service-page,.vuddy-product-page) :is(.aio-layout,.v-faq.v-section) {
    grid-template-columns:350px minmax(0,1fr);
    column-gap:32px;
  }
  #use-cases .service-content .v-use-panel {gap:18px;padding:22px}
  #use-cases .v-use-copy {display:block}
  #use-cases .v-use-index {display:block;margin-bottom:12px}
  #use-cases .v-use-copy h3 {font-size:23px}
}