/* ═══════════════════════════════════════════════
   Donnager — product-page layer (loaded only by Donnager.html, after site.css)
   The site system, re-voiced in the product signal: Donnager blue in the
   backdrop, the display lines, the rules and the calls to action; open
   section heads over the backdrop with glass instruments inside them; and
   motion that explains (lines that draw, a gate that runs, figures that count).
   Every continuous animation stops under reduced motion, under the site's
   pause control (html.dn-still) and while the theme cross-fades.
═══════════════════════════════════════════════ */
.page--donnager {
  --dn-blue: #4A7CC9;
  --dn-blue-b: #6B9FE8;
  --dn-ink: var(--dn-blue-b);                  /* blue that reads as text on this theme's ground */
  --dn-btn: #2E62B0;                           /* white text 6.0:1 */
  --dn-btn-hover: #3A71C2;                     /* white text 4.9:1 */
  --dn-red: #E8402F;
  --dn-red-ink: #FF7A6B;                       /* 6.5:1 on the refused row */
  --dn-glass: rgba(12, 14, 20, 0.74);
  --dn-glass-2: rgba(14, 17, 25, 0.92);
  --dn-line: rgba(107, 159, 232, 0.2);
  --dn-line-2: rgba(107, 159, 232, 0.42);
  --dn-soft: rgba(74, 124, 201, 0.12);
  --dn-glow: rgba(74, 124, 201, 0.34);
}
[data-theme="light"] .page--donnager {
  --dn-ink: #234E8C;                           /* 4.6:1 on the lifted light backdrop */
  --dn-red: #B42318;
  --dn-red-ink: #B42318;
  --dn-glass: rgba(246, 247, 250, 0.84);
  --dn-glass-2: rgba(242, 244, 249, 0.95);
  --dn-line: rgba(47, 94, 168, 0.2);
  --dn-line-2: rgba(47, 94, 168, 0.42);
  --dn-soft: rgba(47, 94, 168, 0.08);
  --dn-glow: rgba(47, 94, 168, 0.2);
}

/* ── the backdrop takes the product signal ── */
.page--donnager .backdrop { --grid-line: rgba(107, 159, 232, 0.07); }
[data-theme="light"] .page--donnager .backdrop { --grid-line: rgba(47, 94, 168, 0.07); }
.dn-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 42% at 80% 14%, rgba(74, 124, 201, 0.2), transparent 72%),
    radial-gradient(38% 32% at 6% 92%, rgba(74, 124, 201, 0.1), transparent 70%);
  pointer-events: none;
}
[data-theme="light"] .dn-glow {
  background:
    radial-gradient(50% 42% at 80% 14%, rgba(74, 124, 201, 0.13), transparent 72%),
    radial-gradient(38% 32% at 6% 92%, rgba(74, 124, 201, 0.07), transparent 70%);
}

/* below the hero the backdrop recedes behind a veil (opacity follows scroll, set by donnager.js),
   so blue labels and body copy that sit directly on it keep their contrast */
