/* The second version of the marketing site (templates/web/site/). Same brand as v1: Archivo headlines, Public Sans
   body, JetBrains Mono only for real codes and references, navy ink on warm paper, the stamp blue-violet as the one
   brand colour, periwinkle on navy, amber for "needs your attention". Everything is scoped to .dx so the app and the
   v1 pages (landing.css, marketing.css) are untouched.

   The one loud moment is the home hero: a trailer's single entry turning into four filings, each slip stamped in turn,
   ending in "Good to proceed". Everything around it stays quiet. */

.dx {
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --paper: var(--color-background-body);
  --sheet: var(--color-background-surface);
  --tint: var(--color-background-muted);
  --rule: var(--color-border);
  --rule-strong: var(--color-border-emphasized);
  --brand: var(--color-brand);
  --brand-soft: var(--color-brand-muted);
  --on-brand: var(--color-on-brand);
  --navy: var(--color-background-inverted);
  --navy-deep: #0e1520;
  --on-navy: var(--color-text-on-inverted);
  --on-navy-muted: var(--color-text-on-inverted-muted);
  --peri: var(--color-brand-on-inverted);
  --amber: var(--color-warning);
  --amber-soft: #f6e7d6;
  --ok: var(--color-success);
  --dot: var(--brand);
  --gutter: 20px;
  --section: clamp(64px, 9vw, 112px);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
html:has(.dx) { scroll-padding-top: 88px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.dx) { scroll-behavior: auto; } }

.dx :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.dx :where(ul, ol) { padding: 0; list-style: none; }
.dx :where(h1, h2, h3) {
  font-family: var(--font-family-heading);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}
.dx h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); }
.dx h2 { font-size: clamp(1.85rem, 3.3vw, 2.7rem); }
.dx h3 { font-size: 1.125rem; font-weight: 700; font-stretch: 104%; letter-spacing: -0.005em; line-height: 1.25; }
.dx p { text-wrap: pretty; }
.dx a { color: var(--brand); text-underline-offset: 3px; }
.dx :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
.dx-band :focus-visible { outline-color: var(--peri); }

.dx-container { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.dx-narrow { max-width: 820px; }
.dx-code { font-family: var(--font-family-code); font-variant-numeric: tabular-nums; font-size: .9em; letter-spacing: 0; }
.dx-muted { color: var(--muted); }
.dx-skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--sheet); padding: 8px 12px; }
.dx-skip:focus { left: 8px; }

/* Buttons */
.dx .dx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 .95rem/1 var(--font-family-body);
  padding: 12px 18px; border-radius: 3px;
  background: var(--brand); color: var(--on-brand); border: 1.5px solid var(--brand);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: filter var(--duration-fast), background var(--duration-fast);
}
.dx .dx-btn:hover { filter: brightness(1.1); }
.dx .dx-btn:disabled { opacity: .6; cursor: progress; }
.dx .dx-btn-lg { padding: 15px 22px; font-size: 1rem; }
.dx .dx-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.dx .dx-btn-ghost:hover { background: var(--color-overlay-hover); filter: none; }
.dx .dx-btn-quiet { background: transparent; color: var(--on-navy); border-color: color-mix(in srgb, var(--peri) 60%, transparent); }
.dx .dx-btn-quiet:hover { background: color-mix(in srgb, var(--peri) 14%, transparent); filter: none; }
.dx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.dx-linkbtn { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; }

/* Header: the mark and one action, nothing else */
.dx-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.dx-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.dx .dx-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.dx-brand span { font-family: var(--font-family-heading); font-weight: 800; font-stretch: 118%; font-size: 1.2rem; letter-spacing: -.01em; }
.dx-mark { width: 28px; height: 28px; flex: none; }
.dx-header .dx-btn { padding: 9px 16px; font-size: .9rem; }
@media (max-width: 420px) { .dx .dx-header .dx-people-sm { font-size: .85rem; padding-left: 14px; } }
.dx-messages p { padding: 10px 0; color: var(--ok); font-weight: 600; }

/* Bands and sections */
.dx-band { background: var(--navy); color: var(--on-navy); --dot: var(--peri); }
.dx-band a:not(.dx-btn) { color: var(--peri); }
.dx-band .dx-lede, .dx-band .dx-head p { color: var(--on-navy-muted); }
.dx-section { padding-block: var(--section); }
.dx-sheet-bg { background: var(--sheet); border-block: 1px solid var(--rule); }
.dx-lede { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 60ch; margin-top: 24px; color: var(--muted); }
.dx-head { max-width: 760px; margin-bottom: 48px; }
.dx-head p { margin-top: 18px; color: var(--muted); max-width: 64ch; }
.dx-head-tight { margin-bottom: 0; }
.dx-more { margin-top: 32px; font-weight: 600; }
.dx-more a::after, .dx-card small::after { content: none; }
.dx-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.dx-split-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.dx-split-flip > :first-child { order: 2; }
@media (max-width: 900px) {
  .dx-split, .dx-split-flip { grid-template-columns: 1fr; }
  .dx-split-flip > :first-child { order: 0; }
}

/* Home hero */
.dx-hero { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px); overflow: hidden; }
.dx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.dx-hero h1 { font-size: clamp(2.6rem, 4.9vw, 4.4rem); }
@media (max-width: 960px) { .dx-hero-grid { grid-template-columns: 1fr; } }

/* the trailer's entry, with its four filings stamped in turn */
.dx-entry {
  position: relative;
  background: var(--sheet); color: var(--ink);
  border-radius: 6px; padding: 22px 22px 26px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}
