/* CloudArmour × IBM Carbon — brand tokens + a few type/spacing helpers.
 * Carbon itself is loaded from the CDN; this file only (1) maps the CloudArmour lime
 * onto Carbon's theme tokens and (2) adds the handful of helpers Carbon's CSS doesn't ship
 * (type scale classes, section spacing). No component styling lives here. */

:root{--cds-spacing-01:.125rem;--cds-spacing-02:.25rem;--cds-spacing-03:.5rem;--cds-spacing-04:.75rem;--cds-spacing-05:1rem;--cds-spacing-06:1.5rem;--cds-spacing-07:2rem;--cds-spacing-08:2.5rem;--cds-spacing-09:3rem;--cds-spacing-10:4rem;--cds-spacing-11:5rem;--cds-spacing-12:6rem;--cds-spacing-13:10rem}
/* ── Brand tokens (Carbon's supported theming mechanism) ───────────────── */
:root, .cds--white, .cds--g10 {
  --ca-lime: #abd64d;
  --ca-lime-hover: #9bc63d;
  --ca-lime-ink: #546e0d;        /* lime readable on light backgrounds */
  --cds-button-primary: var(--ca-lime);
  --cds-button-primary-hover: var(--ca-lime-hover);
  --cds-button-primary-active: #8bb533;
  --cds-text-on-color: #161616;
  --cds-link-primary: var(--ca-lime-ink);
  --cds-link-primary-hover: #3a4d08;
  --cds-interactive: var(--ca-lime-ink);
  --cds-focus: var(--ca-lime-ink);
  --cds-button-tertiary: var(--ca-lime-ink);
  --cds-button-tertiary-hover: var(--ca-lime-ink);
}
.cds--g90, .cds--g100 {
  --cds-button-primary: var(--ca-lime);
  --cds-button-primary-hover: #bfe66a;
  --cds-button-primary-active: #8bb533;
  --cds-text-on-color: #161616;
  --cds-link-primary: var(--ca-lime);
  --cds-link-primary-hover: #d7fb98;
  --cds-interactive: var(--ca-lime);
  --cds-focus: var(--ca-lime);
  --cds-button-tertiary: var(--ca-lime);
  --cds-button-tertiary-hover: var(--ca-lime);
  --cds-button-tertiary-active: var(--ca-lime);
}
.cds--btn--tertiary:hover, .cds--btn--tertiary:active { color: #161616; }

/* ── Page frame ────────────────────────────────────────────────────────── */
body { padding-block-start: 3rem; }              /* fixed UI Shell header height */
.ca-section { padding-block: var(--cds-spacing-10, 5rem); }
.ca-section--alt { background: var(--cds-layer-01); }
.ca-section--alt .cds--tile { background-color: var(--cds-layer-02); border: 1px solid var(--cds-border-subtle-01); }
.ca-head { margin-block-end: var(--cds-spacing-07, 2rem); }

/* ── Type scale (Carbon productive/expressive tokens) ──────────────────── */
.ca-eyebrow { font-size: .75rem; line-height: 1rem; letter-spacing: .32px; text-transform: uppercase;
  color: var(--cds-text-secondary); font-family: var(--cds-code-01-font-family, "IBM Plex Mono", monospace); margin: 0 0 var(--cds-spacing-04, .75rem); }
.ca-display { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; font-weight: 300; margin: 0; letter-spacing: 0; }
.ca-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; font-weight: 400; margin: 0; }
.ca-h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; margin: 0 0 var(--cds-spacing-03, .5rem); }
.ca-lede { font-size: 1.25rem; line-height: 1.6; color: var(--cds-text-secondary); margin: 0; max-width: 60ch; }
.ca-body { font-size: .875rem; line-height: 1.43; color: var(--cds-text-secondary); margin: 0; }
.ca-accent { color: var(--cds-link-primary); font-style: normal; }
.ca-mono { font-family: "IBM Plex Mono", monospace; font-size: .75rem; color: var(--cds-text-secondary); }
.ca-right { text-align: end; margin-block-start: var(--cds-spacing-05, 1rem); }
.ca-center { text-align: center; }
.ca-mt { margin-block-start: var(--cds-spacing-06, 1.5rem); }
.ca-mb { margin-block-end: var(--cds-spacing-06, 1.5rem); }

