/* CRAi chunk styles (v2): custom-HTML widget internals only.
   Content sections are native Bricks + ACSS tokens. Regenerate via
   extract-assets.py -> tokenize-crai-css.py -> trim-crai-css.py */
:root {
      --black: var(--neutral);
      --ink: #f9f9f9;
      --purple: var(--primary);
      --magenta: #b045e5;
      --blue: #0f0f99;
      --yellow: #ffee99;
      --mint: #71e0b8;
      --red: #ff8f8f;
      --panel: #202025;
      --panel-2: #151518;
      --line: rgba(249, 249, 249, 0.13);
      --muted: rgba(249, 249, 249, 0.82);
      --soft: rgba(249, 249, 249, 0.65);
      --shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
      --max: 1180px;
      --display: "ES Build", "Outfit", Arial, sans-serif;
      --body: "Gellix", "Outfit", Arial, sans-serif;
    }

html {
      scroll-behavior: smooth;
    }

.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      max-width: 100%;
      padding: 0 22px;
      border-radius: var(--radius-circle);
      border: 1px solid transparent;
      font-family: var(--display);
      font-size: var(--text-xs);
      font-weight: 700;
      line-height: 1;
      white-space: normal;
      text-align: center;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

.btn:hover {
      transform: translateY(-1px);
    }

.btn-primary {
      background: var(--ink);
      color: #111;
      border-color: var(--ink);
    }

.btn-secondary {
      background: rgba(249, 249, 249, 0.06);
      color: var(--ink);
      border-color: rgba(249, 249, 249, 0.22);
    }

.btn-secondary:hover {
      border-color: rgba(255, 238, 153, 0.72);
      background: rgba(255, 238, 153, 0.08);
    }

.btn-link {
      padding: 0;
      min-height: auto;
      border-radius: 0;
      border: 0;
      color: var(--yellow);
      font-family: var(--body);
      font-weight: 600;
    }

.btn-link:hover {
      transform: none;
      color: var(--ink);
    }

.views-viewport {
      overflow: hidden;
      padding: 6px 0;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    }

.views-grid {
      display: flex;
      gap: 16px;
      will-change: transform;
    }

.views-grid.animate {
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

.carousel-dots {
      display: flex;
      justify-content: center;
      gap: 9px;
      margin-top: 18px;
    }

.carousel-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: none;
      border-radius: var(--radius-circle);
      background: rgba(249, 249, 249, 0.28);
      cursor: pointer;
      transition: width 0.25s ease, background 0.25s ease;
    }

.carousel-dot.active {
      width: 26px;
      background: linear-gradient(90deg, var(--magenta), var(--yellow));
    }

.views-grid > .view-card {
      flex: 0 0 clamp(280px, 38%, 420px);
    }

.view-card {
      min-height: 348px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(249, 249, 249, 0.04);
    }

.view-mock {
      min-height: 160px;
      padding: 16px;
      background: #121217;
      border-bottom: 1px solid var(--line);
    }

.view-card-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      padding: 18px;
    }

.view-card h3 {
      font-size: var(--text-m);
    }

.question-label {
      margin: 0;
      color: var(--yellow);
      font-size: 13px;
      line-height: 1.35;
    }

.view-card p:not(.question-label) {
      margin: 0;
      color: var(--muted);
      font-size: var(--text-xs);
      line-height: 1.55;
    }

.view-evidence {
      align-self: flex-start;
      margin-top: auto;
      padding: 7px 10px;
      border-radius: var(--radius-circle);
      border: 1px solid rgba(113, 224, 184, 0.24);
      background: rgba(113, 224, 184, 0.1);
      color: rgba(225, 255, 244, 0.9);
      font-size: 11px;
      font-weight: 600;
    }

.agent-body {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 1px;
      background: var(--line);
    }

@keyframes caretBlink {
      50% {
        opacity: 0;
      }
    }

.evidence-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--line);
    }

.arch-body {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: center;
      padding: 18px;
    }

@media (max-width: 1080px) {
.views-grid > .view-card {
        flex-basis: 46%;
      }
}

@media (max-width: 820px) {
.agent-body, .arch-body, .evidence-body {
        grid-template-columns: 1fr;
      }

.views-grid > .view-card {
        flex-basis: 86%;
      }
}

@media (max-width: 560px) {
.btn {
        min-height: 42px;
        padding: 0 15px;
        font-size: 12px;
      }
}

@keyframes riseIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

.btn-primary {
      /* v22 QA: off-palette gradient face removed (§8-A-7); v22 layer supplies --grad-cta */
      color: #fff;
      border: none;
      box-shadow: 0 12px 32px rgba(107, 46, 229, 0.38);
    }

.btn-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.07);
      box-shadow: 0 16px 40px rgba(176, 69, 229, 0.46);
    }

.btn-secondary {
      border: 1px solid transparent;
      background: linear-gradient(#1c1c21, #1c1c21) padding-box, linear-gradient(135deg, var(--purple), var(--magenta) 52%, var(--yellow)) border-box;
    }

.btn-secondary:hover {
      background: linear-gradient(#26202e, #26202e) padding-box, linear-gradient(135deg, var(--purple), var(--magenta) 52%, var(--yellow)) border-box;
    }

.view-card {
      position: relative;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

.view-card:hover {
      transform: translateY(-3px);
      border-color: rgba(176, 69, 229, 0.45);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
    }

.view-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      z-index: 1;
      border-radius: 8px 8px 0 0;
      background: linear-gradient(90deg, var(--purple), var(--magenta), var(--yellow));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.32s ease;
    }

.view-card:hover::before {
      transform: scaleX(1);
    }

.view-mock {
      background-color: #121217;
      background-image: linear-gradient(rgba(249, 249, 249, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 249, 249, 0.04) 1px, transparent 1px);
      background-size: 22px 22px;
    }

.carousel-btn:active {
      transform: scale(0.94);
    }

.hva-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 40px !important;
  text-align: center !important;
}

.hva-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 700px;
}

.hva-copy .back-link {
  align-self: flex-start;
}

.hva-copy h1 {
  text-align: center !important;
  max-width: 820px !important;
}

.hva-h1-line {
  font-size: clamp(4.48rem, 5.2vw, 7.68rem) !important;
}

.hva-standfirst {
  text-align: center !important;
  max-width: 560px !important;
}

.hva-actions {
  justify-content: center !important;
}

.hva-stage {
  width: 100%;
  max-width: 100%;
}

.proof-body { display: none; }

.hva-frame { cursor: pointer; }

.hva-try {
      display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
      color: var(--yellow); font-family: var(--body); font-size: 13px; font-weight: 600;
    }

.hva-try:hover { color: var(--ink); }

.deploy-hero-b-body h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #f9f9f9;
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.02em;
}

.deploy-hero-b-body p {
  font-size: var(--text-xs);
  color: rgba(249,249,249,0.65);
  line-height: 1.7;
  margin: 0 0 24px;
}

.deploy-next-b-body h4 {
  font-size: var(--text-s);
  font-weight: 700;
  color: rgba(249,249,249,0.75);
  margin: 0 0 6px;
}

.deploy-next-b-body p {
  font-size: 1.36rem;
  color: rgba(249,249,249,0.42);
  margin: 0;
  line-height: 1.55;
}

:root {
  /* Surfaces (all neutral — the purple-tinted #0F0524 family is dead) */
  --panel-3: #1b1b20;                       /* elevated card sitting on --black   */
  --mock: #121217;                          /* product-mock / chart interior      */
  --chrome: rgba(0, 0, 0, 0.30);            /* frame title-bars, console headers  */

  /* Hairlines (the only permitted "borders" language) */
  --hairline: rgba(249, 249, 249, 0.10);    /* structural seams, gridlines        */
  --hairline-2: rgba(249, 249, 249, 0.13);  /* card edges (same as --line)        */
  --hairline-3: rgba(249, 249, 249, 0.22);  /* interactive outlines at rest       */

  /* Elevation — ONE shadow recipe, neutral black only. Never colored. */
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.30);
  --glow-none: 0 0 0 0 rgba(0, 0, 0, 0);    /* semantic eraser for legacy glows   */

  /* Radius scale */
  --r-sm: var(--radius);                             /* buttons, inputs, small tiles       */
  --r-md: 14px;                             /* cards, panels                      */
  --r-lg: 18px;                             /* large frames, consoles             */
  --r-pill: var(--radius-circle);                          /* chips + tag pills ONLY             */

  /* The one gradient: primary CTA face. Saturated purple→magenta body with a restrained yellow terminal kiss confined to the bottom-right corner (overlay radial, 40% alpha) — the label always sits on deep purple. */ --grad-cta: radial-gradient(130% 160% at 106% 130%, rgba(255, 238, 153, 0.40), transparent 46%), linear-gradient(115deg, #6b2ee5 0%, #b045e5 135%);

  /* Chart grammar */
  --axis-ink: rgba(249, 249, 249, 0.92);    /* in-viz axis/label text             */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --eyebrow-track: 0.14em;
}

.btn {
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.btn-primary {
  background: var(--grad-cta);
  color: #fff;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, 0.18);
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, 0.22), var(--shadow-sm);
}

.btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--hairline-3);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--panel);
  border-color: rgba(249, 249, 249, 0.34);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(249, 249, 249, 0.88);
  font-family: var(--display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}

.btn-ghost::after {
  content: "→";
  font-family: var(--body);
  transition: transform 180ms ease;
}

.btn-ghost:hover {
  color: var(--ink);
  transform: none;
}

.btn-ghost:hover::after {
  transform: translateX(3px);
}

.btn-link {
  color: rgba(249, 249, 249, 0.88);
}

.btn-link:hover {
  color: var(--ink);
}

.btn:focus-visible, .btn-ghost:focus-visible, .carousel-btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.view-card {
  border-radius: var(--r-md);
}

.view-card::before {
  height: 2px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: rgba(107, 46, 229, 0.75);
}

.view-card:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 249, 249, 0.24);
  box-shadow: var(--shadow);
}

.views-viewport {
  margin-left: -20px;
  margin-right: -20px;
  padding: 8px var(--space-s);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px,
    #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20px,
    #000 calc(100% - 20px), transparent 100%);
}

.view-mock {
  background-color: var(--mock);
  background-image: linear-gradient(rgba(249, 249, 249, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 249, 249, 0.03) 1px, transparent 1px);
  background-size: 22px 22px;
}

.question-label {
  color: rgba(249, 249, 249, 0.85);
}

.view-evidence {
  border-color: rgba(249, 249, 249, 0.16);
  background: rgba(249, 249, 249, 0.05);
  color: rgba(249, 249, 249, 0.75);
}

.carousel-dot.active {
  background: var(--magenta);
}

@media (prefers-reduced-motion: reduce) {
.btn, .btn-ghost::after, .view-card {
    transition: none;
  }

.btn-primary:hover, .btn-secondary:hover, .view-card:hover {
    transform: none;
  }
}

.hva-root {padding-top: clamp(32px,4.2vw,56px);padding-bottom: clamp(8px,1.5vw,14px)}

.hva-root .hva-grid {display: grid;grid-template-columns: minmax(0,44fr) minmax(0,56fr);gap: clamp(30px,4vw,54px);align-items: center}

.hva-root .back-link {margin-bottom: 22px}

.hva-root .hva-eyebrow {margin: 0 0 16px;color: var(--soft);font-family: var(--display);font-size: 12px;font-weight: 600;letter-spacing: var(--eyebrow-track);text-transform: uppercase}

.hva-root .hva-copy h1 {max-width: none;text-align: left}

.hva-root .hva-h1-line {display: block;font-size: var(--h1);line-height: 1.06;letter-spacing: -0.015em}

.hva-root .h1-accent {color: rgba(249,249,249,0.78)}

.hva-root .hva-standfirst {max-width: 46ch;margin: 18px 0 0;color: rgba(249,249,249,0.75);font-size: var(--text-m);line-height: 1.6}

.hva-root .hva-actions {display: flex;flex-wrap: wrap;gap: 12px;margin-top: 28px}

.hva-root .hva-microline {margin: var(--space-xs) 0 0;color: var(--muted);font-size: 13px}

.hva-root .hva-stage {position: relative}

.hva-root .hva-stage::before {content: "";position: absolute;top: -12px;right: -12px;width: 62%;height: 56%;border: 1px solid var(--hairline);border-radius: var(--r-lg);pointer-events: none}

.hva-root .hva-frame {position: relative;background: var(--panel-2);border: 1px solid var(--hairline-2);border-radius: var(--r-lg);box-shadow: var(--shadow);overflow: hidden}

.hva-root .hva-bar {display: flex;align-items: center;gap: 12px;padding: 10px 16px;background: var(--chrome);border-bottom: 1px solid var(--hairline)}

.hva-root .hva-dots {display: flex;gap: 5px}

.hva-root .hva-dots i {width: 8px;height: 8px;border-radius: 50%;background: rgba(249,249,249,0.12)}

