/* ============================================================
   AI PAGES — Light theme with Outfit typography.
   EVERYTHING in this file is scoped under .ai-page so it cannot
   leak into any other page on the site. Do not add unscoped rules.
   ============================================================ */

/* Body background applies only when an .ai-page wrapper is in the DOM */
body:has(.ai-page) {
    background: #F3F0EF;
}

.ai-page {
    background: #F3F0EF;
    color: #1D1D20;
    /* Body copy uses the site's default font (Open Sans). Only titles
       override to Outfit — see the h1/h2/h3 rules below. */
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Container & section rhythm ------------------------------ */
.ai-page .ai-container {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.ai-page .ai-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
}
.ai-page .ai-section--alt {
    background: #ffffff;
}

/* ---- Typography --------------------------------------------- */
/* All headings uppercase to match the rest of the site's rhythm,
   but set in Outfit (not Anton) so this family of pages still reads
   calmer and more "product" than the main brand. */
.ai-page h1,
.ai-page h2,
.ai-page h3,
.ai-page h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #1D1D20;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1.05;
    margin: 0 0 1rem;
}
.ai-page h1 {
    font-size: clamp(2.6rem, 6.5vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1;
}
.ai-page h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.05;
}
.ai-page h3 {
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 0 0.35rem;
}
.ai-page p {
    margin: 0 0 1rem;
    color: rgba(29, 29, 32, 0.72);
    font-size: clamp(1rem, 1.05vw, 1.1rem);
    line-height: 1.6;
}
.ai-page p:last-child { margin-bottom: 0; }
.ai-page strong { color: #1D1D20; font-weight: 600; }

/* Lede paragraph (larger intro text under headings) */
.ai-page .ai-lede {
    font-size: clamp(1.1rem, 1.25vw, 1.3rem);
    line-height: 1.55;
    color: rgba(29, 29, 32, 0.75);
    font-weight: 400;
}

/* ---- Badges / section eyebrows ------------------------------ */
.ai-page .ai-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}
.ai-page .ai-badge--green {
    background: rgba(65, 230, 91, 0.12);
    color: #2aa53e;
    border-color: rgba(65, 230, 91, 0.28);
}
.ai-page .ai-badge--cyan {
    background: rgba(51, 207, 255, 0.12);
    color: #0d8bb0;
    border-color: rgba(51, 207, 255, 0.28);
}
.ai-page .ai-badge--tomato {
    background: rgba(243, 95, 69, 0.12);
    color: #c03a24;
    border-color: rgba(243, 95, 69, 0.3);
}

/* ---- Buttons ------------------------------------------------ */
.ai-page .ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.75rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    line-height: 1;
}
.ai-page .ai-btn--primary {
    background: #1D1D20;
    color: #ffffff;
}
.ai-page .ai-btn--primary:hover {
    background: var(--color-accent);
}
.ai-page .ai-btn--ghost {
    background: transparent;
    color: #1D1D20;
    border-color: rgba(29, 29, 32, 0.2);
}
.ai-page .ai-btn--ghost:hover {
    background: #ffffff;
    border-color: rgba(29, 29, 32, 0.4);
}

/* ---- Hero (dark, wide, corner-blob ambient animation) ------- */
.ai-page .ai-hero {
    padding: clamp(8rem, 15vw, 11rem) 0 clamp(5rem, 9vw, 8rem);
    position: relative;
    text-align: center;
    background: var(--color-dark);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.ai-page .ai-hero__inner {
    /* Wide enough for the title to land in 3 lines max, while still
       leaving ~20vw on each side for the Terminator-style side streams. */
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
    position: relative;
    z-index: 2;
}
.ai-page .ai-hero__title {
    text-align: center;
    color: #fff;
    margin-bottom: 1.25rem;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.ai-page .ai-hero__lede {
    max-width: 44rem;
    margin: 0 auto 1.75rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
}
.ai-page .ai-hero__actions {
    display: inline-flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Inverted button colours on the dark hero */
.ai-page .ai-hero .ai-btn--primary {
    background: #ffffff;
    color: var(--color-dark);
}
.ai-page .ai-hero .ai-btn--primary:hover {
    background: var(--color-accent);
    color: #fff;
}
.ai-page .ai-hero .ai-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
.ai-page .ai-hero .ai-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
}

/* ---- Hero imagery ------------------------------------------- */
/* Background image: actual-size PNG flush against the LEFT edge of
   the hero, vertically centred. Behind the copy but in front of the
   gradient blobs. Lower opacity so it doesn't compete with the text. */
.ai-page .ai-hero__bg-img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: none;
    z-index: 1;
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
}

/* Foreground image: actual-size PNG, centred horizontally, pinned
   so its TOP sits just below where the main nav container ends.
   Navbar = 1.25rem top pad + 32px logo + 1.25rem bottom pad ≈ 72px.
   Shrinks to match when the navbar collapses to its scrolled state. */
.ai-page .ai-hero__fg-img {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    margin: 0;
    width: auto;
    height: auto;
    max-width: none;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}

/* Hide (don't remove) the LEFT terminator-style text stream. The right
   side remains visible. Kept in the DOM/accessible tree so the JS that
   populates it doesn't need to change. */
.ai-page .ai-hero__stream--left {
    visibility: hidden;
}

/* ---- Animated corner gradient blobs ------------------------- */
/* Size + shape both morph: border-radius tweens through asymmetric
   values to create an organic wobble, while scaleX/scaleY change
   independently so the blob stretches and squashes instead of just
   growing uniformly. Position + opacity also drift on separate
   timings so the two blobs never land in sync. */
.ai-page .ai-hero__blob {
    position: absolute;
    width: clamp(340px, 45vw, 560px);
    aspect-ratio: 1;
    /* Reduced blur radius: 90px was causing heavy paint cost every frame
       because border-radius was also animating, forcing blur re-computation. */
    filter: blur(60px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    /* Starting organic shape, not a perfect circle */
    border-radius: 42% 58% 70% 30% / 45% 38% 62% 55%;
}
/* Top-right blob: cyan → accent */
.ai-page .ai-hero__blob--tr {
    top: -18%;
    right: -12%;
    background: radial-gradient(
        circle,
        var(--color-cyan) 0%,
        var(--color-accent) 50%,
        transparent 75%
    );
    animation: aiHeroBlobTR 11s ease-in-out infinite;
}
/* Bottom-left blob: green → accent */
.ai-page .ai-hero__blob--bl {
    /* Hidden for now (kept in DOM + CSS so we can restore easily) */
    display: none;
    bottom: -20%;
    left: -14%;
    background: radial-gradient(
        circle,
        var(--color-green) 0%,
        rgba(var(--color-accent-rgb), 0.6) 55%,
        transparent 80%
    );
    animation: aiHeroBlobBL 14s ease-in-out infinite;
    /* Different starting shape so the pair doesn't feel symmetrical */
    border-radius: 60% 40% 30% 70% / 55% 65% 35% 45%;
}

/* Breathing keyframes: transform + opacity only. Dropping border-radius
   from the animation means the blur filter doesn't recompute every frame
   — the GPU can just translate/scale the already-blurred buffer. */
@keyframes aiHeroBlobTR {
    0%, 100% {
        transform: translate(0, 0) scale(0.9, 1);
        opacity: 0.45;
    }
    50% {
        transform: translate(-120px, 100px) scale(1.25, 1.15);
        opacity: 0.7;
    }
}
@keyframes aiHeroBlobBL {
    0%, 100% {
        transform: translate(0, 0) scale(0.95, 0.9);
        opacity: 0.4;
    }
    50% {
        transform: translate(130px, -110px) scale(1.2, 1.3);
        opacity: 0.72;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .ai-hero__blob {
        animation: none;
    }
}

/* ---- Ping-pong split (intro + list, alternating sides) ------ */
.ai-page .ai-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    grid-template-areas: 'intro list';
}
@media (max-width: 900px) {
    .ai-page .ai-split {
        grid-template-columns: 1fr;
        grid-template-areas: 'intro' 'list';
    }
}
.ai-page .ai-split__intro { grid-area: intro; }
.ai-page .ai-split__list  { grid-area: list; }

/* --flip alternates: list appears on the left, intro on the right */
.ai-page .ai-split--flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'list intro';
}
@media (max-width: 900px) {
    .ai-page .ai-split--flip {
        grid-template-columns: 1fr;
        grid-template-areas: 'intro' 'list';
    }
}

/* --to-graphic: all text content (badge + h2 + lede + bullets) lives in
   the LEFT column, a graphics slot occupies the RIGHT column. Matches
   the campaigns-page ping-pong layout. Text column is narrower (5fr) so
   the graphics area (7fr) has room to breathe. */
.ai-page .ai-split--to-graphic {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: 'intro art';
    /* Centre the text column vertically against the (taller) composite */
    align-items: center;
}
.ai-page .ai-split--to-graphic .ai-split__intro { grid-area: intro; }
.ai-page .ai-split--to-graphic .ai-split__art   { grid-area: art; }
.ai-page .ai-split__art {
    /* Placeholder slot — graphics get dropped in later */
    min-height: 360px;
    border-radius: 20px;
    background: #fafafa;
    border: 1px dashed rgba(29, 29, 32, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* When .ai-wyg content is present, strip placeholder styling */
.ai-page .ai-split__art.ai-wyg {
    min-height: 540px;
    background: transparent;
    border: none;
    padding: 1rem;
    display: block;
}

/* =====================================================================
   WHAT-YOU-GET COMPOSITE (.ai-wyg)
   Kawartha Land Trust site screenshot in the centre with 5 floating
   cards overlapping the edges — one per bullet on the left.
   ===================================================================== */
.ai-page .ai-wyg__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    min-height: 500px;
}

/* Central site screenshot — sized at 2:1 to match the KLT screenshot
   aspect exactly, so nothing gets cropped. Vertically centred so cards
   can overlap both the top and bottom edges. */
.ai-page .ai-wyg__base {
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    aspect-ratio: 2 / 1;
    transform: translateY(-50%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -20px rgba(29, 29, 32, 0.28),
        0 12px 28px -14px rgba(29, 29, 32, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    z-index: 1;
}
.ai-page .ai-wyg__base img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* =====================================================================
   LIVING BROWSER treatment (used only by the "What you get" section).
   Wraps the screenshot in a realistic chrome strip and layers ambient
   motion on top: cursor path, section highlight, "saved" toast, and a
   CTA pulse — so the image reads as a site being actively managed.
   ===================================================================== */
.ai-page .ai-wyg__base--browser {
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}
.ai-page .ai-wyg__base--browser img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
}

/* ---- Chrome strip ---- */
.ai-page .ai-wyg__chrome {
    flex: 0 0 auto;
    height: 30px;
    background: linear-gradient(to bottom, #ececf0 0%, #e3e3e8 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    gap: 0.7rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.ai-page .ai-wyg__chrome-dots {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}
.ai-page .ai-wyg__chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c0c0c4;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08) inset;
}
.ai-page .ai-wyg__chrome-dot--red    { background: #ff5f57; }
.ai-page .ai-wyg__chrome-dot--yellow { background: #febb2e; }
.ai-page .ai-wyg__chrome-dot--green  { background: #28c941; }
.ai-page .ai-wyg__chrome-url {
    flex: 1;
    max-width: 60%;
    margin: 0 auto;
    padding: 0.22rem 0.6rem;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: 'SF Mono', Menlo, Monaco, 'Roboto Mono', monospace;
    font-size: 0.58rem;
    color: rgba(29, 29, 32, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-page .ai-wyg__chrome-lock {
    width: 9px;
    height: 9px;
    color: rgba(29, 29, 32, 0.55);
    flex-shrink: 0;
}

/* ---- Screen (image wrapper + overlay stage) ---- */
.ai-page .ai-wyg__screen {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #fff;
    min-height: 0;
}

/* ---- Animated cursor. Uses color: currentColor on the SVG path so
        filter drop-shadow gives it a crisp offset shadow. ---- */
.ai-page .ai-wyg__cursor {
    position: absolute;
    top: 30%;
    left: 12%;
    width: 16px;
    height: 22px;
    color: #1D1D20;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    animation: wygCursor 16s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    will-change: transform, top, left;
}
.ai-page .ai-wyg__cursor svg { width: 100%; height: 100%; display: block; }
@keyframes wygCursor {
    0%, 4%   { top: 30%; left: 12%; }
    18%      { top: 42%; left: 25%; }   /* heading toward Team */
    26%, 42% { top: 48%; left: 35%; }   /* resting on Team section */
    54%      { top: 28%; left: 58%; }   /* moving up & right */
    64%, 76% { top: 20%; left: 74%; }   /* hovering near Donate CTA */
    88%      { top: 35%; left: 45%; }   /* drifting back */
    100%     { top: 30%; left: 12%; }
}

/* ---- Highlight rectangle — lights up over the Team area ---- */
.ai-page .ai-wyg__highlight {
    position: absolute;
    top: 44%;
    left: 22%;
    width: 30%;
    height: 14%;
    border: 1.5px solid var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    border-radius: 5px;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.08);
    animation: wygHighlight 16s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}
@keyframes wygHighlight {
    0%, 22%   { opacity: 0; transform: scale(0.96); }
    28%, 46%  { opacity: 1; transform: scale(1); }
    52%, 100% { opacity: 0; transform: scale(0.96); }
}

/* ---- "Saved" toast — drops in from top-right after the highlight ---- */
.ai-page .ai-wyg__toast {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 0.4rem 0.55rem 0.4rem 0.45rem;
    background: rgba(29, 29, 32, 0.95);
    color: #fff;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
    pointer-events: none;
    z-index: 4;
    animation: wygToast 16s cubic-bezier(0.35, 0.7, 0.3, 1) infinite;
}
.ai-page .ai-wyg__toast svg {
    width: 12px;
    height: 12px;
    color: #41E65B;
    flex-shrink: 0;
}
@keyframes wygToast {
    0%, 40%  { opacity: 0; transform: translateY(-6px) scale(0.95); }
    46%, 62% { opacity: 1; transform: translateY(0) scale(1); }
    68%, 100% { opacity: 0; transform: translateY(-6px) scale(0.95); }
}

/* ---- Continuous CTA pulse. Two rings for a heartbeat feel. ---- */
.ai-page .ai-wyg__cta-pulse {
    position: absolute;
    top: 23%;
    right: 11%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 2;
}
.ai-page .ai-wyg__cta-pulse::before,
.ai-page .ai-wyg__cta-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-accent);
    opacity: 0.5;
    animation: wygCtaPulse 2.2s cubic-bezier(0.2, 0.5, 0.3, 1) infinite;
}
.ai-page .ai-wyg__cta-pulse::after {
    animation-delay: 1.1s;
}
@keyframes wygCtaPulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.8); opacity: 0;   }
    100% { transform: scale(2.8); opacity: 0;   }
}

/* Respect motion preferences — freeze everything at a resting state */
@media (prefers-reduced-motion: reduce) {
    .ai-page .ai-wyg__cursor,
    .ai-page .ai-wyg__highlight,
    .ai-page .ai-wyg__toast,
    .ai-page .ai-wyg__cta-pulse::before,
    .ai-page .ai-wyg__cta-pulse::after {
        animation: none;
    }
    .ai-page .ai-wyg__toast,
    .ai-page .ai-wyg__highlight { opacity: 0; }
}

/* Faux browser URL chip on the screenshot */
.ai-page .ai-wyg__base-url {
    position: absolute;
    top: 0.55rem;
    left: 0.7rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    z-index: 2;
}

/* ---- Base floating card — LIGHT GLASS:
   translucent white over the KLT screenshot + backdrop blur, so cards
   read as glassy panels rather than solid rectangles. Mirrors the
   dark-glass pattern from the overview deck, inverted for the white
   section. ---- */
.ai-page .ai-wyg__card {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.75rem 0.9rem 0.8rem;
    box-shadow:
        0 22px 44px -14px rgba(29, 29, 32, 0.22),
        0 6px 14px -6px rgba(29, 29, 32, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #1D1D20;
    font-family: var(--font-body);
    font-size: 0.72rem;
    z-index: 2;
}

.ai-page .ai-wyg__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}
.ai-page .ai-wyg__icon {
    width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 29, 32, 0.06);
    color: rgba(29, 29, 32, 0.6);
    border-radius: 7px;
    flex-shrink: 0;
}
.ai-page .ai-wyg__icon svg { width: 0.85rem; height: 0.85rem; }
.ai-page .ai-wyg__icon--accent {
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
}
.ai-page .ai-wyg__label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Theme-coloured eyebrow (brand purple) so each card's label reads
       as a branded tag rather than generic grey text. */
    color: var(--color-accent);
}
.ai-page .ai-wyg__body {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #1D1D20;
}
.ai-page .ai-wyg__body strong {
    color: var(--color-accent);
    font-weight: 600;
}
.ai-page .ai-wyg__meta {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.58rem;
    color: rgba(29, 29, 32, 0.45);
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    letter-spacing: 0.01em;
}

/* ---- Card 1: Email update (top-left) ---- */
.ai-page .ai-wyg__card--email {
    top: 2%;
    left: -3%;
    width: 50%;
    max-width: 215px;
}
/* Cards that include a thumbnail header let it bleed to the top edge */
.ai-page .ai-wyg__card:has(.ai-wyg__thumb) {
    padding-top: 0;
}
/* Header thumbnail showing the KLT page being edited */
.ai-page .ai-wyg__thumb {
    position: relative;
    /* Negative horizontal margins + 0 top push it flush to the card's
       inner edges (bleed). Bottom margin is the gap before the head row. */
    margin: 0 -0.9rem 0.55rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #f1f2f4;
    border-radius: 11px 11px 0 0;
}
.ai-page .ai-wyg__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.ai-page .ai-wyg__thumb-path {
    position: absolute;
    bottom: 0.32rem;
    left: 0.4rem;
    padding: 0.14rem 0.42rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.52rem;
    letter-spacing: 0.02em;
}

/* ---- Card 2: Conversion stat (top-right, dark accent + glass) ---- */
.ai-page .ai-wyg__card--stat {
    top: 4%;
    right: -4%;
    width: 36%;
    max-width: 150px;
    padding: 0.9rem 1rem;
    background: rgba(29, 29, 32, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.ai-page .ai-wyg__stat-number {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #74eb8a;
}
.ai-page .ai-wyg__stat-unit { font-size: 0.95rem; margin-left: 1px; }
.ai-page .ai-wyg__stat-label {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.82);
}
.ai-page .ai-wyg__stat-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* ---- Card 3: AI suggestion (middle-right, overlapping) ---- */
.ai-page .ai-wyg__card--ai {
    top: 44%;
    right: -6%;
    width: 52%;
    max-width: 230px;
}
.ai-page .ai-wyg__pill {
    display: inline-flex;
    align-items: center;
    margin-top: 0.55rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: none;
    cursor: default;
}

/* ---- Card 4: Search rankings (bottom-left, overlapping) ---- */
.ai-page .ai-wyg__card--seo {
    bottom: 4%;
    left: -4%;
    width: 52%;
    max-width: 225px;
}
.ai-page .ai-wyg__ranks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.32rem;
}
.ai-page .ai-wyg__rank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.38rem 0.55rem;
    background: rgba(29, 29, 32, 0.04);
    border-radius: 6px;
    font-size: 0.66rem;
    color: rgba(29, 29, 32, 0.78);
}
.ai-page .ai-wyg__query {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.5rem;
}
.ai-page .ai-wyg__rank {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    color: #22b24d;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.ai-page .ai-wyg__rank-arrow { font-size: 0.64rem; }

/* ---- Card 5: Monthly report (bottom-right, wide strip) ---- */
.ai-page .ai-wyg__card--report {
    bottom: 6%;
    right: -4%;
    width: 58%;
    max-width: 260px;
}
.ai-page .ai-wyg__report-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 0.45rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ai-page .ai-wyg__report-tag {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    color: #1D1D20;
}
.ai-page .ai-wyg__report-month {
    font-size: 0.58rem;
    color: rgba(29, 29, 32, 0.5);
    letter-spacing: 0.02em;
}
.ai-page .ai-wyg__report-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.ai-page .ai-wyg__report-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ai-page .ai-wyg__report-stat strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.01em;
}
.ai-page .ai-wyg__report-stat span {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.56rem;
    color: rgba(29, 29, 32, 0.6);
    line-height: 1.25;
}

/* Responsive: on narrow screens, cards pull back within the stage */
@media (max-width: 900px) {
    .ai-page .ai-wyg__card--email  { top: 0;   left: 0; }
    .ai-page .ai-wyg__card--stat   { top: 0;   right: 0; }
    .ai-page .ai-wyg__card--ai     { top: 40%; right: 0; }
    .ai-page .ai-wyg__card--seo    { bottom: 0; left: 0; }
    .ai-page .ai-wyg__card--report { bottom: 0; right: 0; }
    .ai-page .ai-wyg__card--wins   { top: 0;   left: 0; }
    .ai-page .ai-wyg__card--cite   { top: 40%; right: 0; }
    .ai-page .ai-wyg__card--opp    { bottom: 0; left: 0; }
}

/* =====================================================================
   WHAT-YOU-GET overrides — scoped only to #what-you-get so other
   sections that reuse .ai-wyg classes are untouched.
   • Transparent base (no white card / no shadow on the wrapper)
   • Shadow + rounded corners applied to the IMAGE itself
   • Bigger centrepiece (expand the base bounds beyond the stage insets)
   • Bump the "Update request" card further up
   ===================================================================== */
.ai-page #what-you-get .ai-wyg__stage {
    aspect-ratio: 16 / 11;
    min-height: 560px;
}
.ai-page #what-you-get .ai-wyg__base--bare {
    /* Stretch the centrepiece wider and taller than the default base */
    left: -2%;
    right: -2%;
    aspect-ratio: 16 / 9;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.ai-page #what-you-get .ai-wyg__base--bare .ai-wyg__screen {
    background: transparent;
    overflow: visible;
}
.ai-page #what-you-get .ai-wyg__base--bare .ai-wyg__screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 18px;
    box-shadow:
        0 38px 70px -22px rgba(29, 29, 32, 0.32),
        0 14px 32px -14px rgba(29, 29, 32, 0.18);
}

/* Update request card — sits at the top-left, slightly overlapping
   the image edge (rather than floating above it). */
.ai-page #what-you-get .ai-wyg__card--email {
    top: 8%;
    left: -5%;
}

/* =====================================================================
   CONVERSION & GROWTH overrides — scoped to #conversion-growth so
   only this section gets the transparent / full-width treatment.
   • Transparent base (no white card, no border, no shadow)
   • Image goes full container width (removes the default 4% insets)
   • Shadow + rounded corners live on the image itself
   ===================================================================== */
/* Stage grows to match the image; no forced aspect-ratio or min-height */
.ai-page #conversion-growth .ai-wyg__stage {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
}
.ai-page #conversion-growth .ai-wyg__base {
    /* Flow with the content instead of being absolutely pinned, so the
       stage takes the natural height of the image. */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    /* Strip anything that could look like a container behind the photo */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.ai-page #conversion-growth .ai-wyg__base img {
    /* Full container width, natural aspect ratio — entire image shown. */
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    box-shadow:
        0 38px 70px -22px rgba(29, 29, 32, 0.28),
        0 14px 32px -14px rgba(29, 29, 32, 0.16);
}

/* Customer insight card — nudged down and further out to the right
   so it sits off the bottom-right corner instead of the middle. */
.ai-page #conversion-growth .ai-wyg__card--ai {
    top: 62%;
    right: -10%;
}

/* =====================================================================
   GOAL-BASED GROWTH — centrepiece treatment
   Same transparent / full-width / image-carries-shadow pattern used
   for What-You-Get and Conversion & Growth.
   ===================================================================== */
.ai-page #goal-based-growth .ai-wyg__stage {
    aspect-ratio: 16 / 11;
    min-height: 560px;
}
.ai-page #goal-based-growth .ai-wyg__base {
    left: 0;
    right: 0;
    /* Full stage height (inherited top: 50% + translateY(-50%) centres it) */
    aspect-ratio: auto;
    height: 100%;
    /* Strip anything that could look like a container behind the photo */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* Centre the image inside the base so the shadow hugs it */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-page #goal-based-growth .ai-wyg__base img {
    /* Render at natural aspect up to the container bounds, so the
       shadow + corners land on the actual image edges (not a letterbox). */
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    box-shadow:
        0 38px 70px -22px rgba(0, 0, 0, 0.5),
        0 14px 32px -14px rgba(0, 0, 0, 0.32);
}

/* High-impact stat card — bottom-right, nudged left so it just
   overlaps the right edge of the centrepiece image. */
.ai-page #goal-based-growth .ai-wyg__card--stat {
    top: auto;
    bottom: 4%;
    right: 8%;
}

/* =====================================================================
   PROGRESS & RESULTS — white ping pong centrepiece
   Image fills the full width of the right column with no visible
   container behind it. Shadow + corners applied directly to the image.
   ===================================================================== */
/* Strip the art-column's inner padding so the image can hit the edges. */
.ai-page #progress-results .ai-split__art.ai-wyg {
    padding: 0;
    background: transparent !important;
    border: none !important;
}
.ai-page #progress-results .ai-wyg__stage {
    aspect-ratio: 5 / 6;
    min-height: 720px;
}
.ai-page #progress-results .ai-wyg__base {
    left: 0;
    right: 0;
    aspect-ratio: auto;
    height: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-page #progress-results .ai-wyg__base img {
    /* Fill the full right-column area (both dimensions). The image is
       cropped as needed to cover the container without distortion. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 18px;
    box-shadow:
        0 38px 70px -22px rgba(29, 29, 32, 0.28),
        0 14px 32px -14px rgba(29, 29, 32, 0.16);
}

/* Plan execution — top-left, slight overlap on the image's left edge */
.ai-page #progress-results .ai-wyg__card--email {
    top: 6%;
    left: -4%;
}
/* Progress tracking stat — bottom-right, slight overlap on the right edge */
.ai-page #progress-results .ai-wyg__card--stat {
    top: auto;
    bottom: 6%;
    right: -4%;
}

/* Vertically centre the split columns + scale the text down to match
   the other ping-pong sections. */
.ai-page #progress-results .ai-split--to-graphic {
    align-items: center;
}
.ai-page #progress-results .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #progress-results h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #progress-results .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}

/* =====================================================================
   YOU STAY IN CONTROL — dark ping pong, graphic left
   Image fills the full area of the left column; two peripheral cards
   (change log top-left, monthly stat bottom-right) overlap the edges.
   ===================================================================== */
.ai-page #always-in-control .ai-split__art.ai-wyg {
    padding: 0;
    background: transparent !important;
    border: none !important;
}
.ai-page #always-in-control .ai-wyg__stage {
    aspect-ratio: 5 / 6;
    min-height: 720px;
}
.ai-page #always-in-control .ai-wyg__base {
    left: 0;
    right: 0;
    aspect-ratio: auto;
    height: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-page #always-in-control .ai-wyg__base img {
    /* Fill the full left-column area (both dimensions). */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 18px;
    box-shadow:
        0 38px 70px -22px rgba(0, 0, 0, 0.5),
        0 14px 32px -14px rgba(0, 0, 0, 0.32);
}

/* Change log card — top-left, slight overlap on the image's left edge */
.ai-page #always-in-control .ai-wyg__card--email {
    top: 6%;
    left: -4%;
}
/* Monthly stat card — bottom-right, slight overlap on the right edge */
.ai-page #always-in-control .ai-wyg__card--stat {
    top: auto;
    bottom: 6%;
    right: -4%;
}

/* =====================================================================
   KNOW YOUR AUDIENCE — white ping pong: text left, graphic right
   Same fill-the-space pattern as the other ping-pong sections.
   ===================================================================== */
.ai-page #know-your-audience .ai-split__art.ai-wyg {
    padding: 0;
    background: transparent !important;
    border: none !important;
}
.ai-page #know-your-audience .ai-wyg__stage {
    aspect-ratio: 5 / 6;
    min-height: 720px;
}
.ai-page #know-your-audience .ai-wyg__base {
    left: 0;
    right: 0;
    aspect-ratio: auto;
    height: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-page #know-your-audience .ai-wyg__base img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 18px;
    box-shadow:
        0 38px 70px -22px rgba(29, 29, 32, 0.28),
        0 14px 32px -14px rgba(29, 29, 32, 0.16);
}

/* ---- Connector-lines SVG overlay ----
   Sits over the image, below the floating cards (z-index between the
   image and the cards). Thin white strokes with a tiny dot at each
   target point; soft shadow so they stay legible on lighter areas of
   the photo. */
.ai-page #know-your-audience .kya-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.ai-page #know-your-audience .kya-links__line {
    stroke: #ffffff;
    stroke-width: 1.3;
    stroke-linecap: round;
    opacity: 0.85;
}
.ai-page #know-your-audience .kya-links__dot {
    fill: #ffffff;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 0;
}

/* Float the cards above the connector overlay */
.ai-page #know-your-audience .ai-wyg__card {
    z-index: 3;
}

/* Persona card — top-left, slight overlap on the image's left edge */
.ai-page #know-your-audience .ai-wyg__card--email {
    top: 6%;
    left: -4%;
}
/* Audience stat card — bottom-right, slight overlap on the right edge */
.ai-page #know-your-audience .ai-wyg__card--stat {
    top: auto;
    bottom: 6%;
    right: -4%;
}

/* Vertically centre the split columns + scale text down to match the
   rest of the ping-pong sections. */
.ai-page #know-your-audience .ai-split--to-graphic {
    align-items: center;
}
.ai-page #know-your-audience .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #know-your-audience h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #know-your-audience .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}
.ai-page #know-your-audience .ai-list {
    gap: 0.95rem;
    margin-top: 1.25rem;
}
.ai-page #know-your-audience .ai-list__item {
    grid-template-columns: 14px 1fr;
    gap: 0.75rem;
}
.ai-page #know-your-audience .ai-list__icon {
    width: 14px;
    height: 17px;
    margin-top: 0.15em;
}
.ai-page #know-your-audience .ai-list__body h3 {
    font-size: clamp(0.78rem, 0.82vw, 0.82rem);
    margin: 0 0 0.25rem;
}
.ai-page #know-your-audience .ai-list__body p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(29, 29, 32, 0.72);
}

/* Vertically centre the split columns + scale the text side down to
   match the other ping-pong sections. */
.ai-page #always-in-control .ai-split--graphic-left {
    align-items: center;
}
.ai-page #always-in-control .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #always-in-control h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #always-in-control .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}

/* =====================================================================
   CTRL-CAR — carousel used in #always-in-control for the 7 principles.
   Progress dashes at the top, one card visible at a time with a big
   number + icon + title + body, arrow controls + counter at the bottom.
   Auto-advances every 5s; dash fills in sync with countdown.
   ===================================================================== */
.ai-page .ctrl-car {
    --ctrl-duration: 5s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 0.25rem;
}

/* ---- Progress dashes ---- */
.ai-page .ctrl-car__progress {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.4rem;
}
.ai-page .ctrl-car__dash {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 999px;
    /* Hit-slop for easier clicking without changing visual height */
    box-shadow: 0 6px 0 -3px transparent, 0 -6px 0 -3px transparent;
    transition: background 0.3s ease;
}
.ai-page .ctrl-car__dash:hover {
    background: rgba(255, 255, 255, 0.22);
}
.ai-page .ctrl-car__dash-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--color-accent);
    border-radius: inherit;
    transform-origin: left center;
}
/* Dashes before the active one stay fully filled (visited indicator) */
.ai-page .ctrl-car__dash.is-visited .ctrl-car__dash-fill {
    width: 100%;
    opacity: 0.45;
    transition: width 0.35s ease, opacity 0.35s ease;
}
/* Active dash animates its fill over --ctrl-duration */
.ai-page .ctrl-car__dash.is-active .ctrl-car__dash-fill {
    width: 100%;
    opacity: 1;
    animation: ctrlCarFill var(--ctrl-duration) linear forwards;
}
.ai-page .ctrl-car.is-paused .ctrl-car__dash.is-active .ctrl-car__dash-fill {
    animation-play-state: paused;
}
@keyframes ctrlCarFill {
    from { width: 0; }
    to   { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .ctrl-car__dash.is-active .ctrl-car__dash-fill {
        animation: none;
        width: 100%;
    }
}

/* ---- Card stack — only the active card is visible, others are
        absolutely positioned underneath it so the height is stable. */
.ai-page .ctrl-car__stack {
    position: relative;
    min-height: 150px;
}
.ai-page .ctrl-car__card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.45s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.ai-page .ctrl-car__card.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ai-page .ctrl-car__card.is-leaving {
    position: absolute;
    opacity: 0;
    transform: translateY(-14px);
}

/* ---- Giant outlined number ---- */
.ai-page .ctrl-car__num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3rem, 4.5vw, 4.2rem);
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -0.04em;
    /* Stroked/outlined numeral for a graphic-display look */
    color: transparent;
    -webkit-text-stroke: 1.25px rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.0));
    -webkit-background-clip: text;
            background-clip: text;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.ai-page .ctrl-car__card.is-active .ctrl-car__num {
    /* Accent fill on the active card */
    -webkit-text-stroke: 1.25px rgba(var(--color-accent-rgb), 0.75);
}

.ai-page .ctrl-car__body {
    min-width: 0;
}
.ai-page .ctrl-car__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}
.ai-page .ctrl-car__icon svg {
    width: 14px;
    height: 14px;
}
.ai-page .ctrl-car__title {
    margin: 0 0 0.35rem;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.ai-page .ctrl-car__desc {
    margin: 0;
    font-size: clamp(0.78rem, 0.85vw, 0.88rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

/* ---- Footer: counter + arrows ---- */
.ai-page .ctrl-car__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.25rem;
}
.ai-page .ctrl-car__count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}
.ai-page .ctrl-car__count strong {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.04em;
    display: inline-block;
    transition: transform 0.25s ease;
}
.ai-page .ctrl-car__count-sep { opacity: 0.45; }
.ai-page .ctrl-car__arrows {
    display: inline-flex;
    gap: 0.45rem;
}
.ai-page .ctrl-car__arrow {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}
.ai-page .ctrl-car__arrow:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    color: #fff;
}
.ai-page .ctrl-car__arrow:active { transform: scale(0.94); }
.ai-page .ctrl-car__arrow svg { width: 14px; height: 14px; }

@media (max-width: 520px) {
    .ai-page .ctrl-car__card { grid-template-columns: 1fr; gap: 0.55rem; }
    .ai-page .ctrl-car__num { font-size: 2.4rem; }
}

/* =====================================================================
   CTRL-CAR — vertical variant
   Progress dashes stack down the left side (instead of running across
   the top). Cards sit to the right of the dash column.
   Shadow/arrows/counter reuse the base styles.
   ===================================================================== */
.ai-page .ctrl-car--vert .ctrl-car__body-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: stretch;
}
/* Progress column: vertical stack of dashes */
.ai-page .ctrl-car--vert .ctrl-car__progress {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-auto-rows: minmax(0, 1fr);
    gap: 0.5rem;
    align-self: stretch;
    min-height: 160px;
}
.ai-page .ctrl-car--vert .ctrl-car__dash {
    width: 3px;
    height: auto;
    min-height: 42px;
    /* Hit-slop on the sides rather than top/bottom */
    box-shadow: 6px 0 0 -3px transparent, -6px 0 0 -3px transparent;
}
/* Fill grows downward (top → bottom) instead of left → right */
.ai-page .ctrl-car--vert .ctrl-car__dash-fill {
    width: 100%;
    height: 0;
    transform-origin: top center;
    /* Reset the horizontal animation that the base sets and use the
       vertical keyframe instead. */
    animation: none;
}
.ai-page .ctrl-car--vert .ctrl-car__dash.is-visited .ctrl-car__dash-fill {
    width: 100%;
    height: 100%;
    opacity: 0.45;
    transition: height 0.35s ease, opacity 0.35s ease;
}
.ai-page .ctrl-car--vert .ctrl-car__dash.is-active .ctrl-car__dash-fill {
    width: 100%;
    opacity: 1;
    animation: ctrlCarFillVert var(--ctrl-duration) linear forwards;
}
.ai-page .ctrl-car--vert.is-paused .ctrl-car__dash.is-active .ctrl-car__dash-fill {
    animation-play-state: paused;
}
@keyframes ctrlCarFillVert {
    from { height: 0; }
    to   { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .ctrl-car--vert .ctrl-car__dash.is-active .ctrl-car__dash-fill {
        animation: none;
        height: 100%;
    }
}

/* Card stack in vertical mode — each card is a row, and the big number
   sits inline with the body content. Kept compact to match the ping-
   pong text column width. */
.ai-page .ctrl-car--vert .ctrl-car__stack {
    min-height: 160px;
}

/* On narrow viewports, fall back to the horizontal dash row so the
   dashes don't eat up the full column width. */
@media (max-width: 520px) {
    .ai-page .ctrl-car--vert .ctrl-car__body-wrap {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .ai-page .ctrl-car--vert .ctrl-car__progress {
        grid-auto-flow: column;
        grid-auto-rows: initial;
        grid-auto-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .ai-page .ctrl-car--vert .ctrl-car__dash {
        width: auto;
        height: 3px;
        min-height: 0;
    }
    .ai-page .ctrl-car--vert .ctrl-car__dash.is-active .ctrl-car__dash-fill {
        animation: ctrlCarFill var(--ctrl-duration) linear forwards;
        height: 100%;
    }
}

/* =====================================================================
   CTRL-CAR — light variant
   Rebalances every colour-dependent bit of the carousel for use on a
   light/white background. Applied via .ctrl-car--light (reusable) or
   via any #id scope (e.g. #progress-results) that matches.
   ===================================================================== */
.ai-page .ctrl-car--light .ctrl-car__dash,
.ai-page #progress-results .ctrl-car__dash {
    background: rgba(29, 29, 32, 0.1);
}
.ai-page .ctrl-car--light .ctrl-car__dash:hover,
.ai-page #progress-results .ctrl-car__dash:hover {
    background: rgba(29, 29, 32, 0.22);
}
.ai-page .ctrl-car--light .ctrl-car__num,
.ai-page #progress-results .ctrl-car__num {
    -webkit-text-stroke: 1.25px rgba(29, 29, 32, 0.28);
    background: linear-gradient(180deg, rgba(29, 29, 32, 0.05), rgba(29, 29, 32, 0));
    -webkit-background-clip: text;
            background-clip: text;
}
.ai-page .ctrl-car--light .ctrl-car__card.is-active .ctrl-car__num,
.ai-page #progress-results .ctrl-car__card.is-active .ctrl-car__num {
    -webkit-text-stroke: 1.25px rgba(var(--color-accent-rgb), 0.75);
}
.ai-page .ctrl-car--light .ctrl-car__title,
.ai-page #progress-results .ctrl-car__title {
    color: var(--color-dark);
}
.ai-page .ctrl-car--light .ctrl-car__desc,
.ai-page #progress-results .ctrl-car__desc {
    color: rgba(29, 29, 32, 0.72);
}
.ai-page .ctrl-car--light .ctrl-car__foot,
.ai-page #progress-results .ctrl-car__foot {
    border-top-color: rgba(29, 29, 32, 0.08);
}
.ai-page .ctrl-car--light .ctrl-car__count,
.ai-page #progress-results .ctrl-car__count {
    color: rgba(29, 29, 32, 0.5);
}
.ai-page .ctrl-car--light .ctrl-car__count strong,
.ai-page #progress-results .ctrl-car__count strong {
    color: var(--color-dark);
}
.ai-page .ctrl-car--light .ctrl-car__arrow,
.ai-page #progress-results .ctrl-car__arrow {
    background: rgba(29, 29, 32, 0.04);
    border-color: rgba(29, 29, 32, 0.14);
    color: rgba(29, 29, 32, 0.7);
}
.ai-page .ctrl-car--light .ctrl-car__arrow:hover,
.ai-page #progress-results .ctrl-car__arrow:hover {
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    color: var(--color-dark);
}

