/* ===========================================================================
   MADDS — AI POWERED BUSINESS INTELLIGENCE · page styles ("abi-")
   Visual language: "the thinking machine" — a dark violet field, a drifting
   neural constellation, an insight deck, a two-lane human + AI duet, a
   nutrition-label model facts panel, stage-lit scenario panels and a
   prediction-vs-actual plot.

   Sections (each claims one background pattern from data-suite-base.css):
     hero        · dots   — the neural constellation
     01 stack    · hatch  — the insight deck
     02 duet     · waves  — the two lanes
     03 facts    · grid   — the ruled model label
     04 theatre  · rings  — the stage spotlights
     05 plot     · dots   — the scatter (reused: six sections, five patterns;
                            the hero's tile sits under its full-bleed canvas)

   Base classes (.ds-*) come from data-suite-base.css and are never redefined
   here — only page-level colour variables are set on body.
   =========================================================================== */

body {
    --acc-1: #8E4DFF;
    --acc-2: #FF5C8A;
    --ds-field: linear-gradient(180deg, #0c0624 0%, #140a35 46%, #1c0c42 100%);
    --ds-wash: rgba(142, 77, 255, .32);
    --ds-wash-2: rgba(255, 92, 138, .16);
    --ds-orb-a: rgba(142, 77, 255, .58);
    --ds-orb-b: rgba(255, 92, 138, .38);
}

/* in-page anchor targets (hero ghost CTA jumps to section 04) */
.abi-stack-sec,
.abi-duet-sec,
.abi-facts-sec,
.abi-theatre-sec,
.abi-plot-sec { scroll-margin-top: 2.5rem; }

/* ================================================================
   HERO — THE NEURAL CONSTELLATION
   ================================================================ */
.abi-hero {
    position: relative;
    min-height: min(96vh, 1000px);
    display: grid;
    align-items: center;
    overflow: clip;
    padding: clamp(7rem, 13vw, 10.5rem) 0 clamp(4.5rem, 8vw, 7rem);
}
.abi-hero__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.abi-hero__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(95% 85% at 20% 46%, rgba(10, 5, 30, .92) 0%, rgba(10, 5, 30, .58) 44%, rgba(10, 5, 30, 0) 78%),
        linear-gradient(180deg, rgba(10, 5, 30, .32) 0%, transparent 26%, rgba(10, 5, 30, .58) 100%);
}
.abi-hero__inner { position: relative; z-index: 2; }
.abi-hero__copy { max-width: 760px; }
.abi-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.abi-hero__note { margin-top: 2.1rem; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-dim); }
.abi-hero__note span { color: var(--acc-2); padding: 0 .45em; }

/* ================================================================
   01 · INSIGHT STACK — a deck where the top card slides away
   ================================================================ */
.abi-stack { display: grid; gap: 2.1rem; justify-items: start; }
.abi-stack__deck { position: relative; width: min(100%, 920px); display: grid; gap: 1.4rem; }
.abi-card {
    position: relative;
    padding: clamp(1.55rem, 3vw, 2.35rem);
    border: 1px solid var(--hair);
    border-radius: var(--r-lg);
    background:
        linear-gradient(158deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028) 58%, rgba(142, 77, 255, .09)),
        rgba(12, 7, 34, .55);
    box-shadow: 0 26px 60px rgba(6, 3, 20, .38);
}

/* live deck only — without JS the cards stay a plain, readable stack */
.abi-stack__deck.is-live { display: block; min-height: 460px; }
.abi-stack__deck.is-live .abi-card {
    position: absolute;
    inset: 0 0 auto 0;
    transform: translateY(calc(16px * var(--slot, 0))) scale(calc(1 - .05 * var(--slot, 0))) rotate(calc(-.5deg * var(--slot, 0)));
    transform-origin: 50% 0;
    opacity: calc(1 - .13 * var(--slot, 0));
    transition: transform .62s var(--ease), opacity .62s var(--ease);
    will-change: transform, opacity;
    cursor: pointer;
}
.abi-stack__deck.is-live .abi-card.is-out { transform: translate(56%, -7%) rotate(7deg) scale(.93); opacity: 0; cursor: default; }
.abi-stack__deck.is-live .abi-card.is-instant { transition: none; }
.abi-stack__deck.is-live .abi-card.is-buried { pointer-events: none; }

.abi-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.abi-card__kind { font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--acc-2); }
.abi-card__no { font-size: .82rem; letter-spacing: .18em; padding: .28em .85em; border: 1px solid var(--hair); border-radius: 100px; color: var(--tx-dim); }
.abi-card__row {
    display: grid;
    gap: .3rem;
    padding: .95rem 0;
    border-top: 1px solid var(--hair);
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    line-height: 1.5;
    color: var(--tx);
}
.abi-card__row--q { font-size: clamp(1.32rem, 2.4vw, 1.72rem); line-height: 1.28; letter-spacing: -.015em; font-weight: 600; }
.abi-card__row--i, .abi-card__row--a { color: var(--tx-dim); }
.abi-card__key { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--acc-2); }
.abi-card__foot { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: .86rem; letter-spacing: .03em; color: var(--tx-dim); }

.abi-stack__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1.15rem 1.75rem; }
.abi-stack__next {
    display: inline-flex;
    align-items: center;
    gap: .65em;
    padding: .82em 1.55em;
    border: 1px solid var(--hair);
    border-radius: 100px;
    background: rgba(255, 255, 255, .05);
    color: var(--tx);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .35s ease, color .35s ease, transform .45s var(--ease);
}
.abi-stack__next:hover { border-color: var(--acc-2); color: var(--acc-2); transform: translateY(-2px); }
.abi-stack__pips { display: flex; gap: .55rem; align-items: center; }
.abi-pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; transition: background-color .35s ease, transform .35s var(--ease); }
.abi-pip.is-on { background: linear-gradient(120deg, var(--acc-1), var(--acc-2)); border-color: transparent; transform: scale(1.25); }
.abi-stack__hint { flex-basis: 100%; font-size: .92rem; color: var(--tx-dim); max-width: 52ch; }

/* ================================================================
   02 · HUMAN + AI DUET — two lanes, three meeting points
   ================================================================ */
