/* DXHero inner pages — Services overview + service-line template.
   Shares tokens/base/components with the homepage; only page-specific blocks live here. */

/* ---------- Compact page hero ---------- */

.hero--page { padding-block: calc(4.5rem + var(--sp-7)) var(--sp-7); }
.hero__copy--page { display: grid; gap: var(--sp-4); max-inline-size: 46rem; }
.hero-title--page { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-5); font-size: var(--fs-small); color: var(--c-on-dark-muted); }
.crumbs a { color: var(--c-on-dark-body); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--c-on-dark); }
.crumbs [aria-current] { color: var(--c-on-dark); }

/* Quick links to each service on the page */
.jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-6); padding-block-start: var(--sp-4); border-block-start: var(--border-dark); }
.jump a { padding: 0.5rem 0.875rem; border: 1px solid var(--dx-on-dark-rule-strong); color: var(--c-on-dark); font-size: var(--fs-small); font-weight: 600; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.jump a:hover { background: var(--c-electric); border-color: var(--c-electric); }

/* ---------- Journey diagram (How we work) ----------
   A loop, not a ladder: four core services connected, a return line back to the start,
   and a band showing enablement and ongoing support run alongside everything. */

.journey { display: grid; gap: var(--sp-2); }
.journey__start { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-secondary); }
.journey__stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.journey__stage {
  position: relative; display: grid; gap: var(--sp-1); align-content: center; min-block-size: 6.5rem;
  padding: var(--sp-3) var(--sp-4); background: var(--c-primary); color: var(--c-on-dark);
  transition: background var(--dur) var(--ease);
}
.journey__stage:nth-child(2) { background: var(--dx-indigo-600); }
.journey__stage:nth-child(3) { background: var(--dx-indigo-500); }
.journey__stage:nth-child(4) { background: var(--c-electric); }
.journey__stage:hover { background: var(--dx-ink); }
/* arrow connector between blocks */
.journey__stage:not(:last-child)::after {
  content: "→"; position: absolute; inset-inline-start: 100%; inset-block-start: 50%;
  inline-size: var(--sp-5); text-align: center; transform: translateY(-50%);
  font-size: 1.125rem; color: var(--c-secondary);
}
[dir="rtl"] .journey__stage:not(:last-child)::after { content: "←"; }
.journey__label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-on-dark-muted); }
.journey__name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
/* return line: from the last block back to the first */
.journey__loop {
  position: relative; block-size: 2.25rem; margin-inline: 12.5%;
  border: 2px solid var(--c-secondary); border-block-start: 0;
  display: grid; place-items: end center;
}
.journey__loop::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: -2px; border: 6px solid transparent; border-block-end: 8px solid var(--c-secondary); border-block-start: 0; }
.journey__loop span { transform: translateY(50%); padding-inline: var(--sp-3); background: var(--c-paper); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-secondary); }
.journey__along { display: grid; grid-template-columns: 12rem repeat(2, minmax(0, 1fr)); margin-block-start: var(--sp-4); background: var(--c-night); color: var(--c-on-dark); }
.journey__along-label { display: grid; align-content: center; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-accent-on-dark); border-inline-end: var(--border-dark); }
.journey__along a { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border-inline-end: var(--border-dark); transition: background var(--dur) var(--ease); }
.journey__along a:last-child { border-inline-end: 0; }
.journey__along a:hover { background: var(--c-primary); }
.journey__note { font-size: var(--fs-small); color: var(--c-on-dark-muted); }
@media (max-width: 900px) {
  .journey__stages { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .journey__stage:not(:last-child)::after { content: "↓"; inset-inline-start: 50%; inset-block-start: 100%; inline-size: auto; transform: translate(-50%, 0.1rem); }
  .journey__loop { display: none; }
  .journey__along { grid-template-columns: minmax(0, 1fr); }
  .journey__along-label, .journey__along a { border-inline-end: 0; border-block-end: var(--border-dark); }
}

/* ---------- Service rows (Services overview) ---------- */

.svc-rows { border-block-start: 2px solid var(--c-ink); }
.svc-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-4) var(--grid-gap); padding-block: var(--sp-6); border-block-end: var(--border); scroll-margin-block-start: 6rem; }
.svc-row__head { grid-column: span 4; display: grid; gap: var(--sp-2); align-content: start; }
.svc-row__stage { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-secondary); }
.svc-row__name { font-size: var(--fs-title); }
.svc-row__hook { font-family: var(--font-display); font-weight: 600; color: var(--c-secondary); line-height: 1.35; }
.svc-row__copy { grid-column: 5 / span 4; color: var(--c-body); }
.svc-row__fit { grid-column: 9 / span 4; display: grid; gap: var(--sp-3); align-content: start; justify-items: start; padding-inline-start: var(--sp-4); border-inline-start: var(--border); font-size: var(--fs-small); }
.svc-row__fit-label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-muted); }
@media (max-width: 900px) {
  .svc-row__head, .svc-row__copy, .svc-row__fit { grid-column: span 12; }
  .svc-row__fit { padding-inline-start: 0; border-inline-start: 0; }
}

/* ---------- FAQ (native details/summary, no JS) ---------- */

.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); }
.faq > .section-head { grid-column: span 4; margin: 0; align-content: start; }
.faq__list { grid-column: 6 / span 7; border-block-start: 1px solid var(--c-ink); }
.faq__item { border-block-end: var(--border); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding-block: var(--sp-4); cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--c-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--c-electric); }
.faq__icon { position: relative; flex: none; inline-size: 14px; block-size: 14px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 0; inline-size: 14px; block-size: 2px; background: currentColor; transition: transform var(--dur) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item p { padding-block-end: var(--sp-4); max-inline-size: 40rem; color: var(--c-body); }
@media (max-width: 900px) { .faq > .section-head, .faq__list { grid-column: span 12; } }

/* ---------- Service-line page: the problem ---------- */

/* Why assess: section head (title, subtitle under it) on the left; when it is the right step, numbered, on the right */
.as-why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); align-items: start; }
.as-why > .section-head { grid-column: span 6; margin: 0; }
.as-why__fit { grid-column: 8 / span 5; }
.as-why__kicker { margin-block-end: var(--sp-3); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tag); }
.as-why__list { border-block-start: 1px solid var(--c-ink); }
.as-why__list li { display: grid; grid-template-columns: 2.25rem 1fr; padding-block: var(--sp-3); border-block-end: var(--border); font-family: var(--font-display); font-weight: 600; line-height: 1.4; color: var(--c-ink); }
.as-why__list span { font: 500 var(--fs-small)/1.6 var(--font-mono); color: var(--c-tag); }
@media (max-width: 900px) { .as-why > .section-head, .as-why__fit { grid-column: 1 / -1; } }

