/* ═══════════════════════════════════════════════════════════════════════════
   ai-ops-use-case.css
   Use-case-page-specific layout: hero, three-steps, where-the-line-sits,
   how-to-get-started, mid-cta, FAQ, related-workflows, engage section.
   Sources: Figma node 29026:4992 (Use Case — Financial Close Detail).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════ LAYOUT PRIMITIVES ══════════════════════
   v0.1.13: every section uses the same layout primitive — full-bleed bg,
   horizontal padding from --ao-section-pad-x, vertical padding from
   --ao-section-pad-y, inner content max-width from --ao-content-max
   centered. Section-specific overrides (hero left-anchor, etc.) layer on
   top. Change a layout dimension once in the tokens block and every
   section follows.
   ─────────────────────────────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-section {
    width: 100%;
    /* F-75 (2026-05-23): horizontal padding uses the same centered-anchor
       formula the hero override already uses. At ≤1640px viewports the
       calc resolves ≤ 64px and `max()` returns the flat 64px gutter
       (same behavior as before); at >1640px viewports every section's
       left/right edges align with the hero + Mid-CTA (both already use
       this formula). Pre-F-75 the flat `var(--ao-section-pad-x)` left a
       visible "step" between hero and body sections on wide monitors. */
    padding-top:    var(--ao-section-pad-y);
    padding-bottom: var(--ao-section-pad-y);
    padding-left:   max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)));
    padding-right:  max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)));
    margin: 0;
    box-sizing: border-box;
}
.ai-ops-use-case-body .ai-ops-uc-section > * {
    max-width: var(--ao-content-max);
    margin-left: auto;
    margin-right: auto;
}

/* ── Section backgrounds ──────────────────────────────────────────────────────
   The `.ai-ops-uc-top` shared wrapper rule (Hero + first dark section
   share a gradient canvas) lives in ai-ops-shared.css under the
   `.ai-ops-body` scope so both use-case AND hub templates inherit it.
   v1.0.25: wrapper rule promoted from use-case-body → shared scope.
   ──────────────────────────────────────────────────────────────────────────── */

/* Hero stays a see-through window onto the wrapper bg. */
.ai-ops-use-case-body .ai-ops-uc-section--hero {
    background: transparent;
}
/* Three Steps inherits the wrapper bg too — no own bg, no ::before band.
   The wrapper handles both the Figma navy band overlay (layer 2) and the
   solid `#191a1b` fill needed at the section's bottom edge. */
.ai-ops-use-case-body .ai-ops-uc-section--steps {
    position: relative;
    background: transparent;
}
.ai-ops-use-case-body .ai-ops-uc-section--steps > * {
    position: relative;
    z-index: 1;
}
/* Hero adds nav-overlay padding compensation. Coupled to --ao-nav-h via
   calc() in the tokens block. */
.ai-ops-use-case-body .ai-ops-uc-section--hero {
    padding-top:    var(--ao-hero-pad-top);
    padding-bottom: var(--ao-section-pad-y);
    /* v1.0.5 (F-023): grow padding-left/right at >1440 viewports so the hero
       text frame lands at the same x as the brand wordmark + breadcrumb +
       Three Steps grid. v1.0.3 + v1.0.4 used a margin-left calc on direct
       children — but Gutenberg's `.wp-block-group__inner-container.is-layout-constrained`
       wrapper sits between the section and the H1, so `> *` only matched
       the wrapper (which had max-width 1440 + auto margins, clamping the
       content to a centered 1440 box → H1 ended up at left=410 at 2260
       while brand was at 560). Switching to section padding makes the H1
       directly track the same calc the nav uses, with no Gutenberg
       wrapper interference. */
    padding-left:  max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)));
    padding-right: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)));
}
/* Mid-CTA + Engage: standalone bg-image sections.
   v1.0.4 (F-012d, F-015): Mid-CTA + Engage both refreshed with the actual
   Figma background images (re-fetched via Figma MCP from node 29026:4992).
   - Mid-CTA: agentic boxing-ring photo (`ready-to-pressure-test-it.png`,
     resized from 1920×1280 source to 1600×1067 via sips + JPEG-encoded at
     quality 85 with `.png` extension to match the legacy convention;
     ~347KB. F-94 2026-05-23, replaced the prior workspace-photo stock
     asset `midcta-bg.png`). Same positioning + gradient stack as before —
     right-anchored at auto-114%-height, with the layered horizontal
     feather + diagonal navy + teal-accent gradients dissolving the
     left ~50% so the H3 / sub / DualCTA stay legible against navy
     `#121320`.
   - Engage: dark blue gradient with subtle vignette (`engage-bg.png`,
     ~264KB PNG). Replaces the `luxury-bg.jpg` placeholder. Same fade-overlay
     technique as before — page-bg dissolves at top + bottom so there's no
     hard cut at the section boundary. */
.ai-ops-body .ai-ops-uc-section--mid {
    /* v1.0.10: matches Figma node 29462:3197 spec — diagonal gradient at
       256.92deg flows from black (bottom-left) into transparent (top-right)
       across the workspace photo, so there's a smooth fade rather than a
       hard image edge. Plus a subtle teal accent at the far bottom-left
       corner (Figma's secondary gradient).
       Image positioning: width auto with height = 114% of section height
       — matches Figma's `width: 65.69%; height: 114.1%; top: -7.05%`
       proportions (image is 1.5 aspect → at section height 553, image is
       947 × 631, anchored right with ~39px vertical overflow trimmed). */
    /* v1.0.11 (F-029): vertically center content within the section's
       min-height (553px). Pre-v1.0.11 the H3 + sub + button sat near the
       top because the section was `display: block`, leaving extra
       whitespace at the bottom. Flex column + justify-content:center
       pulls the content into the vertical middle of the section. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* v1.0.13 (F-034): align Mid-CTA content to the same x as Hero/Three
       Steps/FAQ content. Other sections use the centered-1440 anchor
       (`max(pad-x, calc(50% - half-width + pad-x))`) so at viewports >
       1480 the content stays inside the 1280-wide design column anchored
       to the section's left padding rather than slipping outward. Mid-CTA
       was using a flat 100px padding which left it visibly offset right
       of every other section above 1480 viewport. */
    padding-left:  max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)));
    padding-right: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)));
    /* v1.0.24 (F-041 reverted): workspace photo restored on Stas's
       request. Layered gradients above the photo provide the soft
       blend so the photo's hard left edge dissolves smoothly into
       the dark left half of the section.
         1. Teal accent leaking in from bottom-left (Figma layer 1).
         2. Diagonal navy → black fade across the section (Figma layer 2).
         3. Full-width horizontal feather: solid #121320 at left,
            transparent on right — covers the photo's hard pixel edge
            with a continuous tonal blend at every viewport.
         4. The workspace photo, anchored right, sized to its native
            aspect (height 114%, width auto). */
    background-color: #121320;
    background-image:
        linear-gradient(250.80deg,
            rgba(32, 34, 62, 0)        63.94%,
            rgba(106, 255, 198, 0.2)  113.87%),
        linear-gradient(256.92deg,
            rgba(32, 34, 62, 0)  4%,
            rgb(0, 0, 0)         82%),
        linear-gradient(to left,
            rgba(18, 19, 32, 0)     0%,
            rgba(18, 19, 32, 0.15) 15%,
            rgba(18, 19, 32, 0.40) 30%,
            rgba(18, 19, 32, 0.70) 45%,
            rgba(18, 19, 32, 0.92) 60%,
            rgb(18, 19, 32)        75%),
        url('../img/bg/ready-to-pressure-test-it.png');
    background-size: 100% 100%, 100% 100%, 100% 100%, auto 114%;
    background-position: center, center, center, right center;
    background-repeat: no-repeat;
    min-height: 553px;
}
/* v1.0.23 (F-040): engage section bg replaced with pure CSS gradient.
   Same atmospheric palette as .ai-ops-uc-top + .ai-ops-uc-section--mid
   (blue accent right, dark vignette left, navy → #1a1a1a vertical
   curve). Top + bottom both resolve to #1a1a1a so the section blends
   into Related (above) and the footer (below) seamlessly. */
