/* ============================================================
   CS-v2_AI-Journey: Direction A, Aligned rails
   Skinned to the live CodeScene design language:
   - 999px pills (mih-hotspot), cyan glow + gradient-border CTAs
     (mih-isolated-btn), glassmorphic phase cards (mih-card).
   - Scoped under .cs-aij. Font = MatterSQ (theme-loaded).
   - Desktop: CSS subgrid aligns the rails across glass cards.
     Mobile (<=767px): each phase stacks as a card.
   ============================================================ */

.cs-aij {
  --aij-accent:        #5ED5D9;
  --aij-accent-2:      #2EEDEF;
  --aij-accent-hover:  #79DEE2;
  --aij-on-accent:     #021025;
  --aij-navy:          #162C53;
  --aij-teal:          #398598;
  --aij-ink:           #ffffff;
  --aij-ink-2:         #B8BABC;
  --aij-ink-3:         rgba(255,255,255,0.48);
  --aij-card:          rgba(255,255,255,0.05);
  --aij-card-line:     rgba(255,255,255,0.12);
  --aij-row-line:      rgba(255,255,255,0.09);
  --aij-font:          'MatterSQ', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --aij-label-w:       164px;
  --aij-gap:           20px;
  --aij-pad-x:         22px;
  --aij-radius-sm:     6px;
  --aij-radius-md:     12px;
  --aij-radius-lg:     16px;
  --aij-radius-pill:   999px;
  --aij-ease:          cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  width: 100%;
  background: var(--cs-aij-bg, var(--aij-navy));
  color: var(--aij-ink);
  font-family: var(--aij-font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.cs-aij *, .cs-aij *::before, .cs-aij *::after { box-sizing: border-box; }

/* background layers (theme convention): solid color is the section background;
   optional image sits at the very back, optional gradient overlays on top, the
   decorative glow rides between, and the content is above all of them. */
.cs-aij__bg-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cs-aij__bg-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cs-aij__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(94,213,217,0.12), transparent 55%),
    radial-gradient(90% 80% at 6% 110%, rgba(57,133,152,0.14), transparent 60%);
}
.cs-aij__gradient { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cs-aij__inner {
  position: relative; z-index: 3;
  max-width: var(--cs-aij-max, 1200px);
  margin: 0 auto;
  padding: var(--cs-aij-pt, 96px) 24px var(--cs-aij-pb, 96px);
}

/* ---------- header ---------- */
.cs-aij-head { margin-bottom: 48px; }
/* full-width eyebrow on top, unified tag style (matches CS-v2_Customers .cs-cust-tag) */
/* 1:1 with CS-v2_Customers .cs-cust-tag (font, weight, color, spacing, hover glow) */
.cs-aij-eyebrow {
  font-size: 22px; font-weight: 700; margin-bottom: 20px; display: inline-block;
  text-transform: none; letter-spacing: normal; color: var(--aij-accent);
  transition: text-shadow 0.3s ease, color 0.3s ease;
}
.cs-aij-eyebrow:hover { text-shadow: 0 0 10px var(--aij-accent), 0 0 20px var(--aij-accent); cursor: default; }
/* title (left) + sub & 9.5 box (right) sit in the row below the eyebrow */
.cs-aij-head__row {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: center;
}
/* heading off: collapse to one column so the rule chip (in the aside) flows to the left
   instead of sitting in the right column. */
.cs-aij-head--no-heading .cs-aij-head__row { grid-template-columns: 1fr; gap: 0; }
.cs-aij-title {
  font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -0.015em;
  color: #fff; margin: 0; max-width: 640px;
}
.cs-aij-head__aside { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
/* when Scoring position = Below headline, the chip sits under the title in the lead column */
.cs-aij-head__lead .cs-aij-rulechip { margin-top: 24px; }
.cs-aij-sub { font-size: 17px; line-height: 27px; color: var(--aij-ink-2); margin: 0; font-weight: 400; }

.cs-aij-rulechip {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 24px 10px 10px; border-radius: var(--aij-radius-md); border: 0;
  background: linear-gradient(90deg, rgba(94,213,217,0.13) 0%, rgba(94,213,217,0) 100%);
}
/* border that fades out left -> right (matches the fading fill, rounded corners) */
.cs-aij-rulechip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(94,213,217,0.5) 0%, rgba(94,213,217,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
}
.cs-aij-rulechip__num {
  position: relative;
  font-size: 22px; line-height: 1; font-weight: 700; color: var(--aij-on-accent);
  background: var(--aij-accent); border-radius: 8px;
  width: 54px; height: 54px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
/* The glow is a STATIC box-shadow on a pseudo-element whose OPACITY we pulse, so the
   compositor animates it without repainting (same pattern the footer CTAs use). The
   previous animated box-shadow repainted every frame, which forced the phase columns'
   backdrop-filter to re-rasterize and made a seam flicker on the 3rd column in sync
   with this pulse. Opacity-only keeps the blur intact and stops the flicker. */
.cs-aij-rulechip__num::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 18px rgba(94,213,217,0.65);
  opacity: 0; will-change: opacity;
  animation: cs-aij-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes cs-aij-badge-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.cs-aij-rulechip__txt b { display: block; color: #fff; font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cs-aij-rulechip__txt span { display: block; color: var(--aij-ink-3); font-size: 12px; line-height: 15px; }

/* ---------- aligned-rails matrix (subgrid) ---------- */
.cs-aij-matrix {
  display: grid;
  /* minmax(0, 1fr) instead of 1fr so a column can never be widened past its share by
     unbreakable content: every phase column stays exactly equal. */
  grid-template-columns: var(--aij-label-w) repeat(var(--cs-aij-cols, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--cs-aij-rows, 8), auto);
  column-gap: var(--aij-gap);
}
.cs-aij-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; position: relative; z-index: 1; }
.cs-aij-col > * { position: relative; z-index: 1; }
/* gutter at column 1; phase columns are placed explicitly via inline grid-column
   (set in module.html) so the bands can span 1/-1 without forcing implicit tracks */
.cs-aij-col--labels { grid-column: 1; }

/* full-width colored bands sent BEHIND the columns. Rendered as real elements in
   module.html, one per colored row, each placed at the row's grid-row via inline
   style so the band TRAVELS with the row wherever it is dragged. */
.cs-aij-band {
  grid-column: 1 / -1; z-index: 0; pointer-events: none;
  border-radius: var(--aij-radius-lg);
}
.cs-aij-band--rule { background: rgba(94,213,217,0.08); border: 1px solid rgba(94,213,217,0.26); }
/* WRAP mode only: the phase-3 card provides the right edge, so drop the band's right
   border + right corners (they coincided with the card edge and bled cyan through the
   translucent card, doubling the rule row's right border). In FLAT mode there are no
   cards, so the band keeps its full border + radius as the visible box. */
.cs-aij:not(.cs-aij--flat) .cs-aij-band--rule { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Risk has no full-width band: the red treatment is per-column only (see .cs-aij-cell--risk). */

/* glass card behind each phase column (does not affect subgrid alignment) */
.cs-aij-col--phase::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border: 1px solid var(--aij-card-line); border-radius: var(--aij-radius-lg);
  background: var(--aij-card);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color .3s var(--aij-ease), box-shadow .3s var(--aij-ease);
}
.cs-aij-col--phase:hover::before {
  border-color: rgba(94,213,217,0.45);
  box-shadow: 0 0 26px rgba(94,213,217,0.18), 0 16px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* When the Code Health (9.5) row is the LAST visible row it has no row below it, so the
   card's rounded bottom corners sit directly on the 9.5 band and clash with the band's own
   framing (when 9.5 is first, the header sits above it so the top corners stay clean). Square
   the card bottoms so the 9.5 row caps the column flush. The 9.5 band keeps its own rounded
   bottom-left corner in the gutter. Set by the cs-aij--ch-last class (added in module.html
   when the last shown row is code_health). Wrap mode only, flat has no cards. */
.cs-aij--ch-last:not(.cs-aij--flat) .cs-aij-col--phase::before {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* Whatever row ends up LAST sits on the card's rounded bottom edge: drop its bottom divider
   and round its own bottom corners to the card, so a tinted row (Risk) follows the curve
   instead of cutting a square red line across the corner. The 9.5 (rule) row is the only
   exception: it is a full cyan box, so when it is last cs-aij--ch-last squares the whole card
   instead (handled above). Gutter labels lose their bottom border too. */
/* "last VISIBLE cell" = a non-hidden cell with no non-hidden cell after it (so a hidden last
   row does not steal the rounding from the real bottom row). Pure CSS via :has, no row order
   baked in. The 9.5 (rule) row is excluded: it squares the card via cs-aij--ch-last instead. */
.cs-aij:not(.cs-aij--flat) .cs-aij-col--phase > .cs-aij-cell:not(.cs-aij-hidden):not(.cs-aij-cell--rule):not(:has(~ .cs-aij-cell:not(.cs-aij-hidden))) {
  border-bottom: 0;
  border-bottom-left-radius: var(--aij-radius-lg);
  border-bottom-right-radius: var(--aij-radius-lg);
}
.cs-aij:not(.cs-aij--flat) .cs-aij-col--labels > .cs-aij-lcell:not(.cs-aij-hidden):not(:has(~ .cs-aij-lcell:not(.cs-aij-hidden))) { border-bottom: 0; }

/* flat layout (toggle "Wrap phase columns in cards" off): no per-column glass
   card, no full-width 9.5 box. The colored rows (code health + risk) keep the
   SAME full-width top/bottom divider lines as every other row; the colored field
   is wrapped as a card INSIDE the row band (inset by the cell padding). */
.cs-aij--flat .cs-aij-col--phase::before { display: none; }
.cs-aij--flat .cs-aij-band { display: none; }
/* flat mode keeps the 9.5 row's full-width blue ROW border, just no background
   fill, so the rule row still reads as the framed hero row without card wraps. */
.cs-aij--flat .cs-aij-band--rule { display: block; background: none; }

/* code-health row in flat mode: framed ONLY by the blue band border. No grey
   top/bottom dividers and no gap bridges (same framing as wrap mode); the cyan
   emphasis lives in the inner .cs-aij-chm card. */
.cs-aij--flat .cs-aij-cell--rule {
  background: none !important;  /* defeat the per-column .cs-aij-col--p* rule gradients so ONLY the inner card is colored, like Risk */
  border: 0;
}
.cs-aij--flat .cs-aij-cell--rule::after { display: none; }
.cs-aij--flat .cs-aij-lcell--rule { border-top: 0; }
.cs-aij--flat .cs-aij-lcell--rule::after { display: none; }
.cs-aij--flat .cs-aij-lcell--rule + .cs-aij-lcell { border-top: 0; }
.cs-aij--flat .cs-aij-lcell--rule + .cs-aij-lcell::after { display: none; }
.cs-aij--flat .cs-aij-cell--rule + .cs-aij-cell { border-top: 0; }
.cs-aij--flat .cs-aij-cell--rule + .cs-aij-cell::after { display: none; }
.cs-aij--flat .cs-aij-cell--rule .cs-aij-chm {
  border: 1px solid rgba(94,213,217,0.30); border-radius: var(--aij-radius-md);
  padding: 15px 16px;
}
/* per-column intensity ramp on the flat inner card, matching the wrap rule cells */
.cs-aij--flat .cs-aij-col--p1 .cs-aij-cell--rule .cs-aij-chm { background: linear-gradient(135deg, rgba(94,213,217,0.10), rgba(94,213,217,0.03)); }
.cs-aij--flat .cs-aij-col--p2 .cs-aij-cell--rule .cs-aij-chm { background: linear-gradient(135deg, rgba(94,213,217,0.16), rgba(94,213,217,0.05)); }
.cs-aij--flat .cs-aij-col--p3 .cs-aij-cell--rule .cs-aij-chm { background: linear-gradient(135deg, rgba(94,213,217,0.24), rgba(94,213,217,0.07)); }

/* risk row: same idea, red card inside, full-width dividers restored */
.cs-aij--flat .cs-aij-cell--risk {
  background: none !important; border: 0; border-top: 1px solid var(--aij-row-line);
}
.cs-aij--flat .cs-aij-cell--risk::after { display: block; }
.cs-aij--flat .cs-aij-lcell--risk { border-top: 1px solid var(--aij-row-line); color: var(--aij-ink-3); }
.cs-aij--flat .cs-aij-lcell--risk::after { display: block; }
.cs-aij--flat .cs-aij-lcell--risk + .cs-aij-lcell { border-top: 1px solid var(--aij-row-line); }
.cs-aij--flat .cs-aij-lcell--risk + .cs-aij-lcell::after { display: block; }
.cs-aij--flat .cs-aij-cell--risk + .cs-aij-cell { border-top: 1px solid var(--aij-row-line); }
.cs-aij--flat .cs-aij-cell--risk + .cs-aij-cell::after { display: block; }
/* FLAT counterpart of the risk->9.5 seam fix: the rule above adds a grey divider to the row
   after Risk, but the 9.5 row must stay framed ONLY by its blue band (no grey top line, no gap
   bridge) wherever it lands. Re-suppress that divider on the cells AND the gutter labels. */
.cs-aij--flat .cs-aij-cell--risk + .cs-aij-cell--rule { border-top: 0; }
.cs-aij--flat .cs-aij-cell--risk + .cs-aij-cell--rule::after { display: none; }
.cs-aij--flat .cs-aij-lcell--risk + .cs-aij-lcell--rule { border-top: 0; }
.cs-aij--flat .cs-aij-lcell--risk + .cs-aij-lcell--rule::after { display: none; }
.cs-aij--flat .cs-aij-cell--risk .cs-aij-risk {
  background: linear-gradient(135deg, rgba(244,38,62,0.12), rgba(244,38,62,0.04));
  border: 1px solid rgba(244,38,62,0.45); border-radius: var(--aij-radius-md);
  padding: 13px 15px;
}
/* flat mode: the cells are already equal height (subgrid track), but the inner card sizes
   to its text. Make the card stretch to fill the cell so all cards in a row match height
   even when one phase's copy wraps to fewer lines. */
.cs-aij--flat .cs-aij-cell--rule, .cs-aij--flat .cs-aij-cell--risk { display: flex; flex-direction: column; }
.cs-aij--flat .cs-aij-cell--rule .cs-aij-chm, .cs-aij--flat .cs-aij-cell--risk .cs-aij-risk { flex: 1 1 auto; }

/* left label gutter */
.cs-aij-lcell {
  position: relative;
  display: flex; align-items: flex-start; padding: 24px 12px 0 18px;
  font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--aij-ink-3);
  border-top: 1px solid var(--aij-row-line);
}
.cs-aij-lcell--head { padding: 0; border-top: 0; }

/* card cells: UNIFIED padding on every field inside the columns */
.cs-aij-cell { position: relative; padding: 20px var(--aij-pad-x); border-top: 1px solid var(--aij-row-line); }
.cs-aij-cell--head { padding: 20px var(--aij-pad-x); border-top: 0; }
.cs-aij-cell--rule { padding: 20px var(--aij-pad-x); }

/* bridge each column gap so every row rule is CONTINUOUS across the matrix */
.cs-aij-cell::after, .cs-aij-lcell::after {
  content: ""; position: absolute; top: -1px; right: calc(-1 * var(--aij-gap));
  width: var(--aij-gap); height: 0; border-top: 1px solid var(--aij-row-line); pointer-events: none;
}
.cs-aij-cell--head::after, .cs-aij-lcell--head::after,
.cs-aij-col--phase:last-child .cs-aij-cell::after { display: none; }

/* a row with "Show this row" turned off: stays in the subgrid (so track positions
   and the band's grid-row keep aligning) but collapses to zero height and goes
   invisible, so the page reads as if the row is not there. */
.cs-aij-hidden { padding: 0 !important; border: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; visibility: hidden !important; }
.cs-aij-hidden::after, .cs-aij-hidden::before { display: none !important; }

/* THE 9.5 RULE label sits on top of the background box. The rule cells carry no
   borders and no divider lines (the box behind is the only frame), and the
   columns keep their per-phase gradient that intensifies left -> right. */
.cs-aij-lcell--rule { align-items: flex-start; color: var(--aij-accent); border-top: 0; }
.cs-aij-cell--rule { border-top: 1px solid rgba(94,213,217,0.30); border-bottom: 1px solid rgba(94,213,217,0.30); }
.cs-aij-lcell--rule::after, .cs-aij-cell--rule::after { display: none; }
.cs-aij-col--p1 .cs-aij-cell--rule { background: linear-gradient(90deg, rgba(94,213,217,0.10), rgba(94,213,217,0.03)); }
.cs-aij-col--p2 .cs-aij-cell--rule { background: linear-gradient(90deg, rgba(94,213,217,0.16), rgba(94,213,217,0.05)); }
.cs-aij-col--p3 .cs-aij-cell--rule { background: linear-gradient(90deg, rgba(94,213,217,0.24), rgba(94,213,217,0.07)); }
/* remove the divider line directly UNDER the box (the row right after the rule row) */
.cs-aij-lcell--rule + .cs-aij-lcell { border-top: 0; }
.cs-aij-lcell--rule + .cs-aij-lcell::after { display: none; }
.cs-aij-cell--rule + .cs-aij-cell { border-top: 0; }
.cs-aij-cell--rule + .cs-aij-cell::after { display: none; }

.cs-aij-phead__num { font-size: 12px; line-height: 1; font-weight: 700; color: var(--aij-accent); letter-spacing: 1px; text-transform: uppercase; }
.cs-aij-phead__name { font-size: 21px; line-height: 26px; font-weight: 700; color: #fff; margin: 9px 0 6px; }
.cs-aij-phead__tag { font-size: 13px; line-height: 18px; color: var(--aij-ink-2); margin: 0; }

/* Code Health meter */
.cs-aij-chm { display: flex; flex-direction: column; gap: 9px; }
.cs-aij-chm__row { display: flex; align-items: baseline; justify-content: space-between; }
.cs-aij-chm__label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--aij-ink-3); }
.cs-aij-chm__score { font-size: 22px; line-height: 1; font-weight: 700; }
.cs-aij-chm__score small { font-size: 11px; font-weight: 600; color: #fff; margin-left: 2px; }
/* Code Health color tiers. Each tier sets a hue PAIR (--aij-ch solid + --aij-ch-2
   gradient partner) consumed by the score + bar fill below. red / amber / cyan are
   named. "custom" carries the author hex via an inline --aij-ch (set in module.html)
   and derives its dark stop from it. NOTE: only the score + bar are colored here.
   Tinting the whole cell (background + borders) is a separate, parked step. */
.cs-aij-chm--red    { --aij-ch: #FF3B52; --aij-ch-2: #C8001F; } /* vivid deep red -> bright red, dark-to-bright sweep matched to amber/cyan so it reads as a real gradient not a muddy flat */
.cs-aij-chm--amber  { --aij-ch: #FFCD1D; --aij-ch-2: #FF961B; }
.cs-aij-chm--cyan   { --aij-ch: #5ED5D9; --aij-ch-2: #398598; }
.cs-aij-chm--custom { --aij-ch-2: color-mix(in srgb, var(--aij-ch, #5ED5D9) 62%, #02112b); }
.cs-aij-chm__score { color: var(--aij-ch, var(--aij-accent)); }
.cs-aij-chm__track { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.10); }
.cs-aij-chm__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; max-width: 100%;
  background: linear-gradient(90deg, var(--aij-ch-2, var(--aij-teal)), var(--aij-ch, var(--aij-accent))); }
.cs-aij-chm__rule { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px dashed rgba(255,255,255,0.5); }
.cs-aij-chm__guide { font-size: 13px; line-height: 19px; color: var(--aij-ink-2); margin: 2px 0 0; }

.cs-aij-govern { font-size: 14px; line-height: 20px; font-weight: 600; color: #fff; display: block; }

/* purpose list */
.cs-aij-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-aij-plist li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 19px; color: var(--aij-ink-2); }
.cs-aij-plist li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(94,213,217,0.16); box-shadow: inset 0 0 0 1px rgba(94,213,217,0.5);
}
.cs-aij-plist li::after {
  content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 3.5px;
  border-left: 1.6px solid var(--aij-accent); border-bottom: 1.6px solid var(--aij-accent);
  transform: rotate(-45deg); transform-origin: center;
}

/* visually-hidden helper (kept in the SR reading order) */
.cs-aij-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* clickable tool chips -> native 999px pills */
.cs-aij-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-aij-chip {
  display: inline-flex; align-items: center; font-size: 12.5px; line-height: 1; font-weight: 600;
  letter-spacing: 0; padding: 7px 12px; border-radius: 8px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .18s var(--aij-ease), border-color .18s var(--aij-ease), color .18s var(--aij-ease), box-shadow .18s var(--aij-ease);
}
.cs-aij-chip.is-static { cursor: default; }
.cs-aij-chip--dev  { color: #d6f7f8; background: rgba(94,213,217,0.10); border: 1px solid rgba(94,213,217,0.32); }
.cs-aij-chip--dev:hover, .cs-aij-chip--dev:focus-visible  { background: rgba(94,213,217,0.18); border-color: var(--aij-accent); color: #fff; box-shadow: 0 0 16px rgba(94,213,217,0.35); }
.cs-aij-chip--mgmt { color: #d4e3e8; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); }
.cs-aij-chip--mgmt:hover, .cs-aij-chip--mgmt:focus-visible { background: rgba(255,255,255,0.10); border-color: rgba(94,213,217,0.6); color: #fff; box-shadow: 0 0 16px rgba(94,213,217,0.28); }
.cs-aij-chip:focus-visible { outline: none; }

/* risk row: the per-cell top+bottom borders are RED (the red frame on the cells),
   while the BACKGROUND parts of the divider line (the label gutter and the gap
   bridges between cells) stay the standard white 0.09 like every other row. Net
   read: the row line is WHITE across the gutter and gaps, RED on the cells. The row
   right after risk keeps only its CELL top suppressed, so the risk red bottom does
   not double up with a white top on the cells (gutter + gap bridges there stay white). */
.cs-aij-lcell--risk { color: var(--aij-ink-3); }
.cs-aij-cell--risk {
  background: linear-gradient(90deg, rgba(244,38,62,0.14), rgba(244,38,62,0.05));
  border-top: 1px solid rgba(244,38,62,0.32);
  border-bottom: 1px solid rgba(244,38,62,0.32);
}
.cs-aij-cell--risk + .cs-aij-cell { border-top: 0; }
/* When the 9.5 (Code Health) row is dragged DIRECTLY BELOW the Risk row, the rule above
   already removes the 9.5 cyan top border (.cs-aij-cell--risk + .cs-aij-cell), so only the
   risk red bottom border would show at the seam (looks like a stray red line). Mirror the
   working rule->risk case: drop the risk red bottom there and restore the 9.5 cyan top, so
   the seam reads as the 9.5 box frame regardless of row order. */
.cs-aij-cell--risk:has(+ .cs-aij-cell--rule) { border-bottom: 0; }
.cs-aij-cell--risk + .cs-aij-cell--rule { border-top: 1px solid rgba(94,213,217,0.30); }
/* WRAP mode only: the gutter line at the risk/proof boundary uses the risk lcell's
   BORDER-BOTTOM (same y as the phase cells' red border-bottom) instead of the proof
   lcell's border-top, which sat 1px lower and misaligned the gutter divider. In FLAT
   mode the flat rules already draw the proof lcell border-top here, so scoping this to
   wrap mode avoids a doubled line in the gutter. */
.cs-aij:not(.cs-aij--flat) .cs-aij-lcell--risk { border-bottom: 1px solid var(--aij-row-line); }
.cs-aij:not(.cs-aij--flat) .cs-aij-lcell--risk + .cs-aij-lcell { border-top: 0; }
/* gutter counterpart of the risk->9.5 seam fix: when the 9.5 row follows Risk, drop the white
   gutter divider too (the lcell paints over the band, so without this the seam reads white in
   the gutter while the phase cells read cyan). Lets the 9.5 band frame the gutter consistently. */
.cs-aij:not(.cs-aij--flat) .cs-aij-lcell--risk:has(+ .cs-aij-lcell--rule) { border-bottom: 0; }
.cs-aij-risk {
  display: flex; gap: 9px; align-items: flex-start; padding: 0; background: none; border: 0;
}
.cs-aij-risk svg { flex: 0 0 auto; margin-top: 1px; color: #ff8b96; }
.cs-aij-risk p { font-size: 12.5px; line-height: 17px; color: #ffc7cc; margin: 0; }
.cs-aij-risk b { display: block; color: #ff8b96; font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 3px; }

/* customer proof (fills the cell so the attribution can pin to the bottom) */
.cs-aij-cell--proof { display: flex; flex-direction: column; }
.cs-aij-proof { display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* white-space: normal (not nowrap) so the stat number + unit label can wrap when a column
   is narrow. nowrap made the unit label an unbreakable ~215px line, which (because each
   .cs-aij-col is a single-track subgrid) forced EVERY cell in that column to that width and
   overflowed the pinned minmax(0,1fr) card into the gap. The number itself does not break
   ("-38%" has no break opportunity before a digit), so it still reads on one line. */
.cs-aij-proof__stat { font-size: 32px; line-height: 1; font-weight: 700; color: var(--aij-accent); letter-spacing: -0.01em; white-space: normal; }
/* unit text matches the CODE HEALTH label style (uppercase, letter-spaced, muted), same row as the number */
.cs-aij-proof__stat small { font-size: 11px; font-weight: 600; color: var(--aij-ink-3); letter-spacing: 1px; text-transform: uppercase; margin-left: 8px; white-space: normal; }
.cs-aij-proof__quote { font-size: 13.5px; line-height: 19px; font-weight: 500; color: #fff; margin: 8px 0 0; text-wrap: pretty; }
.cs-aij-proof__who { font-size: 11.5px; line-height: 15px; color: var(--aij-ink-3); margin-top: auto; padding-top: 16px; }

/* ---------- footer + buttons (mih-isolated-btn language) ---------- */
.cs-aij-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px 18px; flex-wrap: wrap;
  margin-top: 40px; text-align: center;
}
/* Buttons: copied 1:1 from the Hero (Hotspot-Map) module so they are unified
   with the rest of the site (gradient-border on hover + reactive pulse glow). */
/* mirror the Hero (Hotspot-Map) buttons 1:1 incl. all:unset + !important so the
   theme's global `button, .button` styles can't clobber the 0.3s easing (that
   override is what made these feel instant). Same smoothing as the rest of the site. */
.cs-aij-cta {
  all: unset;
  position: relative !important; box-sizing: border-box !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 11px 16px 12px !important; border-radius: 6px !important; white-space: nowrap !important; cursor: pointer !important;
  font-family: 'MatterSQ', system-ui, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important;
  text-decoration: none !important; box-shadow: none !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, opacity 0.3s ease !important;
}
.cs-aij-cta--accent { background-color: #5ED5D9 !important; color: #021025 !important; border: 1px solid #5ED5D9 !important; }
.cs-aij-cta--accent:hover { box-shadow: 0 0 28px rgba(94, 213, 217, 0.7) !important; filter: brightness(1.08) !important; }
.cs-aij-cta--text {
  background-color: rgba(255, 255, 255, 0.1) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important;
  -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important;
}
.cs-aij-cta--text:hover { border-color: #5ED5D9 !important; background-color: rgba(255, 255, 255, 0.2) !important; opacity: 1 !important; box-shadow: 0 0 28px rgba(94, 213, 217, 0.65) !important; }
/* cyan gradient border on hover */
.cs-aij-cta--accent::before, .cs-aij-cta--text::before {
  content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: 8px;
  background: linear-gradient(135deg, #5ED5D9, #2EEDEF, #5ED5D9) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
  animation: cs-aij-btn-border-run 3s linear infinite; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
}
.cs-aij-cta--accent:hover::before, .cs-aij-cta--text:hover::before { opacity: 1; }
@keyframes cs-aij-btn-border-run { to { background-position: -200% 0; } }
/* reactive glow (always pulsing) */
.cs-aij-cta--accent::after, .cs-aij-cta--text::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; }
.cs-aij-cta--accent::after { box-shadow: 0 0 12px rgba(94, 213, 217, 0.15); opacity: 0.35; animation: cs-aij-btn-primary-glow 2.5s ease-in-out infinite; }
.cs-aij-cta--text::after { box-shadow: 0 0 8px rgba(255, 255, 255, 0.07); opacity: 0.35; animation: cs-aij-btn-secondary-glow 2.5s ease-in-out infinite; }
.cs-aij-cta--accent:hover::after, .cs-aij-cta--text:hover::after { box-shadow: 0 0 28px rgba(94, 213, 217, 0.5); will-change: opacity; animation: cs-aij-btn-glow-hover 1.5s ease-in-out infinite; }
@keyframes cs-aij-btn-primary-glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes cs-aij-btn-secondary-glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes cs-aij-btn-glow-hover { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.cs-aij-cta:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(94,213,217,0.55) !important; }
.cs-aij-note { flex: 0 0 100%; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--aij-ink-3); }

/* ---------- optional read-more dropdown ---------- */
.cs-aij-more { margin-top: 26px; border-top: 1px solid var(--aij-card-line); padding-top: 6px; }
.cs-aij-more__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  background: transparent; border: 0; cursor: pointer; padding: 14px 0; color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 600; text-align: left;
}
.cs-aij-more__trigger:hover, .cs-aij-more__trigger[aria-expanded="true"] { color: var(--aij-accent); }
.cs-aij-more__icon { flex-shrink: 0; transition: transform .3s var(--aij-ease); }
.cs-aij-more__trigger[aria-expanded="true"] .cs-aij-more__icon { transform: rotate(180deg); }
.cs-aij-more__trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(94,213,217,0.45); border-radius: var(--aij-radius-sm); }
.cs-aij-more__panel { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.cs-aij-more__inner { padding: 6px 0 18px; color: var(--aij-ink-2); font-size: 15px; line-height: 24px; }
.cs-aij-more__inner :is(p, ul, ol) { margin: 0 0 12px; }
.cs-aij-more__inner :is(p, ul, ol):last-child { margin-bottom: 0; }
.cs-aij-more__inner a { color: var(--aij-accent); }

/* ---------- shared cursor tooltip (appended to <body> by module.js) ----------
   Matches the site's dark cursor-hint tooltip language. */
#cs-aij-tooltip {
  position: fixed; z-index: 99999; pointer-events: none; max-width: 220px;
  background: rgba(9, 19, 38, 0.97); color: #fff;
  border: 1px solid rgba(94,213,217,0.30); border-radius: 6px; padding: 10px 12px;
  font-family: 'MatterSQ', system-ui, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; line-height: 17px; letter-spacing: -0.01em;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45); opacity: 0; transition: opacity .18s ease;
}

/* ---------- tablet ---------- */
/* tablet/narrow-desktop: tighten the rails so 3 columns fit without clipping the
   phase names (e.g. "Autonomous"). Below 900px we stack instead (see mobile block);
   above 1050px the default rails have room. */
@media (min-width: 900px) and (max-width: 1050px) {
  .cs-aij-matrix { --aij-label-w: 104px; --aij-gap: 14px; --aij-pad-x: 16px; }
  .cs-aij-phead__name { font-size: 19px; line-height: 24px; }
  .cs-aij-title { font-size: 38px; line-height: 44px; }
}

/* ---------- mobile + small tablet: stacked phase cards ----------
   Collapses to stacked cards below 900px: three dense comparison columns need
   ~900px to render without cramping/clipping, so iPad-portrait (768) stacks. */
@media (max-width: 899px) {
  .cs-aij__inner { padding-left: 20px; padding-right: 20px; }
  .cs-aij-head { margin-bottom: 30px; }
  .cs-aij-head__row { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .cs-aij-title { font-size: 31px; line-height: 38px; }

  .cs-aij-matrix { display: flex; flex-direction: column; gap: 18px; }
  .cs-aij-band { display: none; }
  /* flat mode keeps the rule band visible via a later same-specificity rule, so re-suppress it on the stack */
  .cs-aij--flat .cs-aij-band--rule { display: none; }
  .cs-aij-col--labels { display: none; }
  .cs-aij-cell::after { display: none; }
  .cs-aij-col--phase { display: flex; flex-direction: column; }
  .cs-aij-cell { padding: 16px 22px 0; margin-top: 16px; border-top: 1px solid var(--aij-row-line); }
  /* risk cell has its own tint + bottom border, so it needs symmetric bottom
     padding (the base cell is padding-bottom:0, which let text touch the border) */
  .cs-aij-cell--risk { border-top: 1px solid rgba(244,38,62,0.45); padding-bottom: 16px; }
  /* the callout already shows "RISK WITHOUT US", so drop the redundant inline row label */
  .cs-aij-cell--risk .cs-aij-cell__mlabel { display: none; }
  .cs-aij-cell--head { border-top: 0; padding: 24px 22px 4px; margin-top: 0; }
  /* rule strip on mobile: simple cyan tint, no desktop band frame */
  .cs-aij-cell--rule { background: rgba(94,213,217,0.10); border: 0; border-radius: 0; margin-top: 16px; padding: 16px 22px; }
  .cs-aij-col--phase:last-child .cs-aij-cell--rule { border: 0; border-radius: 0; }
  .cs-aij-cell--proof { padding-bottom: 24px; }
  .cs-aij-cell__mlabel {
    position: static; width: auto; height: auto; margin: 0 0 10px; padding: 0;
    clip: auto; overflow: visible; white-space: normal; display: block;
    font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--aij-ink-3);
  }
  .cs-aij-cell--head .cs-aij-cell__mlabel { display: none; }
}

/* sr-only labels are hidden on the grid layout, shown inline on the stacked layout (above) */
@media (min-width: 900px) {
  .cs-aij-cell__mlabel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- fallback for browsers without subgrid ---------- */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .cs-aij-matrix { display: grid; grid-template-columns: repeat(var(--cs-aij-cols, 3), minmax(0, 1fr)); column-gap: var(--aij-gap); row-gap: 0; }
    .cs-aij-band { display: none; }
    .cs-aij-col--labels { display: none; }
    /* drop the inline grid-column (set for the subgrid layout's label gutter) so the
       3 phase columns auto-flow into this gutter-less fallback grid */
    .cs-aij-col--phase { display: flex; flex-direction: column; grid-column: auto !important; }
    .cs-aij-cell__mlabel {
      position: static; width: auto; height: auto; margin: 0 0 8px; padding: 0;
      clip: auto; overflow: visible; white-space: normal; display: block;
      font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--aij-ink-3);
    }
    .cs-aij-cell--head .cs-aij-cell__mlabel { display: none; }
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cs-aij *, #cs-aij-tooltip { transition: none !important; animation: none !important; }
}