/* ---------- Maturity staircase ---------- */

.stair { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1); align-items: end; }
.stair__step {
  display: grid; align-content: start; gap: var(--sp-2);
  min-block-size: calc(9rem + var(--n) * 3rem);
  padding: var(--sp-4); background: rgba(255, 255, 255, calc(0.04 + var(--n) * 0.035));
  border-block-start: 2px solid var(--dx-on-dark-rule-strong);
  transition: background var(--dur) var(--ease);
}
.stair__step:nth-child(4) { border-color: var(--c-accent-on-dark); background: rgba(110, 122, 232, 0.22); }
.stair__step:hover { background: rgba(110, 122, 232, 0.3); }
.stair__num { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-on-dark-muted); }
.stair__name { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: var(--c-on-dark); letter-spacing: -0.01em; }
.stair__step:nth-child(4) .stair__name { color: var(--c-accent-on-dark); }
.stair__desc { font-size: var(--fs-small); color: var(--c-on-dark-body); }
.stair__aim { justify-self: start; margin-block-start: var(--sp-1); padding: 0.2rem 0.5rem; background: var(--c-accent-on-dark); color: var(--c-night); font: 600 0.6875rem/1.4 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) {
  .stair { grid-template-columns: minmax(0, 1fr); }
  .stair__step { min-block-size: 0; margin-inline-start: calc(var(--n) * 1rem); }
}

/* ---------- Ways to start: a quick → deep axis ---------- */

.depth { display: grid; gap: var(--sp-4); }
.depth__axis { position: relative; display: flex; justify-content: space-between; padding-block-end: var(--sp-3); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-muted); }
.depth__axis::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: linear-gradient(90deg, var(--dx-blue-200), var(--c-primary)); }
[dir="rtl"] .depth__axis::after { background: linear-gradient(-90deg, var(--dx-blue-200), var(--c-primary)); }
.depth__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.depth__stop { position: relative; display: grid; gap: var(--sp-2); align-content: start; padding-block-start: var(--sp-3); }
.depth__mark { position: absolute; inset-block-start: calc(-1 * var(--sp-4) - 9px); inset-inline-start: 0; inline-size: 12px; block-size: 12px; background: var(--c-paper); border: 3px solid var(--c-primary); }
.depth__label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-secondary); }
.depth__name { font-size: var(--fs-title); }
.depth__stop p { color: var(--c-body); }
.depth__stop .chips { margin-block-start: var(--sp-2); }
@media (max-width: 900px) { .depth__stops { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } .depth__mark { display: none; } }   /* stacked: the markers would land under the previous option */

/* ---------- Outcome: sample scorecard + deliverables ---------- */

.outcome { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); align-items: center; }
.score { grid-column: span 6; margin: 0; padding: var(--sp-5); background: var(--grad-hero); color: var(--c-on-dark); display: grid; gap: var(--sp-3); }
.score__head { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-on-dark-muted); }
.score__head b { font-weight: 600; color: var(--c-on-dark-muted); }
.score__list { display: grid; gap: var(--sp-2); }
.score__list li { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--c-on-dark-body); }
.score__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.score__bar i { block-size: 10px; background: var(--dx-on-dark-rule); }
.score__bar i:nth-child(-n + 1) { background: var(--c-accent-on-dark); }
.score__bar[style*="--lvl:2"] i:nth-child(-n + 2),
.score__bar[style*="--lvl:3"] i:nth-child(-n + 3),
.score__bar[style*="--lvl:4"] i:nth-child(-n + 4),
.score__bar[style*="--lvl:5"] i:nth-child(-n + 5) { background: var(--c-accent-on-dark); }
.score__legend { display: flex; justify-content: flex-end; gap: calc(10rem - 5.5rem); font-size: 0.6875rem; color: var(--c-on-dark-muted); }
.outcome__copy { grid-column: 8 / span 5; display: grid; gap: var(--sp-3); }
.outcome__list { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-2); }
.outcome__list li { display: grid; gap: var(--sp-1); padding-inline-start: var(--sp-4); border-inline-start: 3px solid var(--c-secondary); }
.outcome__list h3 { font-size: 1.125rem; }
.outcome__list p { color: var(--c-body); font-size: 0.9375rem; }
@media (max-width: 900px) { .score, .outcome__copy { grid-column: span 12; } }

/* ---------- Related result + industries ---------- */

.proofrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); align-items: center; }
.proofrow__result { grid-column: span 5; display: grid; gap: var(--sp-2); padding: var(--sp-5); background: var(--grad-hero); color: var(--c-on-dark-body); }
.proofrow__result .ind-result__label { color: var(--c-on-dark-muted); }
.proofrow__value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat); line-height: 1; letter-spacing: var(--tr-stat); color: var(--c-on-dark); }
.proofrow__what { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--c-on-dark); }
.proofrow__client { font-size: 0.8125rem; color: var(--c-on-dark-muted); border-block-start: var(--border-dark); padding-block-start: var(--sp-2); }
.proofrow__applied { grid-column: 7 / span 6; display: grid; gap: var(--sp-3); justify-items: start; }
@media (max-width: 900px) { .proofrow__result, .proofrow__applied { grid-column: span 12; } }

/* ---------- Next stage link ---------- */

.next-stage { background: var(--c-paper); border-block-start: var(--border); }
.next-stage__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-6); color: var(--c-ink); }
.next-stage__label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-muted); }
.next-stage__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-section); letter-spacing: var(--tr-section); transition: color var(--dur) var(--ease); }
.next-stage__link .btn__arrow { grid-row: 1 / span 2; grid-column: 2; font-size: 2rem; color: var(--c-secondary); }
.next-stage__link:hover .next-stage__name { color: var(--c-electric); }
.next-stage__link:hover .btn__arrow { transform: translateX(8px); }

/* ---------- Low-risk by design: commitment track ---------- */

