/* ═══════════════════════════════════════════════════════════════════════════
   ai-ops-shared.css
   Design tokens, base typography, nav, footer.
   Loaded by every AI Ops template (Use Case now; Hub + Home later).
   Sources: Figma file vd1JgekqhxRltQFtcHRsXd, design tokens from get_design_context.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════ DESIGN TOKENS ══════════════════════
   v0.1.13 (2026-05-02): single source of truth for layout dimensions,
   colors, type, gradients. Scoped to .ai-ops-body so we don't pollute
   the rest of varyence.com. Every magic number used to live inline; now
   each lives once here and the rest of the CSS references via var().

   Coupling rule: when a layout dimension changes (e.g. nav height), only
   change it here — the dependent rules use calc(var(...)) and stay in sync.
   ─────────────────────────────────────────────────────── */
.ai-ops-body {
    /* ── Layout — geometry of the page chrome ── */
    --ao-nav-h:                80px;     /* top nav height */
    /* v1.0.11 (F-026): widened content column from 1140 → 1280 and trimmed
       section padding from 150 → 100 per Stas: "the whole content should
       be a bit wider, and the margin on the left or margin on the right
       should be smaller for the entire page. But not too much." This grows
       the design viewport from 1440 (= content 1140 + 2 × pad-x 150) to
       1480 (= content 1280 + 2 × pad-x 100). Half-width 740 (= 1480/2)
       lives in --ao-design-half-width below — every centered-1440-anchor
       calc should reference that var rather than the literal 720/740
       number, so future tweaks become a single-line change. */
    --ao-section-pad-x:        64px;     /* horizontal padding on every section. v1.3.4 (2026-05-15): 100→64. Pulls left-anchored hero copy + section heads closer to the viewport's left edge at all widths. Cascades to the nav (same centered-anchor formula) so the brand wordmark stays aligned with hero/section content. */
    --ao-section-pad-y:        72px;     /* vertical padding on every section. F-29 (2026-05-21): 100→72. Stas flagged that section spacing felt too generous on the home page — pages were scrolling further than the content warranted. Cascades to the hero pad-top calc on line 97. */
    --ao-content-max:        1280px;     /* default content max-width inside sections */
    --ao-design-half-width:   820px;     /* half of the design canvas. v1.3.4 (2026-05-15): 740→820. Widens the centered-content anchor at viewports >= ~1640 so hub heroes + sections shift visibly left on wide monitors instead of growing a 300+ px gutter. */
    --ao-hero-content-max:    620px;     /* hero content frame width (left-anchored) */
    --ao-shead-max:           900px;     /* section-header max-width */
    --ao-shead-sub-max:       720px;     /* section-header sub paragraph max-width */
    --ao-breadcrumb-y:         18px;     /* breadcrumb offset from hero section top (Figma) */

    /* ── Color ── */
    /* v1.3.8 (2026-05-18, UI-AUDIT UI-S13): page bg was #000000; CLAUDE.md
       spec is #101010. Switching the token so home / hubs / use cases /
       integrations all land on the spec color. Thank-you + 404 (which
       hardcoded #101010 in their own scoped styles) now resolve via the
       token automatically. */
    --ao-bg-page:        #101010;
    /* v1.0.4 (F-010): Figma "Secondary/2" — the dark gray every section in
       the use case page wants for its background. Sections previously used
       --ao-bg-page (#000000); switching to #1A1A1A directly via that token
       would cascade unexpectedly into fade-overlay anchor stops + the body
       fallback. New dedicated token instead. */
    --ao-bg-section:     #1A1A1A;
    --ao-bg-footer:      #0d0d0d;
    --ao-bg-card:        #272727;
    --ao-bg-card-bord:   #3b3b3b;
    /* v1.0.28: unified card radius across hub Benefits/Start/Callouts +
       use-case Related cards. Figma specs 16; previously hub literal was
       12 (drift). */
    --ao-card-radius:    16px;
    --ao-text-primary:   #ffffff;
    --ao-text-body:      #d2d2d2;
    --ao-text-muted:     #bcbcbc;
    --ao-text-faded:     #8f8f8f;
    --ao-text-accent:    #a5a5a5;
    --ao-link:           #51a1ff;
    --ao-link-hover:     #97c7ff;
    --ao-special-blue:   #97c7ff;
    --ao-button-dark:    #21054f;
    --ao-button-border:  #39acff;
    --ao-divider:        rgba(87, 87, 87, 0.5);

    /* ── Typography ── */
    --ao-font:        'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --ao-body-fs:     16px;
    --ao-body-lh:     1.7;
    --ao-body-ls:     0.32px;

    /* Alias `--font-sans` → Poppins. The agent-widget.css and agent.css were
       copied verbatim from the .NET prototype, where they reference
       `var(--font-sans, system-ui, ...)`. Without this alias they fall back
       to system-ui inside the agent panel — visually inconsistent with the
       rest of the page. Defining the variable here lets us keep the
       prototype source files unmodified. */
    --font-sans:      'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Gradients ── */
    --ao-grad-primary:         linear-gradient(245.45deg, #50d5ff 0%, #acb9ff 100%);
    --ao-grad-primary-tighter: linear-gradient(249.93deg, #50d5ff 0%, #acb9ff 100%);
    --ao-grad-secondary:       linear-gradient(251.02deg, rgba(88,185,255,0.1) 0%, rgba(69,233,255,0.1) 100%);

    /* v1.0.23 (F-042): the "luxury" JPEG previously hosted on .ai-ops-main
       was replaced with a pure-CSS gradient on each consuming section.
       The token name kept here for back-compat in case any external
       references exist, but it now resolves to `none`. The actual atmospheric
       gradient lives in the section rules (Hero/Mid-CTA/Engage) directly. */
    --ao-grad-luxury-img: none;

    /* ── Derived (computed from above; keep in sync via calc()) ── */
    --ao-hero-pad-top:    calc(var(--ao-nav-h) + var(--ao-section-pad-y));   /* 180 */
    --ao-breadcrumb-top:  calc(var(--ao-nav-h) + var(--ao-breadcrumb-y));    /* 98 */
}

/* ══════════════════════ THEME-LEAK DEFENSIVE RESET ══════════════════════
   v0.1.13: consolidates the patches that used to be scattered (v0.1.5,
   v0.1.7, v0.1.8). The varyence theme propagates these properties into
   our template via inheritance from <main> + .wp-block-group:
     - letter-spacing: 0.2px on <main>
     - line-height: 16px (= 1.0 cramped) on .wp-block-group + bare <p>
   Single block re-asserts our defaults for everything that participates
   in body-text inheritance. Specific overrides (eyebrow, heading, etc)
   keep winning on selector specificity.

   v0.1.23: also re-assert font-family on the elements where varyence
   theme leaks `-apple-system, system-ui, Segoe UI, Roboto, ...` —
   inputs, buttons, labels, links, list items. Without this, every
   form field, every nav link and every bullet renders in the system
   sans-serif instead of Poppins. !important because the theme's
   selectors are typically `body input { ... }` (specificity 0,0,2),
   and we want this reset to win unconditionally.
   ─────────────────────────────────────────────────── */
.ai-ops-body .ai-ops-main,
.ai-ops-body .ai-ops-uc-section,
.ai-ops-body .ai-ops-uc-section .wp-block-group,
.ai-ops-body .ai-ops-uc-section .wp-block-group__inner-container,
.ai-ops-body .ai-ops-uc-section p,
.ai-ops-body .ai-ops-uc-section a,
.ai-ops-body .ai-ops-uc-section li,
.ai-ops-body .ai-ops-uc-section span {
    line-height: var(--ao-body-lh);
    letter-spacing: var(--ao-body-ls);
}
.ai-ops-body input,
.ai-ops-body textarea,
.ai-ops-body select,
.ai-ops-body button,
.ai-ops-body label,
.ai-ops-body a,
.ai-ops-body li,
.ai-ops-body blockquote,
.ai-ops-body cite {
    font-family: var(--ao-font) !important;
}

/* ── Reset (scoped to body classes so we don't affect non-template pages) ── */
.ai-ops-body,
.ai-ops-body * {
    box-sizing: border-box;
}
.ai-ops-body {
    margin: 0;
    padding: 0;
    background: var(--ao-bg-page);
    color: var(--ao-text-body);
    font-family: var(--ao-font);
    font-size: var(--ao-body-fs);
    line-height: var(--ao-body-lh);
    letter-spacing: var(--ao-body-ls);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ai-ops-body h1,
.ai-ops-body h2,
.ai-ops-body h3,
.ai-ops-body h4,
.ai-ops-body h5,
.ai-ops-body h6,
.ai-ops-body p,
.ai-ops-body ul,
.ai-ops-body ol,
.ai-ops-body figure {
    margin: 0;
    padding: 0;
    font-family: var(--ao-font);
}
.ai-ops-body a {
    color: var(--ao-link);
    text-decoration: none;
    transition: color 0.15s ease;
}
.ai-ops-body a:hover {
    color: var(--ao-link-hover);
}

/* ── Eyebrow (shared across home / hub / use-case / integrations) ──
   v0.1.47: promoted from per-template scope (was duplicated under
   `.ai-ops-home-body` and `.ai-ops-use-case-body`; missing under
   `.ai-ops-hub-body`, which is why hub eyebrows rendered unstyled).
   Now scoped under `.ai-ops-body` so every plugin template gets the
   same dot+uppercase treatment. Per-section overrides (e.g. red dot
   on Problem section) stay in their template-specific CSS file. */
.ai-ops-body .ai-ops-uc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ao-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: #a5a5a5;
    margin: 0 0 16px;
}
.ai-ops-body .ai-ops-uc-eyebrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #51a1ff;
    flex-shrink: 0;
}
/* v1.0.4 (F-004): the `--chip` modifier is a no-op now. The pill border
   on the hero eyebrow has been removed; the eyebrow inherits the standard
   dot+uppercase treatment from `.ai-ops-uc-eyebrow` so every section
   eyebrow on the page (Hero / Three Steps / FAQ / etc.) renders
   identically. Kept the selector + an empty rule so existing markup with
   the `ai-ops-uc-eyebrow--chip` class still parses without warnings; the
   class no longer carries any visual delta. */
.ai-ops-body .ai-ops-uc-eyebrow--chip {
    /* intentionally empty — see comment above */
}

/* ── Type scale (Figma typography 2022) ── */
.ai-ops-body h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.96px;
    color: var(--ao-text-primary);
}
.ai-ops-body h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: var(--ao-text-primary);
}
.ai-ops-body h3 {
    font-size: 33px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.66px;
    color: var(--ao-text-primary);
}
.ai-ops-body h4 {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.46px;
    color: var(--ao-text-primary);
}