/* =====================================================================
   GOAL-BASED GROWTH — card content enhancements
   Scoped to #goal-based-growth so the overview-deck .ai-log card is
   unaffected. Adds a status column to the "Next 4 weeks" log and an
   AI reply variant to the "Your input, today" chat.
   ===================================================================== */

/* Small pill used in the card head row (e.g. "Q3 plan") */
.ai-page #goal-based-growth .ai-wyg__badge {
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    background: rgba(var(--color-accent-rgb), 0.18);
    color: var(--color-accent);
    border-radius: 99px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* 3-column log rows: time · text · status (only in this section). */
.ai-page #goal-based-growth .ai-log__item {
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
}
/* Completed rows — accent left border, slightly dimmer text */
.ai-page #goal-based-growth .ai-log__item--done {
    border-left-color: var(--color-accent);
    opacity: 0.72;
}
.ai-page #goal-based-growth .ai-log__item--done.is-visible {
    opacity: 0.72;
}
.ai-page #goal-based-growth .ai-log__item--done .ai-log__text {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}
/* In-progress row — bright left border */
.ai-page #goal-based-growth .ai-log__item--doing {
    border-left-color: #34d399;
}

/* Status cell: circle containing an icon */
.ai-page #goal-based-growth .ai-log__status {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.ai-page #goal-based-growth .ai-log__status--done {
    background: var(--color-accent);
    color: #fff;
}
.ai-page #goal-based-growth .ai-log__status--done svg {
    width: 10px;
    height: 10px;
}
.ai-page #goal-based-growth .ai-log__status--doing {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}
.ai-page #goal-based-growth .ai-log__doing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
    animation: goalDoingPulse 1.6s ease-in-out infinite;
}
@keyframes goalDoingPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page #goal-based-growth .ai-log__doing-dot { animation: none; }
}
.ai-page #goal-based-growth .ai-log__status--queued {
    width: auto;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* Meta line at the bottom of the expanded cards */
.ai-page #goal-based-growth .ai-wyg__card--ai .ai-wyg__meta,
.ai-page #goal-based-growth .ai-wyg__card--report .ai-wyg__meta {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}

/* ---- Chat card — AI reply treatment ---- */
.ai-page #goal-based-growth .ai-chat__avatar--ai {
    background: var(--color-accent);
    color: #fff;
    padding: 3px;
}
.ai-page #goal-based-growth .ai-chat__avatar--ai svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =====================================================================
   DARK-GLASS variant — used on the Search & Visibility composite
   ===================================================================== */
.ai-page .ai-wyg--dark .ai-wyg__card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 22px 44px -14px rgba(0, 0, 0, 0.55),
        0 6px 14px -6px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
}
.ai-page .ai-wyg--dark .ai-wyg__icon {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
}
.ai-page .ai-wyg--dark .ai-wyg__body {
    color: #fff;
}
.ai-page .ai-wyg--dark .ai-wyg__body strong {
    color: var(--color-accent);
}
.ai-page .ai-wyg--dark .ai-wyg__meta {
    color: rgba(255, 255, 255, 0.5);
}

/* ---- Card: SEO wins (top-left) ---- */
.ai-page .ai-wyg__card--wins {
    top: 2%;
    left: -4%;
    width: 48%;
    max-width: 230px;
}
.ai-page .ai-wins {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.3rem;
}
.ai-page .ai-wins__row {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid var(--color-accent);
    border-radius: 5px;
    font-size: 0.66rem;
}
.ai-page .ai-wins__row strong {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ai-page .ai-wins__text {
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page .ai-wins__delta {
    color: #74eb8a;
    font-size: 0.6rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ---- Card: AI citation (middle-right, overlapping) ---- */
.ai-page .ai-wyg__card--cite {
    top: 35%;
    right: -5%;
    width: 54%;
    max-width: 260px;
}
.ai-page .ai-cite__prompt {
    margin: 0 0 0.45rem;
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 0.7rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.35;
}
.ai-page .ai-cite__quote {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    color: #fff;
    line-height: 1.4;
}
.ai-page .ai-cite__quote strong {
    color: var(--color-accent);
    font-weight: 600;
}
.ai-page .ai-cite__sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.ai-page .ai-cite__chip {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.14);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-accent);
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ---- Card: Opportunity alert (bottom-left, overlapping) ---- */
.ai-page .ai-wyg__card--opp {
    bottom: 4%;
    left: -4%;
    width: 52%;
    max-width: 240px;
}

/* =====================================================================
   BUILT-TO-GROW SECTION — same 30% type-scale reduction as WYG
   ===================================================================== */
.ai-page #built-to-grow .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #built-to-grow h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #built-to-grow .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}
.ai-page #built-to-grow .ai-list {
    gap: 0.95rem;
    margin-top: 1.25rem;
}
.ai-page #built-to-grow .ai-list__item {
    grid-template-columns: 14px 1fr;
    gap: 0.75rem;
}
.ai-page #built-to-grow .ai-list__icon {
    width: 14px;
    height: 17px;
    margin-top: 0.15em;
}
.ai-page #built-to-grow .ai-list__body h3 {
    font-size: clamp(0.78rem, 0.82vw, 0.82rem);
    margin: 0 0 0.25rem;
}
.ai-page #built-to-grow .ai-list__body p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* =====================================================================
   SEARCH & VISIBILITY — dual-mockup centrepiece (Google + ChatGPT)
   Replaces the single screenshot base. Peripheral cards tuck into
   corners with heavy overlap so the mockups get the visual real estate.
   ===================================================================== */

/* ---- Override base shell when in duo mode: no chrome/shadow on the
        outer wrapper because each inner panel has its own. ---- */
.ai-page .ai-wyg__base--duo {
    aspect-ratio: auto;
    height: 94%;
    max-height: 94%;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    z-index: 1;
}
.ai-page .ai-wyg__base--duo .ai-goog,
.ai-page .ai-wyg__base--duo .ai-gpt {
    flex: 1;
    min-height: 0;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 22px 46px -16px rgba(29, 29, 32, 0.3),
        0 8px 16px -6px rgba(29, 29, 32, 0.14);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    color: #1D1D20;
}

/* ---- GOOGLE MOCKUP ---- */
.ai-page .ai-goog__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}
.ai-page .ai-goog__logo {
    font-family: 'Arial', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    line-height: 1;
    flex-shrink: 0;
}
.ai-page .ai-goog__logo span:nth-child(1) { color: #4285F4; }
.ai-page .ai-goog__logo span:nth-child(2) { color: #EA4335; }
.ai-page .ai-goog__logo span:nth-child(3) { color: #FBBC05; }
.ai-page .ai-goog__logo span:nth-child(4) { color: #4285F4; }
.ai-page .ai-goog__logo span:nth-child(5) { color: #34A853; }
.ai-page .ai-goog__logo span:nth-child(6) { color: #EA4335; }
.ai-page .ai-goog__search {
    flex: 1;
    padding: 0.32rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
    color: rgba(29, 29, 32, 0.75);
    min-width: 0;
}
.ai-page .ai-goog__search svg {
    width: 11px;
    height: 11px;
    color: rgba(29, 29, 32, 0.45);
    flex-shrink: 0;
}
.ai-page .ai-goog__search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page .ai-goog__result {
    padding: 0.85rem 0.95rem 0.9rem;
    flex: 1;
    overflow: hidden;
    background: rgba(var(--color-accent-rgb), 0.05);
    border-left: 2px solid var(--color-accent);
}
.ai-page .ai-goog__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.ai-page .ai-goog__favicon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg, #888);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ai-page .ai-goog__breadcrumb {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.ai-page .ai-goog__site {
    font-size: 0.66rem;
    color: rgba(29, 29, 32, 0.82);
    font-weight: 500;
}
.ai-page .ai-goog__url {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.55rem;
    color: rgba(29, 29, 32, 0.55);
    margin-top: 1px;
}
.ai-page .ai-goog__badge {
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.ai-page .ai-goog__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a0dab;
    margin: 0 0 0.3rem;
    line-height: 1.2;
    letter-spacing: 0.005em;
}
.ai-page .ai-goog__snippet {
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(29, 29, 32, 0.72);
    margin: 0;
}
.ai-page .ai-goog__snippet strong {
    color: rgba(29, 29, 32, 0.9);
    font-weight: 600;
}

/* ---- GOOGLE mockup — preserved text colours inside the dark section.
        The dark section rules set p/h*/strong to white, so we need
        class-scoped overrides that win by specificity. ---- */
.ai-page .ai-section--dark .ai-goog {
    color: rgba(29, 29, 32, 0.85);
}
.ai-page .ai-section--dark .ai-goog__search span {
    color: rgba(29, 29, 32, 0.78);
}
.ai-page .ai-section--dark .ai-goog__site {
    color: rgba(29, 29, 32, 0.88);
}
.ai-page .ai-section--dark .ai-goog__url {
    color: rgba(29, 29, 32, 0.55);
}
.ai-page .ai-section--dark .ai-goog__title {
    color: #1a0dab;
}
.ai-page .ai-section--dark .ai-goog__snippet {
    color: rgba(29, 29, 32, 0.72);
}
.ai-page .ai-section--dark .ai-goog__snippet strong {
    color: rgba(29, 29, 32, 0.95);
}

/* ---- CHATGPT mockup — dark UI to match ChatGPT's actual interface.
        Panel bg: #212121, header: #2a2a2a, text: near-white. ---- */
.ai-page .ai-wyg__base--duo .ai-gpt {
    background: #212121;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #ececec;
    box-shadow:
        0 22px 46px -16px rgba(0, 0, 0, 0.55),
        0 8px 16px -6px rgba(0, 0, 0, 0.35);
}
.ai-page .ai-gpt__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: #2a2a2a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.ai-page .ai-gpt__logo {
    width: 18px;
    height: 18px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ai-page .ai-gpt__logo svg { width: 100%; height: 100%; }
.ai-page .ai-section--dark .ai-gpt__name {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.01em;
}
.ai-page .ai-gpt__convo {
    padding: 0.8rem 0.9rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.ai-page .ai-gpt__msg {
    display: flex;
    gap: 0.6rem;
    font-size: 0.72rem;
    line-height: 1.45;
}
.ai-page .ai-section--dark .ai-gpt__msg,
.ai-page .ai-section--dark .ai-gpt__msg-body p {
    color: #ececec;
}
.ai-page .ai-gpt__msg-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
    background: #4a4a4f;
}
.ai-page .ai-gpt__msg-avatar--ai {
    background: #10a37f;
}
.ai-page .ai-gpt__msg-avatar--ai svg {
    width: 12px;
    height: 12px;
    color: #fff;
}
.ai-page .ai-gpt__msg-body {
    flex: 1;
    min-width: 0;
}
.ai-page .ai-gpt__msg-body p {
    margin: 0;
}
.ai-page .ai-section--dark .ai-gpt__msg-body p strong {
    color: var(--color-accent);
    font-weight: 600;
    background: rgba(var(--color-accent-rgb), 0.22);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}
.ai-page .ai-gpt__citation {
    margin-top: 0.55rem;
    padding: 0.45rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
}
.ai-page .ai-gpt__citation-thumb {
    width: 34px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    object-position: top center;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.ai-page .ai-gpt__citation-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.ai-page .ai-section--dark .ai-gpt__citation-name {
    font-size: 0.66rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page .ai-section--dark .ai-gpt__citation-url {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page .ai-gpt__citation-mark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
}

/* ---- Visibility score card (replaces the old cite card content) ---- */
.ai-page .ai-viz {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.ai-page .ai-viz__big {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ai-page .ai-viz__scale {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.ai-page .ai-viz__delta {
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    background: rgba(65, 230, 91, 0.16);
    color: #74eb8a;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ai-page .ai-viz__bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.55rem;
}
.ai-page .ai-viz__fill {
    height: 100%;
    width: var(--pct, 50%);
    background: linear-gradient(to right, var(--color-accent), #74eb8a);
    border-radius: inherit;
}

/* ---- Stage in this section just holds the dual mockup — no grid,
        no cards. The cards have been moved to the right column. ---- */
.ai-page #built-to-grow .ai-wyg__stage {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: auto;
}
.ai-page #built-to-grow .ai-wyg__base--duo {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    height: auto;
    max-height: none;
    width: auto;
    gap: 0.85rem;
}
/* Compress each panel to its natural content height — no empty space
   at the bottom of the Google or ChatGPT boxes. */
.ai-page .ai-wyg__base--duo .ai-goog,
.ai-page .ai-wyg__base--duo .ai-gpt {
    flex: 0 0 auto;
}
.ai-page .ai-goog__result { flex: 0 0 auto; }
.ai-page .ai-gpt__convo   { flex: 0 0 auto; }

/* Lock BOTH panels to explicit heights so the dual-mockup column
   can't grow while the typing sequence streams content in. Because
   the split uses align-items: center, any growth on the left column
   would shift the right column vertically. `height` (not min-height)
   means content growth inside the panels stays inside — the outer
   box never expands. overflow:hidden on the panels (already set by
   the base styles) keeps anything unexpected from spilling. */
.ai-page .ai-wyg__base--duo .ai-goog {
    height: 180px;
}
.ai-page .ai-wyg__base--duo .ai-gpt {
    height: 290px;
}

/* Columns centre-axis aligned so the compressed mockup sits vertically
   centred against the description. */
.ai-page #built-to-grow .ai-split--graphic-left {
    align-items: center;
}

/* ---- Insight-card row — hidden for now. Kept in the DOM and styled
        so we can switch it back on later. ---- */
.ai-page #built-to-grow .ai-card-row {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.75rem;
}
.ai-page #built-to-grow .ai-card-row .ai-wyg__card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    padding: 1rem 1.05rem;
}

/* =====================================================================
   SEARCH & VISIBILITY — typing sequence states.
   Applied when the section has been primed by JS (.is-primed class);
   JS then types into the query/message slots and toggles .is-revealed
   on the result + AI message + citation to fade them in.
   ===================================================================== */

/* Primed: the text slots are simply cleared by JS (empty strings), no
   visibility hack needed — once typed, the text stays visible for good.
   Only the revealable panels get opacity-hidden until their turn. */
.ai-page #built-to-grow.is-primed .ai-goog__result,
.ai-page #built-to-grow.is-primed .ai-gpt__msg--ai,
.ai-page #built-to-grow.is-primed .ai-gpt__citation {
    opacity: 0;
    transform: translateY(4px);
}

/* Transitions always set so reveal is smooth */
.ai-page #built-to-grow .ai-goog__result,
.ai-page #built-to-grow .ai-gpt__msg--ai,
.ai-page #built-to-grow .ai-gpt__citation {
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Revealed (final) state */
.ai-page #built-to-grow .ai-goog__result.is-revealed,
.ai-page #built-to-grow .ai-gpt__msg--ai.is-revealed,
.ai-page #built-to-grow .ai-gpt__citation.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Blinking caret while a text element is actively typing */
.ai-page #built-to-grow .is-typing::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background: currentColor;
    vertical-align: -0.1em;
    margin-left: 2px;
    animation: btgCaret 0.8s steps(2) infinite;
}
@keyframes btgCaret { 50% { opacity: 0; } }

/* =====================================================================
   GOAL-BASED GROWTH SECTION — dark, same 30% type-scale reduction
   ===================================================================== */
.ai-page #goal-based-growth .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #goal-based-growth h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #goal-based-growth .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}
.ai-page #goal-based-growth .ai-list {
    gap: 0.95rem;
    margin-top: 1.25rem;
}
.ai-page #goal-based-growth .ai-list__item {
    grid-template-columns: 14px 1fr;
    gap: 0.75rem;
}
.ai-page #goal-based-growth .ai-list__icon {
    width: 14px;
    height: 17px;
    margin-top: 0.15em;
}
.ai-page #goal-based-growth .ai-list__body h3 {
    font-size: clamp(0.78rem, 0.82vw, 0.82rem);
    margin: 0 0 0.25rem;
}
.ai-page #goal-based-growth .ai-list__body p {
    font-size: 0.7rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Simple progress bar (Northern Casket card 1) ---- */
.ai-page .ai-progress {
    position: relative;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.45rem;
    margin-bottom: 0.1rem;
}
.ai-page .ai-progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--pct, 30%);
    background: var(--color-accent);
    border-radius: inherit;
}

/* ---- Before / After priority shift (Northern Casket card 4) ---- */
.ai-page .ai-shift {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ai-page .ai-shift__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.78);
}
.ai-page .ai-shift__tag {
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.ai-page .ai-shift__tag--old {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
}
.ai-page .ai-shift__tag--new {
    background: rgba(var(--color-accent-rgb), 0.18);
    color: var(--color-accent);
}
.ai-page .ai-shift__row--new {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.3);
    color: #fff;
}
.ai-page .ai-shift__text {
    font-weight: 500;
}

/* =====================================================================
   CONVERSION & GROWTH SECTION — same 30% type-scale as WYG / BTG
   ===================================================================== */
.ai-page #conversion-growth .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #conversion-growth h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #conversion-growth .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}
.ai-page #conversion-growth .ai-list {
    gap: 0.95rem;
    margin-top: 1.25rem;
}
.ai-page #conversion-growth .ai-list__item {
    grid-template-columns: 14px 1fr;
    gap: 0.75rem;
}
.ai-page #conversion-growth .ai-list__icon {
    width: 14px;
    height: 17px;
    margin-top: 0.15em;
}
.ai-page #conversion-growth .ai-list__body h3 {
    font-size: clamp(0.78rem, 0.82vw, 0.82rem);
    margin: 0 0 0.25rem;
}
.ai-page #conversion-growth .ai-list__body p {
    font-size: 0.7rem;
    line-height: 1.5;
}

/* ---- Visitor flow list (Lingerie Loft card 1) ---- */
.ai-page .ai-flow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.38rem;
}
.ai-page .ai-flow__step {
    display: grid;
    grid-template-columns: 3.6rem 1fr auto;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
}
.ai-page .ai-flow__name {
    color: rgba(29, 29, 32, 0.72);
    font-weight: 500;
}
.ai-page .ai-flow__bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(29, 29, 32, 0.07);
    overflow: hidden;
}
.ai-page .ai-flow__bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--pct, 50%);
    background: var(--color-accent);
    border-radius: inherit;
}
.ai-page .ai-flow__pct {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: #1D1D20;
    font-variant-numeric: tabular-nums;
    min-width: 2.2rem;
    text-align: right;
}
/* Emphasised variant for a drop-off row (optional) */
.ai-page .ai-flow__step.is-drop .ai-flow__bar::after {
    background: #e2494a;
}
.ai-page .ai-flow__step.is-drop .ai-flow__pct {
    color: #e2494a;
}
@media (max-width: 900px) {
    .ai-page .ai-split--to-graphic {
        grid-template-columns: 1fr;
        grid-template-areas: 'intro' 'art';
    }
}

/* --graphic-left: mirror of --to-graphic. Art on LEFT (7fr), text on
   RIGHT (5fr). Used for the Search & Visibility section. */
.ai-page .ai-split--graphic-left {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'art intro';
    align-items: center;
}
.ai-page .ai-split--graphic-left .ai-split__intro { grid-area: intro; }
.ai-page .ai-split--graphic-left .ai-split__art   { grid-area: art; }
@media (max-width: 900px) {
    .ai-page .ai-split--graphic-left {
        grid-template-columns: 1fr;
        grid-template-areas: 'intro' 'art';
    }
}

/* =====================================================================
   DARK SECTION VARIANT — used by Search & Visibility and Real-world
   examples. Includes a subtle, repeating Colour-logo pattern in a
   two-shades-lighter tone for added depth.
   ===================================================================== */
.ai-page .ai-section--dark {
    position: relative;
    background: var(--color-dark);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.ai-page .ai-section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Small pattern at its full strength: 60% alpha so edge columns
       read strongly. Middle columns get faded out by ::after below
       to build the column-by-column depth gradient. */
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-mask-image: url('/static/images/logo-mark.svg');
    mask-image: url('/static/images/logo-mark.svg');
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 30px auto;
    mask-size: 30px auto;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    pointer-events: none;
    z-index: 0;
}
/* Depth gradient — the section's own background colour painted over
   the logo pattern, opaque in the middle columns and transparent at
   the outer columns. Simulates a column-by-column opacity step-down
   (edges ~60% visible → centre ~0%) using a single smooth gradient. */
.ai-page .ai-section--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        transparent 10%,
        var(--color-dark) 50%,
        transparent 90%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}
.ai-page .ai-section--dark > * {
    position: relative;
    z-index: 1;
}
.ai-page .ai-section--dark h2,
.ai-page .ai-section--dark h3 {
    color: #fff;
}
.ai-page .ai-section--dark p,
.ai-page .ai-section--dark .ai-lede {
    color: rgba(255, 255, 255, 0.78);
}
.ai-page .ai-section--dark strong {
    color: #fff;
}
.ai-page .ai-section--dark .ai-badge {
    background: rgba(var(--color-accent-rgb), 0.16);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    color: var(--color-accent);
}

/* ---- Dark-glass .ai-card treatment (used in Real-world examples).
   Each large card gets a real backdrop-filter so it reads as a glass
   panel floating over the section's logo-pattern backdrop. ---- */
.ai-page .ai-section--dark .ai-card {
    /* Slightly more translucent so the blurred backdrop is visible
       through the card rather than hidden by an opaque fill. */
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow:
        0 22px 44px -14px rgba(0, 0, 0, 0.55),
        0 6px 14px -6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* Equal heights — the auto-fit grid already aligns rows but this
       ensures the card fills the cell if content height varies. */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Own stacking context so backdrop-filter composites cleanly */
    position: relative;
    isolation: isolate;
}
.ai-page .ai-section--dark .ai-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
        0 28px 54px -14px rgba(0, 0, 0, 0.65),
        0 10px 22px -8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.25);
}
.ai-page .ai-section--dark .ai-card h3 {
    color: #fff;
    margin-bottom: 0.6rem;
}
.ai-page .ai-section--dark .ai-card p {
    color: rgba(255, 255, 255, 0.75);
}
.ai-page .ai-section--dark .ai-card p:not(:last-child) {
    margin-bottom: 0.65rem;
}
.ai-page .ai-section--dark .ai-card em {
    color: var(--color-accent);
    font-style: normal;
    font-weight: 500;
}
/* Reserve a flexible gap between the graphic and the description so
   short-content cards still fill to the same height as the tallest. */
.ai-page .ai-section--dark .ai-card > p:last-child {
    margin-top: auto;
    padding-top: 0.85rem;
}

/* ---- Top row: icon + status pill side-by-side ---- */
.ai-page .ai-section--dark .ai-card__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.ai-page .ai-section--dark .ai-card__top .ai-card__icon {
    margin-bottom: 0;
    flex-shrink: 0;
}
.ai-page .ai-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.7rem 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
}
.ai-page .ai-card__status-text {
    display: inline-block;
    min-height: 1em;
}
/* Caret while typing the status label */
.ai-page .ai-card__status-text.is-typing::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.85em;
    background: currentColor;
    vertical-align: -0.1em;
    margin-left: 2px;
    animation: rwCaret 0.8s steps(2) infinite;
}

/* ---- Pulsing circle (live indicator) ---- */
.ai-page .ai-card__pulse {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}
.ai-page .ai-card__pulse::before,
.ai-page .ai-card__pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0.6;
    animation: rwCardPulse 1.9s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.ai-page .ai-card__pulse::after {
    animation-delay: 0.95s;
}
@keyframes rwCardPulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    80%  { transform: scale(2.6); opacity: 0;    }
    100% { transform: scale(2.6); opacity: 0;    }
}
/* Colour variants — each card's meaning */
.ai-page .ai-card__pulse--amber { background: #FDC533; }
.ai-page .ai-card__pulse--green { background: #41E65B; }
.ai-page .ai-card__pulse--red   { background: #e2494a; }
/* Also tint the pill border/bg slightly for each variant */
.ai-page .ai-card__status:has(.ai-card__pulse--amber) {
    background: rgba(253, 197, 51, 0.1);
    border-color: rgba(253, 197, 51, 0.3);
    color: #f5d87c;
}
.ai-page .ai-card__status:has(.ai-card__pulse--green) {
    background: rgba(65, 230, 91, 0.1);
    border-color: rgba(65, 230, 91, 0.3);
    color: #9cec9c;
}
.ai-page .ai-card__status:has(.ai-card__pulse--red) {
    background: rgba(226, 73, 74, 0.1);
    border-color: rgba(226, 73, 74, 0.3);
    color: #f19595;
}

/* =====================================================================
   REAL-WORLD EXAMPLES — card-level graphics
   .rw-email: mini email compose window with typing animation
   .rw-meta:  monospace meta-tag block with typed content attribute
   .rw-chart: 4-step SVG line chart that dips then skyrockets
   ===================================================================== */

/* Shared height for the three card graphics so the cards read as a
   set, regardless of how much content each one holds internally. */
.ai-page .rw-email,
.ai-page .rw-meta,
.ai-page .rw-chart-wrap {
    height: 230px;
    box-sizing: border-box;
}

/* ---- Email mockup ---- */
.ai-page .rw-email {
    margin: 0.3rem 0 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
    box-shadow:
        0 14px 28px -12px rgba(0, 0, 0, 0.5),
        0 4px 10px -4px rgba(0, 0, 0, 0.3);
    font-family: var(--font-body);
    color: #1D1D20;
    display: flex;
    flex-direction: column;
}
.ai-page .rw-email__chrome {
    background: #e9eaed;
    padding: 0.45rem 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.32rem;
}
.ai-page .rw-email__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c0c0c4;
}
.ai-page .rw-email__dot--red    { background: #ff5f57; }
.ai-page .rw-email__dot--yellow { background: #febb2e; }
.ai-page .rw-email__dot--green  { background: #28c941; }
.ai-page .rw-email__title {
    font-size: 0.62rem;
    color: #7d7d82;
    margin-left: auto;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ai-page .rw-email__body {
    background: #fff;
    padding: 0.7rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Grow to fill the fixed-height email mock so the white panel
       reaches the bottom of the card (no dead space below the body) */
    flex: 1;
    min-height: 0;
}
.ai-page .rw-email__row {
    display: flex;
    gap: 0.45rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eceef0;
    font-size: 0.68rem;
    line-height: 1.3;
}
.ai-page .rw-email__label {
    color: #8a8d94;
    min-width: 3.2rem;
    flex-shrink: 0;
}
.ai-page .rw-email__val {
    color: #1f2024;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Extra-specific selector (.ai-section--dark .ai-card …) so the
   dark-section paragraph colour doesn't override us to white. */
.ai-page .ai-section--dark .ai-card .rw-email__content,
.ai-page .rw-email__content {
    padding-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.45;
    min-height: 2.8rem;
    margin: 0;
    color: #1f2024;
    /* Fill the remaining space inside the email body so the content
       area runs to the bottom of the white panel */
    flex: 1;
}
.ai-page .rw-email__content::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background: currentColor;
    vertical-align: -0.1em;
    margin-left: 2px;
    opacity: 0;
}
.ai-page .rw-email__content.is-typing::after {
    opacity: 1;
    animation: rwCaret 0.8s steps(2) infinite;
}
@keyframes rwCaret { 50% { opacity: 0; } }

/* ---- Meta tag mockup ---- */
.ai-page .rw-meta {
    margin: 0.3rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    /* Equal-height sibling — let lines flow from the top */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.ai-page .rw-meta__punc { color: rgba(255, 255, 255, 0.4); }
.ai-page .rw-meta__tag  { color: #ff80c7; }
.ai-page .rw-meta__attr { color: #9cdcff; }
.ai-page .rw-meta__str  { color: #9ee69e; }
.ai-page [data-rw-meta-typing] {
    position: relative;
    color: #e9ee8a;
    word-break: break-word;
}
.ai-page [data-rw-meta-typing]::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background: currentColor;
    vertical-align: -0.1em;
    margin-left: 1px;
    opacity: 0;
}
.ai-page [data-rw-meta-typing].is-typing::after {
    opacity: 1;
    animation: rwCaret 0.8s steps(2) infinite;
}

/* ---- Line chart ---- */
.ai-page .rw-chart-wrap {
    margin: 0.3rem 0 1rem;
    padding: 0.9rem 0.9rem 0.7rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    /* Equal-height: chart flexes to fill, legend pinned at bottom */
    display: flex;
    flex-direction: column;
}
.ai-page .rw-chart {
    display: block;
    width: 100%;
    height: auto;
    /* Fill the available height inside the fixed-height wrap. The
       preserveAspectRatio="none" on the <svg> lets it stretch freely. */
    flex: 1;
    min-height: 0;
    overflow: visible;
}
.ai-page .rw-chart__grid line {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
}
.ai-page .rw-chart__line {
    stroke: var(--color-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 8px rgba(var(--color-accent-rgb), 0.55));
    /* Draw-in: path is pre-offset, animation pulls dashoffset to 0 */
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.ai-page .rw-chart.is-revealed .rw-chart__line {
    stroke-dashoffset: 0;
}
.ai-page .rw-chart__dot {
    fill: var(--color-accent);
    opacity: 0;
    transform-origin: center;
    transform: scale(0.5);
    transform-box: fill-box;
    transition:
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.3, 1.5, 0.6, 1);
}
.ai-page .rw-chart.is-revealed .rw-chart__dot {
    opacity: 1;
    transform: scale(1);
}
/* Stagger the dots along the line reveal */
.ai-page .rw-chart.is-revealed .rw-chart__dot:nth-child(1) { transition-delay: 0.25s; }
.ai-page .rw-chart.is-revealed .rw-chart__dot:nth-child(2) { transition-delay: 0.8s;  }
.ai-page .rw-chart.is-revealed .rw-chart__dot:nth-child(3) { transition-delay: 1.2s;  }
.ai-page .rw-chart.is-revealed .rw-chart__dot:nth-child(4) { transition-delay: 1.65s; }
.ai-page .rw-chart__dot--drop { fill: #e2494a; }
.ai-page .rw-chart__dot--peak {
    fill: #41E65B;
    filter: drop-shadow(0 0 10px rgba(65, 230, 91, 0.7));
}
.ai-page .rw-chart.is-revealed .rw-chart__dot--peak {
    animation: rwPeakPulse 1.5s ease-out 1.8s;
}
@keyframes rwPeakPulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.ai-page .rw-chart__legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.2rem;
    margin-top: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.ai-page .rw-chart__step {
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}
.ai-page .rw-chart__step--drop { color: #e2494a; }
.ai-page .rw-chart__step--peak { color: #74eb8a; }

/* =====================================================================
   WHAT-YOU-GET SECTION — scale typography down ~30%.
   Scoped via #what-you-get so it doesn't leak to other ping-pong sections.
   ===================================================================== */
#what-you-get.ai-page .ai-badge,
.ai-page #what-you-get .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #what-you-get h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #what-you-get .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}
.ai-page #what-you-get .ai-list {
    gap: 0.95rem;
    margin-top: 1.25rem;
}
.ai-page #what-you-get .ai-list__item {
    grid-template-columns: 14px 1fr;
    gap: 0.75rem;
}
.ai-page #what-you-get .ai-list__icon {
    width: 14px;
    height: 17px;
    margin-top: 0.15em;
}
.ai-page #what-you-get .ai-list__body h3 {
    font-size: clamp(0.78rem, 0.82vw, 0.82rem);
    margin: 0 0 0.25rem;
}
.ai-page #what-you-get .ai-list__body p {
    font-size: 0.7rem;
    line-height: 1.5;
}

/* =====================================================================
   SOCIAL & PROMOTIONS SECTION — same 30% type-scale as WYG/BTG/CG
   ===================================================================== */
.ai-page #social-promotions .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
}
.ai-page #social-promotions h2 {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    margin-bottom: 0.7rem;
}
.ai-page #social-promotions .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}
.ai-page #social-promotions .ai-list {
    gap: 0.95rem;
    margin-top: 1.25rem;
}
.ai-page #social-promotions .ai-list__item {
    grid-template-columns: 14px 1fr;
    gap: 0.75rem;
}
.ai-page #social-promotions .ai-list__icon {
    width: 14px;
    height: 17px;
    margin-top: 0.15em;
}
.ai-page #social-promotions .ai-list__body h3 {
    font-size: clamp(0.78rem, 0.82vw, 0.82rem);
    margin: 0 0 0.25rem;
}
.ai-page #social-promotions .ai-list__body p {
    font-size: 0.7rem;
    line-height: 1.5;
}

/* ---- Mini social-post preview (Mariposa card 1) ---- */
.ai-page .ai-post-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ai-page .ai-post-preview__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ai-page .ai-post-preview__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg, #777);
    color: #1D1D20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
}
.ai-page .ai-post-preview__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.ai-page .ai-post-preview__name {
    font-weight: 600;
    font-size: 0.74rem;
    color: #1D1D20;
}
.ai-page .ai-post-preview__time {
    font-size: 0.6rem;
    color: rgba(29, 29, 32, 0.55);
    margin-top: 2px;
}
.ai-page .ai-post-preview__text {
    font-size: 0.76rem;
    color: #1D1D20;
    margin: 0;
    line-height: 1.4;
}
.ai-page .ai-post-preview__text strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* ---- Facebook post mockup (Mariposa primary centrepiece) ---- */
/* Base wrapper override: let the FB card size to its content and
   vertically centre it. No fixed 2:1 aspect and no screenshot. */
.ai-page #social-promotions .ai-wyg__base--fb {
    aspect-ratio: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    top: 50%;
    transform: translateY(-50%);
}

/* Peripheral card position tweaks for this section only */
.ai-page #social-promotions .ai-wyg__card--email {
    /* Post drafted — moved to the bottom-left, overlapping the bottom
       edge of the centrepiece rather than sitting near the top. */
    top: auto;
    bottom: 4%;
}
.ai-page #social-promotions .ai-wyg__card--ai {
    /* Reminder queued — push further off the right edge so it doesn't
       sit over the FB post's content. */
    right: -14%;
}
.ai-page .ai-fb {
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 22px 44px -14px rgba(29, 29, 32, 0.2),
        0 6px 14px -6px rgba(29, 29, 32, 0.08);
    color: #050505;
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header row */
.ai-page .ai-fb__header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem 0.55rem;
}
.ai-page .ai-fb__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg, #1D1D20);
    color: #1D1D20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}