.hva-root .hva-title {font-family: var(--display);font-size: 11px;font-weight: 600;letter-spacing: 0.12em;text-transform: uppercase;color: rgba(249,249,249,0.55)}

.hva-root .hva-status {display: inline-flex;align-items: center;gap: 6px;margin-left: auto;font-family: var(--mono);font-size: 9px;letter-spacing: 0.13em;text-transform: uppercase;color: rgba(249,249,249,0.42)}

.hva-root .hva-status i {width: 5px;height: 5px;border-radius: 50%;background: rgba(107,46,229,0.9)}

.hva-root .hva-body {padding: 18px var(--space-s) var(--space-s);background-color: var(--mock);background-image: linear-gradient(rgba(249,249,249,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(249,249,249,0.03) 1px,transparent 1px);background-size: 22px 22px}

.hva-root .hva-mini {display: block;margin: 0 0 8px;font-family: var(--display);font-size: 9.5px;font-weight: 600;letter-spacing: var(--eyebrow-track);text-transform: uppercase;color: var(--soft)}

.hva-root .hva-band {margin-bottom: 16px;padding-bottom: var(--space-xs);border-bottom: 1px solid var(--hairline)}

.hva-root .hva-band-chips {display: flex;flex-wrap: wrap;gap: 6px}

.hva-root .hva-chip {font-size: 10.5px;font-weight: 500;line-height: 1.2;padding: 4px 10px;border-radius: var(--r-pill);border: 1px solid var(--hairline-2);background: rgba(249,249,249,0.03);color: rgba(249,249,249,0.72);white-space: nowrap}

.hva-root .hva-chip.dashed {border-style: dashed;background: transparent;color: rgba(249,249,249,0.4);font-style: italic}

.hva-root .hva-work {display: grid;grid-template-columns: minmax(0,1fr) 168px;gap: 18px}

.hva-root .hva-engine {position: relative;padding: 16px 18px 12px;background: var(--panel-3);border: 1px solid rgba(107,46,229,0.3);border-radius: var(--r-md);box-shadow: var(--shadow-sm)}

.hva-root .hva-q {position: relative;display: flex;align-items: center;gap: 9px;min-height: 34px;padding-bottom: 11px;border-bottom: 1px solid var(--hairline);overflow: hidden;font-family: var(--display);font-size: var(--text-xs);font-weight: 600;color: var(--ink)}

.hva-root .hva-q svg {flex: 0 0 auto}

.hva-root .hva-caret {display: none;width: 8px;height: 15px;margin-left: 2px;background: rgba(249,249,249,0.85);flex: 0 0 auto}

.hva-root .hva-scan {position: absolute;left: 0;right: 0;bottom: 0;height: 1px;opacity: 0;background: rgba(107,46,229,0.5);pointer-events: none}

.hva-root .hva-ans {padding-top: 12px}

.hva-root .hva-head {margin: 0;min-height: 44px;font-family: var(--display);font-size: var(--text-s);font-weight: 600;line-height: 1.45;color: var(--axis-ink)}

.hva-root .hva-sub {margin: 6px 0 0;min-height: 38px;font-size: 12.5px;line-height: 1.5;color: rgba(249,249,249,0.62)}

.hva-root .hva-cl {margin-top: 11px;padding-top: 10px;border-top: 1px solid var(--hairline)}

.hva-root .hva-cl span {font-family: var(--mono);font-size: 9.5px;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(249,249,249,0.45)}

.hva-root .hva-bars {display: flex;flex-direction: column;gap: 8px;margin-top: 9px;min-height: 86px}

.hva-root .hva-brow {display: flex;align-items: center;gap: 8px}

.hva-root .hva-bname {width: 108px;flex: 0 0 auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 11px;color: rgba(249,249,249,0.7)}

.hva-root .hva-btrack {flex: 1;height: 7px;border-radius: 99px;background: rgba(249,249,249,0.07);overflow: hidden}

.hva-root .hva-bfill {display: block;height: 100%;border-radius: 99px}

.hva-root .hva-bfill.you {background: var(--purple)}

.hva-root .hva-bfill.peer {background: rgba(249,249,249,0.2)}

.hva-root .hva-bfill.top {background: rgba(107,46,229,0.42)}

.hva-root .hva-bfill.neg {background: rgba(255,143,143,0.55)}

.hva-root .hva-bval {width: 46px;flex: 0 0 auto;text-align: right;font-family: var(--mono);font-size: 11px;font-variant-numeric: tabular-nums;color: rgba(249,249,249,0.6)}

.hva-root .hva-bval.you {color: var(--axis-ink);font-weight: 600}

.hva-root .hva-ev {position: relative;display: flex;flex-wrap: wrap;align-items: center;gap: 6px;margin-top: var(--space-xs);padding: 12px 0 10px;border-top: 1px solid var(--hairline)}

.hva-root .hva-ev-label {margin-right: 4px;font-family: var(--display);font-size: 9.5px;font-weight: 600;letter-spacing: 0.14em;text-transform: uppercase;color: rgba(255,238,153,0.55)}

.hva-root .hva-ev-chip {padding: 3px 9px;border-radius: var(--r-pill);border: 1px solid var(--hairline-2);font-size: 10px;color: rgba(249,249,249,0.78)}

.hva-root .hva-evline {position: absolute;left: 0;right: 0;bottom: 0;height: 1px;background: #ffee99;transform-origin: left;opacity: 0.35}

.hva-root .hva-rail {border-left: 1px solid var(--hairline);padding-left: 16px}

.hva-root .hva-rail-chips {display: flex;flex-direction: column;gap: 6px}

.hva-root .hva-out {display: inline-flex;align-items: center;gap: 7px;padding: 5px 10px;border: 1px solid var(--hairline-2);border-radius: var(--r-pill);background: rgba(249,249,249,0.03);font-size: 10.5px;font-weight: 500;color: rgba(249,249,249,0.78)}

.hva-root .hva-out i {width: 4px;height: 4px;border-radius: 50%;background: rgba(107,46,229,0.75);flex: 0 0 auto}

.hva-root .pill-strip-wrap {margin-top: var(--space-l);padding-left: 0;padding-right: 0}

@media (max-width:1080px) {
.hva-root .hva-grid {grid-template-columns: 1fr;gap: 36px}

.hva-root .hva-copy {max-width: 640px}

.hva-root .hva-stage {max-width: 100%}
}

@media (max-width:880px) {
.hva-root .hva-stage::before {display: none}

.hva-root .hva-work {grid-template-columns: 1fr}

.hva-root .hva-rail {border-left: 0;padding-left: 0;border-top: 1px solid var(--hairline);padding-top: var(--space-xs)}

.hva-root .hva-rail-chips {flex-direction: row;flex-wrap: wrap}
}

@media (max-width:560px) {
.hva-root .hva-body {padding: var(--space-xs)}

.hva-root .hva-engine {padding: var(--space-xs) var(--space-xs) 10px}

.hva-root .hva-q {font-size: 13px}

.hva-root .hva-head {font-size: var(--text-xs)}

.hva-root .hva-bname {width: 84px;font-size: 10.5px}

.hva-root .hva-status {display: none}

.hva-root .hva-actions .btn {flex: 1 1 100%}
}

@media (prefers-reduced-motion: no-preference) {
@keyframes hvaRise{from{opacity: 0;transform: translateY(16px)}to{opacity: 1;transform: none}}

.hva-root .hva-eyebrow, .hva-root .hva-copy h1, .hva-root .hva-standfirst, .hva-root .hva-actions, .hva-root .hva-microline {animation: hvaRise 0.72s cubic-bezier(0.22,1,0.36,1) both}

.hva-root .hva-standfirst {animation-delay: 0.12s}

.hva-root .hva-actions {animation-delay: 0.24s}

.hva-root .hva-microline {animation-delay: 0.3s}

.hva-root .hva-stage {animation: hvaRise 0.8s cubic-bezier(0.22,1,0.36,1) 0.18s both}

.hva-root .pill-strip-wrap {animation: hvaRise 0.72s cubic-bezier(0.22,1,0.36,1) 0.42s both}

.hva-root.hva-motion .hva-chip {opacity: 0;transform: translateY(8px);transition: opacity 0.32s cubic-bezier(0.22,1,0.36,1),transform 0.32s cubic-bezier(0.22,1,0.36,1)}

.hva-root.hva-motion .hva-chip.lit {opacity: 1;transform: none}

.hva-root.hva-motion .hva-out {opacity: 0.28;transform: translateY(6px);transition: opacity 0.3s cubic-bezier(0.22,1,0.36,1),transform 0.3s cubic-bezier(0.22,1,0.36,1)}

.hva-root.hva-motion .hva-out.lit {opacity: 1;transform: none}

.hva-root.hva-motion .hva-engine {opacity: 0;transform: translateY(14px);transition: opacity 0.48s cubic-bezier(0.22,1,0.36,1),transform 0.48s cubic-bezier(0.22,1,0.36,1)}

.hva-root.hva-motion .hva-engine.in {opacity: 1;transform: none}

.hva-root.hva-motion .hva-head {opacity: 0;transform: translateY(8px);transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1),transform 0.42s cubic-bezier(0.22,1,0.36,1)}

.hva-root.hva-motion .hva-sub {opacity: 0;transform: translateY(6px);transition: opacity 0.38s cubic-bezier(0.22,1,0.36,1),transform 0.38s cubic-bezier(0.22,1,0.36,1)}

.hva-root.hva-motion .hva-head.in, .hva-root.hva-motion .hva-sub.in {opacity: 1;transform: none}

.hva-root.hva-motion .hva-cl {opacity: 0;transition: opacity 0.26s ease}

.hva-root.hva-motion .hva-cl.in {opacity: 1}

.hva-root.hva-motion .hva-bfill {transition: width 0.65s cubic-bezier(0.16,1,0.3,1)}

.hva-root.hva-motion .hva-ev-chip {opacity: 0.3;transform: translateY(2px);border-color: var(--hairline);transition: opacity 0.24s cubic-bezier(0.22,1,0.36,1),transform 0.24s cubic-bezier(0.22,1,0.36,1),border-color 0.24s ease}

.hva-root.hva-motion .hva-ev-chip.on {opacity: 1;transform: none;border-color: rgba(249,249,249,0.28)}

.hva-root.hva-motion .hva-ev-label {color: rgba(249,249,249,0.38);transition: color 0.5s ease}

.hva-root.hva-motion .hva-ev-label.hot {color: rgba(255,238,153,0.85)}

.hva-root.hva-motion .hva-ev-label.hot.dim {color: rgba(255,238,153,0.55);transition: color 0.6s ease}

.hva-root.hva-motion .hva-evline {opacity: 0;transform: scaleX(0)}

.hva-root.hva-motion .hva-evline.on {opacity: 0.9;transform: scaleX(1);transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),opacity 0.18s ease}

.hva-root.hva-motion .hva-evline.on.ember {opacity: 0.35;transition: opacity 0.6s ease}

.hva-root.hva-motion .hva-evline.on.off {opacity: 0;transition: opacity 0.2s ease}

.hva-root.hva-motion .hva-qtext {transition: opacity 0.24s ease}

.hva-root.hva-motion .hva-qtext.out {opacity: 0}

.hva-root.hva-motion .hva-ans {transition: opacity 0.28s ease,transform 0.28s ease}

.hva-root.hva-motion .hva-ans.out {opacity: 0;transform: translateY(6px)}

/* caret: the sanctioned infinite loop; scan: the single 'thinking' affordance */
  @keyframes hvaBlink{50%{opacity: 0}}

.hva-root.hva-motion .hva-caret.on {display: inline-block;animation: hvaBlink 1.05s steps(1) infinite}

.hva-root.hva-motion .hva-caret.hold {display: inline-block;animation: none;opacity: 1;transition: opacity 0.12s ease}

.hva-root.hva-motion .hva-caret.hold.off {opacity: 0}

@keyframes hvaScan{0%{opacity: 1;transform: translateX(-101%)}72%{opacity: 1}100%{opacity: 0;transform: translateX(101%)}}

.hva-root.hva-motion .hva-scan.run {animation: hvaScan 0.38s cubic-bezier(0.4,0,0.2,1) forwards}
}

#instant-benchmark .ib-heading { grid-template-columns: 1fr; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }

#instant-benchmark .ib-heading h2 { max-width: none; }

#instant-benchmark .ib-sub { max-width: 620px; margin: 0 auto; text-align: center; }

.ib-frame { max-width: 100%; margin: 0 auto; background: var(--panel-2); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }

.ib-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--chrome); border-bottom: 1px solid var(--hairline); }

.ib-dots { display: inline-flex; gap: 6px; }

.ib-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(249,249,249,0.14); }

.ib-title { font-family: var(--display); font-size: 13px; font-weight: 600; color: rgba(249,249,249,0.85); }