.ai-ops-use-case-body .ai-ops-uc-section:has(.ai-ops-uc-engage-grid) {
    background-color: #1a1a1a;
    background-image:
        radial-gradient(ellipse 60% 70% at 92% 30%,
            rgba(80, 140, 200, 0.25)  0%,
            rgba(40,  80, 130, 0)    70%),
        radial-gradient(ellipse 60% 70% at 5% 70%,
            rgba(0, 0, 0, 0.40)  0%,
            rgba(0, 0, 0, 0)    70%),
        linear-gradient(180deg,
            #1a1a1a   0%,
            #181a25  20%,
            #161a2c  45%,
            #14182e  60%,
            #181a25  80%,
            #1a1a1a 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center, center, center;
    background-repeat: no-repeat;
}
/* Sections that need to paint over main's image bleed (Where Line + How
   We Start come after Steps and would otherwise show the tail end of
   main's bg if it bled past Steps).
   v1.0.4 (F-010): use the new --ao-bg-section token (#1A1A1A — Figma
   "Secondary/2") instead of --ao-bg-page (pure black). The page-level
   token stays at #000000 so fade-overlay anchor stops below don't shift. */
.ai-ops-use-case-body .ai-ops-uc-section--dark {
    background: var(--ao-bg-section);
}

/* v0.1.47: eyebrow base rules promoted to shared.css (.ai-ops-body scope)
   so all templates inherit the dot+uppercase treatment from one place.
   Use-case-specific eyebrow tweaks (e.g. .ai-ops-uc-shead .ai-ops-uc-eyebrow
   centering) stay below. */

/* Section header (eyebrow + h2 + sub).
   v0.1.24: gap normalized to 20px across every section, AND every direct
   child has margin: 0 to make sure the flex gap is the only thing
   controlling vertical rhythm. Without the explicit `margin: 0` the
   theme can leak default <h2>/<p> margins that stack with the flex gap,
   making spacing inconsistent across sections. */
.ai-ops-use-case-body .ai-ops-uc-shead {
    text-align: center;
    max-width: var(--ao-shead-max);
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.ai-ops-use-case-body .ai-ops-uc-shead > * {
    margin: 0 !important; /* ensure flex `gap` is the sole spacing source */
}
.ai-ops-use-case-body .ai-ops-uc-shead .ai-ops-uc-eyebrow {
    justify-content: center;
}
.ai-ops-use-case-body .ai-ops-uc-shead .sub {
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--ao-text-body);
    max-width: var(--ao-shead-sub-max);
}
.ai-ops-use-case-body .ai-ops-uc-shead h2 {
    letter-spacing: 0.8px;
}

.ai-ops-use-case-body .ai-ops-uc-card {
    background: var(--ao-bg-card);
    border: 1px solid var(--ao-bg-card-bord);
    border-radius: 16px;
    padding: 24px;
}
/* v0.1.25: step cards inside the steps grid use flex column so the body
   paragraph fills the empty space. Without this, when one card's heading
   wraps to 3 lines and another to 2, the shorter card has a big visible
   empty zone at its bottom — Step 2 (3-line heading) and Step 1 (2-line
   heading) currently look uneven. With flex + the body paragraph getting
   `margin-top: auto` (Gutenberg wraps content in an inner-container, so we
   target that wrapper) the bottom of every body paragraph aligns with the
   bottom of the card. */
.ai-ops-use-case-body .ai-ops-uc-steps-grid .ai-ops-uc-card {
    display: flex;
    flex-direction: column;
}
/* The card's wp-block-group__inner-container holds the heading + body.
   Make it stretch so the children below the heading fill remaining space. */
.ai-ops-use-case-body .ai-ops-uc-steps-grid .ai-ops-uc-card > .wp-block-group__inner-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Three Steps card heading: Figma `Large/bold` token = 19 Bold lh-1.4 ls-0.38
   white. Mine was rendering 23px because the block uses <h4> which inherits
   the global h4 (23). Override specifically inside step cards.
   v0.1.22: added margin-bottom 20 so there's a visible break between the
   heading and the body paragraph (was margin: 0 — heading and body touched). */
.ai-ops-use-case-body .ai-ops-uc-steps-grid .ai-ops-uc-card h3,
.ai-ops-use-case-body .ai-ops-uc-steps-grid .ai-ops-uc-card h4 {
    /* F-100 (2026-05-10): templates emit <h3> now (was <h4>) to fix
       heading-order axe-core violation. Both selectors retained so the
       Figma typography survives any future rollback. */
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.38px;
    color: #ffffff;
    margin: 0 0 20px;
}
/* Three Steps card body: Figma `Base/regular` = 16 Regular lh-1.7 ls-0.32
   color #d2d2d2. Mine was rendering at line-height 16px (= 1.0 cramped) due to
   the Gutenberg/theme line-height leak on .wp-block-group. Force the right
   values so the body text breathes correctly. */
.ai-ops-use-case-body .ai-ops-uc-steps-grid .ai-ops-uc-card p:not(.ai-ops-uc-step-num) {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: #d2d2d2;
    margin: 0;
}
/* Step labels keep their own typography (16 Medium ls-0.32 uppercase #a5a5a5)
   but need the inherited 1.7 line-height re-asserted (the line-height leak
   above affects them too). */
.ai-ops-use-case-body .ai-ops-uc-step-num {
    line-height: 1.7;
}
.ai-ops-use-case-body .ai-ops-uc-card--padded {
    padding: 32px 48px;
}

/* ── Hero ──────────────────────────────────────────────────────────────────────
   Figma: 1440 × 719, padding 100px 150px, content-frame width 620px.
   Vertical rhythm (from Figma's frame gaps):
     breadcrumb absolute at top:18 left:150 (above content)
     chip → H1: gap 32px
     H1 → sub: gap 32px
     sub → CTA row: gap 40px (frame-to-frame)
     CTA row → footnote: gap 40px (frame-to-frame)
   ──────────────────────────────────────────────────────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-section--hero {
    position: relative; /* anchor for absolute breadcrumb */
    /* padding-top set in the bg block above via --ao-hero-pad-top */
}
.ai-ops-use-case-body .ai-ops-uc-section--hero > * {
    max-width: var(--ao-hero-content-max);
    /* v1.0.5 (F-023): margin-left calc removed — Gutenberg's
       `.wp-block-group__inner-container.is-layout-constrained` wrapper
       sits between the section and the H1, intercepting `> *` and
       leaving the H1 stuck at the wrapper's clamped left edge. Section
       padding now does the centering work via the
       `max(150, calc(50% - 720 + 150))` rule on `.ai-ops-uc-section--hero`. */
    margin-left: 0;
    margin-right: 0;
}
/* Breadcrumb: absolute-positioned at section top-left. Coupled to --ao-nav-h
   via --ao-breadcrumb-top so any nav height change flows through. */
.ai-ops-use-case-body .ai-ops-uc-breadcrumb {
    position: absolute;
    top: var(--ao-breadcrumb-top);
    /* v1.0.5: matches the hero section's padding-left calc (F-023). At
       ≤1440 → 150 from viewport. At wider viewports → centered-1440 box
       left edge + 150 padding so the breadcrumb sits at the same x as
       the H1 + brand wordmark above. */
    left: max(var(--ao-section-pad-x), calc(50% - var(--ao-design-half-width) + var(--ao-section-pad-x)));
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: #bcbcbc;
    margin: 0;
    max-width: none !important;
}
.ai-ops-use-case-body .ai-ops-uc-breadcrumb a {
    color: #bcbcbc;
}
.ai-ops-use-case-body .ai-ops-uc-breadcrumb .sep {
    margin: 0; /* gap on the parent flex handles spacing */
    color: #8f8f8f;
}
/* Hero eyebrow chip — gap-32 below to H1 */
.ai-ops-use-case-body .ai-ops-uc-section--hero .ai-ops-uc-eyebrow {
    margin: 0 0 32px;
}
.ai-ops-use-case-body .ai-ops-uc-hero-h1 {
    margin: 0 0 32px;
    max-width: 620px;
}
.ai-ops-use-case-body .ai-ops-uc-hero-sub {
    font-size: 16px;
    line-height: 1.7;
    color: #d2d2d2;
    max-width: 620px;
    margin: 0 0 24px;
}
/* 2026-05-24: standalone metric chip — scannable value-prop sitting
   between sub and CTA row. Brand-blue accent border + left bar so the
   eye lands on it even at a glance. Tight to the sub (24px gap above)
   and 40px to the CTA below so it reads as the sub's "punchline." */
.ai-ops-use-case-body .ai-ops-uc-hero-metric {
    display: inline-block;
    margin: 0 0 40px;
    padding: 10px 18px 10px 14px;
    background: rgba(81, 161, 255, 0.10);
    border-left: 3px solid #51A1FF;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.2px;
    max-width: 620px;
}
.ai-ops-body .ai-ops-uc-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 40px;
}
.ai-ops-body .ai-ops-uc-cta-row .ai-ops-btn,
.ai-ops-body .ai-ops-uc-cta-row .wp-block-button__link {
    margin: 0;
}
/* Hero footnote ("Ranked plan…" + "Five minutes…").
   v0.1.21: more breathing room above the bold label; tighter gap between the
   two sentences. Selector qualified with `p.ai-ops-uc-foot` (specificity
   0,2,1) so it ties with the theme-leak reset on `.ai-ops-uc-section p` —
   ai-ops-use-case.css loads after ai-ops-shared.css, so source order makes
   this rule win for line-height. */
.ai-ops-use-case-body p.ai-ops-uc-foot {
    font-size: 16px;
    color: #d2d2d2;
    letter-spacing: 0.32px;
    line-height: 1.4;       /* was 1.7 — tighter gap between the two lines (the <br> between sentences inherits this) */
    margin: 32px 0 0;        /* was 0 — 32px space above the bold label, separating it from the CTA row */
}
.ai-ops-use-case-body p.ai-ops-uc-foot strong {
    color: #ffffff;
    font-weight: 700;
}

/* Hero microphone button — circular gradient button at hero's bottom-right.
   Position matches Figma node 29094:31513 (64x64 frame at x=1328, y=603 within
   the 1440-wide hero — i.e. 48px from right, 52px from bottom). The icon is
   added to the hero by `assets/js/ai-ops-hero-mic.js` on DOM ready, with a
   click handler that dispatches `agent-widget:open` (the prototype's hook)
   with a scroll-to-engage fallback if no widget listener is bound.

   The hero section is `position: relative` (set in the hero block above for
   the absolute breadcrumb), so this button anchors against the hero box.

   v0.1.25: at viewports > 1440 the right edge of the hero is empty space
   (content frame is left-anchored at 620px wide). Pinning the mic to
   `right: 48px` from the section edge made the button drift into that
   empty area, disconnected from any content. Now uses `right: max(48px,
   calc(50% - var(--ao-design-half-width) + 48px))` so at 1440 it sits exactly where Figma had it,
   and at wider viewports it stays near the 1440-equivalent right edge of
   the page content (50% - 720px = the right edge of a centered 1440 box). */
.ai-ops-body .ai-ops-uc-hero-mic {
    position: absolute;
    /* v1.0.28 (F-A4): right 60 → 48, bottom 52 → 67 to match Figma node
       29129:1147 hub mic position (frame at x=1328 in 1440 → 48 from
       right; bottom calc 738 - 603 - 64 = 71 ≈ 67 with rounding). The
       v1.0.4 hv-widget alignment is no longer relevant — hv widget is
       still disabled per F-037. */
    right: max(48px, calc(50% - var(--ao-design-half-width) + 48px));
    bottom: 67px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--ao-grad-primary-tighter);
    color: var(--ao-button-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(80, 213, 255, 0.30);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 5;
}
.ai-ops-body .ai-ops-uc-hero-mic:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(80, 213, 255, 0.45);
}
.ai-ops-body .ai-ops-uc-hero-mic:focus-visible {
    outline: 2px solid var(--ao-link-hover);
    outline-offset: 4px;
}
.ai-ops-body .ai-ops-uc-hero-mic svg {
    width: 28px;
    height: 28px;
    pointer-events: none;
}

/* ── Three Steps ──
   v0.1.22: margin-top bumped 56 → 96 for more breathing room between the
   "Three steps per X." section header and the cards. */
.ai-ops-use-case-body .ai-ops-uc-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin: 96px auto 0;
}
.ai-ops-use-case-body .ai-ops-uc-steps-grid > .ai-ops-uc-card,
.ai-ops-use-case-body .ai-ops-uc-steps-grid > .wp-block-group {
    max-width: none;
}
.ai-ops-use-case-body .ai-ops-uc-step-num {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #a5a5a5;
    text-transform: uppercase;
    letter-spacing: 0.32px;
    margin: 0 0 16px;
}
/* v0.1.22: arrow icon coloured with the accent blue (--ao-link = #51a1ff)
   so it visually punctuates the STEP label instead of dissolving into the
   muted grey of the label text. */
.ai-ops-use-case-body .ai-ops-uc-step-num::before {
    content: '→';
    color: var(--ao-link);
    font-size: 16px;
}

/* ── Where the line sits ── */
.ai-ops-use-case-body .ai-ops-uc-line-block {
    max-width: 800px;
    margin: 0 auto;
}
.ai-ops-use-case-body .ai-ops-uc-line-block p {
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: #d2d2d2;
    margin: 0 0 32px;
}
.ai-ops-use-case-body .ai-ops-uc-line-block h3,
.ai-ops-use-case-body .ai-ops-uc-line-block h4 {
    /* Figma "Specifically, agents don't:" — Large/bold (19px Bold lh 1.4 ls 0.38)
       F-100: <h4> → <h3> at template level; CSS matches both for resilience. */
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.38px;
    color: #ffffff !important;
    margin: 0 0 16px;
}
.ai-ops-use-case-body .ai-ops-uc-line-block ul {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.ai-ops-use-case-body .ai-ops-uc-line-block li {
    position: relative;
    padding-left: 24px;
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: #d2d2d2;
}
.ai-ops-use-case-body .ai-ops-uc-line-block li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, #50d5ff 0%, #acb9ff 100%);
}
.ai-ops-use-case-body .ai-ops-uc-line-quote {
    padding: 8px 0 8px 19px;
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #50d5ff 0%, #acb9ff 100%) 1;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.46px;
    color: #ffffff !important;
    margin: 0 0 32px !important;
}
.ai-ops-use-case-body .ai-ops-uc-data-label {
    font-family: 'Poppins', sans-serif;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: #97c7ff !important;
    margin: 0 0 4px !important;
}
.ai-ops-use-case-body .ai-ops-uc-data-body {
    font-size: 19px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.38px;
    color: #d2d2d2 !important;
    margin: 0 !important;
}
/* v1.0.2: Where-Line-Sits has TWO stacked data blocks per Figma node
   29026:4992 (29377:5528 frame is the second one). The second block's
   label needs gap-32 above it so it doesn't run into the first block's
   body. Figma frame gap from "Data Privacy Block" to "Frame" (the
   secondary block) is 32px. */