.dx-entry-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--rule-strong); }
.dx-entry-title { font-family: var(--font-family-heading); font-weight: 800; font-stretch: 108%; font-size: 1.2rem; }
.dx-entry-title .dx-code { font-size: .85em; font-weight: 600; margin-left: 4px; }
.dx-entry-sub, .dx-entry-docs { font-size: .875rem; color: var(--muted); }
.dx-entry-docs { padding: 4px 10px; background: var(--paper); border-radius: 3px; white-space: nowrap; }
.dx-slips { display: grid; gap: 8px; margin-top: 16px; }
.dx-slip {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--paper); border-radius: 4px; border-left: 3px solid var(--rule-strong);
  font-size: .9rem;
  animation: dx-slip-on .45s var(--ease-standard) both; animation-delay: calc(.35s + var(--i) * .45s);
}
.dx-slip-name { font-weight: 600; display: grid; line-height: 1.3; }
.dx-slip-name small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.dx-slip .dx-code { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-slip-state {
  font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 99px;
  background: var(--brand-soft); color: var(--brand);
  animation: dx-state-on .3s ease-out both; animation-delay: calc(.6s + var(--i) * .45s);
}
.dx-slip-state::before { content: "✓ "; }
.dx-proceed { position: absolute; right: 18px; bottom: -22px; }
.dx-proceed span {
  display: inline-block; padding: 10px 16px;
  font-family: var(--font-family-heading); font-weight: 800; font-stretch: 112%; font-size: 1.05rem;
  color: var(--ok); background: var(--sheet); border: 2.5px solid var(--ok); border-radius: 4px;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6);
  transform: rotate(-4deg);
  animation: dx-stamp .38s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: 2.5s;
}
@keyframes dx-slip-on { from { opacity: 0; transform: translateY(6px); } }
@keyframes dx-state-on { from { opacity: 0; transform: scale(.8); } }
@keyframes dx-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .dx-slip, .dx-slip-state, .dx-proceed span { animation: none; }
}
@media (max-width: 520px) {
  .dx-slip { grid-template-columns: 1fr auto; }
  .dx-slip .dx-code { grid-column: 1; grid-row: 2; }
  .dx-slip-state { grid-row: 1 / 3; grid-column: 2; }
  .dx-entry-head { flex-direction: column; }
}

/* Proof strip */
.dx-proof { border-bottom: 1px solid var(--rule); }
.dx-proof .dx-container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 22px; }
.dx-proof p { color: var(--muted); font-size: .9rem; }
.dx-proof ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.dx-proof li { font-family: var(--font-family-heading); font-weight: 700; font-stretch: 110%; font-size: 1.05rem; color: var(--ink); }

/* Try it: the desk as a working sample */
.dx-try-head { max-width: 860px; }

/* the tour bar under the workspace, and the cursor it drives. Before the tour starts it is a single button over a
   preview of the sample; once started it widens into the bar that says what's happening and holds the controls. */
.ws-tour {
  position: sticky; bottom: 16px; z-index: 15; display: flex; align-items: center; gap: 16px;
  max-width: 960px; margin: 16px auto 0; padding: 14px 16px 17px 22px;
  background: var(--navy); color: var(--on-navy); border-radius: 10px; font-size: 1.05rem; line-height: 1.45; overflow: hidden;
  box-shadow: 0 22px 48px -18px rgba(10, 18, 32, .7);
  transition: max-width .5s var(--ease-standard), padding .5s var(--ease-standard);
}
.ws-tour-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--on-navy-muted); }
.ws-tour[data-state="playing"] .ws-tour-dot { background: var(--peri); animation: ws-pulse 1.4s ease-in-out infinite; }
.ws-tour[data-state="done"] .ws-tour-dot { background: #8cc79a; }
.ws-tour-say { flex: 1; min-width: 0; font-weight: 500; }
.ws-tour-step { color: var(--on-navy-muted); font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-tour-btn { padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--peri) 60%, transparent); border-radius: 4px; background: transparent; color: var(--on-navy); font: 600 .95rem/1.2 var(--font-family-body); cursor: pointer; }
.ws-tour-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--peri) 16%, transparent); }
.ws-tour-btn:disabled { opacity: .35; cursor: default; }
.ws-tour-ctrls { display: flex; gap: 8px; flex: none; }
.ws-tour-main { min-width: 80px; }
.ws-tour[data-state="paused"] .ws-tour-main { background: var(--peri); color: var(--navy); border-color: var(--peri); }
.ws-tour-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .1); }
.ws-tour-bar i { display: block; height: 100%; width: 0; background: var(--peri); transition: width .4s ease; }
.ws-tour-start { display: none; }
.ws-tour[data-state="idle"] { max-width: 400px; padding: 0; }
.ws-tour[data-state="idle"] > :not(.ws-tour-start) { display: none; }
.ws-tour[data-state="idle"] .ws-tour-start {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 18px 28px;
  background: none; border: 0; color: var(--on-navy); font: 700 1.1rem/1.2 var(--font-family-body); cursor: pointer;
}
.ws-tour-start::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--peri); }
.ws-tour[data-state="idle"]:hover { background: color-mix(in srgb, var(--navy) 88%, var(--brand)); }

/* the preview: a shorter, faded workspace with the start button over it */
.ws-shell { position: relative; }
.ws { transition: max-height .6s var(--ease-standard); }
.ws-shell[data-collapsed] .ws { position: relative; max-height: 400px; cursor: pointer; }
.ws-shell[data-collapsed] .ws > * { pointer-events: none; }
.ws-shell[data-collapsed] .ws::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--paper) 92%, transparent) 88%); pointer-events: none; }
.ws-shell[data-collapsed] .ws-tour { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); margin: 0; width: calc(100% - 32px); }
@keyframes ws-pulse { 50% { opacity: .35; } }
.ws-cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transition: transform 1.4s cubic-bezier(.45, 0, .2, 1), opacity .4s; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.ws-cursor-on { opacity: 1; }
.ws-cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--color-brand); opacity: 0; transform: scale(.4); }
.ws-cursor-click::after { animation: ws-click .5s ease-out; }
@keyframes ws-click { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .ws-cursor { transition: opacity .2s; } .ws-tour[data-state="playing"] .ws-tour-dot { animation: none; } .ws, .ws-tour { transition: none; } }
@media (max-width: 960px) { .ws-tour { bottom: 12px; } }
@media (max-width: 560px) { .ws-tour { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px 15px; font-size: 1rem; } .ws-tour-say { flex-basis: calc(100% - 24px); } .ws-tour-ctrls { margin-left: auto; } .ws-tour-btn { padding: 8px 12px; } }