.ai-page .ai-fb__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.ai-page .ai-fb__name-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.ai-page .ai-fb__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #050505;
}
.ai-page .ai-fb__verified {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.ai-page .ai-fb__sub {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.66rem;
    color: #65676b;
    margin-top: 2px;
}
.ai-page .ai-fb__sub svg {
    width: 11px;
    height: 11px;
    color: #65676b;
}
.ai-page .ai-fb__dot {
    color: #65676b;
    font-weight: 700;
}
.ai-page .ai-fb__more {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #65676b;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    flex-shrink: 0;
}
.ai-page .ai-fb__more svg { width: 16px; height: 16px; }

/* Post text */
.ai-page .ai-fb__text {
    margin: 0;
    padding: 0 0.85rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #050505;
}
.ai-page .ai-fb__text strong {
    font-weight: 700;
    color: #050505;
}

/* Image banner — promotional graphic instead of a photo */
.ai-page .ai-fb__image {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(ellipse at 70% 80%, rgba(253, 197, 51, 0.25), transparent 55%),
        linear-gradient(135deg, #1a2540 0%, #0d1729 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ai-page .ai-fb__image-kicker {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FDC533;
    position: relative;
    z-index: 1;
}
.ai-page .ai-fb__image-big {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #ffffff;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.ai-page .ai-fb__image-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}
.ai-page .ai-fb__image-bolt {
    position: absolute;
    right: -4%;
    bottom: -18%;
    font-size: 14rem;
    color: rgba(253, 197, 51, 0.15);
    line-height: 1;
    font-weight: 700;
    transform: rotate(-12deg);
    z-index: 0;
    pointer-events: none;
}

/* CTA strip below image (sponsored-post style) */
.ai-page .ai-fb__cta-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: #f0f2f5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ai-page .ai-fb__cta-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ai-page .ai-fb__cta-url {
    font-size: 0.6rem;
    color: #65676b;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ai-page .ai-fb__cta-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #050505;
    line-height: 1.15;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page .ai-fb__cta-btn {
    padding: 0.4rem 0.9rem;
    background: #e4e6eb;
    color: #050505;
    border: none;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    cursor: default;
    flex-shrink: 0;
}

/* Stats row (reactions + counts) */
.ai-page .ai-fb__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem 0.5rem;
    font-size: 0.7rem;
    color: #65676b;
    border-bottom: 1px solid #e4e6eb;
}
.ai-page .ai-fb__reactions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.ai-page .ai-fb__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    font-size: 0.62rem;
    margin-left: -6px;
    flex-shrink: 0;
}
.ai-page .ai-fb__emoji:first-child { margin-left: 0; }
.ai-page .ai-fb__emoji--like  { background: #1877f2; color: #fff; }
.ai-page .ai-fb__emoji--love  { background: #f33e58; color: #fff; }
.ai-page .ai-fb__react-count {
    margin-left: 0.2rem;
    font-weight: 500;
}
.ai-page .ai-fb__counts {
    font-size: 0.7rem;
    color: #65676b;
}

/* Action buttons row */
.ai-page .ai-fb__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.2rem 0.3rem;
}
.ai-page .ai-fb__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.5rem;
    border: none;
    background: transparent;
    color: #65676b;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: default;
}
.ai-page .ai-fb__action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Content lifecycle list (Mariposa card 4) ---- */
.ai-page .ai-lifecycle {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.3rem;
}
.ai-page .ai-lifecycle__step {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.38rem 0.5rem;
    background: rgba(29, 29, 32, 0.04);
    border-left: 2px solid var(--color-accent);
    border-radius: 5px;
    font-size: 0.66rem;
}
.ai-page .ai-lifecycle__tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.ai-page .ai-lifecycle__text {
    color: rgba(29, 29, 32, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-page .ai-split__intro h2 {
    margin-bottom: 1rem;
}
.ai-page .ai-split__graphic {
    /* Placeholder slot for a future widget graphic */
    aspect-ratio: 5 / 4;
    border-radius: 20px;
    background: #fafafa;
    border: 1px dashed rgba(29, 29, 32, 0.14);
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(29, 29, 32, 0.3);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---- Items list with Colour logo mark as the bullet --------- */
.ai-page .ai-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.35rem;
}
.ai-page .ai-list__item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 1rem;
    align-items: start;
}
/* Icon slot becomes the logo mark (the inline svg previously here is hidden) */
.ai-page .ai-list__icon {
    width: 20px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0.2em;
    background-color: var(--color-accent);
    border: none;
    border-radius: 0;
    mask: url('/static/images/logo-mark.svg') no-repeat center / contain;
    -webkit-mask: url('/static/images/logo-mark.svg') no-repeat center / contain;
}
.ai-page .ai-list__icon svg { display: none; }
.ai-page .ai-list__body h3 {
    margin: 0 0 0.35rem;
}
.ai-page .ai-list__body p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
}

/* ---- Centered-intro grid (for "Real world examples" & "Marketing") ---- */
.ai-page .ai-centered-intro {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 3.5rem;
}
.ai-page .ai-centered-intro h2 {
    margin-bottom: 1rem;
}
.ai-page .ai-centered-intro p {
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    color: rgba(29, 29, 32, 0.7);
}
.ai-page .ai-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.ai-page .ai-card {
    background: #ffffff;
    border: 1px solid rgba(29, 29, 32, 0.06);
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.6rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ai-page .ai-section--alt .ai-card {
    background: #F3F0EF;
    border-color: rgba(29, 29, 32, 0.08);
}
.ai-page .ai-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -20px rgba(29, 29, 32, 0.15);
}
.ai-page .ai-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--color-accent-rgb), 0.1);
    border: 1px solid rgba(var(--color-accent-rgb), 0.2);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.ai-page .ai-card__icon svg { width: 22px; height: 22px; }
.ai-page .ai-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}
.ai-page .ai-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}
.ai-page .ai-card em {
    color: var(--color-accent);
    font-style: normal;
    font-weight: 500;
}

/* ---- FAQ ---------------------------------------------------- */
.ai-page .ai-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
@media (max-width: 900px) {
    .ai-page .ai-faq__grid { grid-template-columns: 1fr; }
}
.ai-page .ai-faq__list {
    display: grid;
    gap: 0.65rem;
}
.ai-page .ai-faq__item {
    background: #ffffff;
    border: 1px solid rgba(29, 29, 32, 0.07);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.ai-page .ai-section--alt .ai-faq__item { background: #F3F0EF; }
.ai-page .ai-faq__item[open] {
    border-color: rgba(var(--color-accent-rgb), 0.35);
    background: #ffffff;
}
.ai-page .ai-faq__q {
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #1D1D20;
    line-height: 1.35;
}
.ai-page .ai-faq__q::-webkit-details-marker { display: none; }
.ai-page .ai-faq__q::after {
    content: '';
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.ai-page .ai-faq__item[open] .ai-faq__q::after {
    transform: rotate(180deg);
}
.ai-page .ai-faq__a {
    margin-top: 0.65rem;
    color: rgba(29, 29, 32, 0.72);
}

/* ---- CTA section -------------------------------------------- */
.ai-page .ai-cta {
    text-align: center;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: #ffffff;
}
.ai-page .ai-cta__inner {
    max-width: 50rem;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.ai-page .ai-cta h2 {
    margin-bottom: 1rem;
}
.ai-page .ai-cta p {
    margin-bottom: 2rem;
    font-size: clamp(1.05rem, 1.15vw, 1.2rem);
}
.ai-page .ai-cta__actions {
    display: inline-flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Utilities ---------------------------------------------- */
.ai-page em {
    color: var(--color-accent);
    font-style: italic;
    font-weight: 500;
}


/* =====================================================================
   AI HERO — Terminator-vision side streams
   Two columns of scrolling monospace "machine activity" lines on the
   left and right edges of the hero, with typing + scroll-up animation.
   ===================================================================== */
.ai-page .ai-hero__stream {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(200px, 20vw, 300px);
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    font-family: 'SF Mono', Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    /* Soft vertical fade at top and bottom so new/old lines ghost in/out */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}
.ai-page .ai-hero__stream--left {
    left: 0;
    padding: 1.5rem 0 1.5rem 1.5rem;
    text-align: left;
}
.ai-page .ai-hero__stream--right {
    right: 0;
    padding: 1.5rem 1.5rem 1.5rem 0;
    text-align: right;
}

.ai-page .ai-hero__stream-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: absolute;
    bottom: 1.5rem;
    width: 100%;
    left: 0;
    padding: inherit;
}
.ai-page .ai-hero__stream--right .ai-hero__stream-list {
    left: auto;
    right: 0;
}

/* Each line starts invisible; JS flips a class when it becomes visible */
.ai-page .ai-hero__stream-line {
    color: rgba(255, 255, 255, 0.28);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    font-variant-numeric: tabular-nums;
}
.ai-page .ai-hero__stream-line.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Fresh line (still typing) brightens slightly */
.ai-page .ai-hero__stream-line.is-typing {
    color: rgba(255, 255, 255, 0.55);
}
/* Typing caret at end of currently-typing line */
.ai-page .ai-hero__stream-line.is-typing::after {
    content: '▊';
    color: rgba(255, 255, 255, 0.55);
    margin-left: 2px;
    animation: aiCaret 0.8s steps(2) infinite;
}
@keyframes aiCaret {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}
/* Accent highlight for "positive event" lines (green) */
.ai-page .ai-hero__stream-line--accent {
    color: rgba(65, 230, 91, 0.5);
}
.ai-page .ai-hero__stream-line--accent.is-typing {
    color: rgba(65, 230, 91, 0.8);
}

/* Hide the streams on small screens — they'd crowd the hero */
@media (max-width: 900px) {
    .ai-page .ai-hero__stream { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-page .ai-hero__stream-line.is-typing::after { animation: none; }
}


/* =====================================================================
   AI HERO — "AI HOSTING" mega watermark
   SVG text stretched edge-to-edge via textLength + lengthAdjust, sits
   behind everything in the hero.
   ===================================================================== */
.ai-page .ai-hero__megatext {
    position: absolute;
    top: clamp(3rem, 6vw, 5rem);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    display: block;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.ai-page .ai-hero__megatext text {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    /* Explicit font-size in viewBox user units so the glyphs render at
       natural proportions. Without this SVG text defaults to 16 and the
       textLength stretch squished the letters into thin verticals. */
    font-size: 200px;
    /* Barely-there watermark — just a hint of structure behind the hero */
    fill: rgba(255, 255, 255, 0.018);
    letter-spacing: -0.04em;
}


/* =====================================================================
   AI HERO — button hover direction overrides
   By default .btn-hero expands its width rightward (width grows from
   left edge, margin-right goes negative so next sibling holds its
   place). In the AI hero we have two buttons side by side, so we want
   the LEFT button to expand leftward (so they never overlap).

   Fix: on hover, reverse the flow — negative margin-left keeps next
   sibling stationary, and explicit translateX pulls the button left
   by the same amount the width expands (7.5rem). The visual right
   edge stays put; the left edge moves out into empty space.
   ===================================================================== */
.ai-page .ai-hero .btn-hero--expand-left:hover {
    margin-right: 0;
    margin-left: -7.5rem;
}
/* The right-side button has a longer label ("See what's included")
   so it needs a wider expanded state. Margin + label cap scale with
   the extra width so the text never clips. */
.ai-page .ai-hero .btn-hero--expand-right:hover {
    width: 14.5rem;
    margin-right: -11rem;
    margin-left: 0;
}
.ai-page .ai-hero .btn-hero--expand-right:hover .btn-hero__label {
    max-width: 13rem;
}


/* =====================================================================
   AI OVERVIEW — 3-box summary that overlaps the hero
   Box 1 contains the animated email → homepage → social → report sequence.
   ===================================================================== */
.ai-page .ai-overview {
    background: #ffffff;
    position: relative;
    z-index: 3;
    /* No top padding — the grid pulls up with a negative margin so the
       boxes overlap the hero. Bottom + horizontal padding gives the white
       swath breathing room. */
    padding: 0 clamp(1rem, 2.5vw, 2rem) clamp(3rem, 6vw, 5rem);
}
.ai-page .ai-overview__inner {
    /* Wider than before — three boxes side-by-side with breathing room */
    max-width: 96rem;
    margin: 0 auto;
}
.ai-page .ai-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.75rem);
    /* Pull the whole grid up so the boxes overlap the hero by 20px.
       Using transform (not margin) so vertical-margin collapse with the
       parent can't silently cancel the offset. */
    transform: translateY(-20px);
}
@media (max-width: 960px) {
    .ai-page .ai-overview__grid {
        grid-template-columns: 1fr;
    }
}

/* Each column is its own dark rounded container with shadow */
.ai-page .ai-overview__box {
    background: var(--color-dark);
    color: #fff;
    border-radius: 22px;
    padding: clamp(1.5rem, 2.2vw, 2.25rem);
    box-shadow:
        0 30px 60px -18px rgba(0, 0, 0, 0.55),
        0 10px 30px -12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    /* Keep overflow visible so the box's own purple glow isn't clipped */
    overflow: visible;
    position: relative;
    min-height: 480px;
    /* Smooth glow fade when .is-animating is toggled */
    transition: box-shadow 0.5s ease;
}
/* Purple aura while this box houses the active animation.
   Elevated z-index so the glow paints on top of neighbouring boxes. */
.ai-page .ai-overview__box.is-animating {
    z-index: 2;
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
        0 0 40px rgba(var(--color-accent-rgb), 0.4),
        0 30px 70px -10px rgba(var(--color-accent-rgb), 0.38),
        0 30px 60px -18px rgba(0, 0, 0, 0.55),
        0 10px 30px -12px rgba(0, 0, 0, 0.3);
}
/* Breathing room between the card deck and the description + CTA is
   handled by margin-top: auto on .ai-overview__desc, which pushes the
   desc (and CTA) to the bottom of the flex container. */
/* Placeholder boxes (02, 03) — dimmed until built */
.ai-page .ai-overview__box--placeholder {
    opacity: 0.55;
}
.ai-page .ai-overview__box--placeholder::after {
    content: 'Coming next';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

/* ---- Header: number + title, stacked at top ---- */
.ai-page .ai-overview__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ai-page .ai-overview__num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}
.ai-page .ai-overview__title {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 1.8vw, 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin: 0;
}

/* ---- Description + CTA pinned to the bottom of the box so they
   align horizontally across Box 1, Box 2 (and Box 3 when built) ---- */
.ai-page .ai-overview__desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    margin-top: auto;  /* push this + everything below to the bottom */
}
.ai-page .ai-overview__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    color: var(--color-accent);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, gap 0.25s ease;
}
.ai-page .ai-overview__cta:hover {
    border-bottom-color: var(--color-accent);
    gap: 0.75rem;
}
.ai-page .ai-overview__cta-arrow {
    transition: transform 0.25s ease;
    display: inline-block;
}
.ai-page .ai-overview__cta:hover .ai-overview__cta-arrow {
    transform: translateX(3px);
}

/* =====================================================================
   ANIMATION STAGE — card stack area inside Box 1
   ===================================================================== */
.ai-page .ai-overview__anim {
    position: relative;
    width: 100%;
    /* Fixed height so replay button, desc, and CTA land at identical
       Y positions across boxes */
    height: 320px;
    flex: none;
    /* Slight internal padding so cards don't touch the box edges */
    padding: 0.75rem 0 1rem;
}

/* =====================================================================
   DARK-GLASS CARD (matches campaign-page .cmp-card vibe)
   Translucent panel, faint white border, layered shadow, backdrop blur.
   ===================================================================== */
.ai-page .ai-stack-card {
    position: absolute;
    top: 0;
    /* Horizontal position is driven entirely by `left` on the state
       classes so positions are relative to the parent anim stage's
       actual width (not the card's own size). */
    left: 0;
    width: 230px;
    max-width: 230px;
    height: 280px;
    padding: 1rem 1.1rem 0.9rem;
    border-radius: 16px;
    /* Lifted dark-grey since we no longer have backdrop-filter to give
       the cards a separate luminosity from the black box. */
    background: #36363d;
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #fff;
    box-shadow:
        0 20px 40px -14px rgba(0, 0, 0, 0.6),
        0 8px 18px -8px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-family: var(--font-body);
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transition: left 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

/* Top-bar row: icon on the left, countdown badge on the right */
.ai-page .ai-stack-card__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Accent icon pill — same pattern as .cmp-card__icon */
.ai-page .ai-stack-card__icon {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.12);
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    border-radius: 10px;
    flex-shrink: 0;
}
.ai-page .ai-stack-card__icon svg { width: 1rem; height: 1rem; }

.ai-page .ai-stack-card__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

/* ---- Box-level timer: simple purple letters in the top-right of the
   active box. Updated by JS to show the countdown for the current
   animated card. ---- */
.ai-page .ai-overview__timer {
    position: absolute;
    top: clamp(1.5rem, 2.2vw, 2.25rem);
    right: clamp(1.5rem, 2.2vw, 2.25rem);
    color: var(--color-accent);
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ai-page .ai-overview__timer::after {
    content: 's';
    font-size: 0.72em;
    margin-left: 1px;
    opacity: 0.75;
}
.ai-page .ai-overview__timer:not(:empty) {
    opacity: 1;
}

.ai-page .ai-stack-card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.55);
    min-width: 0;
}
.ai-page .ai-stack-card__chip {
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    letter-spacing: 0.1em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    flex-shrink: 0;
}
.ai-page .ai-stack-card__chip-val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page .ai-stack-card__subtle {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ai-page .ai-stack-card__typed {
    min-height: 2.6rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #fff;
    margin: 0;
}
.ai-page .ai-stack-card__typed::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    background: currentColor;
    vertical-align: -0.12em;
    margin-left: 2px;
    opacity: 0;
}
.ai-page .ai-stack-card.is-active .ai-stack-card__typed::after {
    opacity: 0.85;
    animation: aiCaret 0.8s steps(2) infinite;
}
@keyframes aiCaret { 50% { opacity: 0; } }

.ai-page .ai-stack-card__footer {
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ai-page .ai-stack-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.35s ease, color 0.35s ease;
}
.ai-page .ai-stack-card__status--done,
.ai-page .ai-stack-card__status.is-sent {
    background: rgba(65, 230, 91, 0.15);
    color: #74eb8a;
}

/* ---- Card 2: mini team avatar row ---- */
.ai-page .ai-team {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    /* Avatars overlap using negative margin-left (gap can't go negative) */
}
.ai-page .ai-team__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg, #555);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    font-family: 'Outfit', sans-serif;
    border: 2px solid var(--color-dark);
    margin-left: -6px;
    flex-shrink: 0;
}
.ai-page .ai-team__dot:first-child { margin-left: 0; }
.ai-page .ai-team__dot--new {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
    transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.8s ease;
}
.ai-page .ai-stack-card.is-active .ai-team__dot--new.is-added {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.3s;
    animation: aiTeamPulse 1.1s ease 0.7s;
}
@keyframes aiTeamPulse {
    0%   { box-shadow: 0 0 0 0 rgba(65, 230, 91, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(65, 230, 91, 0); }
    100% { box-shadow: 0 0 0 0 rgba(65, 230, 91, 0); }
}

/* ---- Card 3: mini social post ---- */
.ai-page .ai-post {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.ai-page .ai-post__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ai-page .ai-post__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg, #555);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
}
.ai-page .ai-post__page {
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
}
.ai-page .ai-post__time {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}
.ai-page .ai-post__text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.4;
}
.ai-page .ai-post__likes {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
}
.ai-page .ai-post__like-emoji { font-size: 0.85rem; }

/* ---- Card 4: mini recap list ---- */
.ai-page .ai-recap {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}
.ai-page .ai-recap__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ai-page .ai-recap__item.is-checked {
    opacity: 1;
    transform: translateX(0);
}
.ai-page .ai-recap__check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(65, 230, 91, 0.18);
    color: #74eb8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    transform: scale(0.5);
    transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.6, 1);
}
.ai-page .ai-recap__item.is-checked .ai-recap__check {
    transform: scale(1);
}

/* =====================================================================
   STACK POSITIONAL STATES
   Active card sits centred; stacked cards peek down behind it like a
   small deck of playing cards. Subtle X offset adds depth.
   ===================================================================== */
/* Horizontal fan: cards slide in from the right, become active at the
   rightmost position (right edge flush with box content-right), then
   glide leftward one step at a time as new cards take over.
   Final stacked state:
     is-stack-1 (first done)  → flush left (matches title/desc X)
     is-stack-2               → 1/3 across
     is-stack-3               → 2/3 across
     is-active    (last one)  → flush right (symmetric to title edge)
   Positions use `left: calc(100% - 230px)` so they scale with the
   anim stage's actual width (card width is 230px, see base rule). */
.ai-page .ai-stack-card.is-hidden-right {
    left: 100%;
    opacity: 0;
    z-index: 12;
}
.ai-page .ai-stack-card.is-stack-1 {
    left: 0;
    opacity: 0.55;
    z-index: 6;
}
.ai-page .ai-stack-card.is-stack-2 {
    left: calc((100% - 230px) * 1 / 3);
    opacity: 0.75;
    z-index: 7;
}
.ai-page .ai-stack-card.is-stack-3 {
    left: calc((100% - 230px) * 2 / 3);
    opacity: 0.9;
    z-index: 8;
}
.ai-page .ai-stack-card.is-active {
    left: calc(100% - 230px);
    opacity: 1;
    z-index: 11;
    /* Subtle ring only — the purple aura lives on the parent box now */
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.3),
        0 18px 34px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* (Earlier pseudo-element glow removed — box-shadow on .is-active
   now provides the full purple aura. Shadows are painted in ink
   overflow and aren't clipped by the card's backdrop-filter. */

/* =====================================================================
   RESTART BUTTON — shown when sequence has finished playing
   ===================================================================== */
.ai-page .ai-overview__restart {
    position: absolute;
    /* Nudged below the anim's padding so the pill reads as attached to
       the bottom of the deck rather than hovering over the last card. */
    bottom: -0.5rem;
    right: 0.75rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}
.ai-page .ai-overview__restart svg {
    width: 14px;
    height: 14px;
    transition: transform 0.45s ease;
}
.ai-page .ai-overview__restart:hover {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: rgba(var(--color-accent-rgb), 0.45);
    color: var(--color-accent);
}
.ai-page .ai-overview__restart:hover svg {
    transform: rotate(-180deg);
}
.ai-page .ai-overview__anim.is-finished .ai-overview__restart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: restartPulse 2.5s ease-in-out 0.6s infinite;
}
@keyframes restartPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.15); }
}


/* =====================================================================
   BOX 2 — CARD INTERNALS
   Four cards, consistent with Box 1 dark-glass shell but each with its
   own animated proof. Narrative thread: "Kawartha weddings" moves
   through rankings → conversion lift → quarterly plan → best-fit persona.
   ===================================================================== */

/* ---- Card 1: SERP rank-climb ---- */
.ai-page .ai-serp {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}
.ai-page .ai-serp__item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.35s ease, border-color 0.35s ease;
}
.ai-page .ai-serp__query {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.82);
}
.ai-page .ai-serp__rank {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s ease;
    min-width: 2rem;
    text-align: right;
}
.ai-page .ai-serp__arrow {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #74eb8a;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ai-page .ai-serp__item.is-improving {
    background: rgba(65, 230, 91, 0.08);
    border-color: rgba(65, 230, 91, 0.22);
}
.ai-page .ai-serp__item.is-improving .ai-serp__rank {
    color: #74eb8a;
}
.ai-page .ai-serp__item.is-improving .ai-serp__arrow {
    opacity: 1;
    transform: translateY(0);
    animation: serpArrowPulse 1.1s ease-out infinite;
}
@keyframes serpArrowPulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
.ai-page .ai-serp__ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(var(--color-accent-rgb), 0.14);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-accent);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.ai-page .ai-serp__ai-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: serpAiDot 1.6s ease-in-out infinite;
}
@keyframes serpAiDot {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.4); }
}
.ai-page .ai-serp__ai-pill.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Card 2: Before / After compare ---- */
.ai-page .ai-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.ai-page .ai-compare__thumb {
    position: relative;
    padding: 0.9rem 0.55rem 0.65rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
    min-height: 92px;
}
.ai-page .ai-compare__tag {
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    background: var(--color-dark);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.ai-page .ai-compare__hed {
    display: block;
    width: 80%;
    height: 5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
}
.ai-page .ai-compare__hed--short {
    width: 55%;
    margin-bottom: 0.15rem;
}
.ai-page .ai-compare__btn {
    margin-top: auto;
    padding: 0.22rem 0.5rem;
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}
.ai-page .ai-compare__btn--before {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-page .ai-compare__btn--after {
    background: var(--color-accent);
    color: #fff;
    border: 1px solid var(--color-accent);
}
.ai-page .ai-compare__thumb--after {
    opacity: 0.35;
    transform: scale(0.97);
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
}
.ai-page .ai-stack-card.is-active .ai-compare__thumb--after.is-revealed {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(var(--color-accent-rgb), 0.35);
}
.ai-page .ai-compare__footer {
    justify-content: space-between;
}
.ai-page .ai-compare__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ai-page .ai-compare__stat strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
}
.ai-page .ai-compare__badge {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(65, 230, 91, 0.18);
    color: #74eb8a;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.3, 1.5, 0.6, 1);
}
.ai-page .ai-compare__badge.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ---- Card 3: Quarterly Gantt plan ---- */
.ai-page .ai-gantt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ai-page .ai-gantt__head {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    font-size: 0.58rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    padding-left: 5.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.ai-page .ai-gantt__head span { text-align: left; }
.ai-page .ai-gantt__rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}
.ai-page .ai-gantt__row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
}
.ai-page .ai-gantt__label {
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.25rem;
}
.ai-page .ai-gantt__track {
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.ai-page .ai-gantt__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--offset, 0);
    width: 0;
    border-radius: 3px;
    transition: width 0.7s cubic-bezier(0.25, 1, 0.35, 1);
}
.ai-page .ai-gantt__bar.is-filled {
    width: var(--width, 40%);
}
.ai-page .ai-gantt__bar--accent { background: var(--color-accent); }
.ai-page .ai-gantt__bar--gold   { background: #FDC533; }
.ai-page .ai-gantt__bar--green  { background: #41E65B; }

/* "On track" badge: start muted, turn green when the sequence finishes */
.ai-page .ai-stack-card--plan [data-gantt-badge] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    transition: background 0.4s ease, color 0.4s ease;
}
.ai-page .ai-stack-card--plan [data-gantt-badge].is-visible {
    background: rgba(65, 230, 91, 0.18);
    color: #74eb8a;
}

/* ---- Card 4: Persona cycle ---- */
.ai-page .ai-personas {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0;
}
.ai-page .ai-personas__dot {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg, #555);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ai-page .ai-personas__dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ai-page .ai-personas__dot.is-focused {
    opacity: 1;
    transform: scale(1.08);
}
.ai-page .ai-personas__dot.is-focused::after {
    opacity: 1;
    transform: scale(1);
}
.ai-page .ai-personas__caption {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    letter-spacing: 0.02em;
}
.ai-page .ai-personas__caption strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
}

/* Persona "best fit" badge — muted until sequence finishes */
.ai-page .ai-stack-card--persona [data-persona-badge] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    transition: background 0.4s ease, color 0.4s ease;
}
.ai-page .ai-stack-card--persona [data-persona-badge].is-visible {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
}


/* =====================================================================
   BOX 3 — CARD INTERNALS (always in control)
   Narrative thread continues: approving the weddings page change →
   seeing it in the changelog → chat reply from Sarah → full ownership.
   ===================================================================== */

/* ---- Card 1: Approval prompt ---- */
.ai-page .ai-approval {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ai-page .ai-approval__summary {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}
.ai-page .ai-approval__target {
    font-size: 0.88rem;
    color: #fff;
    font-weight: 500;
    margin: 0;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.ai-page .ai-approval__actions {
    position: relative;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.ai-page .ai-approval__btn {
    padding: 0.38rem 0.7rem;
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    border: 1px solid transparent;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.ai-page .ai-approval__btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
}
.ai-page .ai-approval__btn--primary {
    background: rgba(var(--color-accent-rgb), 0.2);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    color: var(--color-accent);
}
.ai-page .ai-stack-card.is-active .ai-approval__btn--primary.is-approved {
    background: #41E65B;
    border-color: #41E65B;
    color: #0a3a15;
    transform: scale(1.03);
}
/* Fake cursor: hidden by default, animated across when active */
.ai-page .ai-approval__cursor {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.4);
    transform: translate(0, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.ai-page .ai-stack-card.is-active .ai-approval__cursor.is-moving {
    opacity: 1;
    transform: translate(calc(100% + 3.2rem), -50%) scale(1);
}
.ai-page .ai-stack-card.is-active .ai-approval__cursor.is-clicking {
    transform: translate(calc(100% + 3.2rem), -50%) scale(0.75);
    transition: transform 0.15s ease;
}
.ai-page .ai-stack-card.is-active .ai-approval__cursor.is-done {
    opacity: 0;
    transform: translate(calc(100% + 3.2rem), -50%) scale(0.6);
}

/* ---- Card 2: Change log ---- */
.ai-page .ai-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}
.ai-page .ai-log__item {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(var(--color-accent-rgb), 0.45);
    border-radius: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.82);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ai-page .ai-log__item.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.ai-page .ai-log__time {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
}

/* ---- Card 3: Chat ---- */
.ai-page .ai-chat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ai-page .ai-chat__message {
    display: flex;
    gap: 0.45rem;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ai-page .ai-chat__message.is-visible { opacity: 1; transform: translateY(0); }
.ai-page .ai-chat__message--out {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.ai-page .ai-chat__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg, #555);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.66rem;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
}
.ai-page .ai-chat__bubble {
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px 10px 10px 2px;
    max-width: 85%;
}
.ai-page .ai-chat__message--out .ai-chat__bubble {
    background: rgba(var(--color-accent-rgb), 0.18);
    border-radius: 10px 10px 2px 10px;
}
.ai-page .ai-chat__text {
    font-size: 0.78rem;
    color: #fff;
    margin: 0;
    line-height: 1.35;
}
.ai-page .ai-chat__time {
    display: block;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}
.ai-page .ai-chat__typing {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    padding: 0.15rem 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ai-page .ai-chat__typing.is-visible { opacity: 1; }
.ai-page .ai-chat__typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.55;
    animation: chatDot 1s ease-in-out infinite;
}
.ai-page .ai-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-page .ai-chat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatDot {
    0%, 100% { transform: scale(0.7); opacity: 0.4; }
    50%      { transform: scale(1);   opacity: 1; }
}

/* ---- Card 4: Ownership ---- */
.ai-page .ai-own {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.ai-page .ai-own__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ai-page .ai-own__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ai-page .ai-own__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(65, 230, 91, 0.2);
    color: #74eb8a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    transform: scale(0.5);
    transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.6, 1);
}
.ai-page .ai-own__item.is-visible .ai-own__check {
    transform: scale(1);
}


/* =====================================================================
   MARKETING & CONTENT — scrollytelling section
   Section is 360vh tall; inside, a 100vh sticky panel holds the text
   (left) and a scrolling track of 6 dark cards (right). Cards animate
   up as the user scrolls, with the active card scaling up and picking
   up a green accent glow. Section bg: #E6FCED mint, accent: emerald.
   ===================================================================== */
.ai-page .mkt-scroll {
    --mkt-accent: #0b9466;
    --mkt-accent-rgb: 11, 148, 102;
    --mkt-accent-2: #14b890;     /* lighter teal-leaning shade */
    --mkt-accent-2-rgb: 20, 184, 144;
    --mkt-accent-3: #0a7a52;     /* deeper forest shade */
    --mkt-accent-3-rgb: 10, 122, 82;
    /* Default card-accent chain: inherits the section accent unless a
       .mkt-card--vX variant overrides it. Every element inside the
       section uses --card-accent so one substitution covers both the
       section chrome and the per-card chrome. */
    --card-accent: var(--mkt-accent);
    --card-accent-rgb: var(--mkt-accent-rgb);
    position: relative;
    /* Background removed — the section inherits the page/body colour */
    background: transparent;
    color: #1D1D20;
    height: 360vh;
    /* Clip the gradient burst so it doesn't bleed into neighbouring
       sections. ScrollTrigger pins the inner via JS so CSS sticky is
       no longer in play here — overflow:hidden is safe again. */
    overflow: hidden;
    isolation: isolate;
}
/* Gradient burst — lives INSIDE the pinned inner so it's visible for
   the full sticky duration. Parallax-animated by GSAP (translateY)
   via --burst-y so it slowly drifts upward through the scroll. */
.ai-page .mkt-scroll__burst {
    --burst-y: 0px;
    position: absolute;
    left: -18vw;
    bottom: -20vh;
    width: 70vw;
    height: 90vh;
    background: radial-gradient(
        circle at 35% 65%,
        rgba(var(--mkt-accent-2-rgb), 0.7) 0%,
        rgba(var(--mkt-accent-2-rgb), 0.38) 18%,
        rgba(var(--mkt-accent-rgb), 0.22) 40%,
        transparent 68%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0, var(--burst-y), 0);
    will-change: transform;
}
.ai-page .mkt-scroll__inner {
    /* Positioning context for the burst + layering for grid children */
    position: relative;
}
.ai-page .mkt-scroll__text,
.ai-page .mkt-scroll__cards {
    position: relative;
    z-index: 1;
}
.ai-page .mkt-scroll__inner {
    /* ScrollTrigger pins this via JS (CSS position:sticky was being
       disabled by `body { overflow-x: hidden }` + ancestor transforms). */
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4vw, 4rem);
    width: 90vw;
    max-width: 110rem;
    margin: 0 auto;
    align-items: center;
    padding: clamp(3rem, 7vh, 7rem) 0;
    box-sizing: border-box;
}

/* Ambient bullhorn video — decorative, touches the left edge of the
   window (breaks out of .mkt-scroll__inner's 90vw centred wrapper via
   a negative left offset equal to the gutter), full section height,
   very low opacity. */
.ai-page .mkt-scroll__video {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Span the full viewport width, touching both edges of the window.
       (.mkt-scroll__inner is 90vw centred ⇒ pull left by the 5vw gutter.) */
    left: calc((100vw - 90vw) / -2);
    width: 100vw;
    height: 100%;
    object-fit: cover;
    /* After the horizontal flip, what was the right side is visible on
       the left — so anchor the source to the RIGHT edge, which lands
       visually on the LEFT edge of the flipped result. */
    object-position: right center;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    /* Flip horizontally so the bullhorn points the other way */
    transform: scaleX(-1);
}

/* ---- Left text column ---- */
.ai-page .mkt-scroll__text {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-self: center;
}
.ai-page .mkt-scroll__badge {
    align-self: flex-start;
    background: rgba(var(--card-accent-rgb), 0.12);
    border-color: rgba(var(--card-accent-rgb), 0.3);
    color: var(--card-accent);
}
.ai-page .mkt-scroll__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.75rem, 2.9vw, 2.7rem);
    line-height: 1.05;
    color: #1D1D20;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.ai-page .mkt-scroll__title .mkt-scroll__accent { color: var(--card-accent); }
.ai-page .mkt-scroll__lede {
    font-size: clamp(0.98rem, 1.1vw, 1.15rem);
    color: rgba(29, 29, 32, 0.72);
    line-height: 1.55;
    max-width: 32rem;
    margin: 0;
}

/* ---- Right cards column ---- */
.ai-page .mkt-scroll__cards {
    position: relative;
    height: 100%;
    /* Generous padding so each card's accent glow (up to ~42px
       outward) has room before being clipped. overflow:hidden clips
       at the padding-box edge, so the padding area becomes the
       "shadow lane" for ink overflow. */
    padding: 1.5rem 3.5rem;
    overflow: hidden;
    /* Soft fade top/bottom so cards melt in/out rather than hard-cut */
    -webkit-mask-image: linear-gradient(
        to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%
    );
    mask-image: linear-gradient(
        to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%
    );
}
.ai-page .mkt-scroll__track {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    /* Top/bottom padding so the first card enters from below and the
       last card exits at the top, leaving room for the mask fade. */
    padding: 30vh 0;
    will-change: transform;
}

/* ---- Card shell ---- */
.ai-page .mkt-card {
    /* Per-card accent defaults to the section accent but each variant
       can override via --card-accent* custom properties below. */
    --card-accent:     var(--mkt-accent);
    --card-accent-rgb: var(--mkt-accent-rgb);
    /* Gradient position defaults (overridden per variant) */
    --card-grad-x: 100%;
    --card-grad-y: 0%;

    /* Solid colour set separately so if the gradient's custom-property
       resolution fails, the card still has a dark opaque base. */
    background-color: #1D1D20;
    background-image: radial-gradient(
        ellipse at var(--card-grad-x) var(--card-grad-y),
        rgba(var(--card-accent-rgb), 0.28) 0%,
        rgba(var(--card-accent-rgb), 0.1) 35%,
        transparent 70%
    );
    color: #fff;
    border-radius: 18px;
    padding: 1.35rem 1.5rem 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 40px -16px rgba(0, 0, 0, 0.25),
        0 4px 14px -6px rgba(0, 0, 0, 0.12);
    transform: scale(0.97);
    /* Higher baseline opacity — 0.55 let the mint bg bleed through and
       the card read as almost-transparent when inactive. */
    opacity: 0.9;
    position: relative;
    overflow: hidden;  /* clip the large watermark number */
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.55s ease,
        border-color 0.55s ease,
        box-shadow 0.55s ease;
    will-change: transform, opacity;
}
.ai-page .mkt-card.is-active {
    transform: scale(1);
    opacity: 1;
    border-color: rgba(var(--card-accent-rgb), 0.4);
    box-shadow:
        0 0 0 1px rgba(var(--card-accent-rgb), 0.45),
        0 0 36px rgba(var(--card-accent-rgb), 0.32),
        0 26px 56px -14px rgba(0, 0, 0, 0.3);
}

/* Oversized outlined watermark number in the far corner of each card.
   Bright outline on active; pale and barely-there when dormant. */
.ai-page .mkt-card__num {
    position: absolute;
    top: -0.5rem;
    right: 0.8rem;
    font-family: 'Outfit', sans-serif;
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--card-accent-rgb), 0.25);
    letter-spacing: -0.03em;
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    transition: opacity 0.55s ease, -webkit-text-stroke-color 0.55s ease;
    z-index: 0;
}
.ai-page .mkt-card.is-active .mkt-card__num {
    opacity: 1;
    -webkit-text-stroke-color: rgba(var(--card-accent-rgb), 0.55);
}
/* Content sits above the watermark */
.ai-page .mkt-card__head,
.ai-page .mkt-card__title,
.ai-page .mkt-card__desc,
.ai-page .mkt-card > .mkt-flow,
.ai-page .mkt-card > .mkt-trend,
.ai-page .mkt-card > .mkt-gantt,
.ai-page .mkt-card > .mkt-refresh,
.ai-page .mkt-card > .mkt-sync,
.ai-page .mkt-card > .mkt-counters {
    position: relative;
    z-index: 1;
}

/* ---- Per-card hue + gradient-origin variants ----
   Each card gets a different corner for its gradient wash and a
   slightly different green tone — emerald / teal-leaning / forest
   / lime — within the same family so it stays cohesive. */
