/* ==========================================================================
   Dynamic Mockups — developer / documentation sections
   --------------------------------------------------------------------------
   api-hero, stat-strip, spec-table, link-chips, embed-frame, use-case-cards,
   callout-panel. Page-agnostic and `dm-` prefixed like the rest of the pool.

   These read every colour from the semantic tokens, which is what lets the API
   page run dark from `dm-dark` alone (see the bottom of dm/tokens.css) without
   a second set of rules here. If you hardcode a colour in this file you break
   that — reach for a token, or add one.

   Mono is used deliberately and only where the content is technical: code, a
   spec value, an eyebrow on a developer page, a figure in the stat strip.
   ========================================================================== */

/* A mono eyebrow — the developer-page variant of .dm-eyebrow. */
:where(.dm) .dm-eyebrow--mono {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dm-accent-primary);
}

/* ==========================================================================
   api-hero
   ========================================================================== */
.dm-api-hero .dm-container { padding-block: 72px 88px; }

.dm-api-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

.dm-api-hero-copy h1 {
  margin-top: 20px;
  font-family: var(--dm-font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: var(--dm-leading-display);
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
}

.dm-api-hero-lede {
  max-width: 46ch;
  margin-top: 18px;
  font-size: var(--dm-text-body-lg);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

.dm-api-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.dm-sdk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  list-style: none;
}

.dm-sdk-chips li {
  padding: 5px 11px;
  border: 1px solid var(--dm-border-card);
  border-radius: 6px;
  background: var(--dm-surface-card);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  color: var(--dm-text-secondary);
}

/* ---- the code block ---- */
.dm-code {
  overflow: hidden;
  border: 1px solid var(--dm-border-card);
  border-radius: var(--dm-radius-card);
  background: var(--dm-surface-card);
}

.dm-code-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--dm-border-card);
  scrollbar-width: none;
}

.dm-code-tabs::-webkit-scrollbar { display: none; }

.dm-code-tab {
  flex: none;
  padding: 11px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--dm-font-mono);
  font-size: 12px;
  color: var(--dm-text-tertiary);
  cursor: pointer;
  white-space: nowrap;
}

.dm-code-tab:hover { color: var(--dm-text-secondary); }

.dm-code-tab.is-active {
  border-bottom-color: var(--dm-accent-primary);
  color: var(--dm-ink);
}

/* Every panel stays in the document, and they all share ONE grid cell — so the
   block is always as tall as the longest sample and switching tabs cannot make
   the page jump. `visibility` rather than `display: none` because a display-none
   grid item contributes no height, which is the whole point here.

   The stack needs the panels' common parent to be the grid, hence .dm-code-body
   around them; with no JS the first is visible and the rest are still in the
   document for their ids to work. */
.dm-code-body {
  display: grid;
  grid-template-areas: "panel";
}

.dm-code-panel {
  grid-area: panel;
  visibility: hidden;
}

.dm-code-panel.is-active { visibility: visible; }

.dm-code-panel pre {
  overflow-x: auto;
  margin: 0;
  padding: 18px 20px;
  font-family: var(--dm-font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--dm-text-secondary);
  white-space: pre;
  tab-size: 2;
}

.dm-code-panel code {
  font-family: inherit;
  font-size: inherit;
}

/* highlight.js's theme (github-dark) styles `code.hljs` as a block with its own
   `padding: 1em` and background. Since panels are highlighted lazily — one per
   tab visit — that padding appeared per panel as you clicked, growing the shared
   grid row and moving the page. The <pre> owns the box here; hljs only colours
   the text. */
.dm-code-panel code.hljs {
  padding: 0;
  background: none;
}

.dm-code-panel:focus-visible {
  outline: 2px solid var(--dm-accent-primary);
  outline-offset: 2px;
}

.dm-code-caption {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--dm-text-tertiary);
}

/* ==========================================================================
   stat-strip
   ========================================================================== */