.dn-veil { position: absolute; inset: 0; background: #090b10; opacity: calc(var(--dn-dim, 1) * 0.46); pointer-events: none; }
[data-theme="light"] .dn-veil { background: #f5f5f3; opacity: calc(var(--dn-dim, 1) * 0.5); }

/* ── the intro: MCR, then Donnager beside it (the cinematic page's sequence, restored) ──
   #intro keeps the shared overlay styles from site.css: fixed, theme colours, hidden without JS or under
   reduced motion, and the .fade-out dissolve. donnager.js adds the beats (.is-b1 … .is-b8) in time. */
.dn-intro__stage { position: relative; display: flex; align-items: center; }
.dn-intro__mcr, .dn-intro__don { width: 80px; height: 80px; opacity: 0; }
.dn-intro__mcr { transform: translateX(72.5px); }          /* starts centred on screen, then makes room */
.dn-intro__don { transform: translateX(30px); }
.dn-intro svg { display: block; width: 80px; height: 80px; overflow: visible; }
.dn-intro__divider {
  width: 1px; height: 80px;
  margin: 0 32px;
  background: color-mix(in srgb, var(--intro-ink) 25%, transparent);
  opacity: 0;
  transform: scaleY(0);
}
.dn-intro__glow {
  position: absolute;
  width: 400px; height: 400px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 124, 201, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.dn-intro [data-ic="large"] { transform-origin: 100px 100px; transform: scale(0); }
.dn-intro [data-ic="tr"] { transform-origin: 155px 45px; transform: translate(-55px, 55px) scale(0); }
.dn-intro [data-ic="bl"] { transform-origin: 45px 155px; transform: translate(55px, -55px) scale(0); }
.dn-intro [data-dn="diamond"] { transform-origin: 50px 50px; transform: scale(0); }
.dn-intro [data-dn="tl"] { transform: translate(12px, 12px); }      /* the corner lines start folded in on the diamond */
.dn-intro [data-dn="tr"] { transform: translate(-12px, 12px); }
.dn-intro [data-dn="br"] { transform: translate(-12px, -12px); }
.dn-intro [data-dn="bl"] { transform: translate(12px, -12px); }
/* 1 · MCR fades in, the glow with it */
.dn-intro.is-b1 .dn-intro__mcr { opacity: 1; transition: opacity 0.4s ease; }
.dn-intro.is-b1 .dn-intro__glow { opacity: 0.6; }
/* 2 · its large circle springs in */
.dn-intro.is-b2 [data-ic="large"] { transform: scale(1); transition: transform 0.52s cubic-bezier(0.34, 1.62, 0.64, 1); }
/* 3 · the satellites appear at its centre … 4 · and fly out to their places */
.dn-intro.is-b3 [data-ic="tr"] { transform: translate(-55px, 55px) scale(1); transition: transform 0.28s cubic-bezier(0.34, 1.5, 0.64, 1); }
.dn-intro.is-b3 [data-ic="bl"] { transform: translate(55px, -55px) scale(1); transition: transform 0.28s cubic-bezier(0.34, 1.5, 0.64, 1); }
.dn-intro.is-b4 [data-ic="tr"], .dn-intro.is-b4 [data-ic="bl"] { transform: none; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
/* 5 · MCR slides left to make room … 6 · the divider grows */
.dn-intro.is-b5 .dn-intro__mcr { transform: none; transition: opacity 0.4s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.dn-intro.is-b6 .dn-intro__divider { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
/* 7 · Donnager arrives from the right, its diamond springing in … 8 · the corner lines flow out */
.dn-intro.is-b7 .dn-intro__don { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.dn-intro.is-b7 [data-dn="diamond"] { transform: scale(1); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dn-intro.is-b8 [data-dn] { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.dn-intro.is-b8 [data-dn="tl"], .dn-intro.is-b8 [data-dn="tr"],
.dn-intro.is-b8 [data-dn="br"], .dn-intro.is-b8 [data-dn="bl"] { transform: none; }
.dn-intro.fade-out .dn-intro__glow { opacity: 0; }
/* if donnager.js never runs (blocked, failed to load) the overlay dismisses itself after 6 s;
   the script cancels this the moment it takes over */
.dn-intro { animation: dn-intro-failsafe 0.9s ease 6s forwards; }
@keyframes dn-intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ── scroll progress ── */
.dn-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101; pointer-events: none; }
.dn-progress i { display: block; height: 100%; background: var(--dn-blue-b); transform-origin: 0 50%; transform: scaleX(var(--dn-p, 0)); }
[data-theme="light"] .dn-progress i { background: var(--dn-blue); }

/* ── nav: the Donnager lockup, and the call to action in blue ── */
.dn-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.dn-brand__mark { width: 26px; height: 26px; flex-shrink: 0; align-self: center; }
/* baseline alignment seats the words at the top of the 26px row: drop them 4px so the capitals centre
   on the mark and on the nav links (above 960px; below it the lockup is a centred grid) */
@media (min-width: 60.0625em) {
  .dn-brand__name { margin-top: 4px; }
  /* with a wide fallback font the endorsement gives way (ellipsis) before the nav links would wrap */
  .dn-brand { flex-shrink: 1; min-width: 0; }
  .dn-brand__by { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .page--donnager .nav__links { flex-shrink: 0; }
}
.dn-brand__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.dn-brand__by {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color 0.2s;
}
.dn-brand:hover .dn-brand__by { color: var(--color-text); }
.page--donnager .nav__cta,
.page--donnager .btn--solid,
.dn-btn {
  background: var(--dn-btn);
  border-color: var(--dn-btn);
  color: #fff;
}
.page--donnager .nav__cta:hover,
.page--donnager .btn--solid:hover,
.dn-btn:hover { background: var(--dn-btn-hover); border-color: var(--dn-btn-hover); color: #fff; }
.page--donnager .nav__cta:focus-visible,
.page--donnager .btn--solid:focus-visible, .dn-btn:focus-visible { outline-color: var(--dn-ink); }

/* without WebGL the site hides its pause control, since its backdrop is still; this page still moves,
   so the control stays (donnager.js wires it when site.js has not) */
@media (prefers-reduced-motion: no-preference) {
  html.no-gl.dn-motion .nav__right .nav__toggle[data-motion-toggle] { display: flex !important; }
  html.no-gl.dn-motion .mobile-nav .mobile-nav__motion[data-motion-toggle] { display: inline-block !important; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 56.25em) {
  html.no-gl.dn-motion .nav__right .nav__toggle[data-motion-toggle] { display: none !important; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 56.3125em) {
  html.no-gl.dn-motion .mobile-nav .mobile-nav__motion[data-motion-toggle] { display: none !important; }
}

/* ── section rail (wide screens) ── */
.dn-rail {
  position: fixed;
  right: clamp(12px, 1.6vw, 28px);
  top: 50%;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  transform: translateY(-50%);
}
.dn-rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 36px;
  min-height: 24px;
  color: var(--color-text-muted);
}
.dn-rail a span {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 6px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  padding: 2px 6px;
  background: var(--dn-glass-2);
}
.dn-rail a i { width: 16px; height: 1px; background: currentColor; transition: width 0.3s var(--ease-out), background-color 0.3s; }
.dn-rail a:hover span, .dn-rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); color: var(--color-text); }
.dn-rail a.is-on i { width: 30px; height: 2px; background: var(--dn-ink); }
.dn-rail a.is-on { color: var(--dn-ink); }
@media (min-width: 85em) { .dn-rail { display: flex; } }

/* ── shared type ── */
.dn-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dn-ink);
}
.dn-eyebrow::before { content: ''; width: 24px; height: 1px; flex-shrink: 0; background: currentColor; }
.dn-h2 {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.2rem + 4.2vw, 5.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--color-text);
}
.dn-h2 em, .dn-h3 em, .dn-seal em { font-style: normal; color: var(--dn-ink); }
.dn-lede {
  max-width: 40rem;
  margin-top: var(--space-6);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--text-soft);
}
.dn-lede b { font-weight: 500; color: var(--color-text); }
.dn-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}
.dn-p { font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-muted); }

/* ── sections: open heads over the backdrop, glass instruments inside ── */
.dn-sec { position: relative; padding-top: clamp(5rem, 9vw, 8.5rem); }
.dn-sec:first-child { padding-top: clamp(1rem, 3vw, 2.5rem); }
.dn-head { max-width: 48rem; }
.dn-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.dn-head--split .dn-lede { margin-top: 0; }
.dn-glass {
  position: relative;
  background: var(--dn-glass);
  border: 1px solid var(--dn-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
  --p-text: var(--color-text);
  --p-muted: var(--color-text-muted);
  --p-rule: var(--dn-line);
  --p-bg: var(--dn-glass);
}
.no-gl .dn-glass, .no-js .dn-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--dn-glass-2); }
/* the blue top accent draws across as a block arrives */
.dn-accent::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--dn-ink);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 90ms + 200ms);
}
.reveal-ready .reveal:not(.visible) .dn-accent::after,
.reveal-ready .dn-accent.reveal:not(.visible)::after { transform: scaleX(0); }