.ws {
  --ws-h: 640px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  box-shadow: 0 40px 80px -48px rgba(10, 18, 32, .55);
  font-size: .875rem; line-height: 1.45;
}
.ws button { font: inherit; color: inherit; }
.ws-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.ws-title { font-family: var(--font-family-heading); font-weight: 800; font-stretch: 108%; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.ws-draft { font-family: var(--font-family-body); font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); }
.ws-draft.ws-approved { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.ws-meta { color: var(--muted); font-size: .8rem; margin-top: 2px !important; }
.ws-bar-actions { display: flex; align-items: center; gap: 14px; }
.ws-left { font-size: .85rem; color: var(--amber); font-weight: 600; }
.ws-left-clear { color: var(--ok); }
.ws .dx-btn { padding: 9px 16px; font-size: .875rem; }
.ws .dx-btn:disabled { opacity: .45; cursor: not-allowed; }

.ws-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: var(--ws-h); }
.ws-main { overflow-y: auto; padding: 16px 18px 20px; border-right: 1px solid var(--rule); overscroll-behavior: contain; }
.ws-main h4 { font-size: .78rem; font-weight: 600; color: var(--muted); margin: 22px 0 8px; }
.ws-done { padding: 14px 16px 12px; margin-bottom: 14px; border-radius: 6px; background: color-mix(in srgb, var(--ok) 10%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.ws-outcome { display: grid; gap: 8px; }
.ws-outcome li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 8px; animation: dx-slip-on .4s var(--ease-standard) both; animation-delay: calc(var(--i) * .7s); }
.ws-outcome li::before { content: "✓"; grid-row: span 2; color: var(--ok); font-weight: 700; }
.ws-outcome b { font-weight: 600; color: var(--ink); }
.ws-outcome span { color: var(--muted); font-size: .8rem; }
.ws-done .ws-small { margin-top: 10px !important; }
@media (prefers-reduced-motion: reduce) { .ws-outcome li { animation: none; } }

.ws-obs h4 { margin-top: 0; }
.ws-ob { border: 1px solid var(--rule); border-radius: 5px; margin-bottom: 6px; background: var(--sheet); }
.ws-ob:has([aria-expanded="true"]) { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.ws-ob-head { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; text-align: left; cursor: pointer; font-weight: 600; }
.ws-ob-body { padding: 0 12px 12px; }
.ws-ob-body p { color: var(--muted); }
.ws-ob-body b { color: var(--ink); }
.ws-ob-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.ws-link { background: none; border: 0; padding: 0; color: var(--brand) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; margin-right: auto; }
.ws-act { padding: 6px 12px; border-radius: 3px; border: 1.5px solid var(--brand); background: var(--brand); color: var(--on-brand) !important; font-weight: 600; cursor: pointer; }
.ws-act + .ws-act { background: transparent; color: var(--brand) !important; }
.ws-ob[data-next]:not(:has([aria-expanded="true"])) { border-color: var(--amber); border-style: dashed; }
.ws-ob[data-done] { background: var(--paper); border-color: var(--rule); box-shadow: none; }
.ws-ob[data-done]:has([aria-expanded="true"]) { background: var(--sheet); border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.ws-ob[data-done] .ws-ob-actions { display: none; }
.ws-ob-result { margin-top: 10px !important; padding: 8px 10px; border-radius: 4px; background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok) !important; font-weight: 600; }
.ws-ob-result::before { content: "✓ "; }
.ws-ob[data-done] .ws-ob-head { color: var(--muted); font-weight: 500; }
.ws-ob[data-done] .ws-kind { background: transparent; color: var(--ok); padding-inline: 0; }
.ws-ob[data-done] .ws-kind::before { content: "✓ "; }
.ws-kind { flex: none; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.ws-kind-clash { background: var(--amber-soft); color: var(--amber); }
.ws-kind-call { background: var(--brand-soft); color: var(--brand); }
.ws-kind-found { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

.ws-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
.ws-f { position: relative; display: grid; gap: 1px; align-content: start; padding: 9px 12px; background: var(--sheet); border: 0; text-align: left; cursor: pointer; }
.ws-f > span { font-size: .72rem; color: var(--muted); }
.ws-f b { font-weight: 600; }
.ws-f b small, .ws-table small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.ws-f .dx-src { margin-top: 4px; font-style: normal; font-size: .7rem; }
.ws-f:hover, .ws-cell:hover { background: var(--paper); }
.ws-f.ws-on, .ws-cell.ws-on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
[data-flag]::after { content: ""; position: absolute; top: 0; right: 0; border: 7px solid transparent; border-top-color: var(--amber); border-right-color: var(--amber); }

.ws-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 5px; }
.ws-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.ws-table th { text-align: left; font-weight: 600; font-size: .72rem; color: var(--muted); padding: 8px 10px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ws-table td { padding: 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ws-table td:not(:has(.ws-cell)) { padding: 8px 10px; }
.ws-cell { position: relative; display: block; width: 100%; padding: 8px 10px; background: none; border: 0; text-align: left; cursor: pointer; }
.ws-cell.dx-code { color: var(--brand); font-weight: 600; white-space: nowrap; }
.ws-table tfoot td { padding: 6px 10px; font-weight: 600; border-bottom: 0; }
.ws-table tfoot td:first-child { text-align: right; color: var(--muted); font-weight: 500; }
.ws-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: var(--muted); font-size: .78rem; }
.ws-legend li { display: flex; align-items: center; gap: 6px; }

/* the sources */
.ws-docs { display: flex; flex-direction: column; min-height: 0; background: var(--tint); }
.ws-tabs { display: flex; gap: 2px; padding: 8px 8px 0; overflow-x: auto; border-bottom: 1px solid var(--rule); scrollbar-width: thin; }
.ws-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 4px 4px 0 0; background: transparent; cursor: pointer; white-space: nowrap; font-size: .8rem; font-weight: 600; color: var(--muted) !important; }
.ws-tabs button[aria-selected="true"] { background: var(--sheet); color: var(--ink) !important; box-shadow: 0 1px 0 var(--sheet); }
.ws-tabs .dx-src::before { width: 8px; height: 8px; }
.ws-tabs button[data-marks]::after { content: attr(data-marks); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--brand); color: var(--on-brand); font-size: .65rem; line-height: 16px; text-align: center; }
.ws-viewer { flex: 1; overflow-y: auto; padding: 18px; overscroll-behavior: contain; }
.ws-doc[hidden], .ws-tabs [hidden] { display: none !important; }
.ws-doc { background: var(--sheet); border-radius: 3px; padding: 18px; box-shadow: 0 1px 2px rgba(10, 18, 32, .12), 0 12px 30px -20px rgba(10, 18, 32, .5); font-size: .8rem; }
.ws-src-line { font-size: .72rem; color: var(--muted); margin: -4px 0 12px !important; }
.ws-paper { font-family: "Arial Narrow", Arial, sans-serif; letter-spacing: .01em; }
.ws-paper h5 { font-size: 1rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 12px; }
.ws-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ws-two > div { border: 1px solid var(--rule); padding: 6px 8px; }
.ws-paper small { display: block; font-size: .62rem; color: var(--muted); letter-spacing: .06em; }
.ws-doc table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ws-doc th, .ws-doc td { border: 1px solid var(--rule); padding: 5px 6px; text-align: left; font-weight: 400; }
.ws-doc thead th { background: var(--paper); font-size: .7rem; }
.ws-total { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px !important; font-weight: 700; }
.ws-small { margin-top: 10px !important; font-size: .7rem; color: var(--muted); }
.ws-sheet { font-family: var(--font-family-body); padding: 12px; }
.ws-grid th { background: var(--paper); color: var(--muted); font-size: .68rem; text-align: center !important; width: 28px; }
.ws-mail { font-family: var(--font-family-body); display: grid; gap: 10px; }
.ws-mail-head { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.ws-mail-head b { color: var(--ink); }
.ws-mail-subj { font-weight: 700; font-size: .9rem; }
.ws-attach { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-attach span { padding: 4px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); font-size: .72rem; }
.ws-record dl { display: grid; }
.ws-record dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.ws-record dt { color: var(--muted); }
.ws-sysblock { margin-bottom: 4px; }
.ws-src-next { margin-top: 18px !important; }
.ws-product, .ws-reg { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ws-product span, .ws-reg span { color: var(--muted); }
.ws-product { gap: 4px; padding: 12px 0; }
.ws .ws-url { font-size: .75rem; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.ws-product .ws-spec { color: var(--ink); padding: 2px 4px; margin-left: -4px; }
.ws-match { display: grid; gap: 2px; margin-top: 4px; padding: 6px 8px; border-radius: 3px; background: var(--paper); font-size: .75rem; color: var(--muted); }
.ws-match li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.ws .ws-saved { justify-self: start; font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.ws-snap { margin-top: 6px; border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden; }
.ws-snap-bar { display: flex; gap: 8px; align-items: center; padding: 5px 8px; background: var(--tint); font-size: .7rem; color: var(--muted); }
.ws-snap-bar span { letter-spacing: 2px; color: var(--rule-strong); font-size: .55rem; }
.ws-snap-page { padding: 10px; background: #fff; }
.ws-snap-title { font-weight: 700; margin-bottom: 6px !important; }
.ws-snap-page table { margin: 0; }
.ws-tar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ws-tar em { font-style: normal; font-weight: 700; }
[data-ref] { transition: background var(--duration-medium), box-shadow var(--duration-medium); border-radius: 2px; }
[data-ref][data-hl] { background: color-mix(in srgb, var(--brand) 14%, transparent) !important; box-shadow: 0 0 0 2px var(--brand); }

.ws-sheet-head, .ws-sources-btn { display: none; }
@media (max-width: 960px) {
  .ws-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ws-main { border-right: 0; overflow: visible; }
  .ws-docs {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 72vh;
    border-radius: 12px 12px 0 0; box-shadow: 0 -20px 50px -10px rgba(10, 18, 32, .45);
    transform: translateY(105%); transition: transform var(--duration-medium) var(--ease-standard); visibility: hidden;
  }
  .ws[data-sheet] .ws-docs { transform: none; visibility: visible; }
  .ws-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 4px; }
  .ws-sheet-head button, .ws-sources-btn { display: inline-block; padding: 7px 12px; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--sheet); font-weight: 600; cursor: pointer; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .ws-docs { transition: none; } }
@media (max-width: 520px) {
  .ws-fields { grid-template-columns: 1fr; }
  .ws-bar-actions { width: 100%; justify-content: space-between; }
  .ws-two { grid-template-columns: 1fr; }
}

.dx-own { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); margin-top: 64px; }
@media (max-width: 960px) { .dx-own { grid-template-columns: 1fr; } }
.dx-own h3 { font-size: 1.5rem; font-weight: 800; }
.dx-own .dx-head p { margin-top: 10px; }

/* Forms */
.dx-form { display: grid; gap: 16px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; padding: 20px; }
.dx-form form { display: grid; gap: 16px; }
.dx-form-raised { color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); border: 0; }
.dx-field { display: grid; gap: 6px; }
.dx-field label { font-size: .9rem; font-weight: 600; }
.dx-field :is(input, textarea, select) {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 10px 12px;
}
.dx-field :is(input, textarea, select):focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.dx-error { color: var(--color-error); font-size: .875rem; }
.dx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .dx-row2 { grid-template-columns: 1fr; } }
.dx-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dx-form-foot p { font-size: .875rem; }
.dx-try-lines { list-style: decimal !important; padding-left: 1.4em !important; font-size: .95rem; }
.dx-results li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }

.dx-modlinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px !important; }
.dx .dx-modlinks a { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 99px; font-size: .85rem; font-weight: 600; text-decoration: none; background: var(--paper); }
.dx .dx-modlinks a:hover { border-color: var(--brand); }

/* Before and after: scattered pieces on the left, the one record on the right */
.dx-ba-grid { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.15fr); gap: 16px; align-items: start; }
.dx-ba-grid h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 16px; }
.dx-ba-before, .dx-ba-after { display: flex; flex-direction: column; }
.dx-scatter { padding-block: 28px !important;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-content: start;
  padding: 22px; border-radius: 6px; background: var(--tint);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 14px 14px;
}
.dx-frag {
  padding: 12px 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 10px 20px -16px rgba(10, 18, 32, .5); font-size: .85rem; line-height: 1.45;
  transform: rotate(var(--r, 0deg)); transition: transform var(--duration-medium) var(--ease-standard), opacity var(--duration-medium), box-shadow var(--duration-medium);
}
.dx-frag:nth-child(2) { margin-top: 18px; }
.dx-frag:nth-child(3) { margin-top: -8px; }
.dx-frag-kind { font-size: .75rem; font-weight: 600; color: var(--muted); margin-bottom: 4px !important; }
.dx mark { background: none; color: inherit; padding: 0 3px; border-radius: 2px; }
.dx mark.dx-clash { background: var(--amber-soft); color: var(--amber); font-weight: 600; text-decoration: line-through 1.5px; text-decoration-color: color-mix(in srgb, var(--amber) 60%, transparent); }
.dx mark.dx-vague { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.dx-ba-issues mark.dx-clash { text-decoration: none; }
.dx-gaps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dx-gap { display: inline-block; padding: 6px 12px; border: 1.5px dashed var(--rule-strong); border-radius: 3px; color: var(--muted); font-size: .85rem; font-weight: 600; background: color-mix(in srgb, var(--sheet) 60%, transparent); transition: border-color var(--duration-medium), color var(--duration-medium); }
.dx-ba-issues { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: .85rem; color: var(--muted); }
.dx-ba-issues .dx-gap { padding: 1px 8px; font-size: .8rem; }

.dx-ba-arrow { position: relative; align-self: center; height: 120px; }
.dx-ba-arrow::before { content: ""; position: absolute; left: 6px; right: 10px; top: 50%; height: 2px; background: var(--brand); }
.dx-ba-arrow::after { content: ""; position: absolute; right: 8px; top: calc(50% - 7px); width: 14px; height: 14px; border: solid var(--brand); border-width: 2px 2px 0 0; transform: rotate(45deg); }

.dx-whole { flex: 1; display: grid; align-content: start; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 6px; box-shadow: var(--shadow-low); }
.dx-fields { display: grid; }
.dx-fld {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline;
  padding: 11px 16px; border-bottom: 1px solid var(--rule); font-size: .9rem; cursor: default; outline: none;
  transition: background var(--duration-fast);
}
.dx-fld dt { color: var(--muted); font-size: .8rem; }
.dx-fld dd { font-weight: 600; min-width: 0; }
.dx-fld dd small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); font-family: var(--font-family-body); }
.dx-fld dd.dx-code { color: var(--brand); }
.dx-fld[data-lit], .dx-fld:focus-visible { background: var(--brand-soft); }