.ai-ops-use-case-body .ai-ops-uc-data-body + .ai-ops-uc-data-label {
    margin-top: 32px !important;
}

/* ── How to Get Started ─────────────────────────────────────────────────────
   Figma: 900 wide, gap-16 between cards. Each card: flex gap-40 items-start,
   padding 32 48 rounded-16 bg #272727 border #3b3b3b.
   Number col: auto-width gradient text "01"/"02"/"03" (23 Bold lh 1.2).
   Content col: heading 22 Bold lh 1.3 + body 16 Regular lh 1.7, gap-16.

   GUTENBERG STRUCTURE NOTE: The block markup wraps the heading + body in a
   nested `<div class="wp-block-group">`, so AFTER `display:contents` on the
   numbered-card's inner-container, the actual grid items are:
     1. <p class="num">  → column 1 (auto, fits "01")
     2. <div class="wp-block-group">  → column 2 (1fr; flex-col stacks h3+p)
   Targeting `h3` / `p` with `grid-column` is a no-op (they're not grid items).
   ──────────────────────────────────────────────────────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-numbered-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}
.ai-ops-use-case-body .ai-ops-uc-numbered-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 40px;
    align-items: start;
}
.ai-ops-use-case-body .ai-ops-uc-numbered-card .num {
    grid-column: 1;
    align-self: start;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: 0.46px;
    background: linear-gradient(90deg, #50d5ff 0%, #acb9ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0;
}
/* Pin the inner content wrapper (Gutenberg's nested wp-block-group) to col 2
   and make it a flex-col so heading and body stack with proper gap. */
.ai-ops-use-case-body .ai-ops-uc-numbered-card > .wp-block-group {
    grid-column: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ai-ops-use-case-body .ai-ops-uc-numbered-card h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.44px;
    color: #ffffff;
    margin: 0;
}
.ai-ops-use-case-body .ai-ops-uc-numbered-card p:not(.num) {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: #d2d2d2;
    margin: 0;
}

/* ── Mid-CTA ───────────────────────────────────────────────────────────────
   Figma "How It Works Section": gap-56 px-150 py-100 items-center.
   Inner CTA Block: gap-40 (sub→button) flex-col items-center text-center.
   Header: gap-20 (h3→sub).
   H3 33 Bold lh-1.2 ls-0.66 white w-700.
   Sub 16 Regular lh-1.7 ls-0.32 #d2d2d2 w-620.
   Button h-59 px-32 py-16 rounded-8 gradient `247.10deg #50d5ff → #acb9ff`
   text "Tell us what to automate" Medium 19 lh-1.4 ls-0.38 #21054f.
   ──────────────────────────────────────────────────────────────────────────── */
/* v1.0.4 (F-012a/b/c) + v1.0.13 (F-034): Mid-CTA left-aligned to match
   other sections. The section now uses the centered-1440 anchor padding
   (see .ai-ops-uc-section--mid above), so the wrapper just needs to
   defeat Gutenberg's `is-layout-constrained` auto-centering (which would
   otherwise put `margin: 0 auto` on the wrapper and visually re-center
   it). `align-self: flex-start` pins it to the section's left padding;
   `margin-left: 0 !important` overrides the constrained-layout rule. */