/* staggered arrival for lists: the container stays put, its children rise in turn.
   Arrival uses `translate`, hover uses `transform`, so neither overrides the other. */
.reveal-ready .reveal.dn-stagger { opacity: 1; transform: none; }
.dn-stagger > * { --dn-delay: calc(var(--i, 0) * 90ms + 80ms); }
.reveal-ready .dn-stagger > * {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.8s var(--ease-out) var(--dn-delay), translate 0.9s var(--ease-out) var(--dn-delay),
              transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.4s var(--ease-out), background-color 0.3s;
}
.reveal-ready .dn-stagger.visible > * { opacity: 1; translate: none; }

/* ── hero ── */
.dn-hero { position: relative; isolation: isolate; min-height: max(min(38rem, 100vh), 88vh); min-height: max(min(38rem, 100svh), 88svh); }
.dn-map {
  position: absolute; inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 30%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 30%, #000 62%);
}
.dn-hero .hero__text { max-width: 66rem; }
.dn-hero .dn-eyebrow {
  width: fit-content;
  margin-bottom: var(--space-2);
  padding: 6px 12px;
  background: var(--dn-glass);
  border: 1px solid var(--dn-line);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.dn-hero .hero__headline { font-size: clamp(2.9rem, 1.8rem + 5.6vw, 7.25rem); line-height: 0.92; }
/* the site stacks the hero at 1100px; this larger headline needs the full width up to 1216px, where the
   call-to-action row beside it would otherwise break "Operating System" over two lines */
@media (min-width: 68.8125em) and (max-width: 76em) {
  .dn-hero .hero__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}
.dn-line { display: block; overflow: hidden; padding-bottom: 0.05em; margin-bottom: -0.05em; }
.dn-line > span { display: block; }
.dn-line--blue > span { color: var(--dn-ink); }
[data-theme="dark"] .dn-line--blue > span { color: #8FB5F0; }   /* 3.2:1 on the brightest crest */
.reveal-ready .dn-lines .dn-line > span { transform: translateY(108%); transition: transform 1.15s var(--ease-out); }
.reveal-ready .dn-lines .dn-line:nth-child(2) > span { transition-delay: 0.12s; }
.reveal-ready .dn-lines.visible .dn-line > span { transform: none; }
.reveal-ready.is-intro .dn-lines .dn-line > span { transform: translateY(108%); }
.dn-hero .hero__desc b { font-weight: 500; color: var(--color-text); }

/* ── what it finds: four outcome cards ── */
.dn-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.dn-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.dn-card:hover { border-color: var(--dn-line-2); box-shadow: 0 24px 60px -30px var(--dn-glow); transform: translateY(-3px); }
.dn-card__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dn-ink); }
.dn-card .dn-h3 { font-size: clamp(1.5rem, 1.2rem + 0.6vw, 1.875rem); }
.dn-card .dn-p { font-size: 0.9375rem; }