.ib-prog { height: 2px; background: transparent; }

.ib-prog i { display: block; height: 2px; width: 0; background: var(--purple); }

.ib-prog i.is-done { opacity: 0; }

.ib-body { background: var(--mock); padding: var(--gutter); }

.ib-combo { display: flex; gap: 10px; align-items: stretch; }

.ib-inputwrap { position: relative; flex: 1 1 auto; min-width: 0; }

.ib-inputwrap::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); pointer-events: none; box-shadow: 0 0 0 3px rgba(107,46,229,0.22); opacity: 0; }

.ib-inputwrap:focus-within::after { opacity: 1; }

.ib-mag { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; }

#instant-benchmark #ib-input { width: 100%; min-height: 52px; padding: 0 16px 0 42px; background: var(--panel-2); border: 1px solid var(--hairline-3); border-radius: var(--r-sm); color: var(--ink); font-family: var(--body); font-size: var(--text-s); }

#instant-benchmark #ib-input::placeholder { color: rgba(249,249,249,0.42); }

#instant-benchmark #ib-input:focus { outline: none; border-color: rgba(107,46,229,0.65); }

#instant-benchmark #ib-input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.ib-listbox { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--panel-3); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); box-shadow: var(--shadow); max-height: 264px; overflow: auto; }

.ib-listbox li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }

.ib-listbox li[aria-selected="true"], .ib-listbox li:hover { background: rgba(107,46,229,0.16); }

.ib-opt-n { color: var(--ink); font-size: var(--text-xs); font-weight: 600; }

.ib-opt-m { color: var(--soft); font-size: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.ib-go { position: relative; flex: 0 0 auto; min-width: 152px; min-height: 52px; padding: 0 var(--space-s); display: inline-grid; place-items: center; background: var(--ink); color: #111; border: 1px solid var(--ink); border-radius: var(--r-sm); font-family: var(--display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; cursor: pointer; }

.ib-go-a, .ib-go-b { grid-area: 1 / 1; }

.ib-go-b { opacity: 0; }

.ib-go.is-busy { cursor: default; }

.ib-go.is-busy .ib-go-a { opacity: 0; }

.ib-go.is-busy .ib-go-b { opacity: 1; }

.ib-hint { min-height: 18px; margin: 8px 2px 0; font-size: 12.5px; color: rgba(249,249,249,0.7); }

.ib-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }

.ib-samples-label { font-size: 12px; color: var(--soft); }

.ib-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

.ib-chip { display: inline-flex; align-items: center; padding: 6px var(--space-xs); background: transparent; border: 1px solid var(--hairline-2); border-radius: var(--r-pill); color: rgba(249,249,249,0.78); font-family: var(--body); font-size: 12px; line-height: 1.35; cursor: pointer; text-align: left; }

.ib-chip:hover { border-color: rgba(249,249,249,0.34); color: var(--ink); }

.ib-stage { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 18px; }

.ib-stage[hidden], .ib-run[hidden], #ib-body-sample[hidden], #ib-body-unknown[hidden], #ib-convert[hidden], .ib-listbox[hidden] { display: none; }

.ib-stagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 20px; }

.ib-res-title { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--axis-ink); }

.ib-res-title:focus { outline: none; }

.ib-res-title.is-empty { visibility: hidden; }

.ib-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(249,249,249,0.5); border: 1px solid var(--hairline-2); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }

.ib-run { margin: var(--space-xs) 0 2px; padding: 0; list-style: none; }

.ib-line { position: relative; margin: 0 0 9px; padding-left: 24px; font-family: var(--mono); font-size: 13px; color: rgba(249,249,249,0.85); font-variant-numeric: tabular-nums; }

.ib-chk { position: absolute; left: 0; top: 0; color: rgba(249,249,249,0.8); opacity: 0; }

.ib-line.is-done { color: rgba(249,249,249,0.55); }

.ib-line.is-done .ib-chk { opacity: 1; }

.ib-run.ib-short .ib-line[data-beat="3"] { display: none; }

.ib-ident { margin: 12px 0 16px; font-size: var(--text-xs); color: var(--muted); }

.ib-panels { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xs); }

.ib-panel { background: var(--panel-3); border: 1px solid var(--hairline-2); border-radius: var(--r-md); padding: clamp(16px, 2.2vw, 22px); }

.ib-panel-label { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }

.ib-panel-sum { margin: 0 0 12px; font-size: 12.5px; color: rgba(249,249,249,0.62); }

.ib-aa { margin: 0; padding: 0; list-style: none; }

.ib-aali { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--hairline); }

.ib-aa-n { font-size: var(--text-xs); color: rgba(249,249,249,0.88); }

.ib-st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; color: rgba(249,249,249,0.6); border: 1px solid var(--hairline-2); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }

.ib-st i { width: 6px; height: 6px; border-radius: 50%; background: rgba(249,249,249,0.35); }

.ib-st[data-st="WATCH"] { color: rgba(249,249,249,0.78); }

.ib-st[data-st="WATCH"] i { background: rgba(176,69,229,0.55); }

.ib-st[data-st="GAP"] { color: var(--axis-ink); border-color: rgba(176,69,229,0.5); }

.ib-st[data-st="GAP"] i { background: var(--magenta); }

.ib-more { color: var(--soft); font-size: 12px; }

.ib-bars { margin-top: 4px; }

.ib-brow { display: grid; grid-template-columns: 92px 1fr 48px; align-items: center; gap: 10px; margin-bottom: var(--space-xs); }

.ib-blab { font-size: 12.5px; color: rgba(249,249,249,0.8); }

.ib-track { display: block; height: 8px; border-radius: 4px; background: rgba(249,249,249,0.08); overflow: hidden; }

.ib-fill { display: block; height: 100%; border-radius: 4px; }

.ib-you { background: var(--purple); }

.ib-med { background: rgba(249,249,249,0.20); }

.ib-top { background: var(--magenta); }

.ib-bval { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--axis-ink); text-align: right; }

.ib-readout { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: rgba(249,249,249,0.62); font-variant-numeric: tabular-nums; }

.ib-opp { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: var(--space-xs); padding: var(--space-xs) 16px; border: 1px solid var(--hairline-2); border-radius: var(--r-md); }

.ib-opp-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }

.ib-opp-t { position: relative; font-size: var(--text-xs); font-weight: 600; color: rgba(249,249,249,0.88); }

.ib-opp-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: rgba(255,238,153,0.9); transform: scaleX(0); transform-origin: left; }

.ib-opp.is-lit { border-color: rgba(255,238,153,0.55); }

.ib-opp.is-lit .ib-opp-label { color: rgba(255,238,153,0.85); }

.ib-opp.is-lit .ib-opp-t { color: var(--ink); }

.ib-opp.is-lit .ib-opp-t::after { transform: scaleX(1); }

.ib-fine { margin: var(--space-xs) 2px 0; font-size: 12px; color: rgba(249,249,249,0.55); }

.ib-unk-1 { margin: var(--space-xs) 0 4px; font-size: var(--text-s); font-weight: 600; color: var(--ink); }

.ib-unk-1:focus { outline: none; }

.ib-unk-2 { margin: 0 0 var(--space-xs); font-size: var(--text-xs); color: var(--muted); }

.ib-convert { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hairline); }

.ib-convert-h { margin: 0 0 8px; font-family: var(--display); font-size: var(--text-l); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

.ib-convert-sub { margin: 0 0 var(--space-s); max-width: 580px; font-size: var(--text-xs); line-height: 1.6; color: var(--muted); }

.ib-cta-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.ib-cta-col { display: flex; flex-direction: column; }

.ib-cta-micro { margin: 8px 2px 0; font-size: 12px; color: var(--soft); }

@media (prefers-reduced-motion: no-preference) {
.ib-motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 480ms cubic-bezier(0.22,1,0.36,1), transform 480ms cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--rd, 0) * 70ms); }

.ib-motion [data-reveal].is-in { opacity: 1; transform: none; }

.ib-motion .ib-r { opacity: 0; transform: translateY(10px); transition: opacity 420ms cubic-bezier(0.22,1,0.36,1), transform 420ms cubic-bezier(0.22,1,0.36,1); }

.ib-motion .ib-r.is-on { opacity: 1; transform: none; }

.ib-motion .ib-aali.ib-r { transform: translateY(8px); transition-duration: 320ms; transition-delay: calc(var(--i, 0) * 70ms); }

.ib-motion .ib-brow.ib-r, .ib-motion .ib-readout.ib-r { transition-duration: 320ms; }

.ib-motion .ib-convert.ib-r { transform: translateY(12px); transition-duration: 480ms; }

.ib-motion .ib-fill { transition: width 650ms cubic-bezier(0.16,1,0.3,1); }

.ib-motion .ib-prog i { transition: width 500ms cubic-bezier(0.4,0,0.2,1), opacity 240ms ease; }

.ib-motion .ib-line { opacity: 0; transform: translateY(6px); transition: opacity 200ms cubic-bezier(0.22,1,0.36,1), transform 200ms cubic-bezier(0.22,1,0.36,1), color 180ms ease; }

.ib-motion .ib-line.is-on { opacity: 1; transform: none; }

.ib-motion .ib-line.is-done { opacity: 1; }

.ib-motion .ib-chk { transition: opacity 180ms ease; }

.ib-motion .ib-run, .ib-motion .ib-stage { transition: opacity 240ms ease; }

.ib-motion .ib-run.is-fading { opacity: 0; }

.ib-motion .ib-stage.is-swap { opacity: 0; transition-duration: 200ms; }

.ib-motion .ib-opp { transition: border-color 500ms cubic-bezier(0.22,1,0.36,1); }

.ib-motion .ib-opp-label, .ib-motion .ib-opp-t { transition: color 500ms cubic-bezier(0.22,1,0.36,1); }

.ib-motion .ib-opp-t::after { transition: transform 500ms cubic-bezier(0.22,1,0.36,1); }

.ib-motion .ib-inputwrap::after { transition: opacity 160ms ease; }

#instant-benchmark.ib-motion #ib-input { transition: border-color 160ms ease; }

.ib-motion .ib-chip { transition: border-color 160ms ease, color 160ms ease; }

.ib-motion .ib-go { transition: transform 90ms ease; }

.ib-motion .ib-go:active { transform: scale(0.985); }

.ib-motion .ib-go-a, .ib-motion .ib-go-b { transition: opacity 160ms ease; }
}

@media (max-width: 880px) {
.ib-panels { grid-template-columns: 1fr; }

#instant-benchmark .ib-heading { text-align: left; }

#instant-benchmark .ib-sub { margin: 0; text-align: left; }
}

@media (max-width: 560px) {
.ib-combo { flex-wrap: wrap; }

.ib-go { flex: 1 1 100%; min-height: 48px; }

.ib-brow { grid-template-columns: 84px 1fr 44px; gap: 8px; }

.ib-stagehead { flex-direction: column; align-items: flex-start; gap: 8px; }

.ib-cta-row { flex-direction: column; align-items: stretch; }

.ib-cta-row .btn { width: 100%; }
}

#assessment-areas .views-viewport {
  margin-left: -20px; margin-right: -20px; padding: 8px var(--space-s);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

#assessment-areas .views-grid.animate { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }

#assessment-areas .view-card {
  background: var(--panel-3, #1b1b20);
  border: 1px solid var(--hairline-2, rgba(249, 249, 249, 0.13));
  border-radius: var(--r-md, 14px);
  box-shadow: none;
  transition: transform 160ms ease, border-color 160ms ease;
}

#assessment-areas .view-card::before { content: none; }

#assessment-areas .view-card:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 249, 249, 0.24);
  box-shadow: none;
}

#assessment-areas .view-mock {
  height: 205px; min-height: 0; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-bottom: 1px solid var(--hairline, rgba(249, 249, 249, 0.10));
}

#assessment-areas .svx-vh {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 12px;
  background: var(--chrome, rgba(0, 0, 0, 0.30));
  border-bottom: 1px solid var(--hairline, rgba(249, 249, 249, 0.10));
}

#assessment-areas .svx-vh-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 2px; background: rgba(107, 46, 229, 0.65); }

#assessment-areas .svx-vh-name {
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(249, 249, 249, 0.62); white-space: nowrap;
}

#assessment-areas .svx-vh-chips { margin-left: auto; display: flex; gap: 5px; min-width: 0; }

#assessment-areas .svx-fchip {
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 8.5px; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--hairline-2, rgba(249, 249, 249, 0.13)); color: rgba(249, 249, 249, 0.55); white-space: nowrap;
}

#assessment-areas .svx-viz { flex: 1; min-height: 0; padding: 12px var(--space-xs) var(--space-xs); display: flex; flex-direction: column; gap: 8px; }

#assessment-areas .svx-bars { display: grid; gap: 10px; }

#assessment-areas .svx-brow { display: grid; gap: 5px; }

#assessment-areas .svx-brow-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; color: rgba(249, 249, 249, 0.62); }

