/* ============================================================
   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.3fr 1fr; gap: 48px;
  align-items: end; 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; text-wrap: balance;
}
.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 {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px; border-radius: var(--aij-radius-pill);
  background: rgba(94,213,217,0.10); border: 1px solid rgba(94,213,217,0.30);
}
.cs-aij-rulechip__num {
  font-size: 20px; line-height: 1; font-weight: 700; color: var(--aij-on-accent);
  background: var(--aij-accent); border-radius: var(--aij-radius-pill);
  min-width: 44px; height: 30px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-aij-rulechip__txt b { display: block; color: #fff; font-size: 13px; line-height: 16px; font-weight: 600; }
.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(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; }
/* place every column explicitly so the background box (below) can overlap row 2
   without forcing the columns into implicit tracks */
.cs-aij-col--labels { grid-column: 1; }
.cs-aij-col--phase:nth-child(2) { grid-column: 2; }
.cs-aij-col--phase:nth-child(3) { grid-column: 3; }
.cs-aij-col--phase:nth-child(4) { grid-column: 4; }

/* THE 9.5 RULE highlight: a cyan box sent BEHIND the columns. It spans the rule
   row across the whole matrix; the columns sit on top keeping their gradient. */
.cs-aij-matrix::before {
  content: ""; grid-row: 2; grid-column: 1 / -1; z-index: 0; pointer-events: none;
  background: rgba(94,213,217,0.08);
  border: 1px solid rgba(94,213,217,0.26);
  border-radius: var(--aij-radius-lg);
}

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

/* left label gutter */
.cs-aij-lcell {
  position: relative;
  display: flex; align-items: flex-start; padding: 17px 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: top border draws the row rule inside each column */
.cs-aij-cell { position: relative; padding: 17px var(--aij-pad-x); border-top: 1px solid var(--aij-row-line); }
.cs-aij-cell--head { padding: 26px var(--aij-pad-x) 18px; border-top: 0; }
.cs-aij-cell--rule { padding: 16px 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: center; color: var(--aij-accent); border-top: 0; }
.cs-aij-cell--rule { border-top: 0; }
.cs-aij-lcell--rule::after, .cs-aij-cell--rule::after { display: none; }
.cs-aij-col--phase:nth-child(2) .cs-aij-cell--rule { background: linear-gradient(90deg, rgba(94,213,217,0.10), rgba(94,213,217,0.03)); }
.cs-aij-col--phase:nth-child(3) .cs-aij-cell--rule { background: linear-gradient(90deg, rgba(94,213,217,0.16), rgba(94,213,217,0.05)); }
.cs-aij-col--phase:nth-child(4) .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-cell--proof { padding-bottom: 26px; }

.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: 12px; font-weight: 600; color: var(--aij-ink-3); 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: full-width red strip across the card (mirrors the 9.5 rule strip) */
.cs-aij-cell--risk { background: linear-gradient(90deg, rgba(244,38,62,0.16), rgba(244,38,62,0.05)); }
.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: 6px 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: 12px; }

/* ---------- 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;
}
.cs-aij-cta {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px 12px; border-radius: var(--aij-radius-sm);
  font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none;
  transition: background-color .4s var(--aij-ease), border-color .4s var(--aij-ease), box-shadow .4s var(--aij-ease), filter .4s var(--aij-ease);
}
.cs-aij-cta--accent { background: var(--aij-accent); color: var(--aij-on-accent); border: 1px solid var(--aij-accent); }
.cs-aij-cta--accent:hover { box-shadow: 0 0 28px rgba(94,213,217,0.7); filter: brightness(1.08); }
.cs-aij-cta--text {
  color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.30);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.cs-aij-cta--text:hover { border-color: var(--aij-accent); background: rgba(255,255,255,0.18); box-shadow: 0 0 24px rgba(94,213,217,0.5); }
/* animated gradient border (accent CTA, on hover) */
.cs-aij-cta--accent::before {
  content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: 8px;
  background: linear-gradient(135deg, var(--aij-accent), var(--aij-accent-2), var(--aij-accent)) 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;
  opacity: 0; transition: opacity .4s var(--aij-ease); animation: cs-aij-btn-border 3s linear infinite;
}
.cs-aij-cta--accent:hover::before { opacity: 1; }
@keyframes cs-aij-btn-border { to { background-position: -200% 0; } }
.cs-aij-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(94,213,217,0.55); }
.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-matrix::before { 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--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-matrix::before { display: none; }
    .cs-aij-col--labels { display: none; }
    .cs-aij-col--phase { display: flex; flex-direction: column; }
    .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; }
}