/* ─────────────────────────────────────────────────────────────────────────────
   Diamond Equity Investments — Chicago · block styles (web + print lanes)

   Every rule below reads the `--t-*` semantic layer from tokens.css. No raw
   brand value appears here, which is what lets one block set carry both
   registers. Depth is hairlines, nested frames, type scale and space — there
   are no shadows, no glows, no blobs, and no capsule tags.

   Blocks are self-contained and order-independent: any run of them, in any
   order, at any length, reads as one document. That is the whole contract.
   ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

.de-doc {
  margin: 0;
  background-color: var(--t-ground);
  background-image: var(--t-ground-image);
  background-size: var(--t-ground-size);
  color: var(--t-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.de-doc img, .de-doc svg { display: block; max-width: 100%; }
.de-doc a { color: inherit; }
.de-doc ::selection { background: var(--t-accent); color: var(--t-on-accent); }
.de-doc :focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }

/* ── Shared primitives ────────────────────────────────────────────────────── */

/* Every block is a <section class="de-block">. The block owns its vertical
   rhythm so a template author never sets margins by hand. */
.de-block {
  /* Each block is its own query container. A block dropped into a 380px column
     must lay itself out for 380px, not for the window it happens to be in —
     that is what makes the set safe to embed anywhere, and it is what the
     proof gallery depends on to show three lanes side by side honestly. */
  container-type: inline-size;
  --gutter: clamp(20px, 5cqi, 72px);
  padding-block: var(--sp-8);
  padding-inline: var(--gutter);
}
.de-block--tight { padding-block: var(--sp-6); }
.de-block--flush  { padding-block: 0; padding-inline: 0; }

.de-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}
/* Left-aligned, not centred: every block shares one left edge, so a run of
   wide and narrow blocks still reads as a single document rather than as a
   column of unrelated sections. This is the difference between a page and a
   stack of cards. */
.de-shell--narrow { max-width: 760px; margin-inline: 0; }

/* Inverse blocks invert the ground, not the tokens — nested blocks still work. */
.de-block--inverse {
  background-color: var(--t-inverse);
  background-image: var(--t-inverse-image);
  color: var(--t-on-inverse);
}
.de-block--inverse .de-kicker { color: var(--t-accent-soft); }
.de-block--inverse .de-meta   { color: color-mix(in srgb, var(--t-on-inverse) 68%, transparent); }
.de-block--inverse .de-frame,
.de-block--inverse .de-hr { border-color: color-mix(in srgb, var(--t-on-inverse) 22%, transparent); }

/* The kicker. Flat mono, wide tracking, no background, never a pill. */
.de-kicker {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--t-brand);
}

.de-h1, .de-h2, .de-h3 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: var(--headline-tracking);
  line-height: 1.05;
  color: inherit;
}
.de-h1 { font-size: clamp(2rem, 5.6cqi, 4.4rem); }
.de-h2 { font-size: clamp(1.5rem, 3.8cqi, 2.9rem); }
.de-h3 { font-size: clamp(1.15rem, 2.2cqi, 1.6rem); }

/* Archivo uppercase — the section headline voice, distinct from the Fraunces
   display voice. Use where a headline must feel like a label, not a statement. */
.de-h-flat {
  font-family: var(--font-headline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.de-body { margin: 0 0 var(--sp-4); max-width: var(--measure); }
.de-body:last-child { margin-bottom: 0; }
.de-lead { font-size: clamp(1rem, 1.6cqi, 1.25rem); line-height: 1.55; }
.de-meta { font-size: 0.875rem; color: var(--t-meta); }

.de-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* A frame is a hairline box. It is the only container treatment in this system. */
.de-frame {
  border: 1px solid var(--t-line);
  border-radius: var(--t-rad);
  background: var(--t-slip);
}
.de-frame--quiet { background: var(--t-surface); }

.de-hr { border: 0; border-top: 1px solid var(--t-line); margin: 0; }

/* Buttons. Square in paper, 16px rounded in company — never a capsule. */
.de-btn {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid var(--t-accent);
  border-radius: var(--t-rad);
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s var(--ease-enter), color 0.2s var(--ease-enter);
}
.de-btn:hover { background: transparent; color: var(--t-accent); }
.de-btn--ghost { background: transparent; color: var(--t-accent); }
.de-btn--ghost:hover { background: var(--t-accent); color: var(--t-on-accent); }

/* Image slots. An unfilled slot renders the photo-pending hatch rather than a
   broken icon — an incomplete template still reads as designed. */
.de-img {
  width: 100%;
  height: auto;
  border-radius: var(--t-rad);
  background: var(--t-photo-pending);
  object-fit: cover;
}
.de-img--tall  { aspect-ratio: 3 / 4; }
.de-img--wide  { aspect-ratio: 16 / 9; }
.de-img--square{ aspect-ratio: 1 / 1; }

.de-grid { display: grid; gap: var(--sp-6); }
@container (min-width: 760px) {
  .de-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .de-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .de-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ CORE ════════════════════════════════════════════════════════════════ */

/* de-masthead — the logo bar. The diamond is LOCKED artwork: sized and
   positioned here, never restyled, filtered, masked or recoloured. */
.de-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--t-line);
}
.de-masthead__lockup { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.de-masthead__gem { width: 34px; height: auto; }
.de-masthead__name {
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--lockup-tracking);
  text-transform: uppercase;
}
.de-masthead__where { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--t-meta); }
.de-masthead__aside { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--t-meta); }