/* copy that sits directly on the backdrop takes the soft tone, as the hero does */
.dn-step__text .dn-p, .dn-keep__item .dn-p,
.dn-sovereign .panel__p, .dn-join-lead .panel__p { color: var(--text-soft); }

/* ── the join ── */
.dn-join-frame { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: clamp(1.25rem, 2.6vw, 2.5rem); }
.dn-join-frame .join { margin-top: 0; border-bottom: 0; }
.dn-join-frame .quote { border-left-color: var(--dn-ink); }
.dn-join-lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 3.4vw, 3rem); row-gap: var(--space-6); margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.dn-join-lead .panel__p strong { color: var(--color-text); }
/* scattered systems drift; joined systems draw their links, then the risk path runs */
/* continuous loops are declared paused; they run only while their block is on screen and motion is on
   (.dn-live, set by donnager.js), so without script, off screen or paused, nothing loops */
.dn-join-frame .jx-scatter > g { animation: dn-drift 7s ease-in-out infinite alternate paused; transform-box: fill-box; }
.dn-join-frame .jx-scatter > g:nth-child(2) { animation-duration: 8.5s; animation-delay: -2s; }
.dn-join-frame .jx-scatter > g:nth-child(3) { animation-duration: 6.2s; animation-delay: -4s; }
.dn-join-frame .jx-scatter > g:nth-child(4) { animation-duration: 9s; animation-delay: -1s; }
.dn-join-frame .jx-scatter > g:nth-child(5) { animation-duration: 7.6s; animation-delay: -3s; }
@keyframes dn-drift { from { transform: translate(-2px, -3px); } to { transform: translate(3px, 2px); } }
.dn-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out) var(--d, 0s); }
.reveal-ready .reveal:not(.visible) .dn-draw { stroke-dashoffset: 1; }
.dn-join-frame .join svg .jx-risk { stroke: var(--dn-ink); animation: dn-march 1.4s linear infinite paused; opacity: 1; transition: opacity 0.6s var(--ease-out) 1.2s; }
.reveal-ready .reveal:not(.visible) .jx-risk { opacity: 0; }
@keyframes dn-march { to { stroke-dashoffset: -18; } }
.dn-join-frame .join svg .jx-dot { stroke: var(--dn-ink); fill: var(--dn-glass-2); transform-box: fill-box; transform-origin: center; animation: dn-pulse 2.4s ease-in-out infinite paused; }
.dn-join-frame.dn-live .jx-scatter > g,
.dn-join-frame.dn-live .join svg .jx-risk,
.dn-join-frame.dn-live .join svg .jx-dot { animation-play-state: running; }
@keyframes dn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
.dn-join-frame .join__note b { color: var(--dn-ink); }