/* ── Buttons ── */
.ai-ops-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 8px;
    font-family: var(--ao-font);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.38px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-ops-btn-primary {
    background: var(--ao-grad-primary);
    color: var(--ao-button-dark);
}
/* v0.1.40 (FB-002 + FB-003 + FB-011): enforce dark-purple text on every
   primary blue gradient button — site-wide. Same pattern as .ai-ops-nav-cta;
   defeats varyence theme's `header a { color: ... }` inheritance that was
   silently overriding our color and turning button labels too light. The
   :link/:visited/:hover combo covers all link states the theme might target. */
.ai-ops-body .ai-ops-btn-primary,
.ai-ops-body .ai-ops-btn-primary:link,
.ai-ops-body .ai-ops-btn-primary:visited,
.ai-ops-body .ai-ops-btn-primary:hover,
.ai-ops-body .ai-ops-btn-primary:active {
    color: var(--ao-button-dark) !important;
}
.ai-ops-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(80, 213, 255, 0.30);
    color: var(--ao-button-dark);
}
.ai-ops-btn-secondary {
    background: var(--ao-grad-secondary);
    color: var(--ao-text-primary);
    border: 3px solid var(--ao-button-border);
    padding: 13px 29px; /* compensate for 3px border so visual height matches primary */
    line-height: 1.6;   /* Figma secondary = lh 1.6 (vs primary lh 1.4) */
    text-transform: capitalize; /* Figma applies CSS capitalize to secondary buttons */
}
.ai-ops-btn-secondary:hover {
    background: rgba(88, 185, 255, 0.2);
    color: var(--ao-text-primary);
}
/* Primary CTA gradient angle in Figma is 249.93deg (vs nav's 245.45deg).
   Apply tighter angle to hero/section primary buttons; nav stays at 245.45.
   v0.1.47: extended to cover hub-section primary buttons too — hub mid-CTA
   was previously rendering at the broader nav angle, which made the hover
   feel inconsistent with home's mid-CTA. Now hub buttons render at the
   same 249.93deg as home. */
