/* Resources (A–G) page-specific components; Carbon tokens only. */
.ca-roadmap-badge { display: inline-block; border: 1px solid var(--cds-border-strong-01); border-radius: 1rem; padding: .125rem .75rem; }
.ca-methodology-note { font-size: .875rem; color: var(--cds-text-secondary); margin-block-start: var(--cds-spacing-05, 1rem); max-inline-size: 70ch; }

/* flow diagrams */
.ca-flow-diagram, .ca-flow-sources { display: flex; flex-direction: column; gap: var(--cds-spacing-02, .25rem); padding: var(--cds-spacing-06, 1.5rem); background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); }
.ca-flow-sources { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 0; border: 0; background: none; gap: var(--cds-spacing-03, .5rem); }
.ca-flow-box, .ca-flow-source { border: 1px solid var(--cds-border-strong-01); background: var(--cds-layer-02); padding: var(--cds-spacing-04, .75rem) var(--cds-spacing-05, 1rem); text-align: center; font-size: .875rem; line-height: 1.4; }
.ca-flow-source { flex: 1 1 8rem; }
.ca-flow-box span, .ca-flow-source span { display: block; font-size: .75rem; color: var(--cds-text-secondary); margin-block-start: var(--cds-spacing-02, .25rem); }
.ca-flow-box.ca-highlight { border-color: var(--ca-lime); border-width: 2px; }
.ca-flow-box.ca-future { border-style: dashed; color: var(--cds-text-secondary); }
.ca-flow-arrow { text-align: center; font-size: .75rem; color: var(--cds-text-helper); padding-block: var(--cds-spacing-02, .25rem); font-family: "IBM Plex Mono", monospace; }
.ca-flow-diagram .ca-flow-sources { padding: 0; }

/* consequence / attack-type / timeline row lists */
.ca-consequence-list, .ca-attack-type-list, .ca-timeline-list { display: flex; flex-direction: column; border: 1px solid var(--cds-border-subtle-01); }
.ca-consequence-row, .ca-attack-type-row, .ca-timeline-row { display: grid; grid-template-columns: 1fr; gap: var(--cds-spacing-03, .5rem); padding: var(--cds-spacing-05, 1rem); border-block-end: 1px solid var(--cds-border-subtle-01); }
.ca-consequence-row:last-child, .ca-attack-type-row:last-child, .ca-timeline-row:last-child { border-block-end: 0; }
.ca-consequence-row:nth-child(odd), .ca-attack-type-row:nth-child(odd), .ca-timeline-row:nth-child(odd) { background: var(--cds-layer-01); }
.ca-consequence-trigger, .ca-attack-type-name { font-weight: 600; font-size: 1rem; }
.ca-consequence-result, .ca-attack-type-desc, .ca-timeline-desc { color: var(--cds-text-secondary); line-height: 1.5; }
.ca-timeline-year { font-family: "IBM Plex Mono", monospace; font-weight: 700; }
.ca-timeline-scale { font-family: "IBM Plex Mono", monospace; font-size: .875rem; color: var(--cds-link-primary); font-weight: 600; }
.ca-timeline-desc strong { color: var(--cds-text-primary); }
@media (min-width: 42rem) {
  .ca-consequence-row, .ca-attack-type-row { grid-template-columns: 14rem 1fr; gap: var(--cds-spacing-06, 1.5rem); }
  .ca-timeline-row { grid-template-columns: 6rem 10rem 1fr; gap: var(--cds-spacing-06, 1.5rem); }
}