#assessment-areas .svx-bval {
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--axis-ink, rgba(249, 249, 249, 0.92));
}

#assessment-areas .svx-btrack { display: block; height: 7px; border-radius: var(--radius-circle); background: rgba(249, 249, 249, 0.08); overflow: hidden; }

#assessment-areas .svx-bfill { display: block; height: 100%; border-radius: var(--radius-circle); background: rgba(249, 249, 249, 0.22); }

#assessment-areas .svx-bfill.peer-top { background: rgba(249, 249, 249, 0.38); }

#assessment-areas .svx-bfill.you { background: var(--purple); }

#assessment-areas .svx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

#assessment-areas .svx-list li {
  display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 9px;
  border-radius: 8px; border: 1px solid var(--hairline, rgba(249, 249, 249, 0.10));
  background: rgba(249, 249, 249, 0.035); font-size: 10.5px; color: rgba(249, 249, 249, 0.78);
}

#assessment-areas .svx-li-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#assessment-areas .svx-li-val {
  flex: 0 0 auto; font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--axis-ink, rgba(249, 249, 249, 0.92));
}

#assessment-areas .svx-schip {
  flex: 0 0 auto; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: var(--r-pill, 999px); border: 1px solid;
}

#assessment-areas .svx-schip.gap { color: var(--red); border-color: rgba(255, 143, 143, 0.45); background: rgba(255, 143, 143, 0.10); }

#assessment-areas .svx-schip.watch { color: var(--yellow); border-color: rgba(255, 238, 153, 0.40); background: rgba(255, 238, 153, 0.08); }

#assessment-areas .svx-schip.ok { color: var(--mint); border-color: rgba(113, 224, 184, 0.42); background: rgba(113, 224, 184, 0.08); }

#assessment-areas .svx-schip.str, #assessment-areas .svx-key { color: rgba(249, 249, 249, 0.90); border-color: rgba(107, 46, 229, 0.55); background: rgba(107, 46, 229, 0.14); }

#assessment-areas .svx-ptag {
  flex: 0 0 auto; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 8.5px;
  letter-spacing: 0.05em; padding: 2px 7px; border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(107, 46, 229, 0.45); background: rgba(107, 46, 229, 0.10); color: rgba(249, 249, 249, 0.85);
}

#assessment-areas .svx-read {
  margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--hairline, rgba(249, 249, 249, 0.10));
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-variant-numeric: tabular-nums;
  font-size: 9.5px; color: rgba(249, 249, 249, 0.55); white-space: nowrap; overflow: hidden;
}

#assessment-areas .svx-read > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

#assessment-areas .svx-key { font-size: 9.5px; font-weight: 600; padding: 1.5px 8px; border-radius: var(--r-pill, 999px); border: 1px solid; flex: 0 0 auto; }

#assessment-areas .svx-traj { position: relative; padding: 18px 5px 0; }

#assessment-areas .svx-you-label {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 8px; font-weight: 600;
  letter-spacing: 0.14em; color: rgba(249, 249, 249, 0.55);
}

#assessment-areas .svx-traj-line { position: relative; height: 6px; border-radius: var(--radius-circle); background: rgba(249, 249, 249, 0.10); }

#assessment-areas .svx-traj-prog { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--purple); }

#assessment-areas .svx-stop {
  position: absolute; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%);
  border-radius: var(--radius-circle); background: var(--mock, #121217); border: 1px solid var(--hairline-3, rgba(249, 249, 249, 0.22));
}

#assessment-areas .svx-stop.done { background: var(--purple); border-color: rgba(107, 46, 229, 0.8); }

#assessment-areas .svx-you {
  position: absolute; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%);
  border-radius: var(--radius-circle); background: var(--yellow); border: 3px solid var(--mock, #121217);
}

#assessment-areas .svx-traj-labels { display: flex; justify-content: space-between; margin-top: 7px; font-size: 9px; color: var(--soft); }

#assessment-areas .svx-map {
  position: relative; flex: 1; min-height: 0; margin: 0;
  border-radius: var(--radius); border: 1px solid var(--hairline, rgba(249, 249, 249, 0.10));
  overflow: hidden; background: rgba(0, 0, 0, 0.30);
}

#assessment-areas .svx-map > img, #assessment-areas .svx-map > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; display: block;
}

#assessment-areas .svx-map-legend {
  position: absolute; left: 8px; bottom: 8px; z-index: 1; max-width: calc(100% - 16px);
  padding: 3px 8px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--hairline-2, rgba(249, 249, 249, 0.13)); background: rgba(18, 18, 23, 0.88);
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 8.5px; letter-spacing: 0.04em;
  color: rgba(249, 249, 249, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#assessment-areas .svx-cta { margin-top: 36px; }

#assessment-areas .svx-cta-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
#assessment-areas.svx-motion [data-reveal], #assessment-areas.svx-motion [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--rd, 0) * 70ms);
  }

#assessment-areas.svx-motion [data-reveal].is-in, #assessment-areas.svx-motion [data-reveal-group].is-in > * {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
#assessment-areas .view-card { transition: none; }

#assessment-areas .view-card:hover { transform: none; }
}

@media (max-width: 880px) {
#assessment-areas .svx-viz { padding: 11px 12px 12px; }
}

@media (max-width: 560px) {
#assessment-areas .svx-vh { padding: 0 10px; }

#assessment-areas .svx-cta .btn { width: 100%; justify-content: center; }
}

.soc-page-body { position: relative; isolation: isolate; background: var(--mock); padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(14px, 2.4vw, 22px); }

.soc-page-body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(176, 69, 229, 0.05) 1px, transparent 1.4px), radial-gradient(circle, rgba(249, 249, 249, 0.028) 1px, transparent 1.4px); background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px; -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 32%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 32%, transparent 78%); }

.soc-legend { display: inline-flex; align-items: center; gap: 16px; }

@media (max-width: 560px) {
.soc-cta .btn { width: 100%; }
}

#three-layers .tl-dots { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(176,69,229,0.055) 1px, transparent 1.4px), radial-gradient(circle, rgba(249,249,249,0.030) 1px, transparent 1.4px);
  background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 38%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 38%, transparent 80%); }

#three-layers .eyebrow { margin: 0 auto var(--space-xs); }

#three-layers .tl-sub { max-width: 620px; margin: 18px auto 0; color: var(--muted); font-size: 1.68rem; line-height: 1.65; }

#three-layers .tl-flow { position: relative; max-width: 1000px; margin: 0 auto var(--section-space-xs); display: flex; flex-direction: column; gap: 18px; text-align: left; }

#three-layers .tl-spine { position: absolute; left: 21px; top: 24px; width: 1px; height: calc(100% - 320px); background: rgba(249,249,249,0.15); }

#three-layers .tl-layer { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-s); align-items: start; }

#three-layers .tl-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }

#three-layers .tl-badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--black); font-family: var(--mono); font-size: 1.248rem; letter-spacing: 0.04em; }

#three-layers .tl-l1 .tl-badge { border: 1px solid var(--hairline-2); color: rgba(249,249,249,0.6); }

#three-layers .tl-l2 .tl-badge { border: 1px solid rgba(249,249,249,0.18); color: rgba(249,249,249,0.78); }

#three-layers .tl-l3 .tl-badge { border: 1px solid rgba(249,249,249,0.28); color: rgba(249,249,249,0.95); }

#three-layers .tl-jdot { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); }

#three-layers .tl-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(230px, 0.9fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(18px, 2.5vw, 28px); border-radius: var(--r-md); transition: border-color 160ms ease; /* t-feedback */ }

#three-layers .tl-l1 .tl-panel { background: var(--panel-2); border: 1px solid var(--hairline); }

#three-layers .tl-l2 .tl-panel { background: var(--panel-3); border: 1px solid var(--hairline-2); }

#three-layers .tl-l3 .tl-panel { background: var(--panel); border: 1px solid rgba(249,249,249,0.18); padding: clamp(20px, 2.8vw, 32px); grid-template-columns: minmax(0, 1fr) minmax(260px, 1.08fr); }

#three-layers .tl-panel:hover { border-color: rgba(249,249,249,0.24); }

#three-layers .tl-chip { display: inline-flex; align-items: center; border: 1px solid var(--hairline-2); border-radius: var(--radius-circle); padding: 4px 11px; font-family: var(--mono); font-size: 0.992rem; letter-spacing: 0.11em; color: rgba(249,249,249,0.7); }

#three-layers .tl-name { margin: var(--space-xs) 0 6px; font-family: var(--display); font-size: var(--text-l); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

#three-layers .tl-tag { margin: 0 0 15px; max-width: none; color: rgba(249,249,249,0.6); font-size: var(--text-s); line-height: 1.5; }

#three-layers .tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

#three-layers .tl-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 1.36rem; line-height: 1.5; color: rgba(249,249,249,0.68); }

#three-layers .tl-list li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: rgba(107,46,229,0.7); margin-top: 7px; }

#three-layers .tl-viz-label { margin: 0 0 10px; font-family: var(--mono); font-size: 0.992rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(249,249,249,0.5); }

#three-layers .tl-readout { margin: 10px 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.088rem; letter-spacing: 0.03em; color: var(--axis-ink); }

#three-layers .tl-stack { display: flex; flex-direction: column; align-items: center; gap: 5px; }

#three-layers .tl-rec { width: 100%; background: var(--mock); border: 1px solid var(--hairline-2); border-radius: var(--r-sm); padding: 10px var(--space-xs); }

#three-layers .tl-rec-b { width: 93%; padding: 8px var(--space-xs); opacity: 0.85; }

#three-layers .tl-rec-c { width: 86%; padding: 8px var(--space-xs); opacity: 0.7; }

#three-layers .tl-rec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1.248rem; font-weight: 600; color: rgba(249,249,249,0.88); }

#three-layers .tl-rec-meta { font-family: var(--mono); font-size: 0.96rem; font-weight: 400; letter-spacing: 0.05em; color: rgba(249,249,249,0.45); white-space: nowrap; }

#three-layers .tl-rec-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }

#three-layers .tl-rec-rows i { display: block; height: 3px; border-radius: 2px; background: rgba(249,249,249,0.10); }

#three-layers .tl-cohort { display: inline-flex; margin-top: 11px; border: 1px solid rgba(107,46,229,0.4); border-radius: var(--radius-circle); padding: 4px 11px; font-family: var(--mono); font-size: 0.96rem; letter-spacing: 0.1em; color: rgba(249,249,249,0.8); }

#three-layers .tl-goal-chart { display: block; width: 100%; height: auto; }

#three-layers .tl-console { background: var(--mock); border: 1px solid var(--hairline-2); border-radius: var(--r-md); overflow: hidden; }

#three-layers .tl-console-bar { display: flex; align-items: center; gap: 5px; padding: 9px var(--space-xs); background: var(--chrome); border-bottom: 1px solid var(--hairline); }

#three-layers .tl-cdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(249,249,249,0.14); }

#three-layers .tl-console-title { margin-left: 7px; font-family: var(--mono); font-size: 0.992rem; letter-spacing: 0.08em; color: rgba(249,249,249,0.55); }

#three-layers .tl-console-body { padding: var(--space-xs) 16px 16px; }

#three-layers .tl-prompt { display: flex; align-items: baseline; gap: 8px; min-height: 1.5em; font-family: var(--mono); font-size: 1.28rem; }

#three-layers .tl-pmark { color: var(--purple); font-weight: 700; }

#three-layers .tl-ptext { color: rgba(249,249,249,0.92); overflow-wrap: anywhere; }

#three-layers .tl-caret { display: none; width: 7px; height: 14px; background: rgba(249,249,249,0.75); align-self: center; }

#three-layers .tl-result { margin-top: var(--space-xs); border-top: 1px solid var(--hairline); padding-top: 12px; }

#three-layers .tl-res-head { margin: 0 0 10px; font-family: var(--mono); font-size: 0.96rem; letter-spacing: 0.08em; color: rgba(249,249,249,0.5); }

#three-layers .tl-res-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 52px; align-items: center; gap: 10px; padding: 5px 0; }

#three-layers .tl-res-name { font-size: 1.2rem; color: rgba(249,249,249,0.78); white-space: nowrap; }

#three-layers .tl-res-bar { display: block; height: 4px; border-radius: 2px; background: rgba(249,249,249,0.08); overflow: hidden; }

#three-layers .tl-res-bar i { display: block; height: 100%; border-radius: 2px; background: var(--purple); width: var(--w, 0%); }

#three-layers .tl-res-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.12rem; text-align: right; color: var(--axis-ink); }

#three-layers .tl-res-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }

#three-layers .tl-res-footlab { font-family: var(--mono); font-size: 0.96rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(249,249,249,0.5); margin-right: 3px; white-space: nowrap; }