.section--tight-top { padding-block-start: 0; }
.commit { display: grid; gap: var(--sp-3); }
.commit__axis { position: relative; display: flex; justify-content: space-between; padding-block-end: var(--sp-2); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--c-muted); }
.commit__axis::after { content: "→"; position: absolute; inset-inline-end: -1.25rem; inset-block-start: 0; color: var(--c-muted); }
[dir="rtl"] .commit__axis::after { content: "←"; }
.commit__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); align-items: end; }
.commit__step { display: grid; gap: var(--sp-2); align-content: start; padding-block-end: var(--sp-2); color: var(--c-ink); }
/* bars rise from left to right: the commitment grows only as you choose to go further */
.commit__bar { display: block; block-size: calc(0.75rem + var(--n) * 1.5rem); background: var(--dx-blue-100); border-block-start: 3px solid var(--c-secondary); transition: background var(--dur) var(--ease); }
.commit__step:first-child .commit__bar { background: var(--c-electric); border-color: var(--c-electric); }
.commit__step:hover .commit__bar { background: var(--c-primary); border-color: var(--c-primary); }
.commit__terms { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-secondary); }
.commit__name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.commit__text { font-size: var(--fs-small); color: var(--c-body); }
@media (max-width: 1000px) {
  .commit__steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .commit__bar { block-size: 4px; inline-size: calc(20% + var(--n) * 20%); }
  .commit__axis { display: none; }
}

/* Terms strip under the service-line hero */
.terms-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-block-start: var(--sp-2); font-size: var(--fs-small); color: var(--c-on-dark-body); }
.terms-strip li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.terms-strip li::before { content: ""; inline-size: 0.75rem; block-size: 2px; background: var(--c-accent-on-dark); }

/* ======================= About · Company (about.html) =======================
   One reading column, one visual system: section head (eyebrow → title → subtitle), then rows of
   mono key, title and text on fine rules. Light grounds after the hero. */

.section--tight { padding-block: var(--sp-6); }
.ab-col { --container: 56rem; }
.ab-head { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-6); }
.ab-head .lead { max-inline-size: 40rem; margin: 0; }
.ab-prose { max-inline-size: 40rem; margin: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--c-body); }

/* rows: the one pattern for journey and values */
.ab-rows { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--c-line); }
.ab-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--sp-4); align-items: baseline; padding-block: var(--sp-4); border-block-end: 1px solid var(--c-line); }
.ab-row__key { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; letter-spacing: var(--tr-stat); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ab-row__key--idx { font: 500 0.8125rem/1.6 var(--font-mono); letter-spacing: 0.08em; color: var(--c-tag); }
.ab-row__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--c-ink); }
.ab-row__text { margin: 0.35rem 0 0; color: var(--c-body); max-inline-size: 34rem; }
.ab-row__aside { align-self: center; }
.ab-row__aside img { block-size: 3.25rem; inline-size: auto; }

/* journey: a rule on the left fills as you scroll; each year turns blue as it is reached */
.ab-journey { position: relative; border-block-start: 0; padding-inline-start: var(--sp-5); }
.ab-journey::before, .ab-journey::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 1px; background: var(--c-line); }
.ab-journey::after { inline-size: 2px; background: var(--c-tag); transform-origin: top; transform: scaleY(var(--p, 0)); }
.ab-journey .ab-row { position: relative; }
.ab-journey .ab-row::before { content: ""; position: absolute; inset-inline-start: calc(var(--sp-5) * -1 - 4px); inset-block-start: calc(var(--sp-4) + 0.55rem); inline-size: 9px; block-size: 9px; background: var(--c-wash); border: 2px solid var(--c-line); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ab-journey .ab-row__key { color: var(--c-hint); transition: color 400ms var(--ease); }
.ab-journey .ab-row.is-on::before { background: var(--c-tag); border-color: var(--c-tag); }
.ab-journey .ab-row.is-on .ab-row__key { color: var(--c-ink); }
.ab-journey .ab-row.is-on.is-award .ab-row__key { color: var(--c-tag); }
.ab-journey .ab-row__aside img { opacity: 0.35; transition: opacity 400ms var(--ease); }
.ab-journey .ab-row.is-on .ab-row__aside img { opacity: 1; }

/* world map (from _build/make_world_map.py): Dubai at the centre, arcs drawn out to client countries */
.ab-map { margin: 0; }
.wm { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.wm-land rect { fill: var(--dx-indigo-800); opacity: 0.16; }
.wm-arc { fill: none; stroke: var(--c-tag); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wm-city { opacity: 0; transition: opacity 500ms var(--ease); transition-delay: calc(1.2s + var(--i) * 0.25s); }
.wm-city rect { fill: var(--c-tag); }
.wm-city text, .wm-hq text { font: 500 11px/1 var(--font-body); fill: var(--c-ink); }
.wm-hq rect { fill: var(--c-tag); }
.wm-hq text { font-weight: 600; font-size: 12px; }
.wm-wave { fill: none; stroke: var(--c-tag); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: wm-wave 4.5s ease-out infinite; }
@keyframes wm-wave { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(6); opacity: 0; } }
@keyframes wm-draw { to { stroke-dashoffset: 0; } }
.ab-map.is-in .wm-arc { animation: wm-draw 1.1s var(--ease) forwards; animation-delay: calc(0.5s + var(--i) * 0.25s); }
.ab-map.is-in .wm-city { opacity: 1; }
/* phones: the whole world would make labels ~4px tall; show the band from the UK to Taiwan at about
   1.7x, with larger labels */
@media (max-width: 760px) {
  .ab-map { overflow: hidden; }
  .ab-map .wm { inline-size: 168%; max-inline-size: none; margin-inline-start: -34%; }
  .wm-city text { font-size: 16px; }
  .wm-hq text { font-size: 18px; }
}
.ab-map__cap { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-block-start: var(--sp-4); padding-block-start: var(--sp-3); border-block-start: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-body); }
.ab-map__cap b { display: block; font: 500 0.6875rem/1.6 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .wm-arc { stroke-dashoffset: 0; } .wm-city { opacity: 1; } .wm-wave { display: none; } }

.ab-wide { --container: 72rem; margin-block-start: var(--sp-6); }   /* the map runs wider than the reading column */

/* pull quote: type only, no card */
.ab-pull { margin: var(--sp-7) 0 0; padding-inline-start: var(--sp-5); border-inline-start: 2px solid var(--c-tag); display: grid; gap: var(--sp-4); }
/* the quote that opens "How we work": a centred testimonial with a large quotation mark, set apart
   from the blue-ruled timeline above it */
.ab-pull--lead { margin: 0 auto var(--sp-8); padding: 0; border: 0; max-inline-size: 50rem; justify-items: center; text-align: center; }
.ab-pull--lead::before { content: "\201C"; display: block; block-size: 3.5rem; font: 700 7rem/1 var(--font-display); color: var(--c-tag); }
.ab-pull--lead blockquote { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); }
.ab-pull--lead figcaption { flex-direction: column; gap: var(--sp-2); text-align: center; }
.ab-pull--lead figcaption img { inline-size: 3.5rem; block-size: 3.5rem; }
.ab-pull blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--c-ink); }
.ab-pull figcaption { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--c-muted); }
.ab-pull figcaption img { inline-size: 2.75rem; block-size: 2.75rem; object-fit: cover; }
.ab-pull figcaption b { display: block; color: var(--c-ink); font-weight: 600; }