.ai-page .mkt-card--v1 {
    --card-grad-x: 100%;
    --card-grad-y: 0%;
}
.ai-page .mkt-card--v2 {
    --card-accent:     var(--mkt-accent-2);
    --card-accent-rgb: var(--mkt-accent-2-rgb);
    --card-grad-x: 0%;
    --card-grad-y: 100%;
}
.ai-page .mkt-card--v3 {
    --card-accent:     var(--mkt-accent-3);
    --card-accent-rgb: var(--mkt-accent-3-rgb);
    --card-grad-x: 100%;
    --card-grad-y: 100%;
}
.ai-page .mkt-card--v4 {
    --card-grad-x: 0%;
    --card-grad-y: 0%;
}
.ai-page .mkt-card--v5 {
    --card-accent:     var(--mkt-accent-2);
    --card-accent-rgb: var(--mkt-accent-2-rgb);
    --card-grad-x: 100%;
    --card-grad-y: 50%;
}
.ai-page .mkt-card--v6 {
    --card-accent:     var(--mkt-accent-3);
    --card-accent-rgb: var(--mkt-accent-3-rgb);
    --card-grad-x: 50%;
    --card-grad-y: 100%;
}

.ai-page .mkt-card__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.ai-page .mkt-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--card-accent-rgb), 0.14);
    border: 1px solid rgba(var(--card-accent-rgb), 0.28);
    color: var(--card-accent);
    flex-shrink: 0;
}
.ai-page .mkt-card__icon svg { width: 16px; height: 16px; }

.ai-page .mkt-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--card-accent-rgb), 0.12);
    border: 1px solid rgba(var(--card-accent-rgb), 0.28);
    color: var(--card-accent);
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ai-page .mkt-card__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--card-accent);
    flex-shrink: 0;
    position: relative;
}
.ai-page .mkt-card__pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    opacity: 0.55;
}
.ai-page .mkt-card.is-active .mkt-card__pulse::after {
    animation: mktPulse 1.7s cubic-bezier(0.3, 0.6, 0.3, 1) infinite;
}
@keyframes mktPulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    80%  { transform: scale(2.6); opacity: 0;    }
    100% { transform: scale(2.6); opacity: 0;    }
}

.ai-page .mkt-card__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
    color: #fff;
}
.ai-page .mkt-card__desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 1rem 0 0;
}

/* ---- Card 1 graphic: Email → Social flow ---- */
.ai-page .mkt-flow {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.ai-page .mkt-flow__panel {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.5s ease, border-color 0.5s ease, opacity 0.5s ease;
}
.ai-page .mkt-flow__type {
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.ai-page .mkt-flow__text {
    font-size: 0.78rem;
    color: #fff;
    line-height: 1.4;
}
.ai-page .mkt-flow__arrow {
    display: flex;
    justify-content: center;
    color: var(--card-accent);
    opacity: 0.35;
    transition: opacity 0.4s ease 0.3s;
}
.ai-page .mkt-flow__arrow svg { width: 16px; height: 16px; }
.ai-page .mkt-flow__panel--out {
    opacity: 0.4;
    transform: translateY(4px);
    transition: opacity 0.55s ease 0.5s, transform 0.55s ease 0.5s,
                background 0.55s ease, border-color 0.55s ease;
}
.ai-page .mkt-card.is-active .mkt-flow__arrow { opacity: 1; }
.ai-page .mkt-card.is-active .mkt-flow__panel--out {
    opacity: 1;
    transform: translateY(0);
    background: rgba(var(--card-accent-rgb), 0.08);
    border-color: rgba(var(--card-accent-rgb), 0.32);
}

/* ---- Card 2 graphic: Trending topics bars ---- */
.ai-page .mkt-trend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}
.ai-page .mkt-trend__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.18rem 0.6rem;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.82);
}
.ai-page .mkt-trend__label { grid-column: 1; grid-row: 1; }
.ai-page .mkt-trend__delta {
    grid-column: 2; grid-row: 1;
    color: var(--card-accent);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.ai-page .mkt-trend__bar {
    grid-column: 1 / 3; grid-row: 2;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.ai-page .mkt-trend__bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0;
    background: var(--card-accent);
    border-radius: inherit;
    transition: width 1s cubic-bezier(0.25, 1, 0.35, 1);
}
.ai-page .mkt-card.is-active .mkt-trend__bar::after { width: var(--w); }
.ai-page .mkt-card.is-active .mkt-trend__row:nth-child(1) .mkt-trend__bar::after { transition-delay: 0.2s; }
.ai-page .mkt-card.is-active .mkt-trend__row:nth-child(2) .mkt-trend__bar::after { transition-delay: 0.45s; }
.ai-page .mkt-card.is-active .mkt-trend__row:nth-child(3) .mkt-trend__bar::after { transition-delay: 0.7s; }

/* ---- Card 3 graphic: Gantt ---- */
.ai-page .mkt-gantt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ai-page .mkt-gantt__head {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-left: 4.2rem;
    padding-bottom: 0.25rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.ai-page .mkt-gantt__rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}
.ai-page .mkt-gantt__rows > li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
}
.ai-page .mkt-gantt__label {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
}
.ai-page .mkt-gantt__track {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.ai-page .mkt-gantt__bar {
    position: absolute;
    left: var(--offset);
    top: 0; bottom: 0;
    width: 0;
    background: var(--card-accent);
    border-radius: 3px;
    transition: width 0.9s cubic-bezier(0.25, 1, 0.35, 1);
}
.ai-page .mkt-card.is-active .mkt-gantt__rows > li:nth-child(1) .mkt-gantt__bar { width: var(--w); transition-delay: 0.2s; }
.ai-page .mkt-card.is-active .mkt-gantt__rows > li:nth-child(2) .mkt-gantt__bar { width: var(--w); transition-delay: 0.5s; }
.ai-page .mkt-card.is-active .mkt-gantt__rows > li:nth-child(3) .mkt-gantt__bar { width: var(--w); transition-delay: 0.8s; }

/* ---- Card 4 graphic: Text refresh (before/after) ---- */
.ai-page .mkt-refresh {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ai-page .mkt-refresh__row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.76rem;
    line-height: 1.4;
    transition: background 0.55s ease, border-color 0.55s ease,
                opacity 0.55s ease, transform 0.55s ease;
}
.ai-page .mkt-refresh__tag {
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-top: 2px;
}
.ai-page .mkt-refresh__tag--old {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
}
.ai-page .mkt-refresh__tag--new {
    background: rgba(var(--card-accent-rgb), 0.18);
    color: var(--card-accent);
}
.ai-page .mkt-refresh__text--old {
    position: relative;
    color: rgba(255, 255, 255, 0.55);
}
.ai-page .mkt-refresh__text--old::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
    transition: width 0.7s ease;
}
.ai-page .mkt-card.is-active .mkt-refresh__text--old::after {
    width: 100%;
    transition-delay: 0.35s;
}
.ai-page .mkt-refresh__row--new {
    opacity: 0.35;
    transform: translateY(4px);
}
.ai-page .mkt-card.is-active .mkt-refresh__row--new {
    opacity: 1;
    transform: translateY(0);
    background: rgba(var(--card-accent-rgb), 0.08);
    border-color: rgba(var(--card-accent-rgb), 0.3);
    transition-delay: 0.9s;
}

/* ---- Card 5 graphic: Channels sync ---- */
.ai-page .mkt-sync {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}
.ai-page .mkt-sync__row {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 0.76rem;
    transition: border-color 0.45s ease, background 0.45s ease;
}
.ai-page .mkt-sync__icon {
    padding: 0.25rem 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    text-transform: uppercase;
}
.ai-page .mkt-sync__text { color: rgba(255, 255, 255, 0.82); }
.ai-page .mkt-sync__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--card-accent-rgb), 0.18);
    color: var(--card-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.4);
    transition:
        opacity 0.35s ease,
        transform 0.4s cubic-bezier(0.3, 1.5, 0.6, 1);
}
.ai-page .mkt-card.is-active .mkt-sync__row { border-color: rgba(var(--card-accent-rgb), 0.2); }
.ai-page .mkt-card.is-active .mkt-sync__row:nth-child(1) .mkt-sync__check { opacity: 1; transform: scale(1); transition-delay: 0.25s; }
.ai-page .mkt-card.is-active .mkt-sync__row:nth-child(2) .mkt-sync__check { opacity: 1; transform: scale(1); transition-delay: 0.55s; }
.ai-page .mkt-card.is-active .mkt-sync__row:nth-child(3) .mkt-sync__check { opacity: 1; transform: scale(1); transition-delay: 0.85s; }

/* ---- Card 6 graphic: Live counters ---- */
.ai-page .mkt-counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.ai-page .mkt-counter {
    padding: 0.75rem 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 0.4s ease, background 0.4s ease;
}
.ai-page .mkt-card.is-active .mkt-counter {
    border-color: rgba(var(--card-accent-rgb), 0.25);
    background: rgba(var(--card-accent-rgb), 0.06);
}
.ai-page .mkt-counter__num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--card-accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.ai-page .mkt-counter__label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Reduced-motion + narrow-screen fallback: no pinning, cards
   stack naturally and all show as active. ---- */
.ai-page .mkt-scroll.mkt-scroll--static {
    height: auto;
    overflow: visible;
}
.ai-page .mkt-scroll--static .mkt-scroll__inner {
    position: static;
    height: auto;
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.ai-page .mkt-scroll--static .mkt-scroll__cards {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
.ai-page .mkt-scroll--static .mkt-scroll__track {
    padding: 0;
    transform: none !important;
}
.ai-page .mkt-scroll--static .mkt-card {
    transform: none;
    opacity: 1;
}
@media (max-width: 900px) {
    .ai-page .mkt-scroll {
        height: auto;
        overflow: visible;
    }
    .ai-page .mkt-scroll__inner {
        position: static;
        height: auto;
        grid-template-columns: 1fr;
        padding: clamp(3rem, 6vw, 5rem) 0;
    }
    .ai-page .mkt-scroll__cards {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .ai-page .mkt-scroll__track {
        padding: 0;
        transform: none !important;
    }
    .ai-page .mkt-card {
        transform: none;
        opacity: 1;
    }
}


/* =====================================================================
   GOAL-BASED GROWTH — "Guided Strategy" dual mockup
   Reuses the .ai-wyg__base--duo shell from Search & Visibility, with
   a custom variant so the two panels (Goal note + AI strategy) feel
   tailored to this section.
   ===================================================================== */

/* Slightly different gap/spacing than the search duo — the note on top
   is compact, the strategy card below is taller. */
.ai-page .ai-wyg__base--duo-strat {
    gap: 0.75rem;
}
.ai-page .ai-wyg__base--duo-strat .ai-note {
    flex: 0 0 auto;
}
.ai-page .ai-wyg__base--duo-strat .ai-strat {
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- GOAL NOTE (top card) — looks like a short email/Slack-style brief
        from the client. Kept light so it reads as "client input". ---- */
.ai-page .ai-note {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 22px 46px -16px rgba(29, 29, 32, 0.3),
        0 8px 16px -6px rgba(29, 29, 32, 0.14);
    color: #1D1D20;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-page .ai-note__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}
.ai-page .ai-note__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg, #888);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ai-page .ai-note__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    flex: 1;
}
.ai-page .ai-section--dark .ai-note__from {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(29, 29, 32, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page .ai-section--dark .ai-note__subject {
    font-size: 0.58rem;
    color: rgba(29, 29, 32, 0.55);
    margin-top: 1px;
    letter-spacing: 0.02em;
}
.ai-page .ai-section--dark .ai-note__date {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.55rem;
    color: rgba(29, 29, 32, 0.5);
    flex-shrink: 0;
}
.ai-page .ai-note__body {
    padding: 0.7rem 0.95rem 0.55rem;
    flex: 1;
}
.ai-page .ai-section--dark .ai-note__body p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(29, 29, 32, 0.85);
}
.ai-page .ai-section--dark .ai-note__body p strong {
    color: #1D1D20;
    font-weight: 600;
    background: rgba(var(--color-accent-rgb), 0.14);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}
.ai-page .ai-note__footer {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.95rem 0.7rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.ai-page .ai-note__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.5rem;
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
    border-radius: 99px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.ai-page .ai-note__tag svg {
    width: 11px;
    height: 11px;
}
.ai-page .ai-section--dark .ai-note__target {
    font-size: 0.64rem;
    color: rgba(29, 29, 32, 0.7);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- STRATEGY CARD (bottom) — dark AI response UI, matching ChatGPT
        panel feel, but with a ranked-plays list instead of a chat. ---- */
.ai-page .ai-wyg__base--duo-strat .ai-strat {
    background: #1a1a1d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 22px 46px -16px rgba(0, 0, 0, 0.55),
        0 8px 16px -6px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}
.ai-page .ai-strat__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    background: #232327;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.ai-page .ai-strat__logo {
    width: 18px;
    height: 18px;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ai-page .ai-strat__logo svg {
    width: 100%;
    height: 100%;
}
.ai-page .ai-section--dark .ai-strat__name {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
}
.ai-page .ai-strat__status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.ai-page .ai-strat__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
    animation: ai-strat-pulse 1.8s ease-in-out infinite;
}
@keyframes ai-strat-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .ai-strat__status-dot { animation: none; }
}
.ai-page .ai-strat__body {
    padding: 0.85rem 0.95rem 0.95rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 0;
    overflow: hidden;
}
.ai-page .ai-section--dark .ai-strat__lede {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}
.ai-page .ai-section--dark .ai-strat__lede strong {
    color: #fff;
    font-weight: 600;
    background: rgba(var(--color-accent-rgb), 0.22);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}
.ai-page .ai-strat__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    min-height: 0;
}
.ai-page .ai-strat__play {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    position: relative;
}
.ai-page .ai-strat__play--pick {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.15) inset,
        0 8px 22px -10px rgba(var(--color-accent-rgb), 0.4);
}
.ai-page .ai-strat__rank {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    width: 22px;
}
.ai-page .ai-strat__play--pick .ai-strat__rank {
    color: var(--color-accent);
}
.ai-page .ai-strat__play-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ai-page .ai-section--dark .ai-strat__play-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.15;
    letter-spacing: 0.005em;
}
.ai-page .ai-strat__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.ai-page .ai-strat__tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
}
.ai-page .ai-strat__tag--impact {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}
.ai-page .ai-strat__tag--impact-med {
    background: rgba(250, 204, 21, 0.14);
    color: #facc15;
}
.ai-page .ai-strat__tag--effort {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
.ai-page .ai-strat__tag--effort-med {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
}
.ai-page .ai-strat__lift {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.ai-page .ai-strat__play--pick .ai-strat__lift {
    color: var(--color-accent);
}

/* ---- Responsive polish: on narrower stages, tighten tag row ---- */
@media (max-width: 900px) {
    .ai-page .ai-strat__play {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .ai-page .ai-strat__play-meta {
        flex-basis: calc(100% - 60px);
    }
    .ai-page .ai-strat__lift {
        font-size: 0.85rem;
        margin-left: auto;
    }
}


/* =====================================================================
   FAQ-BOT — "Ask the AI" chat-style FAQ
   Dark section. Left: intro + question chips. Right: terminal-style
   chat window where clicking a chip animates it in as a user message,
   followed by a typing indicator, then the answer typing out.
   ===================================================================== */
.ai-page .faq-bot {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Ambient gradient orbs — subtle pop behind the chat window */
.ai-page .faq-bot__orb {
    position: absolute;
    width: clamp(340px, 40vw, 580px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}
.ai-page .faq-bot__orb--tl {
    top: -8%;
    left: -6%;
    background: radial-gradient(circle, var(--color-cyan) 0%, transparent 65%);
    animation: faqOrbTL 16s ease-in-out infinite;
}
.ai-page .faq-bot__orb--br {
    bottom: -10%;
    right: -8%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 65%);
    animation: faqOrbBR 18s ease-in-out infinite;
}
@keyframes faqOrbTL {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes faqOrbBR {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-80px, -60px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .faq-bot__orb { animation: none; }
}

/* Grid — intro+chips on the left, chat window on the right */
.ai-page .faq-bot__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
}
@media (max-width: 900px) {
    .ai-page .faq-bot__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ---- Left aside ---- */
.ai-page .faq-bot__aside {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ai-page .faq-bot__aside .ai-badge {
    font-size: 0.58rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 1rem;
    align-self: flex-start;
}
.ai-page .faq-bot__aside h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    margin-bottom: 0.7rem;
}
.ai-page .faq-bot__aside .ai-lede {
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
}

/* Chips header — makes it obvious these are clickable prompts */
.ai-page .faq-bot__chips-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.ai-page .faq-bot__chips-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-accent-rgb), 0.9);
}
.ai-page .faq-bot__chips-label svg {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
}
.ai-page .faq-bot__chips-count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}
.ai-page .faq-bot__chips-count strong {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
}

/* Question chips */
.ai-page .faq-bot__chips {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.ai-page .faq-bot__chip {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.95rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        opacity 0.35s ease;
    overflow: hidden;
    /* Staggered entrance when the section first scrolls into view */
    opacity: 1;
}
.ai-page .faq-bot__chip::before {
    /* Subtle accent wash on hover */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.12) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.ai-page .faq-bot__chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(var(--color-accent-rgb), 0.45);
    transform: translateX(3px);
    box-shadow: 0 12px 28px -14px rgba(var(--color-accent-rgb), 0.35);
}
.ai-page .faq-bot__chip:hover::before { opacity: 1; }
.ai-page .faq-bot__chip:active { transform: translateX(1px) scale(0.99); }
.ai-page .faq-bot__chip:focus-visible {
    outline: 2px solid rgba(var(--color-accent-rgb), 0.6);
    outline-offset: 2px;
}
.ai-page .faq-bot__chip.is-asked {
    opacity: 0.4;
    pointer-events: none;
    border-style: dashed;
    background: rgba(255, 255, 255, 0.02);
}
.ai-page .faq-bot__chip-num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(var(--color-accent-rgb), 0.85);
    padding: 0.2rem 0.4rem;
    background: rgba(var(--color-accent-rgb), 0.12);
    border-radius: 4px;
    flex-shrink: 0;
}
.ai-page .faq-bot__chip-text {
    min-width: 0;
    color: #fff;
}
.ai-page .faq-bot__chip-arrow {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.25s ease, color 0.25s ease;
    flex-shrink: 0;
}
.ai-page .faq-bot__chip:hover .faq-bot__chip-arrow {
    color: var(--color-accent);
    transform: translateX(3px);
}

/* Gentle "tap me" hint on the first unasked chip so newcomers see it
   as interactive. Stops once any chip has been asked. */
.ai-page .faq-bot__chips:not(.has-asked) .faq-bot__chip:first-of-type {
    animation: faqChipHint 2.6s ease-in-out infinite;
}
.ai-page .faq-bot__chips:not(.has-asked) .faq-bot__chip:first-of-type .faq-bot__chip-arrow {
    animation: faqChipArrow 1.6s ease-in-out infinite;
    color: var(--color-accent);
}
@keyframes faqChipHint {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.08); }
}
@keyframes faqChipArrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .faq-bot__chips:not(.has-asked) .faq-bot__chip:first-of-type { animation: none; }
    .ai-page .faq-bot__chips:not(.has-asked) .faq-bot__chip:first-of-type .faq-bot__chip-arrow { animation: none; }
}

/* ---- Right: chat window ---- */
.ai-page .faq-bot__window {
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.01) 100%),
        rgba(18, 18, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    min-height: 560px;
    max-height: 720px;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    box-shadow:
        0 40px 80px -30px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 60px -20px rgba(var(--color-accent-rgb), 0.18);
}

/* Terminal-style chrome */
.ai-page .faq-bot__chrome {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
    flex-shrink: 0;
}
.ai-page .faq-bot__chrome-dots {
    display: inline-flex;
    gap: 0.32rem;
}
.ai-page .faq-bot__chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}
.ai-page .faq-bot__chrome-dot:nth-child(1) { background: #ff5f57; }
.ai-page .faq-bot__chrome-dot:nth-child(2) { background: #febb2e; }
.ai-page .faq-bot__chrome-dot:nth-child(3) { background: #28c941; }
.ai-page .faq-bot__chrome-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'SF Mono', Menlo, Monaco, 'Roboto Mono', monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}
.ai-page .faq-bot__chrome-title svg {
    width: 12px;
    height: 12px;
    color: var(--color-accent);
}
.ai-page .faq-bot__status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.ai-page .faq-bot__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
    animation: faqStatusPulse 2s ease-in-out infinite;
}
@keyframes faqStatusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .faq-bot__status-dot { animation: none; }
}

/* Conversation log — scrollable */
.ai-page .faq-bot__log {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.ai-page .faq-bot__log::-webkit-scrollbar { width: 6px; }
.ai-page .faq-bot__log::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

/* Messages */
.ai-page .faq-bot__msg {
    display: flex;
    gap: 0.65rem;
    max-width: 92%;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-page .faq-bot__msg.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ai-page .faq-bot__msg--user {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.ai-page .faq-bot__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.ai-page .faq-bot__avatar--ai {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-cyan) 100%);
    box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
                0 0 18px -4px rgba(var(--color-accent-rgb), 0.45);
}
.ai-page .faq-bot__avatar--ai svg {
    width: 14px;
    height: 14px;
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.ai-page .faq-bot__avatar--user {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Bubble */
.ai-page .faq-bot__bubble {
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px 12px 12px 2px;
    max-width: calc(100% - 38px);
}
.ai-page .faq-bot__msg--user .faq-bot__bubble {
    background: rgba(var(--color-accent-rgb), 0.18);
    border-color: rgba(var(--color-accent-rgb), 0.28);
    border-radius: 12px 12px 2px 12px;
}
.ai-page .faq-bot__text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}
.ai-page .faq-bot__msg--user .faq-bot__text { color: #fff; }

/* The blinking caret that sits at the end of typing text */
.ai-page .faq-bot__typewrite::after {
    content: '';
    display: inline-block;
    width: 0.5ch;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--color-accent);
    animation: faqCaret 1s steps(2) infinite;
}
.ai-page .faq-bot__typewrite.is-done::after { display: none; }
@keyframes faqCaret {
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .faq-bot__typewrite::after { animation: none; }
}

/* Typing indicator (3 bouncing dots) */
.ai-page .faq-bot__typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.1rem 0;
}
.ai-page .faq-bot__typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    animation: faqTyping 1.2s ease-in-out infinite;
}
.ai-page .faq-bot__typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ai-page .faq-bot__typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes faqTyping {
    0%, 70%, 100% { transform: translateY(0); opacity: 0.45; }
    35%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .faq-bot__typing-dot { animation: none; }
}

/* Footer with fake input + reset */
.ai-page .faq-bot__foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}
/* Footer prompt — no fake text input (which could suggest typing).
   Just a directional hint back at the chips. */
.ai-page .faq-bot__prompt {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
}
.ai-page .faq-bot__prompt-arrow {
    width: 14px;
    height: 14px;
    color: var(--color-accent);
    flex-shrink: 0;
    animation: faqPromptNudge 2s ease-in-out infinite;
}
@keyframes faqPromptNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-page .faq-bot__prompt-arrow { animation: none; }
}
/* On small screens (chips stack on top, chat below), flip the arrow up */
@media (max-width: 900px) {
    .ai-page .faq-bot__prompt-arrow { transform: rotate(90deg); }
    @keyframes faqPromptNudge {
        0%, 100% { transform: rotate(90deg) translateX(0); }
        50%      { transform: rotate(90deg) translateX(-4px); }
    }
}
.ai-page .faq-bot__reset {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.ai-page .faq-bot__reset:hover {
    background: rgba(var(--color-accent-rgb), 0.15);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    color: #fff;
    transform: rotate(-25deg);
}
.ai-page .faq-bot__reset svg { width: 14px; height: 14px; }


/* =====================================================================
   MAI PAGE
   Scoped under .mai-page so rules here only affect the MAI page. Shares
   the AI design system (.ai-page) for fonts and container rhythm. The
   MAI signature gradient is accent -> cyan so MAI reads as its own
   product within the same visual family.
   ===================================================================== */

.mai-page {
    /* MAI signature gradient */
    --mai-grad: linear-gradient(135deg, var(--color-accent) 0%, var(--color-cyan) 100%);
    background: var(--color-dark);
    color: #fff;
}

/* ---- Shared mark: "MAI" with bold M + superscript TM ---- */
.mai-mark {
    display: inline;
    letter-spacing: -0.01em;
}
.mai-mark__m {
    font-weight: 800;
}
.mai-mark__tm {
    font-size: 0.38em;
    font-weight: 600;
    margin-left: 0.12em;
    vertical-align: super;
    line-height: 1;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* ---- HERO SECTION ---- */
.mai-page .mai-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(38rem, 92vh, 60rem);
    padding: clamp(7rem, 12vw, 10rem) 0 clamp(5rem, 8vw, 7rem);
    display: flex;
    align-items: center;
    background: var(--color-dark);
}
.mai-page .mai-hero__inner {
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3.5rem);
    position: relative;
    z-index: 2;
}
.mai-page .mai-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
@media (max-width: 960px) {
    .mai-page .mai-hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ---- Ambient orbs (accent + cyan, drifting) ---- */
.mai-page .mai-hero__orb {
    position: absolute;
    width: clamp(360px, 44vw, 640px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.38;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
.mai-page .mai-hero__orb--tl {
    top: -16%;
    left: -10%;
    background: radial-gradient(circle, var(--color-cyan) 0%, transparent 65%);
    animation: maiOrbTL 18s ease-in-out infinite;
}
.mai-page .mai-hero__orb--br {
    bottom: -18%;
    right: -8%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 65%);
    animation: maiOrbBR 22s ease-in-out infinite;
}
@keyframes maiOrbTL {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(70px, 45px) scale(1.12); }
}
@keyframes maiOrbBR {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-90px, -70px) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-hero__orb { animation: none; }
}

/* ---- Scattered memory nodes (tiny pulsing dots floating in the bg) ---- */
.mai-page .mai-hero__nodes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.mai-page .mai-hero__node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
    opacity: 0.7;
    animation: maiNode 4.5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.mai-page .mai-hero__node:nth-child(even) {
    background: var(--color-cyan);
    box-shadow: 0 0 0 3px rgba(51, 207, 255, 0.15);
}
@keyframes maiNode {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.4); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-hero__node { animation: none; }
}

/* =====================================================================
   INTRO COLUMN (left)
   ===================================================================== */
.mai-page .mai-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Ribbon: glyph + "Managed AI TM" + separator + online status */
.mai-page .mai-hero__ribbon {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.8rem 0.45rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mai-page .mai-hero__glyph {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.3),
        0 0 14px -2px rgba(var(--color-accent-rgb), 0.5);
}
.mai-page .mai-hero__glyph svg { width: 14px; height: 14px; }
.mai-page .mai-hero__ribbon-label {
    color: #fff;
}
.mai-page .mai-hero__ribbon-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
}
.mai-page .mai-hero__ribbon-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mai-page .mai-hero__ribbon-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
@keyframes maiPulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-hero__ribbon-dot { animation: none; }
}

/* Title */
.mai-page .mai-hero__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 4.6vw, 4.3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    text-wrap: balance;
}
.mai-page .mai-hero__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    padding-right: 0.02em;
}
.mai-page .mai-hero__title-line {
    display: block;
    margin-top: 0.15em;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 300;
    font-size: 0.82em;
}

/* Lede */
.mai-page .mai-hero__lede {
    margin: 0;
    font-size: clamp(0.98rem, 1.15vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 30rem;
}
@media (max-width: 900px) {
    .mai-page .mai-hero__lede .mai-move__learn {
        display: flex;
        width: max-content;
    }
}

/* Scroll CTA */
.mai-page .mai-hero__cta {
    align-self: flex-start;
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease;
    position: relative;
}
.mai-page .mai-hero__cta:hover {
    background: rgba(var(--color-accent-rgb), 0.14);
    border-color: rgba(var(--color-accent-rgb), 0.55);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -14px rgba(var(--color-accent-rgb), 0.5);
}
.mai-page .mai-hero__cta-arrow {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    animation: maiArrowNudge 2.4s ease-in-out infinite;
}
.mai-page .mai-hero__cta-arrow svg { width: 14px; height: 14px; }
.mai-page .mai-hero__cta:hover .mai-hero__cta-arrow {
    transform: translateY(3px);
}
@keyframes maiArrowNudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-hero__cta-arrow { animation: none; }
}

/* =====================================================================
   CHAT / EMAIL WINDOW (right)
   Glass-morphism dark panel with a warm accent glow. Three stacked
   exchanges; only the active one is visible, and its internal
   messages stage in via CSS animations.
   ===================================================================== */
.mai-page .mai-hero__chat {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.015) 100%),
        rgba(18, 18, 22, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    box-shadow:
        0 60px 120px -40px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 80px -20px rgba(var(--color-accent-rgb), 0.22);
    display: flex;
    flex-direction: column;
    min-height: clamp(32rem, 58vh, 46rem);
}
/* Soft accent glow halo behind the chat */
.mai-page .mai-hero__chat::before {
    content: '';
    position: absolute;
    inset: -40px;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(var(--color-accent-rgb), 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(51, 207, 255, 0.18) 0%, transparent 55%);
    filter: blur(30px);
    z-index: -1;
    pointer-events: none;
}

/* Header */
.mai-page .mai-hero__chat-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
    flex-shrink: 0;
}
.mai-page .mai-hero__chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
        0 0 22px -4px rgba(var(--color-accent-rgb), 0.55);
}
.mai-page .mai-hero__chat-avatar svg { width: 20px; height: 20px; }
.mai-page .mai-hero__chat-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    flex: 1;
}
.mai-page .mai-hero__chat-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
.mai-page .mai-hero__chat-name b { font-weight: 800; }
.mai-page .mai-hero__chat-name sup {
    font-size: 0.42em;
    font-weight: 600;
    vertical-align: super;
    margin-left: 0.1em;
    opacity: 0.85;
}
.mai-page .mai-hero__chat-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.mai-page .mai-hero__chat-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}
.mai-page .mai-hero__chat-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
    animation: maiPulseDot 1.8s ease-in-out infinite;
}