#three-layers .tl-echip { border: 1px solid rgba(249,249,249,0.2); border-radius: var(--radius-circle); padding: 2.5px 9px; font-family: var(--mono); font-size: 0.896rem; letter-spacing: 0.09em; color: rgba(249,249,249,0.75); white-space: nowrap; }

#three-layers .cta-footnote { color: rgba(249,249,249,0.55); font-size: 1.152rem; }

@media (prefers-reduced-motion: no-preference) {
#three-layers.tl-motion [data-reveal] { opacity: 0; transform: translateY(14px);
    transition: opacity 480ms cubic-bezier(0.22,1,0.36,1), transform 480ms cubic-bezier(0.22,1,0.36,1); /* t-reveal e-out */
    transition-delay: calc(var(--rd, 0) * 70ms); }

#three-layers.tl-motion [data-reveal].is-in { opacity: 1; transform: none; }

#three-layers.tl-motion .tl-layer { opacity: 0; transform: translateY(16px);
    transition: opacity 560ms cubic-bezier(0.22,1,0.36,1), transform 560ms cubic-bezier(0.22,1,0.36,1); /* t-slab e-out */ }

#three-layers.tl-motion .tl-layer.is-in { opacity: 1; transform: none; }

#three-layers.tl-motion .tl-spine { transform: scaleY(0); transform-origin: top;
    transition: transform 900ms cubic-bezier(0.16,1,0.3,1); /* e-soft */ }

#three-layers.tl-motion .tl-spine.is-drawn { transform: scaleY(1); }

#three-layers.tl-motion .tl-jdot { opacity: 0; transition: opacity 200ms ease; }

#three-layers.tl-motion .tl-jdot.is-in { opacity: 1; }

#three-layers.tl-motion .tl-caret { display: inline-block; }

#three-layers.tl-motion .tl-caret.tl-blink { animation: tl-caret-blink 1.05s steps(1) infinite; }

#three-layers.tl-motion .tl-console.tl-off .tl-caret.tl-blink { animation-play-state: paused; }

#three-layers.tl-motion .tl-res-head, #three-layers.tl-motion .tl-res-row, #three-layers.tl-motion .tl-res-foot { opacity: 0; transform: translateY(6px);
    transition: opacity 480ms cubic-bezier(0.22,1,0.36,1), transform 480ms cubic-bezier(0.22,1,0.36,1); }

#three-layers.tl-motion .tl-res-head.is-in, #three-layers.tl-motion .tl-res-row.is-in, #three-layers.tl-motion .tl-res-foot.is-in { opacity: 1; transform: none; }

#three-layers.tl-motion .tl-res-bar i { width: 0; transition: width 650ms cubic-bezier(0.16,1,0.3,1); /* t-bar e-soft */ }

#three-layers.tl-motion .tl-res-row.is-in .tl-res-bar i { width: var(--w, 0%); }

#three-layers.tl-motion .tl-echip { opacity: 0.35; border-color: var(--hairline);
    transition: opacity 240ms cubic-bezier(0.22,1,0.36,1), border-color 240ms cubic-bezier(0.22,1,0.36,1); }

#three-layers.tl-motion .tl-echip.is-in { opacity: 1; border-color: rgba(249,249,249,0.2); }
}

@keyframes tl-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (max-width: 880px) {
#three-layers .tl-layer { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-xs); }

#three-layers .tl-badge { width: 36px; height: 36px; font-size: 1.088rem; }

#three-layers .tl-spine { left: 17px; }

#three-layers .tl-panel, #three-layers .tl-l3 .tl-panel { grid-template-columns: 1fr; align-items: stretch; }

#three-layers .tl-viz, #three-layers .tl-console { max-width: 460px; }
}

@media (max-width: 560px) {
#three-layers .tl-flow { gap: var(--space-xs); }

#three-layers .tl-layer { grid-template-columns: 28px minmax(0, 1fr); gap: 11px; }

#three-layers .tl-badge { width: 28px; height: 28px; font-size: 0.96rem; }

#three-layers .tl-spine { left: 13px; top: 16px; }

#three-layers .tl-panel, #three-layers .tl-l3 .tl-panel { padding: 16px; }

#three-layers .tl-name { font-size: var(--text-m); }

#three-layers .tl-list li { font-size: 1.312rem; }

#three-layers .tl-res-row { grid-template-columns: 82px minmax(0, 1fr) 46px; gap: 7px; }

#three-layers .tl-res-name { font-size: 1.088rem; }

#three-layers .tl-viz, #three-layers .tl-console { max-width: none; }
}

#assessment-areas .views-shell { position: relative; }

#assessment-areas .carousel-bookend {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 46px;
  height: 46px;
  margin-top: -23px; /* own-height centering keeps transform free for feedback */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--hairline-3);
  border-radius: 50%;
  background: rgba(18, 18, 23, 0.72); /* backdrop so the arrow reads over card content */
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  color: rgba(249, 249, 249, 0.88);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

#assessment-areas .carousel-bookend.prev { left: -23px; }

#assessment-areas .carousel-bookend.next { right: -23px; }

#assessment-areas .carousel-bookend svg { width: 18px; height: 18px; display: block; }

#assessment-areas .carousel-bookend:hover {
  border-color: rgba(249, 249, 249, 0.45);
  background: var(--panel);
  color: var(--ink);
}

#assessment-areas .carousel-bookend:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
#assessment-areas .carousel-bookend { transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease; }

#assessment-areas .carousel-bookend:hover { transform: scale(1.05); }

#assessment-areas .carousel-bookend:active { transform: scale(0.96); }
}

@media (max-width: 880px) {
#assessment-areas .carousel-bookend { width: 40px; height: 40px; margin-top: -20px; }

#assessment-areas .carousel-bookend.prev { left: -20px; }

#assessment-areas .carousel-bookend.next { right: -20px; }

#assessment-areas .carousel-bookend svg { width: 16px; height: 16px; }
}

.socg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.socg-card { display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; transition: border-color 160ms ease; }

.socg-card:hover { border-color: rgba(249, 249, 249, 0.22); }

.socg-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 11px 18px; background: var(--chrome); border-bottom: 1px solid var(--hairline); }

.socg-run { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: rgba(249, 249, 249, 0.66); }

.socg-folio { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(249, 249, 249, 0.38); white-space: nowrap; }

.socg-card-body { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; background: var(--mock); padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2vw, 22px) clamp(14px, 2vw, 18px); }

.socg-card-body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(176, 69, 229, 0.05) 1px, transparent 1.4px), radial-gradient(circle, rgba(249, 249, 249, 0.028) 1px, transparent 1.4px); background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px; -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 32%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 32%, transparent 78%); }

.socg-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px var(--space-xs); margin-bottom: 10px; }

.socg-title { margin: 0; font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(249, 249, 249, 0.88); }

.socg-no { font-family: var(--mono); font-weight: 600; letter-spacing: 0.08em; color: rgba(249, 249, 249, 0.45); }

.socg-keys { display: inline-flex; align-items: center; gap: var(--space-xs); }

.socg-key { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(249, 249, 249, 0.62); }

.socg-swatch { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }

.socg-swatch-o { background: rgba(52, 211, 153, 0.9); }

.socg-swatch-n { background: rgba(251, 191, 36, 0.9); }

.socg-unit { margin: 0 0 10px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(249, 249, 249, 0.42); }

.socg-chart-wrap { flex: 1; display: flex; align-items: center; margin-bottom: 12px; }

.socg-chart { display: block; width: 100%; height: auto; }

.socg-chart text { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.socg-ax { fill: var(--axis-ink); font-size: 9.5px; }

.socg-lab { fill: rgba(249, 249, 249, 0.55); font-size: 9.5px; letter-spacing: 0.08em; }

.socg-val { fill: rgba(249, 249, 249, 0.92); font-size: var(--text-xs); font-weight: 600; }

.socg-band-lab { fill: rgba(249, 249, 249, 0.5); font-size: 8.5px; letter-spacing: 0.06em; }

.socg-ann text { fill: rgba(249, 249, 249, 0.55); font-size: 9px; }

.socg-peak text { fill: #34d399; font-size: 11.5px; font-weight: 600; }

.socg-take { margin: 0; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: var(--text-xs); line-height: 1.55; color: var(--muted); }

.socg-take strong { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: rgba(249, 249, 249, 0.92); }

.socg-also { margin: clamp(20px, 3vw, 26px) auto 0; max-width: 840px; text-align: center; font-size: 1.28rem; line-height: 1.7; color: rgba(249, 249, 249, 0.55); }

.socg-also-no { font-family: var(--mono); font-size: 1.184rem; color: rgba(249, 249, 249, 0.4); }

.socg-dot { color: rgba(249, 249, 249, 0.18); padding: 0 2px; }

.socg-method { margin: var(--space-xs) auto var(--section-space-xs); max-width: 860px; text-align: center; }

.socg-method-txt { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.6; color: rgba(249, 249, 249, 0.52); }

.socg-source { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(249, 249, 249, 0.38); }

@media (prefers-reduced-motion: no-preference) {
.socg-motion .socg-arc .socg-line-o, .socg-motion .socg-arc .socg-line-n { stroke-dasharray: 1; stroke-dashoffset: 1; }

.socg-motion .socg-arc .socg-area-o, .socg-motion .socg-arc .socg-area-n, .socg-motion .socg-arc .socg-band, .socg-motion .socg-arc .socg-ann, .socg-motion .socg-arc .socg-peak { opacity: 0; }

.socg-motion .socg-arc.socg-play .socg-line-o { stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms cubic-bezier(0.65, 0, 0.35, 1); }

.socg-motion .socg-arc.socg-play .socg-line-n { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.65, 0, 0.35, 1) 350ms; }

.socg-motion .socg-arc.socg-play .socg-area-o, .socg-motion .socg-arc.socg-play .socg-area-n { opacity: 1; transition: opacity 500ms linear 700ms; }

.socg-motion .socg-arc.socg-play .socg-band { opacity: 1; transition: opacity 300ms ease; }

.socg-motion .socg-arc.socg-play .socg-band:nth-of-type(1) { transition-delay: 1200ms; }

.socg-motion .socg-arc.socg-play .socg-band:nth-of-type(2) { transition-delay: 1240ms; }

.socg-motion .socg-arc.socg-play .socg-band:nth-of-type(3) { transition-delay: 1280ms; }

.socg-motion .socg-arc.socg-play .socg-band:nth-of-type(4) { transition-delay: 1320ms; }

.socg-motion .socg-arc.socg-play .socg-band:nth-of-type(5) { transition-delay: 1360ms; }

.socg-motion .socg-arc.socg-play .socg-band:nth-of-type(6) { transition-delay: 1400ms; }

.socg-motion .socg-arc.socg-play .socg-band:nth-of-type(7) { transition-delay: 1440ms; }

.socg-motion .socg-arc.socg-play .socg-ann { opacity: 1; transition: opacity 300ms ease 1650ms; }

.socg-motion .socg-arc.socg-play .socg-peak { opacity: 1; transition: opacity 300ms ease 1750ms; }

.socg-motion .socg-arc.socg-still .socg-line-o, .socg-motion .socg-arc.socg-still .socg-line-n, .socg-motion .socg-arc.socg-still .socg-area-o, .socg-motion .socg-arc.socg-still .socg-area-n, .socg-motion .socg-arc.socg-still .socg-band, .socg-motion .socg-arc.socg-still .socg-ann, .socg-motion .socg-arc.socg-still .socg-peak { transition: none; }
}

@media (max-width: 880px) {
.socg-grid { grid-template-columns: 1fr; gap: var(--space-xs); }
}

@media (max-width: 560px) {
.socg-card-head { padding: 10px var(--space-xs); }

.socg-arc-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.socg-arc-scroll .socg-arc { min-width: 460px; }
}

.hva-stat {
  color: var(--yellow);
  font-weight: 600;
}

.socg-arc-full {
  margin-bottom: 18px;
}

.socg-arc-full .socg-card {
  max-width: 100%;
  margin: 0 auto;
}

.socg-findings-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: var(--section-space-xs);
  align-items: stretch;
}

.socg-findings-row .socg-card {
  display: flex;
  flex-direction: column;
}

.socg-findings-row .socg-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.socg-findings-row .socg-chart-wrap {
  flex: none;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.socg-findings-row .socg-chart {
  width: 100%;
  height: 100%;
}

@media (max-width: 820px) {
.socg-findings-row { grid-template-columns: 1fr; }
}

.hva-root .hva-stage::before { content: none; }

.hva-root .hva-engine { display: flex; flex-direction: column; }

.hva-root .hva-mark {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-pill, 999px); border: 1px solid;
}

.hva-root .hva-mark.is-sample {
  color: rgba(255, 238, 153, 0.9); border-color: rgba(255, 238, 153, 0.4);
  background: rgba(255, 238, 153, 0.07);
}

.hva-root .hva-mark.is-record {
  color: rgba(113, 224, 184, 0.92); border-color: rgba(113, 224, 184, 0.42);
  background: rgba(113, 224, 184, 0.07);
}