/* ── the ownership graph ── */
.dn-graph-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 2.6vw, 2.5rem);
}
.dn-finds { display: grid; gap: 8px; }
.dn-find {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 4px var(--space-3);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--dn-line);
  background: transparent;
  text-align: left;
  color: var(--color-text);
  cursor: default;
  transition: border-color 0.3s, background-color 0.3s;
}
.dn-find:hover, .dn-find:focus-visible, .dn-find.is-lit { border-color: var(--dn-line-2); background: var(--dn-soft); }
.dn-find[aria-pressed="true"] { border-color: var(--dn-ink); background: var(--dn-soft); box-shadow: inset 3px 0 0 var(--dn-ink); }
.dn-find__n { grid-row: span 2; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--dn-ink); padding-top: 0.2em; }
.dn-find__t { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
.dn-find__d { font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
.dn-graph-wrap .graph { --p-node: var(--dn-glass-2); }
.dn-graph-wrap .graph .gx-found, .dn-graph-wrap .graph .gx-found-node { stroke: var(--dn-ink); }
.dn-graph-wrap .graph .gx-flag { fill: var(--dn-ink); }
.dn-graph-wrap .graph .gx-discovered .gx-found { animation: dn-march 1.6s linear infinite paused; }
.dn-graph-wrap.dn-live .graph .gx-discovered .gx-found { animation-play-state: running; }
.reveal-ready .dn-graph-wrap.reveal:not(.visible) .gx-discovered { opacity: 0; }
.reveal-ready .dn-graph-wrap.reveal.visible .gx-discovered { animation: dn-appear 0.7s var(--ease-out) var(--at, 0s) backwards; }
@keyframes dn-appear { from { opacity: 0; } }
/* arrowheads wait for their lines */
.dn-graph-wrap .gx-arrow { transition: opacity 0.4s var(--ease-out) 1.5s; }
.reveal-ready .dn-graph-wrap.reveal:not(.visible) .gx-arrow { opacity: 0; }
.dn-graph-wrap .graph .gx-node rect { transition: opacity 0.6s var(--ease-out) var(--d, 0s); }
.reveal-ready .reveal:not(.visible) .graph .gx-node rect,
.reveal-ready .reveal:not(.visible) .graph .gx-label,
.reveal-ready .reveal:not(.visible) .graph .gx-sub,
.reveal-ready .reveal:not(.visible) .graph .gx-pct { opacity: 0; }
.dn-graph-wrap .graph .gx-label, .dn-graph-wrap .graph .gx-sub, .dn-graph-wrap .graph .gx-pct { transition: opacity 0.8s var(--ease-out) 0.5s; }
.dn-graph-wrap .graph .gx-discovered { transition: opacity 0.3s; }
.dn-graph-wrap .graph svg.is-focus .gx-discovered { opacity: 0.18; }
.dn-graph-wrap .graph svg.is-focus .gx-discovered.is-lit { opacity: 1; }
.dn-graph-wrap .graph .gx-discovered.is-lit .gx-found { stroke-width: 2.2; }

/* ── the platform: the loop in one line, then four steps, each with its specimen ── */
.dn-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
}
.dn-flow li {
  --dn-gap: clamp(18px, 2.6vw, 40px);
  position: relative;
  padding: 8px 12px 8px calc(12px + 0.2em);
  background: var(--dn-glass-2);
  border: 1px solid var(--dn-line-2);
  transition: opacity 0.6s var(--ease-out) calc(var(--i, 0) * 160ms + 150ms), border-color 0.6s var(--ease-out) calc(var(--i, 0) * 160ms + 450ms);
}
.dn-flow li + li { margin-left: var(--dn-gap); }
.dn-flow li + li::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: var(--dn-gap);
  height: 1px;
  background: var(--dn-ink);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out) calc(var(--i, 0) * 160ms);
}
.dn-flow li:first-child { border-color: var(--dn-ink); }
.reveal-ready .reveal.dn-flow { opacity: 1; transform: none; }
.reveal-ready .dn-flow:not(.visible) li { opacity: 0; border-color: var(--dn-line); }
.reveal-ready .dn-flow:not(.visible) li + li::before { transform: scaleX(0); }
.dn-flow.visible li:last-child { border-color: var(--dn-ink); }