.abi-duet { display: grid; gap: clamp(3.4rem, 6vw, 5rem); }
.abi-duet__lanes { overflow: hidden; border: 1px solid var(--hair); border-radius: var(--r-lg); background: rgba(12, 7, 34, .5); }
.abi-lane { padding: 1.15rem 0 1.3rem; }
.abi-lane__head { display: flex; align-items: center; gap: .85em; padding: 0 1.6rem .85rem; font-size: .95rem; color: var(--tx-dim); }
.abi-lane__tag { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; padding: .32em .9em; border-radius: 100px; font-weight: 600; }
.abi-lane--human .abi-lane__tag {
    color: var(--acc-1);
    border: 1px solid color-mix(in srgb, var(--acc-1) 55%, transparent);
    background: color-mix(in srgb, var(--acc-1) 14%, transparent);
}
.abi-lane--ai .abi-lane__tag {
    color: var(--acc-2);
    border: 1px solid color-mix(in srgb, var(--acc-2) 55%, transparent);
    background: color-mix(in srgb, var(--acc-2) 14%, transparent);
}
.abi-lane__track { display: flex; gap: .95rem; width: max-content; padding-left: .95rem; animation: abi-marquee 52s linear infinite; }
.abi-lane__chip { padding: .58em 1.25em; border: 1px solid var(--hair); border-radius: 100px; font-size: .98rem; white-space: nowrap; color: var(--tx); background: rgba(255, 255, 255, .05); }
.abi-lane--human .abi-lane__chip { border-color: color-mix(in srgb, var(--acc-1) 38%, transparent); }
.abi-lane--ai .abi-lane__chip { border-color: color-mix(in srgb, var(--acc-2) 38%, transparent); background: color-mix(in srgb, var(--acc-2) 10%, rgba(255, 255, 255, .05)); }
@keyframes abi-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.abi-duet__seam { height: 1px; background: linear-gradient(90deg, transparent, var(--acc-1) 22%, var(--acc-2) 78%, transparent); opacity: .8; }

.abi-meets {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.abi-meets::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2.25rem;
    right: 2.25rem;
    height: 1px;
    background: repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--acc-1) 70%, transparent) 0 10px,
        transparent 10px 18px,
        color-mix(in srgb, var(--acc-2) 70%, transparent) 18px 28px,
        transparent 28px 36px);
}
.abi-meet {
    position: relative;
    padding: 1.85rem 1.6rem 1.6rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .045);
}
.abi-meet__node {
    position: absolute;
    top: -13px;
    left: 1.6rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--acc-1) 0 50%, var(--acc-2) 50% 100%);
    box-shadow: 0 0 0 5px rgba(12, 7, 34, .9);
}
.abi-meet__node::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--acc-2) 55%, transparent);
    animation: abi-ping 3.6s var(--ease-io) infinite;
}
.abi-meet:nth-child(2) .abi-meet__node::after { animation-delay: 1.2s; }
.abi-meet:nth-child(3) .abi-meet__node::after { animation-delay: 2.4s; }
@keyframes abi-ping {
    0%   { transform: scale(.7); opacity: .9; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
.abi-meet__no { font-size: .73rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tx-dim); }
.abi-meet__title { margin: .35rem 0 .85rem; font-size: 1.42rem; letter-spacing: -.015em; font-weight: 600; }
.abi-meet__side {
    display: grid;
    gap: .22rem;
    padding: .72rem 0;
    border-top: 1px solid var(--hair);
    font-size: .98rem;
    line-height: 1.55;
    color: var(--tx-dim);
}
.abi-meet__side b { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--acc-1); }
.abi-meet__side--ai b { color: var(--acc-2); }

/* ================================================================
   03 · MODEL FACTS — a nutrition label for how we build AI features
   ================================================================ */
.abi-facts {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2.25rem, 5vw, 4.75rem);
    align-items: start;
}
.abi-facts__label {
    padding: clamp(1.75rem, 3.2vw, 2.65rem);
    border-radius: 12px;
    background: var(--paper);
    color: var(--tx-ink);
    box-shadow: 0 32px 80px rgba(5, 2, 18, .5);
    font-size: .96rem;
}
.abi-label__title { font-size: 1.72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.abi-label__serving { margin-top: .45rem; font-size: .92rem; color: var(--tx-ink-dim); }
.abi-label__rule { border: none; border-top: 1px solid var(--hair-ink); margin: 1.15rem 0; }
.abi-label__rule--thick { border-top-width: 7px; border-top-color: var(--tx-ink); margin-top: 1.35rem; }
.abi-label__amount { font-size: 1.02rem; font-weight: 700; margin-bottom: .75rem; }
.abi-label__name { font-weight: 600; }
.abi-label__rows { display: grid; gap: .78rem; margin: 0; padding: 0; list-style: none; }
.abi-label__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 3.1em;
    align-items: center;
    gap: .85rem;
    font-size: .95rem;
}
.abi-label__bar { height: 9px; border-radius: 100px; background: rgba(27, 12, 63, .12); overflow: hidden; }
.abi-label__bar i { display: block; height: 100%; width: var(--pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--acc-1), var(--acc-2)); }
.abi-label__pct { text-align: right; font-variant-numeric: tabular-nums; }
.abi-label__facts { display: grid; gap: .72rem; margin: 0; }
.abi-label__fact {
    display: grid;
    grid-template-columns: 8.4em minmax(0, 1fr);
    gap: .9rem;
    padding: .58rem 0;
    border-top: 1px solid var(--hair-ink);
    font-size: .93rem;
    line-height: 1.5;
}
.abi-label__fact:first-child { border-top: none; padding-top: 0; }
.abi-label__fact dt { font-weight: 700; }
.abi-label__fact dd { margin: 0; color: var(--tx-ink-dim); }
.abi-label__note { font-size: .84rem; line-height: 1.55; color: var(--tx-ink-dim); }

.abi-facts__side { display: grid; gap: 1.35rem; padding-top: .45rem; }
.abi-facts__side p { max-width: 54ch; }
.abi-facts__sub { margin: .85rem 0 0; font-size: 1.32rem; letter-spacing: -.012em; font-weight: 600; }
.abi-never { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.abi-never__row {
    position: relative;
    padding: .95rem 1.15rem .95rem 3.15rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .045);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tx-dim);
}
.abi-never__row::before { position: absolute; left: 1.05rem; top: .95rem; font-size: 1rem; font-weight: 700; }
.abi-never__row--yes::before { content: "\2713"; color: var(--acc-1); }
.abi-never__row--no::before  { content: "\2715"; color: var(--acc-2); }

