/* ============================================================================
   Use Case hero graphics CSS — assembled from gfx.css (per-graphic namespaces)
   and site-styles.css (.indx-* graph base). Loaded on the Use Cases template
   page so any use-case item's CMS "Hero console embed" renders. The base
   .ucx-console/.ucx-cbar/.ucx-ctitle/.ucx-pill classes already come from
   use-case.css. Namespaces included: fsx, lsx, mdx, govx, ogx, rdx, slx, chx, agx, dsx, idx, lnx, cpx, cwx.
   ============================================================================ */

/* ---- .indx-* industry-graph base (from site-styles.css) ---- */
.indx-model .indx-graph { padding: clamp(12px, 1.6vw, 20px) clamp(14px, 1.8vw, 22px) clamp(8px, 1vw, 12px); }
.indx-graph svg { width: 100%; height: auto; display: block; }
.indx-edge { stroke: var(--line); stroke-width: 1.4; }
.indx-edge.is-acc { stroke: var(--accent); stroke-dasharray: 5 4; }
.indx-elabel { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; }
.indx-elabel-bg { fill: #fff; }
.indx-node { fill: #fff; stroke: var(--line); stroke-width: 1.2; }
.indx-node-t { fill: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.indx-hub { fill: #fdf0ea; stroke: var(--accent); stroke-width: 1.8; }
.indx-hub-t { fill: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.indx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 12px 2px 4px; margin-top: 6px; }
.indx-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink); }
.indx-badge iconify-icon { color: var(--accent); font-size: 16px; }
.indx-std { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }

/* ---- icon bridges: CMS graphics use <iconify-icon> (web component), so the
        base console icon rules (which target .iconify in use-case.css) need
        <iconify-icon> equivalents too ---- */
.ucx-rdom iconify-icon { font-size: 16px; color: var(--ink-mute); }
.ucx-rdom.on iconify-icon { color: var(--accent); }
.ucx-crow .ucx-casset iconify-icon { color: var(--ink-mute); font-size: 15px; }
.ucx-pill iconify-icon { font-size: 13px; }

/* ---- per-graphic namespaced blocks (from gfx.css) ---- */
/* ------------------------------------------------- 2a. financial services */
/* Subsidiary nodes carry two lines — a trading name and its LEI — so they need a
   different text treatment from the single-line .indx-node-t used by context nodes. */
.fsx-sub-t { fill: var(--ink); font-family: var(--font-body); font-size: 13.5px; font-weight: 600; }
.fsx-sub-l { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; }
.fsx-total { fill: var(--accent-ink); font-family: var(--font-mono); font-size: 12.5px;
             font-weight: 500; letter-spacing: .02em; }

/* The rollup: each subsidiary fades up, then its edge draws toward the group. Delays are
   set inline per node so the three arrive in sequence rather than together. */
@media (prefers-reduced-motion: no-preference) {
  .fsx-sub { opacity: 0; animation: fsxSub .6s ease-out forwards; }
  .fsx-roll { stroke-dasharray: 240; stroke-dashoffset: 240;
              animation: fsxRoll .9s ease-out forwards; }
  .fsx-gov { stroke-dasharray: 5 4; animation: fsxGov 2.4s linear infinite; }
  @keyframes fsxSub { to { opacity: 1; } }
  @keyframes fsxRoll { to { stroke-dashoffset: 0; } }
  @keyframes fsxGov { to { stroke-dashoffset: -36; } }
}
/* Reduced motion, or no JS: everything is already in its final state, because the
   animations above only ever move things TO where the static markup puts them. */
/* ------------------------------------------------------ 2b. life sciences */
/* The rail states each standard's release cadence, because the cadence IS the argument on
   this page. Two lines in the space .ucx-rdom gives one, so it stacks rather than wraps. */
.lsx-std { display: flex; flex-direction: column; line-height: 1.25; }
.lsx-std b { font-family: var(--font-mono); font-size: 10px; font-weight: 500;
             letter-spacing: .04em; color: var(--ink-mute); margin-top: 2px; }
.ucx-rdom.on .lsx-std b { color: var(--accent-ink); }

.lsx-rel { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
           font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line-strong);
           background: var(--bg-2); padding: 5px 9px; }
.lsx-rel iconify-icon { font-size: 13px; color: var(--ink-mute); }

/* Three counts, sharing one row. Grid rather than flex so the columns stay even when the
   middle label is one word and the right one runs to four. */
.lsx-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
            margin-top: 16px; background: var(--line); border: 1px solid var(--line); }