.ai-ops-uc-cta-row .ai-ops-btn-primary,
.ai-ops-uc-mid-cta .ai-ops-btn-primary,
.ai-ops-h-section--midcta .ai-ops-btn-primary,
.ai-ops-hub-section--hero .ai-ops-btn-primary,
.ai-ops-hub-section--midcta .ai-ops-btn-primary,
.ai-ops-hub-section--engage .ai-ops-btn-primary {
    background: var(--ao-grad-primary-tighter);
}

/* ══════════════════════ NAV ══════════════════════
   Transparent overlay: position: absolute lets the nav float over the hero's
   gradient. Hero compensates for the nav height via padding-top calc(var())
   so the chrome and content stay coupled — change --ao-nav-h once and both
   the nav and the hero adjust together (no more cascade-fix bugs).
   ─────────────────────────────────────────────────── */
.ai-ops-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    z-index: 100;
}
/* F-26 (2026-05-30): top-bar scrim. The nav floats transparently over the
   hero; on BRIGHT heroes (e.g. the daytime hub poster scenes) the white nav
   links/wordmark lost contrast. A soft dark→transparent gradient band at the
   very top restores contrast everywhere — invisible on already-dark heroes
   (home), a subtle contrast band on bright ones. One global change, no JS,
   no per-page logic. Sits behind the nav content (z-index:-1), non-interactive. */
.ai-ops-nav::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 16, 0.55) 0%,
        rgba(8, 8, 16, 0.28) 45%,
        rgba(8, 8, 16, 0) 100%
    );
    pointer-events: none;
    z-index: -1;
}
/* Body anchors the absolute nav. */
.ai-ops-use-case-body { position: relative; }

.ai-ops-nav-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ao-nav-h);
    padding-top: 20px;
    padding-bottom: 20px;
    /* v1.0.4 (F-001a): anchor nav padding to the same centered 1440 reference
       the v1.0.3 hero fix uses. At ≤1440 viewport, padding stays at
       section-pad-x (150) on both sides. At wider viewports, padding grows
       by (viewport-1440)/2 so the brand wordmark sits at the same x as the
       H1/breadcrumb (which v1.0.3 anchored to a centered 1440 box) and
       the right-side CTA tracks the right edge of the same box. Pre-v1.0.4
       comment claimed the opposite alignment was correct; that was true
       only before v1.0.3 changed the hero anchoring. */
    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)));
    width: 100%;
    box-sizing: border-box;
}
.ai-ops-nav-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
/* v1.0.4 (F-001b): wordmark composed of three spans — brand name + middot
   + tagline. Tagline rendered at the brand-name's font-size minus 7 with
   a muted color so it reads as a secondary qualifier, not a second word.
   v1.0.11 (F-025): switched `align-items: baseline` → `center`. The
   baseline-aligned tagline visually appeared to sit below the brand
   name's midline because the two spans have different font weights/sizes
   (23 Bold vs 16 Regular) and Poppins's descender depth differs between
   weights. Center alignment is visually more balanced when sizes diverge. */
.ai-ops-nav-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ao-font);
    color: var(--ao-text-primary);
    /* Compensate for Poppins 'A' left side-bearing so the visual left edge
       of the glyph matches the breadcrumb/H1. */
    margin-left: -1px;
}
.ai-ops-nav-brand-name {
    font-weight: 700;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: 0.46px;
}
.ai-ops-nav-brand-sep {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.45);
}
.ai-ops-nav-brand-tag {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.32px;
    color: rgba(255, 255, 255, 0.65);
}
/* F-27 (2026-05-23): real Varyence wordmark SVG replaces the text-only
   ".ai-ops-nav-brand-tag" span. Height tuned to align cap height with
   the "AI Ops" name (~22px against 23px Poppins Bold). Width auto-derives
   from the intrinsic SVG aspect (173×44 native → ~86×22 at this height).
   `display: block` removes the inline-image baseline-gap so it aligns
   cleanly with the bold name inside the flex parent. */
.ai-ops-nav-brand-logo {
    display: block;
    height: 22px;
    width: auto;
    opacity: 0.9;
}
.ai-ops-nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
}
.ai-ops-nav-links a {
    font-family: var(--ao-font);
    font-weight: 400;
    font-size: 16px;
    color: var(--ao-text-primary);
    letter-spacing: var(--ao-body-ls);
    text-decoration: none;
    /* F-26 (2026-05-30): faint shadow as belt-and-suspenders with the
       top-bar scrim, so links stay legible on bright hero spots. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ai-ops-nav-links a:hover {
    color: var(--ao-link-hover);
}
/* F-26 follow-up (2026-05-21): .ai-ops-nav-cta rules retained for
   compatibility but the nav CTA button itself was removed. Any future
   template that wants a nav-level button can still apply this class.
   Responsive overrides below (line ~763 and ~816 in @media blocks) are
   kept for the same reason — harmless when the selector matches nothing.
   The F-15-era `white-space: nowrap` is dropped since no current rendered
   element relies on it. */
.ai-ops-nav-cta {
    height: 40px;
    padding: 8px 16px;
    font-size: 16px;
    line-height: var(--ao-body-lh);
    letter-spacing: var(--ao-body-ls);
    /* Force dark text — varyence theme's `header a` rule overrides our
       .ai-ops-btn-primary color without !important. */
    color: var(--ao-button-dark) !important;
}
.ai-ops-nav-cta:hover {
    color: var(--ao-button-dark) !important;
}

/* ── Hamburger menu (v0.1.34, BUG-025) ──
   Hidden by default; shown via the `display: inline-flex` rule in the
   ≤960px media query at the bottom of this file. CSS-only — uses native
   <details>/<summary> for the open/close state.
*/
.ai-ops-nav-menu {
    display: none;
    position: relative;
    margin-left: 16px;
}
.ai-ops-nav-menu > summary {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    list-style: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    box-sizing: border-box;
}
.ai-ops-nav-menu > summary::-webkit-details-marker { display: none; }
.ai-ops-nav-menu > summary::marker { content: ''; }
.ai-ops-nav-menu-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ao-text-primary);
    border-radius: 1px;
    transition: transform 160ms ease, opacity 160ms ease;
}
.ai-ops-nav-menu[open] .ai-ops-nav-menu-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ai-ops-nav-menu[open] .ai-ops-nav-menu-bar:nth-child(2) {
    opacity: 0;
}
.ai-ops-nav-menu[open] .ai-ops-nav-menu-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.ai-ops-nav-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 16px 0;
    background: var(--ao-bg-card, #1a1a1a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ao-card-radius);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 200;
}
.ai-ops-nav-menu-panel a {
    display: block;
    padding: 10px 20px;
    font-family: var(--ao-font);
    font-weight: 400;
    font-size: 16px;
    color: var(--ao-text-primary);
    letter-spacing: var(--ao-body-ls);
    text-decoration: none;
}
.ai-ops-nav-menu-panel a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ao-link-hover);
}
.ai-ops-nav-menu-h {
    margin: 12px 20px 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--ao-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a5a5a5;
}

