/* Keep the illustration inside its column at the tablet-to-desktop transition. */
@media (min-width: 1367px) {
  .v4 .hero .activity-scene.agenda-illustration { max-width: 100%; }
}

/* On tablets, give the heading its own row instead of shrinking it into a column. */
@media (min-width: 761px) and (max-width: 1366px) {
  .v4 .hero .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-rows: auto auto auto auto;
    gap: 0 34px;
    align-items: start;
  }

  .v4 .hero .copy { display: contents; }

  .v4 .hero .audience {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: none;
    margin: 0 0 21px;
    font-size: 12px;
  }

  .v4 .hero h1 {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0 0 34px !important;
  }

  .v4 .hero h1 .headline-context { font-size: 32px; }
  .v4 .hero h1 .headline-promise { font-size: 48px; }
  .v4 .hero h1 .headline-line + .headline-line { margin-top: 8px; }

  .v4 .hero .hero-benefits {
    grid-column: 1;
    grid-row: 3;
    gap: 21px;
    max-width: 44ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
  }

  .v4 .hero .hero-benefits li { padding-left: 21px; }
  .v4 .hero .hero-benefits strong { display: block; margin-bottom: 3px; }
  .v4 .hero .hero-benefits li::before { width: 5px; height: 5px; }

  .v4 .hero .activity-scene.agenda-illustration {
    grid-column: 2;
    grid-row: 3 / 5;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0;
    transform: none;
  }

  .v4 .hero .agenda-illustration .agenda-art { transform: none; }

  .v4 .hero .actions {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px 21px;
    width: 100%;
    max-width: none;
    margin-top: 26px !important;
  }

  .v4 .hero .actions .primary {
    width: auto;
    min-height: 51px;
    padding: 13px 21px;
    font-size: 14px;
  }

  .v4 .hero .actions .secondary {
    width: auto;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
  }

  .v4 .hero .actions .secondary::after { display: none; }
  .v4 .hero { padding-top: 34px; padding-bottom: 55px; }
}

/* Keep the source context and offer scope readable alongside the new copy. */
.lp-system .lp-evidence-copy > .lp-caption { font-size: 13px; line-height: 1.6; }
.lp-follow-grid + .lp-caption { margin-top: 21px; }

@media (max-width: 380px) {
  .v4 .hero h1 .headline-context {
    white-space: normal !important;
    font-size: 18px !important;
  }
}

.hero-tagline { font-size: 20px; line-height: 1.55; color: var(--ink); margin: 0 0 24px; max-width: 44ch; }
@media (min-width: 761px) and (max-width: 1366px) {
  .v4 .hero .hero-support { grid-column: 1; grid-row: 3; min-width: 0; }
}
@media (max-width: 760px) {
  .hero-tagline { font-size: 18px; }
}