.lsx-d { background: var(--card); padding: 13px 14px; }
.lsx-dn { display: block; font-family: var(--font-mono); font-size: 21px; font-weight: 600;
          letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lsx-add { color: var(--ink); }
.lsx-ret { color: var(--ink-soft); }
.lsx-aff { color: var(--accent-ink); }
.lsx-dl { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
          color: var(--ink-mute); }

.lsx-qh { margin-top: 20px; font-family: var(--font-mono); font-size: 10.5px;
          letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute);
          padding-bottom: 8px; }
.lsx-foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }

@media (prefers-reduced-motion: no-preference) {
  /* Queue rows arrive after the counts have landed, so the reader reads the diff first and
     then sees what it touched — the same order the work actually happens in. */
  .lsx-row { opacity: 0; animation: lsxRow .5s ease-out 1.1s forwards; }
  @keyframes lsxRow { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
/* --------------------------------------------------------------- 2c. media */
/* No left rail on these two consoles: the question is about one thing, not about navigating
   a domain, so .ucx-cbody's 210px rail would be dead space. */
.mdx-body { padding: 18px 20px 20px; }

.mdx-asset { display: flex; align-items: center; gap: 13px; padding-bottom: 16px;
             border-bottom: 1px solid var(--line); }
.mdx-thumb { flex: none; display: grid; place-items: center; width: 46px; height: 46px;
             border: 1px solid var(--line); background: var(--bg-2); }
.mdx-thumb iconify-icon { font-size: 21px; color: var(--ink-mute); }
.mdx-a-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mdx-a-meta b { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.mdx-a-meta > span { font-size: 11.5px; color: var(--ink-mute); }
.mdx-a-meta code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }

.mdx-rlabel { margin-top: 18px; font-family: var(--font-mono); font-size: 10.5px;
              letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute);
              padding-bottom: 8px; }

/* Four columns, last one shrink-to-fit for the pill. min-width:0 on the row keeps a long
   brand name from pushing the pill out of the console. */
.mdx-grid { border: 1px solid var(--line); }
.mdx-r { display: grid; grid-template-columns: 1.5fr .8fr .9fr auto; gap: 10px;
         align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line);
         font-size: 13px; min-width: 0; }
.mdx-r:last-child { border-bottom: 0; }
.mdx-r.mdx-head { padding-top: 9px; padding-bottom: 9px; background: var(--bg-2);
                  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
                  text-transform: uppercase; color: var(--ink-mute); }
.mdx-b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.mdx-b iconify-icon { flex: none; font-size: 15px; color: var(--ink-mute); }
.mdx-r > span:not(.mdx-b) { color: var(--ink-soft); }
.mdx-w { font-family: var(--font-mono); font-size: 12px; }
/* the row that is NOT cleared — tinted, because it is the one worth noticing */
.mdx-deny { background: rgba(241,90,34,.035); }

.mdx-prov { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; margin-top: 18px; padding-top: 15px;
            border-top: 1px solid var(--line); }
.mdx-chain { display: flex; align-items: center; gap: 8px; }
.mdx-hop { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
           color: var(--ink-soft); border: 1px solid var(--line); background: var(--card);
           padding: 5px 9px; }
.mdx-hop iconify-icon { font-size: 13px; color: var(--ink-mute); }
.mdx-chain i { width: 14px; height: 1px; background: var(--line-strong); }
.mdx-c2pa { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
            font-size: 11px; color: #2F9E6E; border: 1px solid rgba(47,158,110,.35);
            background: rgba(47,158,110,.06); padding: 5px 9px; }
.mdx-ai { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px;
          background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px;
          color: var(--ink-soft); }
