/* Credential Monitoring page (template-credential-monitoring.php).
   Page-specific rules only. Tokens, base, buttons, header, footer, section scaffolding and the
   hero, steps, FAQ and CTA come from core.css and home.css (home.css is enqueued as a dependency). */

:root { --amber: #E8A84C; --green: #4CC38A; }
section[id] { scroll-margin-top: var(--header-h); }   /* anchors clear the fixed header */

/* ===================================================================
   Safeguards strip under the hero (the hero itself is in home.css)
   =================================================================== */
.cx-strip { display: grid; grid-template-columns: 200px repeat(4, 1fr); align-items: stretch; }
.cx-strip-label { color: var(--dim-d); padding: 2.5rem 0; align-self: center; }
.cx-strip-cell { display: flex; flex-direction: column; gap: 0.9rem; padding: 2rem; border-left: 1px solid var(--line-d); transition: background 0.25s ease; }
.cx-strip-cell:last-child { border-right: 1px solid var(--line-d); }
.cx-strip-cell:hover { background: rgba(76, 144, 240, 0.05); }
.cx-strip-cell .cm-mono { color: var(--dim-d); }
.cx-strip-cell h3 { margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }

/* ===================================================================
   01 How it works: steps timeline (light)
   =================================================================== */
.cm-track.is-in .cm-step:nth-child(5) .cm-step-node { transition-delay: 1.8s; }

/* ===================================================================
   02 What we watch for (capability grid)
   =================================================================== */
.cx-caps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-d-strong); border-left: 1px solid var(--line-d); }
.cx-cap { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem 2rem 2.2rem; min-height: 320px; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); transition: background 0.25s ease; }
.cx-cap::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--accent); transition: width 0.5s ease; }
.cx-cap:hover { background: rgba(76, 144, 240, 0.04); }
.cx-cap:hover::after { width: 100%; }
.cx-cap-n { color: var(--dim-d); transition: color 0.3s ease; }
.cx-cap:hover .cx-cap-n { color: var(--accent); }
.cx-cap h3 { margin: 1.5rem 0 0; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.cx-cap p { margin: 0; color: var(--mute-d); }
.cx-chips { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cx-chip { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.5rem; border: 1px solid var(--line-d-strong); color: var(--mute-d); }
.cx-chip.is-accent { color: var(--accent); border-color: rgba(76, 144, 240, 0.5); }

/* ===================================================================
   03 The dashboard (product window)
   =================================================================== */
.cx-win { position: relative; border: 1px solid var(--line-d-strong); background: var(--black); }
.cx-win-c { position: absolute; width: 14px; height: 14px; border-color: var(--white); border-style: solid; z-index: 2; }
.cx-win-c:nth-of-type(1) { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.cx-win-c:nth-of-type(2) { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.cx-win-c:nth-of-type(3) { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.cx-win-c:nth-of-type(4) { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.cx-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line-d); color: var(--mute-d); }
.cx-dots { display: flex; gap: 6px; }
.cx-dots i { width: 8px; height: 8px; border: 1px solid var(--line-d-strong); }
.cx-sample { padding: 0.25rem 0.5rem; border: 1px solid rgba(232, 168, 76, 0.5); color: var(--amber); }
.cx-app { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.cx-side { border-right: 1px solid var(--line-d); padding: 1.25rem 0; display: flex; flex-direction: column; gap: 2px; }
.cx-client { padding: 0 1.25rem 1.25rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--line-d); }
.cx-client .cm-mono { display: block; color: var(--dim-d); margin-bottom: 0.35rem; }
.cx-client strong { font-weight: 400; font-size: 1rem; letter-spacing: -0.01em; }
.cx-nl { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 1.25rem; color: var(--mute-d); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cx-nl::before { content: ''; width: 6px; height: 6px; background: var(--dim-d); flex-shrink: 0; }
.cx-nl.on { color: var(--white); background: var(--ink-2); }
.cx-nl.on::before { background: var(--accent); }
.cx-main { padding: clamp(1rem, 2vw, 1.75rem); display: grid; gap: 1.25rem; min-width: 0; }
.cx-kpis { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); }
.cx-kpi { background: var(--black); padding: 1.1rem 1.25rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cx-kpi .cm-mono { color: var(--mute-d); }
.cx-kpi-n { font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.cx-kpi-n small { font-size: 0.4em; color: var(--dim-d); letter-spacing: 0; margin-left: 0.3em; }
.cx-foot { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--dim-d); }
.cx-meter { height: 3px; background: var(--line-d); position: relative; }
.cx-meter i { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: 30%; transition: width 1.2s cubic-bezier(0.6, 0, 0.2, 1); }
.cx-row2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; }
.cx-card { border: 1px solid var(--line-d); padding: 1.25rem; min-width: 0; }
.cx-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; color: var(--mute-d); }
.cx-card-h span:last-child { color: var(--dim-d); }
.cx-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; border-bottom: 1px solid var(--line-d); }
.cx-bars i { flex: 1; background: rgba(255, 255, 255, 0.16); min-height: 3px; transition: background 0.2s ease; }
.cx-bars i:hover { background: rgba(255, 255, 255, 0.4); }
.cx-bars i:last-child { background: var(--accent); }
.cx-bars-x { display: flex; justify-content: space-between; margin-top: 0.5rem; color: var(--dim-d); font-size: 0.62rem; }
.cx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.cx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.cx-list li { display: grid; grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: 'l v' 'b b'; gap: 0.3rem 0.5rem; font-size: 0.85rem; color: var(--mute-d); }
.cx-list li > span:first-child { grid-area: l; }
.cx-list li > span:nth-child(2) { grid-area: v; text-align: right; font-family: var(--font-mono); font-size: 0.72rem; color: var(--white); }
.cx-list li > i { grid-area: b; display: block; height: 2px; background: var(--line-d); position: relative; }
.cx-list li > i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--mute-d); }
.cx-sub-h { display: block; color: var(--dim-d); margin-bottom: 0.9rem; }
.cx-geo canvas { display: block; width: 100%; max-width: 330px; aspect-ratio: 1; margin: 0 auto; }
.cx-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.1rem; margin-top: 0.75rem; color: var(--mute-d); }
.cx-legend span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--c); vertical-align: 1px; }
.cx-geo-note { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--dim-d); text-align: center; }
/* Findings list + detail */
.cx-row3 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.25rem; }
.cx-find { border: 1px solid var(--line-d); min-width: 0; }
.cx-find-h { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line-d); display: flex; justify-content: space-between; gap: 1rem; color: var(--mute-d); }
.cx-find-h span:last-child { color: var(--dim-d); }
.cx-row {
    display: grid; grid-template-columns: 84px minmax(0, 1.15fr) minmax(0, 1.35fr) auto; gap: 1rem; align-items: center;
    width: 100%; padding: 0.95rem 1.25rem; border: 0; border-bottom: 1px solid var(--line-d); border-left: 2px solid transparent;
    background: transparent; color: var(--white); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
    transition: background 0.2s ease;
}
.cx-row:last-child { border-bottom: 0; }
.cx-row:hover { background: var(--ink-2); }
.cx-row[aria-pressed='true'] { background: var(--ink-2); border-left-color: var(--accent); }
.cx-row .id { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--dim-d); }
.cx-row .ty { color: var(--mute-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row .who { font-family: var(--font-mono); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--line-d-strong); color: var(--mute-d); white-space: nowrap; }
.tag::before { content: ''; width: 6px; height: 6px; background: currentColor; }
.tag.crit { color: var(--danger); border-color: rgba(231, 106, 110, 0.5); }
.tag.high { color: var(--amber); border-color: rgba(232, 168, 76, 0.5); }
.tag.med { color: var(--accent); border-color: rgba(76, 144, 240, 0.5); }
.tag.low { color: var(--mute-d); }
.cx-detail { border: 1px solid var(--line-d); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; background: var(--ink); }
.cx-d-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--mute-d); }
.cx-detail h3 { margin: 0; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; word-break: break-all; }
.cx-detail dl { margin: 0; display: grid; }
.cx-detail dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line-d); font-size: 0.88rem; }
.cx-detail dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-d); padding-top: 0.2rem; }
.cx-detail dd { margin: 0; color: var(--white); }
.cx-detail dd.never { color: var(--green); }
.cx-d-h { color: var(--dim-d); margin-top: 0.25rem; }
.cx-factors, .cx-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.88rem; }
.cx-factors li { display: grid; grid-template-columns: 18px 1fr; color: var(--mute-d); }
.cx-factors li::before { font-family: var(--font-mono); }
.cx-factors li.up::before { content: '↑'; color: var(--danger); }
.cx-factors li.down::before { content: '↓'; color: var(--green); }
.cx-actions li { padding: 0.55rem 0.75rem; border: 1px solid var(--line-d-strong); color: var(--white); }
.cx-d-note { margin: auto 0 0; padding-top: 0.5rem; color: var(--dim-d); font-size: 0.78rem; }
.cx-win-foot { margin-top: 1.25rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 2rem; color: var(--dim-d); }