.dm-strip {
  border-top: 1px solid var(--dm-border-card);
  border-bottom: 1px solid var(--dm-border-card);
}

.dm-strip .dm-container { padding-block: 0; }

.dm-strip-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.dm-strip-grid > div {
  padding: 32px 20px;
  text-align: center;
}

.dm-strip-grid > div + div { border-left: 1px solid var(--dm-border-card); }

.dm-strip-grid dt {
  font-family: var(--dm-font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
  font-variant-numeric: tabular-nums;
}

.dm-strip--mono .dm-strip-grid dt {
  font-family: var(--dm-font-mono);
  font-size: 26px;
}

.dm-strip-grid dd {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dm-text-secondary);
}

/* ==========================================================================
   spec-table
   ========================================================================== */
.dm-spec-head,
.dm-cases-head,
.dm-embed-head { max-width: 62ch; margin-bottom: 44px; }

.dm-spec-head .dm-h2,
.dm-cases-head .dm-h2,
.dm-embed-head .dm-h2 { margin-top: 12px; font-size: var(--dm-text-h3); }

.dm-spec-head .dm-lead,
.dm-cases-head .dm-lead,
.dm-embed-head .dm-lead { max-width: 60ch; margin-top: 12px; }

.dm-spec-list {
  padding: 8px 28px;
  border: 1px solid var(--dm-border-card);
  border-radius: var(--dm-radius-card);
  background: var(--dm-surface-card);
}

.dm-spec-row {
  display: grid;
  grid-template-columns: minmax(180px, 30%) 1fr;
  gap: 24px;
  padding: 15px 0;
}

.dm-spec-row + .dm-spec-row { border-top: 1px solid var(--dm-border-card); }

.dm-spec-row dt {
  font-size: var(--dm-text-body-sm);
  color: var(--dm-text-secondary);
}

.dm-spec-row dd {
  font-family: var(--dm-font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dm-ink);
  overflow-wrap: anywhere;
}

.dm-spec-row dd a { text-decoration: underline; }

/* ==========================================================================
   link-chips
   ========================================================================== */
.dm-chips .dm-container { padding-block: 96px; }

.dm-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* The chip itself, shared by the wrapping shape and the rail — one definition,
   so the two cannot drift apart. */
.dm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--dm-border-card);
  border-radius: 999px;
  background: var(--dm-surface-white);
  font-size: var(--dm-text-body-sm);
  font-weight: 600;
  color: var(--dm-ink);
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}

.dm-chip:hover { border-color: var(--dm-border-hairline); }
.dm-chip svg { color: var(--dm-text-tertiary); }

/* ---- rail: one scrolling row, for a list too long to wrap ---- */
.dm-chips--rail .dm-chips-head { align-items: center; margin-bottom: 28px; }
.dm-chips--rail .dm-chips-head .dm-h2 { margin-bottom: 0; }

/* `flex: none` so each chip keeps its own width and the row scrolls, instead of
   forty chips being squeezed to fit the container. */
.dm-chips--rail .dm-car-track .dm-chip { flex: none; }

/* ==========================================================================
   embed-frame
   ========================================================================== */
.dm-embed-frame {
  overflow: hidden;
  border: 1px solid var(--dm-border-card);
  border-radius: var(--dm-radius-card);
  background: var(--dm-surface-card);
}

.dm-embed-frame iframe {
  display: block;
  width: 100%;
  height: var(--dm-embed-h, 90vh);
  min-height: var(--dm-embed-min, 600px);
  border: 0;
}

/* Calendly's inline widget is a div plus their own script, not an iframe we
   control, so it cannot go through embed-frame — it borrows the frame and sets
   its own height. `--plain` drops the fill, because the widget paints its own
   and the card grey shows through its margins otherwise. */
.dm-embed-frame--plain {
  background: var(--dm-surface-white);
  height: var(--dm-embed-h, 720px);
  min-height: var(--dm-embed-min, 620px);
}