/* Progress pips (one per exchange) */
.mai-page .mai-hero__pips {
    display: flex;
    gap: 0.45rem;
    padding: 0.75rem 1.2rem 0;
    flex-shrink: 0;
}
.mai-page .mai-hero__pip {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mai-page .mai-hero__pip::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--mai-grad);
    border-radius: inherit;
}
.mai-page .mai-hero__pip.is-active::after {
    animation: maiPipFill var(--mai-pip-dur, 8s) linear forwards;
}
.mai-page .mai-hero__pip.is-visited::after {
    width: 100%;
    opacity: 0.35;
}
@keyframes maiPipFill {
    from { width: 0; }
    to   { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-hero__pip.is-active::after {
        animation: none;
        width: 100%;
    }
}

/* Conversation log — stage for 3 exchanges */
.mai-page .mai-hero__chat-log {
    position: relative;
    flex: 1;
    padding: 1.1rem 1.2rem 1.2rem;
    overflow: hidden;
    min-height: 0;
}

/* Exchange card — one per scripted conversation */
.mai-page .mai-ex {
    position: absolute;
    top: 1.1rem;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.mai-page .mai-ex.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Small header on each exchange */
.mai-page .mai-ex__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    opacity: 0;
    animation: maiFadeSlide 0.45s 0.15s both ease-out;
}
.mai-page .mai-ex:not(.is-active) .mai-ex__head { animation: none; opacity: 0; }

.mai-page .mai-ex__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    background: rgba(var(--color-accent-rgb), 0.14);
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    border-radius: 999px;
    color: var(--color-accent);
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mai-page .mai-ex__from {
    font-family: 'SF Mono', Menlo, Monaco, 'Roboto Mono', monospace;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.01em;
}

/* Messages — shared */
.mai-page .mai-msg {
    display: flex;
    gap: 0.7rem;
    opacity: 0;
    transform: translateY(10px);
}
.mai-page .mai-ex.is-active .mai-msg--in {
    animation: maiFadeSlide 0.55s 0.55s both ease-out;
}
.mai-page .mai-ex.is-active .mai-msg--thinking {
    animation:
        maiFadeSlide 0.4s 1.75s both ease-out,
        maiFadeOut   0.3s 3.55s both ease-in;
}
.mai-page .mai-ex.is-active .mai-msg--out {
    animation: maiFadeSlide 0.6s 3.9s both ease-out;
}
@keyframes maiFadeSlide {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes maiFadeOut {
    to { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-ex.is-active .mai-msg--in,
    .mai-page .mai-ex.is-active .mai-msg--thinking,
    .mai-page .mai-ex.is-active .mai-msg--out {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Avatars */
.mai-page .mai-msg__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}
.mai-page .mai-msg__avatar--user {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.mai-page .mai-msg__avatar--ai {
    background: var(--mai-grad);
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
        0 0 16px -4px rgba(var(--color-accent-rgb), 0.5);
}
.mai-page .mai-msg__avatar--ai svg { width: 16px; height: 16px; color: #fff; }

/* Bubbles */
.mai-page .mai-msg__bubble {
    padding: 0.6rem 0.85rem 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px 14px 14px 3px;
    max-width: min(82%, 36rem);
}
.mai-page .mai-msg__bubble--out {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.28);
    box-shadow: 0 10px 30px -12px rgba(var(--color-accent-rgb), 0.35);
}
.mai-page .mai-msg__bubble--thinking {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.85rem;
}
.mai-page .mai-msg__subject {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.3rem;
}
.mai-page .mai-msg__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}
.mai-page .mai-msg__text strong {
    color: #fff;
    font-weight: 700;
}
.mai-page .mai-msg__bubble--out .mai-msg__text strong {
    color: #fff;
    background: rgba(var(--color-accent-rgb), 0.28);
    padding: 0 0.28rem;
    border-radius: 4px;
}
.mai-page .mai-msg__think-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
}
.mai-page .mai-msg__typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mai-page .mai-msg__typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: maiTyping 1.2s ease-in-out infinite;
}
.mai-page .mai-msg__typing span:nth-child(2) { animation-delay: 0.15s; }
.mai-page .mai-msg__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes maiTyping {
    0%, 70%, 100% { transform: translateY(0); opacity: 0.55; }
    35%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-msg__typing span { animation: none; }
}

/* Reply footer inside MAI's bubble */
.mai-page .mai-msg__foot {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    justify-content: space-between;
}
.mai-page .mai-msg__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.22rem 0.55rem;
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.28);
    color: #34d399;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.mai-page .mai-msg__tag svg { width: 11px; height: 11px; }
.mai-page .mai-msg__sources {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.005em;
}

/* Chat footer */
.mai-page .mai-hero__chat-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.2rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
}
.mai-page .mai-hero__signal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.mai-page .mai-hero__signal strong {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mai-page .mai-hero__signal-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiSignal 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes maiSignal {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.04); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-hero__signal-pulse { animation: none; }
}
.mai-page .mai-hero__guardrail {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.mai-page .mai-hero__guardrail svg { width: 12px; height: 12px; }

/* Responsive tweaks */
@media (max-width: 720px) {
    .mai-page .mai-hero__chat { min-height: 30rem; }
    .mai-page .mai-msg__bubble { max-width: 100%; }
    .mai-page .mai-hero__ribbon-sep { display: none; }
    .mai-page .mai-hero__chat-foot { font-size: 0.66rem; }
}


/* =====================================================================
   CHAPTER 2: MAI UNDERSTANDS YOUR BUSINESS (.mai-und)
   Sticky-pinned scene. Outer section provides the scroll distance;
   inner `.mai-und__pin` stays pinned at 100vh for the full duration.
   A scroll-scrubbed progress 0..1 toggles is-stage-0 .. -3 classes
   on the workspace, and CSS carries the transitions from there.
   ===================================================================== */
.mai-page .mai-und {
    position: relative;
    background: var(--color-dark);
    /* Scroll distance = 4 viewport heights (pin duration). Extra 100vh
       lets the pin release cleanly without jumping into the next section. */
    height: 420vh;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}
.mai-page .mai-und__scroll {
    /* Positioning context for the pinned panel */
    position: relative;
    height: 100%;
}
.mai-page .mai-und__pin {
    /* ScrollTrigger pins this via JS (CSS sticky would be disabled by
       the existing overflow handling around ancestor transforms). */
    height: 100vh;
    width: 100%;
    padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(1.2rem, 2.2vw, 2rem);
    max-width: 110rem;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}

/* Subtle glow on the section backdrop — picks up the MAI signature */
.mai-page .mai-und__pin::before {
    content: '';
    position: absolute;
    inset: -10% -5%;
    background:
        radial-gradient(ellipse at 15% 15%, rgba(51, 207, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 85%, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 55%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

/* ---- Header ---- */
.mai-page .mai-und__head {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 56rem;
}
.mai-page .mai-und__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-und__chapter {
    color: var(--color-accent);
}
.mai-page .mai-und__meta-sep {
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}
.mai-page .mai-und__pips {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.mai-page .mai-und__pip {
    width: 22px;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    transition: background 0.35s ease;
}
.mai-page .mai-und__pip::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--mai-grad);
    border-radius: inherit;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-und__pip.is-visited::after { width: 100%; opacity: 0.45; }
.mai-page .mai-und__pip.is-active::after  { width: 100%; opacity: 1; }
.mai-page .mai-und__stage-label {
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.06em;
    text-transform: none;
    font-weight: 500;
    font-size: 0.74rem;
}

.mai-page .mai-und__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}
.mai-page .mai-und__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-und__title-accent {
    color: var(--color-accent);
}
.mai-page .mai-und__sub {
    margin: 0;
    font-size: clamp(0.88rem, 1vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
    max-width: 48rem;
}

/* Prompt echo: shows the question MAI is resolving */
.mai-page .mai-und__prompt {
    margin-top: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: rgba(var(--color-accent-rgb), 0.1);
    border: 1px solid rgba(var(--color-accent-rgb), 0.28);
    border-radius: 999px;
    align-self: flex-start;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.92);
}
.mai-page .mai-und__prompt-tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-und__prompt-text {
    font-style: italic;
    font-weight: 500;
}

/* =====================================================================
   WORKSPACE — the scene that animates through four stages
   ===================================================================== */
.mai-page .mai-und__workspace {
    position: relative;
    min-height: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
        rgba(18, 18, 22, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ---- Category labels (top of each column) ---- */
.mai-page .mai-und__cat {
    position: absolute;
    top: 2.2%;
    left: var(--cx);
    transform: translate(-50%, 0);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
    white-space: nowrap;
}
.mai-page .mai-und__cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}
.mai-page .mai-und__cat--services  { --cat-color: #c8a7ff; }
.mai-page .mai-und__cat--personas  { --cat-color: #ff9e80; }
.mai-page .mai-und__cat--content   { --cat-color: #7fd3ff; }
.mai-page .mai-und__cat--activity  { --cat-color: #ffd58a; }
.mai-page .mai-und__cat--goals     { --cat-color: #34d399; }
.mai-page .mai-und__cat            { color: var(--cat-color); }
.mai-page .mai-und__workspace.is-stage-1 .mai-und__cat,
.mai-page .mai-und__workspace.is-stage-2 .mai-und__cat,
.mai-page .mai-und__workspace.is-stage-3 .mai-und__cat {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---- Signal chips ---- */
.mai-page .mai-sig {
    position: absolute;
    left: var(--tx);
    top: var(--ty);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Stage 0: scattered — apply the saved offset + rotation on top of
       the centering translate. */
    transform:
        translate(-50%, -50%)
        translate(var(--sx, 0), var(--sy, 0))
        rotate(var(--sr, 0deg));
    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease,
        background 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease;
    z-index: 2;
    will-change: transform, opacity;
}
/* Stage 1+: chips snap to their target grid position */
.mai-page .mai-und__workspace.is-stage-1 .mai-sig,
.mai-page .mai-und__workspace.is-stage-2 .mai-sig,
.mai-page .mai-und__workspace.is-stage-3 .mai-sig {
    transform: translate(-50%, -50%);
}

/* Category-coloured accent on the chip icon */
.mai-page .mai-sig__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.mai-page .mai-sig__icon svg { width: 12px; height: 12px; }
.mai-page .mai-sig--service  .mai-sig__icon { background: rgba(200, 167, 255, 0.15); color: #c8a7ff; }
.mai-page .mai-sig--persona  .mai-sig__icon { background: rgba(255, 158, 128, 0.15); color: #ff9e80; }
.mai-page .mai-sig--content  .mai-sig__icon { background: rgba(127, 211, 255, 0.15); color: #7fd3ff; }
.mai-page .mai-sig--activity .mai-sig__icon { background: rgba(255, 213, 138, 0.15); color: #ffd58a; }
.mai-page .mai-sig--goal     .mai-sig__icon { background: rgba(52, 211, 153, 0.15);  color: #34d399; }

/* "Missing" flag on the FAQ chip */
.mai-page .mai-sig__flag {
    margin-left: 0.35rem;
    padding: 0.1rem 0.35rem;
    background: rgba(255, 158, 128, 0.18);
    color: #ffb59a;
    border-radius: 999px;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.mai-page .mai-und__workspace.is-stage-3 .mai-sig--missing .mai-sig__flag {
    opacity: 1;
}

/* Goal "anchor" pulse — shows the originating request in stage 2+ */
.mai-page .mai-sig__pulse {
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    border: 1px solid rgba(52, 211, 153, 0);
    pointer-events: none;
}
.mai-page .mai-und__workspace.is-stage-2 .mai-sig.is-anchor .mai-sig__pulse,
.mai-page .mai-und__workspace.is-stage-3 .mai-sig.is-anchor .mai-sig__pulse {
    animation: maiAnchorPulse 2s ease-in-out infinite;
}
@keyframes maiAnchorPulse {
    0%, 100% { border-color: rgba(52, 211, 153, 0.5); transform: scale(1); }
    50%      { border-color: rgba(52, 211, 153, 0);   transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-sig__pulse { animation: none !important; }
}

/* Stage 3: non-relevant chips dim; relevant chips brighten */
.mai-page .mai-und__workspace.is-stage-3 .mai-sig {
    opacity: 0.22;
    filter: grayscale(40%);
}
.mai-page .mai-und__workspace.is-stage-3 .mai-sig.is-relevant {
    opacity: 1;
    filter: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.2) inset,
        0 10px 30px -14px rgba(var(--color-accent-rgb), 0.55);
}

/* ---- Connection overlay ---- */
.mai-page .mai-und__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
/* Solid connection lines — paths use pathLength="1" so the draw-in
   animation is uniform regardless of each line's actual length. */
.mai-page .mai-und__link {
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition:
        opacity 0.55s ease,
        stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), 0.5));
}
.mai-page .mai-und__workspace.is-stage-2 .mai-und__link,
.mai-page .mai-und__workspace.is-stage-3 .mai-und__link {
    opacity: 0.9;
    stroke-dashoffset: 0;
}

/* Dashed "missing piece" line — opacity fade, dashes stay put. Uses
   pixel-unit dasharray (no pathLength normalization) so dashes remain
   a sensible visual size. */
.mai-page .mai-und__link--missing {
    stroke: #ff9e80;
    stroke-dasharray: 6 5;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 6px rgba(255, 158, 128, 0.5));
    opacity: 0;
    transition: opacity 0.7s ease 0.35s;
}
.mai-page .mai-und__workspace.is-stage-3 .mai-und__link--missing {
    opacity: 0.9;
}

/* Landing dot at each line's endpoint — makes the attachment point
   visible on top of the chip. */
.mai-page .mai-und__link-dot {
    fill: var(--color-accent);
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 1.2;
    opacity: 0;
    transition: opacity 0.4s ease 0.85s, transform 0.4s ease 0.85s;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.5);
    filter: drop-shadow(0 0 4px rgba(var(--color-accent-rgb), 0.7));
}
.mai-page .mai-und__workspace.is-stage-2 .mai-und__link-dot,
.mai-page .mai-und__workspace.is-stage-3 .mai-und__link-dot {
    opacity: 1;
    transform: scale(1);
}
.mai-page .mai-und__link-dot--missing {
    fill: #ff9e80;
    filter: drop-shadow(0 0 4px rgba(255, 158, 128, 0.7));
    transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}
.mai-page .mai-und__workspace.is-stage-2 .mai-und__link-dot--missing {
    opacity: 0;
    transform: scale(0.5);
}
.mai-page .mai-und__workspace.is-stage-3 .mai-und__link-dot--missing {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-und__link {
        stroke-dashoffset: 0;
        transition: opacity 0.3s ease;
    }
    .mai-page .mai-und__link-dot { transform: scale(1); }
}

/* ---- Summary card (stage 3) ---- */
.mai-page .mai-und__summary {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: min(44rem, 88%);
    transform: translate(-50%, 24px);
    opacity: 0;
    padding: 0.95rem 1.15rem 1.05rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
        rgba(18, 18, 22, 0.85);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 30px 70px -24px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 50px -16px rgba(var(--color-accent-rgb), 0.4);
    transition:
        opacity 0.6s ease 0.2s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
    z-index: 4;
}
.mai-page .mai-und__workspace.is-stage-3 .mai-und__summary {
    opacity: 1;
    transform: translate(-50%, 0);
}
.mai-page .mai-und__summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
.mai-page .mai-und__summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: #34d399;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mai-page .mai-und__summary-badge svg { width: 11px; height: 11px; }
.mai-page .mai-und__summary-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-und__summary-text {
    margin: 0 0 0.6rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}
.mai-page .mai-und__summary-text strong {
    color: #fff;
    font-weight: 700;
    background: rgba(var(--color-accent-rgb), 0.2);
    padding: 0 0.3rem;
    border-radius: 4px;
}
.mai-page .mai-und__summary-gap {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 158, 128, 0.08);
    border: 1px dashed rgba(255, 158, 128, 0.35);
    border-radius: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}
.mai-page .mai-und__summary-gap-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffb59a;
}
.mai-page .mai-und__summary-gap-text strong {
    color: #ffb59a;
    font-weight: 700;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .mai-page .mai-und { height: 360vh; }
    .mai-page .mai-und__pin { padding-top: 4rem; }
    .mai-page .mai-sig { font-size: 0.68rem; padding: 0.45rem 0.65rem; }
    .mai-page .mai-sig__icon { width: 18px; height: 18px; }
    .mai-page .mai-und__cat { font-size: 0.54rem; padding: 0.22rem 0.5rem; }
    .mai-page .mai-und__summary { padding: 0.8rem 0.9rem 0.9rem; }
}
@media (max-width: 640px) {
    .mai-page .mai-und__workspace { min-height: 30rem; }
    .mai-page .mai-sig { font-size: 0.62rem; }
    .mai-page .mai-sig__label {
        max-width: 7rem;
        white-space: normal;
        line-height: 1.15;
    }
}


/* =====================================================================
   CHAPTER 2 — CONTINUED: THE BRIEFING (.mai-brief)
   Sits immediately below the pinned "Understands Your Business" scene.
   Editorial intro, a stats strip, five category cards that peek into
   MAI's actual memory, and a closing read-more block.
   ===================================================================== */
.mai-page .mai-brief {
    position: relative;
    background: var(--color-dark);
    padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 4vw, 3.5rem) clamp(5rem, 8vw, 8rem);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
/* Soft divider + glow where Chapter 2 ends and The Briefing begins */
.mai-page .mai-brief::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.45) 30%,
        rgba(51, 207, 255, 0.45) 70%,
        transparent 100%);
    opacity: 0.6;
}
.mai-page .mai-brief::after {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-brief__inner {
    max-width: 86rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Intro ---- */
.mai-page .mai-brief__head {
    max-width: 48rem;
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.mai-page .mai-brief__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-brief__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-brief__title {
    margin: 0 0 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.8vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
}
/* Match the other section titles: gradient-fill the bold M in MAI. */
.mai-page .mai-brief__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-brief__lede {
    margin: 0;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 44rem;
}

/* ---- Stats strip ---- */
.mai-page .mai-brief__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.5vw, 1.2rem);
    margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
    padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.5vw, 2rem);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005)),
        rgba(18, 18, 22, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.mai-page .mai-brief__stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    padding-right: clamp(0.75rem, 2vw, 1.5rem);
}
/* Every stat after the first gets a left padding so the big number
   doesn't sit right against the separator line. */
.mai-page .mai-brief__stat + .mai-brief__stat {
    padding-left: clamp(1rem, 2.2vw, 1.75rem);
}
.mai-page .mai-brief__stat + .mai-brief__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}
.mai-page .mai-brief__stat-num {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-brief__stat--live .mai-brief__stat-num {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.mai-page .mai-brief__stat-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}
.mai-page .mai-brief__stat-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.32);
    margin-top: 0.1rem;
}
.mai-page .mai-brief__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
    animation: maiPulseDot 1.8s ease-in-out infinite;
}
@media (max-width: 780px) {
    .mai-page .mai-brief__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem 1rem;
    }
    .mai-page .mai-brief__stat + .mai-brief__stat::before { display: none; }
    /* Reset left padding for odd items (left column) — avoids indent on History */
    .mai-page .mai-brief__stat:nth-child(odd) {
        padding-left: 0;
    }
}

/* ---- Category card grid ---- */
.mai-page .mai-brief__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: clamp(0.85rem, 1.6vw, 1.2rem);
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

/* Desktop: body wrapper is transparent to card's flex layout */
.mai-page .mai-brief__card-body {
    display: contents;
}

/* Chevron hidden on desktop */
.mai-page .mai-brief__card-chev {
    display: none;
}

.mai-page .mai-brief__card {
    --card-accent: var(--color-accent);
    --card-accent-rgb: var(--color-accent-rgb);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem 1.15rem 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(18, 18, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
/* Accent-coloured top edge, pulls in the category hue */
.mai-page .mai-brief__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--card-accent-rgb), 0.8) 20%,
        rgba(var(--card-accent-rgb), 0.8) 80%,
        transparent 100%);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.mai-page .mai-brief__card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--card-accent-rgb), 0.35);
    box-shadow:
        0 18px 42px -20px rgba(0, 0, 0, 0.6),
        0 0 30px -10px rgba(var(--card-accent-rgb), 0.35);
}
.mai-page .mai-brief__card:hover::before { opacity: 1; }

/* Desktop: reset button chrome, keep visual as before */
.mai-page .mai-brief__card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: default;
    text-align: left;
}
.mai-page .mai-brief__card-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(var(--card-accent-rgb), 0.15);
    color: var(--card-accent);
    flex-shrink: 0;
}
.mai-page .mai-brief__card-icon svg { width: 14px; height: 14px; }
.mai-page .mai-brief__card-cat {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--card-accent);
    flex: 1;
}
.mai-page .mai-brief__card-count {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.mai-page .mai-brief__card-prog {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}
.mai-page .mai-brief__card-prog-bar {
    width: 44px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.mai-page .mai-brief__card-prog-bar span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    background: var(--card-accent);
    border-radius: 2px;
}
.mai-page .mai-brief__card-prog-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.mai-page .mai-brief__card-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Briefing card accordion — mobile only ---- */
@media (max-width: 900px) {
    .mai-page .mai-brief__grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .mai-page .mai-brief__card {
        overflow: hidden;
        transition: border-color 0.3s ease;
        padding: 0;
        gap: 0;
    }
    .mai-page .mai-brief__card.is-open {
        border-color: rgba(var(--card-accent-rgb), 0.4);
    }
    .mai-page .mai-brief__card-head {
        padding: 1rem 1.15rem;
        cursor: pointer;
        gap: 0.65rem;
    }
    .mai-page .mai-brief__card-chev {
        display: block;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        margin-left: auto;
        color: rgba(255, 255, 255, 0.4);
        transition: transform 0.3s ease, color 0.3s ease;
    }
    .mai-page .mai-brief__card.is-open .mai-brief__card-chev {
        transform: rotate(180deg);
        color: var(--card-accent);
    }
    .mai-page .mai-brief__card-body {
        display: none;
        flex-direction: column;
        gap: 0.85rem;
        padding: 0 1.15rem 1.25rem;
    }
    .mai-page .mai-brief__card.is-open .mai-brief__card-body {
        display: flex;
    }
}

/* ---- Peek: visual sample of MAI's actual data per category ---- */
.mai-page .mai-brief__peek {
    list-style: none;
    margin: 0.1rem 0 0;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.86);
}
.mai-page .mai-brief__peek li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: 0.005em;
}
.mai-page .mai-brief__peek-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--card-accent);
    flex-shrink: 0;
}
.mai-page .mai-brief__peek-more {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding-left: 0.85rem;
}

/* Tag variant (Customers) */
.mai-page .mai-brief__peek--tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.mai-page .mai-brief__tag {
    display: inline-flex;
    padding: 0.22rem 0.55rem;
    background: rgba(var(--card-accent-rgb), 0.14);
    border: 1px solid rgba(var(--card-accent-rgb), 0.28);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.mai-page .mai-brief__tag--ghost {
    background: transparent;
    border-style: dashed;
    color: rgba(255, 255, 255, 0.45);
}

/* Path variant (Website) */
.mai-page .mai-brief__peek--path li {
    gap: 0.65rem;
}
.mai-page .mai-brief__peek-slug {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.64rem;
    /* Inherits the card's accent so each card's slug matches its hue
       (Website → cyan, Files → sand, etc.) */
    color: rgba(var(--card-accent-rgb), 0.9);
    background: rgba(var(--card-accent-rgb), 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 3.3rem;
    text-align: center;
}

/* ---- Brand peek variant (Branding card) — colour swatches + key/value rows ---- */
.mai-page .mai-brief__peek--brand {
    flex-direction: column;
    gap: 0.55rem;
}
.mai-page .mai-brief__swatches {
    display: inline-flex;
    gap: 0.3rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.mai-page .mai-brief__swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--swatch, var(--card-accent));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}
.mai-page .mai-brief__brand-row {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.72rem;
}
.mai-page .mai-brief__brand-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--card-accent-rgb), 0.85);
}
.mai-page .mai-brief__brand-val {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* Timeline variant (Past Activity) */
.mai-page .mai-brief__peek--timeline li {
    gap: 0.7rem;
    padding-left: 0.35rem;
    position: relative;
}
.mai-page .mai-brief__peek--timeline li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 70%;
    background: rgba(var(--card-accent-rgb), 0.5);
    transform: translateY(-50%);
    border-radius: 2px;
}
.mai-page .mai-brief__peek-time {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--card-accent);
    width: 2rem;
    flex-shrink: 0;
}

/* Goals variant */
.mai-page .mai-brief__peek--goals {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.mai-page .mai-brief__goal { display: flex; flex-direction: column; gap: 0.35rem; }
.mai-page .mai-brief__goal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.88);
}
.mai-page .mai-brief__goal-pct {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--card-accent);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.mai-page .mai-brief__goal-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}
.mai-page .mai-brief__goal-bar span {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    background: var(--card-accent);
    border-radius: inherit;
    transform-origin: left;
    animation: maiGoalFill 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes maiGoalFill {
    from { width: 0%; }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-brief__goal-bar span { animation: none; }
}

/* =====================================================================
   READ MORE / FULL PICTURE BLOCK
   ===================================================================== */
.mai-page .mai-brief__more {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2.2rem, 3.5vw, 3rem);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(18, 18, 22, 0.7);
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 30px 80px -30px rgba(0, 0, 0, 0.65),
        0 0 60px -20px rgba(var(--color-accent-rgb), 0.35);
}
.mai-page .mai-brief__more-accent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--mai-grad);
}
.mai-page .mai-brief__more-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 42rem;
}
.mai-page .mai-brief__more-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-brief__more-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
}
.mai-page .mai-brief__more-text {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}
.mai-page .mai-brief__more-cta {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem 0.85rem 1.4rem;
    background: var(--mai-grad);
    color: #fff;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
    box-shadow:
        0 16px 36px -14px rgba(var(--color-accent-rgb), 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    white-space: nowrap;
}
.mai-page .mai-brief__more-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 44px -14px rgba(var(--color-accent-rgb), 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.mai-page .mai-brief__more-cta-arrow {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-brief__more-cta-arrow svg { width: 14px; height: 14px; }
.mai-page .mai-brief__more-cta:hover .mai-brief__more-cta-arrow {
    transform: translateX(4px);
}

@media (max-width: 780px) {
    .mai-page .mai-brief__more {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .mai-page .mai-brief__more-cta { align-self: flex-start; }
}


/* =====================================================================
   CHAPTER 3: MAI FINDS THE OPPORTUNITY (.mai-dec)
   Intentionally different from Chapter 2:
     - Single centred column instead of a 5-column workspace
     - Stacked rows (a shortlist) rather than scattered chips
     - Elimination via fade/desaturate instead of connection lines
     - Shorter pin (3 viewport heights total) — decisive, not sprawling
   ===================================================================== */
.mai-page .mai-dec {
    position: relative;
    background: var(--color-dark);
    height: 320vh; /* 100vh panel pinned for 220vh of scroll */
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}
/* Soft divider glow where Chapter 2's Briefing ends and Chapter 3 begins */
.mai-page .mai-dec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(51, 207, 255, 0.4) 30%,
        rgba(var(--color-accent-rgb), 0.4) 70%,
        transparent 100%);
    opacity: 0.55;
}
.mai-page .mai-dec__scroll {
    position: relative;
    height: 100%;
}
.mai-page .mai-dec__pin {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Extra bottom padding so the winner's expanded context + footer CTA
       never clip against the viewport's bottom edge when stage 4 opens. */
    padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}
/* Subtle spotlight behind the whole scene — feels focused */
.mai-page .mai-dec__pin::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(var(--color-accent-rgb), 0.12) 0%,
        rgba(51, 207, 255, 0.06) 35%,
        transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-dec__inner {
    width: 100%;
    max-width: 52rem;
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 1.8vw, 1.45rem);
}

/* ---- Header ---- */
.mai-page .mai-dec__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}
.mai-page .mai-dec__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-dec__chapter { color: var(--color-accent); }
.mai-page .mai-dec__meta-sep {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.mai-page .mai-dec__pips {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.mai-page .mai-dec__pip {
    width: 20px;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mai-page .mai-dec__pip::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--mai-grad);
    border-radius: inherit;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-dec__pip.is-visited::after { width: 100%; opacity: 0.45; }
.mai-page .mai-dec__pip.is-active::after  { width: 100%; opacity: 1; }
.mai-page .mai-dec__continuation {
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
}
.mai-page .mai-dec__continuation em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.mai-page .mai-dec__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
    text-align: center;
}
.mai-page .mai-dec__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-dec__title-accent { color: var(--color-accent); }

.mai-page .mai-dec__sub {
    margin: 0;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    max-width: 38rem;
    text-align: center;
}

/* =====================================================================
   DECISION STAGE — 5 rows that get eliminated with scroll
   ===================================================================== */
.mai-page .mai-dec__stage {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    position: relative;
}

/* Row base — glass card with a subtle left accent bar */
.mai-page .mai-opt {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.68rem 1rem 0.68rem 0.85rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        rgba(22, 22, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease,
        border-color 0.6s ease,
        background 0.6s ease,
        box-shadow 0.6s ease;
}
/* Active rows have a tiny accent bar on the left */
.mai-page .mai-opt::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 2px;
    background: var(--mai-grad);
    opacity: 0.5;
    transition: opacity 0.4s ease;
    border-radius: 0 2px 2px 0;
}

.mai-page .mai-opt__rank {
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: color 0.4s ease;
}

.mai-page .mai-opt__body {
    min-width: 0;
}
.mai-page .mai-opt__title {
    margin: 0 0 0.2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.005em;
    transition: color 0.4s ease;
}
.mai-page .mai-opt__cat {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* Score pills */
.mai-page .mai-opt__tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}
.mai-page .mai-opt__tag {
    display: inline-flex;
    padding: 0.22rem 0.55rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}
.mai-page .mai-opt__tag--impact-high { background: rgba(52, 211, 153, 0.15); color: #34d399; border-color: rgba(52, 211, 153, 0.28); }
.mai-page .mai-opt__tag--impact-med  { background: rgba(253, 197, 51, 0.14); color: #FDC533; border-color: rgba(253, 197, 51, 0.28); }
.mai-page .mai-opt__tag--impact-low  { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); }
.mai-page .mai-opt__tag--effort-low  { background: rgba(52, 211, 153, 0.15); color: #34d399; border-color: rgba(52, 211, 153, 0.28); }
.mai-page .mai-opt__tag--effort-med  { background: rgba(253, 197, 51, 0.14); color: #FDC533; border-color: rgba(253, 197, 51, 0.28); }
.mai-page .mai-opt__tag--effort-high { background: rgba(243, 95, 69, 0.14); color: #ff7f5b; border-color: rgba(243, 95, 69, 0.28); }

/* Expected lift (right side) */
.mai-page .mai-opt__lift {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    min-width: 3.2rem;
    text-align: right;
}

/* Reason tag — appears in place of the lift on eliminated rows.
   Hidden by default; shown only when the row is eliminated. */
.mai-page .mai-opt__reason {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    margin-left: 0.35rem;
}
.mai-page .mai-opt__reason svg { width: 11px; height: 11px; opacity: 0.75; }

/* ============================================================
   ELIMINATION STATES
   The stage wrapper carries is-stage-1 / is-stage-2 / is-stage-3.
   Each row has data-drop-at="1|2|3" marking when it's eliminated.
   The winner has [data-winner] and gets its own treatment.
   ============================================================ */

/* Helper: an option becomes "eliminated" when its drop threshold <= stage. */
.mai-page .mai-dec__stage.is-stage-1 .mai-opt[data-drop-at="1"],
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="1"],
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="2"],
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="1"],
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="2"],
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="3"] {
    opacity: 0.22;
    filter: grayscale(0.55);
    transform: scale(0.985);
    border-color: rgba(255, 255, 255, 0.04);
    background: rgba(22, 22, 28, 0.35);
}
/* Eliminated rows lose the accent bar */
.mai-page .mai-dec__stage.is-stage-1 .mai-opt[data-drop-at="1"]::before,
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="1"]::before,
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="2"]::before,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="1"]::before,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="2"]::before,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="3"]::before {
    opacity: 0;
}
/* Eliminated rows: hide the lift, show the reason tag */
.mai-page .mai-dec__stage.is-stage-1 .mai-opt[data-drop-at="1"] .mai-opt__lift,
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="1"] .mai-opt__lift,
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="2"] .mai-opt__lift,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="1"] .mai-opt__lift,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="2"] .mai-opt__lift,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="3"] .mai-opt__lift {
    display: none;
}
.mai-page .mai-dec__stage.is-stage-1 .mai-opt[data-drop-at="1"] .mai-opt__reason,
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="1"] .mai-opt__reason,
.mai-page .mai-dec__stage.is-stage-2 .mai-opt[data-drop-at="2"] .mai-opt__reason,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="1"] .mai-opt__reason,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="2"] .mai-opt__reason,
.mai-page .mai-dec__stage.is-stage-3 .mai-opt[data-drop-at="3"] .mai-opt__reason {
    display: inline-flex;
}

/* ============================================================
   WINNER STATE (stage 3 only)
   The winner card grows, gains an accent gradient border,
   reveals a context drawer with supporting information.
   ============================================================ */
.mai-page .mai-opt__context {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.5s ease 0.1s,
        margin-top 0.7s ease;
    margin-top: 0;
}
.mai-page .mai-dec__stage.is-stage-3 .mai-opt--winner {
    border-color: rgba(var(--color-accent-rgb), 0.55);
    background:
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.1), rgba(255, 255, 255, 0.02)),
        rgba(22, 22, 28, 0.85);
    box-shadow:
        0 30px 80px -24px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.2) inset,
        0 0 60px -14px rgba(var(--color-accent-rgb), 0.45);
    transform: scale(1.015);
}
.mai-page .mai-dec__stage.is-stage-3 .mai-opt--winner::before {
    opacity: 1;
    width: 3px;
    background: var(--mai-grad);
}
.mai-page .mai-dec__stage.is-stage-3 .mai-opt--winner .mai-opt__rank {
    color: var(--color-accent);
}
.mai-page .mai-dec__stage.is-stage-3 .mai-opt--winner .mai-opt__lift {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-size: 1.4rem;
}
.mai-page .mai-dec__stage.is-stage-3 .mai-opt--winner .mai-opt__context {
    max-height: 260px;
    opacity: 1;
    margin-top: 0.55rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(var(--color-accent-rgb), 0.25);
}

.mai-page .mai-opt__context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}
.mai-page .mai-opt__winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #34d399;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mai-page .mai-opt__winner-badge svg { width: 11px; height: 11px; }
.mai-page .mai-opt__context-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.mai-page .mai-opt__why {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

.mai-page .mai-opt__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin: 0 0 0.55rem;
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
.mai-page .mai-opt__metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.mai-page .mai-opt__metric dt {
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}
.mai-page .mai-opt__metric dd {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}

.mai-page .mai-opt__next {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.65rem;
    background: rgba(var(--color-accent-rgb), 0.08);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    border-radius: 8px;
}
.mai-page .mai-opt__next-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: 0.18rem 0.5rem;
    background: rgba(var(--color-accent-rgb), 0.15);
    border-radius: 4px;
    flex-shrink: 0;
}
.mai-page .mai-opt__next-text {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

/* ============================================================
   FOOTER CTA: "How MAI Makes Decisions"
   ============================================================ */
.mai-page .mai-dec__footer {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
}
.mai-page .mai-dec__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem 0.65rem 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease;
}
.mai-page .mai-dec__cta-link:hover {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -14px rgba(var(--color-accent-rgb), 0.5);
}
.mai-page .mai-dec__cta-arrow {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-dec__cta-arrow svg { width: 12px; height: 12px; }
.mai-page .mai-dec__cta-link:hover .mai-dec__cta-arrow {
    transform: translateX(3px);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 780px) {
    .mai-page .mai-dec { height: 280vh; }
    .mai-page .mai-opt {
        grid-template-columns: 2rem 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.5rem 0.75rem;
    }
    .mai-page .mai-opt__rank {
        grid-row: 1 / 3;
        align-self: start;
        padding-top: 0.2rem;
    }
    .mai-page .mai-opt__body { grid-column: 2; }
    .mai-page .mai-opt__lift,
    .mai-page .mai-opt__reason { grid-column: 3; grid-row: 1; justify-self: end; }
    .mai-page .mai-opt__tags {
        grid-column: 2 / 4;
        grid-row: 2;
        justify-content: flex-start;
    }
    .mai-page .mai-opt__metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .mai-page .mai-dec__meta-sep:nth-of-type(2) { display: none; }
    .mai-page .mai-dec__continuation { display: none; }
}


/* =====================================================================
   CHAPTER 4: MAI BUILDS THE PLAN (.mai-build)
   Visual metaphor: blueprint assembly. A centred anchor with 6 plan
   modules that snap into a 3-column grid around it as scroll progresses.
   Corner brackets and a faint dotted grid backdrop give the scene an
   engineered, architectural feel.
   ===================================================================== */
.mai-page .mai-build {
    position: relative;
    background: var(--color-dark);
    height: 340vh; /* 100vh panel pinned for 240vh of scroll */
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}
/* Soft divider line at the top where Chapter 3 ends */
.mai-page .mai-build::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.4) 30%,
        rgba(51, 207, 255, 0.4) 70%,
        transparent 100%);
    opacity: 0.55;
}
.mai-page .mai-build__scroll {
    position: relative;
    height: 100%;
}
.mai-page .mai-build__pin {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5.5rem);
}
/* Soft spotlight behind the board */
.mai-page .mai-build__pin::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 80%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(var(--color-accent-rgb), 0.1) 0%,
        rgba(51, 207, 255, 0.06) 40%,
        transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-build__inner {
    width: 100%;
    max-width: 72rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* ---- Header (centered, shares rhythm with other chapters) ---- */
.mai-page .mai-build__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}
.mai-page .mai-build__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-build__chapter { color: var(--color-accent); }
.mai-page .mai-build__meta-sep {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.mai-page .mai-build__pips {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}
.mai-page .mai-build__pip {
    width: 20px;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mai-page .mai-build__pip::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--mai-grad);
    border-radius: inherit;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-build__pip.is-visited::after { width: 100%; opacity: 0.45; }
.mai-page .mai-build__pip.is-active::after  { width: 100%; opacity: 1; }
.mai-page .mai-build__status {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
    transition: color 0.3s ease;
}
.mai-page .mai-build__status.is-ready { color: #34d399; }

.mai-page .mai-build__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
    text-align: center;
}
.mai-page .mai-build__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-build__title-accent { color: var(--color-accent); }
.mai-page .mai-build__sub {
    margin: 0;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    max-width: 42rem;
    text-align: center;
}

/* =====================================================================
   BOARD — the 3-column grid with anchor + 6 modules
   ===================================================================== */
.mai-page .mai-build__board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: clamp(0.65rem, 1.3vw, 1rem);
    width: 100%;
    isolation: isolate;
}

/* Faint dotted grid backdrop — reads as "workspace paper" */
.mai-page .mai-build__grid {
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 16px;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
    background-size: 18px 18px;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.mai-page .mai-build__board.is-stage-1 .mai-build__grid,
.mai-page .mai-build__board.is-stage-2 .mai-build__grid,
.mai-page .mai-build__board.is-stage-3 .mai-build__grid {
    opacity: 0.7;
}

/* ---- Module base ---- */
.mai-page .mai-mod {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem 0.9rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005)),
        rgba(22, 22, 28, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Pre-snap state: hidden, slightly offset, scaled down */
    opacity: 0;
    transform: translateY(var(--from-y, 0)) scale(0.95);
    transition:
        opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}
.mai-page .mai-mod[data-pos="tl"],
.mai-page .mai-mod[data-pos="tc"],
.mai-page .mai-mod[data-pos="tr"] { --from-y: -32px; }
.mai-page .mai-mod[data-pos="bl"],
.mai-page .mai-mod[data-pos="bc"],
.mai-page .mai-mod[data-pos="br"] { --from-y: 32px; }

/* Grid placement */
.mai-page .mai-mod[data-pos="tl"] { grid-column: 1; grid-row: 1; }
.mai-page .mai-mod[data-pos="tc"] { grid-column: 2; grid-row: 1; }
.mai-page .mai-mod[data-pos="tr"] { grid-column: 3; grid-row: 1; }
.mai-page .mai-anchor             { grid-column: 1 / -1; grid-row: 2; }
.mai-page .mai-mod[data-pos="bl"] { grid-column: 1; grid-row: 3; }
.mai-page .mai-mod[data-pos="bc"] { grid-column: 2; grid-row: 3; }
.mai-page .mai-mod[data-pos="br"] { grid-column: 3; grid-row: 3; }

/* Snap-in states driven by data-snap-at vs is-stage-N */
.mai-page .mai-build__board.is-stage-1 .mai-mod[data-snap-at="1"],
.mai-page .mai-build__board.is-stage-2 .mai-mod[data-snap-at="1"],
.mai-page .mai-build__board.is-stage-2 .mai-mod[data-snap-at="2"],
.mai-page .mai-build__board.is-stage-3 .mai-mod[data-snap-at="1"],
.mai-page .mai-build__board.is-stage-3 .mai-mod[data-snap-at="2"],
.mai-page .mai-build__board.is-stage-3 .mai-mod[data-snap-at="3"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: rgba(var(--color-accent-rgb), 0.28);
    box-shadow:
        0 18px 40px -20px rgba(0, 0, 0, 0.5),
        0 0 30px -16px rgba(var(--color-accent-rgb), 0.45);
}
/* Slight stagger within a stage so modules appear "one by one" */
.mai-page .mai-mod[data-pos="tc"] { transition-delay: 0.12s; }
.mai-page .mai-mod[data-pos="tr"] { transition-delay: 0.24s; }
.mai-page .mai-mod[data-pos="br"] { transition-delay: 0.15s; }

/* Corner brackets (architectural touch) */
.mai-page .mai-mod__corner {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease 0.35s;
}
.mai-page .mai-mod__corner--tl {
    top: -1px; left: -1px;
    border-top: 1.5px solid var(--color-accent);
    border-left: 1.5px solid var(--color-accent);
}
.mai-page .mai-mod__corner--br {
    bottom: -1px; right: -1px;
    border-bottom: 1.5px solid var(--color-accent);
    border-right: 1.5px solid var(--color-accent);
}
.mai-page .mai-build__board.is-stage-1 .mai-mod[data-snap-at="1"] .mai-mod__corner,
.mai-page .mai-build__board.is-stage-2 .mai-mod[data-snap-at="1"] .mai-mod__corner,
.mai-page .mai-build__board.is-stage-2 .mai-mod[data-snap-at="2"] .mai-mod__corner,
.mai-page .mai-build__board.is-stage-3 .mai-mod[data-snap-at="1"] .mai-mod__corner,
.mai-page .mai-build__board.is-stage-3 .mai-mod[data-snap-at="2"] .mai-mod__corner,
.mai-page .mai-build__board.is-stage-3 .mai-mod[data-snap-at="3"] .mai-mod__corner {
    opacity: 0.8;
}

/* Module internals */
.mai-page .mai-mod__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
}
.mai-page .mai-mod__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(var(--color-accent-rgb), 0.12);
    color: var(--color-accent);
    flex-shrink: 0;
}
.mai-page .mai-mod__icon svg { width: 12px; height: 12px; }
.mai-page .mai-mod__eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    flex: 1;
}
.mai-page .mai-mod__chip {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.56rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.14rem 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    letter-spacing: 0.02em;
}
.mai-page .mai-mod__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.mai-page .mai-mod__detail {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
.mai-page .mai-mod__foot {
    margin-top: 0.15rem;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}

/* =====================================================================
   ANCHOR CARD (middle row)
   ===================================================================== */
.mai-page .mai-anchor {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: 1.1rem 1.4rem 1.2rem;
    background:
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.12), rgba(255, 255, 255, 0.02)),
        rgba(22, 22, 28, 0.88);
    border: 1px solid rgba(var(--color-accent-rgb), 0.42);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 40px 80px -30px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.18) inset,
        0 0 60px -18px rgba(var(--color-accent-rgb), 0.45);
}
/* Accent gradient rail on the left */
.mai-page .mai-anchor::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 3px;
    background: var(--mai-grad);
    border-radius: 0 3px 3px 0;
}
/* Full corner brackets on the anchor — reads as "this is the anchor" */
.mai-page .mai-anchor__corner {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    opacity: 0.85;
}
.mai-page .mai-anchor__corner--tl { top: -1px; left: -1px;
    border-top: 1.5px solid var(--color-accent); border-left: 1.5px solid var(--color-accent); }
.mai-page .mai-anchor__corner--tr { top: -1px; right: -1px;
    border-top: 1.5px solid var(--color-accent); border-right: 1.5px solid var(--color-accent); }
.mai-page .mai-anchor__corner--bl { bottom: -1px; left: -1px;
    border-bottom: 1.5px solid var(--color-accent); border-left: 1.5px solid var(--color-accent); }
.mai-page .mai-anchor__corner--br { bottom: -1px; right: -1px;
    border-bottom: 1.5px solid var(--color-accent); border-right: 1.5px solid var(--color-accent); }

.mai-page .mai-anchor__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.mai-page .mai-anchor__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-anchor__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.22);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-anchor__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.mai-page .mai-anchor__detail {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
}

.mai-page .mai-anchor__metrics {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 1.4rem);
    padding-left: clamp(0.75rem, 1.5vw, 1.4rem);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.mai-page .mai-anchor__metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}
.mai-page .mai-anchor__metric-num {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.mai-page .mai-anchor__metric-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   CONNECTOR LINES — appear at stage 4, tying every module to the anchor
   ===================================================================== */
.mai-page .mai-build__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
.mai-page .mai-build__line {
    stroke: var(--color-accent);
    stroke-width: 1;
    stroke-dasharray: 2 2.5;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.45));
}
/* Each line becomes visible the moment its target's stage has arrived.
   data-serves="1" → line active in stage 1+; "2" → stage 2+; "3" → stage 3. */