/* events: plain tabs, then one large photo and two stacked, square-edged, even gutters */
.ab-events__tabs { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-block-end: var(--sp-4); border-block-end: 1px solid var(--c-line); }
.ab-events__tabs button { margin-block-end: -1px; padding: 0 0 var(--sp-2); background: none; border: 0; border-block-end: 2px solid transparent; font: 600 1rem/1.3 var(--font-display); color: var(--c-muted); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ab-events__tabs button[aria-selected="true"] { color: var(--c-ink); border-color: var(--c-tag); }
.ab-ev[hidden] { display: none; }
.ab-ev__grid { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--sp-2); aspect-ratio: 16 / 9; }
.ab-photo { margin: 0; overflow: hidden; background: var(--c-wash); }
.ab-photo--0 { grid-row: span 2; }
.ab-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ab-photo__ph { display: grid; place-items: center; block-size: 100%; padding: var(--sp-3); text-align: center; color: var(--c-muted); background: repeating-linear-gradient(45deg, var(--c-wash) 0 10px, #ECEBF6 10px 11px); }
.ab-ev__cap { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--c-muted); }
.ab-ev__cap b { color: var(--c-ink); font-weight: 600; }
.ab-ev__cap span:last-child { font: 500 0.6875rem/1.9 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tag); }
@media (max-width: 640px) { .ab-ev__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; aspect-ratio: auto; } .ab-photo { aspect-ratio: 4 / 3; } .ab-photo--0 { grid-row: auto; } }

/* more */
.ab-more { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.ab-more a { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--c-ink); transition: color var(--dur) var(--ease); }
.ab-more a:hover { color: var(--c-tag); }

@media (max-width: 640px) {
  .ab-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .ab-row__aside { display: none; }
}

/* ==========================================================================
   Why DXHero (why-dxhero.html): the gap ledger, the options table, our stance
   ========================================================================== */

/* The gap: a chart. The platform line stays flat at the top; "left to chance" levels off low,
   "with a specialist" climbs towards the platform. The shaded area between is the gap.
   Lines draw in when the figure comes into view. Illustrative, not data. */
.wy-gap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); align-items: center; }
.wy-gap__fig { grid-column: span 8; position: relative; margin: 0; }
.wy-gap__y { display: block; margin-block-end: var(--sp-2); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.wy-gap__chart { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.wy-gap__axis { stroke: var(--c-ink); stroke-width: 1.5; }
.wy-gap__area { fill: var(--dx-blue-100); opacity: 0.9; transition: opacity 700ms var(--ease) 1300ms; }
.wy-gap__line { fill: none; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease); }
.wy-gap__line--platform { stroke: var(--c-ink); stroke-width: 2; stroke-dasharray: 8 8; transition: none; }
.wy-gap__line--chance { stroke: var(--c-hint); transition-delay: 200ms; }
.wy-gap__line--specialist { stroke: var(--c-tag); stroke-width: 4; transition-delay: 500ms; }
.wy-gap__label { font: 600 26px var(--font-display); fill: var(--c-primary); text-anchor: middle; transition: opacity 500ms var(--ease) 1500ms; }
.js-motion .wy-gap__fig:not(.is-in) :is(.wy-gap__line--chance, .wy-gap__line--specialist) { stroke-dashoffset: 1; }
.js-motion .wy-gap__fig:not(.is-in) :is(.wy-gap__area, .wy-gap__label) { opacity: 0; }
.wy-gap__x { display: flex; justify-content: space-between; padding-inline: 6.25% 4%; margin-block-start: var(--sp-2); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.wy-gap__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-block-start: var(--sp-4); font-size: var(--fs-small); color: var(--c-body); }
.wy-gap__legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.wy-gap__legend span::before { content: ""; inline-size: 1.5rem; block-size: 0; border-block-start: 3px solid var(--c-tag); }
.wy-gap__legend .is-platform::before { border-block-start: 2px dashed var(--c-ink); }
.wy-gap__legend .is-chance::before { border-block-start-color: var(--c-hint); }
.wy-gap__side { grid-column: 10 / -1; }
.wy-gap__kicker { margin-block-end: var(--sp-3); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tag); }
.wy-gap__list { border-block-start: 1px solid var(--c-ink); }
.wy-gap__list li { display: grid; grid-template-columns: 2.25rem 1fr; padding-block: var(--sp-3); border-block-end: var(--border); font-family: var(--font-display); font-weight: 600; color: var(--c-ink); }
.wy-gap__list span { font: 500 var(--fs-small)/1.6 var(--font-mono); color: var(--c-tag); }
@media (max-width: 900px) { .wy-gap__fig, .wy-gap__side { grid-column: 1 / -1; } }

/* The options: three framed columns on the same white ground, compared row by row (three-step meter,
   one-word verdict, short reason). Ours differs only by its deep indigo frame and a flag on top. */