/* de-hero */
.de-hero { padding-block: var(--sp-7) var(--sp-8); }
.de-hero__sub { max-width: 52ch; margin-block: var(--sp-5); }
.de-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.de-hero__art { margin-top: var(--sp-7); }

/* de-prose — headline + body, the workhorse */
.de-prose__body > p { max-width: var(--measure); }

/* de-split — image beside text. Alternates with --flip. */
.de-split__grid { display: grid; gap: var(--sp-7); align-items: center; }
@container (min-width: 860px) { .de-split__grid { grid-template-columns: 1fr 1fr; } }
.de-split--flip .de-split__media { order: 2; }

/* de-bleed — full-bleed image with an optional caption */
.de-bleed__img { width: 100%; border-radius: 0; }
.de-bleed__cap {
  padding: var(--sp-3) var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--t-meta);
  border-bottom: 1px solid var(--t-line);
}

/* de-cta — off-axis, never centred. A centred headline over a centred subhead
   over two centred buttons is the single most templated arrangement on the web;
   it is most of why the first pass of this set read as generated. The ask sits
   in its own column beside the argument instead. */
.de-cta__grid { display: grid; gap: var(--sp-6); align-items: end; }
@container (min-width: 820px) {
  .de-cta__grid { grid-template-columns: 1.4fr auto; gap: var(--sp-8); }
}
.de-cta__act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

/* de-rule — the torn deckled edge, the brand's one ornamental move */
.de-rule { padding-block: var(--sp-6); }
.de-rule__torn {
  height: 10px;
  background: var(--t-ink);
  clip-path: var(--torn-rule);
}
.de-rule--plain .de-rule__torn { height: 1px; background: var(--t-line); clip-path: none; }

/* de-footer */
.de-footer { border-top: 1px solid var(--t-line); font-size: 0.875rem; }
.de-footer__grid { display: grid; gap: var(--sp-6); }
@container (min-width: 760px) { .de-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.de-footer__legal { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--t-line); color: var(--t-meta); font-size: 0.8125rem; }
.de-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.de-footer__links a { text-decoration: none; }
.de-footer__links a:hover { text-decoration: underline; }

/* ═══ DEAL ════════════════════════════════════════════════════════════════ */

/* de-property — one address, its photo and its facts */
.de-property__card { overflow: hidden; }
.de-property__body { padding: var(--sp-5); }
.de-property__addr { margin: 0 0 var(--sp-1); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.de-property__city { margin: 0 0 var(--sp-4); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-meta); }
.de-property__facts { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--t-line); }
.de-property__fact { display: grid; gap: 2px; }
.de-property__fact dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-meta); }
.de-property__fact dd { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }

/* de-beforeafter */
.de-ba__pair { display: grid; gap: var(--sp-4); }
@container (min-width: 640px) { .de-ba__pair { grid-template-columns: 1fr 1fr; } }
.de-ba__label { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-meta); }

/* de-breakdown — the cash-offer table. Numbers are the design. */
.de-breakdown__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.de-breakdown__table th,
.de-breakdown__table td { padding: var(--sp-4) 0; text-align: left; border-bottom: 1px solid var(--t-line); }
/* Only the DATA cell takes the display face. `th:last-child` outranks the bare
   `th` rule below, so including it here set the column header in 17px Fraunces
   beside a 11px mono header — visible immediately on the printed sheet. */
.de-breakdown__table th:last-child { text-align: right; }
.de-breakdown__table td:last-child { text-align: right; font-family: var(--font-display); font-size: 1.0625rem; }
.de-breakdown__table th {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-meta);
}
.de-breakdown__total td { border-bottom: 0; border-top: 2px solid var(--t-ink); padding-top: var(--sp-5); font-weight: 600; }
.de-breakdown__total td:last-child { font-size: 1.5rem; color: var(--t-accent); }

