/* ============================================================
   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; }

.cs-aij__glow {
  position: absolute; inset: 0; 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__inner {
  position: relative;
  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 {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px;
  align-items: center; margin-bottom: 48px;
}
.cs-aij-eyebrow {
  display: block; font-size: 13px; line-height: 16px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--aij-accent);
}
.cs-aij-title {
  font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -0.015em;
  color: #fff; margin: 18px 0 0; max-width: 640px;
}
.cs-aij-head__aside { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.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 {
  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;
  animation: cs-aij-badge-pulse 2.6s ease-in-out infinite;
}
@keyframes cs-aij-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(94,213,217,0); }
  50% { box-shadow: 0 0 18px rgba(94,213,217,0.65); }
}
.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;
  grid-template-columns: var(--aij-label-w) repeat(var(--cs-aij-cols, 3), 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); }
.cs-aij-band--risk { background: rgba(244,38,62,0.10); border: 1px solid rgba(244,38,62,0.30); }

/* 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);
}

/* 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; }

/* code-health row: restore the normal full-width dividers + gap bridges that the
   9.5-band treatment had suppressed; the cyan card moves to the inner .cs-aij-chm */
.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; border-top: 1px solid var(--aij-row-line);
}
.cs-aij--flat .cs-aij-cell--rule::after { display: block; }
.cs-aij--flat .cs-aij-lcell--rule { border-top: 1px solid var(--aij-row-line); }
.cs-aij--flat .cs-aij-lcell--rule::after { display: block; }
.cs-aij--flat .cs-aij-lcell--rule + .cs-aij-lcell { border-top: 1px solid var(--aij-row-line); }
.cs-aij--flat .cs-aij-lcell--rule + .cs-aij-lcell::after { display: block; }
.cs-aij--flat .cs-aij-cell--rule + .cs-aij-cell { border-top: 1px solid var(--aij-row-line); }
.cs-aij--flat .cs-aij-cell--rule + .cs-aij-cell::after { display: block; }
.cs-aij--flat .cs-aij-cell--rule .cs-aij-chm {
  background: linear-gradient(135deg, rgba(94,213,217,0.13), rgba(94,213,217,0.04));
  border: 1px solid rgba(94,213,217,0.30); border-radius: var(--aij-radius-md);
  padding: 15px 16px;
}

/* 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; }
.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;
}

/* 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; }

/* 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; }
.cs-aij-chm--below .cs-aij-chm__score { color: #FFCD1D; }
.cs-aij-chm--rising .cs-aij-chm__score,
.cs-aij-chm--above .cs-aij-chm__score { color: 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%; }
.cs-aij-chm--below .cs-aij-chm__fill { background: linear-gradient(90deg, #FF961B, #FFCD1D); }
.cs-aij-chm--rising .cs-aij-chm__fill,
.cs-aij-chm--above .cs-aij-chm__fill { background: linear-gradient(90deg, #398598, 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 mirrors the rule row: a red band (.cs-aij-band--risk) frames the full
   width behind; the per-column cells add a red tint + matching red borders, with
   the gap bridges + adjacent dividers suppressed (the band is the only frame). */
.cs-aij-lcell--risk { color: #ff9aa3; border-top: 0; }
.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-lcell--risk::after, .cs-aij-cell--risk::after { display: none; }
.cs-aij-lcell--risk + .cs-aij-lcell { border-top: 0; }
.cs-aij-lcell--risk + .cs-aij-lcell::after { display: none; }
.cs-aij-cell--risk + .cs-aij-cell { border-top: 0; }
.cs-aij-cell--risk + .cs-aij-cell::after { display: none; }
.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; }
.cs-aij-proof__stat { font-size: 32px; line-height: 1; font-weight: 700; color: var(--aij-accent); letter-spacing: -0.01em; white-space: nowrap; }
/* 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: nowrap; }
.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; gap: 8px !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; }
/* trailing chevron: Header glyph, with the Header's translateX hover slide */
.cs-aij-cta__chev { flex: 0 0 auto; transition: transform 0.2s ease !important; }
.cs-aij-cta:hover .cs-aij-cta__chev { transform: translateX(4px); }
/* 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: 12px; line-height: 16px; 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 ---------- */
@media (max-width: 992px) and (min-width: 768px) {
  .cs-aij-matrix { --aij-label-w: 112px; --aij-gap: 14px; --aij-pad-x: 16px; }
  .cs-aij-title { font-size: 38px; line-height: 44px; }
}

/* ---------- mobile: stacked phase cards ---------- */
@media (max-width: 767px) {
  .cs-aij__inner { padding-left: 20px; padding-right: 20px; }
  .cs-aij-head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 30px; }
  .cs-aij-title { font-size: 31px; line-height: 38px; }

  .cs-aij-matrix { display: flex; flex-direction: column; gap: 18px; }
  .cs-aij-band { 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); }
  .cs-aij-cell--risk { border-top: 1px solid rgba(244,38,62,0.45); }
  .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 desktop, shown on mobile (above) */
@media (min-width: 768px) {
  .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: 768px) {
    .cs-aij-matrix { display: grid; grid-template-columns: repeat(var(--cs-aij-cols, 3), 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; }
}