.wy-compare { inline-size: 100%; border-collapse: separate; border-spacing: var(--sp-3) 0; margin-inline: calc(var(--sp-3) * -1); table-layout: fixed; }
.wy-compare th, .wy-compare td { padding: var(--sp-3) var(--sp-4); text-align: start; vertical-align: top; }
.wy-compare thead td { inline-size: 17%; }
.wy-compare tbody th { padding-inline: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--c-ink); border-block-start: var(--border); }
.wy-compare tbody tr:first-child th { border-block-start: 0; }
/* each option is a box: header + its cells share side borders, closed at top and bottom */
.wy-compare thead th, .wy-compare tbody td { background: #fff; border-inline: 1px solid var(--c-line); }
.wy-compare thead th { position: relative; padding-block: var(--sp-5) var(--sp-4); border-block-start: 1px solid var(--c-line); font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; line-height: 1.2; color: var(--c-ink); vertical-align: bottom; }
.wy-compare tbody td { border-block-start: 1px solid var(--c-line-soft); }
.wy-compare tbody tr:last-child td { border-block-end: 1px solid var(--c-line); padding-block-end: var(--sp-5); }
.wy-compare__kicker { display: block; margin-block-end: var(--sp-2); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.wy-compare td b { display: block; margin-block: var(--sp-2) var(--sp-1); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.wy-compare td span:not(.wy-meter) { display: block; font-size: var(--fs-small); line-height: 1.5; color: var(--c-muted); }
.wy-meter { display: flex; gap: 3px; }
.wy-meter i { inline-size: 1.75rem; block-size: 5px; background: var(--c-line); }
.wy-meter i.on { background: var(--c-hint); }
/* ours: same ground, a 2px deep indigo frame, a flag, and the meter in blue */
.wy-compare .is-us { border-inline: 2px solid var(--c-primary); }
.wy-compare thead th.is-us { border-block-start: 2px solid var(--c-primary); }
.wy-compare tbody tr:last-child td.is-us { border-block-end: 2px solid var(--c-primary); }
.wy-compare thead th.is-us .wy-compare__kicker { color: var(--c-tag); }
.wy-compare td.is-us .wy-meter i.on { background: var(--c-tag); }
.wy-compare__flag { position: absolute; inset-block-start: -1px; inset-inline-start: -2px; transform: translateY(-100%); padding: 0.3rem 0.75rem; background: var(--c-primary); color: #fff; font: 600 var(--fs-eyebrow)/1.4 var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.wy-compare-wrap { padding-block-start: var(--sp-5); }
@media (max-width: 760px) {
  .wy-compare { margin: 0; border-spacing: 0; }
  .wy-compare, .wy-compare tbody, .wy-compare tr, .wy-compare th, .wy-compare td { display: block; }
  .wy-compare thead { display: none; }
  .wy-compare tr { margin-block-end: var(--sp-5); }
  .wy-compare tbody th { padding: 0 0 var(--sp-2); border: 0; font: 500 var(--fs-eyebrow)/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
  .wy-compare tbody td, .wy-compare tbody tr:last-child td { padding: var(--sp-3); border: 1px solid var(--c-line); border-block-start-width: 0; }
  .wy-compare tbody td:nth-of-type(1) { border-block-start-width: 1px; }
  .wy-compare tbody td.is-us, .wy-compare tbody tr:last-child td.is-us { border: 2px solid var(--c-primary); }
  .wy-compare td::before { content: attr(data-col); display: block; margin-block-end: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); }
  .wy-compare td.is-us::before { color: var(--c-tag); }
}

/* Our stance: head on the left, three statements on the right */
.wy-stance { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); }
.wy-stance > .section-head { grid-column: span 5; margin: 0; align-content: start; }
.wy-stance__list { grid-column: 7 / span 6; border-block-start: var(--border-dark); }
.wy-stance__item { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-3); padding-block: var(--sp-5); border-block-end: var(--border-dark); }
.wy-stance__n { font: 500 var(--fs-small)/1.9 var(--font-mono); color: var(--c-tag-on-dark); }
.wy-stance__item h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); color: var(--c-on-dark); margin-block-end: var(--sp-2); }
.wy-stance__item p { color: var(--c-on-dark-body); max-inline-size: 34rem; }
@media (max-width: 900px) {
  .wy-stance > .section-head, .wy-stance__list { grid-column: 1 / -1; }
}

/* ==========================================================================
   Datadog (why-datadog.html): one investigation, the platform areas, why it wins
   ========================================================================== */

.dd-unified { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); align-items: start; }
.dd-trail { grid-column: span 8; background: #fff; border: var(--border); box-shadow: 0 24px 60px -32px rgba(20, 18, 70, 0.28); }
.dd-trail__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-wash); border-block-end: var(--border); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.dd-trail__bar img { block-size: 1.5rem; inline-size: auto; }
.dd-trail__steps { position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-3); }
/* the thread that links the four steps; it draws down as the panel comes into view */
.dd-trail__steps::before { content: ""; position: absolute; inset-block: calc(var(--sp-5) + 0.55rem) calc(var(--sp-3) + 2.4rem); inset-inline-start: calc(var(--sp-5) + 4px); inline-size: 2px; background: var(--c-tag); transform-origin: top; transform: scaleY(var(--draw, 1)); transition: transform 1600ms var(--ease) 200ms; }
.dd-trail__step { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-1) var(--sp-4); padding-inline-start: var(--sp-5); padding-block-end: var(--sp-5); transition: opacity 500ms var(--ease) calc(300ms + var(--i) * 380ms); }
.dd-trail__step::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.3rem; inline-size: 10px; block-size: 10px; background: #fff; border: 2px solid var(--c-tag); transition: background 300ms var(--ease) calc(300ms + var(--i) * 380ms); }
.dd-trail__kind { font: 500 var(--fs-eyebrow)/1.9 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tag); }
.dd-trail__product { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); }
.dd-trail__evidence { grid-column: 2; display: block; padding: var(--sp-2) var(--sp-3); background: var(--c-wash); font: 0.8125rem/1.5 var(--font-mono); color: var(--c-body); overflow-wrap: anywhere; }
.dd-trail__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-block-start: var(--border); font-size: var(--fs-small); color: var(--c-muted); }
.dd-trail__tags code { padding: 0.15rem 0.5rem; border: 1px solid var(--c-tag); font: 0.8125rem/1.4 var(--font-mono); color: var(--c-tag); }
.dd-trail__note { margin-inline-start: auto; font-size: 0.75rem; color: var(--c-hint); }
.js-motion .dd-trail:not(.is-in) .dd-trail__steps { --draw: 0; }
.js-motion .dd-trail:not(.is-in) .dd-trail__step { opacity: 0.25; }
.dd-trail.is-in .dd-trail__step::before { background: var(--c-tag); }
/* beside the investigation: three big numbers on rules */
.dd-counts { grid-column: 10 / span 3; display: grid; border-block-start: 1px solid var(--c-ink); }
.dd-counts li { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); border-block-end: var(--border); }
.dd-counts b { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: var(--tr-stat); color: var(--c-tag); }
.dd-counts span { font-size: var(--fs-small); color: var(--c-muted); }
@media (max-width: 900px) {
  .dd-trail, .dd-counts { grid-column: 1 / -1; }
  .dd-trail__step { grid-template-columns: 1fr; }
  .dd-trail__evidence { grid-column: 1; }
  .dd-trail__steps { padding-inline: var(--sp-4); }
  .dd-trail__steps::before { inset-inline-start: calc(var(--sp-4) + 4px); }
}