.hva-root .hva-cl { display: flex; align-items: center; gap: 8px; }

.hva-try {
  display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-xs);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--hairline-2, rgba(249, 249, 249, 0.13));
  border-radius: var(--r-pill, 999px);
  background: rgba(249, 249, 249, 0.04);
  color: rgba(249, 249, 249, 0.85); font-family: var(--body);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.hva-try .hva-try-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 238, 153, 0.14); color: var(--yellow);
  font-size: 13px; line-height: 1;
  transition: transform 180ms ease, background-color 180ms ease;
}

.hva-try:hover {
  color: var(--ink); border-color: rgba(255, 238, 153, 0.45);
  background: rgba(255, 238, 153, 0.06);
}

.hva-try:hover .hva-try-arrow { transform: translateY(2px); background: rgba(255, 238, 153, 0.22); }

@media (prefers-reduced-motion: reduce) {
.hva-try, .hva-try .hva-try-arrow { transition: none; }

.hva-try:hover .hva-try-arrow { transform: none; }
}

.hva-root .hva-mini { font-size: 11px; }

.hva-root .hva-chip { font-size: 11.5px; }

.hva-root .hva-cl span { font-size: 10.5px; }

.hva-root .hva-bname { width: 118px; font-size: 12px; }

.hva-root .hva-bval { width: 52px; font-size: 12px; }

.hva-root .hva-out { font-size: 11.5px; }

.hva-root .hva-ev-label { font-size: 10.5px; }

.hva-root .hva-status { font-size: 10.5px; }

#assessment-areas .svx-vh-name { font-size: 11px; }

#assessment-areas .svx-fchip { font-size: 10.5px; }

#assessment-areas .svx-brow-top { font-size: 12px; }

#assessment-areas .svx-bval { font-size: 12px; }

#assessment-areas .svx-list li { font-size: 12px; min-height: 30px; }

#assessment-areas .svx-li-val { font-size: 12px; }

#assessment-areas .svx-schip { font-size: 10.5px; }

#assessment-areas .svx-ptag { font-size: 10.5px; }

#assessment-areas .svx-read { font-size: 11px; }

#assessment-areas .svx-key { font-size: 11px; }

#assessment-areas .svx-map-legend { font-size: 11px; }

#assessment-areas .question-label { font-size: 1.312rem; }

.ib-tag { font-size: 11px; }

.ib-opp-label { font-size: 11px; }

.ib-fine { font-size: 12.5px; }

.ib-listbox .ib-opt-miss .ib-opt-n { white-space: normal; }

.ib-listbox .ib-opt-miss .ib-opt-m { color: var(--yellow); }

.socg-run { font-size: 11px; }

.socg-folio { font-size: 10.5px; }

.socg-unit { font-size: 10.5px; }

.socg-ax { font-size: 11.5px; }

.socg-lab { font-size: 11px; }

.socg-val { font-size: var(--text-s); }

.socg-band-lab { font-size: 10.5px; }

.socg-take { font-size: var(--text-s); }

.socg-also { font-size: var(--text-xs); }

.socg-method-txt { font-size: 1.28rem; }

.socg-source { font-size: 10.5px; }

#assessment-areas .svx-grade-gap { background: rgba(255, 143, 143, 0.05); }

#assessment-areas .svx-grade-watch { background: rgba(255, 238, 153, 0.045); }

#assessment-areas .svx-grade-ok { background: rgba(113, 224, 184, 0.05); }

.ib-samples[hidden] { display: none; }

.socg-folio { color: rgba(249, 249, 249, 0.62); }

body {
  overflow-x: hidden;
}

.brxe-block.carousel-dots {
  flex-direction: row;
}

.fp-bg-grid, .fp-bg-grid-fine, .fp-bg-dots, .fp-bg-dots-sparse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.fp-bg-grid {
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}

.fp-bg-grid-fine {
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
}

.fp-bg-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.fp-bg-dots-sparse {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
}

.fp-bg-fade {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}

.fp-tex-soft {
  opacity: 0.7;
}

.ib-convert a.btn-primary, .ib-convert a.btn-secondary {
  color: var(--white);
  border-radius: var(--radius-circle);
}

.ib-convert a.btn-secondary {
  border-color: var(--white);
}

.ib-convert a.btn-primary:hover, .ib-convert a.btn-secondary:hover {
  color: var(--white);
}

.hva-stage {
  display: flex;
  flex-direction: column;
}

.hva-stage .hva-try {
  align-self: center;
}

.hva-root a.hva-try {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.hva-root a.hva-try:hover {
  color: var(--white);
  border-color: var(--white);
}

.ib-frame {
  overflow: visible;
}

#instant-benchmark .brxe-container {
  overflow: visible;
}

#assessment-areas .brxe-container {
  overflow: visible;
}

#assessment-areas .view-mock {
  height: 240px;
}

#assessment-areas .svx-read {
  flex-shrink: 0;
}

#instant-benchmark {
  position: relative;
  z-index: 2;
}

section#instant-benchmark, section#assessment-areas {
  overflow: visible;
}

.ib-frame .ib-bar {
  border-radius: var(--r-lg, 18px) var(--r-lg, 18px) 0 0;
}

.ib-frame .ib-body {
  border-radius: 0 0 var(--r-lg, 18px) var(--r-lg, 18px);
}

.socg-card {
  transition: transform 0.2s ease-out;
}

.socg-card:hover {
  transform: translateY(-4px);
}

.hva-frame {
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}

@media (min-width: 992px) {
.socg-arc-full .socg-ax { font-size: 7.5px; }

.socg-arc-full .socg-lab { font-size: 7px; }

.socg-arc-full .socg-peak text { font-size: 7.5px; }

.socg-arc-full .socg-ann text { font-size: 6px; }

.socg-arc-full .socg-band-lab { font-size: 6.5px; }
}

/* ==== r12 packet: r10-frag-css ==== */
/* r11 (ruled 7/28): cards sized down so the title and the whole screenshot
   share one frame at laptop 100% zoom; min() covers phones too. */
#assessment-areas { --vw-card: min(520px, 86vw); }
/* r11: uniform cards (ruled 7/28). One shared shot aspect close to three of
   the four screenshots; the head flexes so every image sits flush at the
   card's bottom edge and all cards render the same height. */
#assessment-areas .view-card { min-height: 0; display: flex; flex-direction: column; }
/* Larger card, and the active one is centred so the neighbours peek in on both
   sides - reads as one continuous carousel rather than a fixed row of three. */
#assessment-areas .views-grid > .view-card, #assessment-areas .view-card {
  flex: 0 0 var(--vw-card); max-width: var(--vw-card); }
#assessment-areas .views-grid { padding-left: calc((100% - var(--vw-card)) / 2); gap: 24px; }
#assessment-areas .view-slide-head { padding: 14px 16px 10px; min-height: 0; flex: 1 0 auto; }
#assessment-areas .view-name { margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 600; color: #f9f9f9; }
#assessment-areas .view-fact { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(249,249,249,0.92); }
#assessment-areas .view-shot { margin: 0; background: #0b0b12; overflow: hidden; display: block; position: relative; cursor: zoom-in; flex: 0 0 auto; aspect-ratio: 1.29; max-height: 340px; }
#assessment-areas .view-shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; position: relative; z-index: 1; }
#assessment-areas .view-shot .vshot-blur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(22px) saturate(1.15); transform: scale(1.12); opacity: 0.7; }
#assessment-areas .view-shot:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }
#assessment-areas .view-zoom { position: absolute; z-index: 2; right: 9px; bottom: 9px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(11,11,18,0.88); border: 1px solid rgba(249,249,249,0.24);
  color: rgba(249,249,249,0.9); pointer-events: none; transition: border-color 140ms ease, color 140ms ease; }
#assessment-areas .view-zoom svg { width: 15px; height: 15px; }
#assessment-areas .view-card:hover .view-zoom { border-color: rgba(249,249,249,0.5); color: #f9f9f9; }
/* Lightbox: the card carries a whole panel scaled down; this is the readable path. */
.vlb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;
  padding: 30px; background: rgba(5,5,9,0.93); }