.dm-embed-frame--plain > * { height: 100%; }

/* ==========================================================================
   use-case-cards
   ========================================================================== */
.dm-cases-grid {
  display: grid;
  gap: 20px;
  list-style: none;
}

.dm-cases-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dm-cases-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dm-cases-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Tone modifier on the SECTION, so a run of sections can alternate grounds. */
.dm-cases--card { background: var(--dm-surface-card); }

/* On a `tone => 'card'` section the card must LIFT off that ground — same
   background on both is what makes it read as a faint outline instead of a
   card. Every toned section that holds cards needs this pairing. */
.dm-case {
  padding: 28px;
  background: var(--dm-surface-card);
  box-shadow: var(--dm-card-inset);
}

.dm-cases--card .dm-case {
  background: var(--dm-surface-white);
  box-shadow: 0 1px 2px rgb(33 34 29 / .04), var(--dm-card-inset);
}

.dm-cases--card .dm-case-icon { background: var(--dm-surface-card); }

.dm-case-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--dm-radius-button);
  background: var(--dm-surface-page);
  color: var(--dm-accent-primary);
}

.dm-case h3 {
  margin-top: 18px;
  font-size: var(--dm-text-h4);
  font-weight: 600;
  line-height: var(--dm-leading-heading);
  color: var(--dm-ink);
}

.dm-case-text {
  margin-top: 10px;
  font-size: var(--dm-text-body-sm);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

/* custom_single_blog_post_style.css styles bare `blockquote` — a 5px left rule
   and its own padding — and it is loaded on EVERY page, not just posts. Like
   the bare button/input/table rules, it reaches this markup, so the reset comes
   first and the hairline is re-stated after it. */
.dm-case-quote {
  margin: 20px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--dm-border-card);
  background: none;
  font-size: 13px;
  line-height: var(--dm-leading-body);
  font-style: italic;
  color: var(--dm-text-tertiary);
}

.dm-case-quote::before { content: "\201C"; }
.dm-case-quote::after { content: "\201D"; }

/* ==========================================================================
   callout-panel
   ========================================================================== */
.dm-callout-panel {
  padding: 56px 48px;
  border-radius: var(--dm-radius-card-inner);
  text-align: center;
}

.dm-callout-panel--paper {
  border: 1px solid var(--dm-border-card);
  background: var(--dm-surface-raised);
}

.dm-callout-panel--card { background: var(--dm-surface-card); }

/* An ink island: it re-declares the tokens its children read, so it holds on a
   light page and inside `.dm-dark` alike. Same pattern as .dm-pr-card--dark. */
.dm-callout-panel--ink {
  --dm-ink: #F4F5F1;
  --dm-text-secondary: #C4C6B9;
  --dm-on-ink: #21221D;
  --dm-surface-page: #F4F5F1;
  --dm-surface-white: #FFFFFF;
  --dm-ink-on-paper: #21221D;

  background: var(--dm-surface-dark);
  color: #F4F5F1;
}

.dm-callout-panel .dm-h2 {
  max-width: 24ch;
  margin: 12px auto 0;
  font-size: var(--dm-text-h3);
}


.dm-callout-text {
  max-width: 56ch;
  margin: 14px auto 0;
  font-size: var(--dm-text-body-md);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}


:where(.dm) .dm-callout-panel .dm-btn { margin-top: 28px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .dm-api-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .dm-api-hero-lede { max-width: none; }
  .dm-cases-grid--2,
  .dm-cases-grid--3 { grid-template-columns: 1fr; }
  .dm-strip-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
  }
  /* On two columns the left border only belongs on the right-hand cell. */
  .dm-strip-grid > div + div { border-left: 0; }
  .dm-strip-grid > div:nth-child(2n) { border-left: 1px solid var(--dm-border-card); }
  .dm-strip-grid > div:nth-child(n + 3) { border-top: 1px solid var(--dm-border-card); }
}