/* grids */
.ca-idea-grid, .ca-stat-row, .ca-source-grid { display: grid; grid-template-columns: 1fr; gap: var(--cds-spacing-05, 1rem); }
@media (min-width: 42rem) { .ca-idea-grid { grid-template-columns: repeat(2, 1fr); } .ca-stat-row { grid-template-columns: repeat(3, 1fr); } .ca-source-grid { grid-template-columns: repeat(3, 1fr); } }
.ca-stat-row { margin-block: var(--cds-spacing-06, 1.5rem); }
.ca-stat-box, .ca-source-card, .ca-chart-card, .ca-growth-table-wrap, .ca-largest-attack-card { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); padding: var(--cds-spacing-06, 1.5rem); }
.ca-stat-box { text-align: center; }
.ca-stat-box .ca-num, .ca-largest-attack-card .ca-num { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.1; color: var(--cds-link-primary); }
.ca-largest-attack-card .ca-num { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.ca-num-unit { font-size: .5em; color: var(--cds-text-secondary); }
.ca-lbl { font-size: .875rem; color: var(--cds-text-secondary); margin-block-start: var(--cds-spacing-03, .5rem); line-height: 1.4; }
.ca-largest-attack-card { border-color: var(--cds-border-strong-01); display: flex; flex-direction: column; gap: var(--cds-spacing-04, .75rem); }
.ca-largest-attack-card p { margin: 0; color: var(--cds-text-secondary); line-height: 1.6; }
.ca-largest-attack-card p strong { color: var(--cds-text-primary); }
.ca-source-card { display: flex; flex-direction: column; gap: var(--cds-spacing-04, .75rem); align-items: flex-start; }
.ca-source-card .ca-num { font-size: 1.5rem; font-weight: 700; }
.ca-source-card .cds--btn { margin-block-start: auto; }
.ca-src-name { font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .32px; text-transform: uppercase; color: var(--cds-text-secondary); }

/* growth table + charts */
.ca-growth-table-wrap { overflow-x: auto; }
.ca-growth-table { inline-size: 100%; border-collapse: collapse; font-size: .875rem; }
.ca-growth-table th, .ca-growth-table td { padding: var(--cds-spacing-04, .75rem) var(--cds-spacing-05, 1rem); text-align: center; border-block-end: 1px solid var(--cds-border-subtle-01); }
.ca-growth-table thead th { font-family: "IBM Plex Mono", monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: .32px; color: var(--cds-text-secondary); }
.ca-growth-table tbody th { text-align: start; font-weight: 600; }
.ca-growth-table td.ca-val { font-weight: 700; }
.ca-growth-table td.ca-val.ca-hi { color: var(--cds-link-primary); }
.ca-growth-table tr:last-child th, .ca-growth-table tr:last-child td { border-block-end: 0; }
.ca-growth-source, .ca-chart-card-src { font-size: .75rem; color: var(--cds-text-helper); margin-block-start: var(--cds-spacing-05, 1rem); }
.ca-growth-source { text-align: center; }
.ca-chart-card-src { text-align: end; }
.ca-growth-source a, .ca-chart-card-src a { color: inherit; }
.ca-chart-card-title { font-family: "IBM Plex Mono", monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: .32px; color: var(--cds-text-secondary); margin-block-end: var(--cds-spacing-05, 1rem); }
.ca-chart-card svg { inline-size: 100%; block-size: auto; display: block; color: var(--cds-text-primary); }
.ca-chart-legend { display: flex; gap: var(--cds-spacing-05, 1rem); flex-wrap: wrap; margin-block-start: var(--cds-spacing-04, .75rem); }
.ca-chart-legend-item { display: flex; align-items: center; gap: var(--cds-spacing-03, .5rem); font-size: .875rem; color: var(--cds-text-secondary); }
.ca-chart-legend-swatch { inline-size: .75rem; block-size: .75rem; border-radius: 2px; background: #5f7f00; }
.ca-chart-legend-item:nth-child(2) .ca-chart-legend-swatch { background: #007cbb; }
.ca-chart-legend-item:nth-child(3) .ca-chart-legend-swatch { background: #d49838; }

/* attack carousel */
.ca-attack-carousel { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); overflow: hidden; }
.ca-attack-carousel-top { display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-05, 1rem); padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem) 0; flex-wrap: wrap; }
.ca-attack-carousel-head { display: flex; align-items: center; gap: var(--cds-spacing-04, .75rem); }
.ca-attack-carousel-head h3 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.ca-attack-card-num { font-family: "IBM Plex Mono", monospace; font-size: .75rem; font-weight: 700; border: 1px solid var(--cds-border-strong-01); border-radius: 50%; inline-size: 1.75rem; block-size: 1.75rem; display: inline-flex; align-items: center; justify-content: center; }
.ca-attack-nav { display: flex; align-items: center; gap: var(--cds-spacing-03, .5rem); }
.ca-attack-nav-btn { inline-size: 2rem; block-size: 2rem; border-radius: 50%; border: 1px solid var(--cds-border-strong-01); background: var(--cds-layer-02); color: var(--cds-text-primary); cursor: pointer; font-size: 1rem; }
.ca-attack-nav-btn:hover { background: var(--cds-layer-hover-02); }
.ca-attack-nav-btn:focus-visible, .ca-attack-dot:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.ca-attack-progress { font-family: "IBM Plex Mono", monospace; font-size: .75rem; color: var(--cds-text-secondary); min-inline-size: 3rem; text-align: center; }
.ca-attack-slide { display: none; }
.ca-attack-slide.ca-active { display: block; }
.ca-attack-card-img { padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem); }
.ca-attack-svg { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1200 / 760; pointer-events: none; }
.ca-attack-card-body { padding: 0 var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem); display: flex; flex-direction: column; gap: var(--cds-spacing-04, .75rem); }
.ca-attack-desc, .ca-attack-neuro { margin: 0; line-height: 1.55; color: var(--cds-text-secondary); }
.ca-attack-neuro { padding-block-start: var(--cds-spacing-04, .75rem); border-block-start: 1px solid var(--cds-border-subtle-01); }
.ca-attack-neuro strong { color: var(--cds-text-primary); }
.ca-attack-dots { display: flex; justify-content: center; gap: var(--cds-spacing-03, .5rem); padding-block-end: var(--cds-spacing-05, 1rem); }
.ca-attack-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; border: 0; padding: 0; background: var(--cds-border-strong-01); cursor: pointer; }
.ca-attack-dot.ca-active { background: var(--cds-link-primary); transform: scale(1.3); }

