/* DE Gradient Feature. Figma 2000:133532.
   The root is the 12px gradient frame and the size container; .de26-gf__inner holds the layout, because
   an element cannot be the subject of its own container query. Responsive rules follow the widget's
   column (container width), not the viewport. Figma frame padding is measured inside the stroke (text width 239 in a 353px Mini CTA = 353 - 2 x (45 + 12)), so paddings here are the Figma values unchanged. */
[data-de26].de26-gf {
  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 12px solid transparent;
  border-radius: 100px 0 0 0;
  background: linear-gradient(var(--de26-white), var(--de26-white)) padding-box, var(--de26-gradient-frame) border-box;
  font-family: var(--de26-font-body);
  color: var(--de26-space);
}
[data-de26] .de26-gf__inner { box-sizing: border-box; min-width: 0; }
[data-de26] .de26-gf__title { margin: 0; font-family: inherit; font-weight: 700; line-height: 1.2; color: var(--de26-space); }
[data-de26] .de26-gf__body,
[data-de26] .de26-gf__subtitle { margin: 0; font-weight: 700; line-height: 1.2; }
[data-de26] .de26-gf__actions { display: flex; flex-wrap: wrap; gap: 16px; }
[data-de26] .de26-gf__image,
[data-de26] .de26-gf__logo { display: block; max-width: none; margin: 0; border: 0; }

/* Mini CTAs: Figma 353x464, centered column. */
[data-de26].de26-gf--mini-cta-1 .de26-gf__inner,
[data-de26].de26-gf--mini-cta-2 .de26-gf__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; min-height: 440px; padding: 47px 45px; text-align: center; }
[data-de26].de26-gf--mini-cta-1 .de26-gf__logo { width: 95px; height: 80px; object-fit: contain; }
[data-de26].de26-gf--mini-cta-2 .de26-gf__title { font-size: 28px; color: var(--de26-azure); }
[data-de26].de26-gf--mini-cta-1 .de26-gf__body,
[data-de26].de26-gf--mini-cta-2 .de26-gf__body { font-size: 18px; }
[data-de26].de26-gf--mini-cta-1 .de26-gf__actions,
[data-de26].de26-gf--mini-cta-2 .de26-gf__actions { justify-content: center; }

/* Featured CTA: Figma 1200x383 frame; the 336x410 cutout stands on the frame floor and rises 39px above the frame
   (51px above the padding box), which the root margin-top reserves. */
[data-de26].de26-gf--featured-cta { margin-top: 39px; }
[data-de26].de26-gf--featured-cta .de26-gf__inner { display: grid; grid-template-columns: 435px minmax(0, 1fr); align-items: center; min-height: 359px; }
[data-de26].de26-gf--featured-cta .de26-gf__image { align-self: end; width: 336px; height: 410px; margin: -51px 0 0 99px; object-fit: contain; object-position: bottom; }
[data-de26].de26-gf--featured-cta .de26-gf__content { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 40px clamp(60px, 11.7cqw, 138px) 40px 42px; text-align: center; }
[data-de26].de26-gf--featured-cta .de26-gf__title { font-size: 43px; }
[data-de26].de26-gf--featured-cta .de26-gf__actions { justify-content: center; }
[data-de26] .de26-gf__note { margin: -15px 0 0; font-size: 18px; font-weight: 400; line-height: 1; color: var(--de26-space); }
/* The underline stays visible so the link is not told apart by color alone (WCAG 1.4.1); hover and focus ease its color and weight. */
[data-de26] .de26-gf__note-link { font-weight: 700; color: var(--de26-space); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--de26-transition-default), text-decoration-thickness var(--de26-transition-default); }
[data-de26] a.de26-gf__note-link:hover,
[data-de26] a.de26-gf__note-link:focus-visible { color: var(--de26-hyperlink); text-decoration-thickness: 2px; }

/* Featured Resource: Figma 1200x570. */
[data-de26].de26-gf--featured-resource .de26-gf__inner { display: grid; grid-template-columns: 469px minmax(0, 1fr); gap: 30px; align-items: center; padding: 18px 70px 18px 20px; }
[data-de26].de26-gf--featured-resource .de26-gf__media { padding: 63px 0 0 70px; }
[data-de26].de26-gf--featured-resource .de26-gf__image { width: 399px; height: 447px; max-width: 100%; object-fit: contain; }
[data-de26].de26-gf--featured-resource .de26-gf__content { display: flex; flex-direction: column; gap: 10px; }
[data-de26].de26-gf--featured-resource .de26-gf__title { font-size: 43px; }
[data-de26].de26-gf--featured-resource .de26-gf__subtitle { font-size: 20px; }
[data-de26].de26-gf--featured-resource .de26-gf__body { font-size: 18px; font-weight: 400; line-height: 1.4; }
[data-de26].de26-gf--featured-resource .de26-gf__actions { margin-top: 20px; }

