/* ==========================================================================
   Payer Regulatory DataOps — section components
   Scoped with the pdo- prefix so nothing here can collide with the shared
   healthcare microsite styles. Colours come from the design-system tokens
   (design-system.css) so the section inherits brand + theme changes.
   ========================================================================== */

.pdo-page {
    --pdo-radius: 14px;
    --pdo-band: var(--artha-primary-950, #201245);
}

/* ---------- breadcrumb ---------- */
.pdo-crumbs {
    padding: 16px 0 0;
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.pdo-crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pdo-crumbs a {
    color: var(--text-secondary);
    text-decoration: none;
}

.pdo-crumbs a:hover { color: var(--accent-blue); text-decoration: underline; }
.pdo-crumbs [aria-current="page"] { color: var(--text-secondary); font-weight: 600; }
.pdo-crumbs .pdo-crumb-sep { color: var(--text-tertiary); }

/* ---------- hero additions ---------- */
.pdo-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 24px;
}

.pdo-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 99px;
    padding: 5px 13px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.pdo-chip strong { color: var(--text-primary); }

.pdo-chip-deadline {
    background: var(--artha-warning-100, #fef3c7);
    border-color: #fcd34d;
    color: var(--artha-warning-700, #b45309);
}

.pdo-chip-deadline strong { color: var(--artha-warning-700, #b45309); }

/* ---------- hero stack visual (3 layers) ---------- */
.pdo-stackviz {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdo-stackviz .pdo-lay {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 13px 17px;
    background: var(--bg-secondary);
    font-size: 12.5px;
    color: var(--text-secondary);
}

.pdo-stackviz .pdo-lay b {
    display: block;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 3px;
    font-weight: 600;
}

.pdo-stackviz .pdo-lay-mid {
    background:
        linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
        var(--grad-primary) border-box;
    border: 2px solid transparent;
    box-shadow: 0 10px 30px var(--accent-glow);
}

.pdo-stackviz .pdo-lay-mid b,
.pdo-stackviz .pdo-lay-mid .pdo-who { color: var(--artha-primary-700, #6d3bd5); }
.pdo-stackviz .pdo-lay-mid .pdo-who { font-weight: 700; }

.pdo-stackviz .pdo-pipe {
    text-align: center;
    color: var(--accent-purple);
    font-size: 13px;
    line-height: .7;
}

/* ---------- answer-first definition card (AEO anchor) ---------- */
.pdo-defcard {
    position: relative;
    margin-top: 26px;
    border-radius: var(--pdo-radius);
    border: 1px solid var(--artha-primary-100, #ede9fe);
    background: linear-gradient(180deg, var(--artha-primary-50, #f6f3ff), var(--bg-primary));
    padding: 30px 34px;
}

.pdo-defcard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 4px;
    background: var(--grad-primary);
}

.pdo-defcard .pdo-answer {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 78ch;
    line-height: 1.6;
}

.pdo-defcard .pdo-answer-rest {
    font-size: 15.5px;
    color: var(--text-secondary);
    margin-top: 10px;
    max-width: 78ch;
}

.pdo-reviewed {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pdo-reviewed i { color: var(--artha-success-600, #059669); }

/* ---------- ROI stat tiles ---------- */
.pdo-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 28px;
}

.pdo-stat {
    border: 1px solid var(--border-color);
    border-radius: var(--pdo-radius);
    background: var(--bg-primary);
    padding: 24px 22px 20px;
}

.pdo-stat .pdo-stat-num {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.pdo-stat .pdo-stat-lbl {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.55;
}

.pdo-stat .pdo-stat-src {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 10px;
}

.pdo-case-note {
    margin-top: 22px;
    color: var(--text-secondary);
    max-width: 80ch;
    font-size: 15.5px;
}

.pdo-case-note strong { color: var(--text-primary); }

/* ---------- pillar cards ---------- */
.pdo-pillar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 30px;
}

.pdo-pillar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--pdo-radius);
    background: var(--bg-primary);
    padding: 26px;
    transition: box-shadow .18s ease, transform .18s ease;
}

.pdo-pillar:hover {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.pdo-reg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 4px 9px;
}

.pdo-reg-deadline { background: var(--artha-warning-100, #fef3c7); color: var(--artha-warning-700, #b45309); }
.pdo-reg-law      { background: var(--artha-primary-100, #ede9fe); color: var(--artha-primary-700, #6d3bd5); }
.pdo-reg-cms      { background: var(--artha-secondary-50, #ecfeff); color: var(--artha-secondary-700, #0e7490); }
.pdo-reg-state    { background: var(--artha-success-100, #d1fae5); color: var(--artha-success-700, #047857); }

.pdo-pillar h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--text-primary);
}

.pdo-symptom {
    margin: 0;
    padding-left: 13px;
    border-left: 3px solid var(--artha-primary-100, #ede9fe);
    font-size: 14.5px;
    font-style: italic;
    color: var(--text-secondary);
}

.pdo-ready {
    margin: 0;
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.55;
}

.pdo-ready strong {
    color: var(--artha-primary-700, #6d3bd5);
    font-variant-numeric: tabular-nums;
}

.pdo-pillar-link {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
}

.pdo-pillar-link:hover { text-decoration: underline; }

/* ---------- 3-layer architecture table ---------- */
.pdo-arch { margin-top: 30px; }

.pdo-arch-row {
    display: grid;
    grid-template-columns: 200px 1fr 220px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.pdo-arch-row + .pdo-arch-row { border-top: none; }
.pdo-arch-row:first-child { border-radius: var(--pdo-radius) var(--pdo-radius) 0 0; }
.pdo-arch-row:last-child { border-radius: 0 0 var(--pdo-radius) var(--pdo-radius); }

.pdo-arch-cell { padding: 18px 20px; font-size: 13.5px; }

.pdo-arch-layer {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    border-right: 1px solid var(--border-color);
}

.pdo-arch-what { color: var(--text-secondary); }

.pdo-arch-owner {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--border-color);
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.pdo-arch-row-artha {
    background: linear-gradient(90deg, var(--artha-primary-50, #f6f3ff), #fdf4ff);
    border-left: 4px solid var(--artha-primary-600, #7c3aed);
}

.pdo-arch-row-artha .pdo-arch-layer { color: var(--artha-primary-700, #6d3bd5); }
.pdo-arch-row-artha .pdo-arch-what strong { color: var(--text-primary); }

.pdo-arch-row-artha .pdo-arch-owner {
    color: var(--artha-primary-700, #6d3bd5);
    font-weight: 700;
    font-size: 13px;
}

/* ---------- keep / avoid ---------- */
.pdo-keepavoid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 30px;
}

.pdo-ka-col {
    border: 1px solid var(--border-color);
    border-radius: var(--pdo-radius);
    background: var(--bg-primary);
    padding: 24px;
}

.pdo-ka-col h3 {
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 16px;
}

.pdo-ka-keep h3 { color: var(--artha-success-600, #059669); }
.pdo-ka-avoid h3 { color: var(--artha-error-600, #dc2626); }

.pdo-ka-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdo-ka-col li {
    display: flex;
    gap: 11px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.pdo-ka-col li i { flex: none; margin-top: 4px; }
.pdo-ka-keep li i { color: var(--artha-success-600, #059669); }
.pdo-ka-avoid li i { color: var(--artha-error-600, #dc2626); }

/* ---------- proof / benchmark band ---------- */
.pdo-proof {
    margin-top: 30px;
    border-radius: var(--pdo-radius);
    background: var(--pdo-band);
    color: #e9e4f7;
    padding: 36px 34px;
}

/* The hub shows four benchmarks; pillar pages show two. Both counts are set by a
   class (never an inline style) so the responsive rules below can still override. */
.pdo-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.pdo-proof-grid.is-pair { grid-template-columns: repeat(2, 1fr); }

.pdo-proof-num {
    font-size: 33px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #b79bff, #f0a6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pdo-proof-lbl {
    font-size: 13px;
    color: #b6a9dd;
    margin-top: 6px;
    line-height: 1.55;
}

.pdo-proof-attr {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(182, 169, 221, .25);
    font-size: 12.5px;
    color: #b6a9dd;
    max-width: 95ch;
}

/* ---------- de-risk path (offer ladder) ---------- */
.pdo-ladder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.pdo-rung {
    display: flex;
    flex-direction: column;
    gap: 11px;
    border: 1px solid var(--border-color);
    border-radius: var(--pdo-radius);
    background: var(--bg-primary);
    padding: 26px;
}

.pdo-rung-step {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-blue);
}

.pdo-rung h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}

.pdo-rung p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pdo-rung-tag {
    width: fit-content;
    margin-top: auto;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 99px;
    padding: 4px 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.pdo-rung-mid {
    background:
        linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
        var(--grad-primary) border-box;
    border: 2px solid transparent;
    box-shadow: 0 12px 30px var(--accent-glow);
}

/* ---------- persona routing ---------- */
.pdo-pers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 30px;
}

.pdo-pers {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-purple);
    border-radius: 12px;
    background: var(--bg-primary);
    padding: 20px;
}

.pdo-pers-role {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 9px;
}

.pdo-pers-say {
    font-size: 14.5px;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 13px;
    line-height: 1.55;
}

.pdo-pers a {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
}

.pdo-pers a:hover { text-decoration: underline; }

/* ---------- symptom ("where it breaks") grid ---------- */
.pdo-breaks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.pdo-break {
    display: flex;
    gap: 12px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--bg-primary);
    padding: 16px 18px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.pdo-break i {
    flex: none;
    margin-top: 3px;
    color: var(--artha-error-600, #dc2626);
}

/* ---------- mandate / reference tables ---------- */
.pdo-table-wrap {
    margin-top: 26px;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--pdo-radius);
}

.pdo-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--bg-primary);
}

.pdo-table th {
    text-align: left;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-color);
}

.pdo-table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    vertical-align: top;
    line-height: 1.55;
}

.pdo-table tr:last-child td { border-bottom: none; }

.pdo-table td:first-child {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ---------- numbered pipeline flow ---------- */
.pdo-flow {
    max-width: 680px;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
}

.pdo-fstep {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    padding: 16px 18px;
}

.pdo-fstep-num {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.pdo-fstep p {
    margin: 0;
    padding-top: 3px;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.pdo-fstep p strong { color: var(--text-primary); }

.pdo-fdown {
    text-align: center;
    color: var(--accent-purple);
    font-size: 14px;
    padding: 5px 0;
}

/* ---------- inline audit offer ---------- */
.pdo-offer {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
    border: 1px dashed var(--accent-purple);
    border-radius: var(--pdo-radius);
    background: var(--artha-primary-50, #f6f3ff);
    padding: 26px 28px;
}

.pdo-offer-txt { max-width: 64ch; }

.pdo-offer-txt strong {
    display: block;
    color: var(--artha-primary-700, #6d3bd5);
    font-size: 16px;
    margin-bottom: 6px;
}

.pdo-offer-txt p {
    margin: 0;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ---------- ROI calculator (encounter pillar) ---------- */
.pdo-calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 30px;
    align-items: start;
}

.pdo-calc-card {
    border: 1px solid var(--border-color);
    border-radius: var(--pdo-radius);
    background: var(--bg-primary);
    padding: 28px;
}

.pdo-calc-card h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 20px;
    color: var(--text-primary);
}

.pdo-field { margin-bottom: 18px; }

.pdo-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.pdo-field input[type="range"] {
    width: 100%;
    accent-color: var(--artha-primary-600, #7c3aed);
}

.pdo-field .pdo-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--artha-primary-700, #6d3bd5);
    font-variant-numeric: tabular-nums;
}

.pdo-calc-note {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.6;
}

.pdo-calc-out {
    border-radius: var(--pdo-radius);
    background: var(--pdo-band);
    color: #e9e4f7;
    padding: 28px;
}

.pdo-calc-out h3 {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: #b6a9dd;
    margin: 0 0 18px;
}

.pdo-co-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(182, 169, 221, .2);
    font-size: 14px;
    color: #cfc4ec;
}

.pdo-co-row strong {
    color: #fff;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.pdo-co-big { padding-top: 18px; }

.pdo-co-big .pdo-bignum {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #b79bff, #f0a6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pdo-co-big .pdo-biglbl {
    font-size: 13px;
    color: #b6a9dd;
    margin-top: 6px;
    line-height: 1.55;
}

/* ---------- cross-link band (payers / overview pages) ---------- */
.pdo-crosslink {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: var(--pdo-radius);
    border: 1px solid var(--artha-primary-100, #ede9fe);
    background: linear-gradient(135deg, var(--artha-primary-50, #f6f3ff), #fdf4ff);
    padding: 24px 28px;
}

.pdo-crosslink-txt { max-width: 70ch; }

.pdo-crosslink-txt strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.pdo-crosslink-txt p {
    margin: 0;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .pdo-stat-grid,
    .pdo-pillar-grid,
    .pdo-keepavoid,
    .pdo-ladder,
    .pdo-calc,
    .pdo-breaks { grid-template-columns: 1fr; }

    .pdo-pers-grid,
    .pdo-proof-grid,
    .pdo-proof-grid.is-pair { grid-template-columns: 1fr 1fr; }

    .pdo-arch-row { grid-template-columns: 1fr; }

    .pdo-arch-layer {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 12px;
    }

    .pdo-arch-owner {
        border-left: none;
        padding-top: 0;
    }

    .pdo-defcard { padding: 24px 22px; }
    .pdo-proof, .pdo-calc-out { padding: 26px 22px; }
}

@media (max-width: 600px) {
    .pdo-pers-grid,
    .pdo-proof-grid,
    .pdo-proof-grid.is-pair { grid-template-columns: 1fr; }

    .pdo-offer .btn,
    .pdo-crosslink .btn { width: 100%; justify-content: center; }
}

/* ---------- dark theme: only tokens that need a different value ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pdo-defcard,
    :root:not([data-theme="light"]) .pdo-offer,
    :root:not([data-theme="light"]) .pdo-crosslink {
        background: var(--bg-secondary);
    }

    :root:not([data-theme="light"]) .pdo-arch-row-artha {
        background: var(--bg-tertiary);
    }
}

:root[data-theme="dark"] .pdo-defcard,
:root[data-theme="dark"] .pdo-offer,
:root[data-theme="dark"] .pdo-crosslink {
    background: var(--bg-secondary);
}

:root[data-theme="dark"] .pdo-arch-row-artha {
    background: var(--bg-tertiary);
}

@media (prefers-reduced-motion: reduce) {
    .pdo-pillar { transition: none; }
    .pdo-pillar:hover { transform: none; }
}

/* ==========================================================================
   VISUAL SYSTEM — added in the design pass.
   Structure is drawn in slate; a single accent (purple) marks the subject of
   each diagram. All motion is opt-out via prefers-reduced-motion at the end.
   ========================================================================== */

/* ---------- vertical rhythm: give sections room to breathe ---------- */
.pdo-page .healthcare-section { padding: 96px 0; }
.pdo-page .healthcare-section-header { margin-bottom: 44px; }

/* one lead line per section, not a paragraph block */
.pdo-page .healthcare-desc { max-width: 62ch; }
.pdo-page .healthcare-section-header.text-center .healthcare-desc { margin-inline: auto; }
.pdo-page .healthcare-title { margin-bottom: 14px; }

/* section eyebrow gets a hairline lead-in so headings have a visual anchor */
.pdo-page .healthcare-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pdo-page .healthcare-subtitle::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-primary);
}

.pdo-page .text-center .healthcare-subtitle::before { display: none; }

/* ---------- hero composition ---------- */
/* The stock hero H1 runs ~64px, which pushed this headline to four lines and
   left the diagram floating. Tighter type + a framed panel balances the two. */
/* Hero type is deliberately left to the design system (design-system.css sets
   --type-hero with !important sitewide) so this hero matches every other hero.
   The composition is balanced by widening the visual column instead. */
.pdo-page .healthcare-hero-grid { grid-template-columns: 1.06fr 0.94fr; gap: 52px; align-items: center; }
.pdo-page .healthcare-hero-subtitle { max-width: 56ch; }
.pdo-page .healthcare-hero { padding: 56px 0 72px; }

.pdo-figure-stack {
    flex: 1 1 auto;
    width: 100%;
    max-width: 540px;
    position: relative;
    padding: 20px;
    border-radius: 18px;
    background:
        linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
        linear-gradient(160deg, var(--artha-primary-100, #ede9fe), rgba(148,163,184,.18)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
}

/* faint graph paper behind the diagram, so the panel reads as a workspace */
.pdo-figure-stack::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, .16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, .16) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
    pointer-events: none;
}

/* ---------- figures ---------- */
.pdo-figure { margin: 0; }
.pdo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pdo-figure-arch { margin-top: 40px; }

/* ---------- shared diagram primitives ---------- */
.pdo-rail {
    fill: none;
    stroke: var(--artha-neutral-300, #cbd5e1);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
}

.pdo-dot {
    fill: var(--artha-primary-500, #8b5cf6);
    opacity: .9;
}

/* ---------- hero stack diagram ---------- */
.pdo-svg-stack .pdo-band rect {
    fill: var(--bg-primary, #fff);
    stroke: var(--border-color, rgba(148, 163, 184, .28));
    stroke-width: 1.5;
}

.pdo-svg-stack .pdo-band-mid rect {
    fill: url(#pdoMidFill);
    stroke: var(--artha-primary-500, #8b5cf6);
    stroke-width: 2;
}

.pdo-band-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--text-tertiary, #64748b);
}

.pdo-band-detail {
    font-size: 14px;
    fill: var(--text-secondary, #475569);
}

.pdo-band-label-accent { fill: var(--artha-primary-700, #6d3bd5); }
.pdo-band-detail-accent { fill: var(--artha-primary-800, #4c2b8a); font-weight: 600; }

.pdo-dot-lower { animation: pdoHopLower 3.6s ease-in-out infinite; }
.pdo-dot-upper { animation: pdoHopUpper 3.6s ease-in-out infinite; }

.pdo-dots .pdo-dot-1 { animation-delay: 0s; }
.pdo-dots .pdo-dot-2 { animation-delay: .35s; }
.pdo-dots .pdo-dot-3 { animation-delay: .7s; }

/* rises through the gap below the DataOps layer, then fades as it enters it */
@keyframes pdoHopLower {
    0%, 4%   { transform: translateY(0);     opacity: 0; }
    16%      { opacity: 1; }
    40%      { transform: translateY(-32px); opacity: 1; }
    48%, 100%{ transform: translateY(-32px); opacity: 0; }
}

/* emerges above the layer and continues to the compliance surface */
@keyframes pdoHopUpper {
    0%, 50%  { transform: translateY(0);     opacity: 0; }
    58%      { opacity: 1; }
    82%      { transform: translateY(-32px); opacity: 1; }
    92%, 100%{ transform: translateY(-32px); opacity: 0; }
}

/* ---------- animated pillar icons ---------- */
.pdo-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    background: var(--artha-primary-50, #f6f3ff);
    border: 1px solid var(--artha-primary-100, #ede9fe);
}

.pdo-svg-icon { width: 38px; height: 38px; overflow: visible; }

.pdo-i-shape {
    fill: var(--bg-primary, #fff);
    stroke: var(--artha-neutral-400, #94a3b8);
    stroke-width: 2.2;
}

.pdo-i-line {
    fill: none;
    stroke: var(--artha-neutral-400, #94a3b8);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pdo-i-ring {
    fill: none;
    stroke: var(--artha-primary-600, #7c3aed);
    stroke-width: 2.2;
}

.pdo-i-node {
    fill: var(--artha-primary-500, #8b5cf6);
}

/* the accented, moving parts */
.pdo-i-flow {
    stroke: var(--artha-primary-600, #7c3aed);
    stroke-dasharray: 5 6;
    animation: pdoFlow 1.9s linear infinite;
}

.pdo-i-flow-2 { animation-delay: .55s; }

@keyframes pdoFlow { to { stroke-dashoffset: -22; } }

.pdo-i-draw {
    stroke: var(--artha-primary-600, #7c3aed);
    stroke-dasharray: 26;
    animation: pdoDraw 3.6s ease-in-out infinite;
}

@keyframes pdoDraw {
    0%, 18%  { stroke-dashoffset: 26; }
    46%, 82% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 26; }
}

.pdo-i-pulse { animation: pdoPulse 2.6s ease-in-out infinite; transform-origin: center; }

@keyframes pdoPulse {
    0%, 100% { opacity: .45; transform: scale(.82); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

.pdo-i-hand   { transform-origin: 52px 46px; animation: pdoSweep 6s linear infinite; }
.pdo-i-hand-2 { transform-origin: 52px 46px; animation: pdoSweep 18s linear infinite; opacity: .6; }

@keyframes pdoSweep { to { transform: rotate(360deg); } }

.pdo-i-drop { animation: pdoDrop 2.8s ease-in infinite; }
.pdo-i-drop-2 { animation-delay: .45s; }
.pdo-i-drop-3 { animation-delay: .9s; }

@keyframes pdoDrop {
    0%   { transform: translateY(-6px); opacity: 0; }
    25%  { opacity: 1; }
    70%  { transform: translateY(16px); opacity: 1; }
    100% { transform: translateY(22px); opacity: 0; }
}

/* pillar card gains the icon: tighter, more visual */
.pdo-pillar { gap: 14px; }
.pdo-pillar-head { display: flex; align-items: center; gap: 14px; }
.pdo-pillar-head h3 { font-size: 19px; }

/* ---------- architecture diagram ---------- */
.pdo-svg-arch .pdo-arch-rect {
    fill: var(--bg-primary, #fff);
    stroke: var(--border-color, rgba(148, 163, 184, .28));
    stroke-width: 1.5;
}

.pdo-svg-arch .pdo-arch-g-accent .pdo-arch-rect {
    fill: var(--artha-primary-50, #f6f3ff);
    stroke: var(--artha-primary-500, #8b5cf6);
    stroke-width: 2;
}

.pdo-arch-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    fill: var(--text-tertiary, #64748b);
}

.pdo-arch-g-accent .pdo-arch-eyebrow { fill: var(--artha-primary-700, #6d3bd5); }

.pdo-arch-owner-t {
    font-size: 12px;
    font-weight: 600;
    fill: var(--text-tertiary, #94a3b8);
}

.pdo-arch-g-accent .pdo-arch-owner-t { fill: var(--artha-primary-700, #6d3bd5); }

.pdo-chip-rect {
    fill: var(--bg-secondary, #f8fafc);
    stroke: var(--border-color, rgba(148, 163, 184, .28));
    stroke-width: 1;
}

.pdo-arch-g-accent .pdo-chip-rect {
    fill: var(--bg-primary, #fff);
    stroke: var(--artha-primary-100, #ede9fe);
}

.pdo-chip-t {
    font-size: 12px;
    fill: var(--text-secondary, #475569);
}

.pdo-arch-g-accent .pdo-chip-t { fill: var(--artha-primary-800, #4c2b8a); font-weight: 600; }

.pdo-dot-arch   { animation: pdoRiseArch 4.6s ease-in-out infinite; }
.pdo-dot-arch-2 { animation-delay: .6s; }
.pdo-dot-arch-3 { animation-delay: 1.2s; }
.pdo-dot-arch-4 { animation-delay: 1.8s; }

@keyframes pdoRiseArch {
    0%        { transform: translateY(0);      opacity: 0; }
    10%       { opacity: 1; }
    40%, 55%  { transform: translateY(-40px);  opacity: 1; }
    88%       { transform: translateY(-172px); opacity: 1; }
    100%      { transform: translateY(-172px); opacity: 0; }
}

/* ---------- horizontal pipeline track ---------- */
.pdo-track { margin-top: 44px; }

.pdo-track-stops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 46px 28px;
}

/* Each stop draws the connector to its right, so every row is joined no matter
   how many steps a pipeline has. The last stop in a row draws nothing. */
.pdo-track-stop {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdo-track-stop::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 54px;
    right: -28px;
    height: 2px;
    background-image: repeating-linear-gradient(90deg,
        var(--artha-primary-300, #c4b5fd) 0 7px, transparent 7px 16px);
    background-size: 16px 2px;
    animation: pdoTrack 2.6s linear infinite;
}

.pdo-track-stop:nth-child(3n)::after,
.pdo-track-stop:last-child::after { content: none; }

@keyframes pdoTrack { to { background-position: 16px 0; } }

.pdo-track-num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--artha-primary-700, #6d3bd5);
    background: var(--bg-primary, #fff);
    border: 2px solid var(--artha-primary-500, #8b5cf6);
    position: relative;
    z-index: 1;
}

.pdo-track-text {
    margin: 0;
    font-size: 14.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 36ch;
}

.pdo-track-text strong { color: var(--text-primary); }

/* ---------- de-risk path as a connected track ---------- */
.pdo-ladder { position: relative; }

.pdo-ladder::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        var(--artha-primary-200, #ddd6fe) 0 8px, transparent 8px 18px);
}

.pdo-rung { position: relative; padding-top: 34px; }

.pdo-rung-marker {
    position: absolute;
    top: -22px;
    left: 26px;
    width: 44px;
    height: 44px;
    background: var(--bg-primary, #fff);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.pdo-rung-marker svg { width: 40px; height: 40px; }

.pdo-rung-ring {
    fill: var(--bg-primary, #fff);
    stroke: var(--artha-primary-300, #c4b5fd);
    stroke-width: 2;
    stroke-dasharray: 3 5;
    transform-origin: 20px 20px;
    animation: pdoSweep 22s linear infinite;
}

.pdo-rung-core { fill: var(--artha-primary-600, #7c3aed); }
.pdo-rung-mid .pdo-rung-core { animation: pdoPulse 3s ease-in-out infinite; transform-origin: 20px 20px; }

/* ---------- proof band: duotone photo behind the human-outcome numbers ---------- */
.pdo-proof {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.pdo-proof::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("/static/img/payer-dataops/proof-texture.jpg");
    background-size: cover;
    background-position: 68% 28%;
    /* desaturated and faded in from the right only, so every number stays legible */
    filter: grayscale(1) contrast(1.08);
    opacity: .5;
    mask-image: linear-gradient(95deg, transparent 24%, #000 82%);
    -webkit-mask-image: linear-gradient(95deg, transparent 24%, #000 82%);
}

.pdo-proof::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        var(--artha-primary-950, #201245) 26%,
        rgba(32, 18, 69, .82) 58%,
        rgba(32, 18, 69, .58) 100%);
}

.pdo-proof > * { position: relative; z-index: 2; }

.pdo-proof-grid > div { position: relative; }

/* ---------- count-up stats ---------- */
.pdo-stat-num[data-pdo-count],
.pdo-proof-num[data-pdo-count] { font-variant-numeric: tabular-nums; }

/* ---------- section reveal ----------
   Scoped to .pdo-js (set in the head before paint) so that without JavaScript —
   including crawlers that never execute it — every section renders visible.
   The AEO/GEO content must never depend on script running. */
.pdo-js .pdo-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}

.pdo-js .pdo-reveal.is-in { opacity: 1; transform: none; }

/* ---------- stat tile gains a quiet meter so numbers read visually ---------- */
.pdo-stat { position: relative; overflow: hidden; }

.pdo-stat-meter {
    margin-top: 16px;
    height: 4px;
    border-radius: 4px;
    background: var(--bg-tertiary, #f1f5f9);
    overflow: hidden;
}

.pdo-stat-meter span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--grad-primary);
    width: 0;
    transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}

.pdo-stat-meter span { width: var(--pdo-meter, 60%); }
.pdo-js .pdo-stat-meter span { width: 0; }
.pdo-js .pdo-stat.is-in .pdo-stat-meter span { width: var(--pdo-meter, 60%); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .pdo-page .healthcare-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .pdo-figure-stack { max-width: 460px; margin-inline: auto; }
    .pdo-page .healthcare-section { padding: 64px 0; }
    .pdo-track-stops { grid-template-columns: 1fr; gap: 20px; }
    .pdo-track-stop { flex-direction: row; align-items: flex-start; gap: 14px; }
    .pdo-track-stop::after { content: none; }
    .pdo-track-num { flex: none; }
    .pdo-track-text { max-width: none; padding-top: 9px; }
    .pdo-ladder::before { display: none; }
    .pdo-rung { padding-top: 26px; }
    .pdo-rung-marker { top: -20px; left: 22px; }
    .pdo-figure-arch { overflow-x: auto; }
    .pdo-svg-arch { min-width: 700px; }
}

/* ---------- motion opt-out ---------- */
@media (prefers-reduced-motion: reduce) {
    .pdo-dot, .pdo-dot-lower, .pdo-dot-upper,
    .pdo-i-flow, .pdo-i-draw, .pdo-i-pulse, .pdo-i-hand, .pdo-i-hand-2, .pdo-i-drop,
    .pdo-track-stop::after, .pdo-rung-ring, .pdo-rung-core {
        animation: none !important;
    }

    .pdo-i-draw { stroke-dashoffset: 0 !important; }
    .pdo-dot { opacity: .9 !important; }

    .pdo-js .pdo-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .pdo-stat-meter span { transition: none !important; }
}

/* SVG text scales with its viewBox, so bump it when the diagram gets narrow —
   keeps stack labels near 13px effective on phones instead of ~10px.
   Declared last so it wins over the base .pdo-band-* sizes above. */
@media (max-width: 700px) {
    .pdo-band-label { font-size: 17px; }
    .pdo-band-detail { font-size: 18px; }
}

/* ==========================================================================
   Definition section — text and an illustrative diagram side by side.
   The old single-column card left a large empty right half on wide screens.
   ========================================================================== */

.pdo-def-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 40px;
    align-items: center;
    margin-top: 26px;
}

.pdo-def-grid .pdo-defcard { margin-top: 0; height: 100%; }

.pdo-figure-def {
    padding: 18px;
    border-radius: 16px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, rgba(148, 163, 184, .28));
}

/* diagram primitives — same slate structure, single purple accent */
.pdo-d-card rect {
    fill: var(--bg-primary, #fff);
    stroke: var(--border-color, rgba(148, 163, 184, .35));
    stroke-width: 1.5;
}

.pdo-d-card-accent rect {
    fill: var(--artha-primary-50, #f6f3ff);
    stroke: var(--artha-primary-500, #8b5cf6);
    stroke-width: 2;
}

.pdo-d-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    fill: var(--text-tertiary, #64748b);
}

.pdo-d-eyebrow-accent { fill: var(--artha-primary-700, #6d3bd5); }

.pdo-d-mono {
    font-size: 13.5px;
    fill: var(--text-secondary, #475569);
}

.pdo-d-mono-accent { fill: var(--artha-primary-800, #4c2b8a); font-weight: 600; }

.pdo-d-link {
    fill: none;
    stroke: var(--artha-primary-400, #a78bfa);
    stroke-width: 2;
    stroke-dasharray: 5 6;
    animation: pdoFlow 2.4s linear infinite;
}

.pdo-d-link-loop { stroke: var(--artha-neutral-300, #cbd5e1); animation-duration: 3.4s; }
.pdo-d-link-held { stroke: var(--artha-neutral-300, #cbd5e1); }

.pdo-d-pill rect {
    fill: var(--bg-primary, #fff);
    stroke: var(--artha-primary-200, #ddd6fe);
    stroke-width: 1.5;
}

.pdo-d-pill-t {
    font-size: 12px;
    font-weight: 600;
    fill: var(--artha-primary-700, #6d3bd5);
}

.pdo-d-gate {
    fill: var(--artha-primary-500, #8b5cf6);
    opacity: .9;
}

@media (max-width: 991px) {
    .pdo-def-grid { grid-template-columns: 1fr; gap: 26px; }
    .pdo-figure-def { max-width: 460px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .pdo-d-link { animation: none !important; }
}

/* SVG text scales with the viewBox — keep definition labels readable on phones */
@media (max-width: 700px) {
    .pdo-d-mono { font-size: 15px; }
    .pdo-d-eyebrow { font-size: 12.5px; }
    .pdo-d-pill-t { font-size: 13px; }
}

/* Two-line band details render a touch smaller so both lines fit the card. */
.pdo-band-detail-sm { font-size: 12.5px; }

@media (max-width: 700px) {
    .pdo-band-detail-sm { font-size: 16px; }
}

/* ==========================================================================
   Architecture map — fan-in / hub / fan-out.
   Structure borrowed from the operational-layer pattern: monospace column
   labels, pill nodes with connector nubs, thin wires converging on a hub, and
   an explainer anchored underneath. Palette and type stay Artha's own.
   ========================================================================== */

.pdo-map {
    position: relative;
    margin-top: 36px;
    padding: 40px 32px 32px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .28));
    border-radius: 18px;
    background-color: var(--bg-secondary, #f8fafc);
    /* faint graph paper, same workspace cue as the hero panel */
    background-image:
        linear-gradient(to right, rgba(148, 163, 184, .13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, .13) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* the accent rule that anchors the panel to the section above it */
.pdo-map::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 180px;
    height: 3px;
    border-radius: 3px;
    background: var(--grad-primary);
}

.pdo-map-grid {
    display: grid;
    grid-template-columns: minmax(196px, 1fr) 78px minmax(300px, 512px) 78px minmax(196px, 1fr);
    align-items: center;
    gap: 0;
}

/* ---------- monospace column labels ---------- */
.pdo-map-label {
    display: inline-block;
    white-space: nowrap;
    margin-bottom: 18px;
    padding: 4px 10px;
    border-radius: 5px;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-tertiary, #64748b);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pdo-map-label-hub {
    background: var(--artha-primary-100, #ede9fe);
    color: var(--artha-primary-700, #6d3bd5);
}

.pdo-map-col-right { text-align: right; }
.pdo-map-hub { text-align: center; }

/* ---------- node pills ---------- */
.pdo-map-nodes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 340px;
}

.pdo-map-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 12px 16px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .3));
    border-radius: 12px;
    background: var(--bg-primary, #fff);
    font-size: 14.5px;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.pdo-map-node i {
    flex: none;
    width: 18px;
    text-align: center;
    color: var(--artha-primary-600, #7c3aed);
    font-size: 14px;
}

.pdo-map-node-r { justify-content: flex-end; text-align: right; }

/* the small square where a wire meets a node */
.pdo-map-nub {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border: 1px solid var(--artha-neutral-400, #94a3b8);
    background: var(--bg-primary, #fff);
    border-radius: 1px;
}

.pdo-map-node .pdo-map-nub { right: -18px; }
.pdo-map-node-r .pdo-map-nub { right: auto; left: -18px; }

/* ---------- converging wires ---------- */
/* The node columns carry a label above them; the fans do not. Bottom-aligning
   the fans makes each wire start exactly on its node's centre line. */
.pdo-map-fan {
    width: 100%;
    height: 340px;
    align-self: end;
    overflow: visible;
}

.pdo-map-wire {
    fill: none;
    stroke: var(--artha-neutral-300, #cbd5e1);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;   /* stays crisp despite the stretched viewBox */
}

/* ---------- the hub ---------- */
.pdo-map-core {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}

.pdo-map-core-box {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px;
    border-radius: 12px;
    background: var(--artha-primary-950, #201245);
    text-align: left;
}

.pdo-map-core-box strong {
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.pdo-map-core-box span {
    color: #b6a9dd;
    font-size: 13px;
    line-height: 1.5;
}

.pdo-map-core-mark {
    flex: none;
    width: 74px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--grad-primary);
}

.pdo-map-core-mark svg { width: 36px; height: 36px; }

.pdo-map-mark-line {
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pdo-map-mark-line-2 { opacity: .55; }

/* ---------- explainer under the hub ---------- */
.pdo-map-note {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 620px;
    margin: 30px auto 0;
    padding: 22px 24px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .28));
    border-radius: 14px;
    background: var(--bg-primary, #fff);
}

.pdo-map-note-mark {
    flex: none;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--artha-primary-50, #f6f3ff);
    border: 1px solid var(--artha-primary-100, #ede9fe);
}

.pdo-map-note-mark svg { width: 30px; height: 30px; }
.pdo-map-note-mark .pdo-map-mark-line { stroke: var(--artha-primary-600, #7c3aed); }

.pdo-map-note h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

.pdo-map-note p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- responsive: stack, drop the wires ---------- */
@media (max-width: 1100px) {
    .pdo-map-grid { grid-template-columns: 1fr; gap: 30px; }
    .pdo-map-fan { display: none; }
    .pdo-map-nub { display: none; }
    .pdo-map-nodes { min-height: 0; gap: 12px; }
    .pdo-map-col-right { text-align: left; }
    .pdo-map-node-r { justify-content: flex-start; text-align: left; }
    .pdo-map-node-r i { order: -1; }
}

@media (max-width: 700px) {
    .pdo-map { padding: 28px 18px 24px; }
    .pdo-map-core { flex-direction: column; }
    .pdo-map-core-mark { width: 100%; height: 56px; }
    .pdo-map-note { flex-direction: column; gap: 14px; }
}

/* ==========================================================================
   Persona memos — sticky notes on a desk.
   The section asks "which of these is on your desk right now?", so the cards
   are notes: tilted, taped, lifted off the page. Urgency comes from the clock
   each reader is genuinely running against, not from alarm colouring.
   ========================================================================== */

.pdo-desk {
    margin-top: 40px;
    padding: 46px 34px 40px;
    border-radius: 18px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, rgba(148, 163, 184, .22));
}

.pdo-memos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.pdo-memo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 22px 22px;
    text-decoration: none;
    color: inherit;
    border-radius: 3px;                      /* paper, not a UI card */
    background: var(--bg-primary, #fff);
    box-shadow:
        0 1px 1px rgba(15, 23, 42, .05),
        0 10px 22px -8px rgba(15, 23, 42, .18);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease;
}

/* each note sits slightly differently, the way notes actually land */
.pdo-memo:nth-child(4n + 1) { transform: rotate(-2.2deg); }
.pdo-memo:nth-child(4n + 2) { transform: rotate(1.7deg); }
.pdo-memo:nth-child(4n + 3) { transform: rotate(-1.1deg); }
.pdo-memo:nth-child(4n + 4) { transform: rotate(2.4deg); }

/* faint ruled line under the tape, like a memo pad */
.pdo-memo::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 62px;
    height: 1px;
    background: var(--border-color, rgba(148, 163, 184, .3));
}

.pdo-memo:hover,
.pdo-memo:focus-visible {
    transform: rotate(0deg) translateY(-4px);
    box-shadow:
        0 2px 2px rgba(15, 23, 42, .05),
        0 20px 34px -10px rgba(15, 23, 42, .26);
}

/* the strip of tape holding it down */
.pdo-memo-tape {
    position: absolute;
    top: -9px;
    left: 50%;
    width: 76px;
    height: 20px;
    transform: translateX(-50%) rotate(-1.6deg);
    background: linear-gradient(180deg,
        rgba(196, 181, 253, .5),
        rgba(196, 181, 253, .22));
    border-left: 1px solid rgba(255, 255, 255, .65);
    border-right: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.pdo-memo:nth-child(4n + 2) .pdo-memo-tape { transform: translateX(-50%) rotate(2.2deg); }
.pdo-memo:nth-child(4n + 3) .pdo-memo-tape { transform: translateX(-50%) rotate(-2.6deg); }
.pdo-memo:nth-child(4n + 4) .pdo-memo-tape { transform: translateX(-50%) rotate(1.2deg); }

.pdo-memo-role {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
}

.pdo-memo-say {
    margin: 6px 0 0;
    font-size: 15.5px;
    font-style: italic;
    line-height: 1.55;
    color: var(--text-primary);
}

/* the clock this reader is running against */
.pdo-memo-clock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: auto;
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pdo-memo-clock i { font-size: 11px; }

.pdo-memo-clock-hot {
    background: var(--artha-warning-100, #fef3c7);
    color: var(--artha-warning-700, #b45309);
}

.pdo-memo-clock-warm {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #475569);
}

/* the hot note gets a hairline edge so the deadline reads first */
.pdo-memo:has(.pdo-memo-clock-hot) { box-shadow:
        0 1px 1px rgba(180, 83, 9, .08),
        0 10px 22px -8px rgba(180, 83, 9, .22); }

.pdo-memo-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-blue);
}

.pdo-memo:hover .pdo-memo-link i { transform: translateX(3px); }
.pdo-memo-link i { transition: transform .2s ease; }

@media (max-width: 1100px) {
    .pdo-memos { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 600px) {
    .pdo-memos { grid-template-columns: 1fr; }
    .pdo-memo { transform: none !important; }
    .pdo-memo-tape { transform: translateX(-50%) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pdo-memo { transition: none; }
    .pdo-memo:hover, .pdo-memo:focus-visible { transform: none; }
    .pdo-memo-link i { transition: none; }
}

/* ==========================================================================
   "Where to go next" — cards with a reason to click, replacing the pill rows.
   A pill tells a reader where a link goes; it never tells them why to follow it.
   ========================================================================== */

.pdo-next-label {
    display: block;
    margin-bottom: 20px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-tertiary, #64748b);
}

.pdo-next-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pdo-next-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px 22px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .28));
    border-radius: var(--pdo-radius, 14px);
    background: var(--bg-primary, #fff);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pdo-next-card:hover,
.pdo-next-card:focus-visible {
    border-color: var(--artha-primary-300, #c4b5fd);
    box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .18);
    transform: translateY(-2px);
}

.pdo-next-card h3 {
    margin: 0;
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.pdo-next-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.pdo-next-go {
    margin-top: auto;
    padding-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-blue);
}

.pdo-next-go i { transition: transform .2s ease; }
.pdo-next-card:hover .pdo-next-go i { transform: translateX(3px); }

/* the second group is supporting material, so it sits back a little */
.pdo-next-card-quiet { background: var(--bg-primary, #fff); }
.pdo-next-card-quiet h3 { font-size: 16px; }

@media (max-width: 991px) {
    .pdo-next-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pdo-next-card, .pdo-next-go i { transition: none; }
    .pdo-next-card:hover { transform: none; }
}

/* ==========================================================================
   Bottom CTA alignment.
   The markup says <div class="container text-center">, but the site has no
   generic .text-center utility — only scoped variants such as
   .healthcare-section-header.text-center. So the title inherited left
   alignment while the button row centred itself via .u-justify-center, and the
   subtitle only looked centred because .cta-subtitle carries margin: 0 auto.
   Centre it explicitly, scoped to this section so no other page shifts.
   ========================================================================== */

.pdo-page .healthcare-bottom-cta { text-align: center; }

.pdo-page .healthcare-bottom-cta .cta-title,
.pdo-page .healthcare-bottom-cta .cta-subtitle {
    text-align: center;
}

.pdo-page .healthcare-bottom-cta .cta-subtitle { margin-inline: auto; }

/* ==========================================================================
   Hub hero scene — the living pipeline.
   Continuous ambient motion in the antimetal manner, drawn in Artha's palette:
   raw records (hollow slate squares) rise from the systems of record, cross
   the DataOps band, and continue upward as validated records (purple, ticked).
   One 3.6s cycle per lane, lanes staggered a third of a cycle apart.
   ========================================================================== */

/* entrance: same easing family as the reference element (700ms, ease-out-quint) */
.pdo-scene-wrap {
    animation: pdoSceneIn 700ms cubic-bezier(.22, 1, .36, 1) 80ms both;
}

@keyframes pdoSceneIn {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* gentle ambient float so the scene never sits perfectly still */
.pdo-scene { animation: pdoSceneFloat 7s ease-in-out infinite alternate; }

@keyframes pdoSceneFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-5px); }
}

/* ---------- chips (top surfaces + bottom sources) ---------- */
.pdo-sc-chip rect {
    fill: var(--bg-primary, #fff);
    stroke: var(--border-color, rgba(148, 163, 184, .35));
    stroke-width: 1.5;
}

.pdo-sc-chip text {
    font-size: 14px;
    font-weight: 600;
    fill: var(--text-primary, #0f172a);
}

.pdo-sc-chip-src text { fill: var(--text-secondary, #475569); font-weight: 400; }

/* status dot on each surface: brightens as a validated record arrives */
.pdo-sc-live {
    fill: var(--artha-success-600, #059669);
    opacity: .25;
    animation: pdoScLive 3.6s linear infinite;
}

.pdo-sc-live-2 { animation-delay: 1.2s; }
.pdo-sc-live-3 { animation-delay: 2.4s; }

@keyframes pdoScLive {
    0%, 82%  { opacity: .25; }
    92%      { opacity: 1; }
    100%     { opacity: .3; }
}

/* ---------- the DataOps band ---------- */
.pdo-sc-band-rect {
    fill: var(--artha-primary-50, #f6f3ff);
    stroke: var(--artha-primary-500, #8b5cf6);
    stroke-width: 2;
}

.pdo-sc-mark rect { fill: var(--artha-primary-600, #7c3aed); }

.pdo-sc-ring {
    fill: none;
    stroke: var(--artha-primary-300, #c4b5fd);
    stroke-width: 1.5;
    stroke-dasharray: 4 7;
}

.pdo-sc-ring-g {
    transform-origin: 230px 210px;
    animation: pdoSweep 26s linear infinite;
}

.pdo-sc-band-label {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    fill: var(--artha-primary-700, #6d3bd5);
}

.pdo-sc-band-note {
    font-size: 12.5px;
    font-weight: 600;
    fill: var(--artha-primary-800, #4c2b8a);
}

/* validation ticker: two pass, the third is caught (amber), on a slow cycle */
.pdo-sc-check { animation: pdoScCheck 5.4s ease-in-out infinite; }
.pdo-sc-check-1 { fill: var(--artha-success-600, #059669); }
.pdo-sc-check-2 { fill: var(--artha-success-600, #059669); animation-delay: .6s; }
.pdo-sc-check-3 { fill: var(--artha-warning-600, #d97706); animation-delay: 1.2s; }

@keyframes pdoScCheck {
    0%, 55%, 100% { opacity: .25; }
    12%, 40%      { opacity: 1; }
}

/* ---------- the records ---------- */
/* raw file: hollow slate square rising 91px from source to the band */
.pdo-sc-raw {
    fill: var(--bg-primary, #fff);
    stroke: var(--artha-neutral-400, #94a3b8);
    stroke-width: 1.6;
    animation: pdoScRaw 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
}

.pdo-sc-raw-2 { animation-delay: 1.2s; }
.pdo-sc-raw-3 { animation-delay: 2.4s; }

@keyframes pdoScRaw {
    0%        { transform: translateY(0);     opacity: 0; }
    8%        { opacity: 1; }
    40%       { transform: translateY(-87px); opacity: 1; }
    46%, 100% { transform: translateY(-91px); opacity: 0; }
}

/* validated record: purple circle with a tick, rising from the band to a surface */
.pdo-sc-ok circle { fill: var(--artha-primary-600, #7c3aed); }
.pdo-sc-ok path   { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.pdo-sc-ok {
    animation: pdoScOk 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
}

.pdo-sc-ok-2 { animation-delay: 1.2s; }
.pdo-sc-ok-3 { animation-delay: 2.4s; }

@keyframes pdoScOk {
    0%, 50%   { transform: translateY(0);     opacity: 0; }
    58%       { opacity: 1; }
    90%       { transform: translateY(-85px); opacity: 1; }
    96%, 100% { transform: translateY(-91px); opacity: 0; }
}

/* ---------- motion opt-out: a calm, complete still ---------- */
@media (prefers-reduced-motion: reduce) {
    .pdo-scene-wrap { animation: none; opacity: 1; transform: none; }
    .pdo-scene { animation: none; }
    .pdo-sc-ring-g, .pdo-sc-live, .pdo-sc-check, .pdo-sc-raw, .pdo-sc-ok { animation: none !important; }
    .pdo-sc-live, .pdo-sc-check { opacity: .8; }
    .pdo-sc-raw { transform: translateY(-44px); opacity: 1; }   /* mid-journey */
    .pdo-sc-ok  { transform: translateY(-44px); opacity: 1; }
}