/* api-devops steps */
.ca-step-list { display: flex; flex-direction: column; gap: var(--cds-spacing-05, 1rem); }
.ca-step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--cds-spacing-05, 1rem); padding: var(--cds-spacing-06, 1.5rem); background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); }
.ca-step-num { font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; font-weight: 700; color: var(--cds-link-primary); }
.ca-step-title { font-size: 1.25rem; font-weight: 600; margin-block-end: var(--cds-spacing-03, .5rem); }
.ca-step-desc { margin: 0 0 var(--cds-spacing-04, .75rem); color: var(--cds-text-secondary); line-height: 1.5; }
.ca-code-block { font-family: "IBM Plex Mono", monospace; font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cds-layer-02); border: 1px solid var(--cds-border-subtle-02); padding: var(--cds-spacing-05, 1rem); line-height: 1.6; }
.ca-code-block .ca-cm { color: var(--cds-text-helper); }

/* gaming benchmarks */
.ca-bench-bar-row { display: grid; grid-template-columns: 1fr; gap: var(--cds-spacing-02, .25rem); padding-block: var(--cds-spacing-04, .75rem); border-block-end: 1px solid var(--cds-border-subtle-01); align-items: center; }
.ca-bench-bar-row:last-child { border-block-end: 0; }
.ca-bench-label, .ca-bench-val { font-family: "IBM Plex Mono", monospace; font-size: .75rem; color: var(--cds-text-secondary); }
.ca-bench-track { background: var(--cds-layer-02); block-size: 1.125rem; overflow: hidden; }
.ca-bench-fill { block-size: 100%; background: var(--cds-link-primary); opacity: .55; }
.ca-bench-fill.ca-best { opacity: 1; }
.ca-bench-bar-row:nth-child(1) .ca-bench-fill { inline-size: 78%; }
.ca-bench-bar-row:nth-child(2) .ca-bench-fill { inline-size: 81%; }
.ca-bench-bar-row:nth-child(3) .ca-bench-fill { inline-size: 81%; }
.ca-bench-bar-row:nth-child(4) .ca-bench-fill { inline-size: 89%; }
.ca-bench-bar-row:nth-child(5) .ca-bench-fill { inline-size: 100%; }
@media (min-width: 42rem) { .ca-bench-bar-row { grid-template-columns: 14rem 1fr 11rem; gap: var(--cds-spacing-05, 1rem); } .ca-bench-val { text-align: end; } }