@media (max-width: 720px) {
  .dm-api-hero .dm-container { padding-block: 48px 64px; }
  .dm-api-hero-actions .dm-btn { flex: 1 1 100%; justify-content: center; }
  .dm-spec-row { grid-template-columns: 1fr; gap: 6px; }
  .dm-spec-list { padding-inline: 20px; }
  .dm-case { padding: 22px; }
  .dm-callout-panel { padding: 36px 24px; }
  .dm-strip-grid { grid-template-columns: 1fr; }
  .dm-strip-grid > div:nth-child(2n) { border-left: 0; }
  .dm-strip-grid > div + div { border-top: 1px solid var(--dm-border-card); }
}

/* ==========================================================================
   split-hero
   ========================================================================== */
.dm-shero .dm-container { padding-block: 72px 80px; }

/* `min-width: 0` on both tracks. A grid track's default minimum is its
   content's min-content width, so an unconstrained <video> or <img> in the
   second slot widens its own column past the fr ratio and squeezes the copy
   into a sliver — which is exactly what a category page's hero video did. */
.dm-shero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center;
}

.dm-shero-copy,
.dm-shero-figure { min-width: 0; }

.dm-shero-copy h1 {
  margin-top: 14px;
  font-family: var(--dm-font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: var(--dm-leading-display);
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
}

.dm-shero-lede {
  max-width: 50ch;
  margin-top: 20px;
  font-size: var(--dm-text-body-lg);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

.dm-shero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.dm-shero-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--dm-text-tertiary);
}

.dm-shero-card {
  padding: 28px;
  background: var(--dm-surface-card);
  box-shadow: var(--dm-card-inset);
}

.dm-shero-card-head {
  margin-bottom: 18px;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dm-text-tertiary);
}

.dm-shero-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
}

.dm-shero-figures dt {
  font-family: var(--dm-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
}

.dm-shero-figures dd {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dm-text-secondary);
}

/* ==========================================================================
   logo-strip
   ========================================================================== */
.dm-logostrip .dm-container { padding-block: 8px 56px; }

.dm-logostrip-head {
  margin-bottom: 28px;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dm-text-tertiary);
}

.dm-logostrip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 48px;
  list-style: none;
}

/* A shared height, free width: a wordmark and a square mark then sit together
   without either being squashed to a common box.

   Greyscale is what makes a mixed set read as one row — these marks come from
   six different brands, some full-colour, and the strip is social proof rather
   than a colour palette. Hover restores the real thing. */
.dm-logostrip-row img {
  height: 32px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: opacity .15s ease, filter .15s ease;
}

.dm-logostrip-row a:hover img {
  filter: none;
  opacity: 1;
}

/* The marks are supplied as dark artwork; on a dark page they invert. */
.dm-dark .dm-logostrip-row img { filter: grayscale(1) invert(1) brightness(1.8); }
.dm-dark .dm-logostrip-row a:hover img { filter: invert(1) brightness(1.8); }

/* ==========================================================================
   numbered-steps
   ========================================================================== */
.dm-steps--card { background: var(--dm-surface-card); }

.dm-steps-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none;
  counter-reset: none;
}

.dm-steps-list > li {
  padding-top: 20px;
  border-top: 2px solid var(--dm-ink);
}

.dm-steps-num {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: .1em;
  color: var(--dm-text-tertiary);
}

.dm-steps-list h3 {
  margin-top: 12px;
  font-size: var(--dm-text-h4);
  font-weight: 600;
  line-height: var(--dm-leading-heading);
  color: var(--dm-ink);
}

.dm-steps-text {
  margin-top: 10px;
  font-size: var(--dm-text-body-sm);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

.dm-steps-note {
  margin-top: 48px;
  font-size: var(--dm-text-body-md);
  color: var(--dm-text-secondary);
}

.dm-steps-note strong {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--dm-surface-page);
  box-shadow: var(--dm-card-inset);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-body-sm);
  font-weight: 400;
  color: var(--dm-ink);
}

