/* ===================================================================
 * Bento Grid (v2 — 3 variants)
 * A — Editorial Light  (default; preserves prior live-page behavior)
 * B — Confident Dark Mosaic
 * C — Magazine Mosaic  (asymmetric 12-col)
 *
 * EXTEND from pre-v2: every selector re-scoped under .dl-redesign
 * (specificity ≥0,2,0) to beat the global 0,1,1 typography rules in
 * dl-redesign.css. Body p color set explicitly to var(--color-medium)
 * so the global p-color cascade doesn't silently shift live content.
 *
 * Token contract: --space-1/2/3/4/6/8/10/16/20 only. (5/7/9/11-15/17-19
 * are NOT defined — would silently collapse to empty string.)
 * =================================================================== */

/* ---------- Section root + legacy bg field (Variant A only) ---------- */
.dl-redesign .dl-bento { padding: var(--space-20) 0; position: relative; }

.dl-redesign .dl-bento[data-variant="a"].dl-bento--bg-surface     { background: var(--module-surface, var(--color-surface)); }
.dl-redesign .dl-bento[data-variant="a"].dl-bento--bg-white       { background: var(--module-surface, #ffffff); }
.dl-redesign .dl-bento[data-variant="a"].dl-bento--bg-transparent { background: var(--module-surface, transparent); }

.dl-redesign .dl-bento[data-variant="b"] { background: var(--module-surface, #1F2230); color: rgba(255, 255, 255, 0.92); }
.dl-redesign .dl-bento[data-variant="c"] { background: var(--module-surface, #ffffff); }

/* ---------- Header ---------- */
.dl-redesign .dl-bento__header { max-width: 760px; margin: 0 0 var(--space-10); }
.dl-redesign .dl-bento__title  { margin: 0 0 var(--space-3); color: var(--color-dark); }
.dl-redesign .dl-bento__intro  { font-size: 1.125rem; color: var(--color-medium); margin: 0; }

.dl-redesign .dl-bento[data-variant="b"] .dl-bento__title { color: #ffffff; }
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__intro { color: rgba(255, 255, 255, 0.72); }

/* ---------- Grid ---------- */
.dl-redesign .dl-bento__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

/* Variants A + B: same 1/2/3-col responsive grid with dense flow at desktop */
@media (min-width: 768px) {
  .dl-redesign .dl-bento[data-variant="a"] .dl-bento__grid,
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .dl-redesign .dl-bento[data-variant="a"] .dl-bento__grid,
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }
}

/* Variant C: 12-col asymmetric mosaic at desktop, 2-col at tablet, 1-col mobile */
@media (min-width: 768px) {
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
  }
  /* Grid math: featured(8) + regular(4) = 12 (one regular fits beside featured per row).
     Non-featured rows: three regular(4) cards = 12. `grid-auto-flow: dense` keeps
     things tidy. (7+4=11 leaves a visible col-12 gap — avoid.) */
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__card { grid-column: span 4; }
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured { grid-column: span 8; grid-row: span 2; }
}

/* ---------- Card (default = Variant A baseline) ---------- */
.dl-redesign .dl-bento__card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}
.dl-redesign .dl-bento__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--module-primary, var(--color-primary));
}

/* Explicit body-text color override — prevents the global
   `.dl-redesign p { color: var(--color-medium) }` from silently
   re-coloring card body content (gotcha 2b style regression). */
.dl-redesign .dl-bento__body p,
.dl-redesign .dl-bento__body li { color: var(--color-medium); }
.dl-redesign .dl-bento__body p { margin: 0 0 var(--space-3); }
.dl-redesign .dl-bento__body p:last-child { margin: 0; }

.dl-redesign .dl-bento__icon {
  color: var(--module-primary, var(--color-primary));
  transition: transform 200ms ease, color 200ms ease;
}
.dl-redesign .dl-bento__card:hover .dl-bento__icon {
  transform: scale(1.1);
  color: var(--color-primary-dark);
}
.dl-redesign .dl-bento__overline { color: var(--color-primary-dark); }
.dl-redesign .dl-bento__headline { margin: 0 0 var(--space-2); color: var(--color-dark); }

/* ---------- Featured card (Variant A baseline) ---------- */
.dl-redesign .dl-bento__card--featured {
  background: var(--color-primary-light);
  border: 2px solid var(--module-primary, var(--color-primary));
  padding: var(--space-10);
}
@media (min-width: 1024px) {
  .dl-redesign .dl-bento[data-variant="a"] .dl-bento__card--featured,
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__card--featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.dl-redesign .dl-bento__star-badge {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: var(--module-primary, var(--color-primary));
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-full);
}
@media (max-width: 640px) {
  .dl-redesign .dl-bento__star-badge {
    position: static;
    align-self: flex-start;
    margin-bottom: var(--space-2);
  }
}

.dl-redesign .dl-bento__icon--large {
  color: var(--module-primary, var(--color-primary));
  margin-bottom: var(--space-2);
  display: inline-flex;
}

/* ---------- Warning callout ---------- */
.dl-redesign .dl-bento__warning {
  background: var(--color-warning-light);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.dl-redesign .dl-bento__warning-icon {
  flex: 0 0 auto;
  color: var(--color-warning);
  display: inline-flex;
  margin-top: 2px;
}
.dl-redesign .dl-bento__warning-body p { margin: 0 0 var(--space-3); color: var(--color-dark); }
.dl-redesign .dl-bento__warning-body p:last-child { margin: 0; }

/* ---------- Scope grid (✓ Covered / ✗ Not covered) ---------- */
.dl-redesign .dl-bento__scope {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
@media (min-width: 768px) {
  .dl-redesign .dl-bento__scope {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}
.dl-redesign .dl-bento__scope-col {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dl-redesign .dl-bento__scope-col--covered {
  background: rgba(237, 247, 241, 0.5);
  border: 1px solid var(--color-success-light);
}
.dl-redesign .dl-bento__scope-col--notcov {
  background: #ffffff;
  border: 1px solid var(--color-border);
}
.dl-redesign .dl-bento__scope-head { display: flex; align-items: center; gap: var(--space-3); }
.dl-redesign .dl-bento__scope-icon { flex: 0 0 auto; }
.dl-redesign .dl-bento__scope-col--covered .dl-bento__scope-icon { color: var(--color-success); }
.dl-redesign .dl-bento__scope-col--notcov  .dl-bento__scope-icon { color: var(--color-medium); }
.dl-redesign .dl-bento__scope-label--covered { color: var(--color-success); }
.dl-redesign .dl-bento__scope-label--notcov  { color: var(--color-medium); }
.dl-redesign .dl-bento__scope-body p { margin: 0 0 var(--space-3); color: var(--color-dark); }
.dl-redesign .dl-bento__scope-body p:last-child { margin: 0; }

/* ---------- Loom video tile (default = Variant A) ---------- */
.dl-redesign .dl-bento__video {
  background: var(--color-dark);
  border-radius: var(--radius-xl);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: #ffffff;
  text-decoration: none;
  padding: var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (min-width: 1024px) {
  .dl-redesign .dl-bento[data-variant="a"] .dl-bento__video,
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__video {
    grid-column: span 3;
    aspect-ratio: auto;
    min-height: 240px;
  }
}
.dl-redesign a.dl-bento__video:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.dl-redesign .dl-bento__video-icon  { color: #ffffff; display: inline-flex; position: relative; z-index: 1; }
.dl-redesign .dl-bento__video-label { font-size: 1rem; font-weight: 600; position: relative; z-index: 1; }
.dl-redesign .dl-bento__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--module-cta, var(--color-primary)) 30%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-bento__video::after {
    background: radial-gradient(circle at 30% 50%, rgba(70, 154, 173, 0.25) 0%, transparent 60%);
  }
}

/* =====================================================================
 * VARIANT B — Confident Dark Mosaic
 * ===================================================================== */

.dl-redesign .dl-bento[data-variant="b"] .dl-bento__card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--module-primary, var(--color-primary));
}
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__headline { color: #ffffff; }
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__body p,
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__body li { color: rgba(255, 255, 255, 0.78); }
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__overline { color: var(--module-primary, var(--color-primary)); }
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__icon { color: var(--module-primary, var(--color-primary)); }

/* Featured card with teal→accent gradient ring.
   `isolation: isolate` creates a stacking context so the ::before at z-index -1
   stays above the card's own background but below flow/positioned children. This
   avoids needing a `> *` blanket rule to elevate children — which would also have
   overridden the star badge's `position: absolute` and stretched it full-width. */
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__card--featured {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  padding: var(--space-10);
  position: relative;
  isolation: isolate;
}
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--module-primary, var(--color-primary)),
    var(--module-accent, var(--color-accent-cta)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* mask-composite degradation: pre-Safari-15.4 ignores the composite, leaving
   the ::before as a solid gradient slab covering the card. Hide it instead;
   the card still has its own glass background, just no gradient ring. */
@supports not (mask-composite: exclude) {
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__card--featured::before {
    display: none;
  }
}

/* Star badge becomes a gold-tinted glass pill */
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__star-badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-warning);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 132, 29, 0.4);
}

/* Warning callout — gold tinted glass on dark */
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__warning {
  background: rgba(196, 132, 29, 0.1);
  border-left: 4px solid var(--color-warning);
}
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__warning-body p,
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__warning-body strong { color: rgba(255, 255, 255, 0.92); }

/* Scope cols on B */
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__scope-col--covered {
  background: rgba(45, 134, 89, 0.12);
  border: 1px solid rgba(45, 134, 89, 0.35);
}
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__scope-col--notcov {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__scope-body p { color: rgba(255, 255, 255, 0.82); }
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__scope-label--notcov { color: rgba(255, 255, 255, 0.64); }
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__scope-col--notcov .dl-bento__scope-icon { color: rgba(255, 255, 255, 0.56); }

/* Loom tile inverted on B — becomes the bright element */
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__video {
  background: linear-gradient(135deg,
    var(--module-primary, var(--color-primary)),
    var(--module-accent, var(--color-accent-cta)));
}
.dl-redesign .dl-bento[data-variant="b"] .dl-bento__video::after {
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__video {
    background: linear-gradient(135deg, #469AAD, #0369A1);
  }
}

/* Backdrop-filter fallback for Variant B — dark opaque (NOT the global
   white-0.95 .dl-glass fallback, which would be jarring on a dark slab.
   This module deliberately opts out of .dl-glass on dark elements.) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__card { background: #2a2e3c; }
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__card--featured { background: #303446; }
  .dl-redesign .dl-bento[data-variant="b"] .dl-bento__star-badge { background: rgba(196, 132, 29, 0.25); }
}

/* =====================================================================
 * VARIANT C — Magazine Mosaic (asymmetric 12-col)
 * ===================================================================== */

/* Tonal cards (auto-assigned via data-tone in HubL) */
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card[data-tone="teal"] {
  background: color-mix(in srgb, var(--module-primary, var(--color-primary)) 6%, white);
  border-color: color-mix(in srgb, var(--module-primary, var(--color-primary)) 18%, var(--color-border));
}
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card[data-tone="blue"] {
  background: color-mix(in srgb, var(--module-accent, var(--color-accent-cta)) 6%, white);
  border-color: color-mix(in srgb, var(--module-accent, var(--color-accent-cta)) 18%, var(--color-border));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__card[data-tone="teal"] { background: var(--color-primary-light); }
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__card[data-tone="blue"] { background: #E6F0FA; }
}

/* Variant C featured card = solid teal centerpiece, white text, watermark icon */
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured {
  background: var(--module-primary, var(--color-primary));
  border: 1px solid transparent;
  padding: var(--space-10);
  color: #ffffff;
  overflow: hidden;
}
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__overline { color: rgba(255, 255, 255, 0.78); }
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__headline { color: #ffffff; }
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__body p,
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__body li { color: rgba(255, 255, 255, 0.88); }

/* Move the large featured icon to a watermark in the bottom-right */
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__icon--large {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  opacity: 0.14;
  color: #ffffff;
  margin-bottom: 0;
  pointer-events: none;
}
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__icon--large svg {
  width: 160px;
  height: 160px;
}

/* Star badge on C-featured = white-glass on teal */
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__star-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* Warning callout on C-featured = white-glass panel */
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__warning {
  background: rgba(255, 255, 255, 0.12);
  border-left: 4px solid #ffffff;
}
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__warning-body p,
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__warning-body strong { color: #ffffff; }
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__warning-icon { color: rgba(255, 255, 255, 0.92); }

/* Scope cols on C-featured = stacked rows (the card is tall, not wide) */
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope { grid-template-columns: 1fr; }
}
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope-col--covered {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope-col--notcov {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope-label--covered,
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope-label--notcov,
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope-body p { color: #ffffff; }
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__scope-icon { color: rgba(255, 255, 255, 0.88); }

/* Backdrop-filter fallback for Variant C glass star badge */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__card--featured .dl-bento__star-badge {
    background: rgba(255, 255, 255, 0.32);
  }
}

/* Variant C Loom strip + caption row (display:contents lets children become grid items) */
.dl-redesign .dl-bento[data-variant="c"] .dl-bento__video-row { display: contents; }

@media (min-width: 1024px) {
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__video {
    grid-column: span 8;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .dl-redesign .dl-bento[data-variant="c"] .dl-bento__video-caption { grid-column: span 4; }
}

/* Caption card next to Loom strip */
.dl-redesign .dl-bento__video-caption {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dl-redesign .dl-bento__video-caption-body p {
  margin: 0 0 var(--space-3);
  color: var(--color-medium);
}
.dl-redesign .dl-bento__video-caption-body p:last-child { margin: 0; }

/* =====================================================================
 * REVEAL ANIMATION (Variants B + C — progressive enhancement)
 *
 * Initial-hidden state is gated on `.dl-bento--reveal`, a class that JS
 * adds to the section ONLY when it has decided the animation should run
 * (not in an iframe / not reduced-motion / IO supported). If JS doesn't
 * run, can't run, or detects an iframe (HubSpot editor), elements stay
 * at their default visible state. This prevents the editor from showing
 * a permanently-blank section if IO never fires in the iframe context.
 * ===================================================================== */
.dl-redesign .dl-bento--reveal[data-variant="b"] .dl-bento__card,
.dl-redesign .dl-bento--reveal[data-variant="b"] .dl-bento__video,
.dl-redesign .dl-bento--reveal[data-variant="c"] .dl-bento__card,
.dl-redesign .dl-bento--reveal[data-variant="c"] .dl-bento__video,
.dl-redesign .dl-bento--reveal[data-variant="c"] .dl-bento__video-caption {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms ease-out var(--reveal-delay, 0ms),
    transform 500ms ease-out var(--reveal-delay, 0ms),
    box-shadow 200ms ease,
    border-color 200ms ease,
    background 200ms ease;
}
/* Reveal state — same `.dl-bento--reveal` scope so specificity (0,4,0)
   matches the initial-state rule. */
.dl-redesign .dl-bento--reveal[data-variant="b"] .is-revealed,
.dl-redesign .dl-bento--reveal[data-variant="c"] .is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
 * REDUCED MOTION — disable transitions/animations and force visible state
 * (Self-contained per module, also covered globally in dl-redesign.css.)
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dl-redesign .dl-bento *,
  .dl-redesign .dl-bento *::before,
  .dl-redesign .dl-bento *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
  .dl-redesign .dl-bento--reveal[data-variant="b"] .dl-bento__card,
  .dl-redesign .dl-bento--reveal[data-variant="b"] .dl-bento__video,
  .dl-redesign .dl-bento--reveal[data-variant="c"] .dl-bento__card,
  .dl-redesign .dl-bento--reveal[data-variant="c"] .dl-bento__video,
  .dl-redesign .dl-bento--reveal[data-variant="c"] .dl-bento__video-caption,
  .dl-redesign .dl-bento--reveal[data-variant="d"] .dl-bento__moment,
  .dl-redesign .dl-bento--reveal[data-variant="d"] .dl-bento__banner {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
 * VARIANT D — Paired Showcase (Problem ↔ Solution moments)
 *
 * Layout: stacked moment rows. Each row is a 2-col Problem + Solution
 * pair, or a 3-col grid when a media tile is shown. Optional inline
 * banners can render before any moment. All selectors scoped under
 * `.dl-redesign .dl-bento[data-variant="d"]` (>=0,2,1) to beat the
 * dl-redesign.css globals and the shared .dl-bento rules above.
 *
 * Tokens used: --color-warning (#C4841D) for Problem amber accent,
 * --module-primary (default --color-primary teal) for Solution accent.
 * Variant D ignores --module-accent — Problem is a semantic warning,
 * not an editorial accent.
 * ===================================================================== */

.dl-redesign .dl-bento[data-variant="d"] {
  background: var(--module-surface, var(--color-surface));
  padding: var(--space-20) 0;
}

.dl-redesign .dl-bento[data-variant="d"] .dl-bento__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
.dl-redesign .dl-bento[data-variant="d"] .dl-bento__header {
  max-width: 760px;
  margin: 0 0 var(--space-16);
}

/* ---------- Moments container ---------- */
.dl-redesign .dl-bento__moments {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* ---------- One moment row ---------- */
.dl-redesign .dl-bento__moment {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (min-width: 768px) {
  .dl-redesign .dl-bento__moment {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .dl-redesign .dl-bento__moment--with-media {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ---------- Problem card (warm sand) ---------- */
.dl-redesign .dl-bento__problem {
  position: relative;
  background: #F1ECDE;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  isolation: isolate;
}

.dl-redesign .dl-bento__problem-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dl-redesign .dl-bento__moment-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-dark);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(58, 60, 72, 0.08);
}

.dl-redesign .dl-bento__moment-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0;
}
.dl-redesign .dl-bento__moment-label--problem {
  color: var(--color-warning);
}
.dl-redesign .dl-bento__moment-label--solution {
  color: var(--module-primary, var(--color-primary-dark));
}

.dl-redesign .dl-bento__problem-quote {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.015em;
}

/* ---------- Solution card (light teal) ---------- */
.dl-redesign .dl-bento__solution {
  position: relative;
  background: var(--color-primary-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  isolation: isolate;
}

.dl-redesign .dl-bento__solution-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dl-redesign .dl-bento__solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--module-primary, var(--color-primary));
  color: #ffffff;
  flex: 0 0 auto;
}

.dl-redesign .dl-bento__solution-headline {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.015em;
}

/* ---------- Shared moment body text ---------- */
.dl-redesign .dl-bento__moment-body {
  color: var(--color-medium);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.dl-redesign .dl-bento__moment-body p {
  margin: 0 0 var(--space-3);
  color: var(--color-medium);
}
.dl-redesign .dl-bento__moment-body p:last-child {
  margin-bottom: 0;
}
.dl-redesign .dl-bento__moment-body a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ---------- Decorative top-right dot ---------- */
.dl-redesign .dl-bento__moment-dot {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 1;
}
.dl-redesign .dl-bento__moment-dot--problem {
  background: var(--color-warning);
}
.dl-redesign .dl-bento__moment-dot--solution {
  background: var(--module-primary, var(--color-primary));
}

/* ---------- Media tile (image or placeholder) ----------
   Image case: image fills edge-to-edge (no inner padding). The figure's
   overflow:hidden + border-radius clips the image corners, so the <img>
   itself needs no border-radius. Caption (if any) sits below the image
   with its own padding.
   Placeholder case: re-adds padding / min-height / centering so the
   dashed-border tile still reads as a card while the editor sources art.
*/
.dl-redesign .dl-bento__media {
  margin: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  /* Image tile sizes to its own content height. Without this, the grid's
     default `align-items: stretch` would stretch the figure to match the
     taller Problem/Solution text cards, leaving a white slab below the
     image. The section's surface color shows through naturally where the
     stretched white card used to be. */
  align-self: start;
}
.dl-redesign .dl-bento__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.dl-redesign .dl-bento__media--placeholder {
  background: color-mix(in srgb, var(--module-primary, var(--color-primary)) 6%, #ffffff);
  border: 2px dashed color-mix(in srgb, var(--module-primary, var(--color-primary)) 28%, transparent);
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  min-height: 280px;
  text-align: center;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-bento__media--placeholder {
    background: rgba(70, 154, 173, 0.06);
    border-color: rgba(70, 154, 173, 0.28);
  }
}

.dl-redesign .dl-bento__media-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--module-primary, var(--color-primary));
  box-shadow: 0 1px 2px rgba(58, 60, 72, 0.06);
}
.dl-redesign .dl-bento__media-placeholder-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--module-primary, var(--color-primary-dark));
  text-transform: uppercase;
}
.dl-redesign .dl-bento__media-caption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-medium);
  max-width: 28ch;
  padding: var(--space-4) var(--space-6);
}
/* Inside the placeholder the caption sits beside the icon+label as
   centered content, so don't double up on the side padding. */
.dl-redesign .dl-bento__media--placeholder .dl-bento__media-caption {
  padding: 0;
}

/* ---------- Inline banner (full-width row above a moment) ---------- */
.dl-redesign .dl-bento__banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-primary-light);
  border: 1px solid color-mix(in srgb, var(--module-primary, var(--color-primary)) 18%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-bento__banner {
    border-color: rgba(70, 154, 173, 0.18);
  }
}

.dl-redesign .dl-bento__banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--module-primary, var(--color-primary));
  color: #ffffff;
  flex: 0 0 auto;
}

.dl-redesign .dl-bento__banner-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dl-redesign .dl-bento__banner-headline {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.4;
}
.dl-redesign .dl-bento__banner-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-medium);
  line-height: 1.55;
}

/* ---------- Mobile: stack pair vertically, stack media too ----------
   Normalize visual order to Problem -> Solution -> Image regardless
   of desktop `media_position`. The DOM order for media-left moments
   is figure -> problem -> solution; we push the figure to the end
   on mobile via CSS `order`. */
@media (max-width: 767px) {
  .dl-redesign .dl-bento__problem-quote,
  .dl-redesign .dl-bento__solution-headline {
    font-size: 1.125rem;
  }
  .dl-redesign .dl-bento__moment--media-left .dl-bento__problem  { order: 1; }
  .dl-redesign .dl-bento__moment--media-left .dl-bento__solution { order: 2; }
  .dl-redesign .dl-bento__moment--media-left .dl-bento__media    { order: 3; }
  /* Mobile: only the placeholder needs the padded card look. An image-only
     tile is already self-sizing edge-to-edge. */
  .dl-redesign .dl-bento__media--placeholder {
    min-height: 200px;
    padding: var(--space-6);
  }
  .dl-redesign .dl-bento__banner {
    padding: var(--space-4);
    gap: var(--space-3);
  }
  .dl-redesign .dl-bento__banner-icon {
    width: 36px;
    height: 36px;
  }
}

/* ---------- Reveal animation (Variant D) ---------- */
.dl-redesign .dl-bento--reveal[data-variant="d"] .dl-bento__moment,
.dl-redesign .dl-bento--reveal[data-variant="d"] .dl-bento__banner {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.dl-redesign .dl-bento--reveal[data-variant="d"] .dl-bento__moment.is-revealed,
.dl-redesign .dl-bento--reveal[data-variant="d"] .dl-bento__banner.is-revealed {
  opacity: 1;
  transform: none;
}