.mai-page .mai-build__board.is-stage-1 .mai-build__line[data-serves="1"],
.mai-page .mai-build__board.is-stage-2 .mai-build__line[data-serves="1"],
.mai-page .mai-build__board.is-stage-2 .mai-build__line[data-serves="2"],
.mai-page .mai-build__board.is-stage-3 .mai-build__line[data-serves="1"],
.mai-page .mai-build__board.is-stage-3 .mai-build__line[data-serves="2"],
.mai-page .mai-build__board.is-stage-3 .mai-build__line[data-serves="3"] {
    opacity: 0.55;
}

/* =====================================================================
   "PLAN READY" badge — stage 4 arrival
   ===================================================================== */
.mai-page .mai-build__ready {
    position: absolute;
    top: -0.9rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: #0f1013;
    border: 1px solid rgba(52, 211, 153, 0.45);
    border-radius: 999px;
    color: #34d399;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.5s ease 0.2s,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
    box-shadow: 0 12px 28px -10px rgba(52, 211, 153, 0.35);
    z-index: 3;
}
.mai-page .mai-build__ready svg { width: 11px; height: 11px; }
.mai-page .mai-build__board.is-stage-3 .mai-build__ready {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================================
   FOOTER CTA
   ===================================================================== */
.mai-page .mai-build__footer {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}
.mai-page .mai-build__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem 0.8rem 1.4rem;
    background: var(--mai-grad);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
    box-shadow:
        0 16px 36px -14px rgba(var(--color-accent-rgb), 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.mai-page .mai-build__cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 44px -14px rgba(var(--color-accent-rgb), 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.mai-page .mai-build__cta-arrow {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-build__cta-arrow svg { width: 13px; height: 13px; }
.mai-page .mai-build__cta:hover .mai-build__cta-arrow {
    transform: translateX(4px);
}

/* Reduced motion: skip the assembly, just show the end state. */
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-mod,
    .mai-page .mai-mod__corner,
    .mai-page .mai-build__line,
    .mai-page .mai-build__ready,
    .mai-page .mai-build__grid {
        transition: none !important;
    }
    .mai-page .mai-build__board .mai-mod {
        opacity: 1;
        transform: none;
    }
    .mai-page .mai-build__board .mai-mod__corner,
    .mai-page .mai-build__board .mai-build__line {
        opacity: 0.65;
    }
    .mai-page .mai-build__board .mai-build__grid { opacity: 0.7; }
    .mai-page .mai-build__board .mai-build__ready {
        opacity: 1; transform: none;
    }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .mai-page .mai-build { height: 360vh; }
    .mai-page .mai-build__board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Re-flow: anchor at top, then 2x3 modules */
    .mai-page .mai-anchor             { grid-column: 1 / -1; grid-row: 1; }
    .mai-page .mai-mod[data-pos="bl"] { grid-column: 1; grid-row: 2; }
    .mai-page .mai-mod[data-pos="tl"] { grid-column: 2; grid-row: 2; }
    .mai-page .mai-mod[data-pos="tc"] { grid-column: 1; grid-row: 3; }
    .mai-page .mai-mod[data-pos="tr"] { grid-column: 2; grid-row: 3; }
    .mai-page .mai-mod[data-pos="bc"] { grid-column: 1; grid-row: 4; }
    .mai-page .mai-mod[data-pos="br"] { grid-column: 2; grid-row: 4; }
    /* Hide connector lines on small screens (the positions no longer match) */
    .mai-page .mai-build__lines { display: none; }
    .mai-page .mai-anchor {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
    .mai-page .mai-anchor__metrics {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.85rem;
    }
}
@media (max-width: 520px) {
    .mai-page .mai-build__board {
        grid-template-columns: 1fr;
    }
    .mai-page .mai-anchor,
    .mai-page .mai-mod[data-pos="tl"],
    .mai-page .mai-mod[data-pos="tc"],
    .mai-page .mai-mod[data-pos="tr"],
    .mai-page .mai-mod[data-pos="bl"],
    .mai-page .mai-mod[data-pos="bc"],
    .mai-page .mai-mod[data-pos="br"] {
        grid-column: 1;
    }
    .mai-page .mai-mod[data-pos="tl"] { grid-row: 2; }
    .mai-page .mai-mod[data-pos="tc"] { grid-row: 3; }
    .mai-page .mai-mod[data-pos="tr"] { grid-row: 4; }
    .mai-page .mai-mod[data-pos="bl"] { grid-row: 5; }
    .mai-page .mai-mod[data-pos="bc"] { grid-row: 6; }
    .mai-page .mai-mod[data-pos="br"] { grid-row: 7; }
}


/* =====================================================================
   MAI SECTION 2: WAYS TO COMMUNICATE (.mai-comms)
   A three-panel stage (email  →  MAI  →  output) that auto-cycles
   through four example prompts. Each cycle plays a scripted sequence:
     compose  →  send  →  packet in  →  MAI processes  →  packet out
     →  output appears  →  hold  →  next prompt.
   ===================================================================== */
.mai-page .mai-comms {
    position: relative;
    background: var(--color-dark);
    padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem) clamp(5rem, 8vw, 7.5rem);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
/* Ambient accent glow behind the stage */
.mai-page .mai-comms::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 80%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(var(--color-accent-rgb), 0.1) 0%,
        rgba(51, 207, 255, 0.06) 40%,
        transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}
/* Divider glow at the top of the section */
.mai-page .mai-comms::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.4) 30%,
        rgba(51, 207, 255, 0.4) 70%,
        transparent 100%);
    opacity: 0.5;
}
.mai-page .mai-comms__inner {
    max-width: 84rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ---- Header ---- */
.mai-page .mai-comms__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    max-width: 48rem;
    margin: 0 auto;
}
.mai-page .mai-comms__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.3rem;
}
.mai-page .mai-comms__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-comms__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
}
.mai-page .mai-comms__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-comms__sub {
    margin: 0;
    font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 40rem;
}

/* =====================================================================
   STAGE — 3 panels separated by flow connectors
   ===================================================================== */
.mai-page .mai-comms__stage {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.6fr) auto minmax(0, 0.95fr);
    align-items: stretch;
    gap: 0;
    min-height: 22rem;
}

/* ---- Panels (email + output) ---- */
.mai-page .mai-comms__panel {
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(18, 18, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 30px 70px -24px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* ---- Medium container: stacks email + text panels in the same grid
   cell so switching between them can cross-fade in place. ---- */
.mai-page .mai-comms__medium {
    position: relative;
    display: grid;
    min-width: 0;
}
.mai-page .mai-comms__medium > .mai-comms__panel {
    grid-column: 1;
    grid-row: 1;
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hide the inactive medium — fade out, then skip pointer events. */
.mai-page .mai-comms__stage[data-medium="email"] .mai-comms__panel--text,
.mai-page .mai-comms__stage[data-medium="text"]  .mai-comms__panel--email {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
}
.mai-page .mai-comms__stage[data-medium="email"] .mai-comms__panel--email,
.mai-page .mai-comms__stage[data-medium="text"]  .mai-comms__panel--text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---- Email panel — dark theme ---- */
.mai-page .mai-comms__panel--email {
    overflow: hidden;
}
.mai-page .mai-comms__email-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}
.mai-page .mai-comms__email-chrome {
    display: inline-flex;
    gap: 0.3rem;
}
.mai-page .mai-comms__email-chrome span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.mai-page .mai-comms__email-chrome span:nth-child(1) { background: #ff5f57; }
.mai-page .mai-comms__email-chrome span:nth-child(2) { background: #febb2e; }
.mai-page .mai-comms__email-chrome span:nth-child(3) { background: #28c941; }
.mai-page .mai-comms__email-chrome-title {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}
.mai-page .mai-comms__email-row {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.78rem;
}
.mai-page .mai-comms__email-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.mai-page .mai-comms__email-to {
    color: rgba(255, 255, 255, 0.72);
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.72rem;
}
.mai-page .mai-comms__email-subject {
    color: #fff;
    font-weight: 600;
    transition: opacity 0.35s ease;
}
.mai-page .mai-comms__email-body {
    padding: 0.95rem 1rem;
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    min-height: 5.5rem;
    background: rgba(0, 0, 0, 0.18);
}
.mai-page .mai-comms__email-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    transition: opacity 0.25s ease;
    /* Allow the caret to sit inline right after the last character */
    display: inline;
    word-break: break-word;
}
/* Blinking caret — inlined as ::after of the text so it always sits
   exactly on the text baseline, at the end of whatever has been typed. */
.mai-page .mai-comms__email-text::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: var(--color-accent);
    vertical-align: -0.15em;
    box-shadow: 0 0 4px rgba(var(--color-accent-rgb), 0.45);
    animation: maiCommsCaret 1s steps(2) infinite;
}
/* The separate caret span is superseded by the ::after approach. */
.mai-page .mai-comms__email-caret { display: none; }
@keyframes maiCommsCaret { 50% { opacity: 0; } }
.mai-page .mai-comms__email-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.55rem 0.9rem 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.mai-page .mai-comms__email-meta {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.45);
    transition: opacity 0.25s ease;
}
.mai-page .mai-comms__email-send {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem 0.35rem 0.65rem;
    background: rgba(var(--color-accent-rgb), 0.15);
    border: 1px solid rgba(var(--color-accent-rgb), 0.35);
    color: var(--color-accent);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.mai-page .mai-comms__email-send svg { width: 12px; height: 12px; }
/* "Sending" / "Sent" pulse — toggled by JS */
.mai-page .mai-comms__email-send.is-sending {
    background: var(--mai-grad);
    color: #fff;
    border-color: transparent;
    transform: scale(0.95);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.2);
}

/* ---- Text / SMS panel (dark messaging UI, phone style) ---- */
.mai-page .mai-comms__panel--text {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(12, 12, 16, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    min-height: 0;
    color: #fff;
}
/* Status bar (time + signal/wifi/battery) */
.mai-page .mai-comms__text-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1.1rem 0.3rem;
    font-family: 'SF Pro Display', -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}
.mai-page .mai-comms__text-indicators {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
}
.mai-page .mai-comms__text-indicators svg { height: 10px; width: auto; }
.mai-page .mai-comms__text-indicators svg:nth-child(1) { height: 10px; }
.mai-page .mai-comms__text-indicators svg:nth-child(2) { height: 10px; }
.mai-page .mai-comms__text-indicators svg:nth-child(3) { height: 10px; }

/* Contact header (avatar, name, info) */
.mai-page .mai-comms__text-contact {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mai-page .mai-comms__text-back {
    color: rgba(0, 122, 255, 0.95); /* iOS blue */
}
.mai-page .mai-comms__text-back svg { width: 18px; height: 18px; }
.mai-page .mai-comms__text-avatar {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
        0 0 14px -4px rgba(var(--color-accent-rgb), 0.5);
    flex-shrink: 0;
}
.mai-page .mai-comms__text-avatar svg { width: 18px; height: 18px; }
.mai-page .mai-comms__text-contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
    justify-self: start;
}
.mai-page .mai-comms__text-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
.mai-page .mai-comms__text-name b { font-weight: 800; }
.mai-page .mai-comms__text-name sup { font-size: 0.45em; vertical-align: super; margin-left: 0.1em; opacity: 0.85; }
.mai-page .mai-comms__text-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
    margin-top: 0.08rem;
}
.mai-page .mai-comms__text-info {
    color: rgba(0, 122, 255, 0.85);
}
.mai-page .mai-comms__text-info svg { width: 18px; height: 18px; }

/* Body (message thread area) */
.mai-page .mai-comms__text-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.1rem 0.9rem 0.95rem;
    background: rgba(0, 0, 0, 0.25);
    min-height: 8rem;
}
.mai-page .mai-comms__text-bubble-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* outgoing, right-aligned */
    gap: 0.22rem;
    max-width: 82%;
    margin-left: auto;
}
.mai-page .mai-comms__text-bubble {
    padding: 0.55rem 0.85rem 0.6rem;
    background: var(--mai-grad);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
        0 10px 22px -10px rgba(var(--color-accent-rgb), 0.55);
    font-size: 0.88rem;
    line-height: 1.4;
    max-width: 100%;
}
.mai-page .mai-comms__text-message {
    margin: 0;
    color: #fff;
    transition: opacity 0.25s ease;
    display: inline;
    word-break: break-word;
}
/* Caret for the text bubble — white on the accent background. */
.mai-page .mai-comms__text-message::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: #fff;
    vertical-align: -0.15em;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.45);
    animation: maiCommsCaret 1s steps(2) infinite;
}
.mai-page .mai-comms__text-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    transition: opacity 0.3s ease;
}

/* Input bar at the bottom (fake) */
.mai-page .mai-comms__text-input {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}
.mai-page .mai-comms__text-input-plus {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}
.mai-page .mai-comms__text-input-plus svg { width: 12px; height: 12px; }
.mai-page .mai-comms__text-input-field {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}
.mai-page .mai-comms__text-input-placeholder {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
}
.mai-page .mai-comms__text-send {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.15);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    color: var(--color-accent);
    flex-shrink: 0;
    cursor: pointer;
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}
.mai-page .mai-comms__text-send svg { width: 13px; height: 13px; }
.mai-page .mai-comms__text-send.is-sending {
    background: var(--mai-grad);
    color: #fff;
    border-color: transparent;
    transform: scale(0.92);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.22);
}

/* ---- Flow connectors (between panels) ---- */
.mai-page .mai-comms__flow {
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(3rem, 8vw, 6rem);
    padding: 0 0.4rem;
    overflow: visible;
}
.mai-page .mai-comms__flow-line {
    flex: 1;
    height: 2px;
    background-image: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.5) 0%,
        rgba(var(--color-accent-rgb), 0.5) 50%,
        transparent 50%,
        transparent 100%);
    background-size: 10px 2px;
    background-position: 0 center;
    background-repeat: repeat-x;
    opacity: 0.35;
    transition: opacity 0.4s ease;
}
.mai-page .mai-comms__flow-packet {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) scale(0.8);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mai-page .mai-comms__flow-packet svg { width: 11px; height: 11px; }
/* "Travelling" state — packet slides from start to end of the line */
.mai-page .mai-comms__flow.is-flowing .mai-comms__flow-line {
    opacity: 0.95;
    animation: maiCommsLineFlow 1s linear;
}
.mai-page .mai-comms__flow.is-flowing .mai-comms__flow-packet {
    opacity: 1;
    animation: maiCommsPacket 1s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes maiCommsLineFlow {
    from { background-position: -20px center; }
    to   { background-position: 40px center; }
}
@keyframes maiCommsPacket {
    0%   { left: 0;    transform: translate(-50%, -50%) scale(0.65); opacity: 0; }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { left: 100%; transform: translate(-50%, -50%) scale(0.65); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-comms__flow.is-flowing .mai-comms__flow-line { animation: none; opacity: 0.7; }
    .mai-page .mai-comms__flow.is-flowing .mai-comms__flow-packet { opacity: 0; animation: none; }
    .mai-page .mai-comms__email-caret { animation: none; }
}

/* ---- Centre relay: MAI (plan) → Team → MAI (execute) ---- */
.mai-page .mai-comms__relay {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: clamp(0.25rem, 1vw, 0.75rem);
    padding: 0.5rem clamp(0.5rem, 1vw, 1rem);
    min-width: 0;
}

/* Shared node style (applies to both MAI nodes and the team node) */
.mai-page .mai-comms__node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 0.35rem 0.75rem;
    min-width: 0;
}

/* Node name with secondary role label below */
.mai-page .mai-comms__node-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
    text-align: center;
    line-height: 1.1;
}
.mai-page .mai-comms__node-name b { font-weight: 800; }
.mai-page .mai-comms__node-brand {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
}
.mai-page .mai-comms__node-brand sup {
    font-size: 0.55em;
    vertical-align: super;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 0.08em;
    line-height: 1;
}
.mai-page .mai-comms__node-role {
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* Internal relay arrows */
.mai-page .mai-comms__relay-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(1.5rem, 3vw, 2.5rem);
    padding: 0 0.15rem;
    align-self: center;
    /* Lift the arrow so it sits level with the glyph row, not the baseline */
    margin-top: -1.6rem;
}
.mai-page .mai-comms__relay-line {
    position: relative;
    flex: 1;
    height: 2px;
    background-image: linear-gradient(90deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.22) 48%,
        transparent 48%,
        transparent 52%,
        rgba(255, 255, 255, 0.22) 52%,
        rgba(255, 255, 255, 0.22) 100%);
    background-size: 10px 2px;
    border-radius: 2px;
    overflow: visible;
}
.mai-page .mai-comms__relay-packet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    box-shadow: 0 0 14px rgba(var(--color-accent-rgb), 0.7);
    pointer-events: none;
}
.mai-page .mai-comms__relay-packet svg {
    width: 9px;
    height: 9px;
}
.mai-page .mai-comms__relay-link.is-flowing .mai-comms__relay-packet {
    animation: maiCommsRelayPacket 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Brighten the line when it's carrying a packet */
.mai-page .mai-comms__relay-link.is-flowing .mai-comms__relay-line {
    background-image: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.7) 0%,
        rgba(var(--color-accent-rgb), 0.7) 48%,
        transparent 48%,
        transparent 52%,
        rgba(var(--color-accent-rgb), 0.7) 52%,
        rgba(var(--color-accent-rgb), 0.7) 100%);
    background-size: 10px 2px;
    transition: background-image 0.3s ease;
}
@keyframes maiCommsRelayPacket {
    0%   { left: 0;    opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-comms__relay-packet { animation: none !important; }
}

/* ---- Team node (center of the relay) ---- */
.mai-page .mai-comms__node--team {
    gap: 0.45rem;
}
.mai-page .mai-comms__team-ring {
    position: absolute;
    top: 0.65rem;
    left: 50%;
    width: 108px;
    height: 108px;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.mai-page .mai-comms__node--team.is-active .mai-comms__team-ring {
    opacity: 1;
    animation: maiTeamRingRotate 12s linear infinite;
}
@keyframes maiTeamRingRotate {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}
.mai-page .mai-comms__team-faces {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1;
    padding-left: 0.6rem;
    /* Matches the vertical rhythm of the MAI glyph so the row lines up */
    margin-bottom: 0.45rem;
}
.mai-page .mai-comms__team-face {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: #1b1b1f;
    border: 2px solid var(--color-dark);
    box-shadow: 0 0 0 1.5px rgba(var(--role-rgb), 0.6);
    margin-left: -0.6rem;
    flex-shrink: 0;
    transform: scale(0.94);
    filter: grayscale(0.55) brightness(0.75);
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.45s ease,
        box-shadow 0.45s ease,
        z-index 0s linear 0.45s;
}
.mai-page .mai-comms__team-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Active team node: all faces crisp up */
.mai-page .mai-comms__node--team.is-active .mai-comms__team-face {
    filter: grayscale(0) brightness(1);
}
/* The specific reviewer pops forward */
.mai-page .mai-comms__node--team.is-active .mai-comms__team-face.is-reviewer {
    transform: scale(1.15) translateY(-2px);
    box-shadow:
        0 0 0 2px rgba(var(--role-rgb), 1),
        0 6px 18px rgba(var(--role-rgb), 0.45);
    z-index: 2;
    filter: grayscale(0) brightness(1.05);
    transition-delay: 0s;
}

/* Team status pill (mirrors .mai-comms__mai-status active state but in
   the reviewer's role colour once the review phase fires) */
.mai-page .mai-comms__node--team .mai-comms__mai-status {
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}
.mai-page .mai-comms__node--team.is-active .mai-comms__mai-status {
    color: var(--role, #fff);
    background: rgba(var(--role-rgb, 255, 255, 255), 0.14);
    border-color: rgba(var(--role-rgb, 255, 255, 255), 0.45);
}
.mai-page .mai-comms__node--team.is-done .mai-comms__mai-status {
    color: #34d399;
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.35);
}

/* MAI centre nodes — keep legacy class for existing ring / glyph rules */
.mai-page .mai-comms__mai {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 0.35rem 0.75rem;
    min-width: 0;
}
.mai-page .mai-comms__mai-rings {
    position: absolute;
    top: 0.85rem;
    left: 50%;
    width: 72px;
    height: 72px;
    transform: translateX(-50%);
    pointer-events: none;
}
.mai-page .mai-comms__mai-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-accent-rgb), 0.35);
    opacity: 0;
}
.mai-page .mai-comms__mai.is-active .mai-comms__mai-ring {
    animation: maiCommsRing 1.6s ease-out infinite;
}
.mai-page .mai-comms__mai.is-active .mai-comms__mai-ring:nth-child(2) { animation-delay: 0.4s; }
.mai-page .mai-comms__mai.is-active .mai-comms__mai-ring:nth-child(3) { animation-delay: 0.8s; }
@keyframes maiCommsRing {
    0%   { transform: scale(0.4); opacity: 0.6; }
    80%  { opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-comms__mai-ring { animation: none !important; }
}

.mai-page .mai-comms__mai-glyph {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.35),
        0 0 24px -4px rgba(var(--color-accent-rgb), 0.55);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
    z-index: 1;
}
.mai-page .mai-comms__mai-glyph svg { width: 24px; height: 24px; }
.mai-page .mai-comms__mai.is-active .mai-comms__mai-glyph {
    transform: scale(1.08);
    box-shadow:
        0 0 0 1px rgba(var(--color-accent-rgb), 0.55),
        0 0 40px -4px rgba(var(--color-accent-rgb), 0.75);
}
.mai-page .mai-comms__mai-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
.mai-page .mai-comms__mai-name b { font-weight: 800; }
.mai-page .mai-comms__mai-status {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.22rem 0.55rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}
.mai-page .mai-comms__mai.is-active .mai-comms__mai-status {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.14);
    border-color: rgba(var(--color-accent-rgb), 0.35);
}
.mai-page .mai-comms__mai.is-done .mai-comms__mai-status {
    color: #34d399;
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.35);
}

/* ---- Output panel ---- */
.mai-page .mai-comms__panel--output {
    padding: 1rem 1.1rem 1.1rem;
    gap: 0.55rem;
    opacity: 0.35;
    filter: saturate(0.4);
    transition: opacity 0.5s ease, filter 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.mai-page .mai-comms__panel--output.is-revealed {
    opacity: 1;
    filter: none;
    border-color: rgba(var(--color-accent-rgb), 0.3);
    box-shadow:
        0 30px 70px -24px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.2) inset,
        0 0 40px -12px rgba(var(--color-accent-rgb), 0.45);
}
.mai-page .mai-comms__output-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mai-page .mai-comms__output-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
    flex-shrink: 0;
    transition: background 0.4s ease, color 0.4s ease;
}
.mai-page .mai-comms__output-icon svg { width: 14px; height: 14px; }
.mai-page .mai-comms__output-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    flex: 1;
    transition: opacity 0.35s ease;
}
.mai-page .mai-comms__output-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.32);
    color: #34d399;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}
.mai-page .mai-comms__panel--output.is-revealed .mai-comms__output-badge { opacity: 1; }
.mai-page .mai-comms__output-badge svg { width: 10px; height: 10px; }
.mai-page .mai-comms__output-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: opacity 0.35s ease;
}
.mai-page .mai-comms__output-stat {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.mai-page .mai-comms__output-sub {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}
.mai-page .mai-comms__output-foot {
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* =====================================================================
   MOBILE PROMPT LINKS — simple text links shown above the stage on mobile
   ===================================================================== */
.mai-page .mai-comms__m-links {
    display: none;
}

/* =====================================================================
   PROMPT SELECTOR
   ===================================================================== */
.mai-page .mai-comms__prompts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.55rem;
}
.mai-page .mai-comms__prompt {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease;
    position: relative;
}
.mai-page .mai-comms__prompt-num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(var(--color-accent-rgb), 0.75);
    padding: 0.18rem 0.4rem;
    background: rgba(var(--color-accent-rgb), 0.12);
    border-radius: 4px;
    flex-shrink: 0;
}
.mai-page .mai-comms__prompt-text { min-width: 0; }
.mai-page .mai-comms__prompt:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--color-accent-rgb), 0.35);
    transform: translateY(-1px);
}
.mai-page .mai-comms__prompt.is-active {
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.55);
    color: #fff;
    box-shadow: 0 10px 24px -14px rgba(var(--color-accent-rgb), 0.5);
}

/* =====================================================================
   FOOTER CTA
   ===================================================================== */
.mai-page .mai-comms__footer {
    display: flex;
    justify-content: center;
}
.mai-page .mai-comms__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem 0.7rem 1.3rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease;
}
.mai-page .mai-comms__cta:hover {
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.5);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -14px rgba(var(--color-accent-rgb), 0.5);
}
.mai-page .mai-comms__cta-arrow {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-comms__cta-arrow svg { width: 13px; height: 13px; }
.mai-page .mai-comms__cta:hover .mai-comms__cta-arrow {
    transform: translateX(3px);
}

/* =====================================================================
   Responsive: stack the three panels vertically on narrow viewports,
   with the flow connectors rotating to point downward.
   ===================================================================== */
@media (max-width: 960px) {
    .mai-page .mai-comms__stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 0.85rem;
    }
    .mai-page .mai-comms__flow {
        width: 100%;
        height: 2.5rem;
        justify-content: center;
    }
    .mai-page .mai-comms__flow-line {
        width: 2px;
        height: 100%;
        background-image: linear-gradient(180deg,
            rgba(var(--color-accent-rgb), 0.5) 0%,
            rgba(var(--color-accent-rgb), 0.5) 50%,
            transparent 50%, transparent 100%);
        background-size: 2px 10px;
        flex: 0 0 auto;
    }
    .mai-page .mai-comms__flow-packet {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
    }
    .mai-page .mai-comms__flow.is-flowing .mai-comms__flow-line {
        animation: maiCommsLineFlowVert 1s linear;
    }
    @keyframes maiCommsLineFlowVert {
        from { background-position: center -20px; }
        to   { background-position: center 40px; }
    }
    .mai-page .mai-comms__flow.is-flowing .mai-comms__flow-packet {
        animation: maiCommsPacketVert 1s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    }
    @keyframes maiCommsPacketVert {
        0%   { top: 0;    transform: translate(-50%, -50%) scale(0.65); opacity: 0; }
        15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        100% { top: 100%; transform: translate(-50%, -50%) scale(0.65); opacity: 0; }
    }
    .mai-page .mai-comms__mai { min-height: 9rem; }

    /* Relay: collapse to vertical so plan / team / execute stack like
       the rest of the stage on narrow viewports. */
    .mai-page .mai-comms__relay {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 0.6rem;
        padding: 0.25rem 0;
    }
    .mai-page .mai-comms__relay-link {
        margin-top: 0;
        width: 100%;
        height: 1.75rem;
        min-width: 0;
    }
    .mai-page .mai-comms__relay-line {
        height: 100%;
        width: 2px;
        background-image: linear-gradient(180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.22) 48%,
            transparent 48%,
            transparent 52%,
            rgba(255, 255, 255, 0.22) 52%,
            rgba(255, 255, 255, 0.22) 100%);
        background-size: 2px 10px;
        flex: 0 0 auto;
    }
    .mai-page .mai-comms__relay-packet {
        top: 0;
        left: 50%;
    }
    .mai-page .mai-comms__relay-link.is-flowing .mai-comms__relay-line {
        background-image: linear-gradient(180deg,
            rgba(var(--color-accent-rgb), 0.7) 0%,
            rgba(var(--color-accent-rgb), 0.7) 48%,
            transparent 48%,
            transparent 52%,
            rgba(var(--color-accent-rgb), 0.7) 52%,
            rgba(var(--color-accent-rgb), 0.7) 100%);
        background-size: 2px 10px;
    }
    .mai-page .mai-comms__relay-link.is-flowing .mai-comms__relay-packet {
        animation: maiCommsRelayPacketVert 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes maiCommsRelayPacketVert {
        0%   { top: 0;    left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
        15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        100% { top: 100%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    }
    .mai-page .mai-comms__team-ring {
        width: 88px;
        height: 88px;
        top: 0.35rem;
    }

    /* Hide the desktop prompt chips, show the simple mobile links instead */
    .mai-page .mai-comms__prompts { display: none; }

    .mai-page .mai-comms__m-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0;
        padding: 0.5rem 0 0;
    }
    .mai-page .mai-comms__m-link {
        background: none;
        border: none;
        padding: 0.25rem 0;
        margin-right: 1.25rem;
        font-family: 'Outfit', sans-serif;
        font-size: 0.88rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.35);
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: color 0.25s ease, border-color 0.25s ease;
    }
    .mai-page .mai-comms__m-link.is-active {
        color: var(--color-accent);
        border-bottom-color: rgba(var(--color-accent-rgb), 0.45);
    }
    .mai-page .mai-comms__m-link:hover:not(.is-active) {
        color: rgba(255, 255, 255, 0.65);
    }
}


/* =====================================================================
   HOW YOU WORK WITH MAI (.mai-work)
   Scroll-pinned overview of the four ways MAI helps. Each mode has its
   own scene (copy on the left, artifact on the right) that fades in as
   the user scrolls. A row of numbered mode indicators tracks progress.
   ===================================================================== */
.mai-page .mai-work {
    position: relative;
    background: var(--color-dark);
    isolation: isolate;
    color: #fff;
}
.mai-page .mai-work::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.4) 30%,
        rgba(51, 207, 255, 0.4) 70%,
        transparent 100%);
    opacity: 0.5;
}
.mai-page .mai-work__scroll {
    position: relative;
}
.mai-page .mai-work__pin {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 5vw, 4rem);
}
.mai-page .mai-work__pin::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; height: 80%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(var(--color-accent-rgb), 0.08) 0%,
        rgba(51, 207, 255, 0.05) 45%,
        transparent 72%);
    filter: blur(50px);
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-work__inner {
    width: 100%;
    max-width: 86rem;
    display: flex;
    flex-direction: column;
    gap: clamp(1.1rem, 2vw, 1.6rem);
}

/* ---- Header ---- */
.mai-page .mai-work__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.mai-page .mai-work__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-work__chapter { color: var(--color-accent); }
.mai-page .mai-work__meta-sep {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}
.mai-page .mai-work__stage-label {
    color: rgba(255, 255, 255, 0.72);
    text-transform: none;
    letter-spacing: 0.03em;
    font-weight: 500;
    font-size: 0.72rem;
    transition: color 0.35s ease;
}
.mai-page .mai-work__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
}
.mai-page .mai-work__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-work__sub {
    margin: 0;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    max-width: 42rem;
    text-align: center;
}

/* ---- Mode indicator row ---- */
.mai-page .mai-work__modes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 0.25rem 0;
}
.mai-page .mai-work__mode {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.65rem 0.85rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    transition:
        background 0.45s ease,
        border-color 0.45s ease,
        color 0.45s ease;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    text-align: left;
}
.mai-page .mai-work__mode.is-active {
    background: rgba(var(--color-accent-rgb), 0.08);
    border-color: rgba(var(--color-accent-rgb), 0.35);
}
.mai-page .mai-work__mode-num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.45s ease;
}
.mai-page .mai-work__mode.is-active .mai-work__mode-num,
.mai-page .mai-work__mode.is-visited .mai-work__mode-num {
    color: var(--color-accent);
}
.mai-page .mai-work__mode-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
/* Fill that sweeps through each mode as its section is active. */
.mai-page .mai-work__mode-fill {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 2px;
    background: var(--mai-grad);
    transform: scaleX(0);
    transform-origin: left center;
}
.mai-page .mai-work__mode.is-visited .mai-work__mode-fill {
    transform: scaleX(1);
    transition: transform 0.3s ease;
}
.mai-page .mai-work__mode.is-active .mai-work__mode-fill {
    animation: maiWorkFill 5s linear forwards;
}
@keyframes maiWorkFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---- Accordion wrappers: transparent on desktop, cards on mobile ---- */
.mai-page .mai-work__acc-item {
    display: contents;
}
.mai-page .mai-work__acc-btn {
    display: none;
}

/* ---- Scene stage: 4 panels stacked, one visible at a time ---- */
.mai-page .mai-work__stage {
    position: relative;
    min-height: 0;
    flex: 1;
    display: grid;
}
.mai-page .mai-work__panel {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: center;
    padding: clamp(1rem, 2.5vw, 2rem) 0.25rem;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-work__stage.is-mode-0 .mai-work__panel[data-mode="0"],
.mai-page .mai-work__stage.is-mode-1 .mai-work__panel[data-mode="1"],
.mai-page .mai-work__stage.is-mode-2 .mai-work__panel[data-mode="2"],
.mai-page .mai-work__stage.is-mode-3 .mai-work__panel[data-mode="3"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Copy column */
.mai-page .mai-work__copy {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.mai-page .mai-work__num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.mai-page .mai-work__num::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
}
.mai-page .mai-work__heading {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}
.mai-page .mai-work__desc {
    margin: 0;
    font-size: clamp(0.88rem, 1vw, 1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 28rem;
}
.mai-page .mai-work__chips {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.mai-page .mai-work__chips li {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
}

/* =====================================================================
   ARTIFACT BASE (shared shell used by all four mode previews)
   ===================================================================== */
.mai-page .work-art {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(18, 18, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 1rem 1.15rem 1.1rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 30px 70px -24px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(var(--color-accent-rgb), 0.1) inset,
        0 0 48px -18px rgba(var(--color-accent-rgb), 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: #fff;
}
.mai-page .work-art__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.mai-page .work-art__tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.mai-page .work-art__tag--insight {
    padding: 0.25rem 0.55rem;
    background: rgba(var(--color-accent-rgb), 0.14);
    border: 1px solid rgba(var(--color-accent-rgb), 0.32);
    border-radius: 999px;
}
.mai-page .work-art__tag--insight svg { width: 11px; height: 11px; }
.mai-page .work-art__tag--ready {
    color: #34d399;
    padding: 0.22rem 0.55rem;
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 999px;
    text-transform: uppercase;
}
.mai-page .work-art__meta {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.02em;
}
.mai-page .work-art__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    flex-wrap: wrap;
    justify-content: space-between;
}
.mai-page .work-art__foot svg { width: 12px; height: 12px; color: var(--color-accent); }
.mai-page .work-art__foot strong { color: #fff; font-weight: 700; }
.mai-page .work-art__foot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .work-art__action {
    flex: 1;
    min-width: 0;
}
.mai-page .work-art__action strong {
    color: var(--color-accent);
    font-weight: 700;
}

/* =====================================================================
   ARTIFACT · 01 · TODAY'S QUEUE
   ===================================================================== */
.mai-page .work-queue {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mai-page .work-queue__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
}
.mai-page .work-queue__item--done {
    border-color: rgba(52, 211, 153, 0.25);
    background: rgba(52, 211, 153, 0.05);
}
.mai-page .work-queue__item--doing {
    border-color: rgba(var(--color-accent-rgb), 0.35);
    background: rgba(var(--color-accent-rgb), 0.08);
}
.mai-page .work-queue__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.mai-page .work-queue__item--done .work-queue__icon {
    background: rgba(52, 211, 153, 0.18);
    color: #34d399;
}
.mai-page .work-queue__item--doing .work-queue__icon {
    background: rgba(var(--color-accent-rgb), 0.14);
    position: relative;
}
.mai-page .work-queue__icon svg { width: 11px; height: 11px; }
.mai-page .work-queue__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.25);
    animation: maiPulseDot 1.4s ease-in-out infinite;
}
.mai-page .work-queue__body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.mai-page .work-queue__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
.mai-page .work-queue__sub {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
}
.mai-page .work-queue__state {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border-radius: 999px;
    flex-shrink: 0;
}
.mai-page .work-queue__state--doing {
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
}

/* =====================================================================
   ARTIFACT · 02 · BUSINESS MEMORY
   ===================================================================== */
.mai-page .work-memory {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.mai-page .work-memory__row {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: baseline;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.mai-page .work-memory__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.mai-page .work-memory__row dt {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--color-accent-rgb), 0.85);
}
.mai-page .work-memory__row dd {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.4;
    color: #fff;
}

/* =====================================================================
   ARTIFACT · 03 · CAMPAIGN PLAN
   ===================================================================== */
.mai-page .work-plan__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mai-page .work-plan__head h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.mai-page .work-plan__window {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
}
.mai-page .work-plan__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.mai-page .work-plan__tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    position: relative;
}
.mai-page .work-plan__tile-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(var(--color-accent-rgb), 0.14);
    color: var(--color-accent);
    margin-bottom: 0.1rem;
}
.mai-page .work-plan__tile-icon svg { width: 12px; height: 12px; }
.mai-page .work-plan__tile-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
}
.mai-page .work-plan__tile-meta {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

/* =====================================================================
   ARTIFACT · 04 · INSIGHT BRIEF
   ===================================================================== */
.mai-page .work-insight__headline {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.35;
}
.mai-page .work-insight__headline strong {
    color: var(--color-accent);
    font-weight: 700;
}
.mai-page .work-insight__chart {
    padding: 0.55rem 0.4rem 0.2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}
.mai-page .work-insight__chart svg {
    width: 100%;
    height: 52px;
    display: block;
}
.mai-page .work-insight__note {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.68);
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
    .mai-page .mai-work { height: auto; }

    /* Hide the desktop tab row — accordion headers replace it */
    .mai-page .mai-work__modes { display: none; }

    /* Stage becomes a vertical stack of accordion cards */
    .mai-page .mai-work__stage {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex: none;
    }

    /* Accordion item: block card */
    .mai-page .mai-work__acc-item {
        display: block;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        overflow: hidden;
        transition: border-color 0.3s ease;
    }
    .mai-page .mai-work__acc-item.is-open {
        border-color: rgba(var(--color-accent-rgb), 0.35);
    }

    /* Accordion button: full-width tap target */
    .mai-page .mai-work__acc-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 1rem 1.1rem;
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        text-align: left;
    }
    .mai-page .mai-work__acc-num {
        font-family: 'Outfit', sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        color: rgba(255, 255, 255, 0.4);
        transition: color 0.3s ease;
        flex-shrink: 0;
    }
    .mai-page .mai-work__acc-item.is-open .mai-work__acc-num {
        color: var(--color-accent);
    }
    .mai-page .mai-work__acc-label {
        font-family: 'Outfit', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        flex: 1;
    }
    .mai-page .mai-work__acc-chev {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.4);
        transition: transform 0.3s ease, color 0.3s ease;
    }
    .mai-page .mai-work__acc-item.is-open .mai-work__acc-chev {
        transform: rotate(180deg);
        color: var(--color-accent);
    }

    /* Panel: hidden by default, shown when parent is open */
    .mai-page .mai-work__panel {
        display: none !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
        padding-bottom: 1.25rem;
    }
    .mai-page .mai-work__acc-item.is-open .mai-work__panel {
        display: grid !important;
    }
}
@media (max-width: 520px) {
    .mai-page .work-plan__grid { grid-template-columns: 1fr; }
    .mai-page .work-memory__row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Reduced motion: skip mode transitions, show all four stacked */
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-work {
        height: auto;
        overflow: visible;
    }
    .mai-page .mai-work__scroll { height: auto; }
    .mai-page .mai-work__pin {
        height: auto;
        padding: clamp(3rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    }
    .mai-page .mai-work__stage {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .mai-page .mai-work__panel {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .mai-page .mai-work__mode .mai-work__mode-fill {
        transform: scaleX(1);
    }
}


/* =====================================================================
   HOW MAI REPORTS BACK TO YOU (.mai-rep)
   Two mockups side by side: a Weekly Brief report (left) and a live
   Portal dashboard (right). Both spring to life when scrolled into
   view: SVG line chart draws in, numbers count up, sparklines fill,
   activity items and drafts slide in, "Live" dot pulses.
   ===================================================================== */
.mai-page .mai-rep {
    position: relative;
    background: var(--color-dark);
    padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem) clamp(5rem, 9vw, 8rem);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.mai-page .mai-rep::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.4) 30%,
        rgba(51, 207, 255, 0.4) 70%,
        transparent 100%);
    opacity: 0.55;
}