/* ==========================================================================
   before-after
   ========================================================================== */
.dm-ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

.dm-ba-side { margin: 0; }

.dm-ba-label {
  margin-bottom: 14px;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dm-text-tertiary);
}

.dm-ba-side--after .dm-ba-label { color: var(--dm-accent-primary); }

.dm-ba-media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--dm-border-card);
  border-radius: var(--dm-radius-card);
  background: var(--dm-surface-card);
}

.dm-ba-side--after .dm-ba-media { border-color: var(--dm-accent-primary); }

/* `contain`, not `cover`: these are documents, and cropping one to fill the box
   cuts off the very thing being compared. */
.dm-ba-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dm-ba-placeholder {
  padding: 16px;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  text-align: center;
  color: var(--dm-text-tertiary);
}

.dm-ba-side figcaption {
  margin-top: 14px;
  font-size: var(--dm-text-body-sm);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

/* ==========================================================================
   split-points
   ========================================================================== */
.dm-split--card { background: var(--dm-surface-card); }

.dm-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.dm-split-claim .dm-h2 {
  margin-top: 12px;
  max-width: 16ch;
}

.dm-split-points {
  display: flex;
  flex-direction: column;
  gap: 28px;
  list-style: none;
}

.dm-split-point-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dm-split-point-head h3 {
  font-size: var(--dm-text-body-lg);
  font-weight: 600;
  color: var(--dm-ink);
}

.dm-split-points p {
  margin-top: 10px;
  font-size: var(--dm-text-body-sm);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

/* Full width on purpose: this line is the section's conclusion, and a 60ch cap
   broke a one-sentence payoff across two rows. */
.dm-cases-note {
  margin-top: 40px;
  font-size: var(--dm-text-body-lg);
  line-height: var(--dm-leading-body);
  color: var(--dm-ink);
}

/* ==========================================================================
   versus-table
   ========================================================================== */
.dm-vs .dm-container { padding-block: 96px; }

/* Every other section's lead sits 12px under its title; this one was flush.
   The shared cap of 38ch also reads as a narrow column under a table-width
   headline, so this one gets a longer measure. */
.dm-vs .dm-lead {
  margin-top: 12px;
  max-width: 56ch;
}

.dm-vs-scroll {
  overflow-x: auto;
  max-width: 1000px;
  margin: 0 auto;
}

/* `separate`, not `collapse`. With collapsed borders two adjacent cells share
   one edge and the browser picks which of them owns it — with a reset on the
   cells and a border re-stated on the row, that came out as a divider on every
   OTHER row. Separate borders make each row draw its own. */
.dm-vs-table {
  width: 100%;
  min-width: 620px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: inherit;
  text-align: left;
}

/* Same leak as plan-comparison: style.min.css borders and stripes bare cells.
   The row divider is declared HERE rather than in a second, more specific rule
   further down. Two rules — one resetting `border`, one re-adding
   `border-bottom` — raced, and the result was a divider on every other row. One
   rule cannot race itself. */
.dm-vs-table tbody > tr:nth-child(n) > th,
.dm-vs-table tbody > tr:nth-child(n) > td,
.dm-vs-table thead > tr > th {
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--dm-border-card-soft);
  background: none;
  vertical-align: top;
}

.dm-vs-table tbody > tr:hover > *:not(.dm-vs-us) { background: none; }

.dm-vs-table thead th {
  padding-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dm-border-hairline);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dm-text-tertiary);
}

/* Through `tbody >`/`thead >` so it outweighs the cell reset above — see the
   note there about the plugin rule that forced its specificity up. */
.dm-vs-table tbody > tr:nth-child(n) > .dm-vs-us,
.dm-vs-table thead > tr:nth-child(n) > .dm-vs-us { background: var(--dm-surface-card); }