/* ================================================================
   04 · SCENARIO THEATRE — stage-lit before / after panels
   ================================================================ */
.abi-theatre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.abi-stage {
    position: relative;
    overflow: hidden;
    display: grid;
    border: 1px solid var(--hair);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 55%),
        rgba(12, 7, 34, .55);
}
.abi-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc-1) 16%, transparent));
    pointer-events: none;
}
.abi-stage__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--hair); }
.abi-stage__title { margin: 0; font-size: 1.32rem; letter-spacing: -.012em; font-weight: 600; }
.abi-stage__toggle { display: flex; gap: .45rem; padding: .28rem; border: 1px solid var(--hair); border-radius: 100px; }
.abi-stage__btn {
    padding: .34em 1.05em;
    border: none;
    border-radius: 100px;
    background: transparent;
    color: var(--tx-dim);
    font: inherit;
    font-size: .88rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .35s ease, color .35s ease;
}
.abi-stage__btn.is-on { background: linear-gradient(110deg, var(--acc-1), var(--acc-2)); color: #fff; }

/* the spotlight: a soft beam that moves between the two scenes */
.abi-stage__beam {
    position: absolute;
    left: 14%;
    width: 72%;
    top: -18%;
    height: 74%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--acc-2) 34%, transparent), transparent 82%);
    clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
    filter: blur(10px);
    opacity: .85;
    transform: translateY(118%);
    transition: transform .85s var(--ease), opacity .85s var(--ease);
    pointer-events: none;
}
.abi-stage.is-before .abi-stage__beam { transform: translateY(0); }
.abi-stage__scenes { display: grid; gap: 1.05rem; padding: 1.45rem 1.5rem 1.7rem; }
.abi-stage__scene {
    position: relative;
    display: grid;
    gap: .45rem;
    padding: 1.05rem 1.15rem 1.15rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .035);
    opacity: .68;
    transition: opacity .7s var(--ease), border-color .7s var(--ease), background-color .7s var(--ease);
}
.abi-stage.is-before .abi-stage__scene--before,
.abi-stage.is-after .abi-stage__scene--after {
    opacity: 1;
    border-color: color-mix(in srgb, var(--acc-2) 42%, transparent);
    background: color-mix(in srgb, var(--acc-2) 9%, rgba(255, 255, 255, .05));
}
.abi-stage__when { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--acc-2); }
.abi-stage__scene--before .abi-stage__when { color: var(--tx-dim); }
.abi-stage__body { font-size: 1.01rem; line-height: 1.55; color: var(--tx); }
.abi-stage__meta { font-size: .85rem; letter-spacing: .03em; color: var(--tx-dim); }

/* ================================================================
   05 · PREDICTION VS ACTUAL — dots settle onto the line
   ================================================================ */
.abi-plot {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(2.25rem, 5vw, 4.5rem);
    align-items: center;
}
.abi-plot__fig { margin: 0; }
.abi-plot__svg { width: 100%; height: auto; border: 1px solid var(--hair); border-radius: var(--r-md); background: rgba(12, 7, 34, .5); }
.abi-plot__grid line { stroke: var(--hair); stroke-width: 1; }
.abi-plot__axis text { fill: var(--tx-dim); font-family: "Afacad", sans-serif; font-size: 15px; }
.abi-plot__area { fill: color-mix(in srgb, var(--acc-2) 16%, transparent); stroke: none; }
.abi-plot__actual { fill: none; stroke: var(--acc-2); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.abi-plot__dot {
    fill: var(--acc-1);
    stroke: var(--paper);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .95s var(--ease), opacity .95s var(--ease);
    transition-delay: calc(90ms * var(--i, 0));
}
.abi-plot.is-armed .abi-plot__dot { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: .38; }
.abi-plot.is-settled .abi-plot__dot { transform: translate(0, 0); opacity: 1; }
.abi-plot__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.05rem; font-size: .92rem; color: var(--tx-dim); }
.abi-plot__key { display: inline-block; flex: 0 0 auto; }
.abi-plot__key--dot { width: 12px; height: 12px; border-radius: 50%; background: var(--acc-1); border: 2px solid var(--paper); }
.abi-plot__key--line { width: 22px; height: 3px; border-radius: 100px; background: var(--acc-2); margin-left: .8rem; }
.abi-plot__caption { margin-top: .75rem; font-size: .92rem; line-height: 1.55; color: var(--tx-dim); max-width: 58ch; }
.abi-plot__side { display: grid; gap: 1.15rem; }
.abi-plot__score { font-size: clamp(3.8rem, 8vw, 6.1rem); line-height: .95; letter-spacing: -.045em; font-weight: 700; font-variant-numeric: tabular-nums; }
.abi-plot__score-label { font-size: 1.06rem; line-height: 1.55; color: var(--tx-dim); max-width: 34ch; }
.abi-plot__stats { display: grid; gap: .8rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.abi-plot__stat {
    display: grid;
    grid-template-columns: 7.2em minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding: .85rem 0;
    border-top: 1px solid var(--hair);
}
.abi-plot__stat b { font-size: 1.18rem; letter-spacing: -.012em; color: var(--acc-2); }
.abi-plot__stat span { font-size: .96rem; line-height: 1.5; color: var(--tx-dim); }

/* ================================================================
   CTA BAND DECORATION + RELATED ROW
   ================================================================ */
.abi-cta-art { position: absolute; inset: 0; pointer-events: none; opacity: .65; }
.abi-cta-art__ring {
    position: absolute;
    left: 50%;
    top: 16%;
    width: min(78vw, 900px);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--acc-1) 34%, transparent);
    border-radius: 50%;
    transform: translateX(-50%);
}
.abi-cta-art__ring--b { width: min(56vw, 640px); top: 24%; border-color: color-mix(in srgb, var(--acc-2) 32%, transparent); }
.abi-cta-art__node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--acc-1); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--acc-1) 55%, transparent); }
.abi-cta-art__node--b { left: 16%; top: 30%; background: var(--acc-2); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--acc-2) 55%, transparent); }
.abi-cta-art__node--c { right: 14%; top: 22%; }

