/* ==========================================================================
   Design Foundations (design-foundations.html) — page-only styles.
   Built from the approved Round 2 design (Dropbox: DesignedByVenu Website/Marketing/Claude/
   Design Foundations Round 2 2026-10-19/source/design-foundations.html). Every class is prefixed df- and every rule sits
   under .df, so nothing here can touch another page. Colours come from the site tokens (css/tokens.css); the only
   literal hex values are the fixed specimens of the corporate palette and of the light and dark interface, which show
   the same colours in either theme on purpose (governance v1.1).
   Separators: --df-rule, a neutral tint of the text color (12%), not the sky-tinted --color-border, so the page's
   hairlines read as quiet gray structure in both themes. Cards and the grid specimen keep their own borders. A list
   that is followed by a stronger rule (a chapter opener, a 2px heading rule) has no closing hairline of its own.
   ========================================================================== */

.df { --df-gutter: var(--gutter); --df-ch: 120px; --df-rule: color-mix(in srgb, var(--color-text) 12%, transparent); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.df h1, .df h2, .df h3, .df h4, .df p, .df figure, .df dl, .df dd { margin: 0; }
.df ul, .df ol { list-style: none; margin: 0; padding: 0; }
.df img { display: block; max-width: 100%; height: auto; }
.df .df-muted { color: var(--color-text-muted); }
.df .df-cap { font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.df .df-cap b { color: var(--color-text); }
.df .df-label { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.df .df-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--df-gutter); }

/* Intro and contents */
.df-intro { padding-top: 104px; }
.df-intro__grid { row-gap: 24px; align-items: end; }
.df-intro__eyebrow { grid-column: 1 / -1; }
.df-intro h1 { grid-column: span 9; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.25rem, 7.6vw, 7rem); line-height: 0.94; letter-spacing: -0.04em; margin-top: 24px; }
.df-intro__lede { grid-column: span 3; font-size: 1.125rem; line-height: 1.5; color: var(--color-text-muted); }
.df-toc { margin-top: 72px; display: flex; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--df-rule); }
.df-toc__h { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-muted); padding: 0 28px 0 0; display: flex; align-items: center; white-space: nowrap; }
.df-toc a { flex: 1; white-space: nowrap; display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 0 18px; text-decoration: none; color: var(--color-text); font-weight: 700; font-size: 0.9375rem; border-left: 1px solid var(--df-rule); }
.df-toc a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.df-toc a span, .df-jump a span { font-family: var(--font-display); font-weight: 500; color: var(--color-text-muted); font-size: 0.8125rem; }
.df-jump { display: none; }

/* Chapter frame */
/* The space above each chapter is margin, not padding, so the chapter's own box starts at its opener. An "On this page"
   link, a #chapter URL and back/forward then land the opener (rule, number, title) 32px under the sticky header:
   base.css's 16px scroll-padding plus this 16px. With padding, the whole --df-ch gap sat below the header (104–136px). */
.df-ch { margin-top: var(--df-ch); scroll-margin-top: 16px; }
.df-ch__head { row-gap: 24px; padding-bottom: 56px; }
.df-ch__idx { grid-column: span 3; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--color-text); }
.df-ch__idx b { font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; }
.df-ch__idx span { font-size: 0.8125rem; color: var(--color-text-muted); }
.df-ch__idx a { font-size: 0.8125rem; font-weight: 700; margin-top: 6px; text-decoration: none; color: var(--color-accent); }
.df-ch__title { grid-column: span 9; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.035em; }
.df-ch__lede { grid-column: 4 / span 7; font-size: 1.1875rem; line-height: 1.55; color: var(--color-text-muted); }