.dm-vs-table thead > tr > .dm-vs-us { color: var(--dm-accent-primary); }

/* The last row closes on the section, not on a rule of its own. */
.dm-vs-table tbody > tr:last-child > * { border-bottom: 0; }

.dm-vs-table tbody th[scope="row"] {
  width: 32%;
  font-size: var(--dm-text-body-sm);
  font-weight: 400;
  color: var(--dm-text-secondary);
}

.dm-vs-table tbody td {
  font-size: var(--dm-text-body-sm);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

.dm-vs-table tbody .dm-vs-us { color: var(--dm-ink); font-weight: 600; }

.dm-vs-highlight th[scope="row"],
.dm-vs-highlight td {
  padding-block: 26px;
  font-size: var(--dm-text-body-md);
}

.dm-vs-highlight th[scope="row"] { color: var(--dm-ink); font-weight: 600; }
.dm-vs-highlight .dm-vs-us { font-family: var(--dm-font-display); font-weight: 400; font-size: var(--dm-text-h4); }

/* ==========================================================================
   Responsive — the sections above
   ========================================================================== */
@media (max-width: 1100px) {
  .dm-shero-grid,
  .dm-split-grid { grid-template-columns: 1fr; gap: 40px; }
  .dm-split-claim .dm-h2 { max-width: none; }
  .dm-steps-list { grid-template-columns: repeat(2, 1fr); }
  .dm-cases-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .dm-shero .dm-container { padding-block: 48px 56px; }
  .dm-shero-actions .dm-btn { flex: 1 1 100%; justify-content: center; }
  .dm-shero-figures { grid-template-columns: 1fr; gap: 18px; }
  .dm-steps-list,
  .dm-cases-grid--4,
  .dm-ba-grid { grid-template-columns: 1fr; }
  .dm-logostrip-row { gap: 20px 28px; }
  .dm-logostrip-row img { height: 24px; }
}

/* ==========================================================================
   video-hero
   ========================================================================== */
.dm-vhero .dm-container {
  padding-block: 72px 88px;
  max-width: 1000px;
  text-align: center;
}

.dm-vhero-title {
  font-family: var(--dm-font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: var(--dm-leading-display);
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
}

.dm-vhero-lede {
  max-width: 52ch;
  margin: 18px auto 0;
  font-size: var(--dm-text-body-lg);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

.dm-vhero-actions { margin-top: 28px; }

.dm-vhero-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--dm-text-tertiary);
}

.dm-vhero-media { margin-top: 44px; }

.dm-vhero-poster {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--dm-radius-card-inner);
  background: var(--dm-surface-card);
  box-shadow: var(--dm-shadow-soft);
}

.dm-vhero-poster img {
  display: block;
  width: 100%;
  height: auto;
}

.dm-vhero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--dm-surface-white);
  color: var(--dm-ink);
  box-shadow: var(--dm-shadow-soft);
  transition: transform .18s var(--dm-ease-press, ease);
}

/* The nudge is motion; keep it behind the flag like everything else. */
.dm-motion .dm-vhero-poster:hover .dm-vhero-play { transform: translate(-50%, -50%) scale(1.08); }

.dm-vhero-poster:focus-visible {
  outline: 2px solid var(--dm-ink);
  outline-offset: 3px;
}

/* The dialog the poster opens. `dialog` brings the backdrop, Escape and the
   focus trap with it, which is why this is not a div. */
/* Centring is stated rather than inherited: a `dialog` is centred by the UA
   through `margin: auto`, and something in the theme's cascade resets margin on
   it — measured `margin: 0` and the panel pinned to the top-left corner. So the
   inset/margin/size are all explicit here. `height: fit-content` is what lets
   the auto margins centre it vertically. */
.dm-video-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1100px, 92vw);
  height: fit-content;
  max-width: 92vw;
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: var(--dm-radius-card);
  background: #000;
  overflow: hidden;
}

.dm-video-dialog::backdrop { background: rgb(0 0 0 / .72); }