/* Platform map: six columns of product tiles standing on one shared base (agent, tags, governance).
   Product names only; the one-line summary is the tile's tooltip. */
.dd-map { display: grid; gap: var(--sp-2); }
.dd-map__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.dd-col { display: grid; align-content: start; gap: var(--sp-2); }
.dd-col__name { display: grid; gap: var(--sp-1); padding-block-end: var(--sp-2); border-block-end: 2px solid var(--c-tag); font-size: 1rem; }
.dd-col__name span { font: 500 var(--fs-eyebrow)/1 var(--font-mono); color: var(--c-tag); }
.dd-col__tiles { display: grid; gap: var(--sp-2); }
.dd-col__tiles li { display: flex; align-items: center; min-block-size: 4.25rem; padding: var(--sp-2) var(--sp-3); background: #fff; border: 1px solid var(--c-line); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--c-ink); cursor: default; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.dd-col__tiles li:hover { border-color: var(--c-tag); color: var(--c-tag); }
.dd-map__base { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--c-primary); }
.dd-map__base span { padding: var(--sp-3) var(--sp-4); text-align: center; font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-on-dark); }
.dd-map__base span + span { border-inline-start: 1px solid var(--c-line-dark); }
@media (max-width: 900px) { .dd-map__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-2); } }
@media (max-width: 560px) { .dd-map__base { grid-template-columns: 1fr; } .dd-map__base span + span { border-inline-start: 0; border-block-start: 1px solid var(--c-line-dark); } }

/* Why it wins: one large figure and two smaller ones, on rules (no cards), on a light ground so the closing band stays the only dark block */
.dd-why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--grid-gap); border-block-start: 1px solid var(--c-ink); }
.dd-why__item { grid-column: 7 / -1; padding-block: var(--sp-5); border-block-end: var(--border); }
.dd-why__item--lead { grid-column: 1 / span 5; grid-row: span 2; border-block-end: 0; }
.dd-why__item b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; letter-spacing: var(--tr-stat); color: var(--c-ink); line-height: 1.1; margin-block-end: var(--sp-2); }
.dd-why__item--lead b { font-size: var(--fs-stat); background: linear-gradient(90deg, var(--c-primary), var(--c-electric)); -webkit-background-clip: text; background-clip: text; color: transparent; inline-size: fit-content; }
.dd-why__item p { color: var(--c-muted); max-inline-size: 30rem; }
@media (max-width: 900px) {
  .dd-why__item, .dd-why__item--lead { grid-column: 1 / -1; grid-row: auto; border-block-end: var(--border); }
}

/* ==========================================================================
   Service-line pages (shared blocks in _build/svc.py, page visuals below)
   ========================================================================== */

/* Steps: a short numbered process on one rule; squares mark each step */
.svc-steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--grid-gap); border-block-start: 2px solid var(--c-line); }
.svc-steps__item { position: relative; display: grid; gap: var(--sp-2); align-content: start; padding-block-start: var(--sp-4); }
/* the rule draws across on reveal; each square lights up as the line reaches its column */
.svc-steps { position: relative; }
.svc-steps::after { content: ""; position: absolute; inset-block-start: -2px; inset-inline: 0; block-size: 2px; background: var(--c-tag); transform-origin: left; transition: transform 1600ms linear 200ms; }
[dir="rtl"] .svc-steps::after { transform-origin: right; }
.js-motion .svc-steps:not(.is-in)::after { transform: scaleX(0); }
.svc-steps__item::before { content: ""; position: absolute; inset-block-start: -6px; inset-inline-start: 0; inline-size: 10px; block-size: 10px; background: var(--c-tag); z-index: 1;
  transition: background 250ms var(--ease) calc(200ms + var(--i) * 1600ms / var(--n)); }
.js-motion .svc-steps:not(.is-in) .svc-steps__item::before { background: var(--c-line); }
.svc-steps__n { transition: color 250ms var(--ease) calc(200ms + var(--i) * 1600ms / var(--n)); }
.js-motion .svc-steps:not(.is-in) .svc-steps__n { color: var(--c-hint); }
.svc-steps__n { font: 500 var(--fs-small)/1 var(--font-mono); color: var(--c-tag); }
.svc-steps__item h3 { font-size: var(--fs-title); }
.svc-steps__item p { color: var(--c-muted); max-inline-size: 22rem; }
@media (max-width: 760px) {
  .svc-steps { grid-template-columns: 1fr; border: 0; border-inline-start: 2px solid var(--c-line); gap: var(--sp-4); padding-inline-start: var(--sp-4); }
  .svc-steps__item { padding-block-start: 0; }
  .svc-steps__item::before { inset-block-start: 0.2rem; inset-inline-start: calc(var(--sp-4) * -1 - 6px); }
  .svc-steps::after { inset-block: 0; inset-inline: -2px auto; inline-size: 2px; block-size: auto; transform-origin: top; }
  .js-motion .svc-steps:not(.is-in)::after { transform: scaleY(0); }
}

/* Implementation · module board: one panel of modules sharing hairlines */
.im-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.im-mod { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-4); background: #fff; box-shadow: inset 0 3px 0 transparent; transition: box-shadow var(--dur) var(--ease); }
.im-mod:hover { box-shadow: inset 0 3px 0 var(--c-tag); }
.im-mod__n { font: 500 var(--fs-small)/1 var(--font-mono); color: var(--c-tag); }
.im-mod h3 { font-size: var(--fs-title); }
@media (max-width: 900px) { .im-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .im-board { grid-template-columns: 1fr; } }