/* tiles fill their grid cell */
.cds--tile { display: block; }
.cds--css-grid > div > .cds--tile:only-child { block-size: 100%; }
a.cds--tile--clickable { text-decoration: none; color: inherit; }
.ca-tags { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03, .5rem); margin-block: var(--cds-spacing-05, 1rem); }
.ca-actions { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-05, 1rem); margin-block-start: var(--cds-spacing-06, 1.5rem); }
.ca-tile-accent { border: 1px solid var(--ca-lime); }
.ca-roadrow { align-items: start; row-gap: var(--cds-spacing-05, 1rem); padding-block: var(--cds-spacing-06, 1.5rem); border-block-end: 1px solid var(--cds-border-subtle-01); }
.ca-roadrow:last-child { border-block-end: 0; }

/* hero diagram */
.ca-diagram { inline-size: 100%; block-size: auto; color: var(--cds-text-primary); }

/* header extras */
.cds--header__name img { block-size: 1.5rem; inline-size: auto; display: block; }
.cds--header__menu li.ca-menu-label { padding: var(--cds-spacing-04) var(--cds-spacing-05) var(--cds-spacing-02);
  font-size: .75rem; letter-spacing: .32px; text-transform: uppercase; color: var(--cds-text-helper); }
.cds--header__menu { max-block-size: calc(100vh - 4rem); overflow-y: auto; min-inline-size: 18rem; }
.ca-header-cta { align-self: center; margin-block: auto; margin-inline-end: var(--cds-spacing-03); }
.cds--header__action { display: inline-flex; align-items: center; justify-content: center; }
.cds--css-grid { padding-inline: max(var(--cds-grid-margin), 1rem); }
.ca-cols-2, .ca-cols-3, .ca-cols-4 { padding-inline: 0 !important; }
.ca-theme-icon { fill: currentColor; }

/* cookie banner */
.ca-cookie { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 9000; background: var(--cds-layer-02);
  border-block-start: 1px solid var(--cds-border-strong-01); padding: 1rem 1.5rem;
  display: flex; gap: var(--cds-spacing-05); align-items: center; flex-wrap: wrap; justify-content: space-between; }
.ca-cookie p { margin: 0; flex: 1 1 28rem; font-size: .875rem; }

/* footer */
.ca-footer { background: var(--cds-layer-01); border-block-start: 1px solid var(--cds-border-subtle-01); padding-block: var(--cds-spacing-09, 4rem) var(--cds-spacing-06); }
.ca-footer .cds--css-grid > div:first-child p { max-inline-size: 25rem; }
@media (min-width: 66rem) {
  .ca-footer .cds--css-grid > div:first-child { grid-column: span 5; }
  .ca-footer .cds--css-grid > div:nth-child(2), .ca-footer .cds--css-grid > div:nth-child(3) { grid-column: span 4; }
  .ca-footer .cds--css-grid > div:nth-child(4) { grid-column: span 3; }
}
.ca-footer h2 { font-size: .875rem; font-weight: 600; margin: 0 0 var(--cds-spacing-04); }
.ca-footer ul { list-style: none; margin: 0; padding: 0; }
.ca-footer li { margin-block-end: var(--cds-spacing-03); font-size: .875rem; }
.ca-footer-bottom { margin-block-start: var(--cds-spacing-07); padding-block-start: var(--cds-spacing-05); border-block-start: 1px solid var(--cds-border-subtle-01);
  display: flex; flex-wrap: wrap; gap: var(--cds-spacing-05); align-items: center; justify-content: space-between; font-size: .75rem; color: var(--cds-text-secondary); }