/* ── four steps, each with its specimen ── */
.dn-steps { display: grid; gap: clamp(3.5rem, 7vw, 6.5rem); margin-top: clamp(3rem, 5vw, 4.5rem); }
.dn-step {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.dn-step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dn-step:nth-child(even) .dn-step__text { order: 2; }
.dn-step__text { display: flex; flex-direction: column; gap: var(--space-4); }
.dn-step__n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dn-ink); }
.dn-step .dn-h3 { font-size: clamp(2rem, 1.3rem + 1.8vw, 3.25rem); line-height: 0.95; }
.dn-spec { display: block; margin-top: 0; }
.dn-spec .rtn-sp { background: var(--dn-glass-2); border-color: var(--dn-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 40px 90px -50px var(--dn-glow); }
.dn-spec .rtn-sp__strip, .dn-spec .rtn-sp__foot { border-color: var(--dn-line); }
/* the "Illustrative data" tag stays whole: on the narrowest phones it steps under the specimen name */
.dn-spec .rtn-sp__strip { flex-wrap: wrap; row-gap: 0.35rem; }
.dn-spec .rtn-sp__mark { white-space: nowrap; }
.reveal-ready .reveal.dn-step { opacity: 1; transform: none; }
.reveal-ready .dn-step.reveal .dn-step__text { opacity: 0; translate: 0 24px; transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out); }
.reveal-ready .dn-step.reveal .dn-spec .rtn-sp { opacity: 0; translate: 40px 0; transition: opacity 1s var(--ease-out) 0.15s, translate 1.1s var(--ease-out) 0.15s; }
.reveal-ready .dn-step.reveal:nth-child(even) .dn-spec .rtn-sp { translate: -40px 0; }
.reveal-ready .dn-step.reveal.visible .dn-step__text,
.reveal-ready .dn-step.reveal.visible .dn-spec .rtn-sp { opacity: 1; translate: none; }
/* the log writes itself, the refusal flares once */
.reveal-ready .dn-step .rtn-al__r { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.reveal-ready .dn-step .rtn-al__r:nth-child(2) { transition-delay: 0.7s; }
.reveal-ready .dn-step .rtn-al__r:nth-child(3) { transition-delay: 1.05s; }
.reveal-ready .dn-step .rtn-al__r:nth-child(4) { transition-delay: 1.4s; }
.reveal-ready .dn-step .rtn-al__r:nth-child(5) { transition-delay: 1.75s; }
.reveal-ready .dn-step.visible .rtn-al__r { opacity: 1; transform: none; }
.dn-step.visible .rtn-al__out--no { animation: dn-flare 1.4s ease-out 1.5s 1 both; }
@keyframes dn-flare { 0% { box-shadow: 0 0 0 0 rgba(232, 64, 47, 0); } 30% { box-shadow: 0 0 0 4px rgba(232, 64, 47, 0.4); } 100% { box-shadow: 0 0 0 8px rgba(232, 64, 47, 0); } }
.page--donnager .dn-spec .rtn-al__out--no { color: var(--dn-red-ink); }

/* ── the gate ── */
.dn-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.dn-gate .dn-lede { margin-top: var(--space-6); }
.dn-gate__note { margin-top: var(--space-4); max-width: 36rem; font-size: var(--fs-body); line-height: 1.6; color: var(--text-soft); }
.dn-gate__note b { font-weight: 500; color: var(--color-text); }
.dn-console { font-family: var(--font-mono); background: var(--dn-glass-2); box-shadow: 0 40px 90px -45px var(--dn-glow); }
.dn-console__head, .dn-console__foot {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 12px 18px;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-soft);
}
.dn-console__head { border-bottom: 1px solid var(--dn-line); }
.dn-console__head b { font-weight: 500; color: var(--color-text); }
.dn-console__state { color: var(--dn-ink); text-align: right; }
.dn-console__state.is-bad { color: var(--dn-red-ink); }
.dn-console__rows { list-style: none; padding: 8px 0; }
.dn-console__rows li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 18px;
  font-size: 0.8125rem;
  color: var(--text-soft);
  border-left: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.dn-console__rows li i { font-style: normal; font-size: 0.6875rem; color: var(--text-soft); }