/* Implementation · migration timeline: four steps on top; the old tool's bar fades out after the
   parallel run, Datadog's bar starts at the redesign */
.im-mig { position: relative; display: grid; grid-template-columns: 7rem repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--sp-3); }
.im-mig__steps { grid-row: 1; grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; }
.im-mig__steps li { display: grid; gap: var(--sp-1); align-content: start; padding-block-start: var(--sp-3); border-block-start: 2px solid var(--c-ink); }
.im-mig__steps span { font: 500 var(--fs-small)/1 var(--font-mono); color: var(--c-tag); }
.im-mig__steps b { font-family: var(--font-display); font-size: 1.0625rem; color: var(--c-ink); }
.im-mig__steps p { font-size: var(--fs-small); color: var(--c-muted); }
.im-mig__label { grid-column: 1; align-self: center; font: 500 var(--fs-eyebrow)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.im-mig__bar { z-index: 1; block-size: 18px; align-self: center; transform-origin: left; transition: transform 1200ms var(--ease) 300ms; }
.im-mig__bar--old { grid-column: 2 / 6; background: linear-gradient(90deg, var(--c-hint) 74%, rgba(0,0,0,0) 96%); }
.im-mig__bar--new { grid-column: 3 / 6; background: linear-gradient(90deg, var(--c-tag), var(--c-primary)); transition-delay: 700ms; }
.im-mig__overlap { grid-column: 4; grid-row: 3 / 5; margin-block: calc(var(--sp-2) * -1); background: var(--dx-blue-100); border-inline: 1px dashed var(--c-tag); z-index: 0; }
.im-mig__overlap em { position: absolute; inset-block-end: calc(100% + var(--sp-1)); inset-inline: 0; text-align: center; font: 600 var(--fs-eyebrow)/1 var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tag); }
.im-mig > * { position: relative; }
.im-mig { isolation: isolate; padding-block-end: var(--sp-3); row-gap: var(--sp-4); }
.im-mig__steps { margin-block-end: var(--sp-5); }
.js-motion .im-mig:not(.is-in) .im-mig__bar { transform: scaleX(0); }
@media (max-width: 760px) {
  .im-mig { grid-template-columns: 5.5rem repeat(4, minmax(0, 1fr)); column-gap: var(--sp-2); }
  .im-mig__steps p { display: none; }
  .im-mig__steps b { font-size: 0.8125rem; }
}

/* Implementation · ingestion check panel (on the scorecard panel) */
.im-ingest__list { display: grid; }
.im-ingest__list li { display: grid; grid-template-columns: 8rem 1fr auto; gap: var(--sp-3); align-items: center; padding-block: var(--sp-2); border-block-end: var(--border-dark); font-size: var(--fs-small); color: var(--c-on-dark-body); }
.im-ingest__list li span:first-child { color: var(--c-on-dark); font-weight: 600; }
.im-ingest__list b { padding: 0.15rem 0.5rem; border: 1px solid var(--c-accent-on-dark); color: var(--c-accent-on-dark); font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 560px) {
  .im-ingest__list li { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
  .im-ingest__list li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* Configuration · alert noise, before and after */
.cg-noise { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); align-items: center; }
.cg-noise > .section-head { grid-column: span 5; margin: 0; }
.cg-noise__fig { grid-column: 7 / -1; margin: 0; display: grid; gap: var(--sp-4); }
.cg-noise__row { display: grid; grid-template-columns: 4.5rem 1fr; align-items: end; gap: var(--sp-3); }
.cg-noise__row > span { font: 500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-on-dark-muted); padding-block-end: 2px; }
.cg-ticks { display: flex; align-items: flex-end; gap: 3px; block-size: 4.5rem; border-block-end: var(--border-dark); }
.cg-ticks i { flex: 1 1 0; max-inline-size: 6px; block-size: calc(var(--h) * 100%); background: rgba(255, 255, 255, 0.22); transform-origin: bottom; transition: transform 700ms var(--ease); }
.cg-ticks i.on { background: var(--c-tag-on-dark); }
.cg-ticks--after i { max-inline-size: 6px; }
.js-motion .cg-noise__fig:not(.is-in) .cg-ticks i { transform: scaleY(0); }
.cg-noise__fig figcaption { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); color: var(--c-on-dark-body); }
.cg-noise__fig figcaption span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cg-noise__fig figcaption span::before { content: ""; inline-size: 6px; block-size: 14px; background: rgba(255, 255, 255, 0.22); }
.cg-noise__fig figcaption .is-signal::before { background: var(--c-tag-on-dark); }
.cg-noise__fig figcaption em { margin-inline-start: auto; font-style: normal; font-size: 0.75rem; color: var(--c-on-dark-muted); }
@media (max-width: 900px) { .cg-noise > .section-head, .cg-noise__fig { grid-column: 1 / -1; } }

/* Configuration · seven areas in two halves */
.cg-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); }
.cg-half__name { padding-block-end: var(--sp-3); border-block-end: 2px solid var(--c-tag); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tag); }
.cg-half li { display: grid; grid-template-columns: 2.5rem 1fr; padding-block: var(--sp-4); border-block-end: var(--border); }
.cg-half li > span { font: 500 var(--fs-small)/1.7 var(--font-mono); color: var(--c-tag); }
.cg-half h3 { font-size: 1.125rem; margin-block-end: var(--sp-1); }
.cg-half p { color: var(--c-muted); font-size: 0.9375rem; }
@media (max-width: 900px) { .cg-halves { grid-template-columns: 1fr; } }