.abi-related { margin-top: 2.9rem; padding-top: 1.9rem; border-top: 1px solid var(--hair); width: min(100%, 980px); }
.abi-related__label { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--acc-2); margin-bottom: 1rem; }
.abi-related__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.abi-related__row a { font-size: 1rem; color: var(--tx-dim); border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; }
.abi-related__row a:hover { color: var(--tx); border-bottom-color: var(--acc-2); }
.abi-related__row a[aria-current="page"] { color: var(--tx); border-bottom-color: var(--acc-1); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
    .abi-facts,
    .abi-plot { grid-template-columns: 1fr; }
    .abi-facts__label { width: min(100%, 640px); }
    .abi-theatre { grid-template-columns: 1fr; }
    .abi-stage__scenes { grid-template-columns: 1fr 1fr; }
    .abi-meets { grid-template-columns: 1fr; }
    .abi-meets::before { display: none; }
}
@media (max-width: 860px) {
    .abi-hero { min-height: 82vh; }
    .abi-stage__head { flex-wrap: wrap; }
    .abi-stage__scenes { grid-template-columns: 1fr; }
    .abi-label__row { grid-template-columns: minmax(0, 1fr) 3.4em; }
    .abi-label__bar { grid-column: 1 / -1; order: 3; }
    .abi-label__fact { grid-template-columns: 1fr; gap: .15rem; }
    .abi-plot__stat { grid-template-columns: 1fr; gap: .15rem; }
}
@media (max-width: 560px) {
    .abi-hero__btn { width: 100%; justify-content: center; }
    .abi-stack__deck.is-live { min-height: 560px; }
    .abi-stack__deck.is-live .abi-card.is-out { transform: translate(28%, -5%) rotate(5deg) scale(.94); }
    .abi-stage__head { flex-direction: column; align-items: flex-start; }
    .abi-cta-art__node { display: none; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .abi-lane__track { animation: none; flex-wrap: wrap; width: auto; row-gap: .7rem; }
    .abi-meet__node::after { animation: none; opacity: .5; transform: scale(1.1); }
    .abi-stage__beam { transition: none; }
    .abi-plot__dot { transition: none; }
    .abi-stack__deck.is-live .abi-card { transition: opacity .18s ease; }
}


/* ===========================================================================
   2026-10 · LAYOUT + SURFACE REFINEMENT
   Hero intentionally untouched. Everything below the hero gets deliberate
   section surfaces, predictable spacing, and collision-safe component grids.
   =========================================================================== */

/* Keep the fixed living background as atmospheric support, not the section UI. */
.abi-stack-sec,
.abi-duet-sec,
.abi-facts-sec,
.abi-theatre-sec,
.abi-plot-sec,
.ds-cta {
    isolation: isolate;
}

/* One spacing system for every post-hero section. */
.abi-stack-sec,
.abi-duet-sec,
.abi-facts-sec,
.abi-theatre-sec,
.abi-plot-sec {
    padding: clamp(5rem, 8vw, 7.5rem) 0;
    overflow: clip;
}

.abi-stack-sec .ds-head--split,
.abi-duet-sec .ds-head--split,
.abi-facts-sec .ds-head--split,
.abi-theatre-sec .ds-head--split,
.abi-plot-sec .ds-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
    align-items: end;
    gap: clamp(2.25rem, 6vw, 6rem);
    margin-bottom: clamp(3rem, 5.5vw, 4.75rem);
}

.abi-stack-sec .ds-head--split .ds-lead,
.abi-duet-sec .ds-head--split .ds-lead,
.abi-facts-sec .ds-head--split .ds-lead,
.abi-theatre-sec .ds-head--split .ds-lead,
.abi-plot-sec .ds-head--split .ds-lead {
    max-width: 42ch;
    padding: 0;
}

/* ----------------------------- LIGHT SURFACES ----------------------------- */
.abi-stack-sec,
.abi-facts-sec,
.abi-plot-sec {
    --tx: #1b0c3f;
    --tx-dim: rgba(27, 12, 63, .68);
    --hair: rgba(40, 25, 78, .13);
    --paper: #ffffff;
    color: var(--tx);
}

.abi-stack-sec {
    --abi-parallax: 0;
    background:
        radial-gradient(55% 80% at 92% 8%, rgba(142, 77, 255, .13), transparent 70%),
        radial-gradient(46% 68% at 6% 92%, rgba(67, 210, 224, .12), transparent 72%),
        linear-gradient(180deg, #fbf9fe 0%, #f3edfb 100%);
}

.abi-stack-sec::before,
.abi-stack-sec::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    will-change: transform;
}

.abi-stack-sec::before {
    width: min(42vw, 620px);
    aspect-ratio: 1;
    top: 7%;
    right: -10%;
    border: 1px solid rgba(123, 47, 247, .18);
    box-shadow: inset 0 0 0 34px rgba(123, 47, 247, .025);
    transform: translate3d(0, calc(var(--abi-parallax) * -44px), 0) rotate(calc(var(--abi-parallax) * 4deg));
}

.abi-stack-sec::after {
    width: min(30vw, 430px);
    aspect-ratio: 1;
    left: -8%;
    bottom: 5%;
    background: radial-gradient(circle, rgba(67, 210, 224, .13), transparent 68%);
    filter: blur(4px);
    transform: translate3d(0, calc(var(--abi-parallax) * 34px), 0);
}

.abi-stack-sec > .ds-shell { position: relative; z-index: 1; }