.ai-ops-body .ai-ops-uc-mid-cta {
    text-align: left;
    align-self: flex-start;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.ai-ops-body .ai-ops-uc-mid-cta h3 {
    /* v1.0.28 (F-E2 + F-E4): explicit font-size + letter-spacing per
       Figma 29462:3197 (H3 spec: 40px Bold, lh 1.2, ls 0.8). Without
       this, .ai-ops-body h3 default of 33px takes effect. */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 0.8px;
}
.ai-ops-body .ai-ops-uc-mid-cta p {
    /* v1.0.28 (F-E3): font-size 16 → 19 per Figma sub spec. */
    margin-top: 0;
    margin-bottom: 40px; /* gap-40 between sub and button (was 24) */
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: #d2d2d2;
}
.ai-ops-body .ai-ops-uc-mid-cta .ai-ops-uc-cta-row {
    justify-content: flex-start;
}

/* ── FAQ ────────────────────────────────────────────────────────────────────
   Figma: 900 wide, gap-16 between items. Each item p-32 rounded-8 bg #272727
   with optional drop-shadow + backdrop-blur. Header has 19px Bold + chevron
   indicator (24px arrow_down). Body Regular 16px lh 1.7 color #bcbcbc.
   ──────────────────────────────────────────────────────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 48px auto 0;
}
.ai-ops-use-case-body .ai-ops-uc-faq-item {
    position: relative;
    background: #272727;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 8px;
    padding: 32px;
    padding-right: 80px; /* leave room for chevron */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ai-ops-use-case-body .ai-ops-uc-faq-item h3,
.ai-ops-use-case-body .ai-ops-uc-faq-item h4 {
    /* F-100: <h4> → <h3>. Both selectors retained for safety. */
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.38px;
    color: #ffffff;
    margin: 0 0 16px;
}
/*
 * v1.3.6 (2026-05-17, QA-AUDIT P1-11): heading now wraps a real <button>.
 * Reset the button chrome so it visually behaves exactly like the bare
 * heading did (inherits typography, full-width hit target, cursor cue).
 */
.ai-ops-use-case-body .ai-ops-uc-faq-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
.ai-ops-use-case-body .ai-ops-uc-faq-trigger:focus-visible {
    outline: 2px solid var(--ao-accent-blue, #39acff);
    outline-offset: 2px;
    border-radius: 2px;
}
.ai-ops-use-case-body .ai-ops-uc-faq-item p {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: #bcbcbc;
    margin: 0;
}
/* Chevron indicator (CSS-only — emulates Figma's arrow_down icon).
   Default state: pointing DOWN (rotate 45deg). When item is OPEN (data-open
   set by ai-ops-faq.js), rotates to point UP (rotate -135deg). */
.ai-ops-use-case-body .ai-ops-uc-faq-item::after {
    content: '';
    position: absolute;
    top: 36px;
    right: 32px;
    width: 12px;
    height: 12px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    pointer-events: none;
}
.ai-ops-use-case-body .ai-ops-uc-faq-item[data-open="true"]::after {
    transform: rotate(-135deg); /* chevron up */
    top: 42px; /* slight offset so the rotated arrow looks centered */
}
/* FAQ accordion body visibility: when an item is closed, hide every
   sibling that comes after the question heading. v1.0.13 (F-035) fix:
   answers are wrapped in a `<div>` (Gutenberg WYSIWYG output for ACF
   wysiwyg fields), so the prior `h4 ~ p` selector never matched —
   leaving the answer always visible. `h4 ~ *` catches the wrapper div,
   the inline `<p>`, and any future markup the editor produces. */
.ai-ops-use-case-body .ai-ops-uc-faq-item[data-open="false"] > h4 ~ *,
.ai-ops-use-case-body .ai-ops-uc-faq-item[data-open="false"] > h3 ~ * {
    display: none;
}
/* Smooth padding adjustment when collapsed (less vertical space) */
.ai-ops-use-case-body .ai-ops-uc-faq-item[data-open="false"] {
    padding-bottom: 32px; /* same as Figma's closed-card padding */
}
/* Heading inside the item: make it visually obvious that it's clickable
   when the JS adds role="button". Hover state. F-100: now h3 (was h4). */
.ai-ops-use-case-body .ai-ops-uc-faq-item h3[role="button"]:hover,
.ai-ops-use-case-body .ai-ops-uc-faq-item h4[role="button"]:hover,
.ai-ops-use-case-body .ai-ops-uc-faq-item p[role="button"]:hover {
    color: #97c7ff;
}
.ai-ops-use-case-body .ai-ops-uc-faq-item h3[role="button"]:focus-visible,
.ai-ops-use-case-body .ai-ops-uc-faq-item h4[role="button"]:focus-visible,
.ai-ops-use-case-body .ai-ops-uc-faq-item p[role="button"]:focus-visible {
    outline: 2px solid #51a1ff;
    outline-offset: 4px;
    border-radius: 2px;
}

/* ── Related Workflows ──────────────────────────────────────────────────────
   Figma: 1140 wide, 3 cards w-364 each, gap-24, items-center self-stretch.
   Each card has a 56×56 icon frame (top-left), heading 23 Bold lh1.2, then
   "See the workflow" link 19 Medium #51a1ff underlined.
   We add a CSS-only icon placeholder (glassmorphic square) since the actual
   Figma icons (clock/invoice/memo) are PNG/SVG assets — out of scope.
   ──────────────────────────────────────────────────────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1140px;
    margin: 64px auto 32px;
}
/* Related Workflows card.
   v0.1.24:
   - Hover effect removed (no transform, no border tint) — was reading as
     "interactive button" but the card is just a link to another flow page.
     Kept the bare cursor: pointer on the inner <a>.
   - Icon swapped from glassmorphic placeholder square to a real inline SVG
     glyph (chosen at the .ai-ops-uc-related-card[data-icon="..."] level so
     content can pick which one). Default: arrow-right glyph, blue accent.
   - "See the workflow" link: bumped margin-top to push it down clear of
     the heading. Was relying on the card's flex `gap: 24px`; now the link
     gets an extra 24px on top so the heading→link gap totals 48px. */
.ai-ops-use-case-body .ai-ops-uc-related-card {
    position: relative;
    background: var(--ao-bg-card);
    border: 1px solid var(--ao-bg-card-bord);
    border-radius: 16px;
    padding: 24px;
    /* v1.0.4 (F-014a): bumped from 96 → 120 so the heading sits ~32px below
       the icon's bottom edge (was ~16px). Matches the Figma target screenshot. */
    padding-top: 120px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* v1.0.12 (F-033 redo): icon frame matches Figma node 29127:32618
   exactly — transparent fill (no rgba dark bg), uniform 1px solid
   rgba(255,255,255,0.24) border across all 3 cards, backdrop-blur 10px.
   Reverts the v1.0.11 cyan/purple/amber per-card rotation per
   round-2 feedback. Icon glyph color stays white via the CSS-mask
   ::after rule below. */
.ai-ops-use-case-body .ai-ops-uc-related-card::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* v1.0.4 (F-014c): icon glyph rendered via CSS-mask so its color tracks
   `color: #ffffff`. Three icons (clock / checkmark / document) rotate
   across the 3 cards via :nth-of-type(3n+1|2|0) — same rotation as before. */
.ai-ops-use-case-body .ai-ops-uc-related-card::after {
    content: '';
    position: absolute;
    top: 40px;             /* 24 + (56-24)/2 = 40 → vertical center of the 56-tall frame */
    left: 40px;            /* same idea horizontally */
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    -webkit-mask: url('../img/icons/related-clock.svg') no-repeat center / contain;
            mask: url('../img/icons/related-clock.svg') no-repeat center / contain;
    pointer-events: none;
    display: block;
}
.ai-ops-use-case-body .ai-ops-uc-related-grid .ai-ops-uc-related-card:nth-of-type(3n+2)::after {
    -webkit-mask-image: url('../img/icons/related-checkmark.svg');
            mask-image: url('../img/icons/related-checkmark.svg');
}
.ai-ops-use-case-body .ai-ops-uc-related-grid .ai-ops-uc-related-card:nth-of-type(3n)::after {
    -webkit-mask-image: url('../img/icons/related-document.svg');
            mask-image: url('../img/icons/related-document.svg');
}
/* v1.0.12 (F-030 reimpl): Related Workflows footer link per Figma
   29029:4992. "More workflows, one hub. <a>See all {Role} workflows</a>"
   sits centered below the 3 cards with 48px top gap. The <a> uses the
   same accent-blue underlined treatment as the in-card "See the
   workflow →" link (#51A1FF, Poppins Medium 19/1.4). */
.ai-ops-use-case-body .ai-ops-uc-related-foot {
    margin: 48px auto 0;
    text-align: center;
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--ao-text-body);
}
.ai-ops-use-case-body .ai-ops-uc-related-foot a,
.ai-ops-use-case-body .ai-ops-uc-related-foot .link {
    color: #51a1ff;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}
.ai-ops-use-case-body .ai-ops-uc-related-foot a:hover {
    text-decoration: none;
}

/* v0.1.37: voice icon on the Talk Card "Start the conversation" CTA.
   Replaces the prior 🎤 emoji glyph (see Re-sync note in v0.1.37 changelog).
   The span lives inside the <a> link text; absolute-positioned at the link
   would be over-engineered. Inline-block + background-image is enough — and
   the SVG fill is forced to the dark button text color via mask, so the
   icon matches the button label color in both default and hover states. */
.ai-ops-body .ai-ops-uc-cta-voice {
    /* v1.0.14 (F-036): mic icon per Figma node 29476:4423 — 32×32 box,
       glyph natural aspect 17.12 × 27.04 (taller than wide). Earlier the
       voice.svg shipped with `preserveAspectRatio="none"` baked in,
       which forced the browser to stretch the glyph regardless of
       `mask-size: contain`. SVG fixed in this version; CSS now sets the
       icon to 32×32 (Figma spec) with explicit `mask-size: 17.12px 27.04px`
       so the glyph renders at its natural ratio centered in the box. */
    display: inline-block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    margin-right: 10px;
    vertical-align: -8px;
    background-color: currentColor;
    -webkit-mask: url('../img/icons/voice.svg') no-repeat center;
            mask: url('../img/icons/voice.svg') no-repeat center;
    -webkit-mask-size: 17.12px 27.04px;
            mask-size: 17.12px 27.04px;
}
/* v1.0.11 (F-031): footnote under the Talk Card CTA. Mirrors the hero
   footnote (`p.ai-ops-uc-foot`) styling — same 11px Poppins, same dim
   gray. Sits 20px below the CTA button. Copy comes from
   aiops_shared('engage_voice_foot'); section template hides the <p>
   when the value is empty. */
.ai-ops-body .ai-ops-uc-engage-foot {
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.22px;
    color: #8f8f8f;
    margin: 20px 0 0;
}
/* v1.0.4 (F-014c): the prior `display: none` no-op was removed so the new
   `::after` icon-glyph rule earlier in this file (under the gradient-border
   block) renders. The icon is now rendered via CSS-mask on ::after with
   color: #fff so the glyph reads white per Figma. */
.ai-ops-use-case-body .ai-ops-uc-related-card h3 {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.46px;
    color: var(--ao-text-primary);
    margin: 0;
}
.ai-ops-use-case-body .ai-ops-uc-related-card .link,
.ai-ops-use-case-body .ai-ops-uc-related-card a {
    font-family: var(--ao-font);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.38px;
    color: var(--ao-link);
    text-decoration: underline;
    margin-top: auto; /* push to bottom of the flex card so spacing is consistent */
    padding-top: 24px; /* extra breathing room above "See the workflow" */
}
.ai-ops-use-case-body .ai-ops-uc-related-card a:hover {
    color: var(--ao-link-hover);
}

/* v1.0.2: Company + Role row is now visible per Figma node 29026:4992.
   The bundled HTML has them inside a `display:grid; grid-template-columns:
   1fr 1fr; gap:16px` wrapper div, so they render side-by-side as Figma
   intends. Form patch script (B.3) inserts a Full Name field as the first
   input on every use-case page so the form matches Figma's 5-field layout
   (Full Name / Work email / Company + Role row / Workflow textarea).
   Previous v0.1.24 rule that hid Company + Role removed. */

/* ── Engage Section ─────────────────────────────────────────────────────────
   Figma: section bg #191a1b w/ rotated gradient image overlay (out of scope).
   Header 900 wide, gap-16. Sub at 17px lh 1.65 (custom token).
   Inner row 1140 wide: Talk Card flex-1 + 80px OR-divider + Form Card flex-1.
   Each card: bg rgba(25,26,27,0.8) border rgba(255,255,255,0.24) rounded-8
              padding 40px 32px backdrop-blur-10.
   Card heading: 26px Bold lh 1.3 ls 0.52 (NOT the H3 33 default!).
   Body Regular 16 lh 1.7. Footnote 11 lh 1.2 #8f8f8f.
   ──────────────────────────────────────────────────────────────────────────── */
.ai-ops-body .ai-ops-uc-engage-grid {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 0;
    max-width: 1140px;
    margin: 64px auto 0;
    align-items: stretch;
}
.ai-ops-body .ai-ops-uc-engage-card {
    /* v1.0.28 (F-G1/G2): bg opacity 0.8 → 0.4 (lighter glassmorphism
       per Figma); padding axis 40×32 → 32×40 to match Figma engage spec. */
    background: rgba(25, 26, 27, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    padding: 32px 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}
/* Make the inner-container a flex-col so margin-top:auto on the button can
   push it (and the footnote) to the bottom — matches Figma's `justify-between`
   intent (header group at top, button group at bottom of card). */
.ai-ops-body .ai-ops-uc-engage-card > .wp-block-group__inner-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* Anchor the button (Block Button container or form submit) to the bottom */
.ai-ops-body .ai-ops-uc-engage-card .wp-block-buttons,
.ai-ops-body .ai-ops-uc-engage-card form,
.ai-ops-body .ai-ops-uc-engage-card button[type="submit"] {
    margin-top: auto;
}
/* Make the Talk Card "Start the conversation" button span full card width
   (Figma: w-full inside the card; matches Form Card's "Send it over" width). */
.ai-ops-body .ai-ops-uc-engage-card .wp-block-buttons {
    width: 100%;
    display: flex;
}
.ai-ops-body .ai-ops-uc-engage-card .wp-block-button {
    width: 100%;
    flex: 1 1 auto;
}
.ai-ops-body .ai-ops-uc-engage-card .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
/* Tighten heading→body gap (Figma 16px instead of card-default 24px) */
.ai-ops-body .ai-ops-uc-engage-card h3 + p,
.ai-ops-body .ai-ops-uc-engage-card h2 + p {
    margin-top: -8px;
}
/* Card headings within engage are 26 Bold lh 1.3 (override generic h3 33) */
.ai-ops-body .ai-ops-uc-engage-card h3,
.ai-ops-body .ai-ops-uc-engage-card h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.52px;
    color: #ffffff !important;
    margin: 0 0 16px !important;
}
/* Per-section sub-heading overrides (Figma uses non-token sizes for some).
   Default `.ai-ops-uc-shead .sub` is 19/1.6/0.38 (Three Steps, Where Line, Related).
   Use :has() to target sections by their inner grid:
     - How We Start (numbered-grid) → 18/1.65/0.36
     - Engage (engage-grid)         → 17/1.65/0.34
   The section class itself is `--dark` for all of these, so we identify by
   inner content rather than section modifier. */
.ai-ops-use-case-body .ai-ops-uc-section:has(.ai-ops-uc-numbered-grid) .ai-ops-uc-shead .sub {
    font-size: 18px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.36px !important;
}
.ai-ops-use-case-body .ai-ops-uc-section:has(.ai-ops-uc-engage-grid) .ai-ops-uc-shead .sub {
    font-size: 17px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.34px !important;
}
.ai-ops-body .ai-ops-uc-engage-or {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}
.ai-ops-body .ai-ops-uc-engage-or .line {
    flex: 1;
    width: 1px;
    background: rgba(87, 87, 87, 0.5);
}
.ai-ops-body .ai-ops-uc-engage-or .or {
    color: #8f8f8f;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22px;
    text-align: center;
}

/* ── Form ──────────────────────────────────────────────────────────────────
   Figma: 466 wide, gap-32 between (label group + button).
   Label group has gap-18 between fields (Email, Company/Role row, Textarea).
   Each field: label (14 Medium white lh 1.55) + 6px gap + input.
   Email/Company/Role input h-44 px-24 py-16. Textarea h-96 px-24 pt-12 pb-64.
   Bg rgba(255,255,255,0.04) border #3b3b3b rounded-8.
   Placeholder text #8f8f8f Regular 16 lh 1.7 ls 0.32.
   Submit button: gradient (linear 238.93deg #50d5ff → #acb9ff) text "Send it over"
   Medium 19 lh 1.6 capitalize color #21054f.
   ──────────────────────────────────────────────────────────────────────────── */
.ai-ops-body .ai-ops-uc-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}
.ai-ops-body .ai-ops-uc-form-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}
.ai-ops-body .ai-ops-uc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ai-ops-body .ai-ops-uc-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ai-ops-body .ai-ops-uc-form label,
.ai-ops-body .ai-ops-uc-form-field > label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.55;
    color: #ffffff;
}
.ai-ops-body .ai-ops-uc-form input,
.ai-ops-body .ai-ops-uc-form textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #3b3b3b;
    border-radius: 8px;
    padding: 0 24px;
    height: 44px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    width: 100%;
    box-sizing: border-box;
}
.ai-ops-body .ai-ops-uc-form textarea {
    height: 96px;
    padding: 12px 24px;
    resize: vertical;
}
.ai-ops-body .ai-ops-uc-form input::placeholder,
.ai-ops-body .ai-ops-uc-form textarea::placeholder {
    color: #8f8f8f;
}
.ai-ops-body .ai-ops-uc-form input:focus,
.ai-ops-body .ai-ops-uc-form textarea:focus {
    outline: none;
    border-color: #51a1ff;
    background: rgba(255, 255, 255, 0.06);
}
/* Submit button — match Figma "Send it over" (primary gradient, capitalize) */
.ai-ops-body .ai-ops-uc-form button[type="submit"],
.ai-ops-body .ai-ops-uc-form input[type="submit"],
.ai-ops-body .ai-ops-uc-form .ai-ops-uc-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 16px 32px;
    background: linear-gradient(238.93deg, #50d5ff 0%, #acb9ff 100%);
    color: #21054f;
    border: none;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.6;
    letter-spacing: 0.38px;
    text-transform: capitalize;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-ops-body .ai-ops-uc-form button[type="submit"]:hover,
.ai-ops-body .ai-ops-uc-form input[type="submit"]:hover,
.ai-ops-body .ai-ops-uc-form .ai-ops-uc-form-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(80, 213, 255, 0.30);
    color: #21054f;
}