/* ════════════════ F-16 MEGA-MENU ════════════════
   Use Cases mega-menu in the nav. Click-to-open desktop panel that drops
   below the nav header with 6 role tabs on the left, the active role's
   use cases in 2 columns in the middle, and a dark "AI agents work
   inside your tools" promo card on the right. Light-mode interior
   (white panel) per Figma node 29476:9157 even though the rest of the
   site is dark.

   Mobile is handled separately — the desktop megamenu hides at ≤960px
   and a <details> accordion inside the hamburger panel takes over.
   See `.ai-ops-nav-mobile-acc` rules below. */

/* Trigger button — visually matches the sibling <a> nav links */
.ai-ops-nav-megatrigger {
    background: none;
    border: 0;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ai-ops-nav-megatrigger:hover { color: var(--ao-link-hover); }
.ai-ops-nav-megatrigger:focus-visible {
    outline: 2px solid rgba(151, 199, 255, 0.6);
    outline-offset: 4px;
    border-radius: 4px;
}
.ai-ops-nav-megachev {
    display: inline-block;
    transition: transform 150ms ease;
    /* F-16 follow-up (2026-05-29): 2x larger (12px -> 24px) per Stas — the
       down chevron next to "Use Cases" was too small to read as a dropdown
       affordance. */
    font-size: 24px;
    line-height: 1;
}
.ai-ops-nav-megatrigger[aria-expanded="true"] .ai-ops-nav-megachev {
    transform: rotate(180deg);
}

/* Panel — drops below the nav header, full-width */
.ai-ops-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    color: #0e0e0e;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    z-index: 90;
}
.ai-ops-megamenu[hidden] { display: none; }

.ai-ops-megamenu-inner {
    /* F-16 follow-up (2026-05-23): widened the UC column area so longer
       titles fit on a single line. Three knobs combined:
         - max-width 1280 → 1440 (matches Figma canvas width)
         - horizontal padding clamp(64, 10vw, 150) → clamp(48, 5vw, 80)
         - roles column 200 → 180; promo column 360 → 300
         - column gap 48 → 32
       Net effect at 1440 viewport: UC area grew from ~324px to ~880px
       (~440px per UC column, more than 2× the prior width). Even the
       longest 23-char titles ("Marketing Ops Reporting") now fit on
       one line with room to spare. */
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px clamp(48px, 5vw, 80px);
    display: grid;
    grid-template-columns: 180px 1fr 300px;
    gap: 32px;
    align-items: stretch;
}

/* Left column: 6 role tabs stacked */
.ai-ops-megamenu-roles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid #e9e9e9;
    padding-right: 24px;
}
.ai-ops-megamenu-role {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #0e0e0e;
    /* F-16 follow-up (2026-05-29): role categories are now <a> hub links — kill
       the default underline so they keep the prior tab-button look. */
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.28px;
    text-align: left;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}
.ai-ops-megamenu-role:hover {
    background: rgba(81, 161, 255, 0.08);
}
.ai-ops-megamenu-role.is-active {
    background: #51a1ff;
    color: #fff;
}
.ai-ops-megamenu-role-arrow {
    opacity: 0;
    transition: opacity 100ms ease;
}
.ai-ops-megamenu-role.is-active .ai-ops-megamenu-role-arrow {
    opacity: 1;
}
.ai-ops-megamenu-role:focus-visible {
    outline: 2px solid rgba(81, 161, 255, 0.6);
    outline-offset: 2px;
}

/* Middle column: one pane per role (only one visible at a time) */
.ai-ops-megamenu-pane {
    min-height: 240px;
}
.ai-ops-megamenu-pane[hidden] { display: none; }

.ai-ops-megamenu-uclist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 4px;
}
.ai-ops-megamenu-uc {
    display: block;
    padding: 12px;
    border-radius: 4px;
    color: #0e0e0e;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: 0.28px;
    text-decoration: none;
    transition: background 100ms ease;
    /* F-16 follow-up (2026-05-23): never wrap UC titles. With the
       widened columns (see .ai-ops-megamenu-inner above), every current
       title fits on one line. If a future title is too long, it'll
       overflow (visible signal that the title needs trimming) rather
       than silently breaking into 2 lines. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-ops-megamenu-uc:hover {
    background: #f8f8f8;
}
.ai-ops-megamenu-uc:focus-visible {
    outline: 2px solid rgba(81, 161, 255, 0.6);
    outline-offset: -2px;
    background: #f8f8f8;
}

/* Right column: dark promo card. Background image is optional —
   if `mega-menu-promo-bg.webp` is missing the solid #121320 floor
   ensures the card still looks intentional. */
.ai-ops-megamenu-promo {
    background-color: #121320;
    background-image: url("../img/nav/mega-menu-promo-bg.webp");
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    padding: 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.ai-ops-megamenu-promo-h {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.38px;
    margin: 0;
    color: #fff;
}
.ai-ops-megamenu-promo-p {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.28px;
    margin: 0;
    color: #d2d2d2;
}

/* Mobile: hide the desktop megamenu entirely (the hamburger panel
   carries an HTML <details> accordion instead — no JS needed). */
@media (max-width: 960px) {
    .ai-ops-megamenu { display: none !important; }
}

/* Mobile accordion inside the hamburger panel. The outer <details> is
   "Use Cases"; each inner <details> is one role; the inner detail's
   content is a hub-link plus 8-10 UC links. */
.ai-ops-nav-mobile-acc {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    margin-top: 8px;
    padding-top: 8px;
}
.ai-ops-nav-mobile-acc > summary,
.ai-ops-nav-mobile-acc-inner > summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 20px;
    color: var(--ao-text-body);
    font-family: var(--ao-font);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: var(--ao-body-ls);
    position: relative;
}
/* Hide native disclosure marker; use a CSS chevron instead. */
.ai-ops-nav-mobile-acc > summary::-webkit-details-marker,
.ai-ops-nav-mobile-acc-inner > summary::-webkit-details-marker {
    display: none;
}
.ai-ops-nav-mobile-acc > summary::after,
.ai-ops-nav-mobile-acc-inner > summary::after {
    content: '▾';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 150ms ease;
    font-size: 12px;
    color: #a5a5a5;
}
.ai-ops-nav-mobile-acc[open] > summary::after,
.ai-ops-nav-mobile-acc-inner[open] > summary::after {
    transform: translateY(-50%) rotate(180deg);
}
.ai-ops-nav-mobile-acc-inner {
    padding-left: 16px;
}
.ai-ops-nav-mobile-acc-inner > a,
.ai-ops-nav-mobile-acc > details > a {
    display: block;
    padding: 8px 20px;
    color: var(--ao-text-body);
    font-size: 14px;
    text-decoration: none;
}
.ai-ops-nav-mobile-acc-inner > a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ao-link-hover);
}
.ai-ops-nav-mobile-acc-hub {
    font-style: italic;
    color: #a5a5a5 !important;
}