/* app-protection article */
.ca-article { max-inline-size: 70rem; margin-block-start: var(--cds-spacing-09, 3rem); }
.ca-article h2 { font-size: 1.75rem; font-weight: 400; margin-block: var(--cds-spacing-08, 2.5rem) var(--cds-spacing-04, .75rem); }
.ca-article h3 { font-size: 1.25rem; font-weight: 600; margin-block: var(--cds-spacing-06, 1.5rem) var(--cds-spacing-03, .5rem); }
.ca-article p, .ca-article li { line-height: 1.6; color: var(--cds-text-secondary); font-size: 1.0625rem; }
.ca-article ul, .ca-article ol { padding-inline-start: var(--cds-spacing-06, 1.5rem); }
.ca-article a { color: var(--cds-link-primary); }
.ca-article code { font-family: "IBM Plex Mono", monospace; font-size: .85em; background: var(--cds-layer-02); padding: 0 .25rem; }
.ca-summary { background: var(--cds-layer-01); border-inline-start: 3px solid var(--ca-lime); padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem); }
.ca-summary h2 { margin-block-start: 0; font-size: 1.25rem; font-weight: 600; }
.ca-guide-shots { display: grid; gap: var(--cds-spacing-05, 1rem); margin-block: var(--cds-spacing-05, 1rem); }
.ca-guide-shot { margin: 0; background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); padding: var(--cds-spacing-04, .75rem); }
.ca-guide-shot img { display: block; inline-size: 100%; block-size: auto; }
.ca-guide-shot figcaption { font-size: .875rem; color: var(--cds-text-secondary); margin-block-start: var(--cds-spacing-03, .5rem); }
.ca-article-table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; margin-block: var(--cds-spacing-05, 1rem); }
.ca-article-table th, .ca-article-table td { text-align: start; padding: var(--cds-spacing-04, .75rem); border-block-end: 1px solid var(--cds-border-subtle-01); vertical-align: top; }
.ca-article-table thead th { background: var(--cds-layer-01); }
.ca-canvas-caption { text-align: center; font-size: .75rem; color: var(--cds-text-secondary); margin-block-start: var(--cds-spacing-03, .5rem); font-family: "IBM Plex Mono", monospace; }
.ca-app-protection-title { overflow-wrap: anywhere; }

/* faq */
.ca-faq-layout { display: grid; grid-template-columns: 1fr; gap: var(--cds-spacing-07, 2rem); }
.ca-faq-sidebar { display: none; }
@media (min-width: 66rem) {
  .ca-faq-layout { grid-template-columns: 12rem 1fr; gap: var(--cds-spacing-09, 3rem); }
  .ca-faq-sidebar { display: flex; flex-direction: column; position: sticky; top: 4rem; align-self: start; }
}
.ca-faq-sidebar a { display: block; padding: var(--cds-spacing-03, .5rem) var(--cds-spacing-04, .75rem); border-inline-start: 2px solid var(--cds-border-subtle-01); color: var(--cds-text-secondary); text-decoration: none; font-size: .875rem; }
.ca-faq-sidebar a:hover { color: var(--cds-text-primary); border-color: var(--ca-lime); }
.ca-faq-sidebar a[aria-current="location"] { color: var(--cds-text-primary); font-weight: 700; border-color: var(--ca-lime); }
.ca-obfusc-email { unicode-bidi: bidi-override; }
.ca-flow-diagram { align-self: start; }
.ca-summary ul { list-style: disc; }
.ca-cols-2 > div:not([class]) { display: flex; flex-direction: column; gap: var(--cds-spacing-05, 1rem); }