/* ── Gutenberg layout reconciliation ──────────────────────────────────────────
   Gutenberg wraps each `core/group` block's content in
   `.wp-block-group__inner-container.is-layout-constrained`. That breaks any
   `display: grid` we set on the outer group because the cards become
   grandchildren, not direct children. Solution: where we want a grid to
   "see through" the wrapper, set the wrapper to `display: contents`. The
   grandchildren then participate in the parent's grid as direct items.
   ──────────────────────────────────────────────────────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-steps-grid > .wp-block-group__inner-container,
.ai-ops-use-case-body .ai-ops-uc-related-grid > .wp-block-group__inner-container,
.ai-ops-body .ai-ops-uc-engage-grid > .wp-block-group__inner-container,
.ai-ops-use-case-body .ai-ops-uc-numbered-grid > .wp-block-group__inner-container,
.ai-ops-use-case-body .ai-ops-uc-numbered-card > .wp-block-group__inner-container,
.ai-ops-use-case-body .ai-ops-uc-faq-list > .wp-block-group__inner-container,
.ai-ops-use-case-body .ai-ops-uc-cta-row > .wp-block-group__inner-container,
.ai-ops-use-case-body .ai-ops-uc-howworks-grid > .wp-block-group__inner-container {
    display: contents;
}

/* Gutenberg's `is-layout-constrained > *` clamps direct children to the
   theme's content-size token. Override ONLY for our 1140-wide containers;
   other elements (FAQ list 900, numbered grid 900, line block 800, hero
   620) keep their explicit max-widths. */
.ai-ops-use-case-body .is-layout-constrained > .ai-ops-uc-steps-grid,
.ai-ops-use-case-body .is-layout-constrained > .ai-ops-uc-related-grid,
.ai-ops-use-case-body .is-layout-constrained > .ai-ops-uc-engage-grid,
.ai-ops-use-case-body .is-layout-constrained > .ai-ops-uc-cta-row,
.ai-ops-use-case-body .is-layout-constrained > .ai-ops-uc-howworks-grid {
    max-width: none;
}
/* Re-assert max-widths for narrower containers — Gutenberg's clamp may be
   either narrower or wider than the Figma intent. !important wins against
   theme-supplied wp-block layout rules. */
.ai-ops-use-case-body .ai-ops-uc-faq-list { max-width: 900px !important; }
.ai-ops-use-case-body .ai-ops-uc-numbered-grid { max-width: 900px !important; }
.ai-ops-use-case-body .ai-ops-uc-shead { max-width: 900px !important; }
.ai-ops-use-case-body .ai-ops-uc-line-block { max-width: 800px !important; }
.ai-ops-use-case-body .ai-ops-uc-hero-h1 { max-width: 620px !important; }
.ai-ops-use-case-body .ai-ops-uc-hero-sub { max-width: 620px !important; }
.ai-ops-body .ai-ops-uc-mid-cta h3 { max-width: 700px !important; }
/* F-94 follow-up (2026-05-23): bumped from 620 → 680 so the new sub
   ("Talk to an agent or drop a note. We come back with a proposal.")
   fits on one line at desktop. Measured single-line width ≈ 625px at
   19px Poppins + 0.38 letter-spacing; 680 leaves a ~55px buffer.
   Still narrower than the H3's 700px cap so the typographic rhythm
   (sub slightly narrower than H3) is preserved. Mobile wraps as before. */
.ai-ops-body .ai-ops-uc-mid-cta p { max-width: 680px !important; }

/* ── Override WP block defaults that fight us ──────────────────────────────
   v0.1.9 fix: the previous broad `wp-block-group { margin: 0 }` reset killed
   the `margin: 0 auto 56px` on `.ai-ops-uc-shead`, so section heads got
   left-aligned (instead of centered) AND the gap to the grid below collapsed
   to 0. The user-visible symptom: "Three steps per close." (and every section
   header) sat shifted left, with NO breathing room before the cards.
   Reset only generic `.wp-block-group` that DON'T have one of our `-uc-`
   custom classes — those keep their explicit margin rules below. */
.ai-ops-use-case-body .wp-block-group:not([class*="ai-ops-uc-"]) {
    margin: 0;
}
.ai-ops-use-case-body .wp-block-buttons {
    margin: 0;
}

/* ── Section-head + grid alignment + gap (Figma-exact) ─────────────────────
   Each Figma section is `flex-col items-center gap-N` with a header (w-900
   or 860) and a wide content container (w-1140 / w-900 / w-800 etc) — both
   centered horizontally inside the section's content area.
   We can't use flex on the inner-container without disturbing other layout
   so we use explicit `margin-left/right: auto` (centers) plus per-element
   `margin-top` (per-section gap-N). `!important` because the broader
   `wp-block-group` reset above applies even if I re-scope it (specificity
   safety). */
.ai-ops-use-case-body .ai-ops-uc-shead {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* gap is on the next element's margin-top */
}
/* Three Steps section: Figma gap-56 between shead and cards */
.ai-ops-use-case-body .ai-ops-uc-steps-grid {
    margin: 56px auto 0 !important;
}
/* Where Line Sits: Figma inner frame gap-64 between header and text content */
.ai-ops-use-case-body .ai-ops-uc-line-block {
    margin: 64px auto 0 !important;
}
/* How We Start: Figma section gap-64 between header and numbered cards */
.ai-ops-use-case-body .ai-ops-uc-numbered-grid {
    margin: 64px auto 0 !important;
}
/* FAQ: Figma section gap-48 between header and list */
.ai-ops-use-case-body .ai-ops-uc-faq-list {
    margin: 48px auto 0 !important;
}
/* Related Workflows: Figma section gap-48 between header and cards;
   plus 32px gap to "More workflows..." link below */