.vlb.open { display: flex; }
.vlb-inner { position: relative; display: flex; flex-direction: column; gap: 14px;
  width: min(1080px, 88vw); max-height: 86vh; padding: 20px; border-radius: 14px;
  background: #14141a; border: 1px solid rgba(249,249,249,0.14); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.vlb-stage { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid rgba(249,249,249,0.12); background: #0b0b12; }
.vlb-blur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(28px) saturate(1.15); transform: scale(1.12); opacity: 0.7; }
.vlb-img { position: relative; z-index: 1; display: block; width: 100%; max-height: 66vh; height: auto; object-fit: contain; }
.vlb-cap { font-size: 14px; line-height: 1.55; color: rgba(249,249,249,0.9); padding-right: 44px; }
.vlb-cap b { display: block; font-size: 17px; font-weight: 600; color: #f9f9f9; margin-bottom: 4px; }
.vlb-close { position: absolute; z-index: 3; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(249,249,249,0.28); background: rgba(11,11,18,0.9); color: #f9f9f9; font-size: 19px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.vlb-close:hover { border-color: rgba(249,249,249,0.55); }
#hero *, #assessment-areas *, #instant-benchmark *, #state-of-cra *, #three-layers * { text-transform: none !important; }
/* No off-white and no light grey anywhere in the CRAi sections. The earlier
   pass listed selectors by hand and bumped them to 0.92 alpha, which is still
   off-white, and it missed everything from 0.45 to 0.88 plus the Bricks body
   grey (#d9d9d9). Set the floor for ALL text instead, then put the deliberate
   hues back below - that way a new element cannot reintroduce the problem. */
/* Explicit list, not `*`: a universal !important rule across these five
   subtrees forces a style recalc on every DOM mutation, and the hero rewrites
   its question text every ~40ms while typing. */
#hero .hva-title, #hero .hva-out, #hero .hva-sub, #hero .hva-chip, #hero .hva-mini,
#hero .hva-cl, #hero .hva-cl span, #hero .hva-head, #hero .hva-qtext,
#assessment-areas .view-name, #assessment-areas .view-fact,
#instant-benchmark .ib-title, #instant-benchmark .ib-line, #instant-benchmark .ib-chk,
#instant-benchmark .ib-samples-label, #instant-benchmark .ib-panel-label,
#instant-benchmark .ib-panel-sum, #instant-benchmark .ib-aali, #instant-benchmark .ib-aa-n,
#instant-benchmark .ib-chip, #instant-benchmark .ib-tag, #instant-benchmark .ib-st,
#instant-benchmark .ib-bval, #instant-benchmark .ib-blab, #instant-benchmark .ib-ident,
#instant-benchmark .ib-unk-1, #instant-benchmark .ib-unk-2, #instant-benchmark .ib-readout,
#instant-benchmark .ib-convert-sub, #instant-benchmark .ib-fine, #instant-benchmark .ib-sources,
#instant-benchmark .ib-opp-label, #instant-benchmark .ib-opp-t, #instant-benchmark .ib-hint,
#state-of-cra .socg-run, #state-of-cra .socg-title, #state-of-cra .socg-key,
#state-of-cra .socg-unit, #state-of-cra .socg-take, #state-of-cra .socg-take strong,
#state-of-cra .socg-no, #state-of-cra .soc-tag,
#three-layers .brxe-text-basic, #three-layers .crai-layers__list, #three-layers .crai-layers__list li,
#three-layers .tl-viz-label, #three-layers .tl-readout, #three-layers .tl-console-title,
#three-layers .tl-res-head, #three-layers .tl-res-name, #three-layers .tl-res-val,
#three-layers .tl-res-footlab, #three-layers .tl-echip, #three-layers .tl-coming,
#state-of-cra .crai-ghost-link { color: #f9f9f9 !important; }
/* Deliberate hues, restored: accent word, stat highlights, layer pills, the
   console caret, the amber Coming-soon tag, and the ask link. */
#hero .h1-accent { color: #ba6ae2 !important; }
#hero .hva-stat, #instant-benchmark .ib-fine a { color: #ffee99 !important; }
#three-layers .pill__text { color: #cfbbf7 !important; }
#three-layers .tl-coming-tag { color: #ffc44d !important; }
#three-layers .tl-pmark { color: #6b2ee5 !important; }
/* Only the FILLED buttons take dark text. Outline buttons (btn--outline) sit
   on the dark background with a white border, so they stay white - scoping
   this to .bricks-button turned "Schedule a Demo" dark-on-dark. */
#hero .fr-cta-section-alpha__button-primary, #assessment-areas .fr-cta-section-alpha__button-primary,
#instant-benchmark .fr-cta-section-alpha__button-primary, #state-of-cra .fr-cta-section-alpha__button-primary,
#three-layers .fr-cta-section-alpha__button-primary { color: #1a1a1a !important; }
#instant-benchmark .ib-go, #instant-benchmark .ib-go-a, #instant-benchmark .ib-go-b { color: #111 !important; }
/* The search field keeps its grey placeholder - the one exception on the page. */
#instant-benchmark #ib-input::placeholder { color: rgba(249,249,249,0.55) !important; }
/* Chart labels are SVG, so they take fill, not color - the axis ticks, legends
   and value labels were the faintest text on the page at 0.5 alpha. */
#hero svg text, #hero svg tspan,
#state-of-cra svg text, #state-of-cra svg tspan,
#three-layers svg text, #three-layers svg tspan { fill: #f9f9f9 !important; }
/* The peak annotation on the Arc chart is deliberately green. */
#state-of-cra .socg-peak text, #state-of-cra .socg-peak tspan { fill: #34d399 !important; }
/* Frames whose explanatory subline was dropped must not leave its gap behind. */
#hero .hva-sub:empty { display: none; }
/* The lookup widget moves focus to the result title (and to the not-found
   line) so assistive tech announces the new preview. Neither is tab
   reachable - both are tabindex="-1" - so the site's global focus ring only
   ever shows up as a stray orange box around the bank name. Suppress it on
   these two programmatic targets only; real focus targets keep their ring. */
#ib-res-title:focus, #ib-res-title:focus-visible,
#ib-ident:focus, #ib-ident:focus-visible,
#ib-unk-focus:focus, #ib-unk-focus:focus-visible { outline: none; }
/* The bank name printed twice: once as this title and again at the head of
   the identity line below it. Drop the title; the identity line carries the
   name plus regulator, state, assets and exam class on one line. */
#ib-res-title { display: none; }
/* The link-look under the gap value was #ib-opp-t::after - a 1px absolute
   bar at bottom:-4px spanning the text. Killing that, NOT the row box's
   own bottom border (an earlier pass removed the wrong one and left the
   rounded box open at the bottom). */
#instant-benchmark #ib-opp-t::after { content: none !important; display: none !important; }

/* r10g: layers rendered as layers. Three nested plates - Public Baseline
   spans the whole section, Private Data's surface starts at column 2 and
   runs under Customization, Customization rides on top. Plus badges sit
   on the two seams. Below 992px the plates vanish and the panels fall
   back to their own stacked card styles. */
@media (min-width: 992px) {
  #three-layers .crai-layers__flow { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 0; column-gap: 0; }
  #three-layers .crai-layers__panel { display: block; position: relative; z-index: 5; background: none; background-image: none; border: 0; backdrop-filter: none; box-shadow: none; padding: 72px 44px 64px 44px; }
  #three-layers div.crai-layers__panel:nth-of-type(2) { padding-left: 52px; }
  #three-layers div.crai-layers__panel:nth-of-type(3) { padding-left: 52px; padding-right: 60px; padding-bottom: 84px; }
  #three-layers .tl-plate { position: absolute; border-radius: 14px; border: 1px solid transparent; pointer-events: none; }
  #three-layers .tl-plate1 { inset: 0; z-index: 1; background: #000; border-color: rgba(107,46,229,.3); }
  #three-layers .tl-plate2 { top: 18px; bottom: 18px; left: 33.333%; right: 18px; z-index: 2; background: rgba(19,6,45,.75); border-color: rgba(107,46,229,.5); box-shadow: -16px 0 34px rgba(0,0,0,.55); }
  #three-layers .tl-plate3 { top: 36px; bottom: 36px; left: 66.666%; right: 36px; z-index: 3; background: rgba(31,11,66,.8); border-color: rgba(139,92,246,.65); box-shadow: -16px 0 34px rgba(0,0,0,.55); }
  #three-layers .tl-join { position: absolute; z-index: 4; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: #0a0612; border: 1px solid rgba(139,92,246,.65); color: #c9b2ff; font-weight: 300; font-size: 44px; line-height: 60px; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.6); }
  #three-layers .tl-join1 { left: 33.333%; top: 50%; }
  #three-layers .tl-join2 { left: 66.666%; top: 50%; }
}
@media (max-width: 991.98px) {
  /* Same layer language, rotated vertical: each panel is its own plate,
     overlapping the one above; plus badges sit on the horizontal seams. */
  #three-layers .tl-plate, #three-layers .tl-join { display: none; }
  #three-layers .crai-layers__flow { row-gap: 0; }
  #three-layers .crai-layers__panel { grid-template-columns: 1fr; position: relative; }
  #three-layers div.crai-layers__panel:nth-of-type(1) { z-index: 1; padding-bottom: calc(var(--space-m) + 30px); }
  #three-layers div.crai-layers__panel:nth-of-type(2) { z-index: 2; width: auto; align-self: stretch; margin: -26px 14px 0; background-color: #0e0522; box-shadow: 0 -16px 34px rgba(0,0,0,.55); padding-bottom: calc(var(--space-m) + 30px); }
  #three-layers div.crai-layers__panel:nth-of-type(3) { z-index: 3; width: auto; align-self: stretch; margin: -26px 28px 0; background-color: #1a0938; box-shadow: 0 -16px 34px rgba(0,0,0,.55); }
  #three-layers div.crai-layers__panel:nth-of-type(2)::before,
  #three-layers div.crai-layers__panel:nth-of-type(3)::before {
    content: '+'; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);
    width: 52px; height: 52px; border-radius: 50%; background: #0a0612;
    border: 1px solid rgba(139,92,246,.65); color: #c9b2ff; font-weight: 300;
    font-size: 36px; line-height: 48px; text-align: center; z-index: 4;
    box-shadow: 0 6px 24px rgba(0,0,0,.6);
  }
}

/* r11: one scheme across the hero chart and the lookup widget chart, real
   colors only (ruled 7/28: no gray/white/black shades on data marks).
   Solid purple #6b2ee5 = the bank, magenta #b045e5 = peer median, amber
   #ffc44d = the geographic market. Row order canon is the widget's
   (bank / peer median / market); the hero frame-1 rows were reordered to
   match in both the rotation data and the static markup. The hero trend
   frame's peers line was rgba(249,249,249,.38) gray - same ruling. */
#hero .hva-bfill.top { background: #b045e5 !important; }
#hero .hva-bfill.peer { background: #ffc44d !important; }
#instant-benchmark .ib-fill.ib-med { background: #b045e5 !important; }
#instant-benchmark .ib-fill.ib-top { background: #ffc44d !important; }
#hero .hva-trend .ln.peers { stroke: #b045e5 !important; }
#hero .hva-trend .dot.peers { fill: #b045e5 !important; }
#hero .hva-trend .lbl.peers { fill: #d886f0 !important; }

/* r11: #ib-opp is an anchor now (static CTA to the demo page). Keep the
   box look, no link underline at rest, underline the sentence on hover. */
#instant-benchmark a.ib-opp { text-decoration: none; cursor: pointer; }
#instant-benchmark a.ib-opp:hover .ib-opp-t, #instant-benchmark a.ib-opp:focus-visible .ib-opp-t { text-decoration: underline; text-underline-offset: 3px; }

/* r11 (ruled 7/28): uniform section buffers page-wide, a notch smaller.
   Before: hero 43px, content sections 73px, three-layers bottom 0,
   CTA section 56/48, and a 41.6px ACSS container gap - now every CRAi
   section runs 48px vertical padding with a 36px container gap. The
   carousel dots' stray 18px top margin folds into the gap. */
section.crai-section, #brxe-hgspyc { padding-top: 48px !important; padding-bottom: 48px !important; }
section.crai-section > .brxe-container, #brxe-hgspyc > .brxe-container { row-gap: 36px !important; }
#assessment-areas .carousel-dots { margin-top: 0 !important; }

/* r11: data-protection note under the Private Data layer + pop-out (Abby
   feedback 7/28). Claims sourced from the MidFirst proposal (SOC 2 Type 2,
   isolated AWS instance) and legal Schedule A (no model training, RBAC,
   data lineage). SSO deliberately not claimed on the public page. */