.dm-video-dialog iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.dm-video-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .9);
  color: #21221D;
  cursor: pointer;
}

/* ==========================================================================
   alternating-features
   ========================================================================== */
.dm-alt--card { background: var(--dm-surface-card); }

/* The head sits on the copy column's grid line, not centred over the whole
   row — a title starting where the row's text starts is what makes the run read
   as one block. */
.dm-alt-head {
  max-width: 62ch;
  margin-bottom: 56px;
}

.dm-alt-head .dm-h2 { margin-top: 12px; font-size: var(--dm-text-h3); }
.dm-alt-head .dm-lead { max-width: 60ch; margin-top: 12px; }

/* The media is capped and the column is the smaller half. A full-height render
   beside three lines of copy leaves most of the row empty, which is what "too
   big, lots of empty space" looks like — the cap is what makes the run dense.
   Raise --dm-alt-media on a page whose artwork genuinely needs the room. */
.dm-alt-row {
  --dm-alt-media: 320px;

  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 48px;
  align-items: center;
}

.dm-alt-row--flip { grid-template-columns: 0.8fr 1fr; }

.dm-alt-row + .dm-alt-row { margin-top: 56px; }

/* The swap is done by moving the media, so the DOM keeps copy-then-image and
   a screen reader gets the same order on every row. */
.dm-alt-row--flip .dm-alt-media { grid-row: 1; grid-column: 1; }

.dm-alt-copy h3 {
  font-family: var(--dm-font-display);
  font-weight: 400;
  font-size: var(--dm-text-h3);
  line-height: var(--dm-leading-display);
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
}

.dm-alt-copy p {
  max-width: 52ch;
  margin-top: 16px;
  font-size: var(--dm-text-body-md);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

:where(.dm) .dm-alt-copy .dm-btn { margin-top: 26px; }

.dm-alt-media {
  overflow: hidden;
  border-radius: var(--dm-radius-card-inner);
  background: var(--dm-surface-card);
}

.dm-alt-media img {
  display: block;
  width: 100%;
  height: var(--dm-alt-media);
  object-fit: cover;
}

@media (max-width: 900px) {
  .dm-alt-row { grid-template-columns: 1fr; gap: 28px; }
  .dm-alt-row + .dm-alt-row { margin-top: 64px; }
  /* One column: the media always follows its copy, flip or not. */
  .dm-alt-row--flip .dm-alt-media { grid-row: auto; grid-column: auto; }
  .dm-alt-copy p { max-width: none; }
  .dm-vhero .dm-container { padding-block: 48px 64px; }
  .dm-vhero-play { width: 56px; height: 56px; }
}

/* video-hero's still variant: no play chip, nothing to click. */
.dm-vhero-poster--still { margin: 0; cursor: default; }
.dm-vhero-poster--still .dm-vhero-play { display: none; }

/* numbered-steps' optional diagram. */
.dm-steps-figure {
  margin: 0 0 56px;
  overflow: hidden;
  border-radius: var(--dm-radius-card-inner);
  background: var(--dm-surface-raised);
}

.dm-steps-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- use-case-cards: the fuller card (tag, check list, its own CTA) ---- */
.dm-case-tag {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dm-accent-primary);
  margin-top: 18px;
}

.dm-case-tag + h3 { margin-top: 8px; }

.dm-case-items { margin-top: 16px; }
.dm-case-items li { font-size: 13px; }

:where(.dm) .dm-case-cta { margin-top: 20px; }

.dm-vs-cta {
  margin-top: 40px;
  text-align: center;
}

/* A heading and a footnote around the figures. The strip is normally a bare row
   between two heavier sections; both of these are opt-in. */
.dm-strip-title {
  margin: 0 0 32px;
  text-align: center;
}

.dm-strip-note {
  max-width: 70ch;
  margin: 28px auto 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dm-text-tertiary);
  text-align: center;
}