.ca-footer-bottom svg { fill: currentColor; }

/* comparison table: struck-through "old" column */
.ca-old { color: var(--cds-text-helper); text-decoration: line-through; }

/* equal-column card rows built on Carbon's css-grid (column count via Carbon's own token) */
.ca-cols-2, .ca-cols-3, .ca-cols-4 { --cds-grid-columns: 1; padding-inline: 0; gap: 1.5rem; grid-column: 1 / -1; }
@media (min-width: 42rem) { .ca-cols-2 { --cds-grid-columns: 2; } .ca-cols-3 { --cds-grid-columns: 3; } .ca-cols-4 { --cds-grid-columns: 2; } }
@media (min-width: 66rem) { .ca-cols-4 { --cds-grid-columns: 4; } }
.ca-span-all { grid-column: 1 / -1; }
.ca-actions--flush { margin-block-start: 0; }
.ca-actions--center { justify-content: center; }
.ca-auto { margin-inline: auto; }
.ca-footer-logo { block-size: 1.75rem; }

/* Typeface: Gentium Book Plus for everything except mono labels and the diagram */
:root { --ca-font: "Gentium Book Plus", Georgia, serif; }
body, body *:not(svg *) { font-family: var(--ca-font); }
.ca-eyebrow, .ca-mono { font-family: "IBM Plex Mono", monospace; }
.ca-body { font-size: 1rem; }
@media (min-width: 66rem) { .cds--header__menu-toggle { display: none; } }

/* ── Shared page patterns (codemod targets) ────────────────────────────── */
.ca-wrap { max-inline-size: 99rem; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }
.ca-page-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.ca-head-row { display: flex; flex-direction: column; gap: 1.25rem; margin-block-end: 2.5rem; max-inline-size: 57.5rem; }
.ca-hero-split { display: grid; grid-template-columns: 1fr; gap: var(--cds-spacing-07); align-items: center; }
@media (min-width: 66rem) { .ca-hero-split { grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-10); } }
.ca-diagram-tile { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; background: var(--cds-layer-02); border: 1px solid var(--cds-border-subtle-01); }
.ca-diagram-tile svg { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; color: var(--cds-text-primary); }
.ca-display em, .ca-h2 em, .ca-h3 em { color: var(--cds-link-primary); font-style: normal; }
.ca-ours { font-weight: 700; color: var(--cds-text-primary); }
.cds--data-table .ca-old, .ca-old { color: var(--cds-text-helper); text-decoration: line-through; }
.cds--data-table-content { overflow-x: auto; margin-block-end: var(--cds-spacing-05); }
.cds--tile.cds--tile--clickable { text-decoration: none; }
.cds--tag { margin: 0; }
.cds--breadcrumb { margin-block-end: var(--cds-spacing-05); }
.cds--accordion { margin-block-end: 2rem; }
.ca-callout { border-inline-start: 3px solid var(--ca-lime); background: var(--cds-layer-01); padding: var(--cds-spacing-05); }
.ca-faq-group { scroll-margin-block-start: 4rem; margin-block-end: var(--cds-spacing-09); }
.ca-small { font-size: .875rem; }
.ca-muted { color: var(--cds-text-secondary); }
.ca-soft { color: var(--cds-text-secondary); }
.ca-flex { display: flex; } .ca-col { flex-direction: column; } .ca-wrap-flex { flex-wrap: wrap; }
.ca-items-center { align-items: center; } .ca-justify-center { justify-content: center; } .ca-justify-between { justify-content: space-between; }
.ca-mt-auto { margin-block-start: auto; } .ca-m0 { margin: 0; }
.ca-mt-1 { margin-block-start: .5rem; } .ca-mt-2 { margin-block-start: 1rem; } .ca-mt-3 { margin-block-start: 1.5rem; }
.ca-mt-4 { margin-block-start: 2rem; } .ca-mt-5 { margin-block-start: 2.5rem; } .ca-mt-6 { margin-block-start: 3rem; }
.ca-mb-1 { margin-block-end: .5rem; } .ca-mb-2 { margin-block-end: 1rem; } .ca-mb-4 { margin-block-end: 2rem; } .ca-mb-5 { margin-block-end: 2.5rem; }
.ca-gap-1 { gap: .5rem; } .ca-gap-2 { gap: .75rem; } .ca-gap-3 { gap: 1.5rem; } .ca-gap-5 { gap: 2.5rem; } .ca-py-4 { padding-block: 2rem; }
.ca-wrap.ca-center, .ca-center.ca-flex { align-items: center; }