/* Ambient orbs behind the stage */
.mai-page .mai-rep__orb {
    position: absolute;
    width: clamp(380px, 48vw, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.32;
    z-index: -1;
    pointer-events: none;
}
.mai-page .mai-rep__orb--tl {
    top: -14%; left: -6%;
    background: radial-gradient(circle, rgba(51,207,255,0.8) 0%, transparent 65%);
    animation: maiOrbTL 22s ease-in-out infinite;
}
.mai-page .mai-rep__orb--br {
    bottom: -16%; right: -6%;
    background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.85) 0%, transparent 65%);
    animation: maiOrbBR 26s ease-in-out infinite;
}

.mai-page .mai-rep__inner {
    max-width: 86rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

/* ---- Header ---- */
.mai-page .mai-rep__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    max-width: 48rem;
    margin: 0 auto;
}
.mai-page .mai-rep__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.3rem;
}
.mai-page .mai-rep__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-rep__title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
}
.mai-page .mai-rep__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-rep__sub {
    margin: 0;
    font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 40rem;
}

/* =====================================================================
   STAGE: two mockups side by side
   ===================================================================== */
.mai-page .mai-rep__stage {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    align-items: stretch;
}

/* Shared shell for both mockups */
.mai-page .mai-rep__report,
.mai-page .mai-rep__portal {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(18, 18, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 40px 80px -30px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 60px -18px rgba(var(--color-accent-rgb), 0.3);
}

/* One-shot scanline sweep when the section becomes active */
.mai-page .mai-rep__scan {
    position: absolute;
    top: -4%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.65) 50%,
        transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}
.mai-page .mai-rep__stage.is-active .mai-rep__scan {
    animation: maiRepScan 1.4s ease-in-out forwards;
}
@keyframes maiRepScan {
    0%   { opacity: 0; top: -4%; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; top: 104%; }
}

/* =====================================================================
   REPORT (left) — the Weekly Brief
   ===================================================================== */
.mai-page .mai-rep__report {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem 1.15rem;
    gap: 0.85rem;
}

.mai-page .mai-rep__report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}
.mai-page .mai-rep__report-head-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mai-page .mai-rep__tag {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    background: rgba(var(--color-accent-rgb), 0.14);
    border: 1px solid rgba(var(--color-accent-rgb), 0.32);
    color: var(--color-accent);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-right: 0.5rem;
}
.mai-page .mai-rep__meta {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
}
.mai-page .mai-rep__stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.32);
    color: #34d399;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.85) rotate(-8deg);
    transition:
        opacity 0.45s ease 0.6s,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s;
}
.mai-page .mai-rep__stamp svg { width: 11px; height: 11px; }
.mai-page .mai-rep__stage.is-active .mai-rep__stamp {
    opacity: 1;
    transform: scale(1) rotate(-4deg);
}

/* Hero number */
.mai-page .mai-rep__hero {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.3rem 0;
}
.mai-page .mai-rep__hero-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-rep__hero-num {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.mai-page .mai-rep__hero-val {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.mai-page .mai-rep__hero-arrow {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.18);
    color: #34d399;
}
.mai-page .mai-rep__hero-arrow svg { width: 12px; height: 12px; }
.mai-page .mai-rep__hero-sub {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Primary SVG chart */
.mai-page .mai-rep__chart {
    padding: 0.5rem 0 0.3rem;
}
.mai-page .mai-rep__chart-svg {
    width: 100%;
    height: 100px;
    display: block;
}
.mai-page .mai-rep__chart-area {
    opacity: 0;
    transition: opacity 1.1s ease 0.3s;
}
.mai-page .mai-rep__chart-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
    filter: drop-shadow(0 0 4px rgba(var(--color-accent-rgb), 0.55));
}
.mai-page .mai-rep__chart-dot {
    opacity: 0;
    transition: opacity 0.35s ease 1.4s;
}
.mai-page .mai-rep__chart-dot--halo {
    animation: maiRepDotHalo 1.8s ease-in-out infinite 1.7s;
}
@keyframes maiRepDotHalo {
    0%, 100% { r: 6;  opacity: 0.55; }
    50%      { r: 10; opacity: 0; }
}
.mai-page .mai-rep__stage.is-active .mai-rep__chart-line   { stroke-dashoffset: 0; }
.mai-page .mai-rep__stage.is-active .mai-rep__chart-area   { opacity: 1; }
.mai-page .mai-rep__stage.is-active .mai-rep__chart-dot    { opacity: 1; }
.mai-page .mai-rep__chart-axis {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.32);
    text-align: center;
    padding-top: 0.35rem;
}

/* KPI row with sparklines */
.mai-page .mai-rep__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.mai-page .mai-rep__kpi {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
}
.mai-page .mai-rep__kpi-num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.mai-page .mai-rep__kpi-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-rep__kpi-spark {
    width: 100%;
    height: 18px;
    display: block;
    margin-top: 0.15rem;
}

/* Spark-line draw-in (applies to any spark within the stage) */
.mai-page .mai-rep__spark-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
    filter: drop-shadow(0 0 2px rgba(var(--color-accent-rgb), 0.45));
}
.mai-page .mai-rep__stage.is-active .mai-rep__spark-line { stroke-dashoffset: 0; }

/* Report notes */
.mai-page .mai-rep__notes {
    padding: 0.55rem 0 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mai-page .mai-rep__notes-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-accent-rgb), 0.85);
}
.mai-page .mai-rep__notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mai-page .mai-rep__notes-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}
.mai-page .mai-rep__notes-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}
.mai-page .mai-rep__notes-list li strong { color: #fff; font-weight: 700; }
.mai-page .mai-rep__notes-list li em { color: rgba(var(--color-accent-rgb), 0.95); font-style: italic; }

/* Report footer */
.mai-page .mai-rep__report-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    margin-top: auto;
}
.mai-page .mai-rep__signed {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.72);
}
.mai-page .mai-rep__signed-glyph {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
}
.mai-page .mai-rep__signed-glyph svg { width: 11px; height: 11px; }
.mai-page .mai-rep__next {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.4);
}

/* =====================================================================
   PORTAL (right) — live dashboard
   ===================================================================== */
.mai-page .mai-rep__portal {
    display: flex;
    flex-direction: column;
}
.mai-page .mai-rep__chrome {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        rgba(255, 255, 255, 0.02);
}
.mai-page .mai-rep__chrome-dots {
    display: inline-flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.mai-page .mai-rep__chrome-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.mai-page .mai-rep__chrome-dots span:nth-child(1) { background: #ff5f57; }
.mai-page .mai-rep__chrome-dots span:nth-child(2) { background: #febb2e; }
.mai-page .mai-rep__chrome-dots span:nth-child(3) { background: #28c941; }
.mai-page .mai-rep__chrome-url {
    flex: 1;
    max-width: 60%;
    margin: 0 auto;
    padding: 0.25rem 0.7rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.62);
}
.mai-page .mai-rep__chrome-url svg { width: 10px; height: 10px; color: rgba(255,255,255,0.45); flex-shrink: 0; }
.mai-page .mai-rep__chrome-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 10px -2px rgba(var(--color-accent-rgb), 0.45);
}

/* Portal workspace: sidebar + main */
.mai-page .mai-rep__workspace {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    flex: 1;
    min-height: 0;
}

/* Sidebar */
.mai-page .mai-rep__sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.mai-page .mai-rep__sidebar-logo {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mai-grad);
    color: #fff;
    box-shadow: 0 0 14px -3px rgba(var(--color-accent-rgb), 0.55);
    margin-bottom: 0.25rem;
}
.mai-page .mai-rep__sidebar-logo svg { width: 18px; height: 18px; }
.mai-page .mai-rep__sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
}
.mai-page .mai-rep__sidebar-nav li {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    transition: background 0.25s ease, color 0.25s ease;
    cursor: default;
}
.mai-page .mai-rep__sidebar-nav li:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.mai-page .mai-rep__sidebar-nav li.is-active {
    background: rgba(var(--color-accent-rgb), 0.16);
    color: var(--color-accent);
}
.mai-page .mai-rep__sidebar-nav li svg { width: 16px; height: 16px; }
.mai-page .mai-rep__sidebar-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.54rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Main area */
.mai-page .mai-rep__main {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
}
.mai-page .mai-rep__main-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mai-page .mai-rep__main-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #34d399;
    margin-bottom: 0.3rem;
}
.mai-page .mai-rep__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
    animation: maiPulseDot 1.6s ease-in-out infinite;
}
.mai-page .mai-rep__main-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.mai-page .mai-rep__main-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}
.mai-page .mai-rep__bell {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    flex-shrink: 0;
    animation: maiRepBell 4s ease-in-out infinite 2s;
}
.mai-page .mai-rep__bell svg { width: 15px; height: 15px; }
.mai-page .mai-rep__bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px -2px rgba(var(--color-accent-rgb), 0.55);
}
@keyframes maiRepBell {
    0%, 88%, 100%    { transform: rotate(0); }
    90%, 94%         { transform: rotate(-8deg); }
    92%, 96%         { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-rep__bell { animation: none; }
}

/* Stats row in the portal */
.mai-page .mai-rep__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
.mai-page .mai-rep__stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.mai-page .mai-rep__stat-num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.mai-page .mai-rep__stat-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-rep__stat-bar {
    height: 3px;
    margin-top: 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.mai-page .mai-rep__stat-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--mai-grad);
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
.mai-page .mai-rep__stage.is-active .mai-rep__stat-bar span {
    width: var(--w, 70%);
}
.mai-page .mai-rep__stat-tag {
    margin-top: 0.3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-rep__stat-spark {
    width: 100%;
    height: 18px;
    display: block;
    margin-top: 0.35rem;
}

/* Panels (activity + drafts) */
.mai-page .mai-rep__panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.mai-page .mai-rep__panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.mai-page .mai-rep__panel-head h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.005em;
}
.mai-page .mai-rep__panel-meta,
.mai-page .mai-rep__panel-count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.mai-page .mai-rep__panel-count {
    color: var(--color-accent);
}

/* Activity feed */
.mai-page .mai-rep__feed,
.mai-page .mai-rep__drafts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mai-page .mai-rep__feed-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0ms);
}
.mai-page .mai-rep__stage.is-active .mai-rep__feed-item {
    opacity: 1;
    transform: translateX(0);
}
.mai-page .mai-rep__feed-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.mai-page .mai-rep__feed-icon--done    { background: rgba(52, 211, 153, 0.18); color: #34d399; }
.mai-page .mai-rep__feed-icon--draft   { background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-accent); }
.mai-page .mai-rep__feed-icon--insight { background: rgba(255, 213, 138, 0.18); color: #ffd58a; }
.mai-page .mai-rep__feed-icon svg { width: 11px; height: 11px; }
.mai-page .mai-rep__feed-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}
.mai-page .mai-rep__feed-title {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mai-page .mai-rep__feed-title strong { color: #fff; font-weight: 600; }
.mai-page .mai-rep__feed-val { color: var(--color-accent); font-weight: 700; }
.mai-page .mai-rep__feed-time {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

/* Drafts queue */
.mai-page .mai-rep__draft {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem 0.55rem 0.65rem;
    background: rgba(var(--color-accent-rgb), 0.08);
    border: 1px solid rgba(var(--color-accent-rgb), 0.22);
    border-radius: 9px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0ms);
}
.mai-page .mai-rep__stage.is-active .mai-rep__draft {
    opacity: 1;
    transform: translateY(0);
}
.mai-page .mai-rep__draft-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.mai-page .mai-rep__draft-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
.mai-page .mai-rep__draft-meta {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-rep__draft-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.55rem 0.35rem 0.65rem;
    background: var(--mai-grad);
    color: #fff;
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -6px rgba(var(--color-accent-rgb), 0.55);
}
.mai-page .mai-rep__draft-btn svg { width: 11px; height: 11px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 960px) {
    .mai-page .mai-rep__stage {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .mai-page .mai-rep__kpis { grid-template-columns: 1fr; }
    .mai-page .mai-rep__stats { grid-template-columns: 1fr; }
    .mai-page .mai-rep__sidebar { display: none; }
    .mai-page .mai-rep__workspace { grid-template-columns: 1fr; }
}


/* =====================================================================
   WHAT MAI COSTS (.mai-price)
   Four packages that build on each other: Lights On / Active /
   Campaign / Studio. Toggle for monthly/yearly. Cards row on top,
   full comparison chart below. Dark MAI brand throughout, with the
   featured ($500 Campaign) card and column carrying the MAI gradient.
   ===================================================================== */
.mai-page .mai-price {
    position: relative;
    background: var(--color-dark);
    padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem) clamp(5rem, 9vw, 8rem);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.mai-page .mai-price::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.45) 30%,
        rgba(51, 207, 255, 0.45) 70%,
        transparent 100%);
    opacity: 0.55;
}
.mai-page .mai-price__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-price__orb--tl {
    top: -10%; left: -10%;
    width: 38vw; height: 38vw;
    background: radial-gradient(ellipse, rgba(var(--color-accent-rgb), 1) 0%, transparent 65%);
}
.mai-page .mai-price__orb--br {
    bottom: -15%; right: -10%;
    width: 42vw; height: 42vw;
    background: radial-gradient(ellipse, rgba(51, 207, 255, 1) 0%, transparent 65%);
}
.mai-page .mai-price__inner {
    max-width: 86rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Header ---- */
.mai-page .mai-price__head {
    max-width: 50rem;
    margin: 0 auto clamp(2rem, 3.5vw, 3rem);
    text-align: center;
}
.mai-page .mai-price__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-price__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-price__title {
    margin: 0 0 1rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    text-transform: none;
}
.mai-page .mai-price__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-price__sub {
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 38rem;
    text-wrap: pretty;
}

/* ---- Monthly / Yearly toggle ---- */
.mai-page .mai-price__toggle {
    position: relative;
    display: inline-flex;
    margin: 1.6rem auto 0;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    isolation: isolate;
}
.mai-page .mai-price__toggle-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.05rem;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: color 0.3s ease;
    white-space: nowrap;
}
.mai-page .mai-price__toggle-btn.is-active {
    color: #fff;
}
.mai-page .mai-price__toggle-btn:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.85);
}
.mai-page .mai-price__toggle-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    z-index: 1;
    background: var(--mai-grad);
    border-radius: 999px;
    box-shadow: 0 6px 18px -6px rgba(var(--color-accent-rgb), 0.55);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-price__toggle-badge {
    display: inline-block;
    padding: 0.12rem 0.4rem;
    margin-left: 0.15rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Cards row (4 packages) ---- */
.mai-page .mai-price__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
    margin: 0 0 clamp(3rem, 5vw, 4rem);
    transition: opacity 0.2s ease;
}
.mai-page .mai-price__cards.is-swapping { opacity: 0.55; }

.mai-page .mai-price__pkg {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(1.25rem, 2vw, 1.6rem) clamp(1.1rem, 1.6vw, 1.4rem) clamp(1.4rem, 2vw, 1.7rem);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s ease,
                background 0.4s ease,
                box-shadow 0.4s ease;
    overflow: hidden;
    isolation: isolate;
}
.mai-page .mai-price__pkg:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--color-accent-rgb), 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Featured (Campaign) — MAI gradient border + lift */
.mai-page .mai-price__pkg--featured {
    background:
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.08), rgba(51, 207, 255, 0.04)),
        rgba(255, 255, 255, 0.01);
    border-color: transparent;
    box-shadow: 0 22px 50px rgba(var(--color-accent-rgb), 0.12);
}
.mai-page .mai-price__pkg--featured::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: var(--mai-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}
.mai-page .mai-price__pkg-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.55rem;
    background: var(--mai-grad);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(var(--color-accent-rgb), 0.55);
    z-index: 1;
}

/* Card body */
.mai-page .mai-price__pkg-head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 6rem;
}
.mai-page .mai-price__pkg-name {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.1;
}
.mai-page .mai-price__pkg-for {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
    text-wrap: pretty;
}
.mai-page .mai-price__pkg-price {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    margin-top: 0.25rem;
    color: #fff;
}
.mai-page .mai-price__pkg-currency {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    align-self: flex-start;
    margin-top: 0.6rem;
}
.mai-page .mai-price__pkg-amount {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}
.mai-page .mai-price__pkg-period {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.2rem;
}
.mai-page .mai-price__pkg-billing {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
}
.mai-page .mai-price__pkg-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.mai-page .mai-price__pkg-cta:hover {
    background: rgba(var(--color-accent-rgb), 0.14);
    border-color: rgba(var(--color-accent-rgb), 0.45);
    transform: translateY(-1px);
}
.mai-page .mai-price__pkg-cta--primary {
    background: var(--mai-grad);
    border-color: transparent;
    box-shadow: 0 10px 22px -10px rgba(var(--color-accent-rgb), 0.55);
}
.mai-page .mai-price__pkg-cta--primary:hover {
    background: var(--mai-grad);
    border-color: transparent;
    box-shadow: 0 16px 30px -10px rgba(var(--color-accent-rgb), 0.7);
}
.mai-page .mai-price__pkg-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}
.mai-page .mai-price__pkg-list li {
    position: relative;
    padding-left: 1.2rem;
}
.mai-page .mai-price__pkg-list li::before {
    content: '';
    position: absolute;
    top: 0.55rem;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.65);
}
.mai-page .mai-price__pkg-list strong {
    color: #fff;
    font-weight: 700;
}

/* ---- Comparison chart ---- */
.mai-page .mai-price__compare {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.mai-page .mai-price__compare-head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.mai-page .mai-price__compare-eyebrow {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(var(--color-accent-rgb), 0.85);
}
.mai-page .mai-price__compare-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
    text-transform: none;
    text-wrap: balance;
}
.mai-page .mai-price__compare-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mai-page .mai-price__compare-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Outfit', sans-serif;
    color: #fff;
    min-width: 56rem;
}
.mai-page .mai-price__compare-table thead th {
    text-align: center;
    padding: 1rem 1rem 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    vertical-align: bottom;
}
.mai-page .mai-price__compare-th-feat {
    text-align: left !important;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600 !important;
    padding-left: 1.2rem !important;
}
.mai-page .mai-price__compare-plan {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.2rem;
}
.mai-page .mai-price__compare-amount {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
}
.mai-page .mai-price__compare-th-featured {
    background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.12), rgba(51, 207, 255, 0.06)) !important;
    position: relative;
}
.mai-page .mai-price__compare-th-featured::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--mai-grad);
}
.mai-page .mai-price__compare-th-featured .mai-price__compare-plan {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.mai-page .mai-price__compare-table tbody th {
    text-align: left;
    padding: 0.85rem 1.2rem;
    font-weight: 500;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 32%;
}
.mai-page .mai-price__compare-table tbody td {
    text-align: center;
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}
.mai-page .mai-price__compare-td-featured {
    background: rgba(var(--color-accent-rgb), 0.04);
    color: #fff !important;
    font-weight: 600;
}

/* Group header rows */
.mai-page .mai-price__compare-group th {
    background: rgba(255, 255, 255, 0.025) !important;
    color: rgba(var(--color-accent-rgb), 0.85) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1.2rem 0.55rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Check / no-check pills */
.mai-page .mai-price__check {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    position: relative;
    vertical-align: middle;
}
.mai-page .mai-price__check.is-on {
    border-color: transparent;
    background: var(--mai-grad);
}
.mai-page .mai-price__check.is-on::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -65%) rotate(-45deg);
}

/* Footnote under chart */
.mai-page .mai-price__note {
    margin: clamp(2rem, 3vw, 2.75rem) auto 0;
    text-align: center;
    max-width: 42rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Mobile pricing tabs (.mai-price__m) ---- */
.mai-page .mai-price__m {
    margin: 0 0 clamp(3rem, 5vw, 4rem);
}

.mai-page .mai-price__m-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}
.mai-page .mai-price__m-tabs::-webkit-scrollbar { display: none; }

.mai-page .mai-price__m-tab {
    flex-shrink: 0;
    padding: 0.5rem 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}
.mai-page .mai-price__m-tab.is-active {
    background: var(--mai-grad);
    border-color: transparent;
    color: #fff;
}
.mai-page .mai-price__m-tab:hover:not(.is-active) {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}
.mai-page .mai-price__m-tab--featured:not(.is-active) {
    border-color: rgba(var(--color-accent-rgb), 0.35);
    color: var(--color-accent);
}

.mai-page .mai-price__m-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem 1.4rem 1.7rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mai-page .mai-price__m-card--featured {
    background:
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.08), rgba(51, 207, 255, 0.04)),
        rgba(255, 255, 255, 0.01);
    border-color: transparent;
    box-shadow: 0 22px 50px rgba(var(--color-accent-rgb), 0.12);
}
.mai-page .mai-price__m-card--featured::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: var(--mai-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.mai-page .mai-price__m-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.22rem 0.6rem;
    background: var(--mai-grad);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}

.mai-page .mai-price__m-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mai-page .mai-price__m-name {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
}

.mai-page .mai-price__m-for {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.mai-page .mai-price__m-price {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.mai-page .mai-price__m-currency {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    align-self: flex-start;
    padding-top: 0.35rem;
}

.mai-page .mai-price__m-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1;
}

.mai-page .mai-price__m-per {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 0.25rem;
}

.mai-page .mai-price__m-billing {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.mai-page .mai-price__m-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.mai-page .mai-price__m-cta:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.mai-page .mai-price__m-cta--primary {
    background: var(--mai-grad);
    border-color: transparent;
}
.mai-page .mai-price__m-cta--primary:hover {
    opacity: 0.88;
}

.mai-page .mai-price__m-list {
    margin: 0;
    padding: 0;
    padding-top: 0.75rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mai-page .mai-price__m-list li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
.mai-page .mai-price__m-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}
.mai-page .mai-price__m-list strong {
    color: #fff;
    font-weight: 600;
}

/* ---- Mobile comparison table (.mai-price__compare-mobile) ---- */
.mai-page .mai-price__compare-mobile {
    margin: 0 0 clamp(3rem, 5vw, 4rem);
}

.mai-page .mai-price__mobile-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.mai-page .mai-price__mobile-tab {
    flex: 1;
    padding: 0.875rem 0.4rem;
    background: none;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    position: relative;
    white-space: nowrap;
}
.mai-page .mai-price__mobile-tab:last-child {
    border-right: none;
}
.mai-page .mai-price__mobile-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--mai-grad);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.mai-page .mai-price__mobile-tab.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.mai-page .mai-price__mobile-tab.is-active::after {
    opacity: 1;
}
.mai-page .mai-price__mobile-tab--featured:not(.is-active) {
    color: var(--color-accent);
}

.mai-page .mai-price__mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.mai-page .mai-price__mobile-group {
    padding: 0.55rem 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mai-page .mai-price__mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
}
.mai-page .mai-price__mobile-row:last-child {
    border-bottom: none;
}
.mai-page .mai-price__mobile-row:hover {
    background: rgba(255, 255, 255, 0.015);
}

.mai-page .mai-price__mobile-feat {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    flex: 1;
    padding-right: 1rem;
    line-height: 1.35;
}

.mai-page .mai-price__mobile-val {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    min-width: 2rem;
    text-align: right;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .mai-page .mai-price__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .mai-page .mai-price__cards {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .mai-page .mai-price__pkg {
        cursor: pointer;
        padding-right: 3rem;
    }
    .mai-page .mai-price__pkg:hover {
        transform: none;
        box-shadow: none;
    }
    /* Toggle indicator */
    .mai-page .mai-price__pkg::after {
        content: '+';
        position: absolute;
        top: 1.1rem;
        right: 1.1rem;
        font-family: 'Outfit', sans-serif;
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 1;
        color: var(--color-accent, #6e60ee);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }
    .mai-page .mai-price__pkg.is-open::after {
        transform: rotate(45deg);
    }
    /* Collapse: hide everything except name and price */
    .mai-page .mai-price__pkg-head { min-height: 0; }
    .mai-page .mai-price__pkg-for,
    .mai-page .mai-price__pkg-billing,
    .mai-page .mai-price__pkg-cta,
    .mai-page .mai-price__pkg-list { display: none; }
    /* Expand: show all */
    .mai-page .mai-price__pkg.is-open .mai-price__pkg-for { display: block; }
    .mai-page .mai-price__pkg.is-open .mai-price__pkg-billing { display: block; }
    .mai-page .mai-price__pkg.is-open .mai-price__pkg-cta { display: inline-flex; }
    .mai-page .mai-price__pkg.is-open .mai-price__pkg-list { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-price__pkg,
    .mai-page .mai-price__toggle-thumb,
    .mai-page .mai-price__cards { transition: none; }
    .mai-page .mai-price__pkg:hover { transform: none; }
    .mai-page .mai-price__eyebrow-dot { animation: none; }
}


/* =====================================================================
   GET STARTED (.mai-go)
   Calm form section that captures the basics: business name, contact,
   package interest, and a short description. Pre-fills the package
   radio when a card CTA is clicked. Posts to /contact.
   ===================================================================== */
.mai-page .mai-go {
    position: relative;
    background: var(--color-dark);
    padding: clamp(4rem, 7vw, 6.5rem) clamp(1.5rem, 4vw, 3rem);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.mai-page .mai-go::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%);
}
.mai-page .mai-go__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.16;
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-go__orb--tl {
    top: -20%; left: -10%;
    width: 36vw; height: 36vw;
    background: radial-gradient(ellipse, rgba(51, 207, 255, 1) 0%, transparent 65%);
}
.mai-page .mai-go__orb--br {
    bottom: -20%; right: -10%;
    width: 40vw; height: 40vw;
    background: radial-gradient(ellipse, rgba(var(--color-accent-rgb), 1) 0%, transparent 65%);
}
.mai-page .mai-go__inner {
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Header ---- */
.mai-page .mai-go__head {
    text-align: center;
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.mai-page .mai-go__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-go__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-go__title {
    margin: 0 0 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    text-transform: none;
}
.mai-page .mai-go__sub {
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 38rem;
    text-wrap: pretty;
}

/* ---- Form ---- */
.mai-page .mai-go__form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mai-page .mai-go__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.mai-page .mai-go__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.mai-page .mai-go__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.mai-page .mai-go__req {
    color: var(--color-accent);
    font-weight: 700;
}
.mai-page .mai-go__label-opt {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 0.15rem;
}
.mai-page .mai-go__form input[type="text"],
.mai-page .mai-go__form input[type="email"],
.mai-page .mai-go__form input[type="tel"],
.mai-page .mai-go__form input[type="url"],
.mai-page .mai-go__form textarea {
    width: 100%;
    padding: 0.75rem 0.95rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #fff;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
}
.mai-page .mai-go__form input::placeholder,
.mai-page .mai-go__form textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.mai-page .mai-go__form input:focus,
.mai-page .mai-go__form textarea:focus {
    outline: none;
    border-color: rgba(var(--color-accent-rgb), 0.55);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}
.mai-page .mai-go__form textarea {
    resize: vertical;
    min-height: 5.5rem;
}

/* Plan picker */
.mai-page .mai-go__plan-picker {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.mai-page .mai-go__plan-picker .mai-go__label {
    margin-bottom: 0.15rem;
    padding: 0;
}
.mai-page .mai-go__plans {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}
.mai-page .mai-go__plan {
    position: relative;
    cursor: pointer;
}
.mai-page .mai-go__plan input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.mai-page .mai-go__plan-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.85rem 0.65rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
    height: 100%;
}
.mai-page .mai-go__plan:hover .mai-go__plan-card {
    border-color: rgba(var(--color-accent-rgb), 0.4);
    transform: translateY(-1px);
}
.mai-page .mai-go__plan input:checked + .mai-go__plan-card,
.mai-page .mai-go__plan input:focus-visible + .mai-go__plan-card {
    border-color: transparent;
    background: rgba(var(--color-accent-rgb), 0.12);
    box-shadow:
        0 0 0 1.5px var(--color-accent),
        0 8px 18px -10px rgba(var(--color-accent-rgb), 0.45);
}
.mai-page .mai-go__plan-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}
.mai-page .mai-go__plan-price {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}
.mai-page .mai-go__plan-card--alt {
    border-style: dashed;
}
.mai-page .mai-go__plan input:checked + .mai-go__plan-card .mai-go__plan-name {
    color: var(--color-accent);
}

/* Submit */
.mai-page .mai-go__submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
}
.mai-page .mai-go__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem 0.7rem 1.4rem;
    background: var(--mai-grad);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
    box-shadow: 0 12px 26px -10px rgba(var(--color-accent-rgb), 0.5);
}
.mai-page .mai-go__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -10px rgba(var(--color-accent-rgb), 0.65);
}
.mai-page .mai-go__submit-arrow {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-go__submit-arrow svg { width: 13px; height: 13px; }
.mai-page .mai-go__submit:hover .mai-go__submit-arrow {
    transform: translateX(2px);
}
.mai-page .mai-go__submit.is-loading ~ .contact-form__btn-spinner {
    display: block;
}
.mai-page .mai-go__submit.is-loading {
    opacity: 0.7;
    cursor: wait;
}

/* Assurances */
.mai-page .mai-go__assurances {
    list-style: none;
    margin: clamp(1.25rem, 2vw, 1.6rem) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
}
.mai-page .mai-go__assurances li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}
.mai-page .mai-go__assurance-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.15);
    color: var(--color-accent);
    flex-shrink: 0;
}
.mai-page .mai-go__assurance-icon svg { width: 11px; height: 11px; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .mai-page .mai-go__row { grid-template-columns: 1fr; }
    .mai-page .mai-go__plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mai-page .mai-go__submit-row {
        justify-content: stretch;
    }
    .mai-page .mai-go__submit {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-go__plan-card,
    .mai-page .mai-go__submit,
    .mai-page .mai-go__submit-arrow { transition: none; }
    .mai-page .mai-go__submit:hover { transform: none; }
    .mai-page .mai-go__eyebrow-dot { animation: none; }
}


/* =====================================================================
   MOVE TO MAI (.mai-move)
   Migration value-prop section. Three-zone stage: Source (left),
   Connector (centre), Target/MAI (right). The site card overlays
   the stage, absolutely positioned, and slides from source to target
   on each cycle. Platform marks and names rotate. Benefits ✓-cascade
   into view when the card lands on the target side.
   ===================================================================== */
.mai-page .mai-move {
    position: relative;
    background: var(--color-dark);
    color: #fff;
    padding: clamp(4rem, 7vw, 6.5rem) clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    isolation: isolate;
}
.mai-page .mai-move::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.45) 30%,
        rgba(51, 207, 255, 0.45) 70%,
        transparent 100%);
    opacity: 0.5;
}
.mai-page .mai-move__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-move__orb--tl {
    top: -15%; left: -8%;
    width: 36vw; height: 36vw;
    background: radial-gradient(ellipse, rgba(var(--color-accent-rgb), 1) 0%, transparent 65%);
}
.mai-page .mai-move__orb--br {
    bottom: -15%; right: -8%;
    width: 40vw; height: 40vw;
    background: radial-gradient(ellipse, rgba(51, 207, 255, 1) 0%, transparent 65%);
}
.mai-page .mai-move__inner {
    max-width: 82rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Header ---- */
.mai-page .mai-move__head {
    max-width: 46rem;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}
.mai-page .mai-move__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-move__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-move__title {
    margin: 0 0 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    text-transform: none;
}
.mai-page .mai-move__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-move__sub {
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 38rem;
    text-wrap: pretty;
}
.mai-page .mai-move__learn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1rem 0.5rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mai-page .mai-move__learn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-move__learn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.mai-page .mai-move__learn:hover svg {
    transform: translateY(3px);
}

/* =====================================================================
   Stage — three zones with the card overlaid
   ===================================================================== */
.mai-page .mai-move__stage {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr auto 1.5fr;
    align-items: stretch;
    gap: clamp(1rem, 2vw, 1.75rem);
    min-height: 16rem;
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

/* Zone wrapper (label + slot) */
.mai-page .mai-move__zone {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}
.mai-page .mai-move__zone-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.mai-page .mai-move__zone-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.mai-page .mai-move__zone-label-dot--idle {
    background: rgba(255, 255, 255, 0.3);
}
.mai-page .mai-move__zone-label-dot--live {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
    animation: maiPulseDot 2s ease-in-out infinite;
}

/* Zone slot — the visual container */
.mai-page .mai-move__zone-slot {
    flex: 1;
    position: relative;
    border-radius: 14px;
    padding: clamp(1.1rem, 1.8vw, 1.4rem);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Source slot — dashed border, neutral */
.mai-page .mai-move__zone-slot[data-mai-move-slot="source"] {
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13rem;
}
.mai-page .mai-move__zone-placeholder {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.25);
}
/* Target slot — gradient border, MAI brand. Two columns: benefits on
   the LEFT (full readability), dock on the RIGHT (where the card lands). */
.mai-page .mai-move__zone-slot[data-mai-move-slot="target"] {
    background:
        linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.08), rgba(51, 207, 255, 0.04)),
        rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.mai-page .mai-move__target-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.mai-page .mai-move__target-dock {
    flex-shrink: 0;
    width: clamp(13rem, 22vw, 16rem);
    align-self: stretch;
    /* Invisible — purely a layout reservation that the card aligns to. */
}
.mai-page .mai-move__zone-slot[data-mai-move-slot="target"]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    background: var(--mai-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

/* MAI mark inside target slot */
.mai-page .mai-move__target-mark {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.005em;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}
.mai-page .mai-move__target-mark b {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-weight: 800;
}
.mai-page .mai-move__target-mark sup {
    font-size: 0.5em;
    color: rgba(255, 255, 255, 0.45);
}

/* Benefits list */
.mai-page .mai-move__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}
.mai-page .mai-move__benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.86rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0.45;
    transform: translateX(-3px);
    transition: opacity 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
                transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
                color 0.4s ease;
}
.mai-page .mai-move__benefit.is-active {
    opacity: 1;
    transform: translateX(0);
    color: rgba(255, 255, 255, 0.85);
}
.mai-page .mai-move__benefit-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.mai-page .mai-move__benefit-check svg { width: 10px; height: 10px; }
.mai-page .mai-move__benefit.is-active .mai-move__benefit-check {
    background: var(--mai-grad);
    color: #fff;
    transform: scale(1.05);
}

/* =====================================================================
   Connector (centre column)
   ===================================================================== */
.mai-page .mai-move__connector {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: clamp(4rem, 8vw, 6.5rem);
    padding: 1.5rem 0;
    align-self: center;
}
.mai-page .mai-move__connector-line {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(90deg,
        rgba(var(--color-accent-rgb), 0.5) 0%,
        rgba(var(--color-accent-rgb), 0.5) 48%,
        transparent 48%,
        transparent 52%,
        rgba(51, 207, 255, 0.5) 52%,
        rgba(51, 207, 255, 0.5) 100%);
    background-size: 12px 2px;
    border-radius: 2px;
}
.mai-page .mai-move__connector-line::after {
    /* arrow head */
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(51, 207, 255, 0.7);
    border-right: 2px solid rgba(51, 207, 255, 0.7);
    transform: translateY(-50%) rotate(45deg);
}
.mai-page .mai-move__stage.is-shipping .mai-move__connector-line {
    animation: maiMoveLineFlow 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes maiMoveLineFlow {
    from { background-position: -24px 0; }
    to   { background-position: 24px 0; }
}
.mai-page .mai-move__connector-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
    text-align: center;
}

/* =====================================================================
   The site card (overlay; slides between source and target slots)
   ===================================================================== */