.mdx-ai iconify-icon { flex: none; font-size: 16px; color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .mdx-r:not(.mdx-head) { opacity: 0; animation: mdxRow .5s ease-out .25s forwards; }
  @keyframes mdxRow { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
}
/* ---------------------------------------------------------- 2d. government */
.govx-ent { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
            padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.govx-e-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em;
            text-transform: uppercase; color: var(--ink-mute); }
.govx-ent b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.govx-niem { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
             color: var(--ink-soft); border: 1px solid var(--line); background: var(--bg-2);
             padding: 4px 8px; }
.govx-niem iconify-icon { font-size: 13px; color: var(--ink-mute); }
.govx-niem code { font-family: var(--font-mono); font-size: 11px; color: var(--ink); }

/* Record counts are the argument on this graphic, so they get tabular figures — three
   proportional numbers this close together are genuinely hard to compare by eye. */
.govx-n { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.govx-auth { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.govx-role { font-size: 12.5px; }
.govx-grid .mdx-r { grid-template-columns: 1.5fr .85fr .8fr auto; }

.govx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
             border-top: 1px solid var(--line); }
.govx-owner { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
              color: var(--ink-soft); }
.govx-owner b { color: var(--ink); font-weight: 600; }
.govx-owner iconify-icon { font-size: 16px; color: var(--accent); }
.govx-inv { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
            font-size: 11px; color: var(--ink-mute); }
/* ----------------------------------------------- 2e. ontology governance (use case) */
/* Governance wrapped around the .indx-* graph: what makes it a governed model rather than
   a diagram lives in the header and footer, not in the classes. */
.ogx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid var(--line);
            background: var(--bg); }
.ogx-ver, .ogx-own { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
                     color: var(--ink-soft); }
.ogx-ver { font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink);
           border: 1px solid rgba(199,68,15,.3); background: rgba(241,90,34,.06); padding: 4px 9px; }
.ogx-ver iconify-icon { font-size: 13px; }
.ogx-own b { color: var(--ink); font-weight: 600; }
.ogx-own iconify-icon { font-size: 15px; color: var(--ink-mute); }
.ogx-graph { padding: 14px 18px 6px; }

/* A retired class still in the picture: dashed outline, muted, with the version it went in. */
.ogx-dep-r { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ogx-dep-t { fill: var(--ink-mute); font-family: var(--font-body); font-size: 14px; font-weight: 600;
             text-decoration: line-through; }
.ogx-dep-l { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 9.5px; }
/* The mission-ontologies graphic reuses the dashed box for an EXTERNAL STANDARD rather than a
   deprecated class. Same shape, opposite meaning, so the strike-through has to come off. */
.ogx-nostrike { text-decoration: none; }

.ogx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 12px 18px; border-top: 1px solid var(--line); }
.ogx-shacl { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.ogx-shacl iconify-icon { font-size: 16px; color: #2F9E6E; }
.ogx-std { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em;
           text-transform: uppercase; color: var(--ink-mute); }
/* ------------------------------------------------- 2f. reference data (use case) */
/* A <ul>, not a table — it is a hierarchy and should be heard as one. Indent is a class per
   level so Webflow can lay it out flat without real nesting. */
.rdx-body { padding: 16px 18px 18px; }
.rdx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rdx-scheme { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display);
              font-size: 15.5px; font-weight: 600; }
.rdx-scheme iconify-icon { font-size: 17px; color: var(--accent); }
.rdx-pub { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
           font-size: 11px; color: var(--ink-mute); }

.rdx-tree { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--line); }
.rdx-n { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
         padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rdx-n:last-child { border-bottom: 0; }
.rdx-l1 { padding-left: 31px; }
.rdx-l2 { padding-left: 49px; }
/* the indent guide — a rule, not an arrow, so it reads as structure rather than flow */
.rdx-l1, .rdx-l2 { background-image: linear-gradient(var(--line), var(--line));
                   background-size: 1px 100%; background-repeat: no-repeat;
                   background-position: 20px 0; }
.rdx-l2 { background-position: 38px 0; }
.rdx-lab { color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 8px;
           flex-wrap: wrap; }
.rdx-code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.rdx-eff { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute);
           white-space: nowrap; }
.rdx-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
           font-size: 10px; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line);
           background: var(--bg-2); padding: 2px 6px; }
.rdx-tag iconify-icon { font-size: 11px; }
.rdx-tag-r { color: var(--accent-ink); border-color: rgba(199,68,15,.3);
             background: rgba(241,90,34,.06); }
.rdx-dep .rdx-lab, .rdx-dep .rdx-code { color: var(--ink-mute); }
.rdx-dep .rdx-code { text-decoration: line-through; }
.rdx-foot { margin: 13px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
/* --------------------------------------------------- 2g. semantic layer (use case) */
.slx-body { padding: 18px 20px 20px; }
.slx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
           flex-wrap: wrap; }
.slx-k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
         text-transform: uppercase; color: var(--ink-mute); }
.slx-id b { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 19px;
            font-weight: 600; letter-spacing: -.01em; }
.slx-ver { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
           font-size: 11px; color: var(--accent-ink); border: 1px solid rgba(199,68,15,.3);
           background: rgba(241,90,34,.06); padding: 4px 9px; }

/* The business definition gets the accent rule, because it is the half of the metric that
   normally has no home in a warehouse. */