/* Solutions · business workflow monitoring: tabs, a flow with one degraded step, and its detail */
.bw-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.bw-tabs button { padding: var(--sp-2) var(--sp-4); background: none; border: 1px solid var(--c-line-dark); color: var(--c-on-dark-body); font: 600 var(--fs-small) var(--font-body); cursor: pointer; }
.bw-tabs button[aria-selected="true"] { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-primary); }
.bw-flow { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--sp-5); }
.bw-flow li { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--c-line-dark); background: rgba(255, 255, 255, 0.04); }
.bw-flow li + li::before { content: "→"; position: absolute; inset-inline-start: calc(var(--sp-5) * -1); inline-size: var(--sp-5); inset-block-start: 50%; transform: translateY(-50%); text-align: center; color: var(--c-on-dark-muted); }
.bw-flow li span { font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-on-dark-muted); }
.bw-flow li b { font-family: var(--font-display); font-size: 1.0625rem; color: var(--c-on-dark); }
.bw-flow li.is-bad { border: 2px solid var(--c-tag-on-dark); background: rgba(138, 155, 255, 0.14); }
.bw-flow li.is-bad span { color: var(--c-tag-on-dark); }
.bw-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin: var(--sp-5) 0 0; padding-block-start: var(--sp-4); border-block-start: var(--border-dark); }
.bw-detail dt { font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tag-on-dark); }
.bw-detail dd { margin: var(--sp-1) 0 0; color: var(--c-on-dark); font-family: var(--font-display); font-weight: 600; }
.bw-note { margin-block-start: var(--sp-4); font-size: 0.75rem; color: var(--c-on-dark-muted); }
@media (max-width: 900px) {
  .bw-flow { grid-template-columns: 1fr; gap: var(--sp-3); }
  .bw-flow li + li::before { content: "↓"; inset-inline-start: 0; inline-size: 100%; inset-block-start: calc(var(--sp-3) * -1); transform: translateY(-50%); }
  .bw-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Solutions · twelve solutions in four groups */
.sp-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); }
.sp-group__name { padding-block-end: var(--sp-3); border-block-end: 2px solid var(--c-tag); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tag); }
.sp-group li { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); border-block-end: var(--border); }
.sp-group b { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); }
.sp-group span { font-size: var(--fs-small); color: var(--c-muted); }
@media (max-width: 900px) { .sp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-groups { grid-template-columns: 1fr; } }

/* Training · pick a role, see its session */
.tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); }
.tr-roles { grid-column: span 5; display: grid; align-content: start; border-block-start: var(--border-dark); }
.tr-roles button { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; padding: var(--sp-4) var(--sp-3); background: none; border: 0; border-block-end: var(--border-dark); color: var(--c-on-dark-body); font: 600 1.0625rem var(--font-display); text-align: start; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.tr-roles button span { font: 500 var(--fs-small) var(--font-mono); color: var(--c-on-dark-muted); }
.tr-roles button:hover { color: var(--c-on-dark); }
.tr-roles button[aria-selected="true"] { background: rgba(255, 255, 255, 0.06); color: var(--c-on-dark); box-shadow: inset 3px 0 0 var(--c-tag-on-dark); }
.tr-roles button[aria-selected="true"] span { color: var(--c-tag-on-dark); }
.tr-panels { grid-column: 7 / -1; }
.tr-panel[hidden], .bw-panel[hidden] { display: none; }
.tr-panel { display: grid; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--c-line-dark); background: rgba(255, 255, 255, 0.04); }
.tr-panel__for { font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tag-on-dark); }
.tr-panel__name { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); color: var(--c-on-dark); }
.tr-depth { display: flex; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--c-on-dark-muted); }
.tr-depth span { margin-inline-end: var(--sp-2); }
.tr-depth i { inline-size: 1.75rem; block-size: 5px; background: rgba(255, 255, 255, 0.18); }
.tr-depth i.on { background: var(--c-tag-on-dark); }
.tr-panel__learn { display: grid; border-block-start: var(--border-dark); }
.tr-panel__learn li { padding-block: var(--sp-3); border-block-end: var(--border-dark); color: var(--c-on-dark); }
@media (max-width: 900px) { .tr-roles, .tr-panels { grid-column: 1 / -1; } }

/* Ongoing · who does what under each model */
.og-matrix { inline-size: 100%; border-collapse: separate; border-spacing: var(--sp-3) 0; margin-inline: calc(var(--sp-3) * -1); table-layout: fixed; }
.og-matrix th, .og-matrix td { padding: var(--sp-3) var(--sp-4); text-align: start; vertical-align: middle; }
.og-matrix thead td { inline-size: 30%; }
.og-matrix thead th, .og-matrix tbody td, .og-matrix tfoot td { background: #fff; border-inline: 1px solid var(--c-line); }
.og-matrix thead th { padding-block: var(--sp-5) var(--sp-4); border-block-start: 1px solid var(--c-line); font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; color: var(--c-ink); }
.og-kicker { display: block; margin-block-end: var(--sp-2); font: 500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tag); }
.og-matrix tbody th, .og-matrix tfoot th { padding-inline: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--c-ink); border-block-start: var(--border); }
.og-matrix tbody td, .og-matrix tfoot td { border-block-start: 1px solid var(--c-line-soft); }
.og-matrix tfoot td { color: var(--c-body); }
.og-matrix tfoot tr:last-child td { border-block-end: 1px solid var(--c-line); padding-block-end: var(--sp-4); }
.og-cell { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); }
.og-cell::before { content: ""; inline-size: 3.5rem; block-size: 10px; border: 1px solid var(--c-primary); }
.og-cell--you::before { background: #fff; border-color: var(--c-line); }
.og-cell--shared::before { background: linear-gradient(90deg, var(--c-primary) 50%, #fff 50%); }
.og-cell--us::before { background: var(--c-primary); }
.og-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-block-start: var(--sp-4); }
.og-legend .og-cell { font-weight: 500; color: var(--c-muted); }
.og-legend .og-cell::before { inline-size: 1.5rem; }
.og-addon { display: grid; grid-template-columns: 8rem 1fr; gap: var(--sp-4); align-items: start; margin-block-start: var(--sp-6); padding: var(--sp-5); background: var(--c-primary); color: var(--c-on-dark-body); }
.og-addon__tag { font: 500 var(--fs-eyebrow)/1.6 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tag-on-dark); }
.og-addon h3 { color: var(--c-on-dark); font-size: var(--fs-title); margin-block-end: var(--sp-1); }
.og-note { margin-block-start: var(--sp-4); color: var(--c-muted); }
@media (max-width: 760px) {
  .og-matrix { margin: 0; border-spacing: 0; }
  .og-matrix th, .og-matrix td { padding: var(--sp-3) var(--sp-2); }
  .og-matrix thead th { font-size: 1rem; }
  .og-matrix tbody th, .og-matrix tfoot th { font-size: 0.875rem; }
  .og-cell::before { inline-size: 1.5rem; }
  .og-cell { font-size: 0.75rem; }
  .og-addon { grid-template-columns: 1fr; }
}