/* de-status — the deal lifecycle. A DOT PLUS A WORD. Never a pill. */
.de-status { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; }
.de-status__item { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-meta); }
.de-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-line); flex: none; }
.de-status__item[data-state="done"] .de-status__dot { background: var(--t-brand); }
.de-status__item[data-state="now"]  .de-status__dot { background: var(--t-accent); }
.de-status__item[data-state="now"]  { color: var(--t-ink); }

/* de-neighborhood */
.de-hood__grid { display: grid; gap: var(--sp-6); }
@container (min-width: 860px) { .de-hood__grid { grid-template-columns: 1.2fr 1fr; } }
.de-hood__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.de-hood__list li { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--t-line); }
.de-hood__list b { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ═══ TRUST ═══════════════════════════════════════════════════════════════ */

/* de-testimonial */
.de-testimonial__grid { display: grid; gap: var(--sp-6); align-items: start; }
@container (min-width: 700px) { .de-testimonial__grid { grid-template-columns: 120px 1fr; } }
.de-testimonial__photo { width: 120px; height: 120px; border-radius: var(--t-rad); }
.de-testimonial__quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 2.4cqi, 1.75rem); line-height: 1.35; }
.de-testimonial__who { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-meta); }

/* de-rating */
.de-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); }
.de-rating__stars { color: var(--t-accent); font-size: 1.125rem; letter-spacing: 0.18em; }
.de-rating__score { font-family: var(--font-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* de-stats */
.de-stats__item { border-top: 2px solid var(--t-ink); padding-top: var(--sp-4); }
.de-stats__n { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 4.4cqi, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.de-stats__k { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-meta); }

/* de-manager — the acquisition manager, a real person with a real number */
.de-manager__grid { display: grid; gap: var(--sp-6); align-items: center; }
@container (min-width: 700px) { .de-manager__grid { grid-template-columns: 200px 1fr; } }
.de-manager__photo { width: 100%; border-radius: var(--t-rad); }
.de-manager__role { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-meta); }
.de-manager__contact { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); font-variant-numeric: tabular-nums; }

/* de-guarantee — a slip of paper on the ground, edged not shadowed */
.de-guarantee__slip { padding: var(--sp-7); border: 1px solid var(--t-ink); border-radius: var(--t-rad); background: var(--t-slip); }
.de-guarantee__seal { display: inline-block; margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--t-accent); border-radius: var(--t-rad); color: var(--t-accent); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; }

/* ═══ LONG-FORM ═══════════════════════════════════════════════════════════ */

/* de-columns */
.de-columns__body { columns: 2; column-gap: var(--sp-7); }
.de-columns__body p { break-inside: avoid; max-width: none; }
@container (max-width: 760px) { .de-columns__body { columns: 1; } }

/* de-quote */
.de-quote { border-left: 2px solid var(--t-accent); padding-left: var(--sp-5); margin: 0; }
.de-quote p { font-family: var(--font-display); font-size: clamp(1.25rem, 3cqi, 2rem); line-height: 1.3; margin: 0; }
.de-quote cite { display: block; margin-top: var(--sp-4); font-style: normal; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-meta); }

/* de-steps */
.de-steps__list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.de-steps__list li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-4); align-items: start; }
.de-steps__list li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em;
  color: var(--t-accent); padding-top: 4px;
}

/* de-faq — static markup, no JS, so it prints and emails identically */
.de-faq__list { display: grid; gap: 0; border-top: 1px solid var(--t-line); }
.de-faq__item { padding-block: var(--sp-5); border-bottom: 1px solid var(--t-line); }
.de-faq__q { margin: 0 0 var(--sp-3); font-family: var(--font-headline); font-weight: 600; font-size: 1.0625rem; }
.de-faq__a { margin: 0; color: var(--t-meta); max-width: var(--measure); }

/* de-signature */
.de-signature { display: grid; gap: var(--sp-4); max-width: 380px; }
.de-signature__mark { width: 180px; height: auto; }
.de-signature__rule { border: 0; border-top: 1px solid var(--t-ink); margin: 0; }
.de-signature__who { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-meta); }

/* de-pagebreak — invisible on screen, a hard break on paper */
.de-pagebreak { break-after: page; page-break-after: always; height: 0; margin: 0; padding: 0; }

/* ═══ THE PACKET ══════════════════════════════════════════════════════════════
   The set's organizing idea: the email, the page and the printed sheet are not
   three designs — they are three sheets of ONE packet, and each says so. The
   docket is what says it. Someone who gets the email and later the printed
   sheet should recognise them as one instrument.
   ═════════════════════════════════════════════════════════════════════════ */

