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

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