/* ══════════════════════ MAIN ══════════════════════
   <main> wraps every section. v1.0.23 (F-042): the luxury JPEG that used
   to live here was redundant — Hero/Mid-CTA/Engage sections all paint
   their own atmospheric backgrounds via pure CSS gradients now, so
   .ai-ops-main only needs the solid page bg color as a floor for any
   sections without their own background. */
.ai-ops-main {
    width: 100%;
    background-color: var(--ao-bg-page);
    color: var(--ao-text-body);
    font-family: var(--ao-font);
    font-size: var(--ao-body-fs);
}

/* ══════════════════════ HERO + FIRST-DARK-SECTION WRAPPER ══════════════════════
   Use-case + Hub templates wrap their first two sections (Hero + first
   dark section: Three Steps on use-case, Compare on hub) in a shared
   `.ai-ops-uc-top` div. This wrapper paints one continuous gradient
   canvas across both sections so the boundary between them is a tonal
   slope inside one surface instead of a seam between two adjacent bgs.

   The inner sections themselves stay `background: transparent`; the
   wrapper handles all atmospheric styling.

   v1.0.25: rule promoted from `.ai-ops-use-case-body .ai-ops-uc-top`
   (use-case-only) to `.ai-ops-body` scope so the hub template inherits
   the same wrapper behavior. */
.ai-ops-body .ai-ops-uc-top {
    position: relative;
    /* Final stop is explicitly #1a1a1a so the wrapper-end boundary
       blends with the next section's --ao-bg-section (also #1A1A1A).
       Every interpolation stop progresses monotonically toward
       #1a1a1a — no pixel reads darker than the target. */
    background-color: #1a1a1a;
    background-image:
        radial-gradient(ellipse 70% 60% at 92% 8%,
            rgba(80, 140, 200, 0.30)  0%,
            rgba(40,  80, 130, 0)    70%),
        radial-gradient(ellipse 60% 50% at 5% 25%,
            rgba(0, 0, 0, 0.40)  0%,
            rgba(0, 0, 0, 0)    70%),
        linear-gradient(180deg,
            #0e1224   0%,
            #11142a  20%,
            #14182e  40%,
            #161a2c  60%,
            #181a25  80%,
            #1a1a1a 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center, center, center;
    background-repeat: no-repeat;
}

/* ══════════════════════ ICON FRAME (shared) ══════════════════════
   v1.0.26 (F-048): reusable 56×56 glassmorphic icon frame used on
   hub Benefit cards + use-case Related Workflow cards. Icon glyph
   is a 24×24 SVG referenced via CSS-mask URL (set on the element
   via `--icon-url: url('../img/icons/{key}.svg')`). White-mask
   recolors the glyph to white regardless of source SVG fill.

   Usage:
   <div class="ai-ops-uc-icon-frame" style="--icon-url: url('.../clock.svg');"></div>
*/
.ai-ops-body .ai-ops-uc-icon-frame {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(25, 26, 27, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-ops-body .ai-ops-uc-icon-frame::before {
    content: '';
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    -webkit-mask: var(--icon-url, none) no-repeat center / contain;
            mask: var(--icon-url, none) no-repeat center / contain;
}

/* ══════════════════════ FOOTER ══════════════════════ */
.ai-ops-footer {
    width: 100%;
    background: var(--ao-bg-footer);
    border-top: 1px solid var(--ao-divider);
    padding: 40px 0;
    position: relative;
}
/* F-17 (2026-05-23): removed the v1.0.4-era 3px brand-gradient `::after`
   bar at the bottom edge — the new Figma (29132:1556) intentionally
   simplified the bottom edge to a clean #0e0e0e without the accent. */
/* v1.0.5 (F-024): footer-inner uses the same padding calc as the nav and
   hero section so the footer brand wordmark + columns + bottom row all sit
   at the same x as the rest of the page content on large viewports. The
   prior `max-width: 1440 + margin: auto` clamped footer content to a
   raw centered 1440 box (e.g. left=240 at 1920) while the brand at the
   top sits at left=390 — the misalignment was visible. */
.ai-ops-footer-inner {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    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)));
}
/* F-17 (2026-05-23): two-zone layout (brand left, nav-cols right) per
   Figma 29132:1556. Was a 3-col grid (`1fr 220px 220px`); the new flex
   shape uses `justify-content: space-between` so the brand block
   anchors left and the link-columns nav anchors right regardless of
   how wide the brand block grows. */
.ai-ops-footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 32px;
}
.ai-ops-footer-nav {
    display: flex;
    gap: 60px;
}
.ai-ops-footer-brand {
    max-width: 300px;
}
/* v1.0.4 (F-020): wordmark composed of three spans — brand name + middot
   + tagline ("by Varyence"). Mirrors the nav wordmark structure (F-001b). */
.ai-ops-footer-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--ao-font);
    color: var(--ao-text-primary);
    margin-bottom: 22px;
}
.ai-ops-footer-brand-name {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.44px;
}
.ai-ops-footer-brand-sep {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.45);
}
.ai-ops-footer-brand-tag {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.28px;
    color: rgba(255, 255, 255, 0.65);
}
/* F-17 (2026-05-23): tagline is now a 3-paragraph block per Figma so each
   sentence sits on its own line regardless of viewport width. The container
   gets a max-width matching the brand-column max so the visual rhythm
   matches the design (~280px wide). Was a single <p>. */