.mai-page .mai-move__card {
    position: absolute;
    top: 4.4rem; /* under the zone-label row, aligned with zone-slot */
    left: 0;
    width: clamp(13rem, 22vw, 16rem);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        left 0.85s cubic-bezier(0.34, 1.06, 0.64, 1),
        opacity 0.4s ease,
        transform 0.85s cubic-bezier(0.34, 1.06, 0.64, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}
/* Lift + glow during shipping */
.mai-page .mai-move__card.is-shipping {
    transform: translateY(-2px) scale(1.015);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(var(--color-accent-rgb), 0.4);
}
/* Once landed on MAI side, glow shifts to cyan/green */
.mai-page .mai-move__card.is-landed {
    border-color: rgba(51, 207, 255, 0.45);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(51, 207, 255, 0.35);
}
/* Cross-fade reset */
.mai-page .mai-move__card.is-faded {
    opacity: 0;
}

/* Card chrome (browser dots + URL) */
.mai-page .mai-move__card-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mai-page .mai-move__card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mai-page .mai-move__card-dot--r { background: #ff5f57; }
.mai-page .mai-move__card-dot--y { background: #febc2e; }
.mai-page .mai-move__card-dot--g { background: #28c840; }
.mai-page .mai-move__card-url {
    margin-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.005em;
}
.mai-page .mai-move__card-padlock {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    color: rgba(52, 211, 153, 0.7);
}

/* Card body */
.mai-page .mai-move__card-body {
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.mai-page .mai-move__card-platform {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
}
.mai-page .mai-move__card.is-landed .mai-move__card-platform {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-color: rgba(var(--color-accent-rgb), 0.35);
}
.mai-page .mai-move__platform-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s ease, transform 0.3s ease;
}
.mai-page .mai-move__platform-mark svg {
    width: 100%;
    height: 100%;
}
.mai-page .mai-move__card.is-landed .mai-move__platform-mark {
    color: var(--color-accent);
}
.mai-page .mai-move__platform-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
    line-height: 1.1;
    transition: color 0.3s ease;
}
.mai-page .mai-move__card.is-landed .mai-move__platform-name {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* Site content preview lines */
.mai-page .mai-move__card-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mai-page .mai-move__card-line {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}
.mai-page .mai-move__card-line--short { width: 65%; }

/* =====================================================================
   Foot — pitch + CTA
   ===================================================================== */
.mai-page .mai-move__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
}
.mai-page .mai-move__pitch {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    max-width: 36rem;
    text-wrap: balance;
}
.mai-page .mai-move__pitch strong {
    color: #fff;
    font-weight: 700;
}
.mai-page .mai-move__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem 0.7rem 1.4rem;
    background: var(--mai-grad);
    border: 0;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: 0 12px 26px -10px rgba(var(--color-accent-rgb), 0.5);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.mai-page .mai-move__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -10px rgba(var(--color-accent-rgb), 0.65);
}
.mai-page .mai-move__cta-arrow {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mai-page .mai-move__cta-arrow svg { width: 13px; height: 13px; }
.mai-page .mai-move__cta:hover .mai-move__cta-arrow {
    transform: translateX(2px);
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1080px) {
    /* Hide the animated stage entirely — replaced by .mai-move__m-layout */
    .mai-page .mai-move__stage { display: none !important; }
}

/* ---- MAI MOVE — platform logo strip / mobile layout ---- */
.mai-page .mai-move__m-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: calc(-1 * clamp(1rem, 2vw, 1.5rem)) auto clamp(1.6rem, 2.5vw, 2.25rem);
    max-width: 46rem;
}
.mai-page .mai-move__m-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(0.4rem, 0.8vw, 0.75rem);
}
.mai-page .mai-move__m-plat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.35rem 0.2rem;
}
.mai-page .mai-move__m-plat-icon svg {
    width: 34px;
    height: 34px;
    display: block;
}
.mai-page .mai-move__m-plat-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    line-height: 1.2;
}
.mai-page .mai-move__m-dest,
.mai-page .mai-move__m-layout > .mai-move__learn {
    display: none;
}

@media (max-width: 1080px) {
    /* Hide the original Learn more link — moved to end of mobile layout */
    .mai-page .mai-move__head .mai-move__learn { display: none; }

    .mai-page .mai-move__m-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        max-width: none;
        margin: 0 0 2rem;
    }

    /* Platform grid */
    .mai-page .mai-move__m-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    /* Standalone logo tiles — no card box */
    .mai-page .mai-move__m-plat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 0.25rem;
    }

    .mai-page .mai-move__m-plat-icon svg {
        width: 36px;
        height: 36px;
        display: block;
        /* colour set via inline style per platform */
    }

    .mai-page .mai-move__m-plat-name {
        font-family: 'Outfit', sans-serif;
        font-size: 0.6rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.45);
        text-align: center;
        line-height: 1.2;
    }

    /* Hide the MAI destination block */
    .mai-page .mai-move__m-dest { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-move__card,
    .mai-page .mai-move__benefit,
    .mai-page .mai-move__benefit-check,
    .mai-page .mai-move__connector-line,
    .mai-page .mai-move__cta,
    .mai-page .mai-move__cta-arrow { transition: none; animation: none !important; }
    .mai-page .mai-move__card.is-shipping,
    .mai-page .mai-move__card.is-landed { transform: none; }
    .mai-page .mai-move__benefit { opacity: 1; transform: none; color: rgba(255, 255, 255, 0.85); }
    .mai-page .mai-move__benefit-check { background: var(--mai-grad); color: #fff; }
    .mai-page .mai-move__eyebrow-dot,
    .mai-page .mai-move__zone-label-dot--live { animation: none; }
}


/* =====================================================================
   MANAGED BY A REAL TEAM (.mai-team)
   Short confident band directly below the hero that anchors MAI as a
   managed product, not just software. Four human faces, role chips,
   and a one-line reassurance that every output is reviewed.
   Dark, minimal, so the moment reads as an inline aside rather than
   its own chapter.
   ===================================================================== */
.mai-page .mai-team {
    position: relative;
    background: var(--color-dark);
    color: #fff;
    padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden;
    isolation: isolate;
}
/* Subtle top divider glow so the band stitches to the hero */
.mai-page .mai-team::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--color-accent-rgb), 0.45) 30%,
        rgba(51, 207, 255, 0.45) 70%,
        transparent 100%);
    opacity: 0.55;
}
/* Soft ambient wash behind the roster */
.mai-page .mai-team::after {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 72%;
    height: 70%;
    background: radial-gradient(ellipse,
        rgba(var(--color-accent-rgb), 0.07) 0%,
        transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-team__inner {
    max-width: 82rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Header ---- */
.mai-page .mai-team__head {
    max-width: 42rem;
    margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
}
.mai-page .mai-team__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-team__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-team__title {
    margin: 0 0 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    text-transform: none;
}
.mai-page .mai-team__title .mai-mark__m {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.mai-page .mai-team__sub {
    margin: 0;
    font-size: clamp(0.95rem, 1vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.68);
    text-wrap: pretty;
}

/* ---- Roster ---- */
.mai-page .mai-team__roster {
    list-style: none;
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.mai-page .mai-team__member {
    /* Each li uses --role + --role-rgb for its accent. */
    position: relative;
}
.mai-page .mai-team__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1rem, 1.5vw, 1.25rem);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
    will-change: transform;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 100%;
}
.mai-page .mai-team__link:hover,
.mai-page .mai-team__link:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(var(--role-rgb), 0.45);
    background: linear-gradient(180deg,
        rgba(var(--role-rgb), 0.06),
        rgba(255, 255, 255, 0.01));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    outline: none;
}

/* Avatar circle */
.mai-page .mai-team__avatar {
    position: relative;
    display: inline-block;
    width: clamp(4.5rem, 6vw, 5.25rem);
    height: clamp(4.5rem, 6vw, 5.25rem);
    border-radius: 50%;
    overflow: hidden;
    background: #1b1b1f;
    border: 2px solid rgba(var(--role-rgb), 0.65);
    box-shadow:
        0 0 0 4px rgba(var(--role-rgb), 0.12),
        0 10px 22px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}
.mai-page .mai-team__avatar::after {
    /* live dot, bottom-right */
    content: '';
    position: absolute;
    right: 4%;
    bottom: 4%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--role);
    border: 2px solid var(--color-dark);
    box-shadow: 0 0 0 2px rgba(var(--role-rgb), 0.35);
}
.mai-page .mai-team__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Name + role block */
.mai-page .mai-team__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.mai-page .mai-team__name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}
.mai-page .mai-team__role {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* Owns chip, colour-coded to the member's role */
.mai-page .mai-team__owns {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.3rem 0.65rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--role);
    background: rgba(var(--role-rgb), 0.1);
    border: 1px solid rgba(var(--role-rgb), 0.28);
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- Foot reassurance line ---- */
.mai-page .mai-team__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}
.mai-page .mai-team__foot-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
    animation: maiPulseDot 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .mai-page .mai-team__roster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .mai-page .mai-team {
        padding-top: clamp(2.25rem, 5vw, 3rem);
        padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
    }
    .mai-page .mai-team__owns {
        font-size: 0.58rem;
        white-space: normal;
        word-break: break-word;
    }
    .mai-page .mai-team__foot {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-team__link { transition: none; }
    .mai-page .mai-team__link:hover,
    .mai-page .mai-team__link:focus-visible { transform: none; }
    .mai-page .mai-team__eyebrow-dot,
    .mai-page .mai-team__foot-dot { animation: none; }
}

/* =====================================================================
   WHAT YOU CAN DO WITH MAI (.mai-do)
   Interactive grid of concrete use cases, each colour-coded to the
   team member who reviews that kind of work. Legend at the top acts
   as a filter; hover/focus on a tile slides in a coloured reviewer
   footer. 12 tiles, 4 columns on desktop, 2 on tablet, 1 on mobile.
   ===================================================================== */
.mai-page .mai-do {
    position: relative;
    background: var(--color-dark);
    color: #fff;
    padding: clamp(4rem, 7vw, 6.5rem) clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden;
    isolation: isolate;
}
.mai-page .mai-do::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%);
}
.mai-page .mai-do::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 55%;
    height: 80%;
    background: radial-gradient(ellipse,
        rgba(51, 207, 255, 0.07) 0%,
        transparent 65%);
    filter: blur(50px);
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-do__inner {
    max-width: 84rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Header ---- */
.mai-page .mai-do__head {
    max-width: 44rem;
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}
.mai-page .mai-do__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-do__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-do__title {
    margin: 0 0 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    text-transform: none;
}
.mai-page .mai-do__sub {
    margin: 0;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 38rem;
}

/* ---- Legend / filter chips ---- */
.mai-page .mai-do__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
}
.mai-page .mai-do__legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}
.mai-page .mai-do__legend-chip:hover {
    transform: translateY(-1px);
    color: #fff;
    border-color: rgba(var(--role-rgb, 255, 255, 255), 0.35);
    background: rgba(var(--role-rgb, 255, 255, 255), 0.07);
}
.mai-page .mai-do__legend-chip.is-active {
    color: #fff;
    border-color: rgba(var(--role-rgb, 255, 255, 255), 0.55);
    background: rgba(var(--role-rgb, 255, 255, 255), 0.12);
}
.mai-page .mai-do__legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--role, #fff);
}
.mai-page .mai-do__legend-dot--all {
    background: linear-gradient(
        135deg,
        #F35F45 0%,
        #c8a7ff 33%,
        #33CFFF 66%,
        #ff9ec7 100%
    );
}

/* ---- Hint line — text changes with the active filter to surface
        examples of what's inside each category. ---- */
.mai-page .mai-do__hint {
    margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}
.mai-page .mai-do__hint-label {
    display: inline-block;
    padding: 0.18rem 0.5rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--hint-rgb, 255, 255, 255), 0.95);
    background: rgba(var(--hint-rgb, 255, 255, 255), 0.08);
    border: 1px solid rgba(var(--hint-rgb, 255, 255, 255), 0.22);
    border-radius: 999px;
    flex-shrink: 0;
    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}
.mai-page .mai-do__hint-text {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Grid ---- */
.mai-page .mai-do__grid {
    list-style: none;
    margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.3vw, 1.1rem);
}
.mai-page .mai-do__tile {
    position: relative;
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.mai-page .mai-do__tile.is-dimmed {
    opacity: 0.25;
    filter: grayscale(0.8);
}
/* Filter swap: hide the entire tile from layout. JS toggles is-hidden
   when the active filter changes between Overview (8 categories) and
   a specific category (8 examples for that category). */
.mai-page .mai-do__tile.is-hidden {
    display: none !important;
}
/* Pre-JS default: hide the 64 example tiles so the initial paint shows
   only the 8 category cards. Once JS has applied the initial filter
   it adds .is-ready to the grid and uses .is-hidden for state. */
.mai-page .mai-do__grid:not(.is-ready) .mai-do__tile[data-card-type="example"] {
    display: none;
}
.mai-page .mai-do__face {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: clamp(1.1rem, 1.8vw, 1.5rem);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    text-align: left;
    color: inherit;
    cursor: default;
    height: 100%;
    min-height: 14.5rem;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
    overflow: hidden;
    isolation: isolate;
    font: inherit;
}
/* Tiny accent tab at the top-left of each tile */
.mai-page .mai-do__face::before {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(1.1rem, 1.8vw, 1.5rem);
    width: 2.4rem;
    height: 3px;
    background: var(--role);
    border-radius: 0 0 3px 3px;
    opacity: 0.7;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.mai-page .mai-do__face:hover,
.mai-page .mai-do__face:focus-visible,
.mai-page .mai-do__tile.is-active .mai-do__face {
    transform: translateY(-4px);
    border-color: rgba(var(--role-rgb), 0.4);
    background: linear-gradient(180deg,
        rgba(var(--role-rgb), 0.08),
        rgba(255, 255, 255, 0.01));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    outline: none;
}
.mai-page .mai-do__face:hover::before,
.mai-page .mai-do__face:focus-visible::before,
.mai-page .mai-do__tile.is-active .mai-do__face::before {
    width: calc(100% - (clamp(1.1rem, 1.8vw, 1.5rem) * 2));
    opacity: 1;
}

/* Tile body */
.mai-page .mai-do__tile-cat {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    margin-bottom: 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--role);
    background: rgba(var(--role-rgb), 0.1);
    border: 1px solid rgba(var(--role-rgb), 0.22);
    border-radius: 4px;
    width: fit-content;
    align-self: flex-start;
}
.mai-page .mai-do__tile-title {
    margin: 0 0 0.45rem;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: #fff;
    text-transform: none;
}
.mai-page .mai-do__tile-ex {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    text-wrap: pretty;
}

/* Inline example pills inside each category card. Show what's
   actually inside the domain at a glance. */
.mai-page .mai-do__tile-tags {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.4rem;
}
.mai-page .mai-do__tile-tags li {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    white-space: nowrap;
}
.mai-page .mai-do__face:hover .mai-do__tile-tags li,
.mai-page .mai-do__face:focus-visible .mai-do__tile-tags li,
.mai-page .mai-do__tile.is-active .mai-do__tile-tags li {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(var(--role-rgb), 0.32);
    background: rgba(var(--role-rgb), 0.1);
}

/* Reviewer footer — collapses to a compact line, expands on hover */
.mai-page .mai-do__tile-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s ease;
}
.mai-page .mai-do__face:hover .mai-do__tile-foot,
.mai-page .mai-do__face:focus-visible .mai-do__tile-foot,
.mai-page .mai-do__tile.is-active .mai-do__tile-foot {
    border-top-color: rgba(var(--role-rgb), 0.35);
}
.mai-page .mai-do__tile-avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #1b1b1f;
    border: 1.5px solid rgba(var(--role-rgb), 0.55);
    flex-shrink: 0;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.mai-page .mai-do__tile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mai-page .mai-do__face:hover .mai-do__tile-avatar,
.mai-page .mai-do__face:focus-visible .mai-do__tile-avatar,
.mai-page .mai-do__tile.is-active .mai-do__tile-avatar {
    border-color: rgba(var(--role-rgb), 1);
    transform: scale(1.06);
}
.mai-page .mai-do__tile-foot-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.1;
}
.mai-page .mai-do__tile-reviewed {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.mai-page .mai-do__tile-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
    transition: color 0.3s ease;
}
.mai-page .mai-do__face:hover .mai-do__tile-name,
.mai-page .mai-do__face:focus-visible .mai-do__tile-name,
.mai-page .mai-do__tile.is-active .mai-do__tile-name {
    color: var(--role);
}

/* ---- Foot line ---- */
.mai-page .mai-do__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    text-wrap: balance;
}
.mai-page .mai-do__foot-star {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-accent);
    flex-shrink: 0;
}
.mai-page .mai-do__foot-star svg {
    width: 100%;
    height: 100%;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .mai-page .mai-do__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .mai-page .mai-do__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 440px) {
    .mai-page .mai-do__grid {
        grid-template-columns: 1fr;
    }
    .mai-page .mai-do__face {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-do__face,
    .mai-page .mai-do__tile,
    .mai-page .mai-do__tile-avatar,
    .mai-page .mai-do__legend-chip { transition: none; }
    .mai-page .mai-do__face:hover,
    .mai-page .mai-do__face:focus-visible,
    .mai-page .mai-do__tile.is-active .mai-do__face { transform: none; }
    .mai-page .mai-do__eyebrow-dot { animation: none; }
}

/* =====================================================================
   REVIEWER BADGE (.mai-reviewer)
   Reusable inline chip that stamps every "Ready for review" output
   with the name of the human on our team who signs it off. Designed
   to sit next to (or below) an existing review-state tag.
   Each instance should set --role and --role-rgb inline to match
   the reviewer.
   ===================================================================== */
.mai-page .mai-reviewer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem 0.22rem 0.22rem;
    background: rgba(var(--role-rgb, 255, 255, 255), 0.08);
    border: 1px solid rgba(var(--role-rgb, 255, 255, 255), 0.28);
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    white-space: nowrap;
}
/* On light-surface contexts, flip the text color */
.mai-page .mai-reviewer--on-light {
    color: #1D1D20;
    background: rgba(var(--role-rgb), 0.1);
    border-color: rgba(var(--role-rgb), 0.4);
}
.mai-page .mai-reviewer__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    background: #1b1b1f;
    border: 1.5px solid var(--role);
    flex-shrink: 0;
}
.mai-page .mai-reviewer__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mai-page .mai-reviewer__prefix {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.mai-page .mai-reviewer--on-light .mai-reviewer__prefix {
    color: rgba(29, 29, 32, 0.55);
}
.mai-page .mai-reviewer__name {
    color: var(--role);
}

/* Tight mode: used where vertical space is scarce (chat bubbles etc.) */
.mai-page .mai-reviewer--tight {
    padding: 0.18rem 0.45rem 0.18rem 0.18rem;
    font-size: 0.56rem;
    gap: 0.3rem;
}
.mai-page .mai-reviewer--tight .mai-reviewer__avatar {
    width: 14px;
    height: 14px;
    border-width: 1.25px;
}

/* =====================================================================
   THE WORKFLOW (.mai-flow)
   Six-step loop diagram showing how a request actually moves through
   us. Horizontal on desktop with animated connector lines; collapses
   to a clean vertical stack on smaller screens. The third step
   (team review) carries overlapping avatars.
   ===================================================================== */
.mai-page .mai-flow {
    position: relative;
    background: var(--color-dark);
    color: #fff;
    padding: clamp(4rem, 7vw, 6.5rem) clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden;
    isolation: isolate;
}
.mai-page .mai-flow::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%);
}
.mai-page .mai-flow::after {
    content: '';
    position: absolute;
    top: 10%;
    left: -10%;
    width: 55%;
    height: 80%;
    background: radial-gradient(ellipse,
        rgba(var(--color-accent-rgb), 0.08) 0%,
        transparent 65%);
    filter: blur(50px);
    pointer-events: none;
    z-index: -1;
}
.mai-page .mai-flow__inner {
    max-width: 84rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Header ---- */
.mai-page .mai-flow__head {
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 3.5vw, 3rem);
    text-align: center;
}
.mai-page .mai-flow__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.mai-page .mai-flow__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2);
    animation: maiPulseDot 2s ease-in-out infinite;
}
.mai-page .mai-flow__title {
    margin: 0 0 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
    text-transform: none;
}
.mai-page .mai-flow__sub {
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    max-width: 40rem;
    text-wrap: pretty;
}

/* ---- Loop diagram ---- */
.mai-page .mai-flow__loop {
    list-style: none;
    margin: 0 0 clamp(2rem, 3vw, 2.75rem);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.6rem, 1vw, 1rem);
    position: relative;
    counter-reset: step;
}

/* Horizontal connector line running behind the nodes — rendered as a
   pseudo-element on the ol, visible on wider layouts only. */
.mai-page .mai-flow__loop::before {
    content: '';
    position: absolute;
    top: clamp(2.5rem, 3.5vw, 3rem); /* centre of the icon row */
    left: 6%;
    right: 6%;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.18) 0,
        rgba(255, 255, 255, 0.18) 6px,
        transparent 6px,
        transparent 12px
    );
    z-index: 0;
    pointer-events: none;
}

.mai-page .mai-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: clamp(1.25rem, 1.8vw, 1.75rem) clamp(0.75rem, 1.2vw, 1rem);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    text-align: center;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.4s ease,
                background 0.4s ease;
}

/* Step number in the corner */
.mai-page .mai-flow__step-num {
    position: absolute;
    top: 0.6rem;
    left: 0.8rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.35);
}

/* Icon — the default small circle for most steps */
.mai-page .mai-flow__step-icon {
    width: clamp(2.25rem, 3vw, 2.75rem);
    height: clamp(2.25rem, 3vw, 2.75rem);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.4rem;
}
.mai-page .mai-flow__step-icon svg {
    width: 56%;
    height: 56%;
}
/* MAI-branded icon variant — applies the MAI gradient */
.mai-page .mai-flow__step-icon--mai {
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.38);
    color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.08);
}

/* Team avatars for step 03 */
.mai-page .mai-flow__step-team {
    display: inline-flex;
    margin-top: 0.4rem;
    padding-left: 0.5rem;
}
.mai-page .mai-flow__step-team-av {
    width: clamp(1.75rem, 2.4vw, 2.1rem);
    height: clamp(1.75rem, 2.4vw, 2.1rem);
    border-radius: 50%;
    overflow: hidden;
    background: #1b1b1f;
    border: 2px solid var(--color-dark);
    box-shadow: 0 0 0 1.5px var(--role);
    margin-left: -0.5rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.mai-page .mai-flow__step-team-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mai-page .mai-flow__step--team .mai-flow__step-team-av:hover {
    transform: translateY(-2px) scale(1.08);
    z-index: 2;
}

/* Emphasize the human-review node */
.mai-page .mai-flow__step--team {
    background: linear-gradient(180deg,
        rgba(var(--color-accent-rgb), 0.08),
        rgba(51, 207, 255, 0.04));
    border-color: rgba(var(--color-accent-rgb), 0.28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Label + description */
.mai-page .mai-flow__step-label {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.88rem, 1vw, 1rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.mai-page .mai-flow__step-label b {
    background: var(--mai-grad);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-weight: 700;
}
.mai-page .mai-flow__step-label sup {
    font-size: 0.55em;
    vertical-align: super;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 0.1em;
}
.mai-page .mai-flow__step-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    text-wrap: pretty;
    max-width: 13rem;
}

/* Right-pointing chevron between nodes on desktop */
.mai-page .mai-flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * clamp(0.3rem, 0.5vw, 0.5rem));
    width: 10px;
    height: 10px;
    border-top: 1.5px solid rgba(var(--color-accent-rgb), 0.5);
    border-right: 1.5px solid rgba(var(--color-accent-rgb), 0.5);
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
}

/* Reveal-on-scroll: nodes slide up and fade in with a stagger */
.mai-page .mai-flow__step {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        background 0.4s ease;
}
.mai-page .mai-flow__loop.is-revealed .mai-flow__step {
    opacity: 1;
    transform: translateY(0);
}
.mai-page .mai-flow__loop.is-revealed .mai-flow__step[data-step="01"] { transition-delay: 0.05s; }
.mai-page .mai-flow__loop.is-revealed .mai-flow__step[data-step="02"] { transition-delay: 0.15s; }
.mai-page .mai-flow__loop.is-revealed .mai-flow__step[data-step="03"] { transition-delay: 0.25s; }
.mai-page .mai-flow__loop.is-revealed .mai-flow__step[data-step="04"] { transition-delay: 0.35s; }
.mai-page .mai-flow__loop.is-revealed .mai-flow__step[data-step="05"] { transition-delay: 0.45s; }
.mai-page .mai-flow__loop.is-revealed .mai-flow__step[data-step="06"] { transition-delay: 0.55s; }

/* ---- Foot / return-loop line ---- */
.mai-page .mai-flow__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.58);
    text-align: center;
    text-wrap: balance;
}
.mai-page .mai-flow__foot-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent);
    flex-shrink: 0;
    animation: maiFlowReturn 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.mai-page .mai-flow__foot-arrow svg {
    width: 100%;
    height: 100%;
}
@keyframes maiFlowReturn {
    0%, 40%   { transform: rotate(0deg); }
    50%, 60%  { transform: rotate(-360deg); }
    61%, 100% { transform: rotate(0deg); }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .mai-page .mai-flow__loop {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.6rem, 1.3vw, 1rem);
    }
    .mai-page .mai-flow__loop::before {
        display: none;
    }
    .mai-page .mai-flow__step:not(:last-child)::after {
        display: none;
    }
}
@media (max-width: 600px) {
    .mai-page .mai-flow__loop {
        grid-template-columns: 1fr;
    }
    .mai-page .mai-flow__step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.9rem;
        padding: 1rem 1.1rem 1rem 2.8rem;
    }
    .mai-page .mai-flow__step-num {
        top: 50%;
        transform: translateY(-50%);
        left: 0.9rem;
    }
    .mai-page .mai-flow__step-desc {
        max-width: none;
        flex: 1;
    }
    .mai-page .mai-flow__step-team {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mai-page .mai-flow__step,
    .mai-page .mai-flow__step-team-av { transition: none; }
    .mai-page .mai-flow__step { opacity: 1; transform: none; }
    .mai-page .mai-flow__eyebrow-dot,
    .mai-page .mai-flow__foot-arrow { animation: none; }
}

/* =====================================================================
   STICKY SECTION NAV (.mai-sidenav)
   Fixed to the right edge, vertically centred. Shows a column of dots —
   one per section — with a label that slides in on hover. Active dot
   expands and glows in the MAI gradient.
   Hidden below 1280px where there is not enough horizontal room.
   ===================================================================== */

/* =====================================================================
   MAI FAQ
   ===================================================================== */
.mai-page .mai-faq {
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mai-page .mai-faq__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.mai-page .mai-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1rem;
}
.mai-page .mai-faq__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mai-grad, linear-gradient(135deg, #6e60ee, #9b55ee));
    flex-shrink: 0;
}
.mai-page .mai-faq__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.mai-page .mai-faq__title em {
    font-style: italic;
    background: var(--mai-grad, linear-gradient(135deg, #6e60ee, #9b55ee));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mai-page .mai-faq__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
    padding: 0;
}
.mai-page .mai-faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mai-page .mai-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    cursor: pointer;
    padding: 1.4rem 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    user-select: none;
    transition: color 0.2s ease;
}
.mai-page .mai-faq__q::-webkit-details-marker { display: none; }
.mai-page .mai-faq__q::after {
    content: '+';
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-accent, #6e60ee);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.mai-page .mai-faq__item[open] .mai-faq__q {
    color: rgba(255, 255, 255, 0.8);
}
.mai-page .mai-faq__item[open] .mai-faq__q::after {
    transform: rotate(45deg);
}
.mai-page .mai-faq__a {
    padding: 0 3rem 1.4rem 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}
.mai-page .mai-faq__a p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 767px) {
    .mai-page .mai-faq__a { padding-right: 0; }
}
.mai-page .mai-sidenav {
    position: fixed;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    pointer-events: none;
}
.mai-page .mai-sidenav__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    background: rgba(15, 15, 20, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    pointer-events: auto;
}
.mai-page .mai-sidenav__item {
    position: relative;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition:
        background 0.25s ease,
        transform  0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease;
    outline: none;
}

/* Label — slides in from the right of the dot */
.mai-page .mai-sidenav__item::after {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 0.65rem);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    white-space: nowrap;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(15, 15, 20, 0.7);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.mai-page .mai-sidenav__item:hover::after,
.mai-page .mai-sidenav__item.is-active::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Active state */
.mai-page .mai-sidenav__item.is-active {
    background: var(--mai-grad, #6E60EE);
    transform: scale(1.6);
    box-shadow: 0 0 8px 2px rgba(var(--color-accent-rgb), 0.45);
}
.mai-page .mai-sidenav__item:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.3);
}

/* Hide on screens too narrow to have room beside the content */
@media (max-width: 1279px) {
    .mai-page .mai-sidenav { display: none; }
}

/* ---- MAI COMMS — mobile: email panel + heading only ---- */
@media (max-width: 900px) {
    /* Hide flow arrows, relay nodes, output panel, prompt selectors, CTA */
    .mai-page .mai-comms__flow,
    .mai-page .mai-comms__relay,
    .mai-page .mai-comms__panel--output,
    .mai-page .mai-comms__m-links,
    .mai-page .mai-comms__prompts,
    .mai-page .mai-comms__footer {
        display: none !important;
    }

    /* Stage becomes a single-column block around the email panel */
    .mai-page .mai-comms__stage {
        display: block;
    }

    .mai-page .mai-comms__medium {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    /* Email panel always visible regardless of active medium */
    .mai-page .mai-comms__stage[data-medium="email"] .mai-comms__panel--email,
    .mai-page .mai-comms__stage[data-medium="text"]  .mai-comms__panel--email {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ---- MAI DO — mobile accordion ---- */
/* Hidden on desktop; JS builds and injects it on mobile only */
.mai-page .mai-do__m-accordion { display: none; }

@media (max-width: 720px) {
    /* Hide desktop chrome */
    .mai-page .mai-do__legend,
    .mai-page .mai-do__hint,
    .mai-page .mai-do__grid { display: none !important; }

    /* Show accordion */
    .mai-page .mai-do__m-accordion {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1.75rem;
    }

    /* Row */
    .mai-page .mai-do__m-row {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 3px solid rgba(var(--role-rgb, 255, 255, 255), 0.4);
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.025);
        transition: background 0.25s ease, border-color 0.25s ease;
    }
    .mai-page .mai-do__m-row.is-open {
        border-color: rgba(var(--role-rgb, 255, 255, 255), 0.2);
        border-left-color: var(--role, rgba(255, 255, 255, 0.5));
        background: rgba(var(--role-rgb, 255, 255, 255), 0.04);
    }

    /* Header button */
    .mai-page .mai-do__m-head {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        padding: 1rem 1.1rem;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
    }

    /* Colour dot */
    .mai-page .mai-do__m-dot {
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--role, rgba(255, 255, 255, 0.4));
    }

    /* Badge pill */
    .mai-page .mai-do__m-badge {
        font-family: 'Outfit', sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--role, rgba(255, 255, 255, 0.6));
        background: rgba(var(--role-rgb, 255, 255, 255), 0.1);
        padding: 0.2em 0.65em;
        border-radius: 20px;
        flex-shrink: 0;
    }

    /* Category name */
    .mai-page .mai-do__m-name {
        font-family: 'Outfit', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        flex: 1;
        line-height: 1.2;
    }

    /* Chevron */
    .mai-page .mai-do__m-chev {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        color: rgba(255, 255, 255, 0.3);
        transition: transform 0.3s ease, color 0.3s ease;
    }
    .mai-page .mai-do__m-row.is-open .mai-do__m-chev {
        transform: rotate(180deg);
        color: var(--role, rgba(255, 255, 255, 0.6));
    }

    /* Body */
    .mai-page .mai-do__m-body {
        display: none;
        flex-direction: column;
        gap: 1rem;
        padding: 0 1.1rem 1.3rem;
    }
    .mai-page .mai-do__m-row.is-open .mai-do__m-body { display: flex; }

    /* Category description */
    .mai-page .mai-do__m-desc {
        font-family: 'Outfit', sans-serif;
        font-size: 0.875rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.62);
        margin: 0;
    }

    /* Category tags */
    .mai-page .mai-do__m-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mai-page .mai-do__m-tags li {
        font-family: 'Outfit', sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 20px;
        padding: 0.25em 0.75em;
    }

    /* Crafted-by row */
    .mai-page .mai-do__m-crafter {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
    .mai-page .mai-do__m-crafter img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .mai-page .mai-do__m-crafter span {
        font-family: 'Outfit', sans-serif;
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.42);
    }
    .mai-page .mai-do__m-crafter strong {
        color: rgba(255, 255, 255, 0.72);
        font-weight: 600;
    }

    /* Example cards list */
    .mai-page .mai-do__m-cards {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    /* Single example card */
    .mai-page .mai-do__m-card {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.85rem 1rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 10px;
    }

    .mai-page .mai-do__m-card-badge {
        font-family: 'Outfit', sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--role, rgba(255, 255, 255, 0.5));
    }

    .mai-page .mai-do__m-card-title {
        font-family: 'Outfit', sans-serif;
        font-size: 0.88rem;
        font-weight: 700;
        color: #fff;
        margin: 0;
        line-height: 1.3;
    }

    .mai-page .mai-do__m-card-desc {
        font-family: 'Outfit', sans-serif;
        font-size: 0.78rem;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.52);
        margin: 0;
    }
}

/* =====================================================================
   MOBILE SCROLL PERFORMANCE
   ===================================================================== */

/* 1. Backdrop-filter — 64 instances stalls the GPU compositor during scroll */
@media (max-width: 900px) {
    .mai-page * {
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition-duration: 0s !important;
        will-change: auto !important;
    }
    .mai-page *::before,
    .mai-page *::after {
        animation: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition-duration: 0s !important;
    }
    .mai-page .mai-hero__orb,
    .mai-page .mai-hero__nodes {
        display: none !important;
    }
    .mai-page .mai-hero__pip.is-active::after {
        animation: none !important;
        width: 100%;
    }
    .mai-page .mai-ex.is-active .mai-ex__head,
    .mai-page .mai-ex.is-active .mai-msg--in,
    .mai-page .mai-ex.is-active .mai-msg--out {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .mai-page .mai-ex.is-active .mai-msg--thinking {
        display: none;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-ex.is-active .mai-msg--thinking {
        display: flex;
    }
    .mai-page .mai-hero__ribbon-dot,
    .mai-page .mai-hero__chat-live-dot,
    .mai-page .mai-msg__typing span,
    .mai-page .mai-comms__email-text::after,
    .mai-page .mai-comms__text-message::after,
    .mai-page .mai-comms__team-ring,
    .mai-page .mai-comms__mai-ring,
    .mai-page .mai-flow__foot-arrow,
    .mai-page .mai-sig__pulse,
    .mai-page .mai-rep__bell,
    .mai-page .mai-price__eyebrow-dot,
    .mai-page .mai-go__eyebrow-dot {
        animation: none !important;
    }

    .mai-page .mai-hero.is-mobile-animating .mai-hero__pip.is-active::after {
        animation: maiPipFill var(--mai-pip-dur, 8s) linear forwards !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-ex__head {
        animation: maiFadeSlide 0.45s 0.15s both ease-out !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-ex.is-active .mai-msg--in {
        animation: maiFadeSlide 0.55s 0.55s both ease-out !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-ex.is-active .mai-msg--thinking {
        animation:
            maiFadeSlide 0.4s 1.75s both ease-out,
            maiFadeOut 0.3s 3.55s both ease-in !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-ex.is-active .mai-msg--out {
        animation: maiFadeSlide 0.6s 3.9s both ease-out !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-msg__typing span {
        animation: maiTyping 1.2s ease-in-out infinite !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-msg__typing span:nth-child(2) {
        animation-delay: 0.15s !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-msg__typing span:nth-child(3) {
        animation-delay: 0.3s !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-hero__ribbon-dot,
    .mai-page .mai-hero.is-mobile-animating .mai-hero__chat-live-dot {
        animation: maiPulseDot 1.8s ease-in-out infinite !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-hero__signal-pulse {
        animation: maiSignal 1.6s ease-in-out infinite !important;
    }
    .mai-page .mai-hero.is-mobile-animating .mai-ex {
        transition-duration: 0.5s !important;
    }

    .mai-page .mai-comms.is-mobile-animating .mai-comms__email-text::after {
        animation: maiCommsCaret 1s steps(2) infinite !important;
    }
    .mai-page .mai-comms.is-mobile-animating .mai-comms__email-text,
    .mai-page .mai-comms.is-mobile-animating .mai-comms__email-subject,
    .mai-page .mai-comms.is-mobile-animating .mai-comms__email-meta,
    .mai-page .mai-comms.is-mobile-animating .mai-comms__email-send {
        transition-duration: 0.25s !important;
    }
    .mai-page .mai-comms.is-mobile-animating .mai-comms__email-send.is-sending {
        transition-duration: 0.18s !important;
    }
}

/* 2. Formerly-pinned section heights
   These sections have 280–360vh CSS heights for the scroll-scrub pin.
   Without the pin on mobile they become hundreds of vh of blank space.
   Reset to auto so they're only as tall as their content. */
@media (max-width: 900px) {
    .mai-page .mai-und,
    .mai-page .mai-dec,
    .mai-page .mai-build {
        height: auto !important;
    }
    .mai-page .mai-und__pin,
    .mai-page .mai-dec__pin,
    .mai-page .mai-build__pin {
        height: auto;
        min-height: 0;
    }
}

/* 3. Entrance animation start states
   Elements in the three formerly-pinned sections start at opacity:0 /
   offset transforms, waiting for the scroll-scrub to reveal them.
   On mobile the scrub never runs so they'd stay invisible.
   Force them visible so content is never white on mobile. */
@media (max-width: 900px) {
    /* mai-und (Understanding) */
    .mai-page .mai-und__cat,
    .mai-page .mai-und__link,
    .mai-page .mai-und__link--missing,
    .mai-page .mai-und__link-dot,
    .mai-page .mai-und__summary {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* mai-dec (Decision) */
    .mai-page .mai-opt__context {
        opacity: 1 !important;
        transition: none !important;
    }

    /* mai-build (Build) */
    .mai-page .mai-build__grid,
    .mai-page .mai-mod,
    .mai-page .mai-mod__corner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Submit popup — styles live in style.css (.submit-popup) */