/* 01 Design philosophy */
.df-prin { row-gap: 20px; padding: 40px 0; border-top: 1px solid var(--df-rule); align-items: start; }
.df-prin__n { grid-column: span 1; font-family: var(--font-display); font-weight: 500; color: var(--color-text-muted); padding-top: 6px; }
.df-prin__t { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; padding-right: 12px; }
.df-prin h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.1; letter-spacing: -0.02em; }
.df-prin__s { grid-column: span 7; display: flex; flex-direction: column; gap: 12px; }
.df-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--df-gutter); row-gap: 20px; }
.df-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding-top: 16px; border-top: 2px solid var(--color-text); }
.df-stat dd { font-family: var(--font-display); font-weight: 800; font-size: 2.875rem; line-height: 1; letter-spacing: -0.03em; }
.df-stat dt { font-size: 0.875rem; line-height: 1.4; color: var(--color-text-muted); }
.df-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.df-thumb { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; }
.df-thumb img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.df-thumb div { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.df-thumb__k { font-size: 0.75rem; color: var(--color-text-muted); }
.df-thumb__k b { color: var(--color-text); }
.df-thumb h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.df-focus-demo { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.df-focus-demo .df-cap { flex: 1; min-width: 220px; }
.df .df-ring { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* 02 Identity */
.df-id { row-gap: 24px; }
.df-mark { grid-column: span 6; border-radius: var(--radius-lg); min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 28px; }
.df-mark img { width: min(420px, 80%); align-self: center; }
.df-mark--light { background: #e6e6e6; border: 1px solid #c5d6e2; color: #4a5162; }
.df-mark--dark { background: #0f1d33; border: 1px solid #0f1d33; color: #9aa5b8; }
.df-mark__c { font-size: 0.8125rem; display: flex; justify-content: space-between; gap: 12px; }
.df-palette { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--df-rule); border-bottom: 1px solid var(--df-rule); }
.df-palette ul { display: flex; flex-wrap: wrap; gap: 10px; }
.df-palette li { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--color-text-muted); margin-right: 14px; }
.df-swatch { display: block; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127, 140, 160, 0.45); }
.df-apps { display: grid; grid-template-columns: 7fr 3fr 3fr; gap: var(--df-gutter); align-items: end; margin-top: 48px; }
.df-app { display: flex; flex-direction: column; gap: 12px; }
.df-frame { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); background: #fff; }
.df-frame--crop { aspect-ratio: 1242 / 1600; } /* ends above the letterhead's footer rule (source rows 1657+) */
.df-frame--crop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.df-cards { display: flex; flex-direction: column; gap: 10px; }
.df-app figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; line-height: 1.4; color: var(--color-text-muted); }
.df-app figcaption b { color: var(--color-text); font-size: 0.875rem; }

/* 03 Visual language */
.df-type { align-items: start; }
.df-type__big { grid-column: span 5; display: flex; flex-direction: column; gap: 10px; }
.df-type__aa { font-family: var(--font-display); font-weight: 800; font-size: clamp(9.375rem, 19vw, 17.5rem); line-height: 0.84; letter-spacing: -0.06em; }
.df-type__faces { display: flex; flex-direction: column; gap: 12px; }
.df-type__faces b { display: block; line-height: 1.15; }
.df-type__scale { grid-column: 7 / span 6; }
.df-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--df-rule); }
.df-row code { font: 500 0.75rem/1.4 var(--font-mono); color: var(--color-text-muted); }
.df-colour { row-gap: 24px; margin-top: 88px; }
.df-sys { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid var(--color-text); }
.df-sys h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.df-sys--brand { grid-column: span 4; }
.df-sys--ui { grid-column: span 8; }
.df-dots { display: flex; gap: 8px; }
.df-dots .df-swatch { width: 40px; height: 40px; box-shadow: inset 0 0 0 1px rgba(127, 140, 160, 0.35); }
.df-surfaces { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.df-surf { border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.df-surf--light { background: #e6e6e6; border: 1px solid #c5d6e2; color: #15181e; }
.df-surf--dark { background: #0a0f1a; border: 1px solid #1f3a5f; color: #e7eaf0; }
.df-surf__k { font-size: 0.75rem; font-weight: 700; }
.df-surf--light .df-surf__k { color: #4a5162; }
.df-surf--dark .df-surf__k { color: #9aa5b8; }
.df-surf__card { border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.df-surf--light .df-surf__card { background: #eef6fb; border: 1px solid #c5d6e2; }
.df-surf--dark .df-surf__card { background: #0f1d33; border: 1px solid #1f3a5f; }
.df-surf__eb { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.df-surf__h { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.15; }
.df-surf__a { font-size: 0.8125rem; text-decoration: underline; }
.df-surf--light .df-surf__eb, .df-surf--light .df-surf__a { color: #0369a1; }
.df-surf--dark .df-surf__eb, .df-surf--dark .df-surf__a { color: #38bdf8; }
.df-surf__btn { align-self: flex-start; background: #c2410c; color: #fff; font-weight: 700; font-size: 0.8125rem; padding: 10px 14px; border-radius: var(--radius-sm); }
.df-oranges { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 5fr 5fr; column-gap: var(--df-gutter); row-gap: 16px; align-items: center; padding: 28px 0; border-top: 1px solid var(--df-rule); }
.df-oranges > div { display: flex; gap: 16px; align-items: center; }
.df-oranges__h { font-family: var(--font-display); font-size: 1.25rem; }
.df-oranges__dot { display: block; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-orange); }
.df-oranges .btn { flex-shrink: 0; pointer-events: none; }
.df-grid-demo { position: relative; margin-top: 88px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); padding: 36px 24px 40px; }
.df-grid-demo__cols { position: absolute; inset: 0 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; pointer-events: none; }
.df-grid-demo__cols i { background: var(--color-accent-soft); }
.df-grid-demo__content { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 14px; }
.df-grid-demo__t { font-size: 0.75rem; font-weight: 700; color: var(--color-accent); }
.df-grid-demo__big { grid-column: span 8; font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; }

/* 04 Interaction in practice */
.df .df-board { column-gap: 0; } /* ruled cells abut, so the grid lines connect */
.df-board { border-top: 1px solid var(--df-rule); border-left: 1px solid var(--df-rule); }
.df-cell { grid-column: span 4; border-right: 1px solid var(--df-rule); border-bottom: 1px solid var(--df-rule); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.df-cell--6 { grid-column: span 6; }
.df-cell__ttl { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-muted); }
.df-cell__why { font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); margin-top: auto; }
.df-cell__why b { color: var(--color-text); }
.df-vema-pill { /* a still sample of the header's Ask VEMA button (Issue #18, Option B); the live one is built by js/vema.js */
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; height: 40px; padding: 0 0.85rem 0 0.25rem;
  border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text); font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}
.df-vema-pill .vema-chat-icon { width: 30px; height: 30px; }
.df-cs-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.df-cs-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.df-cs-card__main { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.df-cs-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; line-height: 1.15; }
.df-cs-card .btn { align-self: flex-start; margin-top: 6px; }
.df-cs-type { font-size: 0.8125rem; color: var(--color-text-muted); }
.df-cs-type strong { color: var(--color-text); }
.df-cs-desc { font-size: 0.875rem; color: var(--color-text-muted); }
.df-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.df-field { display: flex; flex-direction: column; gap: 6px; }
.df-field__label { font-size: 0.875rem; font-weight: 700; }
.df-field__in { height: 48px; border: 1px solid var(--color-error); border-radius: var(--radius-sm); background: var(--color-surface); padding: 0 14px; display: flex; align-items: center; font-size: 1rem; }
.df-field__error { font-size: 0.875rem; font-weight: 500; color: var(--color-error); }
.df-field__error::before { content: "! "; font-weight: 700; }
.df-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.df-note { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.df-note svg { flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; }

/* 05 Design responsibility */
.df-chk { display: grid; grid-template-columns: 40px minmax(0, 4fr) minmax(0, 5fr); column-gap: var(--df-gutter); row-gap: 12px; padding: 26px 0; border-top: 1px solid var(--df-rule); align-items: start; }
.df-chk .df-label { padding-top: 4px; }
.df-chk h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em; }
.df-chk p { font-size: 0.9375rem; color: var(--color-text-muted); margin-top: 6px; }
.df-ev { display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.df-ev__src { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.df-ev__src b { color: var(--color-text); font-weight: 700; }
.df-kbd { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: 6px; font: 700 0.75rem/1 var(--font-body); color: var(--color-text); background: var(--color-surface); }
.df-auth { row-gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 2px solid var(--color-text); }
.df-auth > div { grid-column: span 4; display: flex; flex-direction: column; gap: 8px; }
.df-auth__q { font-family: var(--font-display); font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; }
.df-auth p { font-size: 0.9375rem; color: var(--color-text-muted); }
.df-close { row-gap: 24px; align-items: end; margin-top: 88px; padding-bottom: 112px; }
.df-close p { grid-column: span 7; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em; }
.df-close nav { grid-column: 9 / span 4; border-top: 1px solid var(--df-rule); }
.df-close nav a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--df-rule); text-decoration: none; font-weight: 700; font-size: 1.0625rem; color: var(--color-accent); }

@media (min-width: 1024px) and (max-width: 1199px) {
  .df-toc a { padding: 0 12px; }
  .df-toc__h { padding-right: 16px; }
}

/* ---------- Tablet (768–1023) ---------- */
@media (max-width: 1023px) {
  .df { --df-ch: 88px; }
  .df-intro { padding-top: 72px; }
  .df-intro h1, .df-intro__lede { grid-column: 1 / -1; }
  .df-intro__lede { max-width: 560px; }
  .df-toc { display: none; }
  .df-jump { display: block; margin-top: 40px; border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--df-rule); }
  .df-jump summary { list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 0.9375rem; cursor: pointer; }
  .df-jump summary::-webkit-details-marker { display: none; }
  .df-jump summary svg { width: 18px; height: 18px; transition: transform 0.2s; }
  .df-jump[open] summary svg { transform: rotate(180deg); }
  .df-jump a { display: flex; gap: 12px; align-items: center; min-height: 48px; border-top: 1px solid var(--df-rule); text-decoration: none; color: var(--color-text); font-weight: 700; font-size: 0.9375rem; }
  .df-jump a span { font-size: 0.75rem; width: 20px; }
  .df-ch__lede { grid-column: 4 / span 9; font-size: 1.0625rem; }
  .df-prin__t { grid-column: span 11; }
  .df-prin__s { grid-column: 2 / span 11; }
  .df-stat dd { font-size: 2.25rem; }
  .df-apps { grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
  .df-type__big { grid-column: span 4; }
  .df-type__scale { grid-column: 5 / span 8; }
  .df-sys--brand, .df-sys--ui, .df-oranges { grid-column: 1 / -1; }
  .df-oranges { grid-template-columns: 1fr 1fr; }
  .df-oranges > div:first-child { grid-column: span 2; }
  .df-grid-demo__cols, .df-grid-demo__content { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .df-grid-demo__cols i:nth-child(n + 9) { display: none; }
  .df-cell, .df-cell--6 { grid-column: span 6; }
  .df-cell--vema { grid-column: span 12; } /* tablet: the fifth cell takes the row instead of leaving half of it empty */
  .df-chk { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); }
  .df-auth > div { grid-column: span 6; }
  .df-auth > div:first-child { grid-column: 1 / -1; }
  .df-close p, .df-close nav { grid-column: 1 / -1; }
}

/* ---------- Phone (≤ 599) ---------- */
@media (max-width: 599px) {
  .df { --df-ch: 56px; --df-gutter: 12px; }
  .df-intro { padding-top: 44px; }
  .df-intro h1 { font-size: 3rem; margin-top: 16px; text-wrap: wrap; }
  .df-intro__lede { font-size: 1rem; }
  .df-jump { margin-top: 28px; }
  .df-ch__head { padding-bottom: 28px; row-gap: 14px; }
  .df-ch__idx { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; padding-top: 10px; }
  .df-ch__idx a { display: none; }
  .df-ch__title, .df-ch__lede { grid-column: 1 / -1; }
  .df-ch__title { font-size: 2.125rem; line-height: 1.04; }
  .df-ch__lede { font-size: 1rem; line-height: 1.5; }
  .df-prin { padding: 24px 0; row-gap: 12px; }
  .df-prin__n { display: none; }
  .df-prin__t, .df-prin__s { grid-column: 1 / -1; padding: 0; }
  .df-prin h3 { font-size: 1.5rem; }
  .df-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .df-stat dd { font-size: 2rem; }
  .df-stat dt { font-size: 0.8125rem; }
  .df-thumbs { display: flex; flex-direction: column; gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
  .df-thumb { flex-direction: row; align-items: center; border: 0; border-radius: 0; border-top: 1px solid var(--color-border); background: transparent; }
  .df-thumb:first-child { border-top: 0; }
  .df-thumb img { width: 96px; flex-shrink: 0; align-self: stretch; aspect-ratio: auto; }
  .df-thumb div { padding: 12px 14px; }
  .df-thumb h4 { font-size: 1rem; }
  .df-focus-demo { padding: 18px; gap: 14px; }
  .df-mark { grid-column: span 6; min-height: 124px; padding: 12px; border-radius: var(--radius-md); }
  .df-mark img { width: 100%; min-width: 120px; }
  .df-mark__c:last-child { display: none; }
  .df-palette { gap: 12px; padding: 16px 0; }
  .df-palette li { margin-right: 4px; }
  .df-palette li span { display: none; }
  .df-apps { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; align-items: end; }
  .df-apps .df-app:first-child { grid-column: span 2; }
  .df-app figcaption { font-size: 0.75rem; }
  .df-frame--crop { aspect-ratio: 4 / 5; }
  .df-type__big { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; gap: 16px; }
  .df-type__aa { font-size: 8.25rem; }
  .df-type__scale { grid-column: 1 / -1; margin-top: 20px; }
  .df-row { grid-template-columns: 1fr; row-gap: 4px; padding: 12px 0; }
  .df-row--opt, .df-cs-desc { display: none; }
  .df-colour { margin-top: 48px; row-gap: 28px; }
  .df-sys--brand .df-dots { display: none; }
  .df-surfaces { gap: 10px; }
  .df-surf { padding: 12px; gap: 8px; }
  .df-surf__card { padding: 10px; }
  .df-oranges { grid-template-columns: 1fr; padding: 20px 0; }
  .df-oranges > div:first-child { grid-column: auto; }
  .df-grid-demo { display: none; }
  .df-cs-card img { aspect-ratio: 16 / 9; }
  .df .df-board { display: block; border: 0; } /* .df .df-grid12 would keep it a grid */
  .df-cell { border: 0; border-top: 1px solid var(--df-rule); padding: 22px 0; gap: 14px; }
  .df-cell--vema { display: none; } /* phones: as in the approved Round 2 design */
  .df-chk { grid-template-columns: 28px minmax(0, 1fr); padding: 20px 0; }
  .df-chk .df-ev { grid-column: 2; }
  .df-chk h3 { font-size: 1.1875rem; }
  .df-auth { margin-top: 40px; padding-top: 20px; }
  .df-auth > div { grid-column: 1 / -1; }
  .df-close { margin-top: 56px; padding-bottom: 64px; }
}

/* Narrowest phones (≤ 359px): the light and dark token cards stack, so their labels and headings don't break mid-word. */
@media (max-width: 359px) {
  .df-surfaces { grid-template-columns: 1fr; }
}

/* Chapter openers (≥ 600px): the index column (rule, number, label, back link) spans the title and lede rows, so a
   one-line title is followed by its lede directly instead of by the index column's height. */
@media (min-width: 600px) {
  .df-ch__idx { grid-row: span 2; align-self: start; }
}