.ai-ops-footer-tagline {
    max-width: 280px;
}
.ai-ops-footer-tagline p {
    margin: 0;
    font-family: var(--ao-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.28px;
    color: var(--ao-text-body);
}
/* v1.0.4 (F-020): column heading uppercase + letter-spaced per Figma target. */
.ai-ops-footer-col-head {
    font-family: var(--ao-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ao-text-primary);
    margin-bottom: 18px;
}
.ai-ops-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ai-ops-footer-col li {
    margin-bottom: 14px;
}
.ai-ops-footer-col a {
    font-family: var(--ao-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.28px;
    /* F-17 (2026-05-23): link color #bcbcbc per Figma (was #d2d2d2 via
       --ao-text-body — a touch too bright). Hover still goes to white
       so the affordance is still clear on focus/hover. */
    color: var(--ao-text-muted);
    text-decoration: none;
}
.ai-ops-footer-col a:hover {
    color: var(--ao-text-primary);
}
.ai-ops-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--ao-divider);
}
.ai-ops-footer-credit,
.ai-ops-footer-meta {
    font-family: var(--ao-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.28px;
    margin: 0;
}
/* F-17 (2026-05-23): copyright text uses Figma's literal #737373
   (slightly darker than our existing --ao-text-faded #8f8f8f). Treated
   as a footer-scoped literal rather than a new token because nowhere
   else uses this exact shade. */
.ai-ops-footer-credit {
    color: #737373;
}
.ai-ops-footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.ai-ops-footer-meta a {
    /* F-17: link color #bcbcbc per Figma (was --ao-text-faded #8f8f8f). */
    color: var(--ao-text-muted);
    text-decoration: none;
}
.ai-ops-footer-meta a:hover {
    color: var(--ao-text-primary);
}
/* F-17 (2026-05-23): replaced the old textual .sep span with a real
   4×4 dot per Figma's `imgEllipse46` separator. Visually cleaner than
   a middle-dot character (which inherits link color and feels heavier). */
.ai-ops-footer-meta-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ao-text-muted);
    display: inline-block;
    flex-shrink: 0;
}

/* ══════════════════════ AGENT WIDGET OVERRIDES ══════════════════════
   v0.1.25: agent-widget.css is a verbatim copy from the .NET prototype —
   we keep it unchanged so future re-syncs are easy. Any WP-specific
   adjustments live here as overrides instead. Loaded after agent-widget.css
   so source order wins on equal specificity. */

/* Bigger panel — prototype sets 360px wide / no min-height; the
   visualizer canvas (220×220) + mic + transcript area + text input
   need more vertical room to read clean. */
.ai-ops-body .agent-widget-panel {
    width: 440px;
    min-height: 600px;
}

/* ══════════════════════ MOBILE ══════════════════════ */
@media (max-width: 960px) {
    .ai-ops-nav-inner {
        padding: 16px 24px;
    }
    .ai-ops-nav-links {
        display: none;
    }
    .ai-ops-nav-menu {
        display: inline-flex;
    }
    /* Keep CTA visible but compact at narrow widths so the hamburger has
       room. Drop the label to icon-only would over-rotate; this is the
       lighter touch. */
    .ai-ops-nav-cta {
        padding: 8px 12px;
    }
    .ai-ops-footer-inner {
        padding: 0 24px;
    }
    .ai-ops-footer-cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ai-ops-footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .ai-ops-body h1 {
        font-size: 36px;
    }
    .ai-ops-body h2 {
        font-size: 30px;
    }
}

/* ══════════════════════ A11Y UTILITY: screen-reader-text ══════════════════════
   F-099 + F-100 (2026-05-10): visually-hidden text for screen-readers.
   WP-core ships this class but only via admin/Gutenberg CSS, which our
   bypass-the-parent-theme templates don't load on the front-end. Pasted
   from the WP default (`wp-includes/css/dist/components/style.css`) so
   the empty <th> labels + integrations-cta orphan-h3 wrapper announce
   correctly without showing visually. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ══════════════════════ SUB-540 NAV (F-103) ══════════════════════
   At <=540px the nav at 960px collapse still over-runs: "AI Ops · by
   Varyence" wordmark wraps to 2 lines and "Submit a workflow brief" CTA
   truncates. Hide the CTA (engage is reachable via the hamburger panel)
   and drop the parent-brand tag so the wordmark reads "AI Ops" only.
   Tighten the horizontal padding to match phone-edge gutter.
   Affects home / integrations / thank-you primarily; hub + use-case were
   already coincidentally clean below 960. */
@media (max-width: 540px) {
    .ai-ops-nav-cta {
        display: none;
    }
    .ai-ops-nav-brand-sep,
    .ai-ops-nav-brand-tag {
        display: none;
    }
    .ai-ops-nav-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ══════════════════════ WP ADMIN BAR (logged-in admins) ══════════════════════ */
.admin-bar .ai-ops-body { padding-top: 0; }
.admin-bar .ai-ops-nav { /* let admin bar sit above; nothing needed here */ }


/* ═══════════════════════════════════════════════════════════════════════════
   v0.1.52 — CROSS-TEMPLATE CHROME (moved here from ai-ops-home.css)
   ═══════════════════════════════════════════════════════════════════════════
   These rules originally lived in ai-ops-home.css with the intent that the
   `.ai-ops-body` selector would let them apply on hub + use-case + integrations
   too. But because enqueue_assets() loads only the per-template stylesheet,
   home.css never reaches a hub page — so .ai-ops-body rules in home.css were
   home-only in practice. This caused two P1 bugs in v0.1.51 (Hub workflow
   card grid + Hub Human Control section both rendering chromeless).

   Rules below now live in shared.css (loaded by every AI Ops template), so
   `.ai-ops-body` scope works as intended cross-template. */

/* ── Section heading typography (was home.css:91-108) ─────────────────────── */
.ai-ops-body .ai-ops-h-h3 {
    font-family: var(--ao-font);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: var(--ao-text-primary);
    text-align: inherit;
}
.ai-ops-body .ai-ops-h-shead-sub {
    font-family: var(--ao-font);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--ao-text-body);
    max-width: var(--ao-shead-sub-max);
}

/* ── Card chrome reused by hub benefit cards + home problem cards
   (was home.css:608-616 + 655-663) ─────────────────────────────────────── */