.abi-facts-sec {
    background:
        radial-gradient(48% 70% at 5% 12%, rgba(67, 210, 224, .08), transparent 72%),
        linear-gradient(180deg, #f8f4fc 0%, #ffffff 100%);
}

.abi-plot-sec {
    background:
        radial-gradient(60% 70% at 100% 0%, rgba(142, 77, 255, .10), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f3edfb 100%);
}

/* ------------------------------ DARK SURFACES ----------------------------- */
.abi-duet-sec {
    background:
        radial-gradient(54% 85% at 90% 10%, rgba(142, 77, 255, .18), transparent 70%),
        linear-gradient(145deg, #0a0b2e 0%, #130b34 58%, #190d3c 100%);
}

.abi-theatre-sec {
    background:
        radial-gradient(50% 80% at 12% 0%, rgba(255, 92, 138, .10), transparent 68%),
        linear-gradient(145deg, #11092f 0%, #18103b 55%, #0a0b2e 100%);
}

.ds-cta {
    background:
        radial-gradient(52% 80% at 50% 105%, rgba(142, 77, 255, .24), transparent 70%),
        linear-gradient(145deg, #080a2a 0%, #140b34 58%, #0a0b2e 100%);
}

/* --------------------------- INSIGHT STACK / PARALLAX --------------------- */
.abi-stack {
    width: 100%;
    justify-items: center;
    gap: 2rem;
    transform: translate3d(0, calc(var(--abi-parallax) * 18px), 0);
    will-change: transform;
}

.abi-stack__deck,
.abi-stack__controls {
    width: min(100%, 980px);
}

.abi-stack__deck {
    perspective: 1200px;
}

.abi-stack__deck.is-live {
    min-height: 0;
    height: var(--abi-deck-height, 520px);
}

.abi-stack__deck.is-live .abi-card {
    transform: translate3d(0, calc(18px * var(--slot, 0)), calc(-16px * var(--slot, 0)))
               scale(calc(1 - .028 * var(--slot, 0)))
               rotate(calc(-.28deg * var(--slot, 0)));
    opacity: calc(1 - .08 * var(--slot, 0));
}

.abi-stack__deck.is-live .abi-card.is-front {
    box-shadow: 0 34px 80px rgba(49, 25, 92, .20), 0 8px 24px rgba(49, 25, 92, .10);
}

.abi-stack__deck.is-live .abi-card:not(.is-front) .abi-card__row,
.abi-stack__deck.is-live .abi-card:not(.is-front) .abi-card__foot {
    opacity: 0;
    transition: opacity .28s ease;
}

.abi-stack__deck.is-live .abi-card.is-front .abi-card__row,
.abi-stack__deck.is-live .abi-card.is-front .abi-card__foot {
    opacity: 1;
}

.abi-card {
    background:
        linear-gradient(145deg, rgba(142, 77, 255, .045), rgba(67, 210, 224, .025) 72%),
        #ffffff;
    border-color: rgba(69, 43, 112, .14);
    box-shadow: 0 18px 48px rgba(49, 25, 92, .11);
}

.abi-card__no { background: #f5effd; }
.abi-card__row,
.abi-card__foot { transition: opacity .28s ease; }

.abi-stack__controls {
    justify-content: center;
    text-align: center;
    padding-top: .75rem;
}

.abi-stack__next {
    background: #ffffff;
    border-color: rgba(69, 43, 112, .16);
    box-shadow: 0 10px 28px rgba(49, 25, 92, .08);
}

.abi-stack__hint { max-width: 64ch; }

/* ----------------------------- HUMAN + AI DUET ---------------------------- */
.abi-duet { gap: clamp(2.75rem, 5vw, 4.5rem); }

.abi-duet__lanes {
    background: #151238;
    border-color: rgba(255, 255, 255, .11);
    box-shadow: 0 24px 60px rgba(4, 3, 20, .28);
}

.abi-lane__chip { background: #1b1742; }

.abi-meets { gap: clamp(1.25rem, 2.5vw, 1.8rem); }
.abi-meet {
    min-height: 100%;
    background: #17143c;
    border-color: rgba(255, 255, 255, .11);
    box-shadow: 0 18px 46px rgba(4, 3, 20, .18);
}

/* ------------------------------- MODEL FACTS ------------------------------ */
.abi-facts {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: stretch;
}

.abi-facts__label,
.abi-facts__side {
    height: 100%;
}

.abi-facts__label {
    border: 1px solid rgba(40, 25, 78, .10);
    box-shadow: 0 24px 56px rgba(49, 25, 92, .10);
}

.abi-facts__side {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border: 1px solid rgba(40, 25, 78, .10);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 18px 46px rgba(49, 25, 92, .07);
}

.abi-never__row {
    background: #ffffff;
    border-color: rgba(40, 25, 78, .10);
    color: var(--tx-dim);
}

/* ---------------------------- SCENARIO THEATRE ---------------------------- */
.abi-theatre {
    gap: clamp(1.15rem, 2.4vw, 1.75rem);
    align-items: stretch;
}

.abi-stage {
    min-width: 0;
    height: 100%;
    background: #17133c;
    border-color: rgba(255, 255, 255, .11);
    box-shadow: 0 24px 58px rgba(4, 3, 20, .20);
}

.abi-stage__head { min-width: 0; }
.abi-stage__title { min-width: 0; }
.abi-stage__toggle { flex: 0 0 auto; }
.abi-stage__scene { background: #1d1846; }
.abi-stage.is-before .abi-stage__scene--before,
.abi-stage.is-after .abi-stage__scene--after {
    background: #231b53;
}

/* --------------------------- PREDICTION VS ACTUAL ------------------------- */
.abi-plot {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: stretch;
}

.abi-plot__fig,
.abi-plot__side {
    min-width: 0;
    border: 1px solid rgba(40, 25, 78, .10);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 22px 54px rgba(49, 25, 92, .09);
}

.abi-plot__fig { padding: clamp(1rem, 2vw, 1.5rem); }
.abi-plot__svg {
    border-color: rgba(40, 25, 78, .10);
    background: #fbf9fe;
}
.abi-plot__dot { stroke: #ffffff; }

.abi-plot__side {
    align-content: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ------------------------------- CTA FINISH ------------------------------- */
.ds-cta__in { position: relative; z-index: 3; }
.abi-related { max-width: 1080px; }

/* ----------------------------- RESPONSIVE SAFETY -------------------------- */
@media (max-width: 1080px) {
    .abi-stack-sec .ds-head--split,
    .abi-duet-sec .ds-head--split,
    .abi-facts-sec .ds-head--split,
    .abi-theatre-sec .ds-head--split,
    .abi-plot-sec .ds-head--split {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.35rem;
    }

    .abi-stack-sec .ds-head--split .ds-lead,
    .abi-duet-sec .ds-head--split .ds-lead,
    .abi-facts-sec .ds-head--split .ds-lead,
    .abi-theatre-sec .ds-head--split .ds-lead,
    .abi-plot-sec .ds-head--split .ds-lead {
        max-width: 62ch;
    }

    .abi-facts,
    .abi-plot { grid-template-columns: 1fr; }

    .abi-facts__label { width: 100%; }
}

@media (max-width: 760px) {
    .abi-stack-sec,
    .abi-duet-sec,
    .abi-facts-sec,
    .abi-theatre-sec,
    .abi-plot-sec {
        padding: clamp(4.25rem, 15vw, 5.5rem) 0;
    }

    .abi-stack { transform: none; }
    .abi-stack-sec::before,
    .abi-stack-sec::after { opacity: .55; transform: none; }

    .abi-stack__controls {
        justify-content: flex-start;
        text-align: left;
    }

    .abi-stack__hint { flex-basis: 100%; }
    .abi-meet { padding-inline: 1.25rem; }
    .abi-facts__side { padding: 1.25rem; }
    .abi-plot__side { padding: 1.25rem; }
}

@media (max-width: 560px) {
    .abi-stack__deck.is-live { height: var(--abi-deck-height, 640px); }
    .abi-stack__deck.is-live .abi-card {
        transform: translate3d(0, calc(12px * var(--slot, 0)), 0)
                   scale(calc(1 - .018 * var(--slot, 0)));
    }
    .abi-stack__deck.is-live .abi-card.is-out {
        transform: translate(24%, -4%) rotate(4deg) scale(.96);
    }
    .abi-card { padding: 1.25rem; }
    .abi-card__row--q { font-size: 1.25rem; }
    .abi-stage__toggle { width: 100%; justify-content: space-between; }
    .abi-stage__btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
    .abi-stack,
    .abi-stack-sec::before,
    .abi-stack-sec::after { transform: none !important; }
}


/* ================================================================
   CLICK-ONLY INSIGHT DECK · no parallax · instant next-card content
   ================================================================ */
.abi-stack-sec {
    --abi-parallax: 0;
}


.abi-stack__deck.is-live .abi-card {
    transition: transform .42s var(--ease), opacity .42s var(--ease);
}
.abi-stack-sec::before,
.abi-stack-sec::after {
    transform: none !important;
}

.abi-stack {
    transform: none !important;
    will-change: auto;
}

/* Keep the next card's text already rendered beneath the active card.
   When the front card moves away, the next card is readable immediately. */
.abi-stack__deck.is-live .abi-card.is-next .abi-card__row,
.abi-stack__deck.is-live .abi-card.is-next .abi-card__foot {
    opacity: 1;
    transition: none;
}

/* Front-card copy should never fade during a click transition. */
.abi-stack__deck.is-live .abi-card.is-front .abi-card__row,
.abi-stack__deck.is-live .abi-card.is-front .abi-card__foot {
    opacity: 1;
    transition: none;
}

/* ===========================================================================
   SCENARIO THEATRE · 2026-10 COMPARISON RAIL
   Approved direction: one selected scenario, stable Before → AI → After stage.
   =========================================================================== */
.abi-theatre-sec--compare {
    --tx: #1d0b49;
    --tx-dim: rgba(29, 11, 73, .68);
    --hair: rgba(79, 48, 145, .14);
    position: relative;
    overflow: clip;
    color: var(--tx);
    background:
        radial-gradient(44% 74% at -3% 90%, rgba(185, 0, 255, .11), transparent 72%),
        radial-gradient(46% 72% at 100% 5%, rgba(0, 88, 255, .10), transparent 72%),
        linear-gradient(180deg, #fbf9ff 0%, #f4f1ff 48%, #f9fbff 100%);
}

.abi-theatre-sec--compare::before,
.abi-theatre-sec--compare::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}
.abi-theatre-sec--compare::before {
    width: clamp(260px, 33vw, 580px);
    aspect-ratio: 1;
    left: -13%;
    bottom: -34%;
    border: 1px solid rgba(185, 0, 255, .12);
    box-shadow: inset 0 0 0 42px rgba(185, 0, 255, .025);
}
.abi-theatre-sec--compare::after {
    width: clamp(220px, 28vw, 500px);
    aspect-ratio: 1;
    top: -24%;
    right: -10%;
    border: 1px solid rgba(0, 88, 255, .11);
    box-shadow: inset 0 0 0 34px rgba(0, 88, 255, .02);
}
.abi-theatre-sec--compare > .ds-shell { position: relative; z-index: 1; }
.abi-theatre-sec--compare .ds-label { color: #7a2cff; }
.abi-theatre-sec--compare .ds-h2 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(90deg, rgba(185, 0, 255, .92), rgba(0, 88, 255, .92));
    -webkit-background-clip: text;
    background-clip: text;
}

.abi-scenario {
    display: grid;
    gap: clamp(1.6rem, 3vw, 2.5rem);
}

.abi-scenario__rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.75rem, 2vw, 1.5rem);
    align-items: center;
    width: min(100%, 1120px);
    margin-inline: auto;
    isolation: isolate;
}
.abi-scenario__rail::before {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(185, 0, 255, .20), rgba(104, 70, 229, .42), rgba(0, 88, 255, .22));
    z-index: -1;
}

.abi-scenario__tab {
    min-width: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .72rem 1rem;
    border: 1px solid rgba(84, 53, 145, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: #25104f;
    box-shadow: 0 12px 34px rgba(69, 43, 112, .07);
    font: inherit;
    font-size: clamp(.9rem, 1.25vw, 1.03rem);
    font-weight: 650;
    cursor: pointer;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease, background .28s ease;
    backdrop-filter: blur(12px);
}
.abi-scenario__tab:hover {
    transform: translateY(-2px);
    border-color: rgba(123, 47, 247, .34);
    box-shadow: 0 16px 40px rgba(69, 43, 112, .10);
}
.abi-scenario__tab:focus-visible {
    outline: 3px solid rgba(0, 88, 255, .23);
    outline-offset: 3px;
}
.abi-scenario__tab.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, rgba(185, 0, 255, .94), rgba(0, 88, 255, .94));
    box-shadow: 0 15px 42px rgba(89, 45, 215, .22), 0 0 0 5px rgba(126, 61, 234, .07);
    transform: translateY(-2px);
}
.abi-scenario__tab-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(123, 47, 247, .07);
}
.abi-scenario__tab.is-active .abi-scenario__tab-icon { background: rgba(255, 255, 255, .16); }
.abi-scenario__tab-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.abi-scenario__viewport {
    display: grid;
    grid-template-areas: "scene";
    align-items: stretch;
    min-width: 0;
}
.abi-scenario__scene {
    grid-area: scene;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
    gap: clamp(.9rem, 1.8vw, 1.35rem);
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.995);
    pointer-events: none;
    transition: opacity .34s ease, transform .34s ease, visibility 0s linear .34s;
}
.abi-scenario__scene.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
}

.abi-compare-card {
    min-width: 0;
    min-height: 410px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(190px, 1.08fr);
    gap: clamp(1.2rem, 2vw, 1.8rem);
    align-items: stretch;
    padding: clamp(1.3rem, 2.3vw, 1.9rem);
    border: 1px solid rgba(76, 45, 137, .12);
    border-radius: clamp(22px, 2vw, 30px);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 26px 70px rgba(58, 31, 111, .10);
    overflow: hidden;
}
.abi-compare-card--before {
    background:
        radial-gradient(90% 100% at 0% 100%, rgba(255, 75, 144, .07), transparent 72%),
        rgba(255, 255, 255, .90);
}
.abi-compare-card--after {
    border-color: rgba(0, 88, 255, .16);
    background:
        radial-gradient(90% 110% at 100% 100%, rgba(0, 88, 255, .075), transparent 72%),
        rgba(255, 255, 255, .92);
}
.abi-compare-card__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.abi-compare-card__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .35rem .85rem;
    margin-bottom: .85rem;
    border-radius: 999px;
    background: rgba(255, 69, 133, .11);
    color: #bd2869;
    font-size: .76rem;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.abi-compare-card--after .abi-compare-card__eyebrow {
    background: rgba(0, 88, 255, .10);
    color: #135bc8;
}
.abi-compare-card h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    color: #1c0d47;
}
.abi-compare-card__copy > p {
    margin: .85rem 0 0;
    color: rgba(29, 11, 73, .68);
    font-size: clamp(.94rem, 1.15vw, 1.04rem);
    line-height: 1.55;
}
.abi-compare-card__metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: auto 0 0;
    padding-top: 1.2rem;
}
.abi-compare-card__metrics div {
    min-width: 0;
    padding: .75rem .8rem;
    border: 1px solid rgba(76, 45, 137, .09);
    border-radius: 14px;
    background: rgba(248, 245, 255, .92);
}
.abi-compare-card--after .abi-compare-card__metrics div { background: rgba(239, 246, 255, .92); }
.abi-compare-card__metrics dt {
    margin-bottom: .15rem;
    color: rgba(29, 11, 73, .50);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.abi-compare-card__metrics dd {
    margin: 0;
    color: #271052;
    font-size: .91rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.abi-scenario__bridge {
    position: relative;
    z-index: 2;
    align-self: center;
    display: grid;
    justify-items: center;
    gap: .7rem;
    text-align: center;
}
.abi-scenario__bridge-line {
    position: absolute;
    top: 51px;
    left: -54px;
    right: -54px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 61, 125, .64), rgba(126, 61, 234, .68) 50%, rgba(0, 88, 255, .64));
    z-index: -1;
}
.abi-scenario__orb {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #b900ff 0%, #6942e7 45%, #0058ff 100%);
    box-shadow: 0 0 0 12px rgba(115, 70, 225, .07), 0 18px 38px rgba(71, 45, 173, .24);
    font-size: 1.45rem;
    font-weight: 760;
    letter-spacing: -.03em;
}
.abi-scenario__bridge strong {
    max-width: 11ch;
    color: rgba(29, 11, 73, .62);
    font-size: .83rem;
    line-height: 1.25;
}