.dn-console__rows li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dn-console__rows li b { font-weight: 500; }
.dn-console__rows li small { font-size: 0.6875rem; line-height: 1.4; color: var(--text-soft); }
.dn-console__rows li em { font-style: normal; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.dn-console__rows li.is-on { color: var(--color-text); border-left-color: var(--dn-line-2); background: var(--dn-soft); }
.dn-console__rows li.is-pass { color: var(--color-text); border-left-color: var(--dn-ink); }
.dn-console__rows li.is-pass em { color: var(--dn-ink); }
.dn-console__rows li.is-bad { color: var(--color-text); border-left-color: var(--dn-red); background: rgba(232, 64, 47, 0.1); }
.dn-console__rows li.is-bad em { color: var(--dn-red-ink); }
.dn-console__foot { border-top: 1px solid var(--dn-line); justify-content: flex-start; line-height: 1.6; }

/* ── built to be questioned ── */
.dn-qa-frame { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: clamp(0.5rem, 1.4vw, 1rem) clamp(1.25rem, 2.6vw, 2.5rem); }
.dn-qa-frame .qa { margin-top: 0; }
.dn-qa-frame .qa__row:first-child { border-top: 0; }
.dn-qa-frame .qa__row:last-child { border-bottom: 0; }
.dn-qa-frame .qa__q { color: var(--color-text); }
.dn-qa-frame .qa__a strong { color: var(--dn-ink); }
.dn-sovereign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 3.4vw, 3rem); row-gap: var(--space-4); align-items: center; margin-top: clamp(2rem, 3.5vw, 3rem); }
.dn-sovereign .quote { border-left-color: var(--dn-ink); color: var(--color-text); }
.dn-sovereign .panel__p { color: var(--text-soft); }

/* ── the case: today, struck; with Donnager, in blue ── */
.dn-case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.dn-case__item { display: flex; flex-direction: column; padding: clamp(1.25rem, 2vw, 1.75rem); }
.dn-case__ch { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); }
.dn-case__item .dn-h3 { margin: var(--space-4) 0 var(--space-5); font-size: clamp(1.75rem, 1.3rem + 0.9vw, 2.25rem); }
.dn-ba { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); margin-bottom: var(--space-5); }
.dn-ba dt, .dn-ba dd { padding-block: 9px; border-top: 1px solid var(--dn-line); }
.dn-ba dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); padding-top: 12px; }
.dn-ba dd { font-weight: 500; }
.dn-ba__was { position: relative; color: var(--color-text-muted); }
.dn-ba__was::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 55%; height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out) calc(var(--i, 0) * 120ms + 0.5s);
}
.dn-ba__now { color: var(--dn-ink); transition: opacity 0.6s var(--ease-out) calc(var(--i, 0) * 120ms + 1s), transform 0.6s var(--ease-out) calc(var(--i, 0) * 120ms + 1s); }
.reveal-ready .dn-case:not(.visible) .dn-ba__was::after { transform: scaleX(0); }
.reveal-ready .dn-case:not(.visible) .dn-ba__now { opacity: 0; transform: translateX(-8px); }

/* ── what you keep ── */
.dn-keep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.dn-keep__item { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--dn-line-2); }
.dn-keep__item .dn-h3 { font-size: clamp(1.875rem, 1.4rem + 1vw, 2.5rem); }
.dn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.dn-fact { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) clamp(1rem, 1.6vw, 1.5rem); }
.dn-fact + .dn-fact { border-left: 1px solid var(--dn-line); }
.dn-fact dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dn-ink); }
.dn-fact dd { font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }
.dn-seal {
  max-width: 22ch;
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--dn-line-2);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-text);
}

