/* ===================================================================
   Approved sponsor sections: Duration and exclusivity, laid out like
   the approved reference (13 October 2026). Loaded after
   public/zinga-sponsors-approved/approved-sponsors.css.

   The package placed the equipment-and-trophy artwork (the top-right
   813-1660 x 0-535 region of the approved image) inside the centred
   1280px column, so it stopped short of the section's top and right
   edges and showed hard left and bottom edges. Here it sits in the
   section's own top-right corner at the reference's proportions (51% of
   the width), and fades into the background on its left and lower
   edges so the art and the section read as one surface. The copy and
   the three term boxes sit over it, as in the reference; the boxes
   themselves are unchanged.

   The heading follows the reference's display size for this section,
   which overrides the site heading scale in system.css. The selector
   carries the id so it outranks that rule's #book exclusion.
   =================================================================== */
@media (min-width: 601px) {
  .zsa-section.zsa-terms { position: relative; overflow: hidden; isolation: isolate; }
  .zsa-terms .zsa-wrap { position: static; }
  .zsa-terms-art {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 51%;
    margin: 0;
    aspect-ratio: 847 / 535;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 58%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 58%, transparent 100%);
    mask-composite: intersect;
  }
  .zsa-terms-art svg { display: block; width: 100%; height: 100%; }
  /* The intro is as tall as the art (51% of the width at 847:535, less
     the section's top padding), so the boxes start where the art fades,
     as in the reference. */
  .zsa-terms-intro {
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(32.2vw - 44px);
    align-content: center;
  }
  .zsa-terms-intro .zsa-copy { position: relative; z-index: 1; max-width: 50%; padding-bottom: 28px; }
  .zsa-term-grid, .zsa-section .zsa-terms-note { position: relative; z-index: 1; }

  body main #zsa-terms.zsa-terms h2 {
    font-size:var(--ds-title)!important;
    line-height:1.1!important;
    margin-bottom: 22px;
  }
  .zsa-terms-intro p { max-width: 46ch; font-size:1rem; line-height:1.5; }
  .zsa-section .zsa-terms-note { font-size: 15px; }
}

/* Phones: no room beside the copy, so the art stays between the copy
   and the boxes, but runs to the right edge of the screen and fades on
   its other three sides instead of showing a hard-edged box. */
@media (max-width: 600px) {
  .zsa-terms-art {
    width: calc(82% + 18px);
    max-width: none;
    margin: 4px -18px -6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 14%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 14%, #000 70%, transparent 100%);
    mask-composite: intersect;
  }
  .zsa-terms-art svg { display: block; width: 100%; height: auto; }
  .zsa-term-grid { position: relative; z-index: 1; }
}
@media (max-width: 360px) {
  .zsa-terms-art { width: calc(82% + 15px); margin-right: -15px; }
}