/* DE Footer CTA. Figma 2271:172295 (No Student 796px tall, With Student 1070px).
   The root is the size container; .de26-footer-cta__inner holds the layout so container queries can target it.
   The Twirl art spans the bottom edge; the lockup sits top-left inside the 1200px column (40px in, as in the Figma page). */
[data-de26].de26-footer-cta {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  font-family: var(--de26-font-body);
  color: var(--de26-space);
  container-type: inline-size;
}
[data-de26] .de26-footer-cta__inner { position: relative; overflow: hidden; box-sizing: border-box; min-height: 796px; padding: 80px 0 0; background: var(--de26-white); }
[data-de26].de26-footer-cta--student .de26-footer-cta__inner { min-height: 1070px; }
[data-de26] .de26-footer-cta__lockup { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 30px; max-width: 542px; margin: 0 0 0 max(24px, calc((100% - 1200px) / 2 + 40px)); }
[data-de26] .de26-footer-cta__heading { margin: 0; font-family: inherit; font-size: 43px; font-weight: 700; line-height: 1.2; color: var(--de26-space); }
[data-de26] .de26-footer-cta__subhead { margin: -20px 0 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
[data-de26] .de26-footer-cta__actions { display: flex; }
/* The art box is 4464x1306 with a transparent margin (about 20% of its height under the ribbon, 3% to 11% beside it). Figma shows
   the ribbon filling the section width, so the art is drawn at 165% of the section width, offset left so the ribbon is centered
   (the ribbon centre sits at 46% of the art: 50% - 0.46 * 165% = -26%), and dropped by the transparent bottom margin
   (0.196 * 0.2926 * 165 = 9.5cqw) so the ribbon rests on the section floor. __inner clips the excess. */
[data-de26] .de26-footer-cta__art { position: absolute; left: -26%; bottom: -9.5cqw; width: 165%; height: auto; max-width: none; margin: 0; border: 0; pointer-events: none; }
[data-de26] .de26-footer-cta__student { position: absolute; right: max(24px, calc((100% - 1200px) / 2)); bottom: 0; z-index: 1; width: min(508px, 40%); height: auto; max-width: none; margin: 0; border: 0; }
/* The lockup column ends 566px in; the student (40% of the section, right aligned) clears it from about 983px, so below 1000px it is hidden. */
@container (max-width: 999px) {
  [data-de26] .de26-footer-cta__student { display: none; }
  [data-de26].de26-footer-cta--student .de26-footer-cta__inner { min-height: 796px; }
}
@container (max-width: 767px) {
  [data-de26] .de26-footer-cta__inner,
  [data-de26].de26-footer-cta--student .de26-footer-cta__inner { min-height: 520px; padding-top: 48px; }
  [data-de26] .de26-footer-cta__lockup { max-width: none; margin: 0 24px; }
  [data-de26] .de26-footer-cta__heading { font-size: 32px; }
  [data-de26] .de26-footer-cta__student { display: none; }
  /* Narrow: a fixed 220px band cropped with object-fit so the ribbon is more than a sliver; the ribbon centre stays visible. */
  [data-de26] .de26-footer-cta__art { left: 0; bottom: -44px; width: 100%; height: 220px; object-fit: cover; object-position: 46% 50%; }
}