/* ── sectors ── */
.page--donnager .sectors { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.page--donnager .sector {
  background: var(--dn-glass);
  border-color: var(--dn-line);
  border-top-color: var(--dn-ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.page--donnager .sectors > .sector { --dn-delay: calc(var(--i, 0) * 45ms + 60ms); }
.page--donnager .sector:hover { border-color: var(--dn-line-2); background: var(--dn-soft); transform: translateY(-2px); }

/* ── footer in the product voice ── */
.page--donnager .footer__headline em { color: var(--dn-ink); -webkit-text-stroke: 0; }

/* ── motion off: reduced motion, the site's pause control, and while the theme cross-fades ── */
.dn-still .dn-join-frame .jx-scatter > g,
.dn-still .dn-join-frame .join svg .jx-risk,
.dn-still .dn-join-frame .join svg .jx-dot,
.dn-still .dn-graph-wrap .graph .gx-discovered .gx-found { animation: none; }
.theme-switching .page--donnager * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .page--donnager .dn-join-frame .jx-scatter > g,
  .page--donnager .dn-join-frame .jx-risk,
  .page--donnager .dn-join-frame .jx-dot,
  .page--donnager .graph .gx-found,
  .page--donnager .rtn-al__out--no { animation: none !important; }
  .dn-card:hover, .page--donnager .sector:hover { transform: none; }
  /* reduced motion shows everything at once: no staged delays */
  .page--donnager *, .page--donnager *::before, .page--donnager *::after { transition-delay: 0s !important; animation-delay: 0s !important; }
}

/* ── responsive ── */
@media (max-width: 73.75em) {
  .dn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-gate { grid-template-columns: 1fr; row-gap: clamp(2rem, 4vw, 3rem); }
  .dn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-fact:nth-child(3) { border-left: 0; }
  .dn-fact:nth-child(n+3) { border-top: 1px solid var(--dn-line); }
}
@media (max-width: 61.9375em) {
  .dn-head--split { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .dn-join-lead { grid-template-columns: 1fr; }
  .dn-graph-wrap { grid-template-columns: 1fr; }
  .dn-step, .dn-step:nth-child(even) { grid-template-columns: 1fr; row-gap: var(--space-8); }
  .dn-step:nth-child(even) .dn-step__text { order: 0; }
  .reveal-ready .dn-step.reveal .dn-spec .rtn-sp, .reveal-ready .dn-step.reveal:nth-child(even) .dn-spec .rtn-sp { translate: 0 30px; }
  .dn-case { grid-template-columns: 1fr; }
  .dn-keep { grid-template-columns: 1fr; }
  .dn-sovereign { grid-template-columns: 1fr; }
}
@media (max-width: 47.9375em) {
  .dn-cards { grid-template-columns: 1fr; }
  .dn-facts { grid-template-columns: 1fr; }
  .dn-fact + .dn-fact { border-left: 0; border-top: 1px solid var(--dn-line); }
  .dn-console__rows li { padding: 7px 14px; }
  .dn-console__head, .dn-console__foot { padding: 12px 14px; }
  .dn-flow { column-gap: 8px; }
  .dn-flow li + li { margin-left: 0; }
  .dn-flow li + li::before { display: none; }
}
/* up to 960px "by MCR Technologies" steps under the product name, the mark centred on the pair —
   on phones, and where the nav links would otherwise wrap beside the full lockup (901-960px).
   The lockup may give way (ellipsis) so a wide fallback font never pushes the menu off screen. */
@media (max-width: 60em) {
  .dn-brand {
    display: grid; grid-template-columns: auto minmax(0, auto); column-gap: 12px; row-gap: 3px;
    align-items: center; justify-items: start;
    flex-shrink: 1; min-width: 0;
  }
  .dn-brand__mark { grid-row: 1 / span 2; }
  .dn-brand__by { grid-column: 2; font-size: 0.875rem; }
  .dn-brand__name, .dn-brand__by { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
/* phones: a slightly smaller lockup */
@media (max-width: 37.5em) {
  .dn-brand { column-gap: 10px; }
  .dn-brand__mark { width: 24px; height: 24px; }
  .dn-brand__name { font-size: 1.25rem; }
  .dn-hero .dn-eyebrow { letter-spacing: 0.16em; }          /* the chip holds one line on a phone */
  .dn-hero .dn-eyebrow::before { display: none; }
}
@media (max-width: 22.4375em) {
  .dn-h2 { font-size: 2.375rem; }
}
/* landscape phones (touch only, so a zoomed desktop window keeps its full-size headline):
   the site's 'hero that fits', at this page's headline size */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .dn-hero .hero__headline { font-size: max(2.75rem, min(clamp(2.9rem, 1.8rem + 5.6vw, 7.25rem), 13vh)); }
}
/* landscape phones: the site's 'hero that fits', at this page's headline size */
@media (max-height: 500px) and (orientation: landscape) {
  .dn-hero .dn-eyebrow { display: none; }            /* the lockup in the nav already names it */
  .dn-hero .hero__desc { max-width: none; }
}
@media (forced-colors: active) {
  .dn-progress i, .dn-accent::after, .dn-eyebrow::before, .dn-flow li + li::before { forced-color-adjust: none; background: CanvasText; }
  .dn-rail a i { forced-color-adjust: none; background: CanvasText; }
  .dn-rail a.is-on i { background: Highlight; }
  .dn-rail a span { border: 1px solid CanvasText; }
  .dn-find[aria-pressed="true"] { border: 2px solid Highlight; }
  .dn-console__rows li.is-pass, .dn-console__rows li.is-bad { border-left-color: CanvasText; }
  .dn-map { display: none; }
  .dn-intro__divider { forced-color-adjust: none; background: CanvasText; }
}