.slx-def { margin: 14px 0 0; padding-left: 13px; border-left: 2px solid var(--accent);
           font-size: 14px; line-height: 1.6; color: var(--ink); }
.slx-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 13px; }
.slx-m { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.slx-m b { color: var(--ink); font-weight: 600; }
.slx-m iconify-icon { font-size: 15px; color: var(--ink-mute); }

.slx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px;
             background: var(--line); border: 1px solid var(--line); }
.slx-col { background: var(--card); padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; }
.slx-ch { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
          text-transform: uppercase; color: var(--ink-mute); }
.slx-phys code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.slx-cons { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.slx-cons iconify-icon { flex: none; font-size: 15px; color: var(--ink-mute); }
.slx-cons code { font-family: var(--font-mono); font-size: 11.5px; }
.slx-foot { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 13px;
            border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.slx-foot iconify-icon { flex: none; font-size: 16px; color: #2F9E6E; }
@media (max-width: 640px) { .slx-split { grid-template-columns: 1fr; } }
/* ---------------------------------------------- 2h. content harmonization (use case) */
.chx-body { padding: 18px 20px 20px; }
.chx-doc { display: flex; align-items: center; gap: 13px; padding-bottom: 15px;
           border-bottom: 1px solid var(--line); }
.chx-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px;
          border: 1px solid var(--line); background: var(--bg-2); }
.chx-ic iconify-icon { font-size: 20px; color: var(--ink-mute); }
.chx-d-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chx-d-meta b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.chx-d-meta > span { font-size: 11.5px; color: var(--ink-mute); }

.chx-lab { margin-top: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
           text-transform: uppercase; color: var(--ink-mute); padding-bottom: 9px; }
.chx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Each tag carries its own provenance, so it is a two-line chip rather than a word. */
.chx-tag { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line);
           background: var(--card); padding: 8px 11px; }
.chx-tag b { font-size: 13px; font-weight: 600; color: var(--ink); }
.chx-pending { border-style: dashed; background: var(--bg); }
.chx-src { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
           font-size: 10px; color: var(--ink-mute); }
.chx-src iconify-icon { font-size: 11px; }
.chx-h { color: #2F9E6E; }
.chx-e { color: var(--accent-ink); }
.chx-m { color: var(--ink-soft); }
.chx-q { color: var(--ink-mute); }

.chx-ret { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
           border: 1px solid var(--line); }
.chx-r { background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.chx-r-t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
           color: var(--ink); }
.chx-r-t iconify-icon { font-size: 15px; color: #2F9E6E; }
.chx-r-n { font-size: 11.5px; line-height: 1.45; color: var(--ink-mute); }
.chx-out { background: rgba(241,90,34,.035); }
.chx-out .chx-r-t iconify-icon { color: var(--accent); }
@media (max-width: 640px) { .chx-ret { grid-template-columns: 1fr; } }
/* ------------------------------------------------ 2i. agent governance (use case) */
.agx-body { padding: 16px 18px 18px; }
.agx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.agx-agent { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
             color: var(--ink-soft); }
.agx-agent b { color: var(--ink); font-weight: 600; }
.agx-agent iconify-icon { font-size: 16px; color: var(--accent); }
.agx-rate { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
            color: #2F9E6E; border: 1px solid rgba(47,158,110,.35);
            background: rgba(47,158,110,.06); padding: 4px 8px; }

.agx-log { margin-top: 14px; border: 1px solid var(--line); }
/* Three columns: question, what it resolved, outcome. The middle column wraps; the pill never
   does, hence auto on the last track and min-width:0 on the row. */
.agx-e { display: grid; grid-template-columns: 1.35fr 1.15fr auto; gap: 12px; align-items: start;
         padding: 12px 13px; border-bottom: 1px solid var(--line); min-width: 0; }
.agx-e:last-child { border-bottom: 0; }
.agx-deny { background: rgba(241,90,34,.035); }
.agx-q { font-size: 13px; line-height: 1.45; color: var(--ink); }
.agx-res { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.agx-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
            font-size: 10.5px; color: var(--ink-soft); border: 1px solid var(--line);
            background: var(--bg-2); padding: 3px 7px; }
.agx-chip b { color: var(--accent-ink); font-weight: 500; }
.agx-chip iconify-icon { font-size: 11px; color: var(--ink-mute); }
.agx-why { font-size: 11px; line-height: 1.4; color: var(--accent-ink); }
.agx-foot { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 12px;
            border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.agx-foot iconify-icon { flex: none; font-size: 16px; color: var(--ink-mute); }
@media (max-width: 640px) {
  .agx-e { grid-template-columns: 1fr auto; }
  .agx-res { grid-column: 1 / -1; }
}
/* ------------------------------------------------ 2j. decision support (use case) */
.dsx-body { padding: 18px 20px 20px; }
.dsx-q { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding-bottom: 15px;
         border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 15.5px;
         font-weight: 600; line-height: 1.4; color: var(--ink); }
.dsx-q iconify-icon { flex: none; margin-top: 2px; font-size: 18px; color: var(--accent); }

/* An <ol> because the hops are genuinely ordered. Numbers come from the markup rather than a
   CSS counter, so they survive being pasted into a Webflow embed. */
.dsx-hops { list-style: none; margin: 14px 0 0; padding: 0; }
.dsx-h { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
         padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dsx-n { display: grid; place-items: center; width: 22px; height: 22px; font-family: var(--font-mono);
         font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line-strong);
         background: var(--card); }
.dsx-t { color: var(--ink-soft); }
.dsx-t b { color: var(--ink); font-weight: 600; }
.dsx-s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
         text-transform: uppercase; color: var(--ink-mute); }

.dsx-ans { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--accent);
           background: rgba(241,90,34,.05); display: flex; flex-direction: column; gap: 5px; }
.dsx-a-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-display);
           font-size: 16px; font-weight: 600; color: var(--ink); }