/* ===================================================================
   04 What we will never do (light, two columns)
   =================================================================== */
.cx-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-l-strong); }
.cx-col { padding: 2.5rem 2.5rem 0 0; }
.cx-col + .cx-col { padding-left: 2.5rem; padding-right: 0; border-left: 1px solid var(--line-l); }
.cx-col-h { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; color: var(--black); }
.cx-col-h::before { content: ''; width: 9px; height: 9px; background: var(--c); }
.cx-col.never { --c: #C8383D; }
.cx-col.always { --c: var(--accent); }
.cx-points { list-style: none; margin: 0; padding: 0; counter-reset: cx-p; }
.cx-points li { counter-increment: cx-p; display: grid; grid-template-columns: 48px 1fr; gap: 0.5rem; padding: 1.35rem 0; border-top: 1px solid var(--line-l); }
.cx-points li::before { content: counter(cx-p, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--mute-l); padding-top: 0.35rem; }
.cx-points h3 { margin: 0 0 0.45rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.cx-points p { margin: 0; color: var(--mute-l); }

/* ===================================================================
   05 Severity, explained
   =================================================================== */
.cx-sev { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.cx-sev-card { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.75rem 1.75rem 2rem; border-top: 2px solid var(--c); border-right: 1px solid var(--line-d); }
.cx-sev-card.c-crit { --c: var(--danger); }
.cx-sev-card.c-high { --c: var(--amber); }
.cx-sev-card.c-med { --c: var(--accent); }
.cx-sev-card.c-low { --c: var(--mute-d); }
.cx-sev-card .tag { align-self: flex-start; color: var(--c); border-color: var(--c); }
.cx-sev-card h3 { margin: 0.5rem 0 0; font-size: 1.35rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; }
.cx-sev-card p { margin: 0; color: var(--mute-d); }
.cx-sev-do { margin-top: auto; min-height: 7.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line-d); }
.cx-sev-do .cm-mono { display: block; color: var(--dim-d); margin-bottom: 0.5rem; }
.cx-sev-do span:last-child { color: var(--white); font-size: 0.95rem; }
.cx-factors-wrap { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; }
.cx-factors-wrap > .cm-mono { color: var(--dim-d); padding-top: 0.5rem; }
.cx-fchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cx-fchip { display: inline-flex; gap: 0.55rem; align-items: center; padding: 0.5rem 0.8rem; border: 1px solid var(--line-d-strong); font-size: 0.9rem; }
.cx-fchip b { font-family: var(--font-mono); font-weight: 400; }
.cx-fchip.up b { color: var(--danger); }
.cx-fchip.down b { color: var(--green); }
.cx-sev-note { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 3rem; color: var(--mute-d); }
.cx-sev-note strong { color: var(--white); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.01em; }

/* ===================================================================
   06 Plans and pricing (dark, hairline above to separate it from the severity section)
   =================================================================== */
#plans { border-top: 1px solid var(--line-d); }
.cx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cx-plan-group + .cx-plan-group { margin-top: clamp(3.5rem, 7vw, 6rem); }
.cx-plan-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.25rem; }
.cx-plan-h h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; }
.cx-plan-h .cm-mono { color: var(--mute-d); }
.cx-plans { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.cx-plan { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem 1.5rem 1.75rem; border-top: 2px solid var(--line-d-strong); border-right: 1px solid var(--line-d); min-width: 0; }
.cx-plan.is-featured { border-top-color: var(--accent); background: rgba(76, 144, 240, 0.07); }
.cx-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 1.75rem; }
.cx-plan-name { margin: 0; font-size: 1.35rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.cx-plan-badge { color: var(--accent); border-color: var(--accent); }
.cx-plan-for { margin: -0.6rem 0 0; color: var(--mute-d); font-size: 0.95rem; }
.cx-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.cx-price-from { flex-basis: 100%; color: var(--mute-d); }
.cx-price b { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-price span:not(.cx-price-from) { color: var(--mute-d); }
.cx-annual { margin: -0.6rem 0 0; color: var(--mute-d); font-size: 0.92rem; }
.cx-specs { margin: 0; border-top: 1px solid var(--line-d); }
.cx-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-d); font-size: 0.95rem; }
.cx-specs dt { color: var(--mute-d); }
.cx-specs dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.cx-plan .cm-btn { margin-top: auto; }
.cx-plan-note { margin: 1.25rem 0 0; color: var(--mute-d); font-size: 0.95rem; max-width: 80ch; }
.cx-ptable { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-d-strong); }
.cx-ptable th, .cx-ptable td { padding: 1.15rem 1.25rem 1.15rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-d); }
.cx-ptable thead th { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-d); }
.cx-ptable tbody th { font-size: 1.15rem; font-weight: 400; letter-spacing: -0.02em; }
.cx-ptable td { font-family: var(--font-mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cx-ptable td.cx-pt-price { font-size: 1rem; }
.cx-ptable .cx-from { display: block; color: var(--mute-d); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cx-plan-foot { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cx-plan-foot p { margin: 0; color: var(--mute-d); font-size: 0.95rem; max-width: 60ch; }
.cx-fine { margin: clamp(2rem, 4vw, 3rem) 0 0; color: var(--mute-d); }
@media (max-width: 1080px) {
    .cx-plans { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .cx-ptable, .cx-ptable tbody, .cx-ptable tr, .cx-ptable th, .cx-ptable td { display: block; }
    .cx-ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .cx-ptable tr { padding: 1.5rem 0; border-bottom: 1px solid var(--line-d); }
    .cx-ptable th, .cx-ptable td { padding: 0; border: 0; }
    .cx-ptable tbody th { padding-bottom: 0.75rem; }
    .cx-ptable td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.4rem 0; text-align: right; }
    .cx-ptable td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-family: var(--font-sans); font-size: 0.95rem; color: var(--mute-d); }
}
@media (max-width: 640px) {
    .cx-plans { grid-template-columns: 1fr; }
}

/* ===================================================================
   08 Final CTA
   =================================================================== */
.cm-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1080px) {
    .cx-caps { grid-template-columns: 1fr 1fr; }
    .cx-sev { grid-template-columns: 1fr 1fr; }
    .cx-row2, .cx-row3 { grid-template-columns: 1fr; }
    .cx-geo canvas { max-width: 280px; }
    .cm-track { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-l-strong); }
    .cm-track-fill { top: 0; left: -1px; width: 2px !important; height: 0; transition: height 1.8s cubic-bezier(0.6, 0, 0.2, 1); }
    .cm-track.is-in .cm-track-fill { height: 100%; }
    .cm-step, .cm-step + .cm-step { padding: 0 0 3rem 2rem; border-left: 0; }
    .cm-step-node, .cm-step + .cm-step .cm-step-node { top: 0.5rem; left: -6px; }
    .cm-step-n { margin-bottom: 1.25rem; }
}
@media (max-width: 900px) {
    .cx-strip { grid-template-columns: 1fr 1fr; }
    .cx-strip-label { grid-column: 1 / -1; padding: 2rem 0 1rem; }
    .cx-strip-cell, .cx-strip-cell:last-child { border: 0; border-top: 1px solid var(--line-d); padding: 1.5rem 1rem 1.5rem 0; }
    .cx-app { grid-template-columns: 1fr; }
    .cx-side { display: none; }
    .cx-kpis { grid-template-columns: 1fr 1fr; }
    .cx-split { grid-template-columns: 1fr; }
    .cx-col, .cx-col + .cx-col { padding: 2rem 0 0; border-left: 0; }
    .cx-col + .cx-col { margin-top: 2rem; border-top: 1px solid var(--line-l-strong); }
    .cx-factors-wrap { grid-template-columns: 1fr; gap: 0.75rem; }
}
@media (max-width: 640px) {
    .cx-caps, .cx-sev { grid-template-columns: 1fr; }
    .cx-two { grid-template-columns: 1fr; }
    .cx-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'id tag' 'who who'; gap: 0.4rem 1rem; }
    .cx-row .id { grid-area: id; }
    .cx-row .tag { grid-area: tag; }
    .cx-row .who { grid-area: who; font-size: 0.85rem; }
    .cx-row .ty { display: none; }
    .cx-detail dl > div { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media (max-width: 560px) {
    .cx-strip { grid-template-columns: 1fr; }
    .cx-kpis { grid-template-columns: 1fr; }
}

/* ===================================================================
   API plans table: core.css styles every <table> globally ("Global Table Styles": margin, panel
   background, rounded corners, uppercase headers), so reset what this table does not want.
   =================================================================== */
table.cx-ptable { margin: 0; background: transparent; border: 0; border-top: 1px solid var(--line-d-strong); border-radius: 0; overflow: visible; box-shadow: none; font-size: 1rem; color: var(--white); }
table.cx-ptable th, table.cx-ptable td { background: transparent; line-height: inherit; }
table.cx-ptable tbody th { font-family: var(--font-sans); text-transform: none; color: var(--white); }
table.cx-ptable td { color: var(--white); }
table.cx-ptable tbody tr:last-child th, table.cx-ptable tbody tr:last-child td { border-bottom: 1px solid var(--line-d); }
table.cx-ptable tbody tr:hover td { background: transparent; }
@media (max-width: 900px) {
    table.cx-ptable tbody tr:last-child th, table.cx-ptable tbody tr:last-child td { border-bottom: 0; }
}