/* where a field came from: a shape and a colour per kind of source, and the kind spelled out for screen readers */
.dx-src { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; color: var(--muted); }
.dx-src::before { content: ""; width: 9px; height: 9px; flex: none; }
.dx-src-sys::before { background: var(--navy); }
.dx-src-read::before { border: 2px solid var(--brand); border-radius: 50%; width: 10px; height: 10px; }
.dx-src-found::before { background: var(--ok); transform: rotate(45deg); width: 8px; height: 8px; }
.dx-feeds-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 14px 16px; font-size: .82rem; }
.dx-feeds-row p { font-weight: 600; color: var(--muted); }
.dx-feeds-row ul { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-feeds-row li { padding: 3px 9px; background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; }
.dx-legend { display: grid; gap: 6px; margin-top: 14px; font-size: .85rem; color: var(--muted); }
.dx-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dx-legend b { color: var(--ink); font-weight: 600; }

.dx-ba[data-tracing] .dx-scatter [data-piece]:not([data-lit]) { opacity: .35; }
.dx-frag[data-lit] { transform: rotate(0deg) translateY(-2px); box-shadow: 0 0 0 2px var(--brand), 0 14px 24px -16px rgba(10, 18, 32, .6); }
.dx-gaps .dx-gap[data-lit] { border-color: var(--ok); color: var(--ok); border-style: solid; }

.dx-ba-mods { margin-top: 40px; max-width: 72ch; color: var(--muted); }
.dx-ba-mods a { font-weight: 600; }
.dx-ba-all { margin-left: 6px; white-space: nowrap; }

@media (max-width: 960px) {
  .dx-ba-grid { grid-template-columns: 1fr; }
  .dx-ba-arrow { min-height: 48px; height: 48px; justify-self: center; width: 2px; }
  .dx-ba-arrow::before { left: 0; right: 0; top: 4px; bottom: 10px; height: auto; width: 2px; }
  .dx-ba-arrow::after { right: -6px; top: auto; bottom: 10px; transform: rotate(135deg); }
}
@media (max-width: 520px) {
  .dx-scatter { grid-template-columns: 1fr; padding: 14px; }
  .dx-frag:nth-child(n) { margin-top: 0; }
  .dx-fld { grid-template-columns: 1fr auto; }
  .dx-fld dt { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .dx-frag { transition: none; } }

/* Routing grid */
.dx-route { position: relative; padding: 0 0 32px 32px; }
.dx-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dx-q { min-height: 150px; padding: 20px; border-radius: 4px; display: grid; align-content: space-between; gap: 16px; border: 1px solid var(--rule); background: var(--sheet); }
.dx-q b { font-family: var(--font-family-heading); font-weight: 800; font-stretch: 108%; font-size: 1.15rem; }
.dx-q span { font-size: .9rem; color: var(--muted); padding-left: 18px; position: relative; }
.dx-q span::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.dx-q-auto { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.dx-q-auto span { color: color-mix(in srgb, var(--on-brand) 82%, transparent); }
.dx-q-draft { background: var(--brand-soft); border-color: transparent; }
.dx-q-expert { background: var(--amber-soft); border-color: transparent; }
.dx-q-expert b { color: var(--amber); }
.dx-axis { position: absolute; font-size: .8rem; font-weight: 600; color: var(--muted); }
.dx-axis-x { right: 0; bottom: 0; }
.dx-axis-x::before { content: ""; display: inline-block; width: 40px; height: 1.5px; background: currentColor; vertical-align: middle; margin-right: 8px; }
.dx-axis-y { left: 0; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.dx-axis-y::after { content: ""; display: inline-block; height: 40px; width: 1.5px; background: currentColor; margin-top: 8px; }
@media (max-width: 560px) { .dx-q { min-height: 120px; padding: 14px; } .dx-q b { font-size: 1rem; } }

/* Coverage */
.dx-coverage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.dx-coverage > div { padding: 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.dx-coverage p { color: var(--muted); font-size: .95rem; }
.dx-coverage a { font-size: .9rem; font-weight: 600; margin-top: 6px; }
@media (max-width: 860px) { .dx-coverage { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dx-coverage { grid-template-columns: 1fr; } }

/* Audiences */
.dx-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .dx-doors { grid-template-columns: 1fr; } }
.dx .dx-door {
  display: grid; gap: 12px; align-content: space-between; min-height: 200px; padding: 28px;
  border: 1px solid color-mix(in srgb, var(--peri) 30%, transparent); border-radius: 6px;
  color: var(--on-navy); text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast);
}
.dx .dx-door:hover { background: color-mix(in srgb, var(--peri) 10%, transparent); border-color: var(--peri); }
.dx-door h3 { font-size: 1.5rem; font-weight: 800; }
.dx-door p { color: var(--on-navy-muted); }
.dx-door p::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .5em; border: solid var(--peri); border-width: 2px 2px 0 0; transform: rotate(45deg); }

/* Integrations */
.dx-stack { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.dx-stack > div > p { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.dx-stack ul { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-stack li { padding: 6px 10px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; font-size: .85rem; font-weight: 500; }
.dx-stack-mid { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--navy); color: var(--on-navy); --dot: var(--peri); }
.dx-stack-mid .dx-mark { width: 40px; height: 40px; }
@media (max-width: 640px) { .dx-stack { grid-template-columns: 1fr; } .dx-stack-mid { width: 56px; height: 56px; } }

/* Assurances */
.dx-assure { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.dx-assure li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.dx-assure b { font-weight: 600; }
.dx-assure span { color: var(--muted); }
@media (max-width: 560px) { .dx-assure li { grid-template-columns: 1fr; } }

/* Timeline */
.dx-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 0; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.dx-timeline li { position: relative; padding: 32px 20px 0 0; border-top: 2px solid var(--rule-strong); scroll-snap-align: start; }
.dx-timeline li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brand); }
.dx-timeline li:first-child::before { background: var(--brand); }
.dx-timeline time { display: block; font-weight: 700; font-family: var(--font-family-heading); font-stretch: 108%; color: var(--brand); font-size: .95rem; }
.dx-timeline h3 { margin-top: 6px; font-size: 1rem; font-weight: 600; font-family: var(--font-family-body); font-stretch: 100%; letter-spacing: 0; }
.dx-timeline p { margin-top: 8px; font-size: .9rem; color: var(--muted); }
.dx-timeline p.dx-muted { font-size: .8rem; }
.dx-section:has(.dx-timeline p) .dx-timeline { grid-auto-flow: row; grid-auto-columns: auto; }
.dx-section:has(.dx-timeline p) .dx-timeline li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 32px; padding: 24px 0 24px 28px; border-top: 0; border-left: 2px solid var(--rule-strong); }
.dx-section:has(.dx-timeline p) .dx-timeline li::before { left: -7px; top: 30px; }
.dx-section:has(.dx-timeline p) .dx-timeline li > :not(time) { grid-column: 2; }
.dx-section:has(.dx-timeline p) .dx-timeline time { grid-row: 1 / 4; }
.dx-section:has(.dx-timeline p) .dx-timeline h3 { margin: 0; font-size: 1.15rem; }
@media (max-width: 640px) {
  .dx-timeline { grid-auto-flow: row; }
  .dx-timeline li { padding: 0 0 24px 24px; border-top: 0; border-left: 2px solid var(--rule-strong); }
  .dx-timeline li::before { left: -7px; top: 4px; }
  .dx-section:has(.dx-timeline p) .dx-timeline li { grid-template-columns: 1fr; }
  .dx-section:has(.dx-timeline p) .dx-timeline li > :not(time), .dx-section:has(.dx-timeline p) .dx-timeline time { grid-column: 1; grid-row: auto; }
}

/* Closing */
.dx-closing { padding-block: var(--section); }
.dx-closing h2 { font-size: clamp(2.2rem, 4.6vw, 3.75rem); max-width: 16ch; }

/* Inner pages */
.dx-pagehero { padding-block: clamp(56px, 8vw, 96px); }
.dx-pagehero h1 { max-width: 20ch; }
.dx-crumb { font-size: .9rem; color: var(--on-navy-muted); margin-bottom: 20px !important; }
.dx-hook { margin-top: 24px; display: inline-block; padding: 8px 14px; border-left: 3px solid var(--peri); background: color-mix(in srgb, var(--peri) 12%, transparent); font-weight: 600; }
.dx-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.dx-benefits article { padding-top: 24px; border-top: 1px solid var(--rule-strong); }
.dx-benefits h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.dx-benefits p { margin-top: 12px; color: var(--muted); max-width: 52ch; }
@media (max-width: 760px) { .dx-benefits { grid-template-columns: 1fr; gap: 36px; } }
.dx-measures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dx-measures li { padding: 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; font-family: var(--font-family-heading); font-weight: 700; font-stretch: 106%; font-size: 1.1rem; line-height: 1.25; }
@media (max-width: 560px) { .dx-measures { grid-template-columns: 1fr; } }

.dx-faq { border-top: 1px solid var(--rule); }
.dx-faq details { border-bottom: 1px solid var(--rule); }
.dx-faq summary { cursor: pointer; padding: 20px 36px 20px 0; font-weight: 600; font-size: 1.05rem; list-style: none; position: relative; }
.dx-faq summary::-webkit-details-marker { display: none; }
.dx-faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--duration-fast); }
.dx-faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
.dx-faq details p { padding-bottom: 20px; color: var(--muted); max-width: 66ch; }

.dx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dx .dx-card {
  display: grid; gap: 10px; align-content: start; padding: 24px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); text-decoration: none;
  transition: border-color var(--duration-fast);
}
.dx-sheet-bg .dx-card { background: var(--paper); }
.dx .dx-card:hover { border-color: var(--brand); }
.dx-card h3 { color: var(--brand); }
.dx-card p { font-weight: 500; }
.dx-card small { color: var(--muted); font-size: .85rem; }