.dsx-a-h iconify-icon { font-size: 18px; color: var(--accent); }
.dsx-a-n { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.dsx-a-n b { color: var(--ink); font-weight: 600; }
.dsx-foot { margin: 13px 0 0; font-size: 12.5px; color: var(--ink-mute); }

@media (prefers-reduced-motion: no-preference) {
  /* Runs once on scroll-in, not on a loop: a repeating traversal would read as polling. */
  .dsx-h { opacity: 0; animation: dsxHop .5s ease-out forwards; }
  @keyframes dsxHop { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
}
/* ------------------------------------------------- 2k. IDMP product data (use case) */
/* Four columns: field, value, where the value came from, and its SPOR state. The third
   column is the reason this graphic exists, so it is never the one that gets squeezed. */
.idx-body { padding: 18px 20px 20px; }
.idx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.idx-k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
         text-transform: uppercase; color: var(--ink-mute); }
.idx-head b { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 17px;
              font-weight: 600; letter-spacing: -.01em; }
.idx-mpid { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
            font-size: 11px; color: var(--ink-mute); border: 1px solid var(--line-strong);
            background: var(--bg-2); padding: 4px 9px; white-space: nowrap; }

.idx-rows { margin-top: 15px; border: 1px solid var(--line); }
.idx-r { display: grid; grid-template-columns: .7fr 1.1fr 1.1fr auto; gap: 10px;
         align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--line);
         font-size: 13px; min-width: 0; }
.idx-r:last-child { border-bottom: 0; }
.idx-f { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
         text-transform: uppercase; color: var(--ink-mute); }
