.dl-redesign .dl-article-clauses {
  --module-primary: var(--article-teal, #469AAD);
  /* Warning card 1 — primary callout (white + teal accent by default).
     Warning card 2 — optional "heads up" callout (amber + gold by default).
     All four are overridable per-instance via color fields; the inline style
     on the section root only emits a var when the editor picks a color, so a
     blank field falls through to these defaults (gotcha 14). */
  --w1-bg: #ffffff;
  --w1-accent: var(--article-teal-dark, #367A8A);
  --w2-bg: var(--article-warning-bg, #FEF6E8);
  --w2-accent: var(--article-gold, #C4841D);
  padding: 16px 0;
}

.dl-redesign .dl-article-clauses__item {
  padding: 40px 0;
  border-top: 1px dashed var(--article-border, #e2e3e7);
  scroll-margin-top: 110px;
}

.dl-redesign .dl-article-clauses__item:first-of-type {
  padding-top: 24px;
  border-top: 0;
}

.dl-redesign .dl-article-clauses__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.dl-redesign .dl-article-clauses__marker {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--module-primary);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.dl-redesign .dl-article-clauses__tag {
  color: var(--article-teal-dark, #367A8A);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.dl-redesign .dl-article-clauses__title {
  margin: 0 0 18px;
  color: var(--article-ink, #2f313a);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: balance;
}

.dl-redesign .dl-article-clauses__body {
  color: var(--article-ink, #2f313a);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.dl-redesign .dl-article-clauses__body p {
  margin: 0 0 16px;
  color: var(--article-ink, #2f313a);
}

.dl-redesign .dl-article-clauses__body p:last-child,
.dl-redesign .dl-article-clauses__body ul:last-child,
.dl-redesign .dl-article-clauses__body ol:last-child {
  margin-bottom: 0;
}

.dl-redesign .dl-article-clauses__body .lead,
.dl-redesign .dl-article-clauses__warning-body .lead {
  color: var(--article-ink, #2f313a);
  font-weight: 700;
}
/* Warning card 2's lead-in ("Important:") picks up the gold accent. */
.dl-redesign .dl-article-clauses__warning--alt .dl-article-clauses__warning-body .lead {
  color: var(--w2-accent);
}

/* ============ Custom teal-dot bullets (gotcha 12 defense) ============ */
.dl-redesign .dl-article-clauses__body ul,
.dl-redesign .dl-article-clauses__warning-body ul {
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.dl-redesign .dl-article-clauses__body ul li,
.dl-redesign .dl-article-clauses__warning-body ul li {
  position: relative;
  margin: 9px 0;
  padding-left: 18px;
  line-height: 1.6;
  list-style: none;
}

.dl-redesign .dl-article-clauses__body ul li::marker,
.dl-redesign .dl-article-clauses__warning-body ul li::marker {
  content: "";
}

.dl-redesign .dl-article-clauses__body ul li::before,
.dl-redesign .dl-article-clauses__warning-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--module-primary);
}

/* ============ Editor's ordered lists keep native numbering ============ */
.dl-redesign .dl-article-clauses__body ol {
  margin: 14px 0 18px;
  padding-left: 22px;
  list-style-type: decimal;
}

.dl-redesign .dl-article-clauses__body ol li {
  margin: 9px 0;
  line-height: 1.6;
  color: var(--article-ink, #2f313a);
  list-style-type: decimal;
}

/* ============ WARNING CARDS ============ */
.dl-redesign .dl-article-clauses__warning {
  margin: 18px 0;
  padding: 18px 20px;
  background: var(--w1-bg);
  border: 1px solid var(--article-border, #e2e3e7);
  border-top: 3px solid var(--w1-accent);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(58, 60, 72, 0.05);
}

/* Warning card 2 — "heads up" treatment: filled background + left accent bar.
   Both classes sit on the same element; this rule follows the base rule so it
   wins on source order at equal (0,2,0) specificity. */
.dl-redesign .dl-article-clauses__warning--alt {
  background: var(--w2-bg);
  border-top: 1px solid var(--article-border, #e2e3e7);
  border-left: 4px solid var(--w2-accent);
}

.dl-redesign .dl-article-clauses__warning-label {
  margin: 0 0 10px;
  color: var(--w1-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.dl-redesign .dl-article-clauses__warning--alt .dl-article-clauses__warning-label {
  color: var(--w2-accent);
}

.dl-redesign .dl-article-clauses__warning-body {
  color: var(--article-ink, #2f313a);
  font-size: 1.0rem;
  line-height: 1.65;
}

.dl-redesign .dl-article-clauses__warning-body p {
  margin: 0 0 10px;
  color: var(--article-ink, #2f313a);
}

.dl-redesign .dl-article-clauses__warning-body p:last-child,
.dl-redesign .dl-article-clauses__warning-body ul:last-child {
  margin-bottom: 0;
}

/* ============ VARIANT B: Ledger Cards ============ */
.dl-redesign .dl-article-clauses--variant-b .dl-article-clauses__item {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid var(--article-border, #e2e3e7);
  border-left: 4px solid var(--module-primary);
  border-radius: 8px;
  background: var(--article-surface, #f7f8fa);
}

.dl-redesign .dl-article-clauses--variant-b .dl-article-clauses__marker {
  background: #ffffff;
  color: var(--article-teal-dark, #367A8A);
  border: 1px solid var(--article-border, #e2e3e7);
  border-color: color-mix(in srgb, var(--module-primary) 38%, #ffffff);
}

/* Ledger variant drops the soft shadow on both warning cards; their colors
   come from the shared per-card custom properties, so they render the same
   as in Variant A. */
.dl-redesign .dl-article-clauses--variant-b .dl-article-clauses__warning {
  box-shadow: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 760px) {
  .dl-redesign .dl-article-clauses__item {
    padding: 34px 0;
  }

  .dl-redesign .dl-article-clauses__title {
    font-size: 1.375rem;
  }

  .dl-redesign .dl-article-clauses__marker {
    width: 28px;
    height: 28px;
    font-size: 0.88rem;
  }

  .dl-redesign .dl-article-clauses--variant-b .dl-article-clauses__item {
    padding: 20px;
  }
}

/* ============ color-mix() FALLBACK ============ */
@supports not (color: color-mix(in srgb, red, blue)) {
  .dl-redesign .dl-article-clauses--variant-b .dl-article-clauses__marker {
    border-color: #C4DEE5;
  }
}