/* FARMRISK — Design System page (documentation layout only; components live in main.css) */

/* Cover — after the design system cover card: dunkelgruen slab with Doppelspur, hellgruen and weissgrau blocks */
.ds-cover { padding-top: calc(var(--header-top) + 88px); }
.ds-cover__frame {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: clamp(380px, 46vw, 560px);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line);
}
.ds-cover__text { display: grid; gap: var(--s-5); align-content: end; justify-items: start; padding: clamp(24px, 4vw, 64px); }
.ds-cover__text h1 { font-size: var(--fs-headline); line-height: .98; }
.ds-cover__text .t-lead { max-width: 30ch; }
.ds-cover__art { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 4fr 3fr; }
.ds-cover__slab { grid-row: 1 / -1; background: var(--dunkelgruen); overflow: hidden; display: flex; align-items: flex-end; }
.ds-cover__slab svg { width: 100%; height: 100%; }
.ds-cover__slab path { fill: none; stroke: var(--gelbgruen); stroke-width: 34; }
.ds-cover__hell { background: var(--hellgruen); }
.ds-cover__grau { background: var(--weissgrau); }
@media (max-width: 860px) {
  .ds-cover__frame { grid-template-columns: 1fr; }
  .ds-cover__art { min-height: 240px; order: -1; }
}