.idx-v { color: var(--ink); font-weight: 500; }
.idx-none { color: var(--ink-mute); font-weight: 400; font-style: italic; }
.idx-s { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.idx-s iconify-icon { flex: none; font-size: 13px; color: var(--ink-mute); }
.idx-gap { background: rgba(241,90,34,.035); }

.idx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.idx-prog { font-size: 12.5px; color: var(--ink-soft); }
.idx-prog b { color: var(--ink); font-weight: 600; }
.idx-reg { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
           text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 640px) { .idx-r { grid-template-columns: .8fr 1fr auto; } .idx-s { grid-column: 1 / -1; } }
/* ------------------------------------------------ 2l. lineage to source (use case) */
/* Reads top-down from the reported figure back to source, because that is the direction an
   examiner asks in. The connecting rule is drawn on the dot column, so it never breaks when a
   row wraps to two lines. */
.lnx-body { padding: 18px 20px 20px; }
.lnx-top { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.lnx-k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
         text-transform: uppercase; color: var(--ink-mute); }
.lnx-top b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 26px;
             font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lnx-ret { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }

.lnx-chain { list-style: none; margin: 16px 0 0; padding: 0; }
.lnx-h { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding-bottom: 16px;
         position: relative; }
.lnx-h:last-child { padding-bottom: 0; }
/* the dot, and the rule down to the next one */
.lnx-d { position: relative; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%;
         background: var(--card); border: 2px solid var(--line-strong); }
.lnx-h:not(:last-child) .lnx-d::after { content: ""; position: absolute; left: 50%; top: 100%;
         transform: translateX(-50%); width: 1px; height: calc(100% + 22px); background: var(--line); }
.lnx-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lnx-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.lnx-m { font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.lnx-m b { color: var(--ink); font-weight: 600; }

/* the manual adjustment — the hop most lineage loses */
.lnx-adj .lnx-d { border-color: var(--accent); background: var(--accent); }
.lnx-flag { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 11px;
            font-weight: 500; color: var(--accent-ink); border: 1px solid rgba(199,68,15,.3);
            background: rgba(241,90,34,.07); padding: 1px 6px; }

.lnx-foot { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 13px;
            border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.lnx-foot iconify-icon { flex: none; font-size: 17px; color: var(--accent); }
/* --------------------------------------------- 2m. corpus definition (use case) */
.cpx-body { padding: 18px 20px 20px; }
.cpx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.cpx-k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
         text-transform: uppercase; color: var(--ink-mute); }
.cpx-head b { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 17px;
              font-weight: 600; letter-spacing: -.01em; }
.cpx-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
            font-size: 11px; color: var(--accent-ink); border: 1px solid rgba(199,68,15,.3);
            background: rgba(241,90,34,.06); padding: 4px 9px; white-space: nowrap; }

.cpx-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.cpx-rl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
          text-transform: uppercase; color: var(--ink-mute); width: 100%; }
.cpx-rule { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
            color: var(--ink-soft); border: 1px solid var(--line); background: var(--card);
            padding: 6px 10px; }
.cpx-rule b { color: var(--ink); font-weight: 600; }
.cpx-rule iconify-icon { font-size: 14px; color: var(--ink-mute); }

/* Included and excluded at equal weight. Shrinking the exclusions would undercut the page's
   argument that they are the part that makes a corpus licensable. */
.cpx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px;
             background: var(--line); border: 1px solid var(--line); }
.cpx-c { background: var(--card); padding: 14px 16px; }
.cpx-n { display: block; font-family: var(--font-mono); font-size: 24px; font-weight: 600;
         letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cpx-t { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-mute); }
.cpx-ex { background: rgba(241,90,34,.04); }
.cpx-ex .cpx-n { color: var(--accent-ink); }

.cpx-why { margin-top: 12px; border: 1px solid var(--line); }
.cpx-w { display: flex; align-items: center; justify-content: space-between; gap: 12px;
         padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 12.5px;
         color: var(--ink-soft); }
.cpx-w:last-child { border-bottom: 0; }
.cpx-w b { font-family: var(--font-mono); font-size: 12px; color: var(--ink);
           font-variant-numeric: tabular-nums; }
.cpx-foot { margin: 13px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
@media (max-width: 640px) { .cpx-split { grid-template-columns: 1fr; } }
/* ------------------------------------------- 2n. standards crosswalk (use case) */
/* Three columns because the page makes a three-part claim: the standard, your profile of it,
   and the difference. Two would only show a mapping. */
.cwx-body { padding: 18px 20px 20px; }
.cwx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.cwx-pair { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display);
            font-size: 15.5px; font-weight: 600; }
.cwx-pair iconify-icon { font-size: 15px; color: var(--ink-mute); }
.cwx-own { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.cwx-own b { color: var(--ink); font-weight: 600; }
.cwx-own iconify-icon { font-size: 15px; color: var(--ink-mute); }

.cwx-grid { margin-top: 15px; border: 1px solid var(--line); }
.cwx-r { display: grid; grid-template-columns: 1.15fr 1.15fr auto; gap: 10px; align-items: center;
         padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; }
.cwx-r:last-child { border-bottom: 0; }
.cwx-hd { background: var(--bg-2); font-family: var(--font-mono); font-size: 10px;
          letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.cwx-a code, .cwx-b code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.cwx-b { color: var(--ink-soft); }
.cwx-div { background: rgba(241,90,34,.035); }

.cwx-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
            flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.cwx-note { display: flex; align-items: flex-start; gap: 8px; max-width: 46ch; font-size: 12.5px;
            line-height: 1.5; color: var(--ink-soft); }
.cwx-note iconify-icon { flex: none; margin-top: 1px; font-size: 15px; color: var(--accent); }
.cwx-ver { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; }
.cwx-ver b { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 640px) { .cwx-r { grid-template-columns: 1fr auto; } .cwx-b { grid-column: 1 / -1; } }