.abi-scenario__visual {
    min-width: 0;
    min-height: 300px;
    position: relative;
    align-self: stretch;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(76, 45, 137, .09);
    border-radius: 20px;
    background: linear-gradient(145deg, #f8f4ff, #f2f6ff);
}
.abi-compare-card--after .abi-scenario__visual {
    background: linear-gradient(145deg, #f3f1ff, #edf6ff);
}

/* Demand: compact table */
.abi-scenario__visual--table { display: grid; align-content: center; gap: .68rem; }
.abi-mini-table__head,
.abi-mini-table__row { display: grid; grid-template-columns: .68fr 1.2fr .55fr; gap: .55rem; align-items: center; }
.abi-mini-table__head { padding-bottom: .55rem; border-bottom: 1px solid rgba(76,45,137,.10); color: rgba(29,11,73,.46); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; }
.abi-mini-table__row { min-height: 32px; color: #2a1554; font-size: .76rem; }
.abi-mini-table__row b { font-weight: 700; }
.abi-mini-table__row i { display: block; height: 7px; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, rgba(185,0,255,.22), rgba(0,88,255,.36)); }
.abi-mini-table__row span { color: rgba(29,11,73,.56); }

/* Demand: chart */
.abi-scenario__visual--chart { display: grid; grid-template-rows: auto 1fr auto; }
.abi-mini-chart__head { display: flex; justify-content: space-between; gap: .75rem; color: #281255; font-size: .72rem; font-weight: 700; }
.abi-mini-chart__head span:last-child { color: rgba(29,11,73,.46); font-weight: 600; }
.abi-scenario__visual--chart svg { width: 100%; height: 100%; min-height: 170px; }
.abi-mini-chart__grid { fill: none; stroke: rgba(76,45,137,.09); stroke-width: 1.5; }
.abi-mini-chart__line { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.abi-mini-chart__line--history { stroke: #5f56d9; }
.abi-mini-chart__line--forecast { stroke: #ca2fcb; stroke-dasharray: 6 5; }
.abi-mini-chart__legend { display: flex; gap: 1rem; color: rgba(29,11,73,.50); font-size: .66rem; }
.abi-mini-chart__legend span::before { content:""; display:inline-block; width:7px; height:7px; margin-right:.4rem; border-radius:50%; background:#5f56d9; }
.abi-mini-chart__legend span:last-child::before { background:#ca2fcb; }

/* Churn */
.abi-scenario__visual--accounts { display: grid; align-content: center; gap: .8rem; }
.abi-account-row { display:grid; grid-template-columns: 18px 1fr auto; gap:.65rem; align-items:center; min-height:38px; padding:.55rem .65rem; border-radius:12px; background:rgba(255,255,255,.62); }
.abi-account-row > span { width:14px; height:14px; border-radius:50%; background:#a7a2bd; }
.abi-account-row > i { width:60%; height:7px; border-radius:99px; background:rgba(70,48,113,.14); }
.abi-account-row > b { padding:.2rem .5rem; border-radius:99px; color:#7a2854; background:rgba(255,92,138,.12); font-size:.64rem; }
.abi-account-row:nth-child(odd) > b { color:#4a3b6d; background:rgba(110,91,159,.09); }

.abi-scenario__visual--risks { display:grid; align-content:center; gap:.8rem; }
.abi-risk-row { display:grid; grid-template-columns:34px 1fr auto; gap:.65rem; align-items:center; padding:.75rem; border:1px solid rgba(76,45,137,.08); border-radius:14px; background:rgba(255,255,255,.74); }
.abi-risk-row > span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(87,71,180,.10); color:#4d36b7; font-weight:750; }
.abi-risk-row p { margin:0; min-width:0; display:grid; gap:.1rem; }
.abi-risk-row b { color:#281255; font-size:.78rem; }
.abi-risk-row small { color:rgba(29,11,73,.52); font-size:.66rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abi-risk-row em { font-style:normal; padding:.25rem .48rem; border-radius:99px; color:#fff; background:#b84ac3; font-size:.62rem; }
.abi-risk-row:last-child em { background:#7a70d6; }

/* Report */
.abi-scenario__visual--docs { display:grid; place-items:center; }
.abi-doc { position:absolute; width:72%; min-height:142px; display:grid; align-content:start; gap:.7rem; padding:1rem; border:1px solid rgba(76,45,137,.10); border-radius:15px; background:#fff; box-shadow:0 16px 32px rgba(53,33,96,.08); color:#291451; }
.abi-doc b { font-size:.72rem; }
.abi-doc i { display:block; height:7px; border-radius:99px; background:rgba(76,45,137,.10); }
.abi-doc i:nth-of-type(2){width:82%}.abi-doc i:nth-of-type(3){width:62%}
.abi-doc--1 { transform:translate(-18px,-30px) rotate(-3deg); opacity:.48; }
.abi-doc--2 { transform:translate(5px,-8px) rotate(1deg); opacity:.70; }
.abi-doc--3 { transform:translate(20px,18px) rotate(0); }

.abi-scenario__visual--report { display:grid; grid-template-rows:auto 1fr auto; gap:1rem; }
.abi-report-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; }
.abi-report-kpis span { min-width:0; padding:.6rem .5rem; border-radius:11px; background:rgba(255,255,255,.72); }
.abi-report-kpis b,.abi-report-kpis strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abi-report-kpis b { color:rgba(29,11,73,.48); font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; }
.abi-report-kpis strong { margin-top:.15rem; color:#281255; font-size:.72rem; }
.abi-report-bars { display:flex; align-items:end; gap:.38rem; padding:.2rem .35rem 0; }
.abi-report-bars i { flex:1 1 0; height:var(--h); min-height:18px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#b900ff,#3264f5); }
.abi-report-ready { justify-self:end; display:flex; align-items:center; gap:.4rem; padding:.5rem .7rem; border-radius:999px; color:#5534bd; background:rgba(108,75,224,.09); font-size:.67rem; font-weight:700; }
.abi-report-ready span { width:7px;height:7px;border-radius:50%;background:#00b997; }

@media (max-width: 1180px) {
    .abi-scenario__scene { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
    .abi-compare-card { grid-template-columns: 1fr; min-height: 0; }
    .abi-scenario__visual { min-height: 230px; }
    .abi-scenario__bridge-line { left:-36px; right:-36px; }
    .abi-scenario__orb { width:72px; height:72px; font-size:1.2rem; }
}

@media (max-width: 820px) {
    .abi-scenario__rail { grid-template-columns: 1fr; width:100%; gap:.6rem; }
    .abi-scenario__rail::before { display:none; }
    .abi-scenario__tab { min-height:54px; justify-content:flex-start; padding-inline:1rem; }
    .abi-scenario__scene { grid-template-columns:1fr; gap:1rem; }
    .abi-scenario__bridge { min-height:92px; align-self:auto; align-content:center; }
    .abi-scenario__bridge-line { top:50%; left:50%; right:auto; width:2px; height:calc(100% + 2rem); transform:translate(-50%,-50%); background:linear-gradient(180deg,rgba(255,61,125,.54),rgba(126,61,234,.66),rgba(0,88,255,.54)); }
    .abi-scenario__orb { width:62px; height:62px; }
    .abi-scenario__bridge strong { max-width:none; padding-left:5.2rem; position:absolute; left:50%; width:max-content; max-width:min(60vw,250px); text-align:left; }
    .abi-compare-card { grid-template-columns:minmax(0, .92fr) minmax(190px, 1.08fr); }
}

@media (max-width: 620px) {
    .abi-theatre-sec--compare .ds-head--split { margin-bottom:2rem; }
    .abi-scenario { gap:1.25rem; }
    .abi-compare-card { grid-template-columns:1fr; padding:1.15rem; border-radius:20px; }
    .abi-compare-card__metrics { grid-template-columns:1fr 1fr; }
    .abi-scenario__visual { min-height:210px; }
    .abi-scenario__bridge strong { display:none; }
    .abi-scenario__bridge { min-height:74px; }
    .abi-scenario__orb { width:54px; height:54px; font-size:1rem; }
    .abi-scenario__tab-icon { width:30px; height:30px; }
}

@media (prefers-reduced-motion: reduce) {
    .abi-scenario__scene,
    .abi-scenario__tab { transition:none; }
}


/* ================================================================
   CLEAN LABEL PASS — no decorative numbering / no italic emphasis
   ================================================================ */
.abi-hero em,
.abi-stack-sec em,
.abi-duet-sec em,
.abi-facts-sec em,
.abi-theatre-sec em,
.abi-plot-sec em,
.ds-cta em {
    font-style: normal !important;
}

/* Meeting cards stand on their own: no connector rail or orbit markers. */
.abi-meets::before { display: none !important; }
.abi-meet__node { display: none !important; }
.abi-meet {
    padding-top: 1.55rem;
}
.abi-meet__title {
    margin-top: 0;
}

/* Removed sequence badges no longer reserve header space. */
.abi-card__head {
    justify-content: flex-start;
}