/* Layout */
.ds-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); padding-top: clamp(48px, 6vw, 96px); padding-bottom: var(--section); }
.ds-nav { position: sticky; top: 104px; align-self: start; max-height: calc(100svh - 128px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.ds-nav__group { text-transform: uppercase; margin: var(--s-5) 0 var(--s-2); }
.ds-nav__group:first-child { margin-top: 0; }
.ds-nav__list { display: grid; gap: 1px; }
.ds-nav__list a {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: var(--radius-xs);
  font-size: var(--fs-meta); line-height: 1.3; text-decoration: none;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.ds-nav__list a span { font-variant-numeric: tabular-nums; opacity: .7; min-width: 34px; }
.ds-nav__list a:hover { background: var(--weissgrau); }
.ds-nav__list a.is-active { background: var(--dunkelgruen); color: var(--weiss); }
.ds-nav__list a.is-active span { opacity: 1; color: var(--gelbgruen); }
@media (max-width: 1000px) {
  .ds-layout { grid-template-columns: minmax(0, 1fr); }
  .ds-nav {
    position: sticky; top: calc(var(--header-top) + 64px); z-index: 10; max-height: none; overflow-x: auto; overflow-y: hidden;
    display: flex; gap: 6px; padding: 8px; margin-inline: calc(var(--gutter) * -1); border-radius: 0;
    background: var(--weiss); box-shadow: inset 0 -1px 0 var(--line); scrollbar-width: none;
  }
  .ds-nav::-webkit-scrollbar { display: none; }
  .ds-nav__group { display: none; }
  .ds-nav__list { display: flex; gap: 4px; }
  .ds-nav__list a { white-space: nowrap; }
}

.ds-content { min-width: 0; }
.ds-part {
  display: flex; align-items: center; gap: var(--s-4);
  margin: clamp(32px, 4vw, 56px) 0 var(--s-5); font-size: var(--fs-meta); text-transform: uppercase;
  scroll-margin-top: 120px;
}
.ds-part:first-child { margin-top: 0; }
.ds-part::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

.ds-section { padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.ds-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: baseline; margin-bottom: var(--s-3); }
.ds-head h2 { font-size: var(--fs-subline); line-height: 1.15; }
.ds-head p { grid-column: 1 / -1; max-width: 70ch; font-size: var(--fs-small); }
.ds-head code, .ds-dl code, .ds-type__spec code, .ds-section .t-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; padding: 1px 6px; border-radius: 6px; background: var(--weissgrau); }
.ds-code { display: inline-grid; place-items: center; padding: 4px 10px; border-radius: var(--pill); background: var(--dunkelgruen); color: var(--gelbgruen); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.ds-sub { font-size: var(--fs-body); margin-top: var(--s-4); }
.ds-caption { font-size: var(--fs-meta); margin-top: calc(var(--s-3) * -1); }

/* Demo panels */
.ds-demo {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding: clamp(20px, 3vw, 40px); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line);
  background: var(--weiss);
}
.ds-demo--grau { background: var(--weissgrau); box-shadow: none; }
.ds-demo--dark { background: var(--dunkelgruen); box-shadow: none; }
.ds-demo--photo { background: var(--dunkelgruen) url("../img/feldspritze-luftbild-sm.webp") center / cover; box-shadow: none; min-height: 160px; }
.ds-demo--block { display: block; }
.ds-demo--stack { display: grid; justify-items: start; }
.ds-demo--stack > .progress, .ds-demo--stack > .callout, .ds-demo--stack > .stepper { width: 100%; }
.ds-demo--bare { padding: 0; box-shadow: none; background: none; display: block; }
.ds-demo--bare.ds-demo--stack { display: grid; gap: 12px; justify-items: stretch; }
.ds-demo--clip { overflow: hidden; border-radius: var(--radius); }
.ds-demo .nav { max-width: none; }
/* The desktop bar needs about 1100 px; in the narrower content column show its links from 1180 px */
@media (min-width: 1180px) { .ds-demo .nav__links.ds-force-show { display: flex; } }
@media (max-width: 1179px) { .ds-demo .nav__lang.ds-force-show { display: none; } }
.ds-force-flex { display: inline-flex !important; }
.ds-hero { height: clamp(320px, 40vw, 460px); min-height: 0; }
.ds-hero .hero__media img { transform: none; }
.ds-hero .hero__title { font-size: var(--fs-headline-s); }
.ds-hero .hero__content { padding: clamp(20px, 3vw, 40px); }
.ds-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ds-tiles .tile { min-height: 200px; }
/* C-02: products menu and phone menu shown in place */
.ds-mega { position: static; visibility: visible; pointer-events: auto; clip-path: none; transition: none; }
@media (max-width: 900px) { .ds-mega { display: block; } .ds-mega .mega__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-mega .mega__panel { max-height: none; }
.ds-mega .mega__group, .ds-mega .mega__aside { opacity: 1; transform: none; }
.ds-menu li { opacity: 1; transform: none; }
.ds-menu .menu__expand, .ds-menu > li > a { font-size: clamp(2rem, 4vw, 3rem); }
/* C-07: the four colour fields side by side */
.ds-markfields { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .ds-markfields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-narrow { max-width: 460px; }
.ds-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.ds-two .acard--soon { grid-column: auto; }
@media (max-width: 700px) { .ds-two { grid-template-columns: 1fr; } }
.ds-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
@media (max-width: 700px) { .ds-form { grid-template-columns: 1fr; } }
.ds-static { position: static; }
.ds-footer-logo { width: 100%; }
.ds-footer-logo svg { width: 100%; fill: var(--gelbgruen); }

/* Code panel (generated by design-system.js) */
.ds-codebox { margin-top: calc(var(--s-3) * -1); border-radius: var(--radius-sm); background: var(--weissgrau); }
.ds-codebox summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 16px; cursor: pointer; list-style: none; font-size: var(--fs-meta); }
.ds-codebox summary::-webkit-details-marker { display: none; }
.ds-codebox summary::after { content: "+"; font-weight: 800; font-size: 18px; line-height: 1; transition: transform var(--dur-2); }
.ds-codebox[open] summary::after { transform: rotate(45deg); }
.ds-codebox pre { margin: 0; max-height: 360px; overflow: auto; padding: 0 16px 16px; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; tab-size: 2; }
.ds-codebox__copy { margin: 0 16px 16px; }

/* Swatches */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.ds-swatch { display: grid; gap: 4px; justify-items: start; padding: 0 0 14px; border: 0; background: none; text-align: left; cursor: copy; border-radius: var(--radius); }
.ds-swatch__chip { width: 100%; aspect-ratio: 1; border-radius: var(--radius); background: var(--c); margin-bottom: 8px; transition: transform var(--dur-3) var(--ease-spring); }
.ds-swatch__chip--line { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ds-swatch:hover .ds-swatch__chip { transform: scale(.96); }
.ds-swatch__name { font-weight: 800; }
.ds-swatch__hex { font-variant-numeric: tabular-nums; }
.ds-swatch__meta { font-size: var(--fs-meta); }
.ds-swatch.is-copied .ds-swatch__hex::after { content: " · kopiert"; }

.ds-share { display: flex; height: 120px; border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ds-share__seg { flex: 0 0 calc(var(--w) * 1%); background: var(--c); display: flex; align-items: flex-end; padding: 10px; font-size: var(--fs-meta); min-width: 0; transform-origin: left; }
html.js .ds-share__seg { flex-basis: 0; transition: flex-basis 1.2s var(--ease-out); }
html.js .ds-share.is-in .ds-share__seg { flex-basis: calc(var(--w) * 1%); }
.ds-share__seg--dark { color: var(--weiss); }
.ds-share__seg b { font-weight: 800; white-space: nowrap; }

.ds-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ds-rules > div { padding: 20px; border-radius: var(--radius-sm); font-size: var(--fs-small); }
.ds-rules ul { padding-left: 1.1em; display: grid; gap: 6px; }
.ds-rules__title { font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ds-do { background: var(--weissgrau); }
.ds-do .ds-rules__title::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hellgruen); font-size: 12px; }
.ds-dont { background: var(--dunkelgruen); color: var(--weiss); }
.ds-dont .ds-rules__title::before { content: "✕"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gelbgruen); color: var(--dunkelgruen); font-size: 12px; }
@media (max-width: 700px) { .ds-rules { grid-template-columns: 1fr; } }

/* Pairs */
.ds-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.ds-pair { display: grid; gap: 4px; padding: 18px; border-radius: var(--radius-sm); min-height: 140px; align-content: space-between; }
.ds-pair b { font-size: 40px; line-height: 1; font-weight: 800; }
.ds-pair span { font-size: var(--fs-meta); }
.ds-pair em { font-style: normal; font-size: var(--fs-meta); font-weight: 800; }
.ds-pairs--no .ds-pair { position: relative; }
.ds-pairs--no .ds-pair::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: currentColor; transform: rotate(-12deg); opacity: .6; }

/* Type */
.ds-type { display: grid; }
.ds-type__row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.ds-type__spec { display: grid; gap: 4px; font-size: var(--fs-meta); }
.ds-type__spec b { font-size: var(--fs-small); }
.ds-type__spec code { justify-self: start; }
@media (max-width: 760px) { .ds-type__row { grid-template-columns: 1fr; gap: var(--s-3); } }
/* Type samples scale down with their column so long single words ("Landwirtschaft") never run past it */
.ds-type { container-type: inline-size; }
.ds-type__row > p { min-width: 0; }
/* sample column = list width minus the 200px label column and 24px gap */
.ds-type__row > .t-headline { font-size: min(var(--fs-headline), calc((100cqi - 224px) * .12)); }
.ds-type__row > .t-headline-s { font-size: min(var(--fs-headline-s), calc((100cqi - 224px) * .095)); }
@media (max-width: 760px) {
  .ds-type__row > .t-headline { font-size: min(var(--fs-headline), 12cqi); }
  .ds-type__row > .t-headline-s { font-size: min(var(--fs-headline-s), 9.5cqi); }
}
.ds-ratio { display: flex; align-items: flex-end; gap: var(--s-5); padding: var(--s-5); border-radius: var(--radius); background: var(--weissgrau); }
.ds-ratio > div { display: grid; gap: 8px; justify-items: center; font-size: var(--fs-meta); }
.ds-ratio__box { width: calc(var(--k) * 24px); height: calc(var(--k) * 24px); border-radius: 8px; background: var(--dunkelgruen); }
.ds-ratio > div:nth-child(2) .ds-ratio__box { background: var(--hellgruen); }
.ds-ratio > div:nth-child(3) .ds-ratio__box { background: var(--weiss); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Logo */
.ds-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ds-logos figure { display: grid; place-items: center; gap: 16px; padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px) 16px; border-radius: var(--radius); min-height: 200px; }
.ds-logos img { width: min(100%, 320px); }
.ds-logos figcaption { font-size: var(--fs-meta); justify-self: start; }
.ds-logos figure[style*="#0d1a13"] figcaption { color: var(--weissgrau); }
@media (max-width: 700px) { .ds-logos { grid-template-columns: 1fr; } }
.ds-logo-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
@media (max-width: 860px) { .ds-logo-row { grid-template-columns: 1fr; } }
.ds-clear, .ds-marks { display: grid; gap: var(--s-4); padding: 24px; border-radius: var(--radius); background: var(--weissgrau); align-content: space-between; }
.ds-clear figcaption, .ds-marks figcaption { font-size: var(--fs-meta); }
.ds-clear__stage { display: grid; place-items: center; padding: 16px; }
.ds-clear__box { --m: 34px; position: relative; padding: var(--m) var(--m); background: var(--weiss); outline: 1px dashed var(--line-strong); outline-offset: 0; }
.ds-clear__box::before { content: ""; position: absolute; inset: var(--m); outline: 1px solid var(--hellgruen); }
.ds-clear__box img { width: min(56vw, 260px); }
.ds-marks__row { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-marks__row span { width: 72px; height: 72px; border-radius: var(--radius-sm); display: grid; place-items: center; }
.ds-marks__row img { width: 32px; }

/* Photos */
.ds-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ds-photos figure { display: grid; gap: 8px; }
.ds-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.ds-photos figcaption { font-size: var(--fs-meta); }
@media (max-width: 700px) { .ds-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Spacing & radii */
.ds-space { display: grid; gap: 8px; }
.ds-space div { display: grid; grid-template-columns: 140px auto 1fr; gap: 12px; align-items: center; font-size: var(--fs-meta); }
.ds-space span { grid-column: 3; grid-row: 1; height: 14px; width: var(--s); background: var(--hellgruen); border-radius: 3px; }
.ds-radii { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.ds-radii div { display: grid; gap: 8px; font-size: var(--fs-meta); }
.ds-radii span { width: 96px; height: 72px; background: var(--dunkelgruen); }
.ds-dl { display: grid; gap: 0; }
.ds-dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.ds-dl dt { font-weight: 800; }
.ds-dl dd { margin: 0; }
@media (max-width: 640px) { .ds-dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* Motion */
.ds-motion { display: grid; gap: 12px; }
.ds-ease { display: grid; grid-template-columns: 72px minmax(160px, 260px) minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--weissgrau); }
.ds-ease svg { width: 72px; height: 108px; overflow: visible; }
.ds-ease__grid { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.ds-ease__curve { fill: none; stroke: var(--dunkelgruen); stroke-width: 5; stroke-linecap: round; }
.ds-ease > div:nth-child(2) { display: grid; gap: 2px; font-size: var(--fs-meta); }
.ds-ease > div:nth-child(2) b { font-size: var(--fs-small); }
.ds-ease code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ds-ease__track { position: relative; height: 48px; border-radius: var(--pill); background: var(--weiss); }
.ds-ease__track i { position: absolute; top: 6px; left: 6px; width: 36px; height: 36px; border-radius: 50%; background: var(--dunkelgruen); }
@media (max-width: 760px) { .ds-ease { grid-template-columns: 56px minmax(0, 1fr); } .ds-ease svg { width: 56px; } .ds-ease__track { grid-column: 1 / -1; } }

/* Icons */
/* F-08 icon set */
.ds-iconset { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.ds-iconset figure { display: grid; gap: 12px; align-content: start; }
.ds-iconset__stage { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--weissgrau); }
.ds-iconset__stage .icon { width: 96px; height: 96px; }
.ds-iconset figcaption { font-size: var(--fs-meta); line-height: 1.5; }
.ds-iconsizes { justify-content: flex-start; align-items: flex-end; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; }
.ds-isz { display: grid; grid-template-columns: repeat(6, auto); align-items: end; column-gap: 10px; row-gap: 10px; }
.ds-isz .icon { width: var(--s); height: var(--s); }
.ds-isz i { grid-column: 1 / -1; font-style: normal; font-size: 12px; }
.ds-iconcolors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ds-iconcolors > div { display: flex; justify-content: center; gap: clamp(12px, 2vw, 24px); padding: 24px 16px; border-radius: var(--radius-sm); color: var(--dunkelgruen); }
.ds-iconcolors .icon { width: 36px; height: 36px; }
.ds-iconcolors--dark { color: var(--gelbgruen) !important; }
.ds-iconcolors--solid { grid-template-columns: minmax(0, 1fr); }
.ds-iconcolors--solid .icon { width: 64px; height: 64px; }
@media (max-width: 760px) { .ds-iconcolors { grid-template-columns: minmax(0, 1fr); } .ds-iconcolors .icon { width: 30px; height: 30px; } .ds-iconset__stage .icon { width: 72px; height: 72px; } }

.ds-icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ds-icons figure { display: grid; gap: 12px; align-content: start; }
.ds-icons figcaption { font-size: var(--fs-meta); }
.ds-icons__stage { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 140px; border-radius: var(--radius-sm); background: var(--weissgrau); overflow: hidden; }
.ds-icons__stage--dark { background: var(--dunkelgruen); align-items: flex-end; justify-content: flex-end; }
.ds-icons__stage > .eyebrow { align-self: center; }
.ds-icons__spur { width: 120px; }
.ds-icons__spur path { fill: none; stroke: var(--gelbgruen); stroke-width: 30; }
@media (max-width: 760px) { .ds-icons { grid-template-columns: 1fr; } }

/* Motion demo marker */
.ds-ease__marker { fill: var(--hellgruen); stroke: var(--dunkelgruen); stroke-width: 4; opacity: 0; }
.ds-motion.is-playing .ds-ease__marker { opacity: 1; }

/* C-21 Rechner-Layout: scaled-down replica of the calculator (fixed height instead of one full screen) */
.ds-calc {
  display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px);
  height: 640px; padding: 20px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line);
}
.ds-calc .calc__aside { height: 100%; }
.ds-calc .calc__main { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ds-calc .calc__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ds-calc .calc__step { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; margin: -6px; }
.ds-calc .calc__nav { position: static; flex: none; margin: var(--s-5) 0 0; padding-inline: 0; }
@media (max-width: 960px) {
  .ds-calc { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ds-calc .calc__main { height: auto; }
}
/* the preview always uses the compact panel spacing (it has a fixed height, not a full screen) */
.ds-calc .calc__aside-inner { gap: var(--s-4); }
.ds-calc .calc__aside .stepper__item { padding: 3px 0; grid-template-columns: 32px minmax(0, 1fr); }
.ds-calc .calc__aside .stepper__dot { width: 32px; height: 32px; }
.ds-calc .calc__pick { gap: var(--s-2); }
.ds-calc .calc__chips .chip { min-height: 28px; padding: 4px 10px; font-size: 13px; }
.ds-calc .calc__mark { padding-top: var(--s-3); }
@media (max-width: 960px) { .ds-calc .calc__aside .stepper__item { grid-template-columns: 1fr; } }

/* C-22 Schritte-Block demo: shorter than the homepage block, so the mark is sized to the preview
   and the block leaves room under the intro so the mark never sits behind text */
.ds-steps { border-radius: var(--radius-lg); padding-bottom: clamp(150px, 15vw, 230px); }
.ds-steps .steps__mark { --mark-w: clamp(150px, 15vw, 220px); }
@media (max-width: 860px) { .ds-steps { padding-bottom: calc(44vw * 1.03 + 32px); } .ds-steps .steps__mark { --mark-w: 44vw; } }

/* Demos of page-level blocks (C-03, C-26, C-29): the real component, without its page offsets */
.ds-page-head { padding: 0; }
.ds-brandband { height: clamp(360px, 40vw, 460px); margin-inline: 0; }
.ds-article { padding: 0; }
.ds-prose-h2 { font-size: var(--fs-subline); font-weight: 800; line-height: 1.2; }