/* de-docket — the sheet header. Ruled, tabular, unmistakably an instrument. */
.de-docket {
  display: grid;
  gap: var(--sp-4) var(--sp-6);
  grid-template-columns: 1fr;
  padding-block: var(--sp-4);
  border-top: 2px solid var(--t-ink);
  border-bottom: 1px solid var(--t-line);
}
@container (min-width: 600px) {
  .de-docket { grid-template-columns: auto 1fr auto; align-items: baseline; }
}
.de-docket__lockup { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.de-docket__gem { width: 28px; height: auto; flex: none; }
.de-docket__name {
  font-family: var(--font-headline);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--lockup-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.de-docket__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin: 0;
}
.de-docket__field { display: flex; align-items: baseline; gap: var(--sp-2); }
.de-docket__field dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-meta);
}
.de-docket__field dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
/* Sheet n of N — the line that makes three lanes one packet. */
.de-docket__sheet {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-accent);
  white-space: nowrap;
}

/* de-hero, packet composition — the plate is stacked, the seal straddles it.
   Asymmetric on purpose: the old centred/kicker-headline-sub-two-buttons
   arrangement is the default every generated page reaches for. */
/* Top-aligned. `end` bottom-dumped the headline into 500px of empty ground
   whenever the plate ran tall — the copy and the plate now start together and
   the plate simply hangs lower, which is also what a sheet laid on a desk
   actually does. */
.de-hero__grid { display: grid; gap: var(--sp-7); align-items: start; }
@container (min-width: 900px) {
  .de-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.de-hero__plate { position: relative; }
/* 4:5, not 3:4. On a half-width column the taller ratio made the plate ~760px
   and left the headline stranded at the bottom of an empty screen. */
.de-hero__plate .de-img { aspect-ratio: 4 / 5; }
/* Room on the right for the backing sheets to fan into. Without it the stack
   is clipped by the shell and reads as a stray hairline. */
@container (min-width: 900px) { .de-hero__grid { padding-right: 26px; } }
.de-hero__seal {
  position: absolute;
  left: calc(var(--sp-6) * -1);
  bottom: calc(var(--sp-6) * -1);
}
@container (max-width: 620px) {
  .de-hero__seal { position: static; margin-top: var(--sp-5); display: inline-block; }
}

/* de-compare — the client's own DEI-vs-traditional argument.
   Below 700px the header row is gone, so the accent rule carried onto OUR
   column is the only thing distinguishing the two stacked values. Without it
   the mobile view is two unlabelled numbers per row and the argument dies. */
.de-compare { width: 100%; border-collapse: collapse; }
.de-compare th, .de-compare td { padding: var(--sp-4) var(--sp-4); text-align: left; vertical-align: top; }
.de-compare thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-meta);
  border-bottom: 2px solid var(--t-ink);
}
.de-compare thead th:nth-child(2) { color: var(--t-accent); }
.de-compare tbody th {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--t-meta);
  border-bottom: 1px solid var(--t-line);
  padding-left: 0;
}
.de-compare tbody td { font-size: 0.9375rem; border-bottom: 1px solid var(--t-line); }
.de-compare tbody td:first-of-type { border-left: 2px solid var(--t-accent); font-weight: 500; }
@container (max-width: 700px) {
  .de-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .de-compare tr { display: block; padding-block: var(--sp-4); border-bottom: 1px solid var(--t-line); }
  .de-compare tbody th, .de-compare tbody td { display: block; border: 0; padding: 0; }
  .de-compare tbody th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--sp-2); }
  .de-compare tbody td:first-of-type {
    border-left: 2px solid var(--t-accent);
    padding-left: var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .de-compare tbody td:last-of-type { color: var(--t-meta); padding-left: var(--sp-3); }
}

/* de-situations — Any Reason / Any Condition / Any Challenge.
   Three ruled columns of plain words. No cards, no icons, no pills: the length
   of the lists IS the argument. */
.de-situations { display: grid; gap: var(--sp-6); }
@container (min-width: 760px) { .de-situations { grid-template-columns: repeat(3, 1fr); } }
.de-situations__col { border-top: 2px solid var(--t-ink); padding-top: var(--sp-4); }
.de-situations__head {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.de-situations__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.de-situations__list li {
  font-size: 0.9375rem;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--t-line-soft);
}

/* de-badges — third-party proof. Marks sit on the ground with a hairline rule
   above, never inside cards. */
.de-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--t-line); }
.de-badges img { height: 44px; width: auto; }
.de-badges__text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-meta);
}