.ai-ops-use-case-body .ai-ops-uc-related-grid {
    margin: 48px auto 32px !important;
}
/* Engage section: Figma gap-64 between header and Talk/Form row */
.ai-ops-body .ai-ops-uc-engage-grid {
    margin: 64px auto 0 !important;
}
.ai-ops-use-case-body .wp-block-button__link {
    background: linear-gradient(245.45deg, #50d5ff 0%, #acb9ff 100%);
    color: #21054f;
    border-radius: 8px;
    padding: 16px 32px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 19px;
    letter-spacing: 0.38px;
    line-height: 1.4;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* v1.0.4 (F-016): unify primary blue-gradient button hover behavior site-wide.
   Pre-v1.0.4 the Talk Card "Start the conversation" anchor inherited a white
   color on hover from the parent theme's `a:hover { color: #fff }` rule
   because the actual <a> only has classes `wp-block-button__link wp-element-button`
   (the .ai-ops-uc-btn-primary class is on the wrapping <div>, not the <a>).
   The form's "Send it over" <button> bypassed the leak because it's not an <a>.
   Lock the dark text color with !important on every state, mirror the
   `.ai-ops-btn-primary:hover` lift + glow so all primary blue buttons feel
   identical on hover. */
.ai-ops-use-case-body .wp-block-button__link,
.ai-ops-use-case-body .wp-block-button__link:link,
.ai-ops-use-case-body .wp-block-button__link:visited,
.ai-ops-use-case-body .wp-block-button__link:hover,
.ai-ops-use-case-body .wp-block-button__link:active,
.ai-ops-use-case-body .wp-block-button__link:focus {
    color: #21054f !important;
}
.ai-ops-use-case-body .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(80, 213, 255, 0.30);
}
/* The secondary button uses white text — preserve that on hover too (the
   above rule only covers primary's dark text). */
.ai-ops-use-case-body .ai-ops-uc-btn-secondary .wp-block-button__link,
.ai-ops-use-case-body .ai-ops-uc-btn-secondary .wp-block-button__link:hover,
.ai-ops-use-case-body .wp-block-button.ai-ops-uc-btn-secondary .wp-block-button__link,
.ai-ops-use-case-body .wp-block-button.ai-ops-uc-btn-secondary .wp-block-button__link:hover {
    color: #ffffff !important;
}
/* Secondary button: gradient + outline + capitalize + lh 1.6 (Figma exact).
   The Gutenberg block has `additionalClassName=ai-ops-uc-btn-secondary` on the
   .wp-block-button container; the actual <a> is .wp-block-button__link. */
.ai-ops-body .ai-ops-uc-btn-secondary .wp-block-button__link,
.ai-ops-body .wp-block-button.ai-ops-uc-btn-secondary .wp-block-button__link {
    background: linear-gradient(251.02deg, rgba(88, 185, 255, 0.1) 0%, rgba(69, 233, 255, 0.1) 100%);
    color: #ffffff;
    border: 3px solid #39acff;
    padding: 13px 29px;
    line-height: 1.6;        /* Figma secondary: lh 1.6 (vs primary's 1.4) */
    text-transform: capitalize; /* Figma applies CSS capitalize → "See How It Works" */
}
/* Primary button: Figma uses gradient angle 249.93deg (vs nav's 245.45deg).
   Apply tighter angle to in-content primary buttons via the actual class
   (`.ai-ops-uc-btn-primary`, with -uc- prefix). v1.0.28 (F-E1): promoted
   from .ai-ops-use-case-body → .ai-ops-body so hub Mid-CTA renders the
   gradient too. */
.ai-ops-body .ai-ops-uc-btn-primary .wp-block-button__link,
.ai-ops-body .wp-block-button.ai-ops-uc-btn-primary .wp-block-button__link {
    background: linear-gradient(249.93deg, #50d5ff 0%, #acb9ff 100%);
    color: #21054f;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.38px;
    border-radius: 8px;
    padding: 16px 32px;
}
/* Inline body links (e.g., "your accounting system" in How We Start step 2) */
.ai-ops-use-case-body .ai-ops-uc-numbered-card a,
.ai-ops-use-case-body .ai-ops-uc-card a,
.ai-ops-use-case-body .ai-ops-uc-line-block a {
    color: #51a1ff;
    text-decoration: underline;
    text-decoration-skip-ink: none;
}
.ai-ops-use-case-body .ai-ops-uc-numbered-card a:hover,
.ai-ops-use-case-body .ai-ops-uc-card a:hover,
.ai-ops-use-case-body .ai-ops-uc-line-block a:hover {
    color: #97c7ff;
}

/* ── Mobile ── */
@media (max-width: 960px) {
    .ai-ops-use-case-body .ai-ops-uc-section {
        padding: 64px 24px;
    }
    /* v0.1.34 (BUG-026): hero section needs extra top padding at narrow
       widths so the eyebrow chip clears the absolute-positioned breadcrumb.
       Default breadcrumb sits at ~--ao-breadcrumb-top (≈76px below nav);
       section default padding-top of 64px would otherwise put the eyebrow
       under the breadcrumb.
       v0.1.35 polish: bumped 130 → 145 to widen the gap from ~5px to ~20px
       (QA report flagged the original gap as "tight"). */
    .ai-ops-use-case-body .ai-ops-uc-section--hero {
        padding-top: 145px;
    }
    .ai-ops-use-case-body .ai-ops-uc-breadcrumb {
        left: 24px;  /* match section padding-x at this breakpoint */
    }
    .ai-ops-use-case-body .ai-ops-uc-steps-grid,
    .ai-ops-use-case-body .ai-ops-uc-related-grid {
        grid-template-columns: 1fr;
    }
    .ai-ops-body .ai-ops-uc-engage-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ai-ops-body .ai-ops-uc-engage-or {
        flex-direction: row;
        padding: 16px 0;
    }
    .ai-ops-body .ai-ops-uc-engage-or .line {
        width: auto;
        height: 1px;
    }
    .ai-ops-use-case-body .ai-ops-uc-numbered-card {
        grid-template-columns: 40px 1fr;
        gap: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO RIGHT-PANE VISUAL (v0.1.27)
   Decorative glassmorphic card injected into the hero by ai-ops-hero-visual.js.
   Five animation templates rotate randomly per page load. All five visualize
   the same agent+human collaboration pattern: 2 agent steps + 1 human approval
   step. Step labels are pulled from the page's "Three Steps" section so each
   of the 53 pages narrates its own use case without per-page setup.

   Layout: positioned absolutely on the right edge of the hero. Overrides the
   620px max-width that the hero applies to all direct children. Hidden below
   1300px because there's no horizontal room next to the 620px text frame.

   Reduced motion: animations are disabled via the prefers-reduced-motion
   media query at the bottom of this block — the visual still renders, just
   without movement.
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-ops-use-case-body .ai-ops-uc-section--hero > .ai-ops-uc-hv {
    /* Hero applies max-width: 620px to every direct child to keep the text
       frame left-anchored. The visual lives in the right empty space, so we
       cancel that constraint. */
    max-width: none;
}
.ai-ops-use-case-body .ai-ops-uc-hv {
    position: absolute;
    /* Mirror the mic button's anchoring math (line 305-308): at 1440 viewport
       sits 60px from the right edge of section padding, at wider viewports
       stays near the right edge of a centered 1440-equivalent box. */
    right: max(60px, calc(50% - var(--ao-design-half-width) + 60px));
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    height: 520px;
    pointer-events: none;
    z-index: 1; /* mic button is z-index 5, stays clickable on top */
    font-family: var(--ao-font);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-orb {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(80, 213, 255, 0.40) 0%, rgba(80, 213, 255, 0) 60%),
        radial-gradient(circle at 70% 70%, rgba(252, 191, 36, 0.18) 0%, rgba(252, 191, 36, 0) 65%);
    filter: blur(60px);
    animation: aohvOrbPulse 10s ease-in-out infinite;
    z-index: 0;
}
@keyframes aohvOrbPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.06); opacity: 1; }
}

.ai-ops-use-case-body .ai-ops-uc-hv .aohv-card {
    position: absolute;
    inset: 40px 30px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
        rgba(8, 8, 16, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

/* ── Shared header bar (used by templates 1-4) ────────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ao-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--ao-text-primary);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    animation: aohvLivePulse 2s ease-in-out infinite;
}
@keyframes aohvLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-head-right {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ao-text-accent);
    letter-spacing: 0.5px;
}

/* ── Shared actor pill (AGENT cyan / YOU amber) ──────────────────────────── */
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-actor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-actor.agent {
    background: rgba(80, 213, 255, 0.15);
    color: #50d5ff;
    border: 1px solid rgba(80, 213, 255, 0.3);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-actor.human {
    background: rgba(252, 191, 36, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(252, 191, 36, 0.4);
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMPLATE 1 — TASK LIST
   Three rows fade in sequentially, progress bars fill, status dots transition
   grey → cyan → green. Last row (YOU) glows amber instead of completing.
   ════════════════════════════════════════════════════════════════════════════ */
.ai-ops-use-case-body .ai-ops-uc-hv.aohv-template-1 .aohv-card { padding: 0; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    flex: 1;
    justify-content: center;
    list-style: none;
    margin: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    list-style: none;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task.is-human {
    background: rgba(252, 191, 36, 0.05);
    border: 1px solid rgba(252, 191, 36, 0.25);
    box-shadow: 0 0 24px rgba(252, 191, 36, 0.10);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-num {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(80, 213, 255, 0.10);
    border: 1px solid rgba(80, 213, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #50d5ff;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task.is-human .aohv-task-num {
    background: rgba(252, 191, 36, 0.10);
    border-color: rgba(252, 191, 36, 0.4);
    color: #fcd34d;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-row .aohv-actor {
    margin-left: auto;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ao-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #50d5ff, #acb9ff);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(80, 213, 255, 0.6);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task.is-human .aohv-task-bar::after {
    background: linear-gradient(90deg, #fbbf24, #fcd34d);
    box-shadow: 0 0 8px rgba(252, 191, 36, 0.6);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(1)            { animation: aohvT1Cycle 12s ease-in-out infinite 0s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(2)            { animation: aohvT1Cycle 12s ease-in-out infinite 1.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(3)            { animation: aohvT1HumanCard 12s ease-in-out infinite 3s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(1) .aohv-task-bar::after { animation: aohvT1Bar 12s ease-in-out infinite 0s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(2) .aohv-task-bar::after { animation: aohvT1Bar 12s ease-in-out infinite 1.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(3) .aohv-task-bar::after { animation: aohvT1HumanBar 12s ease-in-out infinite 3s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(1) .aohv-task-status     { animation: aohvT1Status 12s ease-in-out infinite 0s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(2) .aohv-task-status     { animation: aohvT1Status 12s ease-in-out infinite 1.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-task:nth-child(3) .aohv-task-status     { animation: aohvT1HumanStatus 12s ease-in-out infinite 3s; }
@keyframes aohvT1Cycle { 0%, 22% { opacity: 0.5; } 25%, 95% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes aohvT1Bar   { 0%, 22% { width: 0; } 70% { width: 100%; } 72%, 95% { width: 100%; } 100% { width: 0; } }
@keyframes aohvT1Status {
    0%, 22%   { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
    25%, 70%  { background: #50d5ff; box-shadow: 0 0 10px rgba(80, 213, 255, 0.7); }
    72%, 95%  { background: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, 0.7); }
    100%      { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
}
@keyframes aohvT1HumanBar { 0%, 22% { width: 0; } 60% { width: 80%; } 62%, 95% { width: 80%; } 100% { width: 0; } }
@keyframes aohvT1HumanStatus {
    0%, 22%   { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
    25%, 95%  { background: #fcd34d; box-shadow: 0 0 12px rgba(252, 191, 36, 0.8); }
    100%      { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
}
@keyframes aohvT1HumanCard {
    0%, 22%   { opacity: 0.5; box-shadow: 0 0 24px rgba(252, 191, 36, 0.10); }
    25%, 95%  { opacity: 1; box-shadow: 0 0 28px rgba(252, 191, 36, 0.30); }
    100%      { opacity: 0.5; box-shadow: 0 0 24px rgba(252, 191, 36, 0.10); }
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMPLATE 2 — PIPELINE
   Three columns (QUEUED · PROCESSING · DONE) with absolutely-positioned packets
   that hop column-to-column. Packets stay in their own row (vertical fixed),
   `left` animates between calculated column positions to guarantee alignment.
   ════════════════════════════════════════════════════════════════════════════ */
.ai-ops-use-case-body .ai-ops-uc-hv.aohv-template-2 .aohv-card { padding: 0; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pipeline {
    flex: 1;
    padding: 16px;
    position: relative;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    height: 100%;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-col {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 8px;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-col-3 {
    background: rgba(34, 197, 94, 0.04);
    border-color: rgba(34, 197, 94, 0.20);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-col-head {
    display: block;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    color: var(--ao-text-accent);
    letter-spacing: 0.6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-col-3 .aohv-col-head {
    color: #22c55e;
    border-bottom-color: rgba(34, 197, 94, 0.15);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-packets {
    position: absolute;
    top: 60px;
    left: 24px;
    right: 24px;
    pointer-events: none;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt {
    position: absolute;
    /* Width = 1/3 of (parent - 16px gap-total), matches col width */
    width: calc((100% - 16px) / 3);
    padding: 8px 6px;
    background: rgba(80, 213, 255, 0.10);
    border: 1px solid rgba(80, 213, 255, 0.25);
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--ao-text-body);
    text-align: center;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt-actor {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #50d5ff;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt.is-human .aohv-pkt-actor { color: #fcd34d; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt-1 { top: 0;     animation: aohvT2Hop 9s ease-in-out infinite 0s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt-2 { top: 70px;  animation: aohvT2Hop 9s ease-in-out infinite 1.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt-3 { top: 140px; animation: aohvT2HopHuman 9s ease-in-out infinite 3s; }
@keyframes aohvT2Hop {
    0%, 30% {
        left: 0;
        background: rgba(80, 213, 255, 0.10);
        border-color: rgba(80, 213, 255, 0.25);
    }
    33%, 60% {
        left: calc((100% - 16px) / 3 + 8px);
        background: rgba(80, 213, 255, 0.18);
        border-color: rgba(80, 213, 255, 0.45);
    }
    63%, 95% {
        left: calc((100% - 16px) * 2 / 3 + 16px);
        background: rgba(34, 197, 94, 0.18);
        border-color: rgba(34, 197, 94, 0.45);
        color: #22c55e;
    }
    100% {
        left: 0;
        background: rgba(80, 213, 255, 0.10);
        border-color: rgba(80, 213, 255, 0.25);
    }
}
@keyframes aohvT2HopHuman {
    0%, 30% {
        left: 0;
        background: rgba(252, 191, 36, 0.10);
        border-color: rgba(252, 191, 36, 0.30);
    }
    33%, 60% {
        left: calc((100% - 16px) / 3 + 8px);
        background: rgba(252, 191, 36, 0.15);
        border-color: rgba(252, 191, 36, 0.40);
    }
    63%, 95% {
        left: calc((100% - 16px) * 2 / 3 + 16px);
        background: rgba(252, 191, 36, 0.22);
        border-color: rgba(252, 191, 36, 0.6);
        box-shadow: 0 0 16px rgba(252, 191, 36, 0.4);
    }
    100% {
        left: 0;
        background: rgba(252, 191, 36, 0.10);
        border-color: rgba(252, 191, 36, 0.30);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMPLATE 3 — APPROVAL STACK
   Three cards deal in sequentially with 3D perspective. The third (YOU)
   lands with an amber glow that pulses to draw the eye.
   ════════════════════════════════════════════════════════════════════════════ */
.ai-ops-use-case-body .ai-ops-uc-hv.aohv-template-3 .aohv-card { padding: 0; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack {
    flex: 1;
    position: relative;
    perspective: 1200px;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card {
    position: absolute;
    /* v1.0.4 (F-007a): widened from 320 → 420 so the full Three Steps
       headings fit on a single line without truncation. The widget itself
       is 460px wide; 420 + 40px horizontal padding fits comfortably. */
    width: 420px;
    border-radius: 14px;
    padding: 16px 20px;
    transition: all 0.4s ease-in-out;
    opacity: 0;
}
/* v1.0.4 (F-007a): allow the label to wrap to multiple lines if a single
   line would still exceed the card width — full-text rendering trumps
   single-line aesthetics. */
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-label {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-1 {
    background: rgba(80, 213, 255, 0.06);
    border: 1px solid rgba(80, 213, 255, 0.2);
    animation: aohvT3Card1 14s ease-in-out infinite;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-2 {
    background: rgba(80, 213, 255, 0.10);
    border: 1px solid rgba(80, 213, 255, 0.3);
    animation: aohvT3Card2 14s ease-in-out infinite;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-3 {
    background: rgba(252, 191, 36, 0.10);
    border: 1.5px solid rgba(252, 191, 36, 0.5);
    animation: aohvT3Card3 14s ease-in-out infinite;
}
@keyframes aohvT3Card1 {
    0%   { transform: translateY(60px) translateZ(-150px) rotateX(8deg); opacity: 0; }
    8%   { transform: translateY(-90px) translateZ(-120px) rotateX(8deg); opacity: 0.5; filter: blur(0.5px); }
    93%  { transform: translateY(-90px) translateZ(-120px) rotateX(8deg); opacity: 0.5; filter: blur(0.5px); }
    100% { transform: translateY(60px) translateZ(-150px) rotateX(8deg); opacity: 0; }
}
@keyframes aohvT3Card2 {
    0%, 21% { transform: translateY(60px) translateZ(-100px) rotateX(8deg); opacity: 0; }
    29%     { transform: translateY(-30px) translateZ(-60px) rotateX(4deg); opacity: 0.75; }
    93%     { transform: translateY(-30px) translateZ(-60px) rotateX(4deg); opacity: 0.75; }
    100%    { transform: translateY(60px) translateZ(-100px) rotateX(8deg); opacity: 0; }
}
@keyframes aohvT3Card3 {
    0%, 42% { transform: translateY(80px) translateZ(-50px); opacity: 0; box-shadow: none; }
    50%     { transform: translateY(50px) translateZ(0); opacity: 1; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(252, 191, 36, 0.25); }
    65%     { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(252, 191, 36, 0.50); }
    80%     { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(252, 191, 36, 0.25); }
    93%     { transform: translateY(50px) translateZ(0); opacity: 1; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(252, 191, 36, 0.25); }
    100%    { transform: translateY(80px) translateZ(-50px); opacity: 0; box-shadow: none; }
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-num {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-1 .aohv-stack-num,
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-2 .aohv-stack-num {
    background: rgba(80, 213, 255, 0.18);
    border: 1px solid rgba(80, 213, 255, 0.3);
    color: #50d5ff;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-3 .aohv-stack-num {
    background: rgba(252, 191, 36, 0.18);
    border: 1px solid rgba(252, 191, 36, 0.4);
    color: #fcd34d;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-actor {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: auto;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-1 .aohv-stack-actor,
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-2 .aohv-stack-actor { color: #50d5ff; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-3 .aohv-stack-actor { color: #fcd34d; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ao-text-body);
    line-height: 1.4;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card-3 .aohv-stack-label {
    color: var(--ao-text-primary);
    font-weight: 500;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-cta {
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(252, 191, 36, 0.18);
    border: 1px solid rgba(252, 191, 36, 0.5);
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    color: #fcd34d;
    text-align: center;
    letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMPLATE 4 — TIMELINE
   Three numbered nodes connected by a line that grows in 3 stages.
   Step 1 → 2 each: blue (processing) → green w/ check (done).
   Step 3: stays yellow (awaiting your sign-off, never auto-completes).
   14s total cycle.
   ════════════════════════════════════════════════════════════════════════════ */
.ai-ops-use-case-body .ai-ops-uc-hv.aohv-template-4 .aohv-card { padding: 0; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-timeline {
    padding: 50px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    position: relative;
}
/* v1.0.4 (F-005c): vertical orientation. The JS now emits class
   `aohv-tl-steps--vertical`; this rule overrides the grid to a single
   column with full-width steps stacked top-to-bottom. The connector lines
   (::before / ::after) are also flipped to vertical via the rules below. */
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps--vertical {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 16%;
    height: 2px;
    background: linear-gradient(90deg, #50d5ff, #fbbf24);
    box-shadow: 0 0 8px rgba(80, 213, 255, 0.6);
    animation: aohvT4Line 14s ease-in-out infinite;
    width: 0;
}
/* v1.0.4 (F-005b + F-005c): vertical-orientation connector lines.
   The base track + filled track flip from horizontal (top: 18px, left/right %)
   to vertical (left: 18px, top/bottom %) with line endpoints clamped INSIDE
   the step circle radius (= 18px) on each end so the line touches the
   border but doesn't enter the circle (the v1.0.3 step-3 yellow-line bug
   from F-005b). Top: 18 + 18 = 36 from the top of the first circle's
   center. Bottom: 36 from the bottom of the last circle's center. */
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps--vertical::before {
    top: 36px;
    bottom: 36px;
    left: 17px;       /* 18px circle radius minus 1px to align with circle border */
    right: auto;
    width: 2px;
    height: auto;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps--vertical::after {
    top: 36px;
    bottom: auto;
    left: 17px;
    right: auto;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, #50d5ff, #fbbf24);
    animation: aohvT4LineVertical 14s ease-in-out infinite;
}
@keyframes aohvT4Line {
    0%, 28% { width: 0; }
    35%, 57% { width: 33%; }
    64%, 92% { width: 67%; }
    100%    { width: 0; }
}
@keyframes aohvT4LineVertical {
    0%, 28%   { height: 0; }
    35%, 57%  { height: 33%; }
    64%, 92%  { height: 60%; } /* stops short of step 3 — never enters circle */
    100%      { height: 0; }
}
/* v1.0.4 (F-005c): each step lays out as a horizontal row in vertical mode
   (number on left, label/actor on right). aohv-step-info is the
   right-side wrapper introduced in the JS. */
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps--vertical .aohv-tl-step {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-step-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps--vertical .aohv-step-label {
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    word-break: normal;
    overflow-wrap: break-word;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps--vertical .aohv-step-actor {
    align-self: flex-start;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(8, 8, 16, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ao-text-accent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
    position: relative;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-num-digit,
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-num-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-num-check {
    font-size: 16px;
    opacity: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(1) .aohv-step-num  { animation: aohvT4Step1 14s ease-in-out infinite; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(1) .aohv-num-digit { animation: aohvT4Digit1 14s ease-in-out infinite; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(1) .aohv-num-check { animation: aohvT4Check1 14s ease-in-out infinite; }
@keyframes aohvT4Step1 {
    0%, 7%   { background: rgba(8, 8, 16, 0.95); border-color: rgba(255, 255, 255, 0.15); color: var(--ao-text-accent); box-shadow: none; }
    14%, 21% { background: #50d5ff; border-color: #50d5ff; color: var(--ao-button-dark); box-shadow: 0 0 16px rgba(80, 213, 255, 0.7); }
    28%, 92% { background: #22c55e; border-color: #22c55e; color: white; box-shadow: 0 0 16px rgba(34, 197, 94, 0.6); }
    100%     { background: rgba(8, 8, 16, 0.95); border-color: rgba(255, 255, 255, 0.15); color: var(--ao-text-accent); box-shadow: none; }
}
@keyframes aohvT4Digit1 { 0%, 21% { opacity: 1; } 28%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes aohvT4Check1 { 0%, 21% { opacity: 0; } 28%, 92% { opacity: 1; } 100% { opacity: 0; } }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(2) .aohv-step-num  { animation: aohvT4Step2 14s ease-in-out infinite; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(2) .aohv-num-digit { animation: aohvT4Digit2 14s ease-in-out infinite; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(2) .aohv-num-check { animation: aohvT4Check2 14s ease-in-out infinite; }
@keyframes aohvT4Step2 {
    0%, 35%  { background: rgba(8, 8, 16, 0.95); border-color: rgba(255, 255, 255, 0.15); color: var(--ao-text-accent); box-shadow: none; }
    42%, 50% { background: #50d5ff; border-color: #50d5ff; color: var(--ao-button-dark); box-shadow: 0 0 16px rgba(80, 213, 255, 0.7); }
    57%, 92% { background: #22c55e; border-color: #22c55e; color: white; box-shadow: 0 0 16px rgba(34, 197, 94, 0.6); }
    100%     { background: rgba(8, 8, 16, 0.95); border-color: rgba(255, 255, 255, 0.15); color: var(--ao-text-accent); box-shadow: none; }
}
@keyframes aohvT4Digit2 { 0%, 50% { opacity: 1; } 57%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes aohvT4Check2 { 0%, 50% { opacity: 0; } 57%, 92% { opacity: 1; } 100% { opacity: 0; } }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(3) .aohv-step-num  { animation: aohvT4Step3 14s ease-in-out infinite; }
@keyframes aohvT4Step3 {
    0%, 64%  { background: rgba(8, 8, 16, 0.95); border-color: rgba(255, 255, 255, 0.15); color: var(--ao-text-accent); box-shadow: none; }
    71%, 92% {
        background: rgba(252, 191, 36, 0.20);
        border-color: #fcd34d;
        color: #fcd34d;
        box-shadow: 0 0 18px rgba(252, 191, 36, 0.6);
    }
    100%     { background: rgba(8, 8, 16, 0.95); border-color: rgba(255, 255, 255, 0.15); color: var(--ao-text-accent); box-shadow: none; }
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-step-actor {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 3px;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(1) .aohv-step-actor,
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(2) .aohv-step-actor {
    background: rgba(80, 213, 255, 0.12);
    color: #50d5ff;
    border: 1px solid rgba(80, 213, 255, 0.3);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-step:nth-child(3) .aohv-step-actor {
    background: rgba(252, 191, 36, 0.12);
    color: #fcd34d;
    border: 1px solid rgba(252, 191, 36, 0.4);
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-step-label {
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    line-height: 1.4;
    color: var(--ao-text-body);
    max-width: 110px;
    letter-spacing: 0.2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMPLATE 5 — TERMINAL LOG
   macOS-window terminal with stream of log lines: Agent: / OK: / You:.
   The "You: Approve y/n" line ends with a blinking cursor.
   ════════════════════════════════════════════════════════════════════════════ */
.ai-ops-use-case-body .ai-ops-uc-hv.aohv-template-5 .aohv-card { padding: 0; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-term-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-term-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-term-dot:nth-child(1) { background: #ff5f57; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-term-dot:nth-child(2) { background: #febc2e; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-term-dot:nth-child(3) { background: #28c840; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-term-title {
    margin-left: auto;
    padding-right: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--ao-text-accent);
    letter-spacing: 0.5px;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ao-text-body);
    line-height: 1.5;
    opacity: 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line:nth-child(1) { animation: aohvT5Line 14s ease-in-out infinite 0.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line:nth-child(2) { animation: aohvT5Line 14s ease-in-out infinite 2.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line:nth-child(3) { animation: aohvT5Line 14s ease-in-out infinite 4.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line:nth-child(4) { animation: aohvT5Line 14s ease-in-out infinite 6.5s; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line:nth-child(5) { animation: aohvT5Line 14s ease-in-out infinite 8.5s; }
@keyframes aohvT5Line {
    0%, 3%   { opacity: 0; transform: translateX(-6px); }
    8%, 93%  { opacity: 1; transform: translateX(0); }
    100%     { opacity: 0; }
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-time {
    color: var(--ao-text-accent);
    flex-shrink: 0;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-actor {
    flex-shrink: 0;
    font-weight: 700;
}
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-actor.agent { color: #50d5ff; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-actor.ok    { color: #22c55e; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-actor.you   { color: #fcd34d; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-msg { flex: 1; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line.is-human .aohv-log-msg { color: #fcd34d; }
.ai-ops-use-case-body .ai-ops-uc-hv .aohv-blink { animation: aohvT5Blink 1s steps(2) infinite; }
@keyframes aohvT5Blink { 50% { opacity: 0; } }

/* ── Responsive: hide the visual when there's no room next to the 620px text frame.
   Hero text stays at 620 max — at < 1300 viewport, the right area collapses below
   the 460px we need for the visual. The hero mic button continues to display. */
@media (max-width: 1299px) {
    .ai-ops-use-case-body .ai-ops-uc-hv { display: none; }
}

/* ── Reduced motion: render the visual but pause all animations. */
@media (prefers-reduced-motion: reduce) {
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-orb,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-pulse,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-task,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-bar::after,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-task-status,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-tl-steps::after,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-step-num,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-num-digit,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-num-check,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line,
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-blink {
        animation: none !important;
    }
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-log-line { opacity: 1; }
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-stack-card { opacity: 1; transform: none; }
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt-1 { left: 0; }
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt-2 { left: calc((100% - 16px) / 3 + 8px); }
    .ai-ops-use-case-body .ai-ops-uc-hv .aohv-pkt-3 { left: calc((100% - 16px) * 2 / 3 + 16px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   v0.1.51 — HOW IT WORKS Section (Figma node 29094:32229)
   ═══════════════════════════════════════════════════════════════════════════
   New section between How We Start and FAQ on every use-case page. 3 pills
   restate the task-vs-judgment split: agents do / we do / you do. Bundled
   HTML injected via scripts/inject-how-it-works.py in v0.1.51. */
.ai-ops-use-case-body .ai-ops-uc-section--how-it-works {
    background: #191a1b;
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}
.ai-ops-use-case-body .ai-ops-uc-section--how-it-works .ai-ops-uc-shead--center {
    max-width: 900px;
}
.ai-ops-use-case-body .ai-ops-uc-howworks-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1140px;
}
.ai-ops-use-case-body .ai-ops-uc-howworks-pill {
    background: #272727;
    border: 1px solid #3b3b3b;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
/* Per-pill accent stripe at the top — matches the agents/we/you tri-color
   pattern used elsewhere in the design system. */
.ai-ops-use-case-body .ai-ops-uc-howworks-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ao-grad-primary, linear-gradient(245deg, #50d5ff 0%, #acb9ff 100%));
}
.ai-ops-use-case-body .ai-ops-uc-howworks-pill--we::before {
    background: linear-gradient(245deg, #a48bff 0%, #c1b3ff 100%);
}
.ai-ops-use-case-body .ai-ops-uc-howworks-pill--you::before {
    background: linear-gradient(245deg, #ffb547 0%, #ffd599 100%);
}
.ai-ops-use-case-body .ai-ops-uc-howworks-h {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: #a5a5a5;
    text-transform: uppercase;
    margin: 0;
}
.ai-ops-use-case-body .ai-ops-uc-howworks-p {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.46px;
    color: #ffffff;
    margin: 0;
}
@media (max-width: 940px) {
    .ai-ops-use-case-body .ai-ops-uc-howworks-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* v1.0.36 (audit F-084): mobile step for hero H1.
   Use-case CSS previously had no mobile breakpoint stepping the H1 down,
   so 48px persisted at all viewports. Step down at 940px (matching home /
   hub) and again at 480px for phones. */
@media (max-width: 940px) {
    .ai-ops-use-case-body .ai-ops-uc-hero-h1 {
        font-size: 40px;
        line-height: 1.15;
    }
}
@media (max-width: 480px) {
    .ai-ops-use-case-body .ai-ops-uc-hero-h1 {
        font-size: 30px;
        line-height: 1.15;
        letter-spacing: 0.6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO CAROUSEL (v1.4.0)
   2–4 photoreal tool screenshots showing the workflow's narrative,
   auto-rotating every 5s with dot navigation. Lives in the hero's right
   pane. Markup is conditionally emitted by 01-hero.php when slide files
   exist at assets/heroes/{role}/{slug}-slide-{N}.png. Hidden below 1300px
   viewport — text-only hero on mobile/tablet for PPC LCP performance.
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-ops-use-case-body .ai-ops-uc-section--hero {
    position: relative; /* anchor for absolute-positioned carousel */
}

.ai-ops-use-case-body .ai-ops-uc-section--hero > .ai-ops-uc-hero-carousel {
    /* Cancel the hero's 620px max-width constraint on direct children. */
    max-width: none;
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel {
    /* Right-anchor: 60px from edge at 1440 viewport, stays inside
       a centered 1440-equivalent box at wider viewports. Mirrors the
       same anchoring math used by `.ai-ops-uc-hero-mic` (mic button).
       v1.4.1: height bumped 440 → 490 to seat the stepper bar above
       the slide stage without shrinking the slide image area. */
    position: absolute;
    right: max(60px, calc(50% - 720px + 60px));
    top: 50%;
    transform: translateY(-50%);
    width: 620px;
    height: 490px;
    margin: 0;
    padding: 0;
    z-index: 1;
    font-family: var(--ao-font, inherit);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-ops-use-case-body .ai-ops-uc-hero-carousel-stage {
    position: relative;
    width: 100%;
    flex: 1; /* fills remaining vertical space after the stepper row */
    overflow: hidden;
    border-radius: 12px;
    background: rgba(8, 8, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ai-ops-use-case-body .ai-ops-uc-hero-carousel-slide {
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-slide img {
    width: 100%;
    height: 100%;
    /* v1.4.2: switched from `cover` to `contain` so the full tool screenshot
       is always visible (was cropping ~10px off each side because the 1536×1024
       source is wider than the ~620×426 stage). Tiny ~6px letterbox top/bottom
       blends with the stage's dark background. */
    object-fit: contain;
    object-position: center;
    display: block;
}

/* v1.4.1 — Stepper bar above the slide stage. Communicates the temporal
   sequence of events at-a-glance ("① Teams · You approve  →  ② Outlook ·
   Drafts ready") so the visitor reads the whole story even if they bounce
   before the carousel auto-advances. Each step is also a clickable jump
   target — same JS wiring as the prior dots, just labeled. */
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0;
    margin: 0;
}

.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(8, 8, 16, 0.55);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
    font-family: var(--ao-font, inherit);
    -webkit-appearance: none;
    appearance: none;
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step:hover {
    border-color: rgba(80, 213, 255, 0.55);
    background: rgba(80, 213, 255, 0.08);
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step:focus-visible {
    outline: 2px solid #50d5ff;
    outline-offset: 3px;
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step.is-active {
    border-color: #50d5ff;
    background: rgba(80, 213, 255, 0.14);
}

.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step.is-active .ai-ops-uc-hero-carousel-step-num {
    background: #50d5ff;
    border-color: #50d5ff;
    color: #0a0a14;
}

.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    transition: color 0.25s ease;
}
.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step.is-active .ai-ops-uc-hero-carousel-step-label {
    color: #ffffff;
}

.ai-ops-use-case-body .ai-ops-uc-hero-carousel-step-arrow {
    color: rgba(255, 255, 255, 0.35);
    font-size: 16px;
    line-height: 1;
    user-select: none;
}

/* Reduced motion: keep crossfade but slow it (matches JS slowdown to 8s) */
@media (prefers-reduced-motion: reduce) {
    .ai-ops-use-case-body .ai-ops-uc-hero-carousel-slide {
        transition: opacity 1.2s ease;
    }
}

/* Below 1300px viewport: hide the carousel — no horizontal room next to
   the 620px hero text frame. Mobile/tablet gets the fast text-only hero. */
@media (max-width: 1299px) {
    .ai-ops-use-case-body .ai-ops-uc-hero-carousel { display: none; }
}

/* ================================================================
   Engage Talk Card — per-role agent identity header
   Hub + use-case templates show the agent's avatar + name + tagline
   above the eyebrow. Home doesn't render this block (it ships the
   role-picker grid instead — see ai-ops-home.css).
   ================================================================ */

.ai-ops-uc-engage-agent {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
}

.ai-ops-uc-engage-agent-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.ai-ops-uc-engage-agent-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ai-ops-uc-engage-agent-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.ai-ops-uc-engage-agent-tagline {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

@media (max-width: 540px) {
    .ai-ops-uc-engage-agent-avatar {
        width: 48px;
        height: 48px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
 * UC hero — split mode (locked 2026-05-24)
 *
 * Hero copy on the left (eyebrow / H1 / sub / metric chip / CTA / "see
 * how it works" link), photorealistic per-UC image card anchored to the
 * right + vertical center of the section. The image is large enough
 * (~820 wide at the 1440 design canvas) that the in-tool details
 * (sender names, table rows, badges) remain readable; text column
 * tightens to ~500px so the two halves sit cleanly above the fold.
 *
 * Activated by the PHP partial when a per-UC hero image exists at
 * `assets/img/heroes/use-cases/{post-slug}-hero.{png|webp}` — the
 * partial adds `--hero-split` to the section's class list and emits an
 * `<img class="ai-ops-uc-hero-card">` direct child. UCs without an
 * image render as text-only hero.
 * ─────────────────────────────────────────────────────────────────── */

.ai-ops-use-case-body .ai-ops-uc-section--hero-split {
    position: relative;
    min-height: 620px;
}

/* Text column tightens in split mode so the larger image card on the
   right doesn't overlap. Default (text-only) heroes keep the original
   620 max-width. */
.ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-h1,
.ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-sub,
.ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-metric {
    max-width: 500px !important;
}

.ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-card {
    position: absolute;
    right: max(60px, calc(50% - 720px + 60px));
    top: 50%;
    transform: translateY(-50%);
    width: 820px;
    height: auto;            /* preserves source aspect ratio (3:2) */
    max-width: 58vw;         /* clamps gracefully at narrower viewports */
    border-radius: 14px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 1;
}

/* Below 1300px the image card hides; text stack carries the hero on
   tablet / mobile. Text max-width override also drops so the copy can
   use the natural section width. */
@media (max-width: 1300px) {
    .ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-card {
        display: none;
    }
    .ai-ops-use-case-body .ai-ops-uc-section--hero-split {
        min-height: 0;
    }
    .ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-h1,
    .ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-sub,
    .ai-ops-use-case-body .ai-ops-uc-section--hero-split .ai-ops-uc-hero-metric {
        max-width: 620px !important;
    }
}