#three-layers .tl-dp { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: #f9f9f9; }
#three-layers .tl-dp-link { color: #c9b2ff; text-decoration: underline; text-underline-offset: 3px; }
#three-layers .tl-dp-link:hover { color: #e0d1ff; }
.tl-dpm { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5,5,9,.93); }
.tl-dpm[hidden] { display: none; }
.tl-dpm-box { position: relative; width: min(600px, 100%); max-height: 85vh; overflow: auto; background: #140729; border: 1px solid rgba(139,92,246,.65); border-radius: 12px; padding: 30px 34px 26px; box-shadow: 0 18px 60px rgba(0,0,0,.7); outline: none; }
.tl-dpm-box:focus, .tl-dpm-box:focus-visible { outline: none !important; box-shadow: 0 18px 60px rgba(0,0,0,.7) !important; }
.tl-dpm-box h3 { margin: 0 0 18px; font-size: 21px; line-height: 1.3; color: #f9f9f9; }
.tl-dpm-list { margin: 0; }
.tl-dpm-list dt { font-size: 15px; font-weight: 600; color: #f9f9f9; margin: 14px 0 4px; }
.tl-dpm-list dt:first-child { margin-top: 0; }
.tl-dpm-list dd { margin: 0; font-size: 14px; line-height: 1.6; color: #f9f9f9; }
.tl-dpm-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(139,92,246,.3); font-size: 14px; line-height: 1.6; color: #f9f9f9; }
.tl-dpm-foot a { color: #c9b2ff; text-decoration: underline; text-underline-offset: 3px; }
.tl-dpm-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: #0a0612; border: 1px solid rgba(139,92,246,.65); color: #c9b2ff; font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; }
.tl-dpm-x:hover { color: #f9f9f9; border-color: rgba(139,92,246,1); }

/* ==== r12 packet: copypass-hva-overrides ==== */
/* r9 copy pass 2026-07-21 - these rules move into crai.css at delivery */
@media (min-width: 992px) {
  .hva-root .crai-hero__grid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
}
.hva-root .hva-work { grid-template-columns: 1fr; }
#hero.hva-root { padding-top: clamp(32px,4.2vw,56px); padding-bottom: clamp(32px,4.2vw,56px); }
/* lens tabs on top: static chrome, highlight moves with the running question */
.hva-root .hva-rail { display: block; border-left: 0; border-top: 0; padding-left: 0; padding-top: 0; margin-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.hva-root .hva-rail .hva-mini { display: none; }
.hva-root .hva-rail-chips { flex-direction: row; flex-wrap: wrap; gap: 2px; }
.hva-root .hva-out { white-space: nowrap; flex: 0 0 auto; font-size: 11.5px; line-height: 1.3; padding: 5px 10px 7px;
  border: 0; border-radius: 6px 6px 0 0; background: transparent; box-shadow: inset 0 -2px 0 transparent;
  color: rgba(249,249,249,0.55);
  transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; }
.hva-root .hva-out i { display: none; }
.hva-root .hva-out.live { background: rgba(107,46,229,0.14); box-shadow: inset 0 -2px 0 rgba(107,46,229,0.9); color: var(--ink, #F9F9F9); }
.hva-root.hva-motion .hva-out { opacity: 1; transform: none; }
/* sources band at the bottom: static, no entrance animation */
.hva-root.hva-motion .hva-chip { opacity: 1; transform: none; transition: none; }
.hva-root .hva-band { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 0 0; border-bottom: 0; border-top: 1px solid var(--hairline); }
.hva-root .hva-band .hva-mini { margin: 0; padding-top: 5px; flex: 0 0 auto; }
.hva-root .hva-band-chips { gap: 5px; }
.hva-root .hva-chip { font-size: 10.5px; padding: 2px 8px; }
/* tighter vertical rhythm so the frame matches the copy column height */
.hva-root .hva-body { padding: 12px 18px 12px; }
.hva-root .hva-engine { padding: 11px 14px 8px; }
.hva-root .hva-head { min-height: 40px; }
.hva-root .hva-sub { min-height: 36px; }
.hva-root .hva-bars { min-height: 76px; margin-top: 8px; gap: 7px; }
.hva-root .hva-bar { padding: 8px 14px; }
.hva-root .hva-cl { flex-wrap: nowrap; margin-top: 9px; padding-top: 8px; }
.hva-root .hva-cl span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.hva-root .hva-mark { flex: 0 0 auto; }
.hva-root .hva-bar { padding: 7px 14px; }
.hva-root .hva-title { line-height: 1.4; }
.hva-root .hva-cl span { line-height: 1.4; }
.hva-root .hva-band .hva-mini { padding-top: 3px; }
.hva-root .hva-q { font-size: 14px; min-height: 26px; padding-bottom: 9px; }
.hva-root .hva-head { font-size: 15px; }
.hva-root .hva-sub { font-size: 13.5px; }
.hva-root .hva-bname { width: 128px; font-size: 13px; }
.hva-root .hva-bval { width: 56px; font-size: 13px; }
.hva-root .hva-cl span { font-size: 11px; }
.hva-root .hva-mini { font-size: 11px; }
.hva-root .hva-viz { opacity: 0; transition: opacity 0.5s ease; min-height: 112px; }
.hva-root .hva-viz.on { opacity: 1; }
.hva-root .hva-shot img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center 40%; border-radius: 8px; border: 1px solid var(--hairline-2); }
.hva-root .hva-trend svg { width: 100%; height: 126px; display: block; }
.hva-root .hva-trend .ax { stroke: rgba(249,249,249,0.16); }
.hva-root .hva-trend .yr { fill: rgba(249,249,249,0.55); font-size: 10px; }
.hva-root .hva-trend .ln { fill: none; stroke-width: 2; stroke-linejoin: round; }
.hva-root .hva-trend .ln.you { stroke: var(--purple, #6B2EE5); }
.hva-root .hva-trend .ln.peers { stroke: rgba(249,249,249,0.38); stroke-dasharray: 5 4; }
.hva-root .hva-trend .dot.you { fill: var(--purple, #6B2EE5); }
.hva-root .hva-trend .dot.peers { fill: rgba(249,249,249,0.5); }
.hva-root .hva-trend .lbl { font-size: 10.5px; fill: rgba(249,249,249,0.82); }
.hva-root .hva-goal { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.hva-root .hva-goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.hva-root .hva-goal-name { font-size: 12px; color: rgba(249,249,249,0.82); }
.hva-root .hva-goal-note { font-size: 10.5px; color: rgba(249,249,249,0.55); white-space: nowrap; flex: 0 0 auto; }
.hva-root .hva-goal-track { position: relative; height: 8px; border-radius: 99px; background: rgba(249,249,249,0.07); }
.hva-root .hva-goal-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--purple, #6B2EE5); transition: width 0.65s cubic-bezier(0.16,1,0.3,1); }
.hva-root .hva-goal-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; }
.hva-root .hva-goal-tick.s { background: rgba(249,249,249,0.55); }
.hva-root .hva-goal-tick.o { background: rgba(255,238,153,0.9); }
.hva-root .hva-mini { line-height: 1.4; }
.hva-root .hva-chip { line-height: 1.25; }

.view-team { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent-semi-light); margin: 0 0 4px; }

[data-carousel-track].animate { transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* --- CRAi Insights section: match the page's card language (views cards) --- */
#state-of-cra .socg-card-head { display: none; }
#state-of-cra .socg-card { background: rgb(27,27,32); border: 1px solid rgba(249,249,249,0.13); border-radius: 14px; }
#state-of-cra .socg-card-body { padding: 14px 18px 18px; }
#state-of-cra .socg-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(249,249,249,0.13); margin-bottom: 10px; }
#state-of-cra .socg-title { font-size: 11px; line-height: 1.6; letter-spacing: 0.88px; color: rgba(249,249,249,0.62); }
#state-of-cra .soc-tag { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.6; letter-spacing: 0.42px; color: rgba(249,249,249,0.55); border: 1px solid rgba(249,249,249,0.13); border-radius: 999px; padding: 2px 8px; white-space: nowrap; flex: none; }
#state-of-cra .soc-tag-in { color: rgba(52,211,153,0.9); border-color: rgba(52,211,153,0.35); }
#state-of-cra .socg-unit { font-size: 10.5px; letter-spacing: 0.6px; color: rgba(249,249,249,0.62); line-height: 1.7; margin: 0 0 6px; }
#state-of-cra .socg-take { font-size: 14.5px; line-height: 1.55; color: rgba(249,249,249,0.82); padding-top: 12px; border-top: 1px solid rgba(249,249,249,0.10); margin-top: 12px; }
#state-of-cra .socg-ax { font-size: 11px; fill: rgba(249,249,249,0.6); }
#state-of-cra .crai-cta-col, #brxe-hgspyc .crai-cta-col { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
#state-of-cra .crai-footnote { color: rgba(249,249,249,0.82); }
#state-of-cra .crai-cta-col .crai-stat__label { font-size: 12.5px; line-height: 1.6; color: rgba(249,249,249,0.55); max-width: 720px; }
#state-of-cra .fr-cta-section-alpha__button-wrapper, #brxe-hgspyc .fr-cta-section-alpha__button-wrapper { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; width: 100%; }
#state-of-cra .socg-unit { text-transform: none; letter-spacing: 0.2px; font-size: 11.5px; }
#state-of-cra .socg-take strong, #state-of-cra .socg-take b { font-family: inherit; font-weight: 700; }
#state-of-cra .socg-lab { text-transform: none; }
#state-of-cra .socg-arc-full { max-width: 960px; margin-left: auto; margin-right: auto; }

/* --- Three-layers section: readability nudges --- */
#three-layers .tl-rec-meta { color: rgba(249,249,249,0.6); }
#three-layers .tl-viz-label { color: rgba(249,249,249,0.62); }
#three-layers .tl-cohort, #three-layers .tl-res-head { font-size: 10px; }
#three-layers .tl-echip { font-size: 10px; }
#three-layers .tl-goal-chart { max-width: 440px; margin: 0 auto; display: block; }
#three-layers .tl-viz-label { text-transform: none; letter-spacing: 0.4px; font-size: 11.5px; }
#three-layers .tl-cohort { text-transform: none; }
#three-layers .tl-coming { font-size: 14.5px; line-height: 1.55; color: rgba(249,249,249,0.82); margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(249,249,249,0.12); }
#three-layers .tl-coming-tag { display: inline-block; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent-semi-light); border: 1px solid rgba(249,214,92,0.35); border-radius: 999px; padding: 2px 9px; margin-right: 9px; vertical-align: 1px; }
#brxe-hgspyc { padding-top: 56px; padding-bottom: 48px; }
#brxe-hgspyc .crai-footnote { margin-top: 20px; }
#three-layers .tl-viz-label { font-size: 11px; }
#three-layers .tl-readout { font-size: 11px; text-align: center; }

/* ==== r12 packet: insights cards ==== */
/* ALEX: ship with the r10-frag-css block. r12: interactive finding cards. */
#state-of-cra .socg-findings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; max-width: 1000px; margin-left: auto; margin-right: auto; }
@media (max-width: 991px) { #state-of-cra .socg-findings-row { grid-template-columns: 1fr; } }
#state-of-cra .socg-findings-row .socg-card { display: flex; flex-direction: column; }
#state-of-cra .socg-findings-row .socg-card-body { display: flex; flex-direction: column; flex: 1; justify-content: flex-start; }
#state-of-cra .socg-findings-row .socg-take { min-height: 72px; }
#state-of-cra .socg-title { font-size: 15.5px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.4; color: #f9f9f9; text-transform: none; }
#state-of-cra .socg-no { display: none; }
#state-of-cra .socg-findings-row .socg-title-row { min-height: 60px; align-items: flex-start; padding-bottom: 6px; margin-bottom: 6px; }
#state-of-cra .socg-findings-row .socg-title { font-size: 14.5px; line-height: 1.35; }
#state-of-cra .socg-findings-row .socg-unit { min-height: 38px; margin: 0 0 4px; }
#state-of-cra .socg-findings-row .socg-card-body { padding: 12px 16px 14px; }
#state-of-cra .socg-findings-row .socg-take { margin-top: 8px; padding-top: 8px; font-size: 13.5px; }
#state-of-cra .socg-findings-row .f4m-legend { margin-top: 8px; font-size: 11.5px; gap: 3px 12px; min-height: 58px; align-content: flex-start; }
#state-of-cra .socg-findings-row .socg-chart { width: 100%; height: auto; display: block; margin-top: 0; aspect-ratio: 975 / 610; }
#state-of-cra .socg-findings-row .socg-chart text.socg-val { font-size: 9.5px; font-weight: 600; }
#state-of-cra .socg-findings-row .socg-chart text.socg-band-lab { font-size: 8.5px; }
#state-of-cra .socg-findings-row .socg-chart-wrap { display: block; height: auto; margin: 0; }
.f4m-wrap { position: relative; }
.f4m-wrap svg { width: 100%; height: auto; display: block; }
.f4m-wrap svg path[data-f] { cursor: crosshair; }
/* gate fix (not in packet): the state-border mesh/overlay paths carry no
   data-f and sit on top of the counties — without this they swallow hover
   and the tooltip never fires. */
.f4m-wrap svg path:not([data-f]) { pointer-events: none; }
.f4m-tip { position: absolute; pointer-events: none; background: rgb(17,17,21); border: 1px solid rgba(249,249,249,0.2);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: rgba(249,249,249,0.85);
  min-width: 180px; z-index: 4; }
.f4m-tip .t-name { font-weight: 700; color: #f9f9f9; margin-bottom: 2px; }
.f4m-tip .t-row { display: flex; justify-content: space-between; gap: 14px; }
.f4m-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 11px; color: rgba(249,249,249,0.62); }
.f4m-legend .li { display: inline-flex; align-items: center; gap: 5px; }
.f4m-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ==== r17 packet: hero h1 match ==== */
/* hero h1 sized to the CRAi Insights masthead (44px desktop); folded from
   the standalone's #crai-hero-h1-match head block. */
h1.crai-hero-heading{font-size:clamp(34px,3.06vw,44px)!important;line-height:1.12!important}

/* ==== r17 button pass (Alex 7/30): CTAs never italic; text is white on both
   the purple-filled and the transparent/outline variants. ==== */
#brx-content .brxe-button.btn--white,
#brx-content .brxe-button.fr-cta-section-alpha__button-primary,
#brx-content .brxe-button.fr-cta-section-alpha__button-secondary,
#brx-content .brxe-button.btn--outline {
  font-style: normal !important;
  color: #fff !important;
}

/* ==== r17 button pass 2 (Alex 7/30 eve): prod rendered the primary CTAs
   with a WHITE background (env-dependent rule invisible to stylesheet
   inspection — suspected ACSS runtime sheets). Make the page deterministic:
   canon purple fill on primary, transparent on outline, white text, fixed
   hover. Literal hex on purpose — var resolution is what differed. ==== */
#brx-content .brxe-button.fr-cta-section-alpha__button-primary {
  background: #6B2EE5 !important;
}
#brx-content .brxe-button.fr-cta-section-alpha__button-primary:hover {
  background: #5a26c4 !important;
}
#brx-content .brxe-button.fr-cta-section-alpha__button-secondary,
#brx-content .brxe-button.btn--outline {
  background: transparent !important;
  border-color: #6B2EE5 !important;
}

/* ==== three-layers card polish (Alex 7/31): eyebrow pills + purple bullets.
   The chunk reuses house class NAMES (.pill etc.) but raw-HTML chunks don't
   receive Bricks global-class CSS — style them here, literals per the
   determinism rule. ==== */
#three-layers .crai-layers__panel .pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: #5B2EC9;
  border: 1px solid rgba(167, 124, 255, 0.45);
  border-radius: 999px;
  /* GH #186: more breathing room (gtm1 "adjust the padding" / bring back the
     standalone pill formatting = .pill{padding:.5rem 2rem}=8/32 at 16px root).
     Literal px per the determinism rule; the site is 10px-root so rem would
     under-render (SOP §3). More clear space below the pill too. */
  padding: 9px 28px;
  margin-bottom: 22px;
}
#three-layers .crai-layers__panel .pill__text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #E4D9FF;
  font-style: normal;
}
#three-layers .crai-layers__list li::marker { color: #A77CFF; }
#three-layers .crai-layers__list li { padding-left: 2px; }

/* GH #186 mobile (Alex specifics): bullets align flush + heading-group gets
   breathing padding so the pill/heading stack isn't cramped on small screens. */
@media (max-width: 767px) {
  #three-layers .grid-item__heading-group { padding: var(--space-m); }
}

/* GH #186 item 6: section H2s already match the hero header size.
   After the r18 prod-edit merge, the hero h1 (rgdyhc) carries an element-level
   font-size:var(--h1)!important at ID specificity, which BEATS the r17
   crai-hero-heading clamp — so the hero renders var(--h1)=54px. The content
   section h2s (fr-intro-alpha__heading) ALSO render var(--h1)=54px. Measured
   baseline: hero 54px, all four section h2s 54px — already consistent. gtm1's
   "different font sizes" was the pre-r18 state; nothing to change now. No rule
   added (verified 1440: hero 54 == sections 54; 375: hero 44.6 ~ sections 44). */

/* ==== Alex 7/31 round 2 (crai) ==== */
/* hero: kill the block padding entirely (buffer feedback) */
#brx-content #hero { padding-block: 0 !important; }
/* teaser disclaimer: pull up under the charts, center, and swap the link
   underline for a 2px bottom border */
#state-of-cra .crai-footnote {
  margin-top: -56px;
  align-self: center;
  text-align: center;
}
#state-of-cra .crai-footnote a {
  text-decoration: none !important; /* the anchor carries an inline underline */
  border-bottom: 2px solid currentColor;
}