/* Without an image the content spans the whole row instead of leaving an empty first column. */
[data-de26].de26-gf--no-image .de26-gf__content { grid-column: 1 / -1; }
[data-de26].de26-gf--featured-cta.de26-gf--no-image .de26-gf__inner { min-height: 0; }
[data-de26].de26-gf--featured-cta.de26-gf--no-image { margin-top: 0; }
[data-de26].de26-gf--featured-cta.de26-gf--no-image .de26-gf__content { padding: 40px 60px; }

/* Quotes: Figma Quote Wide 1200x460, Quote Narrow 590x434. */
[data-de26] .de26-gf__figure { margin: 0; }
[data-de26] .de26-gf__quote { margin: 0; padding: 0; border: 0; }
[data-de26] .de26-gf__quote p { margin: 0; color: var(--de26-space); }
[data-de26] .de26-gf__quote p::before { content: "\201C"; }
[data-de26] .de26-gf__quote p::after { content: "\201D"; }
[data-de26] .de26-gf__cite { display: flex; flex-direction: column; gap: 10px; }
[data-de26] .de26-gf__name { font-size: 35px; font-weight: 700; line-height: 1.2; }
[data-de26] .de26-gf__name::before { content: "\2013"; }
[data-de26] .de26-gf__role { padding: 0 22px; font-size: 20px; font-weight: 400; line-height: 1.2; }
[data-de26].de26-gf--quote-wide .de26-gf__inner { padding: 70px 92px; }
[data-de26].de26-gf--quote-wide .de26-gf__figure { display: flex; flex-direction: column; align-items: flex-end; gap: 26px; }
/* The quote spans the row (left-aligned text, however short); only the citation sits at the right. */
[data-de26].de26-gf--quote-wide .de26-gf__quote { align-self: stretch; }
[data-de26].de26-gf--quote-wide .de26-gf__quote p { font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.3px; }
[data-de26].de26-gf--quote-wide .de26-gf__cite { width: min(494px, 100%); }
[data-de26].de26-gf--quote-narrow .de26-gf__inner { padding: 70px; }
[data-de26].de26-gf--quote-narrow .de26-gf__figure { display: flex; flex-direction: column; gap: 30px; }
[data-de26].de26-gf--quote-narrow .de26-gf__quote p { font-size: 20px; font-weight: 400; line-height: 1.4; }
[data-de26].de26-gf--quote-narrow .de26-gf__cite { padding-left: 70px; }

/* Narrow columns. Each variant stacks or tightens where its own design runs out of room: the two-column
   features below 1000px, Quote Wide below 768px, Quote Narrow (designed for 590px) below 480px. */
@container (max-width: 999px) {
  [data-de26].de26-gf--featured-cta .de26-gf__inner,
  [data-de26].de26-gf--featured-resource .de26-gf__inner { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  [data-de26].de26-gf--featured-cta .de26-gf__inner { align-items: start; }
  [data-de26].de26-gf--featured-cta .de26-gf__image { align-self: center; width: 200px; height: auto; margin: -40px auto 0; }
  [data-de26].de26-gf--featured-cta .de26-gf__content { padding: 20px 0; }
  [data-de26].de26-gf--featured-cta .de26-gf__title,
  [data-de26].de26-gf--featured-resource .de26-gf__title { font-size: 32px; }
  [data-de26].de26-gf--featured-resource .de26-gf__media { padding: 0; }
}
@container (max-width: 767px) {
  [data-de26].de26-gf--quote-wide .de26-gf__inner { padding: 40px 32px; }
  [data-de26].de26-gf--quote-wide .de26-gf__quote p { font-size: 22px; }
}
@container (max-width: 479px) {
  [data-de26].de26-gf--quote-narrow .de26-gf__inner { padding: 40px 32px; }
  [data-de26].de26-gf--quote-narrow .de26-gf__cite { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-de26] .de26-gf__note-link { transition: none; }
}