/* Page background: faint square grid (as on the original site) */
body {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--cds-border-subtle-01) 18%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--cds-border-subtle-01) 18%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  background-attachment: fixed;
}
.ca-section--alt { background-color: color-mix(in srgb, var(--cds-layer-01) 85%, transparent); }

/* ── Mega menu (built on Carbon header; Carbon's plain CSS has no multi-column menu) ── */
.cds--header__submenu.ca-has-mega { position: static; }
.ca-mega { display: none; position: fixed; inset-inline: 0; inset-block-start: 3rem; z-index: 8000;
  background: var(--cds-layer-01); border-block: 1px solid var(--cds-border-subtle-01);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .35); max-block-size: calc(100vh - 3rem); overflow-y: auto; }
.cds--header__menu-title[aria-expanded="true"] + .ca-mega { display: block; }
.cds--header__menu-title[aria-expanded="true"] .cds--header__menu-arrow { transform: rotate(180deg); }
.ca-mega-inner { display: flex; justify-content: center; align-items: stretch; max-inline-size: 80rem; margin-inline: auto; padding: 2rem 1rem; }
.ca-mega-col { flex: 1 1 15rem; max-inline-size: 18rem; display: flex; flex-direction: column; gap: 2px; padding-inline: .25rem; }
.ca-mega-col + .ca-mega-col { border-inline-start: 1px solid var(--cds-border-subtle-01); margin-inline-start: .5rem; padding-inline-start: 1rem; }
.ca-mega-heading { margin: 0; padding: .5rem .75rem .375rem; font-family: "IBM Plex Mono", monospace; font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cds-text-helper); }
.ca-mega-sub { margin-block-start: .625rem; padding-block-start: .75rem; border-block-start: 1px solid var(--cds-border-subtle-01); }
.ca-mega-sub .ca-mega-heading { padding-block-start: 0; }
.ca-mega-item { display: flex; align-items: flex-start; gap: .6875rem; padding: .5625rem .75rem; color: var(--cds-text-secondary); text-decoration: none; transition: background-color .12s, color .12s; }
.ca-mega-item:hover, .ca-mega-item--current { background: var(--cds-layer-hover-01); color: var(--cds-text-primary); text-decoration: none; }
.ca-mega-dot { flex: 0 0 .4375rem; block-size: .4375rem; margin-block-start: .5rem; border-radius: 50%; background: var(--cds-border-strong-01); transition: background-color .12s, transform .12s; }
.ca-mega-item:hover .ca-mega-dot, .ca-mega-item--current .ca-mega-dot { background: var(--cds-link-primary); transform: scale(1.25); }
.ca-mega-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ca-mega-label { font-size: .875rem; font-weight: 600; line-height: 1.25; }
.ca-mega-desc { font-size: .75rem; line-height: 1.4; color: var(--cds-text-helper); }
.ca-mega-item:hover .ca-mega-desc, .ca-mega-item--current .ca-mega-desc { color: var(--cds-text-secondary); }
.ca-lede + .cds--tile, .ca-body + .cds--tile { margin-block-start: 1.5rem; }