.ai-ops-body .ai-ops-h-problem-card {
    background: var(--ao-bg-card);
    border: 1px solid #575757;
    border-radius: var(--ao-card-radius);
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ai-ops-body .ai-ops-h-problem-card-h {
    font-family: var(--ao-font);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.46px;
    color: #fff;
    margin: 0;
}

/* ── Human Control section + feature grid (was home.css:951-1031,
   re-scoped from .ai-ops-home-body to .ai-ops-body so hub also gets them
   via the new hub-sections/06b-human-control.php partial in v0.1.51).
   Section bg, 2×2 grid, illustration container, body typography. ─────── */
.ai-ops-body .ai-ops-h-section--control {
    background: #191a1b;
}
.ai-ops-body .ai-ops-h-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 40px;
}
.ai-ops-body .ai-ops-h-feat {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 203px;
}
.ai-ops-body .ai-ops-h-feat-illu {
    width: 222px;
    height: 180px;
    background-color: #0e0e0e;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--ao-card-radius);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.ai-ops-body .ao-illu--gate {
    background-image: url('../img/illustrations/control-01-approve-gate.svg');
    background-size: 184px 102px;
    background-position: center calc(50% + 13px);
}
.ai-ops-body .ao-illu--ask {
    background-image: url('../img/illustrations/control-02-ai-asks-human.png');
    background-size: contain;
}
.ai-ops-body .ao-illu--audit {
    background-image: url('../img/illustrations/control-03-audit-log.svg');
    background-size: 182px 100px;
}
.ai-ops-body .ao-illu--grid {
    background-image: url('../img/illustrations/control-04-tool-grid.png');
    background-size: contain;
}
.ai-ops-body .ai-ops-h-feat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.ai-ops-body .ai-ops-h-feat-h {
    font-family: var(--ao-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.38px;
    color: #fff;
    margin: 0;
}
.ai-ops-body .ai-ops-h-feat-text {
    font-family: var(--ao-font);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: var(--ao-text-body);
    margin: 0;
}

/* Responsive: stack feat grid below 940 (was home.css:1899-1916). */
@media (max-width: 940px) {
    .ai-ops-body .ai-ops-h-feat-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ai-ops-body .ai-ops-h-feat {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }
    .ai-ops-body .ai-ops-h-feat-illu {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES (v1.3.6, 2026-05-17, WP-AUDIT §4.3)

   - .ao-skip-link  Bypass-blocks anchor at the very top of <body> so
                    keyboard users can jump past the nav into the first
                    section. WCAG 2.1 success criterion 2.4.1.

   - .ao-sr-only    Screen-reader-only utility. Used to attach a visible-
                    only-to-AT <label> to form inputs that present a
                    placeholder visually. WCAG 3.3.2.

   - :focus-visible Global focus indicator. Replaces the browser default
                    1-pixel outline (which has poor contrast on the dark
                    Figma palette) with a high-contrast blue ring.
   ═══════════════════════════════════════════════════════════════════════════ */

.ao-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 16px;
    background: var(--ao-accent-blue, #39acff);
    color: #000;
    text-decoration: none;
    font-family: var(--ao-font, 'Poppins'), system-ui, sans-serif;
    font-weight: 600;
    border-radius: 0 0 6px 0;
    transition: left 120ms ease;
}
.ao-skip-link:focus,
.ao-skip-link:focus-visible {
    left: 0;
    outline: none;
}

.ao-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

*:focus-visible {
    outline: 2px solid var(--ao-accent-blue, #39acff);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Within form inputs, outline-offset 2px clips inside the input border
   on some browsers — pull the indicator inside the box for inputs. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v1.3.6 (2026-05-17, QA-AUDIT P2-5): visual indicator on nav anchors
   that jump cross-page from hub/use-case templates (e.g. "Comparison"
   from a use case sends you home). The page-aware logic in nav.php
   v1.0.36 already emits these as href="/#foo"; the ↗ glyph just makes
   the cross-page hop obvious before the click.
   ═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-body .ai-ops-nav-links a[href^="/#"]::after,
.ai-ops-body .ai-ops-nav-menu-panel a[href^="/#"]::after {
    content: " ↗";
    color: var(--ao-text-faded, #8f8f8f);
    font-size: 0.85em;
    margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.3.8 (2026-05-18, UI-AUDIT UI-S07): 404 page styling. Renders inside the
   full AI Ops chrome (nav + footer) so visitors who hit a dead URL have
   somewhere to go. Layout mirrors the use-case hero pattern but at smaller
   scale — single column, centered, generous vertical breathing room so the
   page reads as deliberate rather than half-broken.
   ═══════════════════════════════════════════════════════════════════════════ */
.ai-ops-body .ai-ops-404-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 80px;
}
.ai-ops-body .ai-ops-404-inner {
    max-width: 560px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.ai-ops-body .ai-ops-404-eyebrow {
    /* Reuses .ai-ops-uc-eyebrow base; just centers the chip. */
    align-self: center;
}
.ai-ops-body .ai-ops-404-h1 {
    font-family: var(--ao-font, 'Poppins'), system-ui, sans-serif;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ao-text, #f5f5f7);
    margin: 0;
    letter-spacing: -0.5px;
}
.ai-ops-body .ai-ops-404-sub {
    font-family: var(--ao-font, 'Poppins'), system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ao-text-muted, #b3b3bf);
    margin: 0;
}
.ai-ops-body .ai-ops-404-cta-row {
    margin-top: 8px;
}
@media (max-width: 640px) {
    .ai-ops-body .ai-ops-404-h1 { font-size: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — shared 4-step section · F-91 (2026-05-23)
   ----------------------------------------------------------------------------
   Rendered identically on home + every hub via the
   `aiops_how_it_works_section()` helper (functions.php) which includes
   `partials/how-it-works.php`. Rules promoted from `ai-ops-home.css`
   (`.ai-ops-home-body` scope) to here (`.ai-ops-body` scope) so the same
   section renders on every AI Ops template without duplicating CSS.
   ─────────────────────────────────────────────────────────────────────────── */
.ai-ops-body .ai-ops-h-section--hiw {
    /* v0.1.30: was var(--ao-bg-page) (#000); creating a visible seam against
       Problem (#191a1b above) and Mid-CTA (was #000 below). Unified to
       #191a1b to match the rest of the dark sections. */
    background: #191a1b;
}
.ai-ops-body .ai-ops-h-hiw-row {
    /* F-36/F-64 (2026-05-21): section moved from 3 illustrated steps to a
       4-step engagement lifecycle (engage → proposal → pilot → scale).
       Desktop renders all 4 in a single row; intermediate breakpoint at
       1100px collapses to 2×2; mobile (940px) stays at 1 column. */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}
/* F-08 (2026-05-28, v1.25.0 Figma Phase 1 follow-up): home page now
   tells a 3-step product mechanism instead of the 4-step engagement
   lifecycle hubs use, so it opts into a 3-up grid via this modifier.
   Hubs continue to render bare `.ai-ops-h-hiw-row` → 4-up.
   Responsive breakpoints below already target the base class, so 2×2
   at ≤1100px and 1-col at ≤940px apply to both variants automatically. */
.ai-ops-body .ai-ops-h-hiw-row--3up {
    grid-template-columns: repeat(3, 1fr);
}
.ai-ops-body .ai-ops-h-hiw-card {
    background: var(--ao-bg-card);
    border: 1px solid var(--ao-bg-card-bord);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ai-ops-body .ai-ops-h-hiw-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ai-ops-body .ao-step-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ao-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: var(--ao-text-accent);
    text-transform: uppercase;
    margin: 0;
}
.ai-ops-body .ao-step-eyebrow span {
    color: var(--ao-text-accent);
}
/* F-19 (2026-05-28, Stas): the step eyebrows ("STEP 1/2/3") carry the
   inline arrow `<img>` AND inherit the global `.ai-ops-uc-eyebrow::before`
   blue dot — two symbols to the left of the label. Suppress the dot here
   so the arrow is the single step indicator. Equal specificity to the
   dot rule (shared.css:202) but later in source order, so this wins.
   Applies to both home + hub HIW (they share `.ao-step-eyebrow`) for a
   consistent single-arrow treatment. */
.ai-ops-body .ao-step-eyebrow::before {
    content: none;
}
.ai-ops-body .ai-ops-h-hiw-h {
    font-family: var(--ao-font);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.46px;
    color: #fff;
    margin: 0;
}
.ai-ops-body .ai-ops-h-hiw-card p:not(.ao-step-eyebrow) {
    font-family: var(--ao-font);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: var(--ao-text-body);
    margin: 0;
}

@media (max-width: 1100px) {
    /* F-36/F-64: at this intermediate breakpoint, 4 cards across feel too
       tight (~245px wide each). Collapse to 2×2 so each card has breathing
       room without going straight to single-column. */
    .ai-ops-body .ai-ops-h-hiw-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 940px) {
    .ai-ops-body .ai-ops-h-hiw-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* F-08 (2026-05-28): home-only HIW footnote, centered under the 3-step
   grid. Matches the existing muted-line typography used elsewhere on the
   home (Targets sub copy, section subs) so it reads as a quiet reassurance
   line rather than a separate paragraph. */
.ai-ops-body .ai-ops-h-hiw-footnote {
    margin: 32px auto 0;
    max-width: 760px;
    text-align: center;
    font-family: var(--ao-font);
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.3px;
    color: var(--ao-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ — shared accordion section · F-92 (2026-05-23)
   ────────────────────────────────────────────────────────────────────────────
   Rendered identically on home + every hub via the `aiops_faq_section()`
   helper (functions.php) which includes `partials/faq.php`. Rules promoted
   from `ai-ops-home.css` (`.ai-ops-home-body` scope) to here (`.ai-ops-body`
   scope) so the accordion + chevron + answer typography render on every
   AI Ops template without duplication. Fixes the previously-broken hub FAQ
   (where none of these rules applied and the section degraded to raw
   browser `<details>` styling).
   ─────────────────────────────────────────────────────────────────────────── */
.ai-ops-body .ai-ops-h-section--faq {
    background: #191a1b;
}
.ai-ops-body .ai-ops-h-faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px !important;
    margin: 0 auto 48px !important;
}
.ai-ops-body .ai-ops-h-faq-item {
    background: var(--ao-bg-card);
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}
.ai-ops-body .ai-ops-h-faq-q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 32px;
    font-family: var(--ao-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.38px;
    color: #fff;
    margin: 0;
}
.ai-ops-body .ai-ops-h-faq-q::-webkit-details-marker { display: none; }
.ai-ops-body .ai-ops-h-faq-q-text {
    flex: 1;
    min-width: 0;
}
/* v0.1.41: chevron uses Iconly arrow-down.svg asset (extracted via Figma
   MCP from FAQ row, node 29132:1449). The SVG bakes in a white stroke and
   renders crisp at any DPR; rotate-on-open stays pure CSS. */
.ai-ops-body .ai-ops-h-faq-chevron {
    width: 19px;
    height: 11px;
    flex-shrink: 0;
    background: url('../img/icons/arrow-down.svg') center / contain no-repeat;
    transition: transform 0.2s ease;
}
.ai-ops-body .ai-ops-h-faq-item[open] .ai-ops-h-faq-chevron,
.ai-ops-body .ai-ops-h-faq-item[data-open="true"] .ai-ops-h-faq-chevron {
    transform: rotate(180deg);
}
.ai-ops-body .ai-ops-h-faq-a {
    font-family: var(--ao-font);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.32px;
    color: var(--ao-text-muted);
    padding: 0 32px 32px;
    margin: 0;
}
.ai-ops-body .ai-ops-h-faq-more {
    display: inline-flex;
    margin: 0 auto;
}

/* v1.25.0 (2026-05-28, Figma alignment Phase 1) — home-only "Show More"
   affordance. The `[data-faq-extra]` wrapper holds items beyond the
   threshold; the button toggles its `hidden` attribute (text swaps between
   Show More / Show Less). Uses display:contents on the wrapper so each
   inner <details> stays a direct child of the flex list and keeps its
   gap-16 rhythm. Button chrome mirrors the existing CTA-secondary look so
   it reads as an in-section affordance, not a primary CTA. */
.ai-ops-body .ai-ops-h-faq-extra {
    display: contents;
}
.ai-ops-body .ai-ops-h-faq-extra[hidden] {
    display: none;
}
.ai-ops-body .ai-ops-h-faq-showmore {
    align-self: center;
    margin: 8px auto 0;
    padding: 12px 28px;
    background: transparent;
    color: var(--ao-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ai-ops-body .ai-ops-h-faq-showmore:hover,
.ai-ops-body .ai-ops-h-faq-showmore:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
    outline: none;
}