/* v18 - mobile hero reading order. No changes to desktop hero or artwork. */
/* Keep the original wide-screen site layout. */
@media screen and (max-width: 899px) {
  .cy-hero .cy-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  /* Unwrap only the copy box visually, so its children can surround Violet. */
  .cy-hero .cy-hero-copy { display: contents !important; }
  .cy-hero .cy-hero-copy > #cy-hero-title {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 0.7rem !important;
  }
  .cy-hero .cy-hero-copy > .cy-hero-lead {
    order: 2 !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  .cy-hero .cy-hero-visual {
    order: 3 !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: clamp(250px, 76vw, 400px) !important;
    max-height: 400px !important;
    margin: 0 auto 0.4rem !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .cy-hero .cy-hero-visual > img {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: min(100%, 420px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }
  .cy-hero .cy-hero-visual .cy-hero-signal,
  .cy-hero .cy-hero-visual .cy-visual-orbit { display: none !important; }
  .cy-hero .cy-hero-copy > .cy-hero-actions {
    order: 4 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin: 0.35rem 0 0 !important;
  }
  .cy-hero .cy-hero-copy > .cy-hero-footnote {
    order: 5 !important;
    width: 100% !important;
    margin: 0.85rem 0 0 !important;
  }
}
@media screen and (max-width: 520px) {
  .cy-hero .cy-hero-copy > .cy-hero-actions { flex-direction: column !important; }
  .cy-hero .cy-hero-copy > .cy-hero-actions > a {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}