.dx-layers { display: grid; gap: 56px; }
.dx-layers h2 { font-size: 1.6rem; margin-bottom: 20px; }
.dx .dx-desk-card { display: block; margin-top: 56px; padding: 32px; background: var(--navy); color: var(--on-navy); border-radius: 6px; text-decoration: none; }
.dx-desk-card p { margin-top: 12px; color: var(--on-navy-muted); max-width: 64ch; }

.dx-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dx-features li { padding: 24px 0 0 0; border-top: 3px solid var(--brand); font-size: 1.1rem; font-weight: 500; line-height: 1.45; }
.dx-features-tight { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
.dx-features-tight li { padding: 14px 0 14px 28px; border-top: 0; border-bottom: 1px solid var(--rule); font-size: 1rem; position: relative; }
.dx-features-tight li::before { content: ""; position: absolute; left: 2px; top: 1.3em; width: 12px; height: 7px; border: solid var(--brand); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.dx-on-dark li { border-color: color-mix(in srgb, var(--peri) 25%, transparent); }
.dx-on-dark li::before { border-color: var(--peri); }
@media (max-width: 760px) { .dx-features { grid-template-columns: 1fr; } }
.dx-feeds { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 48px; padding: 18px 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; }
.dx-feeds p:last-child { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; }

.dx-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dx-map-layer { padding: 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; }
.dx-map-layer p { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.dx-map ul { display: flex; flex-wrap: wrap; gap: 6px; }
.dx .dx-map a { display: inline-block; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.dx .dx-map a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.dx-map-desk { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; background: var(--navy); color: var(--on-navy-muted); border-radius: 4px; font-size: .9rem; }
.dx .dx-map-desk a { background: transparent; color: var(--on-navy); border-color: var(--peri); }
@media (max-width: 760px) { .dx-map { grid-template-columns: 1fr; } }

.dx-facts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.dx-facts > div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.dx-facts dt { font-weight: 600; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.dx-does h2 { font-size: 1.6rem; }
.dx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dx .dx-chips a { display: inline-block; padding: 10px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; text-decoration: none; font-weight: 600; }
.dx .dx-chips a:hover { border-color: var(--brand); }

.dx-table { width: 100%; border-collapse: collapse; }
.dx-table :is(th, td) { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.dx-table thead th { font-size: .85rem; color: var(--muted); font-weight: 600; }
.dx-table tbody th { font-weight: 600; white-space: nowrap; }
.dx-table td:last-child { color: var(--muted); }
@media (max-width: 700px) {
  .dx-table thead { display: none; }
  .dx-table tr { display: grid; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .dx-table :is(th, td) { border: 0; padding: 2px 0; }
}

.dx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .dx-plans { grid-template-columns: 1fr; } }
.dx-plan { display: grid; align-content: start; gap: 12px; padding: 28px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; }
.dx-plan-main { border: 2px solid var(--brand); }
.dx-plan h2 { font-size: 1.75rem; }
.dx-plan-for { color: var(--muted); }
.dx-plan-price { font-weight: 600; padding: 14px 0; border-block: 1px solid var(--rule); }
.dx-plan ul { display: grid; gap: 6px; font-size: .95rem; }
.dx-plan li::before { content: "+ "; color: var(--brand); font-weight: 700; }
.dx-addon { margin-top: 16px; padding: 24px 28px; border: 1px dashed var(--rule-strong); border-radius: 6px; display: grid; gap: 6px; }
.dx-addon h2 { font-size: 1.25rem; }
.dx-addon p { color: var(--muted); }

.dx-changed { display: grid; border-top: 1px solid var(--rule); }
.dx-changed > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.dx-changed dt { font-weight: 600; }
.dx-changed dd { color: var(--muted); }
@media (max-width: 560px) { .dx-changed > div { grid-template-columns: 1fr; } }

.dx-demo-page .dx-split { align-items: center; }

/* Footer */
.dx-footer { border-top: 1px solid var(--rule); padding-block: 28px; font-size: .8rem; color: var(--muted); --dot: var(--brand); }
.dx-footer .dx-container { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.dx-footer p { max-width: 80ch; }
.dx-footer a { color: var(--muted); }
.dx-footer-links { display: flex; gap: 18px; align-items: center; }
.dx-footer select { background: transparent; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 4px 8px; }

/* Home: one statement, then the sample declaration */
.dx-intro { padding-block: clamp(36px, 6vw, 72px) clamp(20px, 3vw, 32px); }
.dx-intro h1 { font-size: clamp(1.9rem, 3.9vw, 3.3rem); line-height: 1.08; max-width: 30ch; }
.dx-home-demo { padding-bottom: clamp(48px, 7vw, 96px); }

/* The people button: a dark pill with the founders' faces, in the header and the pilot form */
.dx .dx-people {
  display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px;
  background: var(--navy); color: var(--on-navy); border: 0; border-radius: 999px;
  font: 600 1.05rem/1 var(--font-family-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast);
}
.dx .dx-people:hover { background: color-mix(in srgb, var(--navy) 85%, var(--brand)); }
.dx-people-faces { display: flex; flex: none; }
.dx-people-faces img { flex: none; }
.dx-people-faces img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--navy); object-fit: cover; }
.dx-people-faces img + img { margin-left: -12px; }
.dx .dx-people-sm { gap: 10px; padding: 4px 4px 4px 16px; font-size: .92rem; }
.dx-people-sm .dx-people-faces img { width: 32px; height: 32px; }
.dx-band .dx-people { background: var(--sheet); color: var(--ink); }
.dx-band .dx-people:hover { background: #fff; }
.dx-band .dx-people-faces img { border-color: var(--sheet); }

/* Home: the free pilot */
.dx-pilot-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: pilot; margin-bottom: 48px; }
.dx-pilot-steps li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid color-mix(in srgb, var(--peri) 45%, transparent); counter-increment: pilot; }
.dx-pilot-steps li::before { content: counter(pilot); font-family: var(--font-family-heading); font-weight: 800; font-size: 1.6rem; color: var(--peri); }
.dx-pilot-steps b { font-size: 1.15rem; font-weight: 700; }
.dx-pilot-steps span { color: var(--on-navy-muted); }
@media (max-width: 860px) { .dx-pilot-steps { grid-template-columns: 1fr; } }
.dx-pilot-form { max-width: 620px; }
.dx-pilot-row { display: flex; align-items: center; gap: 8px; padding: 6px; background: color-mix(in srgb, var(--on-navy) 8%, transparent); border: 1px solid color-mix(in srgb, var(--peri) 40%, transparent); border-radius: 999px; }
.dx-pilot-row input { flex: 1; min-width: 0; padding: 12px 18px; background: transparent; border: 0; color: var(--on-navy); font: 1.05rem var(--font-family-body); }
.dx-pilot-row input::placeholder { color: var(--on-navy-muted); }
.dx-pilot-row input:focus { outline: none; }
.dx-pilot-row:focus-within { border-color: var(--peri); box-shadow: 0 0 0 2px color-mix(in srgb, var(--peri) 40%, transparent); }
.dx-pilot-note { margin-top: 14px !important; color: var(--on-navy-muted); font-size: .92rem; padding-left: 20px; }
.dx-pilot-error { margin-top: 10px !important; color: #f6b48b; padding-left: 20px; }
.dx-pilot-sent { max-width: 620px; padding: 16px 20px; border-radius: 12px; background: color-mix(in srgb, #8cc79a 18%, transparent); color: var(--on-navy); font-weight: 600; }
@media (max-width: 560px) {
  .dx-pilot-row { flex-direction: column; align-items: stretch; border-radius: 18px; }
  .dx-pilot-row .dx-people { justify-content: space-between; }
}

/* Home: what changes */
.dx-gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.dx-gains li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 3px solid var(--brand); }
.dx-gains b { font-family: var(--font-family-heading); font-weight: 800; font-stretch: 106%; font-size: 1.3rem; line-height: 1.2; }
.dx-gains span { color: var(--muted); }
@media (max-width: 860px) { .dx-gains { grid-template-columns: 1fr; gap: 28px; } }

/* Home: what it connects to. Sources on the left, the mark in the middle, destinations on the right. */
.dx-connect { display: grid; grid-template-columns: minmax(0, 1.25fr) 120px minmax(0, 1fr); align-items: center; }
.dx-connect-in { display: grid; gap: 22px; }
.dx-connect p { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px !important; }
.dx-connect-in ul { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-connect-in li { padding: 6px 10px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; font-size: .85rem; font-weight: 500; }
.dx-connect-mid { position: relative; display: grid; place-items: center; align-self: stretch; }
.dx-connect-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--rule-strong), var(--brand)); }
.dx-connect-mid .dx-stack-mid { position: relative; }
.dx-connect-out { padding: 22px; background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 6px; box-shadow: var(--shadow-low); }
.dx-connect-out ul { display: grid; }
.dx-connect-out li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dx-connect-out li:last-child { border-bottom: 0; padding-bottom: 0; }
.dx-connect-out b { font-weight: 600; }
.dx-connect-out span { color: var(--muted); font-size: .85rem; }
@media (max-width: 860px) {
  .dx-connect { grid-template-columns: 1fr; }
  .dx-connect-mid { height: 96px; }
  .dx-connect-mid::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--rule-strong), var(--brand)); }
}